stimeo-ui 0.5.0 → 0.6.0

package/dist/index.js

@@ -850,33 +850,41 @@ function visuallyHide(node) {
   style.clipPath = "inset(50%)";
   style.whiteSpace = "nowrap";
 }
+var DEFAULT_RATIO = "1 / 1";
+var RATIO_PROPERTY = "--stimeo--aspect-ratio";
+var CSS_NUMBER_PATTERN = /^[+-]?(?:\d+|\d*\.\d+)(?:[eE][+-]?\d+)?$/;
 var AspectRatioController = class extends Controller {
-  static targets = ["content"];
   static values = {
     ratio: { type: String, default: "1/1" }
   };
   /** Applies the ratio on connect and whenever the value changes. */
   ratioValueChanged() {
-    this.element.style.setProperty("--stimeo--aspect-ratio", this.#normalizeRatio(this.ratioValue));
+    this.element.style.setProperty(RATIO_PROPERTY, this.#normalizeRatio(this.ratioValue));
   }
   /**
    * Normalizes a ratio string to a valid CSS `<ratio>`:
-   * - `"16/9"` / `"16 / 9"` → `"16 / 9"` (both parts must be positive numbers)
-   * - `"1.5"` → `"1.5"` (a bare positive number)
+   * - `"16/9"` / `"16 / 9"` → `"16 / 9"` (both parts must be positive CSS numbers)
+   * - `"1.5"` → `"1.5"` (a bare positive CSS number)
    * - anything else → `"1 / 1"` (the default), so the custom property is always valid.
    */
   #normalizeRatio(raw) {
     const value = raw.trim();
     if (value.includes("/")) {
-      const [w, h] = value.split("/").map((part) => Number.parseFloat(part.trim()));
-      if (this.#isPositive(w) && this.#isPositive(h)) return `${w} / ${h}`;
-      return "1 / 1";
-    }
-    const single = Number.parseFloat(value);
-    return this.#isPositive(single) ? String(single) : "1 / 1";
-  }
-  #isPositive(value) {
-    return value !== void 0 && Number.isFinite(value) && value > 0;
+      const parts = value.split("/");
+      if (parts.length !== 2) return DEFAULT_RATIO;
+      const width = this.#parsePositiveNumber(parts[0] ?? "");
+      const height = this.#parsePositiveNumber(parts[1] ?? "");
+      return width !== void 0 && height !== void 0 ? `${width} / ${height}` : DEFAULT_RATIO;
+    }
+    const single = this.#parsePositiveNumber(value);
+    return single === void 0 ? DEFAULT_RATIO : String(single);
+  }
+  /** Parses one complete CSS `<number>` token and rejects units or trailing syntax. */
+  #parsePositiveNumber(raw) {
+    const token = raw.trim();
+    if (!CSS_NUMBER_PATTERN.test(token)) return void 0;
+    const value = Number(token);
+    return Number.isFinite(value) && value > 0 ? value : void 0;
   }
 };
 
@@ -1001,63 +1009,185 @@ var AutoSubmitController = class extends Controller {
     return this.onValue.split(/\s+/).filter(Boolean).includes(type);
   }
 };
+
+// src/utils/attribute_lease.ts
+var AttributeLease = class {
+  #attribute;
+  #records = /* @__PURE__ */ new Map();
+  /** @param attribute - The attribute whose temporary values this lease owns. */
+  constructor(attribute) {
+    this.#attribute = attribute;
+  }
+  /** Writes or removes the leased attribute while preserving its authored value. */
+  write(element, value) {
+    const existing = this.#records.get(element);
+    if (existing) {
+      existing.written = value;
+    } else {
+      this.#records.set(element, {
+        original: element.getAttribute(this.#attribute),
+        written: value
+      });
+    }
+    if (value === null) element.removeAttribute(this.#attribute);
+    else element.setAttribute(this.#attribute, value);
+  }
+  /** Returns one lease without overwriting a value subsequently authored by a consumer. */
+  return(element) {
+    const record = this.#records.get(element);
+    if (!record) return;
+    this.#records.delete(element);
+    if (element.getAttribute(this.#attribute) !== record.written) return;
+    if (record.original === null) element.removeAttribute(this.#attribute);
+    else element.setAttribute(this.#attribute, record.original);
+  }
+  /** Returns every outstanding lease using the same ownership check as {@link return}. */
+  returnAll() {
+    for (const element of Array.from(this.#records.keys())) this.return(element);
+  }
+};
+
+// src/controllers/avatar_controller.ts
 var AvatarController = class extends Controller {
   static targets = ["image", "fallback"];
-  static values = {
-    src: { type: String, default: "" }
-  };
+  static values = { src: String };
   static actions = ["onError", "onLoad"];
   static events = ["error"];
+  /** Collapses one morph's Value, target, and direct-attribute signals into one pass. */
+  #reconcile = new MicrotaskCoalescer(() => this.#render());
+  /** Preserves directly-authored source and visibility while targets are controlled. */
+  #src = new AttributeLease("src");
+  #imageHidden = new AttributeLease("hidden");
+  #fallbackHidden = new AttributeLease("hidden");
+  /** True only while target departure means ownership was actually relinquished. */
+  #connected = false;
+  /** Watches the non-Value render input used by the direct `<img src>` form. */
+  #srcObserver = new MutationObserver((records) => {
+    if (records.some((record) => this.hasImageTarget && record.target === this.imageTarget)) {
+      this.#reconcile.schedule();
+    }
+  });
+  /** Starts retained-DOM observation and silently derives the current phase. */
   connect() {
-    if (!this.hasImageTarget) {
-      this.#showFallback();
-      return;
+    this.#connected = true;
+    this.#reconcile.activate();
+    this.#srcObserver.observe(this.element, {
+      attributes: true,
+      attributeFilter: ["src"],
+      subtree: true
+    });
+    this.#render();
+  }
+  /** Cancels asynchronous work while retaining the last materialized visual state. */
+  disconnect() {
+    this.#connected = false;
+    this.#reconcile.cancel();
+    this.#srcObserver.disconnect();
+  }
+  /** Repaints when application code or a Turbo morph changes the source Value. */
+  srcValueChanged() {
+    this.#reconcile.schedule();
+  }
+  /** Applies the current source and phase to an image inserted or replaced at runtime. */
+  imageTargetConnected() {
+    this.#reconcile.schedule();
+  }
+  /** Returns attributes borrowed from an image that leaves this live avatar. */
+  imageTargetDisconnected(image) {
+    if (this.#connected) {
+      this.#src.return(image);
+      this.#imageHidden.return(image);
     }
-    if (this.srcValue) {
-      this.imageTarget.src = this.srcValue;
+    this.#reconcile.schedule();
+  }
+  /** Applies the current phase to a fallback inserted or replaced at runtime. */
+  fallbackTargetConnected() {
+    this.#reconcile.schedule();
+  }
+  /** Returns authored visibility when a fallback leaves this live avatar. */
+  fallbackTargetDisconnected(fallback) {
+    if (this.#connected) this.#fallbackHidden.return(fallback);
+    this.#reconcile.schedule();
+  }
+  /** Reveals the current image after its native `load` event. */
+  onLoad(event) {
+    const image = this.#eventImage(event);
+    if (!image) return;
+    if (!image.getAttribute("src")) {
+      this.#render();
+      return;
     }
-    const src = this.imageTarget.getAttribute("src");
+    this.#reflect("loaded");
+  }
+  /**
+   * Reveals the fallback after the current image's native `error` event.
+   *
+   * Dispatches `stimeo--avatar:error` with `{ src: string }`, where `src` is
+   * the attempted attribute value. Empty/stale/detached image events are ignored.
+   */
+  onError(event) {
+    const image = this.#eventImage(event);
+    if (!image) return;
+    const src = image.getAttribute("src");
     if (!src) {
-      this.#showFallback();
+      this.#render();
+      return;
+    }
+    this.#reflect("error");
+    this.dispatch("error", { detail: { src } });
+  }
+  /**
+   * Materializes the phase from the final source/target DOM after one mutation batch.
+   *
+   * Cached success and failure are state reconstruction, not new load events, so
+   * this pass never dispatches the public `error` event.
+   *
+   * @stimeoRenderRoot
+   */
+  #render() {
+    if (!this.hasImageTarget) {
+      this.#reflect("empty");
       return;
     }
-    if (this.imageTarget.complete && this.imageTarget.naturalWidth > 0) {
-      this.#showImage();
+    const image = this.imageTarget;
+    const src = this.#applySource(image);
+    if (!src) {
+      this.#reflect("empty");
       return;
     }
-    if (this.imageTarget.complete && this.imageTarget.naturalWidth === 0 && src) {
-      this.onError();
+    if (!image.complete) {
+      this.#reflect("loading");
       return;
     }
-    this.#enterLoading();
+    this.#reflect(image.naturalWidth > 0 ? "loaded" : "error");
   }
-  /** Reveals the image once it has loaded successfully. */
-  onLoad() {
-    this.#showImage();
-  }
-  /** Swaps to the fallback when the image fails and emits `error`. */
-  onError() {
-    const src = this.hasImageTarget ? this.imageTarget.getAttribute("src") ?? "" : "";
-    this.#showFallback();
-    this.dispatch("error", { detail: { src } });
-  }
-  /** Loading phase: keep the image visible (per markup) while it fetches. */
-  #enterLoading() {
-    if (this.hasImageTarget) this.imageTarget.hidden = false;
-    if (this.hasFallbackTarget) this.fallbackTarget.hidden = true;
-    this.element.setAttribute("data-state", "loading");
+  /** Applies Value precedence and returns the effective raw `src` attribute. */
+  #applySource(image) {
+    if (!this.element.hasAttribute("data-stimeo--avatar-src-value")) {
+      this.#src.return(image);
+      return image.getAttribute("src");
+    }
+    const desired = this.srcValue.length > 0 ? this.srcValue : null;
+    if (image.getAttribute("src") !== desired) this.#src.write(image, desired);
+    return desired;
   }
-  /** Loaded phase: image visible, fallback hidden. */
-  #showImage() {
-    if (this.hasImageTarget) this.imageTarget.hidden = false;
-    if (this.hasFallbackTarget) this.fallbackTarget.hidden = true;
-    this.element.setAttribute("data-state", "loaded");
+  /** Accepts an action only from the singular image target currently controlled. */
+  #eventImage(event) {
+    const candidate = event.currentTarget;
+    if (!(candidate instanceof HTMLImageElement)) return null;
+    if (!this.hasImageTarget || candidate !== this.imageTarget) return null;
+    return candidate;
   }
-  /** Error / no-src phase: fallback visible, image hidden. */
-  #showFallback() {
-    if (this.hasImageTarget) this.imageTarget.hidden = true;
-    if (this.hasFallbackTarget) this.fallbackTarget.hidden = false;
-    this.element.setAttribute("data-state", "error");
+  /** Writes the visibility pair and public root state as one controller-owned output. */
+  #reflect(state) {
+    const showImage = state === "loading" || state === "loaded";
+    if (this.hasImageTarget) {
+      this.#imageHidden.write(this.imageTarget, showImage ? null : "");
+    }
+    if (this.hasFallbackTarget) {
+      this.#fallbackHidden.write(this.fallbackTarget, showImage ? "" : null);
+    }
+    this.element.setAttribute("data-state", state);
   }
 };
 
@@ -1897,10 +2027,12 @@ var RovingTabindex = class {
    * "nothing is currently tabbable".
    *
    * @param index - Position of the item to make tabbable.
-   * @param options - Pass `{ focus: true }` to also move DOM focus to that item.
+   * @param options - Pass `{ focus: true }` to also move DOM focus to that item,
+   *   and `items` to reuse an event-scoped collection snapshot.
    */
-  setActive(index, { focus = false } = {}) {
-    const items = this.#getItems();
+  setActive(index, options = {}) {
+    const { focus = false } = options;
+    const items = options.items ?? this.#getItems();
     items.forEach((item, i) => {
       item.tabIndex = i === index ? 0 : -1;
     });
@@ -1931,9 +2063,14 @@ var CarouselController = class extends Controller {
     "resume",
     "togglePlay"
   ];
-  static events = ["change", "pause", "play"];
+  static events = ["change", "pause", "play", "reconcile"];
   #roving = new RovingTabindex(() => this.pickerTargets);
-  /** Gates the target callback so it does not repaint once per authored picker on mount. */
+  #reconcileTargets = new MicrotaskCoalescer(() => this.#reconcileTargetSet());
+  /**
+   * Whether `connect()` has run. Scheduling is already inert outside that window
+   * ({@link MicrotaskCoalescer}), so this only gates the Tab stop a picker
+   * present at mount authored for itself.
+   */
   #connected = false;
   #intervals = new SafeInterval();
   /** Index of the visible slide. */
@@ -1959,6 +2096,7 @@ var CarouselController = class extends Controller {
     this.#render({ focus: false });
     this.#syncTimer();
     this.#connected = true;
+    this.#reconcileTargets.activate();
   }
   /**
    * Re-establishes the single selected picker when one is added after connect.
@@ -1969,9 +2107,22 @@ var CarouselController = class extends Controller {
    * repaint re-derives every picker from `#index`, so a late arrival never steals
    * the selection.
    */
-  pickerTargetConnected() {
+  pickerTargetConnected(picker) {
     if (!this.#connected) return;
-    this.#render({ focus: false });
+    picker.tabIndex = -1;
+    this.#reconcileTargets.schedule();
+  }
+  /** Repairs selection and roving after a picker leaves a retained carousel. */
+  pickerTargetDisconnected() {
+    this.#reconcileTargets.schedule();
+  }
+  /** Reconciles a slide added in the same DOM batch as its picker. */
+  slideTargetConnected() {
+    this.#reconcileTargets.schedule();
+  }
+  /** Re-clamps the active index after a slide is removed. */
+  slideTargetDisconnected() {
+    this.#reconcileTargets.schedule();
   }
   /**
    * Resolves the starting autoplay intent. The play toggle's `aria-pressed` is the
@@ -1989,6 +2140,7 @@ var CarouselController = class extends Controller {
   /** Clears the autoplay interval so it never fires after teardown. */
   disconnect() {
     this.#connected = false;
+    this.#reconcileTargets.cancel();
     this.#intervals.clearAll();
     this.#timerId = null;
   }
@@ -2093,10 +2245,31 @@ var CarouselController = class extends Controller {
       slide.setAttribute("data-state", active ? "active" : "inactive");
       slide.hidden = !active;
     });
+    const pickerIndex = Math.min(this.#index, this.pickerTargets.length - 1);
     this.pickerTargets.forEach((picker, i) => {
-      picker.setAttribute("aria-selected", i === this.#index ? "true" : "false");
+      picker.setAttribute("aria-selected", i === pickerIndex ? "true" : "false");
     });
-    this.#roving.setActive(this.#index, { focus });
+    this.#roving.setActive(pickerIndex, { focus });
+  }
+  /** Keeps the live active slide when possible and otherwise selects the nearest survivor. */
+  #reconcileTargetSet() {
+    const activeSlide = this.slideTargets.findIndex(
+      (slide) => slide.getAttribute("data-state") === "active"
+    );
+    const selectedPicker = this.pickerTargets.findIndex(
+      (picker) => picker.getAttribute("aria-selected") === "true"
+    );
+    const lastSlide = this.slideTargets.length - 1;
+    const candidate = activeSlide !== -1 ? activeSlide : selectedPicker !== -1 ? selectedPicker : this.#index;
+    const previous = this.#index;
+    this.#index = lastSlide < 0 ? 0 : Math.min(lastSlide, Math.max(0, candidate));
+    this.#render({ focus: false });
+    this.#syncTimer();
+    if (this.#index !== previous) {
+      this.dispatch("reconcile", {
+        detail: { index: this.#index, total: this.slideTargets.length }
+      });
+    }
   }
   /**
    * Drives the autoplay interval toward the desired state. Autoplay should run
@@ -2232,14 +2405,51 @@ var CharacterCounterController = class _CharacterCounterController extends Contr
 var CheckboxController = class extends Controller {
   static targets = ["parent", "child"];
   static actions = ["onChildChange", "onParentChange"];
-  static events = ["change"];
-  /** Reflects the initial aggregate (e.g. from server-rendered child states). */
-  connect() {
-    if (this.childTargets.length > 0) {
-      this.#syncFromChildren(false);
-    } else {
-      this.element.setAttribute("data-state", this.#aggregate());
+  static events = ["change", "reconcile"];
+  /** Collapses every lifecycle signal from one DOM update into one derived pass. */
+  #reconcile = new MicrotaskCoalescer(() => this.#reconcileFromChildren());
+  /** Aggregate this root last settled on, so a derived repair is reported once. */
+  #committedState = null;
+  /** Watches authored checked-attribute changes on retained target elements. */
+  #checkedObserver = new MutationObserver((records) => {
+    if (records.some((record) => this.#isManagedCheckbox(record.target))) {
+      this.#reconcile.schedule();
     }
+  });
+  /** Reflects the initial aggregate and starts retained-DOM reconciliation. */
+  connect() {
+    this.#reconcile.activate();
+    this.#syncFromChildren();
+    this.#checkedObserver.observe(this.element, {
+      attributes: true,
+      attributeFilter: ["checked"],
+      subtree: true
+    });
+    this.element.addEventListener("turbo:morph-element", this.#onMorph);
+    document.addEventListener("reset", this.#onReset, true);
+  }
+  /** 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);
+  }
+  /** Reconciles the aggregate for a parent added or replaced at runtime. */
+  parentTargetConnected() {
+    this.#reconcile.schedule();
+  }
+  /** Reconciles the aggregate after a parent target leaves the group. */
+  parentTargetDisconnected() {
+    this.#reconcile.schedule();
+  }
+  /** Reconciles the aggregate for a child added at runtime. */
+  childTargetConnected() {
+    this.#reconcile.schedule();
+  }
+  /** Reconciles the aggregate after a child leaves the group. */
+  childTargetDisconnected() {
+    this.#reconcile.schedule();
   }
   /** Cascades the parent's state to every child. Bound via `data-action` (change). */
   onParentChange() {
@@ -2248,35 +2458,74 @@ var CheckboxController = class extends Controller {
     for (const child of this.childTargets) {
       child.checked = checked;
     }
-    this.parentTarget.indeterminate = false;
-    const state = checked ? "all" : "none";
-    this.element.setAttribute("data-state", state);
-    this.dispatch("change", { detail: { checked, indeterminate: false, state } });
+    this.#reflect(checked ? "all" : "none", true);
+    const detail = this.#settledDetail();
+    if (detail) this.dispatch("change", { detail });
   }
   /** Recomputes the parent from its children. Bound via `data-action` (change). */
   onChildChange() {
-    this.#syncFromChildren(true);
+    this.#syncFromChildren();
+    const detail = this.#settledDetail();
+    if (detail) this.dispatch("change", { detail });
+  }
+  /**
+   * Announces an aggregate this pass derived rather than the user. `change` stays
+   * reserved for the two public actions, so automation never reads a repair as an edit.
+   */
+  #reconcileFromChildren() {
+    const previous = this.#committedState;
+    this.#syncFromChildren();
+    if (this.#committedState === previous) return;
+    const detail = this.#settledDetail();
+    if (detail) this.dispatch("reconcile", { detail });
   }
   /**
    * Derives the parent's `checked`/`indeterminate` and the root `data-state` from
-   * the children, optionally dispatching `change`.
+   * the children. Writing state and reporting it are separate so the caller — not
+   * a flag threaded through the write — decides which event describes the cause.
+   */
+  #syncFromChildren() {
+    this.#reflect(this.#aggregate(), this.childTargets.length > 0);
+  }
+  /**
+   * Reflects one aggregate state.
+   *
+   * @param writeParent - whether the state is authoritative over the `parent`
+   * target's own `checked` / `indeterminate`.
    */
-  #syncFromChildren(dispatch) {
-    const state = this.#aggregate();
-    if (this.hasParentTarget) {
+  #reflect(state, writeParent) {
+    if (writeParent && this.hasParentTarget) {
       this.parentTarget.checked = state === "all";
       this.parentTarget.indeterminate = state === "partial";
     }
     this.element.setAttribute("data-state", state);
-    if (dispatch) {
-      this.dispatch("change", {
-        detail: {
-          checked: this.hasParentTarget ? this.parentTarget.checked : state === "all",
-          indeterminate: this.hasParentTarget ? this.parentTarget.indeterminate : false,
-          state
-        }
-      });
-    }
+    this.#committedState = state;
+  }
+  /** The settled aggregate as event detail, or `null` before anything has settled. */
+  #settledDetail() {
+    const state = this.#committedState;
+    if (state === null) return null;
+    return { checked: state === "all", indeterminate: state === "partial", state };
+  }
+  /** Reconciles retained targets after Turbo has finished morphing their live state. */
+  #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);
+  }
+  /** Whether an observed attribute mutation belongs to this controller's target set. */
+  #isManagedCheckbox(node) {
+    return this.parentTargets.some((checkbox) => checkbox === node) || this.childTargets.some((checkbox) => checkbox === node);
   }
   /**
    * Computes the aggregate state. With children it counts them; with none it
@@ -2681,7 +2930,7 @@ var ColorPickerController = class extends Controller {
     logicalTrack: { type: Boolean, default: false }
   };
   static actions = ["onHexInput", "onKeydown", "onPointerDown"];
-  static events = ["change"];
+  static events = ["change", "reconcile"];
   /** Whether the consumer declared a mirroring track and the direction mirrors it. */
   get #mirrored() {
     return this.logicalTrackValue && isRtl(this.element);
@@ -2690,14 +2939,14 @@ var ColorPickerController = class extends Controller {
   #color = { hue: 0, saturation: 0, lightness: 0, alpha: 100 };
   /** Aborts in-progress pointer-drag listeners on drag end / teardown. */
   #dragAbort = null;
-  /** Seeds the model from the initial hex value and renders every surface. */
+  /** Color the last repaint settled on, so a configuration-driven move is reported once. */
+  #committedHex = null;
   /**
    * Collapses a morph that swaps render inputs into one repaint, and refuses the
    * pass Stimulus delivers before `connect()`.
    */
-  #repaint = new MicrotaskCoalescer(() => {
-    this.#render();
-  });
+  #repaint = new MicrotaskCoalescer(() => this.#reconcileColor());
+  /** Seeds the model from the initial hex value and renders every surface. */
   connect() {
     this.#repaint.activate();
     const parsed = hexToHsla(this.valueValue);
@@ -2788,12 +3037,24 @@ var ColorPickerController = class extends Controller {
       return;
     }
     this.#color = this.alphaValue ? parsed : { ...parsed, alpha: 100 };
-    this.#render();
+    this.#commitColor();
   }
   /** 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)));
+    this.#commitColor();
+  }
+  /**
+   * 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.
+   */
+  #commitColor() {
+    const previous = this.#committedHex;
     this.#render();
+    if (this.#committedHex !== previous) {
+      this.dispatch("change", { detail: this.#settledDetail() });
+    }
   }
   /**
    * Reflects the model onto sliders, the hex input, preview, and form field.
@@ -2809,14 +3070,28 @@ var ColorPickerController = class extends Controller {
       slider.setAttribute("aria-valuetext", valueText(channel, value));
     }
     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);
+  }
+  /**
+   * 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.
+   */
+  #reconcileColor() {
+    const previous = this.#committedHex;
+    this.#render();
+    if (previous !== null && this.#committedHex !== previous) {
+      this.dispatch("reconcile", { detail: this.#settledDetail() });
+    }
+  }
+  /** The settled color as event detail, shared by both report paths. */
+  #settledDetail() {
     const rgb = hslToRgb(this.#color.hue, this.#color.saturation, this.#color.lightness);
-    this.dispatch("change", {
-      detail: { value: hex, rgba: { ...rgb, a: this.#color.alpha / 100 } }
-    });
+    return { value: this.#hexString(), rgba: { ...rgb, a: this.#color.alpha / 100 } };
   }
   /** The current color as `#RRGGBB`, or `#RRGGBBAA` when alpha is enabled. */
   #hexString() {
@@ -4663,15 +4938,35 @@ var DataGridController = class extends Controller {
     return cells[Math.min(col, cells.length - 1)];
   }
 };
+
+// src/utils/string_list.ts
+function parseStringList(raw, fallback = []) {
+  const text = raw.trim();
+  if (text.length === 0) return [...fallback];
+  let parsed;
+  try {
+    parsed = JSON.parse(text);
+  } catch {
+    return [...fallback];
+  }
+  if (!Array.isArray(parsed)) return [...fallback];
+  return parsed.filter((entry) => typeof entry === "string");
+}
+
+// src/controllers/date_range_picker_controller.ts
 var GRID_SIZE = 42;
 var DateRangePickerController = class extends Controller {
   static targets = ["grid", "monthLabel", "cell", "status", "startField", "endField"];
   static values = {
     min: { type: String, default: "" },
-    max: { type: String, default: "" }
+    max: { type: String, default: "" },
+    // A JSON list read through `parseStringList` rather than Stimulus's `Array`
+    // type: that reader throws out of the value observer before any callback
+    // runs, so one malformed attribute would stop the picker from connecting.
+    disabledDates: { type: String, default: "" }
   };
   static actions = ["applyPreset", "next", "onKeydown", "prev", "previewTo", "selectDate"];
-  static events = ["change"];
+  static events = ["change", "monthchange"];
   /** The month currently rendered, as `YYYY-MM`. */
   #viewMonth = "";
   /** The confirmed range endpoints (ISO), or "" when unset. */
@@ -4685,7 +4980,12 @@ var DateRangePickerController = class extends Controller {
   #focusedDate = /* @__PURE__ */ new Date();
   /** Deferred focus after an async month transition (cancelled on teardown). */
   #focusTimer = new SafeTimeout();
-  /** Seeds the range from any pre-filled hidden fields and renders the grid. */
+  /** The declared unavailable dates, indexed for the per-cell paint lookup. */
+  #disabledDates = /* @__PURE__ */ new Set();
+  /** Rewinds an unfinished selection before Turbo snapshots the page. */
+  #beforeCache = new BeforeCacheReset(() => this.#rewindForCache());
+  /** Last painted month, or `null` until the initial paint has settled. */
+  #announcedMonth = null;
   /**
    * Collapses a morph that swaps render inputs into one repaint, and refuses the
    * pass Stimulus delivers before `connect()`.
@@ -4693,10 +4993,17 @@ var DateRangePickerController = class extends Controller {
   #repaint = new MicrotaskCoalescer(() => {
     this.#render();
   });
+  /** Seeds and normalizes the range from optional hidden fields, then paints the grid. */
   connect() {
     this.#repaint.activate();
-    this.#startDate = this.hasStartFieldTarget ? normalizeISO(this.startFieldTarget.value) : "";
-    this.#endDate = this.hasEndFieldTarget ? normalizeISO(this.endFieldTarget.value) : "";
+    this.#beforeCache.activate();
+    const authoredStart = this.hasStartFieldTarget ? normalizeISO(this.startFieldTarget.value) : "";
+    const authoredEnd = this.hasEndFieldTarget ? normalizeISO(this.endFieldTarget.value) : "";
+    [this.#startDate, this.#endDate] = orderRange(authoredStart, authoredEnd);
+    this.#pendingStart = "";
+    this.#previewDate = "";
+    this.#announcedMonth = null;
+    this.#commitFields();
     const anchor = parseISODateString(this.#startDate) ?? this.#clampToBounds(/* @__PURE__ */ new Date()) ?? /* @__PURE__ */ new Date();
     this.#focusedDate = anchor;
     this.#viewMonth = toISOMonthString(anchor);
@@ -4706,6 +5013,7 @@ var DateRangePickerController = class extends Controller {
   /** Cancels any pending deferred focus so it never fires on a detached element. */
   disconnect() {
     this.#repaint.cancel();
+    this.#beforeCache.deactivate();
     this.#focusTimer.clearAll();
   }
   /** Repaints when application code (or a Turbo morph) changes `min` at runtime. */
@@ -4716,6 +5024,11 @@ var DateRangePickerController = class extends Controller {
   maxValueChanged() {
     this.#repaint.schedule();
   }
+  /** Re-indexes the unavailable dates and repaints when the declared set changes. */
+  disabledDatesValueChanged() {
+    this.#disabledDates = new Set(parseStringList(this.disabledDatesValue));
+    this.#repaint.schedule();
+  }
   /** Navigates to the previous month. */
   prev(event) {
     event?.preventDefault();
@@ -4731,7 +5044,7 @@ var DateRangePickerController = class extends Controller {
     const cell = this.#cellFrom(event.target);
     if (!cell) return;
     const date = cell.getAttribute("data-date");
-    if (!date || cell.getAttribute("aria-disabled") === "true") return;
+    if (!date || !this.#isSelectable(date)) return;
     this.#choose(date);
   }
   /** Previews the range up to a hovered/focused cell while selecting. */
@@ -4740,28 +5053,27 @@ var DateRangePickerController = class extends Controller {
     if (!cell) return;
     const date = cell.getAttribute("data-date");
     if (!date) return;
+    let shouldRender = false;
     if (event.type.startsWith("focus")) {
       const parsed = parseISODateString(date);
       if (parsed) this.#focusedDate = parsed;
-      if (!this.#pendingStart && cell.getAttribute("tabindex") !== "0") {
-        this.#render();
-      }
+      shouldRender = cell.getAttribute("tabindex") !== "0";
     }
-    if (this.#pendingStart) {
+    if (this.#pendingStart && this.#isSelectable(date) && this.#previewDate !== date) {
       this.#previewDate = date;
-      this.#render();
+      shouldRender = true;
     }
+    if (shouldRender) this.#render();
   }
   /** Applies a named preset (`today` / `last7` / `last30` / `thisMonth`). */
   applyPreset(event) {
     const button = event.target?.closest("[data-range]");
-    const name = button?.getAttribute("data-range");
-    if (!name) return;
-    const range = computePreset(name);
+    const range = computePreset(button?.getAttribute("data-range") ?? "");
     if (!range) return;
-    const start = this.#clampISO(range.start);
-    const end = this.#clampISO(range.end);
-    if (!start || !end) return;
+    const intersection = this.#intersectRange(range);
+    if (!intersection) return;
+    const { start, end } = intersection;
+    if (!this.#isSelectable(start) || !this.#isSelectable(end)) return;
     this.#startDate = start;
     this.#endDate = end;
     this.#pendingStart = "";
@@ -4779,12 +5091,12 @@ var DateRangePickerController = class extends Controller {
     if (isReservedArrowChord(event)) return;
     const cell = this.#cellFrom(event.target);
     if (!cell) return;
-    const dateStr = cell.getAttribute("data-date");
-    const date = dateStr ? parseISODateString(dateStr) : null;
+    const dateStr = cell.getAttribute("data-date") ?? "";
+    const date = parseISODateString(dateStr);
     if (!date) return;
     if (event.key === "Enter" || event.key === " ") {
       event.preventDefault();
-      if (dateStr && cell.getAttribute("aria-disabled") !== "true") this.#choose(dateStr);
+      if (this.#isSelectable(dateStr)) this.#choose(dateStr);
       return;
     }
     if (event.key === "Escape") {
@@ -4817,10 +5129,10 @@ var DateRangePickerController = class extends Controller {
         next = addDays(date, 6 - date.getDay());
         break;
       case "PageUp":
-        next = shiftMonthClamped(date, -1);
+        next = event.shiftKey ? shiftYearClamped(date, -1) : shiftMonthClamped(date, -1);
         break;
       case "PageDown":
-        next = shiftMonthClamped(date, 1);
+        next = event.shiftKey ? shiftYearClamped(date, 1) : shiftMonthClamped(date, 1);
         break;
       default:
         return;
@@ -4851,12 +5163,14 @@ var DateRangePickerController = class extends Controller {
   /** Moves roving focus to `date`, transitioning the month when needed. */
   #moveFocusTo(date) {
     this.#focusedDate = date;
-    if (this.#pendingStart) this.#previewDate = toISODateString(date);
-    this.#transitionTo(toISOMonthString(date), toISODateString(date));
+    const iso = toISODateString(date);
+    if (this.#pendingStart && this.#isSelectable(iso)) this.#previewDate = iso;
+    this.#transitionTo(toISOMonthString(date), iso);
   }
   /** Renders `month`, then focuses the cell for `dateStr` (deferred if async). */
   #transitionTo(month, dateStr) {
     const isTransition = month !== this.#viewMonth;
+    this.#focusTimer.clearAll();
     this.#viewMonth = month;
     this.#render();
     const focusCell = () => {
@@ -4888,17 +5202,19 @@ var DateRangePickerController = class extends Controller {
     const info = parseISOMonthString(this.#viewMonth);
     if (!info) return;
     const { year, month } = info;
+    if (this.#previewDate && !this.#isSelectable(this.#previewDate)) this.#previewDate = "";
     if (this.hasMonthLabelTarget) {
       const lang = document.documentElement.lang || "en";
-      const formatter = new Intl.DateTimeFormat(lang, { month: "long", year: "numeric" });
+      const formatter = monthFormatter(lang);
       this.monthLabelTarget.textContent = formatter.format(new Date(year, month - 1, 1));
     }
     const [rangeStart, rangeEnd] = this.#visualRange();
     const days = gridDays(year, month);
     const focusedStr = toISODateString(this.#focusedDate);
     const todayStr = toISODateString(/* @__PURE__ */ new Date());
+    const cells = this.cellTargets;
     for (let i = 0; i < GRID_SIZE; i++) {
-      const el = this.cellTargets[i];
+      const el = cells[i];
       const date = days[i];
       if (!el || !date) continue;
       const iso = toISODateString(date);
@@ -4907,8 +5223,8 @@ var DateRangePickerController = class extends Controller {
       el.setAttribute("data-outside", String(date.getMonth() !== month - 1));
       el.setAttribute("data-today", String(iso === todayStr));
       el.setAttribute("tabindex", iso === focusedStr ? "0" : "-1");
-      if (this.#outOfBounds(iso)) el.setAttribute("aria-disabled", "true");
-      else el.removeAttribute("aria-disabled");
+      if (this.#isSelectable(iso)) el.removeAttribute("aria-disabled");
+      else el.setAttribute("aria-disabled", "true");
       const isStart = !!rangeStart && iso === rangeStart;
       const isEnd = !!rangeEnd && iso === rangeEnd && rangeEnd !== rangeStart;
       const inside = !!rangeStart && !!rangeEnd && iso > rangeStart && iso < rangeEnd;
@@ -4922,6 +5238,16 @@ var DateRangePickerController = class extends Controller {
         )
       );
     }
+    for (const extra of cells.slice(GRID_SIZE)) extra.setAttribute("tabindex", "-1");
+    if (!cells.some((cell) => cell.getAttribute("tabindex") === "0")) {
+      const fallback = cells.find((cell) => cell.getAttribute("data-outside") === "false") ?? cells[0];
+      fallback?.setAttribute("tabindex", "0");
+    }
+    const previous = this.#announcedMonth;
+    this.#announcedMonth = this.#viewMonth;
+    if (previous !== null && previous !== this.#viewMonth) {
+      this.dispatch("monthchange", { detail: { month: this.#viewMonth } });
+    }
   }
   /** The ordered [start, end] pair to paint: the preview while selecting, else confirmed. */
   #visualRange() {
@@ -4942,15 +5268,25 @@ var DateRangePickerController = class extends Controller {
       this.statusTarget.textContent = `${this.#startDate} \u2013 ${this.#endDate}`;
     }
   }
+  /**
+   * True when `iso` may be chosen as a range endpoint.
+   *
+   * The single availability question in the controller: the grid paint, the
+   * preview, and both commit paths ask it, so a cell's `aria-disabled` and what
+   * a click on that cell does are the same decision rather than two that have to
+   * be kept in step.
+   */
+  #isSelectable(iso) {
+    return !this.#outOfBounds(iso) && !this.#disabledDates.has(iso);
+  }
   /** True when `iso` falls outside the `[min, max]` bounds. */
   #outOfBounds(iso) {
     if (this.minValue && iso < this.minValue) return true;
     if (this.maxValue && iso > this.maxValue) return true;
     return false;
   }
-  /** Clamps an ISO date string into `[min, max]`, or "" when unparseable. */
+  /** Clamps a generated ISO date string into `[min, max]`. */
   #clampISO(iso) {
-    if (!iso) return "";
     if (this.minValue && iso < this.minValue) return this.minValue;
     if (this.maxValue && iso > this.maxValue) return this.maxValue;
     return iso;
@@ -4960,6 +5296,27 @@ var DateRangePickerController = class extends Controller {
     const clamped = this.#clampISO(toISODateString(date));
     return parseISODateString(clamped);
   }
+  /**
+   * Intersects a preset with `[min, max]`, rejecting a disjoint interval.
+   *
+   * Only the bounds narrow a preset here: `disabledDates` excludes single days,
+   * not sub-intervals, so it cannot shrink one to a still-contiguous range. A
+   * day it excludes is still refused as an endpoint — the caller checks that —
+   * but a preset that merely spans one keeps its span.
+   */
+  #intersectRange(range) {
+    const start = this.minValue && range.start < this.minValue ? this.minValue : range.start;
+    const end = this.maxValue && range.end > this.maxValue ? this.maxValue : range.end;
+    return start <= end ? { start, end } : null;
+  }
+  /** Removes provisional range state before Turbo freezes a cached snapshot. */
+  #rewindForCache() {
+    this.#focusTimer.clearAll();
+    if (!this.#pendingStart && !this.#previewDate) return;
+    this.#pendingStart = "";
+    this.#previewDate = "";
+    this.#render();
+  }
   /** Resolves the cell element from an event target, or null. */
   #cellFrom(target) {
     return target?.closest(
@@ -4978,6 +5335,12 @@ function shiftMonthClamped(date, delta) {
   target.setDate(Math.min(date.getDate(), lastDay));
   return target;
 }
+function shiftYearClamped(date, delta) {
+  const target = new Date(date.getFullYear() + delta, date.getMonth(), 1);
+  const lastDay = new Date(target.getFullYear(), target.getMonth() + 1, 0).getDate();
+  target.setDate(Math.min(date.getDate(), lastDay));
+  return target;
+}
 function gridDays(year, month) {
   const first = new Date(year, month - 1, 1);
   const start = new Date(first);
@@ -4994,6 +5357,18 @@ function normalizeISO(value) {
   const date = parseISODateString(value.trim());
   return date ? toISODateString(date) : "";
 }
+function orderRange(start, end) {
+  return start && end && end < start ? [end, start] : [start, end];
+}
+function monthFormatter(locale) {
+  const options = { month: "long", year: "numeric" };
+  try {
+    return new Intl.DateTimeFormat(locale, options);
+  } catch (error) {
+    if (!(error instanceof RangeError)) throw error;
+    return new Intl.DateTimeFormat("en", options);
+  }
+}
 function computePreset(name) {
   const today = /* @__PURE__ */ new Date();
   const todayStr = toISODateString(today);
@@ -5965,18 +6340,38 @@ var FileDropzoneController = class extends Controller {
   static events = ["change", "reject"];
   /** Selected files paired with their rendered item and any preview objectURL. */
   #entries = [];
+  /** Prevents initial and teardown target callbacks from binding outside controller lifetime. */
+  #connected = false;
   /** Wires file removal as a delegated listener on the list container. */
   connect() {
-    if (this.hasListTarget) this.listTarget.addEventListener("click", this.#onItemClick);
+    this.#connected = true;
+    if (this.hasListTarget) this.#bindList(this.listTarget);
   }
   /** Revokes any outstanding preview URLs so none leaks across navigations. */
   disconnect() {
-    if (this.hasListTarget) this.listTarget.removeEventListener("click", this.#onItemClick);
+    this.#connected = false;
+    for (const list of this.listTargets) list.removeEventListener("click", this.#onItemClick);
     for (const entry of this.#entries) {
       if (entry.url) URL.revokeObjectURL(entry.url);
     }
     this.#entries.length = 0;
   }
+  /** Rebinds removal and restores client-only previews when Turbo replaces the list target. */
+  listTargetConnected(list) {
+    if (!this.#connected) return;
+    this.#bindList(list);
+  }
+  /** Releases only the list target that actually disconnected. */
+  listTargetDisconnected(list) {
+    list.removeEventListener("click", this.#onItemClick);
+  }
+  /** Binds delegated removal once and moves live preview items into the current list. */
+  #bindList(list) {
+    list.addEventListener("click", this.#onItemClick);
+    for (const entry of this.#entries) {
+      if (!list.contains(entry.item)) list.appendChild(entry.item);
+    }
+  }
   /** Opens the native file dialog. Bound via `data-action` (trigger click). */
   openDialog() {
     this.inputTarget.click();
@@ -6008,8 +6403,11 @@ var FileDropzoneController = class extends Controller {
    * an item is appended without waiting on Stimulus to wire a freshly created element.
    */
   #onItemClick = (event) => {
+    const list = event.currentTarget;
     const button = event.target.closest("button");
-    if (!button || !this.hasListTarget || !this.listTarget.contains(button)) return;
+    if (!this.#connected || !list || !button || !this.hasListTarget || list !== this.listTarget || !list.contains(button)) {
+      return;
+    }
     const index = this.#entries.findIndex((entry) => entry.item.contains(button));
     if (index !== -1) this.#removeAt(index);
   };
@@ -7403,14 +7801,22 @@ var HoverCardController = class extends Controller {
     return this.hasCardTarget && !this.cardTarget.hidden;
   }
 };
+var DEFAULT_ACTIVITY_EVENTS = [
+  "mousemove",
+  "mousedown",
+  "keydown",
+  "wheel",
+  "touchstart",
+  "scroll"
+];
 var IdleController = class extends Controller {
   static values = {
     timeout: { type: Number, default: 9e5 },
     promptBefore: { type: Number, default: 0 },
-    events: {
-      type: Array,
-      default: ["mousemove", "mousedown", "keydown", "wheel", "touchstart", "scroll"]
-    }
+    // A JSON list read through `parseStringList` rather than Stimulus's `Array`
+    // type: that reader throws out of the value observer before any callback
+    // runs, so one malformed attribute would stop the detector connecting.
+    events: { type: String, default: "" }
   };
   static events = ["prompt", "idle", "active"];
   #timeouts = new SafeTimeout();
@@ -7441,7 +7847,7 @@ var IdleController = class extends Controller {
     this.#idle = false;
     this.#prompted = false;
     this.element.removeAttribute("data-idle");
-    this.#boundEvents = [...this.eventsValue];
+    this.#boundEvents = parseStringList(this.eventsValue, DEFAULT_ACTIVITY_EVENTS);
     for (const type of this.#boundEvents) {
       document.addEventListener(type, this.#onActivity, { passive: true, capture: true });
     }
@@ -7754,7 +8160,7 @@ var IntersectionWatcher = class {
 };
 
 // src/controllers/intersection_controller.ts
-var RATIO_PROPERTY = "--stimeo--intersection-ratio";
+var RATIO_PROPERTY2 = "--stimeo--intersection-ratio";
 var RATIO_EPSILON = 0.01;
 var IntersectionController = class extends Controller {
   static values = {
@@ -7779,7 +8185,7 @@ var IntersectionController = class extends Controller {
       const ratio = entry.intersectionRatio;
       const threshold = this.#effectiveThreshold;
       const intersecting = threshold > 0 ? entry.isIntersecting && ratio >= threshold - RATIO_EPSILON : entry.isIntersecting;
-      this.element.style.setProperty(RATIO_PROPERTY, String(ratio));
+      this.element.style.setProperty(RATIO_PROPERTY2, String(ratio));
       this.dispatch("change", { detail: { intersecting, ratio } });
       this.#syncIntersecting(intersecting, ratio, entry);
       this.#syncPassed(!intersecting && isBeforeRootStart(entry));
@@ -9418,10 +9824,148 @@ var MeterController = class extends Controller {
   }
 };
 
+// src/utils/chip_row.ts
+var ChipRow = class {
+  #directionElement;
+  #getItems;
+  #getButton;
+  #onRemove;
+  #focusAfterEnd;
+  #roving = new RovingTabindex(() => this.buttons);
+  #container = null;
+  constructor(options) {
+    this.#directionElement = options.directionElement;
+    this.#getItems = options.getItems;
+    this.#getButton = options.getButton ?? ((item) => item.querySelector("button"));
+    this.#onRemove = options.onRemove;
+    this.#focusAfterEnd = options.focusAfterEnd;
+  }
+  /**
+   * Binds delegation to `container`; any row currently bound is released first.
+   * Idempotent for the same node, so target callbacks may call it freely.
+   */
+  connect(container) {
+    if (this.#container === container) return;
+    this.disconnect();
+    this.#container = container;
+    container.addEventListener("click", this.#onClick);
+    container.addEventListener("keydown", this.#onKeydown);
+  }
+  /**
+   * Releases the current row. When `container` is supplied, a stale disconnect
+   * callback cannot tear listeners off a newer replacement target.
+   */
+  disconnect(container) {
+    const current = this.#container;
+    if (!current || container !== void 0 && current !== container) return;
+    current.removeEventListener("click", this.#onClick);
+    current.removeEventListener("keydown", this.#onKeydown);
+    this.#container = null;
+  }
+  /** Current remove buttons, at most one consumer-resolved button per chip item. */
+  get buttons() {
+    return this.#entries.map(({ button }) => button);
+  }
+  /** Number of currently navigable remove buttons. */
+  get length() {
+    return this.buttons.length;
+  }
+  /** Declared-item index of the last navigable chip, or `-1` for an empty row. */
+  get lastIndex() {
+    return this.#entries.at(-1)?.itemIndex ?? -1;
+  }
+  /** Keeps exactly one button tabbable, preferring the first authored Tab stop. */
+  ensureTabStop() {
+    const buttons = this.#entries.map(({ button }) => button);
+    const active = buttons.findIndex((button) => button.tabIndex === 0);
+    const count = buttons.filter((button) => button.tabIndex === 0).length;
+    if (buttons.length > 0 && count !== 1) {
+      this.#roving.setActive(active === -1 ? 0 : active, { items: buttons });
+    }
+  }
+  /** Focuses the last chip, returning false for an empty row. */
+  focusLast() {
+    const buttons = this.#entries.map(({ button }) => button);
+    const last = buttons.length - 1;
+    if (last < 0) return false;
+    this.#roving.setActive(last, { focus: true, items: buttons });
+    return true;
+  }
+  /**
+   * Focuses the chip that followed a removed index, or the new last chip.
+   * Returns false when removal emptied the row so the consumer can rescue focus.
+   */
+  focusAfterRemoval(index) {
+    const entries = this.#entries;
+    if (entries.length === 0) return false;
+    const following = entries.findIndex((entry) => entry.itemIndex >= index);
+    this.#roving.setActive(following === -1 ? entries.length - 1 : following, {
+      focus: true,
+      items: entries.map(({ button }) => button)
+    });
+    return true;
+  }
+  /** Current remove-button entries, retaining each button's declared item index. */
+  get #entries() {
+    return this.#getItems().flatMap((item, itemIndex) => {
+      const button = this.#getButton(item);
+      return button ? [{ button, itemIndex }] : [];
+    });
+  }
+  /** Resolves a delegated event to the remove button owned by a declared chip. */
+  #entry(event) {
+    const target = event.target;
+    if (!(target instanceof Element)) return null;
+    const button = target.closest("button");
+    const entries = this.#entries;
+    const buttonIndex = entries.findIndex((entry2) => entry2.button === button);
+    if (buttonIndex === -1) return null;
+    const entry = entries[buttonIndex];
+    return { ...entry, buttonIndex, buttons: entries.map(({ button: button2 }) => button2) };
+  }
+  /** Delegates removal clicks without waiting for Stimulus to wire a new chip. */
+  #onClick = (event) => {
+    const entry = this.#entry(event);
+    if (!entry) return;
+    this.#onRemove(entry.itemIndex);
+  };
+  /** Applies the shared logical-arrow and removal policy within the chip row. */
+  #onKeydown = (event) => {
+    if (event.defaultPrevented || isReservedArrowChord(event)) return;
+    const entry = this.#entry(event);
+    if (!entry) return;
+    const buttons = entry.buttons;
+    const index = entry.buttonIndex;
+    switch (logicalArrowKey(event.key, this.#directionElement)) {
+      case "ArrowLeft":
+        if (index > 0) {
+          event.preventDefault();
+          this.#roving.setActive(index - 1, { focus: true, items: buttons });
+        }
+        break;
+      case "ArrowRight":
+        event.preventDefault();
+        if (index < buttons.length - 1) {
+          this.#roving.setActive(index + 1, { focus: true, items: buttons });
+        } else {
+          this.#focusAfterEnd();
+        }
+        break;
+      case "Delete":
+      case "Backspace":
+        event.preventDefault();
+        this.#onRemove(entry.itemIndex);
+        break;
+    }
+  };
+};
+
 // src/utils/tabindex_loan.ts
 var TabindexLoan = class {
   #value;
   #lent = /* @__PURE__ */ new Set();
+  /** Returns live loans before Turbo can copy them into its page snapshot. */
+  #beforeCache = new BeforeCacheReset(() => this.returnAll());
   /**
    * @param value - the `tabindex` to lend. `"-1"` (the default) is
    *   programmatically focusable but not a Tab stop; `"0"` is a real Tab stop,
@@ -9435,6 +9979,7 @@ var TabindexLoan = class {
     if (element.hasAttribute("tabindex")) return;
     element.setAttribute("tabindex", this.#value);
     this.#lent.add(element);
+    this.#beforeCache.activate();
   }
   /** Takes back every loan whose value is still the one that was lent. */
   returnAll() {
@@ -9442,6 +9987,7 @@ var TabindexLoan = class {
       if (element.getAttribute("tabindex") === this.#value) element.removeAttribute("tabindex");
     }
     this.#lent.clear();
+    this.#beforeCache.deactivate();
   }
 };
 
@@ -9454,21 +10000,26 @@ var MultiSelectController = class extends Controller {
     "tags",
     "tag",
     "tagTemplate",
-    "status",
+    "label",
+    "remove",
     "fields"
   ];
   static values = {
     max: { type: Number, default: 0 },
     name: { type: String, default: "options[]" },
-    form: { type: String, default: "" }
+    form: { type: String, default: "" },
+    announceText: { type: String, default: "" },
+    announceRemovedText: { type: String, default: "" }
   };
   static actions = ["close", "filter", "onKeydown", "open", "toggleOption"];
-  static events = ["change", "filter"];
+  static events = ["change", "filter", "reconcile"];
   /** Stable id of the active option; the current target is resolved from the DOM. */
   #activeOptionId = null;
   /** Whether the root borrowed a tab stop to catch focus, so teardown can undo it. */
   #tabindex = new TabindexLoan();
-  /** Prevents initial/teardown target callbacks from mutating authored DOM. */
+  /** Last reconciled selection, used to distinguish state changes from derived-DOM repair. */
+  #selectionValues = [];
+  /** Whether initial normalization finished, so a fields callback cannot mirror stale state. */
   #connected = false;
   /** Collapses one batch of target callbacks into a single final-DOM reconciliation. */
   #reconcile = new MicrotaskCoalescer(() => this.#reconcileOptions());
@@ -9487,17 +10038,26 @@ var MultiSelectController = class extends Controller {
       this.filter();
     }
   });
-  #roving = new RovingTabindex(() => this.#removeButtons);
+  /** Whether this connection already reported its unusable chip template. */
+  #warnedTemplate = false;
+  /** Shared delegated interaction for the replaceable row of removable chips. */
+  #chipRow = new ChipRow({
+    directionElement: this.element,
+    getItems: () => this.tagTargets,
+    getButton: (tag) => tag.querySelector('button[data-stimeo--multi-select-target~="remove"]'),
+    onRemove: (index) => this.#removeTagAt(index),
+    focusAfterEnd: () => this.#focusInput()
+  });
   /** Starts closed, syncs chips for any pre-selected options, and listens out. */
   connect() {
-    if (this.hasInputTarget) this.#composition.observe(this.inputTarget);
-    this.#normalizeSelection();
+    this.#warnedTemplate = false;
+    this.#normalizeSelection([]);
     this.close();
     if (this.hasTagsTarget) {
-      this.tagsTarget.addEventListener("keydown", this.#onTagKeydown);
-      this.tagsTarget.addEventListener("click", this.#onTagClick);
+      this.#chipRow.connect(this.tagsTarget);
       this.#rebuildTags();
     }
+    this.#selectionValues = this.#values;
     this.#syncFields();
     document.addEventListener("click", this.#onOutsideClick, true);
     this.#connected = true;
@@ -9509,10 +10069,16 @@ var MultiSelectController = class extends Controller {
    * cleared before deriving afresh to avoid duplicates.
    */
   #rebuildTags() {
-    if (!this.hasTagsTarget) return;
+    if (!this.hasTagsTarget || !this.hasTagTemplateTarget) return;
+    const fragments = [];
+    for (const option of this.#selectedOptions) {
+      const fragment = this.#buildTag(option);
+      if (!fragment) return;
+      fragments.push(fragment);
+    }
     for (const tag of this.tagTargets) tag.remove();
-    for (const option of this.#selectedOptions) this.#appendTag(option);
-    if (this.#removeButtons.length > 0) this.#roving.setActive(0);
+    this.tagsTarget.append(...fragments);
+    this.#chipRow.ensureTabStop();
   }
   /** Tears down document and chip listeners on disconnect (Turbo included). */
   disconnect() {
@@ -9520,10 +10086,7 @@ var MultiSelectController = class extends Controller {
     this.#reconcile.cancel();
     this.#composition.disconnect();
     this.#ignorePostCompositionInput = false;
-    if (this.hasTagsTarget) {
-      this.tagsTarget.removeEventListener("keydown", this.#onTagKeydown);
-      this.tagsTarget.removeEventListener("click", this.#onTagClick);
-    }
+    this.#chipRow.disconnect();
     document.removeEventListener("click", this.#onOutsideClick, true);
     this.#releaseTabindex();
   }
@@ -9533,18 +10096,43 @@ var MultiSelectController = class extends Controller {
   }
   /** Cleans a removed target and reconciles active state against the surviving DOM. */
   optionTargetDisconnected(option) {
-    if (!this.#connected) return;
     option.removeAttribute("data-active");
     this.#scheduleOptionReconcile();
   }
-  /** Schedules one reconciliation after all callbacks in the mutation batch. */
-  #scheduleOptionReconcile() {
-    this.#reconcile.schedule();
+  /** Rebinds delegated chip interaction when Turbo replaces the tags container. */
+  tagsTargetConnected(tags) {
+    this.#chipRow.connect(tags);
+    this.#scheduleOptionReconcile();
   }
-  /**
-   * Keeps a surviving/same-id active target, otherwise falls back to the first
-   * visible one — and brings the derived state back in line with the new option set.
-   *
+  /** Releases only the row that actually disconnected, never a newer replacement. */
+  tagsTargetDisconnected(tags) {
+    this.#chipRow.disconnect(tags);
+    this.#scheduleOptionReconcile();
+  }
+  /** Seeds a fields target inserted after connect from the current selection. */
+  fieldsTargetConnected() {
+    if (this.#connected) this.#syncFields();
+  }
+  /** Reconciles a runtime max change, including dropping any newly invalid overflow. */
+  maxValueChanged() {
+    this.#scheduleOptionReconcile();
+  }
+  /** Rebuilds submitted fields when their public name changes at runtime. */
+  nameValueChanged() {
+    this.#scheduleOptionReconcile();
+  }
+  /** Rebuilds submitted fields when their associated form changes at runtime. */
+  formValueChanged() {
+    this.#scheduleOptionReconcile();
+  }
+  /** Schedules one reconciliation after all callbacks in the mutation batch. */
+  #scheduleOptionReconcile() {
+    this.#reconcile.schedule();
+  }
+  /**
+   * Keeps a surviving/same-id active target, otherwise falls back to the first
+   * visible one — and brings the derived state back in line with the new option set.
+   *
    * The baseline pass fills in any missing `aria-selected`, and the chips and
    * hidden fields are re-derived from it, because the options are the truth source
    * for the selection. The chips are rebuilt **only when the selected value set
@@ -9559,7 +10147,17 @@ var MultiSelectController = class extends Controller {
     const next = this.#isClosed ? null : active && !active.hidden ? active : visible[0] ?? null;
     this.#setActive(next);
     this.#reflectEmpty();
-    this.#normalizeSelection();
+    const previous = this.#selectionValues;
+    const previousLabels = new Map(
+      this.tagTargets.map((tag) => [
+        tag.dataset.value ?? "",
+        (tag.querySelector('[data-stimeo--multi-select-target~="label"]')?.textContent ?? "").trim()
+      ])
+    );
+    const priority = [
+      .../* @__PURE__ */ new Set([...this.tagTargets.map((tag) => tag.dataset.value ?? ""), ...previous])
+    ];
+    this.#normalizeSelection(priority);
     const selected = this.#selectedOptions;
     const nextValues = selected.map((option) => this.#optionValue(option)).sort();
     const tagValues = this.tagTargets.map((tag) => tag.dataset.value ?? "").sort();
@@ -9567,18 +10165,51 @@ var MultiSelectController = class extends Controller {
     if (unchanged) this.#refreshTagLabels(selected);
     else this.#rebuildTags();
     this.#syncFields();
+    const values = this.#values;
+    const changed = !this.#sameSelection(previous, values);
+    this.#selectionValues = values;
+    if (!changed) return;
+    const options = new Map(selected.map((option) => [this.#optionValue(option), option]));
+    for (const value of previous) {
+      if (!values.includes(value)) {
+        this.#announceTransition(false, previousLabels.get(value) || value, value, values.length);
+      }
+    }
+    for (const value of values) {
+      if (previous.includes(value)) continue;
+      const option = options.get(value);
+      this.#announceTransition(true, this.#optionLabel(option), value, values.length);
+    }
+    this.dispatch("reconcile", { detail: { values } });
   }
   /**
-   * Gives every option an explicit `aria-selected`, without changing which ones
-   * the author chose. An absent value means "not selectable" in ARIA, so a
-   * forgotten attribute hides a selectable option. Several `true` is the normal
-   * case here — the list is `aria-multiselectable` — so nothing is dropped.
+   * Gives every option an explicit `aria-selected` and enforces the current cap.
+   * Priority preserves existing chip order at runtime; a fresh connection passes
+   * no priority, so deterministic option DOM order chooses the initial survivors.
    */
-  #normalizeSelection() {
-    for (const option of this.optionTargets) {
-      if (option.getAttribute("aria-selected") !== "true") {
-        option.setAttribute("aria-selected", "false");
+  #normalizeSelection(priority) {
+    const selected = this.optionTargets.filter(
+      (option) => option.getAttribute("aria-selected") === "true"
+    );
+    const limit = this.#selectionLimit;
+    const kept = /* @__PURE__ */ new Set();
+    if (limit === 0) {
+      for (const option of selected) kept.add(option);
+    } else {
+      for (const value of priority) {
+        if (kept.size >= limit) break;
+        const option = selected.find(
+          (candidate) => !kept.has(candidate) && this.#optionValue(candidate) === value
+        );
+        if (option) kept.add(option);
       }
+      for (const option of selected) {
+        if (kept.size >= limit) break;
+        kept.add(option);
+      }
+    }
+    for (const option of this.optionTargets) {
+      option.setAttribute("aria-selected", String(kept.has(option)));
     }
   }
   /**
@@ -9602,6 +10233,7 @@ var MultiSelectController = class extends Controller {
   }
   /** Filters confirmed input text, opens, and re-seeds the active option. */
   filter(event) {
+    if (!this.hasInputTarget) return;
     if (event && this.#ignorePostCompositionInput) {
       this.#ignorePostCompositionInput = false;
       return;
@@ -9626,10 +10258,14 @@ var MultiSelectController = class extends Controller {
    * opening is skipped entirely, where {@link close} still closes.
    */
   open() {
-    if (!this.hasListTarget || !this.hasInputTarget) return;
+    if (!this.hasListTarget || !this.hasInputTarget) {
+      this.#reflectEmpty();
+      return;
+    }
     this.listTarget.hidden = false;
     this.inputTarget.setAttribute("aria-expanded", "true");
     if (!this.#activeOption) this.#setActive(this.#visibleOptions[0] ?? null);
+    this.#reflectEmpty();
   }
   /**
    * Closes the list and clears the active option.
@@ -9643,16 +10279,16 @@ var MultiSelectController = class extends Controller {
    * active option, so only the `aria-expanded` write is guarded.
    */
   close() {
-    if (!this.hasListTarget) return;
-    this.listTarget.hidden = true;
+    if (this.hasListTarget) this.listTarget.hidden = true;
     this.#setActive(null);
-    if (!this.hasInputTarget) return;
-    this.inputTarget.setAttribute("aria-expanded", "false");
+    if (this.hasInputTarget) this.inputTarget.setAttribute("aria-expanded", "false");
+    this.#reflectEmpty();
   }
   /** Routes input keyboard interaction per the multi-select combobox model. */
   onKeydown(event) {
     if (event.defaultPrevented) return;
     if (isReservedArrowChord(event)) return;
+    if (!this.hasInputTarget) return;
     if (this.#composition.isComposing(event)) return;
     this.#reconcileActiveForInteraction();
     switch (logicalArrowKey(event.key, this.element)) {
@@ -9695,17 +10331,17 @@ var MultiSelectController = class extends Controller {
         break;
       case "Backspace":
         if (this.inputTarget.value === "") {
-          const buttons = this.#removeButtons;
-          if (buttons.length > 0) {
+          const last = this.#chipRow.lastIndex;
+          if (last >= 0) {
             event.preventDefault();
-            this.#removeTagAt(buttons.length - 1);
+            this.#removeTagAt(last, "input");
           }
         }
         break;
       case "ArrowLeft":
-        if (this.inputTarget.value === "" && this.#removeButtons.length > 0) {
+        if (this.inputTarget.value === "" && this.#chipRow.length > 0) {
           event.preventDefault();
-          this.#roving.setActive(this.#removeButtons.length - 1, { focus: true });
+          this.#chipRow.focusLast();
         }
         break;
       case "Tab":
@@ -9743,8 +10379,8 @@ var MultiSelectController = class extends Controller {
    * Unlike the other {@link #focusInput} callers, the element that held focus has
    * just left the DOM, so "leave it alone" is not an option — the browser already
    * dropped it to `<body>`. The root borrows a `tabindex="-1"` just-in-time (not a
-   * Tab stop, handed back on teardown). Focus that landed on a real element is
-   * left alone, so a chip removed out of band never steals it.
+   * Tab stop, handed back before Turbo caches or on teardown). Focus that landed
+   * on a real element is left alone, so a chip removed out of band never steals it.
    */
   #focusAfterLastTag() {
     if (this.hasInputTarget) {
@@ -9767,43 +10403,40 @@ var MultiSelectController = class extends Controller {
   #releaseTabindex() {
     this.#tabindex.returnAll();
   }
-  /**
-   * Removes the chip whose remove button was clicked, deselecting its option.
-   * Delegated on the tags container (like `#onTagKeydown`) rather than bound
-   * per chip via `data-action`, so it works the instant a chip is appended without
-   * waiting on Stimulus to wire a freshly created element.
-   */
-  #onTagClick = (event) => {
-    const button = event.target.closest("button");
-    if (!button || !this.tagsTarget.contains(button)) return;
-    const index = this.#removeButtons.indexOf(button);
-    if (index !== -1) this.#removeTagAt(index);
-  };
   /** Moves the active option by `delta` among visible options, wrapping. */
   #moveActive(delta) {
     const visible = this.#visibleOptions;
-    if (visible.length === 0) return;
-    const current = this.#activeOption ? visible.indexOf(this.#activeOption) : -1;
+    const active = this.#activeOption;
+    const current = visible.indexOf(active);
     const candidate = current === -1 ? delta > 0 ? 0 : visible.length - 1 : current + delta;
     const next = (candidate + visible.length) % visible.length;
     this.#setActive(visible[next] ?? null);
   }
-  /** Selects/deselects `option`, honoring `max`, and syncs chip + live region. */
+  /** Selects/deselects `option`, honoring `max`, and syncs chip + announcement. */
   #toggleSelection(option) {
     const selected = option.getAttribute("aria-selected") === "true";
-    if (!selected && this.maxValue > 0 && this.#selectedOptions.length >= this.maxValue) {
+    const limit = this.#selectionLimit;
+    if (!selected && limit > 0 && this.#selectedOptions.length >= limit) {
       return;
     }
-    option.setAttribute("aria-selected", String(!selected));
     if (selected) {
+      option.setAttribute("aria-selected", "false");
       this.#removeTagFor(option);
     } else {
-      this.#appendTag(option);
+      if (this.hasTagTemplateTarget && !this.#appendTag(option)) return;
+      option.setAttribute("aria-selected", "true");
     }
-    this.#announce(this.#optionLabel(option));
     this.#refreshRoving();
     this.#syncFields();
-    this.dispatch("change", { detail: { values: this.#values } });
+    const values = this.#values;
+    this.#selectionValues = values;
+    this.#announceTransition(
+      !selected,
+      this.#optionLabel(option),
+      this.#optionValue(option),
+      values.length
+    );
+    this.dispatch("change", { detail: { values } });
   }
   /**
    * Re-reads each chip's label from its option, in place.
@@ -9818,31 +10451,81 @@ var MultiSelectController = class extends Controller {
     const options = new Map(selected.map((option) => [this.#optionValue(option), option]));
     for (const tag of this.tagTargets) {
       const option = options.get(tag.dataset.value ?? "");
-      if (!option) continue;
       const text = this.#optionLabel(option);
-      const label = tag.querySelector('[data-multi-select-slot="label"]');
-      if (label && label.textContent !== text) label.textContent = text;
-      const button = tag.querySelector("button");
-      const name = `Remove ${text}`;
-      if (button && button.getAttribute("aria-label") !== name) {
-        button.setAttribute("aria-label", name);
-      }
+      const label = tag.querySelector('[data-stimeo--multi-select-target~="label"]');
+      const button = tag.querySelector(
+        'button[data-stimeo--multi-select-target~="remove"]'
+      );
+      const name = this.#removeName(text, this.#optionValue(option));
+      if (!label || !button || !name) continue;
+      if (label.textContent !== text) label.textContent = text;
+      if (button.getAttribute("aria-label") !== name) button.setAttribute("aria-label", name);
     }
   }
   /** Builds one chip from the template for `option`. */
   #appendTag(option) {
-    if (!this.hasTagTemplateTarget || !this.hasTagsTarget) return;
+    if (!this.hasTagsTarget) {
+      this.#warnTemplate('a "tags" target to append the chip to');
+      return false;
+    }
+    const fragment = this.#buildTag(option);
+    if (!fragment) return false;
+    this.tagsTarget.appendChild(fragment);
+    return true;
+  }
+  /**
+   * Builds one fully named chip without mutating the live tag row, or `null`
+   * when the authored template cannot produce one. Both callers establish the
+   * template first: a field authored without `tagTemplate` renders no chips at
+   * all — a supported configuration — and never reaches here.
+   */
+  #buildTag(option) {
     const fragment = this.tagTemplateTarget.content.cloneNode(true);
-    const tag = fragment.querySelector('[data-stimeo--multi-select-target="tag"]');
-    const label = fragment.querySelector('[data-multi-select-slot="label"]');
-    const button = fragment.querySelector("button");
-    if (!tag || !button) return;
+    const tag = fragment.querySelector('[data-stimeo--multi-select-target~="tag"]');
+    const label = fragment.querySelector(
+      '[data-stimeo--multi-select-target~="label"]'
+    );
+    const button = fragment.querySelector(
+      'button[data-stimeo--multi-select-target~="remove"]'
+    );
     const text = this.#optionLabel(option);
-    tag.dataset.value = this.#optionValue(option);
-    if (label) label.textContent = text;
-    button.setAttribute("aria-label", `Remove ${text}`);
+    const value = this.#optionValue(option);
+    const removeName = button?.getAttribute("aria-label")?.trim() ?? "";
+    if (!tag) return this.#warnTemplate('a "tag" target');
+    if (!label) return this.#warnTemplate('a "label" target');
+    if (!button) return this.#warnTemplate('a "remove" target <button>');
+    if (removeName === "") {
+      return this.#warnTemplate('a non-empty aria-label on its "remove" target');
+    }
+    tag.dataset.value = value;
+    label.textContent = text;
+    button.setAttribute("aria-label", fillTemplate(removeName, { label: text, value }));
     button.tabIndex = -1;
-    this.tagsTarget.appendChild(fragment);
+    return fragment;
+  }
+  /**
+   * Reports an unusable chip template to the author, once per connection.
+   *
+   * The selection itself stays untouched — no `aria-selected`, chip, hidden
+   * field, announcement, or event moves. Without this line the only symptom is
+   * a listbox whose options refuse to select, and the two causes the Inspector
+   * cannot see statically (a name that renders empty from a missing
+   * translation, a server-rendered template) would have no diagnostic anywhere.
+   */
+  #warnTemplate(missing) {
+    if (!this.#warnedTemplate) {
+      this.#warnedTemplate = true;
+      console.warn(
+        `Stimeo UI: "${this.identifier}" changed no selection because its chip template lacks ${missing}.`
+      );
+    }
+    return null;
+  }
+  /** Expands the current template's localized remove-button name. */
+  #removeName(label, value) {
+    if (!this.hasTagTemplateTarget) return null;
+    const template = this.tagTemplateTarget.content.querySelector('button[data-stimeo--multi-select-target~="remove"]')?.getAttribute("aria-label")?.trim();
+    return template ? fillTemplate(template, { label, value }) : null;
   }
   /** Removes the chip mirroring `option`, if present. */
   #removeTagFor(option) {
@@ -9851,52 +10534,30 @@ var MultiSelectController = class extends Controller {
     tag?.remove();
   }
   /** Removes chip `index` and deselects its option, re-homing focus. */
-  #removeTagAt(index) {
+  #removeTagAt(index, focus = "neighbor") {
     const tag = this.tagTargets[index];
     if (!tag) return;
     const value = tag.dataset.value ?? "";
     const option = this.optionTargets.find((candidate) => this.#optionValue(candidate) === value);
     if (option) option.setAttribute("aria-selected", "false");
     tag.remove();
-    this.#announce(option ? this.#optionLabel(option) : value);
     this.#refreshRoving();
     this.#syncFields();
-    this.dispatch("change", { detail: { values: this.#values } });
-    const remaining = this.#removeButtons;
-    if (remaining.length === 0) {
-      this.#focusAfterLastTag();
-    } else {
-      this.#roving.setActive(Math.min(index, remaining.length - 1), { focus: true });
+    const values = this.#values;
+    this.#selectionValues = values;
+    this.#announceTransition(
+      false,
+      option ? this.#optionLabel(option) : value,
+      value,
+      values.length
+    );
+    this.dispatch("change", { detail: { values } });
+    if (focus === "input") {
+      this.#focusInput();
+      return;
     }
+    if (!this.#chipRow.focusAfterRemoval(index)) this.#focusAfterLastTag();
   }
-  /** Arrow navigation and deletion within the chip list (delegated). */
-  #onTagKeydown = (event) => {
-    if (event.defaultPrevented) return;
-    if (isReservedArrowChord(event)) return;
-    const button = event.target.closest("button");
-    if (!button) return;
-    const buttons = this.#removeButtons;
-    const index = buttons.indexOf(button);
-    if (index === -1) return;
-    switch (logicalArrowKey(event.key, this.element)) {
-      case "ArrowLeft":
-        if (index > 0) {
-          event.preventDefault();
-          this.#roving.setActive(index - 1, { focus: true });
-        }
-        break;
-      case "ArrowRight":
-        event.preventDefault();
-        if (index < buttons.length - 1) this.#roving.setActive(index + 1, { focus: true });
-        else this.#focusInput();
-        break;
-      case "Delete":
-      case "Backspace":
-        event.preventDefault();
-        this.#removeTagAt(index);
-        break;
-    }
-  };
   /**
    * Marks `option` active via `data-active` and the input's
    * `aria-activedescendant` (the attribute is removed, not emptied, when null).
@@ -9927,7 +10588,7 @@ var MultiSelectController = class extends Controller {
     const resolved = this.#activeOption;
     const active = resolved && !resolved.hidden ? resolved : null;
     const marked = this.optionTargets.filter((candidate) => candidate.hasAttribute("data-active"));
-    const idref = this.hasInputTarget ? this.inputTarget.getAttribute("aria-activedescendant") : null;
+    const idref = this.inputTarget.getAttribute("aria-activedescendant");
     if (!active || marked.length !== 1 || marked[0] !== active || idref !== activeId) {
       this.#setActive(active);
     }
@@ -9961,12 +10622,19 @@ var MultiSelectController = class extends Controller {
   }
   /** Keeps exactly one chip remove button tabbable after the set changes. */
   #refreshRoving() {
-    if (this.#removeButtons.length > 0 && this.#roving.activeIndex === -1)
-      this.#roving.setActive(0);
+    this.#chipRow.ensureTabStop();
   }
-  /** Mirrors the changed option label into the live region. */
-  #announce(text) {
-    if (this.hasStatusTarget) this.statusTarget.textContent = text;
+  /** Sends one localized selection transition through the page's shared announcer. */
+  #announceTransition(selected, label, value, count) {
+    const template = selected ? this.announceTextValue : this.announceRemovedTextValue;
+    announce(fillTemplate(template, { label, value, count }));
+  }
+  /** Whether two arrays represent the same selection set, independent of DOM order. */
+  #sameSelection(left, right) {
+    if (left.length !== right.length) return false;
+    const a = [...left].sort();
+    const b = [...right].sort();
+    return a.every((value, index) => value === b[index]);
   }
   /** Closes the list on a click outside the controller element. */
   #onOutsideClick = (event) => {
@@ -9986,9 +10654,7 @@ var MultiSelectController = class extends Controller {
   }
   /** Current active target resolved by stable id, never a detached node reference. */
   get #activeOption() {
-    const activeId = this.#activeOptionId;
-    if (activeId === null) return null;
-    return this.optionTargets.find((option) => option.id === activeId) ?? null;
+    return this.optionTargets.find((option) => option.id === this.#activeOptionId) ?? null;
   }
   /** Options currently selected. */
   get #selectedOptions() {
@@ -9998,9 +10664,10 @@ var MultiSelectController = class extends Controller {
   get #values() {
     return this.#selectedOptions.map((option) => this.#optionValue(option));
   }
-  /** The chip remove buttons in order (the roving navigation set). */
-  get #removeButtons() {
-    return this.hasTagsTarget ? Array.from(this.tagsTarget.querySelectorAll("button")) : [];
+  /** Normalized cardinality cap: zero is unlimited and positive fractions round down. */
+  get #selectionLimit() {
+    if (!Number.isFinite(this.maxValue) || this.maxValue <= 0) return 0;
+    return Math.max(1, Math.floor(this.maxValue));
   }
   /** Whether the list is currently hidden. */
   get #isClosed() {
@@ -10652,6 +11319,7 @@ function finiteFallback(min, max) {
 }
 
 // src/controllers/number_input_controller.ts
+var OWNED_DISABLED2 = "data-number-input-disabled";
 var NumberInputController = class _NumberInputController extends Controller {
   static targets = ["input", "increment", "decrement"];
   static values = {
@@ -10661,7 +11329,7 @@ var NumberInputController = class _NumberInputController extends Controller {
     pageStep: { type: Number, default: 0 }
   };
   static actions = ["decrement", "increment", "onInput", "onKeydown"];
-  static events = ["change"];
+  static events = ["change", "reconcile"];
   /** Delay (ms) a button must be held before auto-repeat starts. */
   static #HOLD_DELAY_MS = 400;
   /** Interval (ms) between auto-repeat steps once a hold has started. */
@@ -10673,8 +11341,18 @@ var NumberInputController = class _NumberInputController extends Controller {
    * of poisoning the next legitimate click.
    */
   static #SUPPRESS_RESET_MS = 250;
-  /** Aborts the pointer listeners on disconnect so none outlive the element. */
-  #guards = null;
+  /** Aborts global pointer guards on disconnect so none outlive the element. */
+  #globalGuards = null;
+  /** Per-target guards allow an old button to be released without touching its replacement. */
+  #buttonGuards = /* @__PURE__ */ new Map();
+  /** Tracks IME lifecycle on the current input, including confirming keys without a signal. */
+  #composition = new CompositionTracker();
+  /** Restores authored custom-spinbutton ARIA when a target leaves or the controller stops. */
+  #ariaValueNow = new AttributeLease("aria-valuenow");
+  #ariaValueMin = new AttributeLease("aria-valuemin");
+  #ariaValueMax = new AttributeLease("aria-valuemax");
+  /** Last reconciled or user-committed numeric value. */
+  #lastValue = null;
   /** Timers for the hold delay and the suppress-reset safety net. */
   #holdTimeouts = new SafeTimeout();
   /** The running auto-repeat interval (one at a time). */
@@ -10685,63 +11363,120 @@ var NumberInputController = class _NumberInputController extends Controller {
   #repeatedDuringHold = false;
   /** True when the next `click` is the trailing one after a hold and must be ignored. */
   #suppressNextClick = false;
-  /** Collapses runtime range/step changes into one silent input reconciliation. */
+  /** Button and pointer that own the current hold, so other instances/pointers cannot end it. */
+  #holdButton = null;
+  #holdPointerId = null;
+  /** Collapses runtime range/step changes into one input reconciliation. */
   #repaint = new MicrotaskCoalescer(() => this.#reconcile());
   /** Normalizes any initial value and wires the focus/hold pointer guards. */
   connect() {
     this.#repaint.activate();
-    if (!this.hasInputTarget) return;
+    this.#globalGuards = new AbortController();
+    const { signal } = this.#globalGuards;
+    for (const button of this.incrementTargets) this.#wireButton(button, 1);
+    for (const button of this.decrementTargets) this.#wireButton(button, -1);
+    window.addEventListener("pointerup", this.#onPointerEnd, { signal });
+    window.addEventListener("pointercancel", this.#onPointerEnd, { signal });
+    window.addEventListener("blur", this.#onWindowBlur, { signal });
     this.#reconcile();
-    this.#guards = new AbortController();
-    const { signal } = this.#guards;
-    if (this.hasIncrementTarget) this.#wireButton(this.incrementTarget, 1, signal);
-    if (this.hasDecrementTarget) this.#wireButton(this.decrementTarget, -1, signal);
-    window.addEventListener("pointerup", this.#stopHold, { signal });
-    window.addEventListener("pointercancel", this.#stopHold, { signal });
-    window.addEventListener("blur", this.#stopHold, { signal });
-  }
-  /** Releases the pointer guards and tears down every pending timer and hold state. */
+  }
+  /** Releases listeners, derived attributes, timers, and transient value state. */
   disconnect() {
     this.#repaint.cancel();
-    this.#guards?.abort();
-    this.#guards = null;
-    this.#holdActive = false;
+    this.#composition.disconnect();
+    this.#globalGuards?.abort();
+    this.#globalGuards = null;
+    const buttons = /* @__PURE__ */ new Set([
+      ...this.#buttonGuards.keys(),
+      ...this.incrementTargets,
+      ...this.decrementTargets
+    ]);
+    for (const guard of this.#buttonGuards.values()) guard.abort();
+    this.#buttonGuards.clear();
+    for (const button of buttons) this.#releaseButtonState(button);
+    this.#stopHold(false);
     this.#repeatedDuringHold = false;
     this.#suppressNextClick = false;
     this.#holdTimeouts.clearAll();
     this.#holdIntervals.clearAll();
+    this.#ariaValueNow.returnAll();
+    this.#ariaValueMin.returnAll();
+    this.#ariaValueMax.returnAll();
+    this.#lastValue = null;
   }
-  /** Silently reconciles a minimum changed by application code or a Turbo morph. */
+  /** Reconciles the value against a minimum changed by application code or a Turbo morph. */
   minValueChanged() {
     this.#repaint.schedule();
   }
-  /** Silently reconciles a maximum changed by application code or a Turbo morph. */
+  /** Reconciles the value against a maximum changed by application code or a Turbo morph. */
   maxValueChanged() {
     this.#repaint.schedule();
   }
-  /** Silently reconciles a step changed by application code or a Turbo morph. */
+  /** Reconciles the value against a step changed by application code or a Turbo morph. */
   stepValueChanged() {
     this.#repaint.schedule();
   }
+  /** Tracks and reconciles an input inserted or replaced at runtime. */
+  inputTargetConnected(input) {
+    this.#composition.observe(input);
+    this.#repaint.schedule();
+  }
+  /** Releases ARIA and composition state owned by an input that left the controller. */
+  inputTargetDisconnected(input) {
+    this.#composition.unobserve(input);
+    this.#releaseInputAria(input);
+    this.#stopHold(false);
+    this.#lastValue = null;
+    this.#repaint.schedule();
+  }
+  /** Wires focus preservation and hold behavior on a runtime increment target. */
+  incrementTargetConnected(button) {
+    this.#wireButton(button, 1);
+    this.#repaint.schedule();
+  }
+  /** Releases only the increment target that actually disconnected. */
+  incrementTargetDisconnected(button) {
+    this.#unwireButton(button);
+    this.#repaint.schedule();
+  }
+  /** Wires focus preservation and hold behavior on a runtime decrement target. */
+  decrementTargetConnected(button) {
+    this.#wireButton(button, -1);
+    this.#repaint.schedule();
+  }
+  /** Releases only the decrement target that actually disconnected. */
+  decrementTargetDisconnected(button) {
+    this.#unwireButton(button);
+    this.#repaint.schedule();
+  }
   /** Increases by one step. Bound via `data-action` (click). */
   increment() {
     if (this.#consumeSuppressedClick()) return;
+    if (!this.hasInputTarget) return;
     this.#commitStep(1);
     this.inputTarget.focus();
   }
   /** Decreases by one step. Bound via `data-action` (click). */
   decrement() {
     if (this.#consumeSuppressedClick()) return;
+    if (!this.hasInputTarget) return;
     this.#commitStep(-1);
     this.inputTarget.focus();
   }
   /** Clamps and snaps a typed value. Bound via `data-action` (change). */
   onInput() {
-    if (this.inputTarget.value.trim() === "") return;
+    if (!this.hasInputTarget) return;
+    if (this.inputTarget.value.trim() === "") {
+      this.#lastValue = null;
+      this.#reflectEmpty();
+      return;
+    }
     this.#commit(this.#currentValue());
   }
   /** Keyboard stepping per the APG spinbutton model. */
   onKeydown(event) {
+    if (!this.hasInputTarget) return;
+    if (this.#composition.isComposing(event)) return;
     if (isReservedArrowChord(event)) return;
     let next = null;
     switch (event.key) {
@@ -10776,21 +11511,39 @@ var NumberInputController = class _NumberInputController extends Controller {
    * hold; leaving the button while held stops it (the global listeners cover
    * release/cancel/blur).
    */
-  #wireButton(button, direction, signal) {
+  #wireButton(button, direction) {
+    if (this.#buttonGuards.has(button)) return;
+    const guard = new AbortController();
+    this.#buttonGuards.set(button, guard);
     button.addEventListener("pointerdown", (event) => this.#armHold(event, button, direction), {
-      signal
+      signal: guard.signal
     });
-    button.addEventListener("pointerleave", this.#stopHold, { signal });
+    button.addEventListener(
+      "pointerleave",
+      (event) => {
+        if (this.#holdButton === button && this.#ownsPointer(event)) this.#stopHold();
+      },
+      { signal: guard.signal }
+    );
+  }
+  /** Aborts one target's listeners and returns any state derived onto that button. */
+  #unwireButton(button) {
+    this.#buttonGuards.get(button)?.abort();
+    this.#buttonGuards.delete(button);
+    if (this.#holdButton === button) this.#stopHold(false);
+    this.#releaseButtonState(button);
   }
   /** Starts a hold: focus the input, then schedule the first repeat after a delay. */
   #armHold(event, button, direction) {
     const pointerButton = event.button;
     if (typeof pointerButton === "number" && pointerButton !== 0) return;
-    if (button.disabled) return;
+    if (button.disabled || !this.hasInputTarget) return;
     event.preventDefault();
     this.inputTarget.focus();
-    this.#stopHold();
+    this.#stopHold(false);
     this.#holdActive = true;
+    this.#holdButton = button;
+    this.#holdPointerId = this.#pointerId(event);
     this.#repeatedDuringHold = false;
     this.#suppressNextClick = false;
     this.#holdTimeouts.set(() => {
@@ -10809,18 +11562,39 @@ var NumberInputController = class _NumberInputController extends Controller {
    * trailing synthetic `click` must be ignored, so it is suppressed until the
    * click consumes it or a short safety-net timeout clears it.
    */
-  #stopHold = () => {
+  #stopHold(suppressTrailingClick = true) {
     if (!this.#holdActive) return;
     this.#holdActive = false;
+    this.#holdButton = null;
+    this.#holdPointerId = null;
     this.#holdTimeouts.clearAll();
     this.#holdIntervals.clearAll();
-    if (this.#repeatedDuringHold) {
+    if (suppressTrailingClick && this.#repeatedDuringHold) {
       this.#suppressNextClick = true;
       this.#holdTimeouts.set(() => {
         this.#suppressNextClick = false;
       }, _NumberInputController.#SUPPRESS_RESET_MS);
+    } else if (!suppressTrailingClick) {
+      this.#suppressNextClick = false;
     }
+  }
+  /** Ends a hold only for its initiating pointer (legacy/synthetic events remain accepted). */
+  #onPointerEnd = (event) => {
+    if (this.#ownsPointer(event)) this.#stopHold();
+  };
+  /** Window deactivation is global and always ends the active hold. */
+  #onWindowBlur = () => {
+    this.#stopHold();
   };
+  /** Extracts pointer identity when the runtime event exposes it. */
+  #pointerId(event) {
+    return event.pointerId ?? null;
+  }
+  /** Whether `event` belongs to the active pointer, with a synthetic-event fallback. */
+  #ownsPointer(event) {
+    const pointerId = this.#pointerId(event);
+    return this.#holdActive && (this.#holdPointerId === null || pointerId === null || pointerId === this.#holdPointerId);
+  }
   /** Consumes a pending trailing-click suppression; returns true if the click was swallowed. */
   #consumeSuppressedClick() {
     if (!this.#suppressNextClick) return false;
@@ -10829,53 +11603,80 @@ var NumberInputController = class _NumberInputController extends Controller {
     return true;
   }
   /**
-   * Normalizes `raw`, reflects it, and dispatches `change` only when the
-   * displayed value actually changes.
+   * Normalizes `raw`, reflects it, and dispatches `{ value: number }` only when
+   * the committed numeric value differs from the last reconciled value.
    *
    * @returns Whether the value changed (drives the auto-repeat's bound stop).
    */
   #commit(raw) {
     const value = this.#normalize(raw);
-    const changed = this.inputTarget.value !== String(value);
+    const changed = this.#lastValue === null || value !== this.#lastValue;
     this.#write(value);
+    this.#lastValue = value;
     if (changed) this.dispatch("change", { detail: { value } });
     return changed;
   }
   /** Commits an adjacent endpoint/grid value and reports whether it moved. */
   #commitStep(count) {
+    if (!this.hasInputTarget) return false;
     return this.#commit(stepSteppedValue(this.#currentValue(), count, this.#steppedRange));
   }
   /**
-   * Silently reflects the current value after a range or step morph.
+   * Reflects the current value after a range or step morph, reporting a moved
+   * value as `reconcile`.
    *
    * @stimeoRenderRoot
    */
   #reconcile() {
-    if (!this.hasInputTarget) return;
+    if (!this.hasInputTarget) {
+      this.#lastValue = null;
+      return;
+    }
     if (this.inputTarget.value.trim() !== "") {
-      this.#write(this.#normalize(this.#currentValue()));
+      const previous = this.#lastValue;
+      const value = this.#normalize(this.#currentValue());
+      this.#write(value);
+      this.#lastValue = value;
+      if (previous !== null && value !== previous) {
+        this.dispatch("reconcile", { detail: { value } });
+      }
     } else {
-      this.#updateButtons(this.#currentValue());
+      this.#lastValue = null;
+      this.#reflectEmpty();
     }
   }
   /** Reflects `value` on the input (and ARIA for non-native hosts) and the buttons. */
   #write(value) {
-    this.inputTarget.value = String(value);
-    if (this.inputTarget.getAttribute("role") === "spinbutton") {
-      this.inputTarget.setAttribute("aria-valuenow", String(value));
-      if (Number.isFinite(this.minValue)) {
-        this.inputTarget.setAttribute("aria-valuemin", String(this.minValue));
-      }
-      if (Number.isFinite(this.maxValue)) {
-        this.inputTarget.setAttribute("aria-valuemax", String(this.maxValue));
-      }
-    }
+    const input = this.inputTarget;
+    input.value = String(value);
+    this.#syncInputAria(input, value);
     this.#updateButtons(value);
   }
+  /** Reflects a blank value without inventing a numeric `aria-valuenow`. */
+  #reflectEmpty() {
+    this.#syncInputAria(this.inputTarget, null);
+    this.#updateButtons(this.#currentValue());
+  }
+  /** Synchronizes controller-derived ARIA while preserving authored teardown values. */
+  #syncInputAria(input, value) {
+    if (input.getAttribute("role") !== "spinbutton") {
+      this.#releaseInputAria(input);
+      return;
+    }
+    this.#ariaValueNow.write(input, value === null ? null : String(value));
+    this.#ariaValueMin.write(input, Number.isFinite(this.minValue) ? String(this.minValue) : null);
+    this.#ariaValueMax.write(input, Number.isFinite(this.maxValue) ? String(this.maxValue) : null);
+  }
+  /** Returns all custom-spinbutton ARIA leased on `input`. */
+  #releaseInputAria(input) {
+    this.#ariaValueNow.return(input);
+    this.#ariaValueMin.return(input);
+    this.#ariaValueMax.return(input);
+  }
   /** Disables a step button at its bound, returning focus to the input first. */
   #updateButtons(value) {
-    if (this.hasIncrementTarget) this.#toggleButton(this.incrementTarget, value < this.maxValue);
-    if (this.hasDecrementTarget) this.#toggleButton(this.decrementTarget, value > this.minValue);
+    for (const button of this.incrementTargets) this.#toggleButton(button, value < this.maxValue);
+    for (const button of this.decrementTargets) this.#toggleButton(button, value > this.minValue);
   }
   /**
    * Enables or disables a step button at its bound, never disabling one while it
@@ -10885,16 +11686,22 @@ var NumberInputController = class _NumberInputController extends Controller {
    */
   #toggleButton(button, enabled) {
     if (enabled) {
-      if (button.hasAttribute("data-number-input-disabled")) {
+      if (button.hasAttribute(OWNED_DISABLED2)) {
         button.disabled = false;
-        button.removeAttribute("data-number-input-disabled");
+        button.removeAttribute(OWNED_DISABLED2);
       }
       return;
     }
     if (button.disabled) return;
-    if (document.activeElement === button) this.inputTarget.focus();
+    if (document.activeElement === button && this.hasInputTarget) this.inputTarget.focus();
     button.disabled = true;
-    button.setAttribute("data-number-input-disabled", "");
+    button.setAttribute(OWNED_DISABLED2, "");
+  }
+  /** Returns `disabled` only when its explicit marker still identifies controller ownership. */
+  #releaseButtonState(button) {
+    if (!button.hasAttribute(OWNED_DISABLED2)) return;
+    button.disabled = false;
+    button.removeAttribute(OWNED_DISABLED2);
   }
   /** The current numeric value, falling back to a finite min (else 0) when blank. */
   #currentValue() {
@@ -12074,6 +12881,7 @@ var PasswordRevealController = class extends Controller {
   }
 };
 var CLASS_PATTERNS = [/[a-z]/, /[A-Z]/, /[0-9]/, /[^A-Za-z0-9]/];
+var DEFAULT_LEVELS = ["weak", "fair", "good", "strong"];
 var LENGTH_MILESTONES = [8, 12, 16];
 var MAX_POINTS = LENGTH_MILESTONES.length + (CLASS_PATTERNS.length - 1);
 var STRENGTH_BANDS = ["weak", "fair", "good", "strong"];
@@ -12081,7 +12889,10 @@ var PasswordStrengthController = class _PasswordStrengthController extends Contr
   static targets = ["input", "meter", "label"];
   static values = {
     minScore: { type: Number, default: 0 },
-    levels: { type: Array, default: ["weak", "fair", "good", "strong"] }
+    // A JSON list read through `parseStringList` rather than Stimulus's `Array`
+    // type: that reader throws out of the value observer before any callback
+    // runs, so one malformed attribute would stop the meter connecting.
+    levels: { type: String, default: "" }
   };
   static actions = ["evaluate"];
   static events = ["change"];
@@ -12107,7 +12918,7 @@ var PasswordStrengthController = class _PasswordStrengthController extends Contr
    */
   #update(options = {}) {
     const password = this.hasInputTarget ? this.inputTarget.value : "";
-    const labels = this.levelsValue;
+    const labels = parseStringList(this.levelsValue, DEFAULT_LEVELS);
     const max = labels.length;
     const score = this.#score(password, max);
     const label = score > 0 ? labels[score - 1] ?? "" : "";
@@ -12187,6 +12998,7 @@ var PasswordStrengthController = class _PasswordStrengthController extends Contr
   }
 };
 var NON_VALUE_TYPES = /* @__PURE__ */ new Set(["file", "submit", "reset", "button", "image"]);
+var DEFAULT_EXCLUDE = ["password"];
 var STORAGE_PREFIX = "stimeo--persist:";
 var OCCURRENCE_SEP = "\0";
 var PersistController = class extends Controller {
@@ -12194,7 +13006,10 @@ var PersistController = class extends Controller {
   static values = {
     key: { type: String, default: "" },
     debounce: { type: Number, default: 400 },
-    exclude: { type: Array, default: ["password"] },
+    // A JSON list read through `parseStringList` rather than Stimulus's `Array`
+    // type: that reader throws out of the value observer before any callback
+    // runs, so one malformed attribute would stop the controller connecting.
+    exclude: { type: String, default: "" },
     clearOn: { type: String, default: "" }
   };
   static actions = ["clear"];
@@ -12338,15 +13153,16 @@ var PersistController = class extends Controller {
   /** The fields to persist: `field` targets, or the element's named controls. */
   #fields() {
     const candidates = this.hasFieldTarget ? this.fieldTargets : Array.from(this.element.querySelectorAll("input, textarea, select"));
-    return candidates.filter((field) => this.#persistable(field));
+    const excluded = parseStringList(this.excludeValue, DEFAULT_EXCLUDE);
+    return candidates.filter((field) => this.#persistable(field, excluded));
   }
   /** Whether a field carries a restorable, non-excluded value. */
-  #persistable(field) {
+  #persistable(field, excluded) {
     if (this.#keyOf(field) === null) return false;
     const type = field instanceof HTMLInputElement ? field.type : "";
     if (NON_VALUE_TYPES.has(type)) return false;
-    if (this.excludeValue.includes(type)) return false;
-    if (field.name.length > 0 && this.excludeValue.includes(field.name)) return false;
+    if (excluded.includes(type)) return false;
+    if (field.name.length > 0 && excluded.includes(field.name)) return false;
     return true;
   }
   /** A stable storage sub-key for a field (its name, else id). */
@@ -13086,85 +13902,525 @@ 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_ATTRIBUTES = [
+  "aria-checked",
+  "aria-disabled",
+  "contenteditable",
+  "controls",
+  "data-value",
+  "disabled",
+  "hidden",
+  "href",
+  "tabindex",
+  "type",
+  "value"
+];
+var hasModifier = (event) => event.altKey || event.ctrlKey || event.metaKey || event.shiftKey;
 var RadioGroupController = class extends Controller {
   static targets = ["radio", "field"];
   static actions = ["onKeydown", "select"];
-  static events = ["change"];
-  #roving = new RovingTabindex(() => this.radioTargets);
-  /** Establishes the roving entry point and reflects the initial selection. */
+  static events = ["change", "reconcile"];
+  #roving = new RovingTabindex(() => this.#managedTargets);
+  #reconcile = new MicrotaskCoalescer(() => this.#reconcileDom());
+  #handledEvents = /* @__PURE__ */ new WeakSet();
+  #managedRadios = /* @__PURE__ */ new Set();
+  #originalTabindex = /* @__PURE__ */ new Map();
+  #ownedChecked = /* @__PURE__ */ new Set();
+  #internalCheckedValues = /* @__PURE__ */ new Map();
+  #internalTabindexValues = /* @__PURE__ */ new Map();
+  #observer = null;
+  #committedRadio = null;
+  #connected = false;
+  #lastOrder = [];
+  #focusedRadio = null;
+  #pendingFocusIndex = null;
+  #preferChecked = false;
+  /**
+   * Normalizes authored selection, establishes the APG Tab entry point, and
+   * reflects derived form state without reporting a user edit.
+   */
   connect() {
-    const selected = this.#selectedIndex();
-    this.#roving.setActive(selected === -1 ? 0 : selected);
-    if (selected !== -1) this.#reflectField(this.radioTargets[selected], { silent: true });
+    const currentRadios = new Set(this.radioTargets);
+    for (const radio of this.#managedRadios) {
+      if (!currentRadios.has(radio)) this.#releaseRadio(radio);
+    }
+    for (const radio of this.radioTargets) this.#reconcileHost(radio, false);
+    this.#normalizeSelection();
+    this.#ensureTabStop(true);
+    this.#reflectField(this.#selectedRadio, { silent: true });
+    this.#committedRadio = this.#selectedRadio ?? null;
+    this.#lastOrder = this.#managedTargets;
+    this.element.addEventListener("click", this.#onClickCapture, true);
+    this.element.addEventListener("keydown", this.#onKeydownCapture, true);
+    this.element.addEventListener("click", this.#onClick);
+    this.element.addEventListener("keydown", this.#onKeydown);
+    this.element.addEventListener("focusin", this.#onFocusin);
+    this.element.addEventListener("focusout", this.#onFocusout);
+    this.#connected = true;
+    this.#preferChecked = false;
+    this.#internalCheckedValues.clear();
+    this.#internalTabindexValues.clear();
+    this.#reconcile.activate();
+    this.#observeMutations();
   }
-  /** Selects the clicked radio. Bound via `data-action` (click). */
-  select(event) {
-    const index = this.radioTargets.indexOf(event.currentTarget);
-    if (index !== -1) this.#selectIndex(index, { focus: false });
+  /** Releases every listener, observer, and queued pass while retaining live DOM state. */
+  disconnect() {
+    this.#connected = false;
+    this.#reconcile.cancel();
+    this.element.removeEventListener("click", this.#onClickCapture, true);
+    this.element.removeEventListener("keydown", this.#onKeydownCapture, true);
+    this.element.removeEventListener("click", this.#onClick);
+    this.element.removeEventListener("keydown", this.#onKeydown);
+    this.element.removeEventListener("focusin", this.#onFocusin);
+    this.element.removeEventListener("focusout", this.#onFocusout);
+    this.#observer?.disconnect();
+    this.#observer = null;
+    this.#internalCheckedValues.clear();
+    this.#internalTabindexValues.clear();
+    this.#focusedRadio = null;
+    this.#pendingFocusIndex = null;
+    this.#committedRadio = null;
+    this.#preferChecked = false;
+  }
+  /** Removes a newly connected radio from the Tab sequence before batch reconciliation. */
+  radioTargetConnected(radio) {
+    if (this.#connected === false) return;
+    this.#reconcileHost(radio, true);
+    this.#preferChecked = true;
+    this.#reconcile.schedule();
   }
-  /** Arrow/Home/End/Space navigation with selection-follows-focus. */
-  onKeydown(event) {
-    if (event.defaultPrevented) return;
-    if (isReservedArrowChord(event)) return;
-    const current = this.radioTargets.indexOf(event.currentTarget);
-    if (current === -1) return;
-    let next = null;
-    const step = logicalArrowStep(event.key, this.element);
-    switch (event.key) {
-      case "ArrowDown":
-      case "ArrowRight":
-      case "ArrowUp":
-      case "ArrowLeft":
-        next = rovingMove(current, this.radioTargets.length, step, "wrap");
-        break;
-      case "Home":
-        next = 0;
-        break;
-      case "End":
-        next = this.radioTargets.length - 1;
-        break;
-      case " ":
-        next = current;
-        break;
-      default:
-        return;
+  /** Releases target-only attributes and repairs selection, form state, focus, and roving. */
+  radioTargetDisconnected(radio) {
+    if (!this.#connected) return;
+    if (this.#focusedRadio === radio) {
+      this.#pendingFocusIndex = this.#lastOrder.indexOf(radio);
+      this.#focusedRadio = null;
     }
-    event.preventDefault();
-    this.#selectIndex(next, { focus: true });
+    this.#releaseRadio(radio);
+    this.#preferChecked = true;
+    this.#reconcile.schedule();
   }
-  /**
-   * Checks the radio at `index`, clears the rest, updates the roving Tab stop and
-   * the hidden field, and dispatches `change`.
-   */
-  #selectIndex(index, { focus }) {
-    const radio = this.radioTargets[index];
-    if (!radio) return;
-    this.radioTargets.forEach((item, i) => {
-      item.setAttribute("aria-checked", i === index ? "true" : "false");
-    });
-    this.#roving.setActive(index, { focus });
-    this.#reflectField(radio);
-    this.dispatch("change", { detail: { value: this.#radioValue(radio), radio } });
+  /** Reflects the current selection into a field added or replaced at runtime. */
+  fieldTargetConnected() {
+    this.#reconcile.schedule();
   }
-  /** Index of the currently checked radio, or `-1` if none. */
-  #selectedIndex() {
-    return this.radioTargets.findIndex((radio) => radio.getAttribute("aria-checked") === "true");
+  /** Reconciles after a field target is removed from a retained group. */
+  fieldTargetDisconnected() {
+    this.#reconcile.schedule();
   }
-  /**
-   * Mirrors a radio's `data-value` onto the hidden field, when present. Fires a
-   * native bubbling `change` on a real value change (matching `listbox`, so
-   * `auto-submit` and other native-`change` consumers react) — unless `silent`
-   * (the initial connect reflection, which is not a user edit).
-   */
-  #reflectField(radio, { silent = false } = {}) {
-    if (!this.hasFieldTarget || !radio) return;
-    const value = this.#radioValue(radio);
-    if (this.fieldTarget.value === value) return;
-    this.fieldTarget.value = value;
-    if (!silent) this.fieldTarget.dispatchEvent(new Event("change", { bubbles: true }));
+  /** Selects the action's radio. Per-radio action wiring is optional. */
+  select(event) {
+    if (event.defaultPrevented || !this.#ownsEventTarget(event.target)) return;
+    const radio = event.currentTarget;
+    if (!radio || !this.radioTargets.includes(radio)) return;
+    this.#handledEvents.add(event);
+    this.#selectRadio(radio, { focus: false });
   }
-  /** A radio's submitted value (`data-value`, defaulting to empty). */
-  #radioValue(radio) {
+  /** Applies the APG key map to the action's radio. Per-radio action wiring is optional. */
+  onKeydown(event) {
+    const radio = event.currentTarget;
+    if (!radio || !this.radioTargets.includes(radio)) return;
+    this.#handleKeydown(event, radio);
+  }
+  /** Blocks disabled pointer activation before per-radio and consumer handlers run. */
+  #onClickCapture = (event) => {
+    const radio = this.#radioForEventTarget(event.target);
+    if (!radio || !this.#isSupportedHost(radio) || !this.#isActivationDisabled(radio)) return;
+    event.preventDefault();
+    event.stopImmediatePropagation();
+  };
+  /** Blocks disabled activation and suppresses a button's non-APG Enter activation. */
+  #onKeydownCapture = (event) => {
+    if (event.key !== " " && event.key !== "Enter") return;
+    const radio = this.#radioForEventTarget(event.target);
+    if (!radio || !this.#isSupportedHost(radio)) return;
+    if (this.#isActivationDisabled(radio) || event.key === "Enter" && radio instanceof HTMLButtonElement) {
+      event.preventDefault();
+      event.stopImmediatePropagation();
+    }
+  };
+  /** Delegated click path for static and runtime-added radios without actions. */
+  #onClick = (event) => {
+    if (this.#handledEvents.delete(event) || event.defaultPrevented) return;
+    const radio = this.#radioForEventTarget(event.target);
+    if (radio) this.#selectRadio(radio, { focus: false });
+  };
+  /** Delegated keydown path for static and runtime-added radios without actions. */
+  #onKeydown = (event) => {
+    const radio = this.#radioForEventTarget(event.target);
+    if (radio) this.#handleKeydown(event, radio);
+  };
+  /** Keeps programmatic and pointer focus as the group's current roving position. */
+  #onFocusin = (event) => {
+    const radio = this.#radioForEventTarget(event.target);
+    if (!radio || !this.#isNavigable(radio)) return;
+    this.#focusedRadio = radio;
+    this.#setActive(radio);
+  };
+  /** Distinguishes ordinary focus departure from focus lost because its radio was removed. */
+  #onFocusout = (event) => {
+    const radio = this.#radioForEventTarget(event.target);
+    if (!radio) return;
+    queueMicrotask(() => {
+      if (!this.#connected || this.#focusedRadio !== radio || !radio.isConnected) return;
+      const active = document.activeElement;
+      if (!(active instanceof Node) || !radio.contains(active)) this.#focusedRadio = null;
+    });
+  };
+  /** Applies navigation and Space activation to one supported radio. */
+  #handleKeydown(event, radio) {
+    if (event.defaultPrevented || !this.#isSupportedHost(radio)) return;
+    if (event.isComposing || isReservedArrowChord(event)) return;
+    if ((event.key === "Home" || event.key === "End") && hasModifier(event)) return;
+    if (event.key === " ") {
+      if (this.#isActivationDisabled(radio)) {
+        event.preventDefault();
+        event.stopImmediatePropagation();
+        return;
+      }
+      if (radio instanceof HTMLButtonElement) {
+        if (event.repeat) event.preventDefault();
+        return;
+      }
+      event.preventDefault();
+      if (!event.repeat) this.#selectRadio(radio, { focus: true });
+      return;
+    }
+    const items = this.#managedTargets;
+    const current = items.indexOf(radio);
+    const step = logicalArrowStep(event.key, this.element);
+    let destination;
+    if (step !== 0) {
+      destination = this.#nextNavigable(current, step);
+    } else if (event.key === "Home") {
+      destination = this.#navigableRadios[0];
+    } else if (event.key === "End") {
+      const navigable = this.#navigableRadios;
+      destination = navigable[navigable.length - 1];
+    } else {
+      return;
+    }
+    event.preventDefault();
+    if (!destination) return;
+    if (this.#isActivationDisabled(destination)) this.#setActive(destination, true);
+    else this.#selectRadio(destination, { focus: true });
+  }
+  /** Applies one user selection and emits only when selected identity changes. */
+  #selectRadio(radio, { focus }) {
+    if (!this.#isSupportedHost(radio) || this.#isActivationDisabled(radio)) return;
+    const previous = this.#selectedRadio;
+    const changed = previous !== radio;
+    if (changed) {
+      for (const item of this.#managedTargets) this.#setChecked(item, item === radio);
+    }
+    this.#setActive(radio, focus);
+    this.#reflectField(radio, { silent: !changed });
+    this.#committedRadio = radio;
+    if (changed) {
+      this.dispatch("change", { detail: { value: this.#radioValue(radio), radio } });
+    }
+  }
+  /** Reconciles target ownership, selection, roving, focus continuity, and form state. */
+  #reconcileDom() {
+    const observer = this.#observer;
+    observer?.disconnect();
+    for (const radio of this.radioTargets) this.#reconcileHost(radio, true);
+    this.#normalizeSelection();
+    const pendingFocusIndex = this.#pendingFocusIndex;
+    this.#pendingFocusIndex = null;
+    if (pendingFocusIndex !== null) {
+      const destination = this.#nearestNavigable(pendingFocusIndex);
+      this.#setActive(destination, destination !== null);
+    } else {
+      this.#ensureTabStop(this.#preferChecked);
+    }
+    this.#reflectField(this.#selectedRadio, { silent: true });
+    this.#lastOrder = this.#managedTargets;
+    this.#preferChecked = false;
+    this.#internalCheckedValues.clear();
+    this.#internalTabindexValues.clear();
+    if (this.#connected && observer) this.#observeWith(observer);
+    this.#reportReconciledSelection();
+  }
+  /**
+   * Announces a selection this pass decided rather than the user. Dispatched after
+   * observation resumes so a consumer's own DOM edits are seen by the next pass.
+   */
+  #reportReconciledSelection() {
+    const settled = this.#selectedRadio ?? null;
+    if (settled === this.#committedRadio) return;
+    this.#committedRadio = settled;
+    this.dispatch("reconcile", {
+      detail: { value: settled ? this.#radioValue(settled) : "", radio: settled }
+    });
+  }
+  /** Begins or ends ownership according to a radio's current host semantics. */
+  #reconcileHost(radio, dropFromTabSequence) {
+    if (!this.#isSupportedHost(radio)) {
+      this.#releaseRadio(radio);
+      return;
+    }
+    if (!this.#managedRadios.has(radio)) {
+      this.#managedRadios.add(radio);
+      this.#originalTabindex.set(radio, radio.getAttribute("tabindex"));
+      if (dropFromTabSequence) this.#writeTabindex(radio, -1);
+    }
+    this.#normalizeChecked(radio);
+  }
+  /** Restores only defaults owned while an element belonged to this group. */
+  #releaseRadio(radio) {
+    this.#managedRadios.delete(radio);
+    const original = this.#originalTabindex.get(radio);
+    if (original === null) {
+      this.#markInternal(this.#internalTabindexValues, radio, null);
+      radio.removeAttribute("tabindex");
+    } else if (original !== void 0) {
+      this.#markInternal(this.#internalTabindexValues, radio, original);
+      radio.setAttribute("tabindex", original);
+    }
+    this.#originalTabindex.delete(radio);
+    if (this.#ownedChecked.delete(radio)) {
+      this.#markInternal(this.#internalCheckedValues, radio, null);
+      radio.removeAttribute("aria-checked");
+    }
+  }
+  /** Supplies a missing checked state and normalizes invalid ARIA tokens. */
+  #normalizeChecked(radio) {
+    const value = radio.getAttribute("aria-checked");
+    if (value === null) {
+      this.#ownedChecked.add(radio);
+      this.#setChecked(radio, false);
+    } else if (value !== "true" && value !== "false") {
+      this.#setChecked(radio, false);
+    }
+  }
+  /** Makes the first DOM-ordered checked radio the sole checked radio. */
+  #normalizeSelection() {
+    let found = false;
+    for (const radio of this.#managedTargets) {
+      this.#normalizeChecked(radio);
+      if (!this.#isChecked(radio)) continue;
+      if (!found) found = true;
+      else this.#setChecked(radio, false);
+    }
+  }
+  /** Keeps one navigable Tab stop, preferring checked state when selection changed externally. */
+  #ensureTabStop(preferChecked) {
+    const navigable = this.#navigableRadios;
+    let active;
+    if (!preferChecked) {
+      const current = this.#managedTargets.filter(
+        (radio) => radio.tabIndex === 0 && this.#isNavigable(radio)
+      );
+      if (current.length === 1) active = current[0];
+    }
+    const selected = this.#selectedRadio;
+    if (!active && selected && this.#isNavigable(selected)) active = selected;
+    active ??= navigable[0];
+    this.#setActive(active ?? null);
+  }
+  /**
+   * The surviving navigable radio closest to a position in the order captured
+   * before the removal: the first one at or after it, else the last one before it.
+   * The saved position and this search read the same population, so a `hidden` or
+   * natively disabled sibling never shifts the destination past its neighbor.
+   */
+  #nearestNavigable(index) {
+    const navigable = new Set(this.#navigableRadios);
+    for (let i = index; i < this.#lastOrder.length; i++) {
+      const radio = this.#lastOrder[i];
+      if (radio && navigable.has(radio)) return radio;
+    }
+    for (let i = index - 1; i >= 0; i--) {
+      const radio = this.#lastOrder[i];
+      if (radio && navigable.has(radio)) return radio;
+    }
+    return this.#navigableRadios[0] ?? null;
+  }
+  /** Moves through full DOM order until a navigable radio is found. */
+  #nextNavigable(fromIndex, delta) {
+    const items = this.#managedTargets;
+    let index = fromIndex;
+    for (let step = 0; step < items.length; step++) {
+      index = rovingMove(index, items.length, delta, "wrap");
+      const candidate = items[index];
+      if (candidate && this.#isNavigable(candidate)) return candidate;
+    }
+    return void 0;
+  }
+  /** Assigns the single roving Tab stop and optionally moves DOM focus. */
+  #setActive(radio, focus = false) {
+    const items = this.#managedTargets;
+    const index = items.indexOf(radio);
+    this.#roving.setActive(index, { focus });
+    for (const item of items) {
+      this.#markInternal(this.#internalTabindexValues, item, item.getAttribute("tabindex"));
+    }
+  }
+  /** Finds this group's radio containing an event target, excluding nested groups. */
+  #radioForEventTarget(target) {
+    if (!this.#ownsEventTarget(target)) return void 0;
+    const node = target;
+    return this.radioTargets.find((radio) => radio === node || radio.contains(node));
+  }
+  /** Whether the closest Radio Group scope around a target is this instance. */
+  #ownsEventTarget(target) {
+    return target instanceof Element && target.closest('[data-controller~="stimeo--radio-group"]') === this.element;
+  }
+  /** Hosts whose activation model can be owned without conflicting native behavior. */
+  #isSupportedHost(radio) {
+    if (radio instanceof HTMLButtonElement) return radio.type === "button";
+    return !isInteractiveHost(radio);
+  }
+  /** Radios eligible for roving focus; ARIA-disabled deliberately remains eligible. */
+  #isNavigable(radio) {
+    if (!this.#isSupportedHost(radio) || this.#isHidden(radio)) return false;
+    if (!(radio instanceof HTMLButtonElement)) return true;
+    return !radio.disabled && !inheritsFieldsetDisabled(radio);
+  }
+  /** Whether hidden applies on the path from a radio up to the group root. */
+  #isHidden(radio) {
+    let current = radio;
+    while (current && current !== this.element) {
+      if (current.hasAttribute("hidden")) return true;
+      current = current.parentElement;
+    }
+    return false;
+  }
+  /** Whether ARIA, visibility, or native HTML semantics suppress selection. */
+  #isActivationDisabled(radio) {
+    if (!this.#isNavigable(radio)) return true;
+    let current = radio;
+    while (current) {
+      if (current.getAttribute("aria-disabled") === "true") return true;
+      current = current.parentElement;
+    }
+    return false;
+  }
+  /** Distinguishes external retained-element changes from this controller's own writes. */
+  #handleMutationRecords(records) {
+    let external = false;
+    for (const record of records) {
+      const target = record.target;
+      const attribute = record.attributeName;
+      if (attribute === "aria-checked") {
+        const value = target.getAttribute(attribute);
+        if (this.#matchesInternal(this.#internalCheckedValues, target, value)) continue;
+        this.#ownedChecked.delete(target);
+        this.#preferChecked = true;
+        external = true;
+      } else if (attribute === "tabindex") {
+        const value = target.getAttribute(attribute);
+        if (this.#matchesInternal(this.#internalTabindexValues, target, value)) continue;
+        if (this.#managedRadios.has(target)) this.#originalTabindex.set(target, value);
+        external = true;
+      } else {
+        external = true;
+      }
+    }
+    this.#internalCheckedValues.clear();
+    this.#internalTabindexValues.clear();
+    if (external) this.#reconcile.schedule();
+  }
+  /** Records an attribute write this pass made, keeping one claim per record it will produce. */
+  #markInternal(values, target, value) {
+    const pending = values.get(target);
+    if (pending) {
+      pending.value = value;
+      pending.count += 1;
+    } else {
+      values.set(target, { value, count: 1 });
+    }
+  }
+  /** Consumes one claim on a record whose value this pass wrote. */
+  #matchesInternal(values, target, value) {
+    const pending = values.get(target);
+    if (!pending || pending.value !== value) return false;
+    pending.count -= 1;
+    if (pending.count === 0) values.delete(target);
+    return true;
+  }
+  /** Watches target membership, retained state/hosts, form state, and fieldset ancestry. */
+  #observeMutations() {
+    const observer = new MutationObserver((records) => this.#handleMutationRecords(records));
+    this.#observer = observer;
+    this.#observeWith(observer);
+  }
+  /** Registers root and ancestor observation on one observer instance. */
+  #observeWith(observer) {
+    observer.observe(this.element, {
+      subtree: true,
+      childList: true,
+      attributes: true,
+      attributeFilter: OBSERVED_ATTRIBUTES
+    });
+    let ancestor = this.element.parentElement;
+    while (ancestor) {
+      observer.observe(ancestor, {
+        attributes: true,
+        attributeFilter: ["contenteditable", "disabled"]
+      });
+      ancestor = ancestor.parentElement;
+    }
+  }
+  /** Supported targets currently managed by the roving primitive. */
+  get #managedTargets() {
+    return this.radioTargets.filter((radio) => this.#managedRadios.has(radio));
+  }
+  /** Managed radios eligible for the roving Tab stop. */
+  get #navigableRadios() {
+    return this.#managedTargets.filter((radio) => this.#isNavigable(radio));
+  }
+  /** The currently checked managed radio, if any. */
+  get #selectedRadio() {
+    return this.#managedTargets.find((radio) => this.#isChecked(radio));
+  }
+  /** Whether a radio is currently checked. */
+  #isChecked(radio) {
+    return radio.getAttribute("aria-checked") === "true";
+  }
+  /** Reflects checked state while distinguishing controller writes from authored morphs. */
+  #setChecked(radio, checked) {
+    const value = checked ? "true" : "false";
+    if (radio.getAttribute("aria-checked") === value) return;
+    this.#markInternal(this.#internalCheckedValues, radio, value);
+    radio.setAttribute("aria-checked", value);
+  }
+  /** Writes a roving value before the radio is visible to the shared primitive. */
+  #writeTabindex(radio, value) {
+    const serialized = String(value);
+    this.#markInternal(this.#internalTabindexValues, radio, serialized);
+    radio.tabIndex = value;
+  }
+  /** Mirrors the selected value or the empty state to the optional hidden field. */
+  #reflectField(radio, { silent = false } = {}) {
+    if (!this.hasFieldTarget) return;
+    const value = radio ? this.#radioValue(radio) : "";
+    if (this.fieldTarget.value === value) return;
+    this.fieldTarget.value = value;
+    if (!silent) this.fieldTarget.dispatchEvent(new Event("change", { bubbles: true }));
+  }
+  /** A radio's submitted value (`data-value`, defaulting to empty). */
+  #radioValue(radio) {
     return radio.getAttribute("data-value") ?? "";
   }
 };
@@ -13542,162 +14798,246 @@ var RatingController = class extends Controller {
   static targets = ["symbol", "field"];
   static values = {
     value: { type: Number, default: 0 },
-    max: { type: Number, default: 5 },
     clearable: { type: Boolean, default: true },
     readonly: { type: Boolean, default: false }
   };
   static actions = ["endPreview", "onKeydown", "preview", "select"];
-  static events = ["change"];
+  static events = ["change", "reconcile"];
   #roving = new RovingTabindex(() => this.symbolTargets);
-  /** Reflects the initial value, or switches to the non-interactive readonly view. */
-  /**
-   * Collapses a morph that swaps render inputs into one repaint, and refuses the
-   * pass Stimulus delivers before `connect()`.
-   */
-  #repaint = new MicrotaskCoalescer(() => {
-    if (this.readonlyValue) {
-      this.#applyReadonly();
-      return;
-    }
-    this.#apply(this.#clamp(this.valueValue), { focus: false });
-  });
+  #rootRole = new AttributeLease("role");
+  #symbolRole = new AttributeLease("role");
+  #symbolAriaHidden = new AttributeLease("aria-hidden");
+  #rootTabindex = new TabindexLoan();
+  #repaint = new MicrotaskCoalescer(() => this.#reconcileScale());
+  #beforeCache = new BeforeCacheReset(() => this.#rewindForCache());
+  #connected = false;
+  #rescuedFocus = false;
+  /** Reflects declarative state without announcing an initial user change. */
   connect() {
     this.#repaint.activate();
-    if (this.readonlyValue) {
-      this.#applyReadonly();
-      return;
-    }
-    this.#apply(this.#clamp(this.valueValue), { focus: false });
+    this.#beforeCache.activate();
+    this.#apply(this.#normalize(this.valueValue), { focus: false });
+    this.#connected = true;
   }
-  /** Closes the window in which a queued repaint may still run. */
+  /** Drops a queued reconciliation and hands every borrowed attribute back. */
   disconnect() {
+    this.#connected = false;
     this.#repaint.cancel();
+    this.#beforeCache.deactivate();
+    this.#releaseReadonly();
   }
-  /** Repaints when application code (or a Turbo morph) changes `value` at runtime. */
+  /** Removes a runtime-added symbol's authored Tab stop before the batch repaint. */
+  symbolTargetConnected(symbol) {
+    if (this.#connected === false) return;
+    symbol.tabIndex = -1;
+    this.#repaint.schedule();
+  }
+  /** Releases readonly ownership and reconciles the remaining DOM-ordered scale. */
+  symbolTargetDisconnected(symbol) {
+    this.#symbolRole.return(symbol);
+    this.#symbolAriaHidden.return(symbol);
+    this.#repaint.schedule();
+  }
+  /** Reflects into a hidden field added or replaced after connection. */
+  fieldTargetConnected() {
+    this.#repaint.schedule();
+  }
+  /** Reconciles after a hidden field is removed or replaced. */
+  fieldTargetDisconnected() {
+    this.#repaint.schedule();
+  }
+  /** Repaints when application code or a Turbo morph changes `value`. */
   valueValueChanged() {
     this.#repaint.schedule();
   }
-  /** Selects (or clears) the clicked symbol. Bound via `data-action` (click). */
+  /** Repaints when application code changes whether value 0 is permitted. */
+  clearableValueChanged() {
+    this.#repaint.schedule();
+  }
+  /** Repaints when application code enters or leaves the readonly snapshot. */
+  readonlyValueChanged() {
+    this.#repaint.schedule();
+  }
+  /** Selects or clears the clicked symbol. Bound via `data-action` (click). */
   select(event) {
     if (this.readonlyValue) return;
-    const value = this.#clamp(this.#symbolValue(event.currentTarget));
-    if (this.clearableValue && value === this.valueValue) {
-      this.#render(0, { focus: true });
-    } else {
-      this.#render(value, { focus: false });
-    }
+    const ordinal = this.#symbolOrdinal(event.currentTarget);
+    if (ordinal === null) return;
+    const current = this.#normalize(this.valueValue);
+    this.#commit(this.clearableValue && ordinal === current ? 0 : ordinal, {
+      focus: ordinal === current
+    });
   }
-  /** Previews a fill range on hover/focus. Bound via `data-action` (mouseenter/focus). */
+  /** Previews a fill range on hover or focus without committing it. */
   preview(event) {
     if (this.readonlyValue) return;
-    this.#setFillRange(this.#clamp(this.#symbolValue(event.currentTarget)));
+    const ordinal = this.#symbolOrdinal(event.currentTarget);
+    if (ordinal !== null) this.#setFillRange(ordinal);
   }
-  /** Restores the fill range to the selected value. Bound via `data-action` (mouseleave/blur). */
+  /** Restores the fill range after hover or focus leaves a symbol. */
   endPreview() {
     if (this.readonlyValue) return;
-    this.#setFillRange(this.valueValue);
+    this.#setFillRange(this.#normalize(this.valueValue));
   }
-  /** Arrow/Home/End/Space keyboard control, clamped (no wrap). */
+  /** Arrow/Home/End/Space/Delete keyboard control, clamped without wrapping. */
   onKeydown(event) {
-    if (event.defaultPrevented) return;
-    if (isReservedArrowChord(event)) return;
-    if (this.readonlyValue) return;
+    if (event.defaultPrevented || isReservedArrowChord(event) || this.readonlyValue) return;
+    const current = this.#normalize(this.valueValue);
     let next = null;
     const rtl = isRtl(this.element);
     switch (event.key) {
       case "ArrowRight":
       case "ArrowUp":
-        next = this.valueValue + (event.key === "ArrowRight" && rtl ? -1 : 1);
+        next = current + (event.key === "ArrowRight" && rtl ? -1 : 1);
         break;
       case "ArrowLeft":
       case "ArrowDown":
-        next = this.valueValue - (event.key === "ArrowLeft" && rtl ? -1 : 1);
+        next = current - (event.key === "ArrowLeft" && rtl ? -1 : 1);
         break;
       case "Home":
         next = this.#minValue;
         break;
       case "End":
-        next = this.maxValue;
+        next = this.symbolTargets.length;
         break;
       case " ":
       case "Enter":
-        next = this.#symbolValue(event.currentTarget);
+        next = this.#symbolOrdinal(event.currentTarget);
+        break;
+      case "Delete":
+      case "Backspace":
+        if (!this.clearableValue) return;
+        next = 0;
         break;
       default:
         return;
     }
+    if (next === null) return;
     event.preventDefault();
-    this.#render(this.#clamp(next), { focus: true });
+    this.#commit(next, { focus: true });
   }
   /**
-   * Applies `value` (already clamped) everywhere, then dispatches `change`.
-   * Use for user-driven changes; on connect call `#apply` directly so
-   * initialization mirrors state without emitting an event.
+   * Repaints one settled target/Value mutation batch and reports only a value
+   * this controller had to normalize.
    *
    * @stimeoRenderRoot
    */
-  #render(value, { focus }) {
+  #reconcileScale() {
+    const requested = this.valueValue;
+    const value = this.#normalize(requested);
+    this.#apply(value, { focus: false });
+    if (!Object.is(value, requested)) {
+      this.dispatch("reconcile", { detail: { value } });
+    }
+  }
+  /** Applies one user operation and emits only when its committed value changes. */
+  #commit(raw, { focus }) {
+    const previous = this.#normalize(this.valueValue);
+    const value = this.#normalize(raw);
     this.#apply(value, { focus });
-    this.dispatch("change", { detail: { value } });
+    if (value !== previous) this.dispatch("change", { detail: { value } });
   }
-  /**
-   * Stores `value`, syncs `aria-checked` and the roving Tab stop, the hidden
-   * field, and the fill range — without dispatching `change`. Idempotent and
-   * safe on connect (and across Turbo morphing).
-   */
+  /** Synchronizes value, ARIA, roving focus, form state, and the visual fill hook. */
   #apply(value, { focus }) {
-    this.valueValue = value;
-    this.symbolTargets.forEach((symbol) => {
-      symbol.setAttribute(
-        "aria-checked",
-        value > 0 && this.#symbolValue(symbol) === value ? "true" : "false"
-      );
+    if (!Object.is(this.valueValue, value)) this.valueValue = value;
+    this.symbolTargets.forEach((symbol, index) => {
+      symbol.setAttribute("aria-checked", value > 0 && index + 1 === value ? "true" : "false");
     });
-    this.#roving.setActive(value > 0 ? value - 1 : 0, { focus });
+    if (this.readonlyValue) {
+      this.#applyReadonly();
+    } else {
+      const returning = this.#releaseReadonly();
+      this.#roving.setActive(value > 0 ? value - 1 : 0, { focus: focus || returning });
+    }
     if (this.hasFieldTarget) this.fieldTarget.value = String(value);
     this.#setFillRange(value);
   }
-  /** Marks symbols up to `range` with `data-rating-hover` (the consumer's fill hook). */
+  /** Marks the first `range` symbols with the consumer-owned fill hook. */
   #setFillRange(range) {
-    for (const symbol of this.symbolTargets) {
-      if (this.#symbolValue(symbol) <= range && range > 0) {
-        symbol.setAttribute("data-rating-hover", "");
-      } else {
-        symbol.removeAttribute("data-rating-hover");
-      }
-    }
+    this.symbolTargets.forEach((symbol, index) => {
+      symbol.toggleAttribute("data-rating-hover", range > 0 && index < range);
+    });
   }
-  /** Turns the group into a non-interactive `role="img"` snapshot of the value. */
+  /**
+   * Temporarily turns the radiogroup into a non-interactive image snapshot.
+   *
+   * Each lease is returned before it is taken again, so a value the consumer
+   * wrote while readonly becomes the value the lease restores on release. The
+   * return is a no-op on an attribute still holding this controller's own
+   * write, which is the ordinary case.
+   */
   #applyReadonly() {
-    const value = this.#clamp(this.valueValue);
-    this.valueValue = value;
-    this.element.setAttribute("role", "img");
+    this.#rescueFocus();
+    this.#rootRole.return(this.element);
+    this.#rootRole.write(this.element, "img");
     for (const symbol of this.symbolTargets) {
-      symbol.removeAttribute("role");
-      symbol.setAttribute("aria-hidden", "true");
-      symbol.tabIndex = -1;
+      this.#symbolRole.return(symbol);
+      this.#symbolRole.write(symbol, null);
+      this.#symbolAriaHidden.return(symbol);
+      this.#symbolAriaHidden.write(symbol, "true");
     }
-    if (this.hasFieldTarget) this.fieldTarget.value = String(value);
-    this.#setFillRange(value);
+    this.#roving.setActive(-1);
   }
   /**
-   * Clamps `value` to `[min, max]` (min is 0 when clearable, else 1). The upper
-   * bound is also capped at the number of symbols so the roving Tab stop
-   * (`value - 1`) always maps to a real symbol — even if the consumer's `max`
-   * value and rendered symbol count disagree, the tabbable item is never lost.
+   * Hands every readonly borrowing back before Turbo clones the page.
+   *
+   * The snapshot is taken while the controller is still connected, so an
+   * element left as `role="img"` with hidden symbols is what a restored page
+   * connects against — and that markup would be read as the authored one,
+   * leaving no way back to the radiogroup. Rewinding first keeps the cached
+   * copy identical to what the consumer wrote.
    */
-  #clamp(value) {
-    const max = Math.min(this.maxValue, this.symbolTargets.length);
-    return Math.min(max, Math.max(this.#minValue, value));
+  #rewindForCache() {
+    this.#releaseReadonly();
+    const value = this.#normalize(this.valueValue);
+    this.#roving.setActive(value > 0 ? value - 1 : 0);
+  }
+  /**
+   * Lands focus on the root before the symbols leave the accessibility tree.
+   *
+   * A symbol holding focus when readonly begins would keep it while losing its
+   * role and gaining `aria-hidden`, stranding the user on a node no longer in
+   * the tree. The root is the one element that survives the transition named:
+   * it carries the consumer's accessible name under `role="img"`.
+   */
+  #rescueFocus() {
+    const active = document.activeElement;
+    if (!(active instanceof HTMLElement) || active === this.element) return;
+    if (!this.element.contains(active)) return;
+    this.#rootTabindex.lend(this.element);
+    this.element.focus();
+    this.#rescuedFocus = true;
+  }
+  /**
+   * Restores authored roles and visibility after leaving readonly mode.
+   *
+   * @returns whether focus is standing on the root because {@link #rescueFocus}
+   *   put it there, and therefore belongs back on the Tab stop.
+   */
+  #releaseReadonly() {
+    const returning = this.#rescuedFocus && document.activeElement === this.element;
+    this.#rescuedFocus = false;
+    this.#rootRole.return(this.element);
+    this.#symbolRole.returnAll();
+    this.#symbolAriaHidden.returnAll();
+    this.#rootTabindex.returnAll();
+    return returning;
+  }
+  /** Normalizes a raw value to an integer ordinal in the live DOM range. */
+  #normalize(raw) {
+    const maximum = this.symbolTargets.length;
+    const ordinal = Number.isFinite(raw) ? Math.round(raw) : this.#minValue;
+    return Math.min(maximum, Math.max(this.#minValue, ordinal));
   }
   /** Lowest selectable value: 0 when clearable, otherwise 1. */
   get #minValue() {
     return this.clearableValue ? 0 : 1;
   }
-  /** A symbol's ordinal value (`data-rating-value`, defaulting to its position). */
-  #symbolValue(symbol) {
-    const raw = Number(symbol.getAttribute("data-rating-value"));
-    return Number.isFinite(raw) && raw > 0 ? raw : this.symbolTargets.indexOf(symbol) + 1;
+  /** Returns a target's 1-based position, or null when the action host is invalid. */
+  #symbolOrdinal(target) {
+    const targets = this.symbolTargets;
+    const index = targets.indexOf(target);
+    return index < 0 ? null : index + 1;
   }
 };
 var ReadMoreController = class extends Controller {
@@ -14237,16 +15577,31 @@ var RovingController = class extends Controller {
   };
   static events = ["change"];
   #roving = new RovingTabindex(() => this.itemTargets);
+  #reconcile = new MicrotaskCoalescer(() => this.#ensureTabStop());
+  #connected = false;
   connect() {
-    const active = this.#roving.activeIndex;
-    this.#roving.setActive(active === -1 ? 0 : active);
+    this.#ensureTabStop();
     this.element.addEventListener("keydown", this.#onKeydown);
     this.element.addEventListener("focusin", this.#onFocusin);
+    this.#connected = true;
+    this.#reconcile.activate();
   }
   disconnect() {
+    this.#connected = false;
+    this.#reconcile.cancel();
     this.element.removeEventListener("keydown", this.#onKeydown);
     this.element.removeEventListener("focusin", this.#onFocusin);
   }
+  /** Drops a runtime-added item from the Tab sequence before batch reconciliation. */
+  itemTargetConnected(item) {
+    if (!this.#connected) return;
+    item.tabIndex = -1;
+    this.#reconcile.schedule();
+  }
+  /** Re-establishes the single Tab stop after an item leaves the target set. */
+  itemTargetDisconnected() {
+    this.#reconcile.schedule();
+  }
   /** Arrow keys move focus + the tab stop; Home/End jump to the ends. */
   #onKeydown = (event) => {
     if (event.defaultPrevented) return;
@@ -14300,6 +15655,11 @@ var RovingController = class extends Controller {
       this.dispatch("change", { detail: { index, item: this.itemTargets[index] } });
     }
   }
+  /** Keeps the first existing Tab stop, falling back to the first live item. */
+  #ensureTabStop() {
+    const active = this.#roving.activeIndex;
+    this.#roving.setActive(active === -1 ? 0 : active);
+  }
 };
 var FOCUSABLE_SELECTOR = [
   "a[href]",
@@ -14318,29 +15678,56 @@ var ScrollAreaController = class extends Controller {
   };
   static events = ["reach"];
   #layout = new LayoutObserver(() => this.#update());
+  /** Current element receiving scroll, resize, mutation, and keyboard-reach behavior. */
+  #viewport = null;
+  /** Guards target callbacks before connect and after disconnect. */
+  #connected = false;
+  /** Collapses target replacement callbacks into one final-DOM rebind. */
+  #rebind = new MicrotaskCoalescer(() => this.#syncViewport());
   /** Re-checks the tab stop when the viewport's focusable content comes or goes. */
   #content = null;
   /** Last edge reported via `reach`, so the event fires once per arrival. */
   #lastEdge = null;
   /** Whether this controller added `tabindex`, so teardown only removes its own. */
   #tabindex = new TabindexLoan("0");
-  /** Whether this controller added `role="region"`, for symmetric teardown. */
-  #addedRole = false;
+  /** Temporarily owns a derived `role="region"` without losing an authored replacement. */
+  #role = new AttributeLease("role");
   #onScroll = () => {
     this.#update();
   };
   connect() {
-    if (!this.hasViewportTarget) return;
-    this.viewportTarget.addEventListener("scroll", this.#onScroll, { passive: true });
-    this.#layout.observe(this.viewportTarget);
+    this.#connected = true;
+    this.#rebind.activate();
     this.#layout.observeViewport();
+    this.#syncViewport();
+  }
+  /** Schedules a complete observer/listener rebind for a runtime viewport target. */
+  viewportTargetConnected() {
+    this.#rebind.schedule();
+  }
+  /** Schedules cleanup or replacement binding after a viewport leaves. */
+  viewportTargetDisconnected() {
+    this.#rebind.schedule();
+  }
+  /** Rebinds every viewport-owned resource against the final target in this mutation batch. */
+  #syncViewport() {
+    if (!this.#connected) return;
+    const next = this.hasViewportTarget ? this.viewportTarget : null;
+    if (next === this.#viewport) {
+      this.#update();
+      return;
+    }
+    if (this.#viewport) this.#unbindViewport(this.#viewport);
+    this.#viewport = next;
+    if (!next) return;
+    next.addEventListener("scroll", this.#onScroll, { passive: true });
+    this.#layout.observe(next);
     if (typeof MutationObserver !== "undefined") {
       this.#content = new MutationObserver(() => {
-        if (!this.hasViewportTarget) return;
-        const vp = this.viewportTarget;
-        this.#syncKeyboardReach(vp, this.#syncOverflow(vp));
+        if (this.#viewport !== next) return;
+        this.#syncKeyboardReach(next, this.#syncOverflow(next));
       });
-      this.#content.observe(this.viewportTarget, {
+      this.#content.observe(next, {
         subtree: true,
         childList: true,
         attributes: true
@@ -14349,19 +15736,26 @@ var ScrollAreaController = class extends Controller {
     this.#update();
   }
   disconnect() {
-    if (this.hasViewportTarget) {
-      this.viewportTarget.removeEventListener("scroll", this.#onScroll);
-      this.#clearAddedAttributes(this.viewportTarget);
-    }
+    this.#connected = false;
+    this.#rebind.cancel();
+    if (this.#viewport) this.#unbindViewport(this.#viewport);
     this.#layout.disconnect();
+    this.#lastEdge = null;
+  }
+  /** Releases every resource and derived attribute owned by one former viewport. */
+  #unbindViewport(viewport) {
+    viewport.removeEventListener("scroll", this.#onScroll);
+    this.#layout.unobserve(viewport);
     this.#content?.disconnect();
     this.#content = null;
+    this.#clearAddedAttributes(viewport);
+    if (this.#viewport === viewport) this.#viewport = null;
     this.#lastEdge = null;
   }
   /** Re-measures overflow and scroll position and reflects the state hooks. */
   #update() {
-    if (!this.hasViewportTarget) return;
-    const vp = this.viewportTarget;
+    const vp = this.#viewport;
+    if (!vp) return;
     const overflowing = this.#syncOverflow(vp);
     this.#syncKeyboardReach(vp, overflowing);
     const { position, progress } = this.#measurePosition(vp);
@@ -14375,7 +15769,6 @@ var ScrollAreaController = class extends Controller {
       this.#lastEdge = null;
     }
   }
-  /** Whether the viewport can scroll on the configured axis. */
   /**
    * Measures overflow and reflects the `data-overflow` hook.
    *
@@ -14420,8 +15813,7 @@ var ScrollAreaController = class extends Controller {
     if (wantsTabindex) {
       this.#tabindex.lend(vp);
       if (!vp.hasAttribute("role") && this.#hasAccessibleName(vp)) {
-        vp.setAttribute("role", "region");
-        this.#addedRole = true;
+        this.#role.write(vp, "region");
       }
     } else {
       this.#clearAddedAttributes(vp);
@@ -14430,10 +15822,7 @@ var ScrollAreaController = class extends Controller {
   /** Removes (and resets the flags for) only the attributes this controller added. */
   #clearAddedAttributes(vp) {
     this.#tabindex.returnAll();
-    if (this.#addedRole) {
-      vp.removeAttribute("role");
-      this.#addedRole = false;
-    }
+    this.#role.return(vp);
   }
   /**
    * Whether the viewport owns something the user can Tab to *right now*.
@@ -16666,26 +18055,7 @@ var SubmitOnceController = class extends Controller {
     }
   }
 };
-
-// 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/switch_controller.ts
-var OBSERVED_ATTRIBUTES = [
+var OBSERVED_ATTRIBUTES2 = [
   "role",
   "aria-checked",
   "tabindex",
@@ -16798,7 +18168,7 @@ var SwitchController = class extends Controller {
   #observeAttributes() {
     this.#attributeObserver.observe(this.element, {
       attributes: true,
-      attributeFilter: OBSERVED_ATTRIBUTES
+      attributeFilter: OBSERVED_ATTRIBUTES2
     });
     let ancestor = this.element.parentElement;
     while (ancestor) {
@@ -16903,30 +18273,47 @@ var TabsController = class extends Controller {
   }
 };
 var TagsInputController = class extends Controller {
-  static targets = ["input", "tags", "tag", "tagTemplate", "status", "fields"];
+  static targets = ["input", "tags", "tag", "tagTemplate", "label", "remove", "fields"];
   static values = {
     delimiter: { type: String, default: "," },
     max: { type: Number, default: 0 },
     allowDuplicates: { type: Boolean, default: false },
-    name: { type: String, default: "tags[]" }
+    name: { type: String, default: "tags[]" },
+    announceText: { type: String, default: "" },
+    announceRemovedText: { type: String, default: "" }
   };
   static actions = ["onKeydown"];
-  static events = ["change", "reject"];
-  #roving = new RovingTabindex(() => this.#removeButtons);
+  static events = ["change", "reconcile", "reject"];
+  /** Last reconciled tag order, separating user edits from DOM/Turbo repair. */
+  #tagValues = [];
+  /** Whether this connection already reported its unusable chip template. */
+  #warnedTemplate = false;
+  /** Collapses one target/Value mutation batch into one final-DOM repair pass. */
+  #reconcile = new MicrotaskCoalescer(() => this.#reconcileTags());
+  #chipRow = new ChipRow({
+    directionElement: this.element,
+    getItems: () => this.tagTargets,
+    getButton: (tag) => tag.querySelector('button[data-stimeo--tags-input-target~="remove"]'),
+    onRemove: (index) => this.#removeAt(index),
+    focusAfterEnd: () => this.#focusInput()
+  });
   /** Owns IME lifecycle state for commit-key guarding. */
   #composition = new CompositionTracker();
   /** Wires tag-list keyboard navigation and removal, and seeds the single Tab stop. */
   connect() {
+    this.#warnedTemplate = false;
     if (this.hasInputTarget) this.#composition.observe(this.inputTarget);
-    this.tagsTarget.addEventListener("keydown", this.#onTagKeydown);
-    this.tagsTarget.addEventListener("click", this.#onTagClick);
-    this.#syncState();
+    if (this.hasTagsTarget) this.#chipRow.connect(this.tagsTarget);
+    const tags = this.#values;
+    this.#syncState(tags);
+    this.#tagValues = tags;
+    this.#reconcile.activate();
   }
   /** Releases the delegated listeners so no handler outlives the element. */
   disconnect() {
+    this.#reconcile.cancel();
     this.#composition.disconnect();
-    this.tagsTarget.removeEventListener("keydown", this.#onTagKeydown);
-    this.tagsTarget.removeEventListener("click", this.#onTagClick);
+    this.#chipRow.disconnect();
   }
   /** Tracks an input added initially or after connect. */
   inputTargetConnected(input) {
@@ -16936,10 +18323,40 @@ var TagsInputController = class extends Controller {
   inputTargetDisconnected(input) {
     this.#composition.unobserve(input);
   }
+  /** Rebinds delegation and derived state when the tags container is replaced. */
+  tagsTargetConnected(_tags) {
+    this.#reconcile.schedule();
+  }
+  /** Releases only the row that disconnected, leaving a newer target intact. */
+  tagsTargetDisconnected(tags) {
+    this.#chipRow.disconnect(tags);
+    this.#reconcile.schedule();
+  }
+  /** Reconciles a tag inserted by Turbo, a server render, or another controller. */
+  tagTargetConnected(_tag) {
+    this.#reconcile.schedule();
+  }
+  /** Reconciles a tag removed by Turbo, a server render, or another controller. */
+  tagTargetDisconnected(_tag) {
+    this.#reconcile.schedule();
+  }
+  /** Seeds a fields target inserted after connect. */
+  fieldsTargetConnected() {
+    this.#reconcile.schedule();
+  }
+  /** Rebuilds submitted fields when the public name changes at runtime. */
+  nameValueChanged() {
+    this.#reconcile.schedule();
+  }
+  /** Recomputes the full hook when the cap changes at runtime. */
+  maxValueChanged() {
+    this.#reconcile.schedule();
+  }
   /** Commits on `Enter`/delimiter and deletes the last tag on empty `Backspace`. */
   onKeydown(event) {
     if (event.defaultPrevented) return;
     if (isReservedArrowChord(event)) return;
+    if (!this.hasInputTarget) return;
     if (this.#composition.isComposing(event)) return;
     if (event.key === "Enter" || event.key === this.delimiterValue) {
       event.preventDefault();
@@ -16947,33 +18364,20 @@ var TagsInputController = class extends Controller {
       return;
     }
     if (event.key === "Backspace" && this.inputTarget.value === "") {
-      const buttons = this.#removeButtons;
-      if (buttons.length > 0) {
+      const last = this.#chipRow.lastIndex;
+      if (last >= 0) {
         event.preventDefault();
-        this.#removeAt(buttons.length - 1);
+        this.#removeAt(last, "input");
       }
       return;
     }
     if (logicalArrowKey(event.key, this.element) === "ArrowLeft" && this.inputTarget.value === "") {
-      const buttons = this.#removeButtons;
-      if (buttons.length > 0) {
+      if (this.#chipRow.length > 0) {
         event.preventDefault();
-        this.#roving.setActive(buttons.length - 1, { focus: true });
+        this.#chipRow.focusLast();
       }
     }
   }
-  /**
-   * Deletes the tag whose remove button was clicked. Delegated on the tags
-   * container (like `#onTagKeydown`) rather than bound per chip via
-   * `data-action`, so it works the instant a chip is appended without waiting on
-   * Stimulus to wire a freshly created element.
-   */
-  #onTagClick = (event) => {
-    const button = event.target.closest("button");
-    if (!button || !this.tagsTarget.contains(button)) return;
-    const index = this.#removeButtons.indexOf(button);
-    if (index !== -1) this.#removeAt(index);
-  };
   /** Validates and adds the current input value as a tag, then clears the input. */
   #commitInput() {
     const value = this.inputTarget.value.trim();
@@ -16989,78 +18393,83 @@ var TagsInputController = class extends Controller {
       this.#reject(value, "duplicate");
       return;
     }
-    this.#appendTag(value);
+    if (!this.#appendTag(value)) return;
     this.inputTarget.value = "";
-    this.#announce(value);
-    this.#syncState();
-    this.dispatch("change", { detail: { tags: this.#values } });
+    const tags = this.#values;
+    this.#syncState(tags);
+    this.#tagValues = tags;
+    this.#announceTransition(true, value, tags.length);
+    this.dispatch("change", { detail: { tags } });
   }
   /** Builds one chip from the template and appends it to the tag list. */
   #appendTag(value) {
-    if (!this.hasTagTemplateTarget) return;
+    if (!this.hasTagsTarget) return false;
+    if (!this.hasTagTemplateTarget) return this.#warnTemplate('a "tagTemplate" target');
     const fragment = this.tagTemplateTarget.content.cloneNode(true);
-    const tag = fragment.querySelector('[data-stimeo--tags-input-target="tag"]');
-    const label = fragment.querySelector('[data-tags-input-slot="label"]');
-    const button = fragment.querySelector("button");
-    if (!tag || !button) return;
+    const tag = fragment.querySelector('[data-stimeo--tags-input-target~="tag"]');
+    const label = fragment.querySelector('[data-stimeo--tags-input-target~="label"]');
+    const button = fragment.querySelector(
+      'button[data-stimeo--tags-input-target~="remove"]'
+    );
+    const removeName = button?.getAttribute("aria-label")?.trim() ?? "";
+    if (!tag) return this.#warnTemplate('a "tag" target');
+    if (!label) return this.#warnTemplate('a "label" target');
+    if (!button) return this.#warnTemplate('a "remove" target <button>');
+    if (removeName === "") {
+      return this.#warnTemplate('a non-empty aria-label on its "remove" target');
+    }
     tag.dataset.value = value;
-    if (label) label.textContent = value;
-    button.setAttribute("aria-label", `Remove ${value}`);
+    label.textContent = value;
+    button.setAttribute("aria-label", fillTemplate(removeName, { label: value, value }));
     button.tabIndex = -1;
     this.tagsTarget.appendChild(fragment);
+    return true;
   }
-  /** Removes the tag at `index`, then moves focus to a neighbor or the input. */
-  #removeAt(index) {
+  /**
+   * Reports an unusable chip template to the author, once per connection.
+   *
+   * The commit itself stays a no-op — nothing about the input, the tag set, the
+   * hidden fields, the announcement, or the events changes. Without this line
+   * the only symptom is a field that accepts no tags at all, and the two causes
+   * the Inspector cannot see statically (a name that renders empty from a
+   * missing translation, a server-rendered template) would have no diagnostic
+   * anywhere.
+   */
+  #warnTemplate(missing) {
+    if (!this.#warnedTemplate) {
+      this.#warnedTemplate = true;
+      console.warn(
+        `Stimeo UI: "${this.identifier}" added no tag because its chip template lacks ${missing}.`
+      );
+    }
+    return false;
+  }
+  /** Removes the tag at `index`, then applies the interaction-origin focus policy. */
+  #removeAt(index, focus = "neighbor") {
     const tag = this.tagTargets[index];
     if (!tag) return;
     const value = tag.dataset.value ?? "";
     tag.remove();
-    this.#announce(value);
-    this.#syncState();
-    this.dispatch("change", { detail: { tags: this.#values } });
-    const remaining = this.#removeButtons;
-    if (remaining.length === 0) {
-      this.inputTarget.focus();
-    } else {
-      this.#roving.setActive(Math.min(index, remaining.length - 1), { focus: true });
+    const tags = this.#values;
+    this.#syncState(tags);
+    this.#tagValues = tags;
+    this.#announceTransition(false, value, tags.length);
+    this.dispatch("change", { detail: { tags } });
+    if (focus === "input") {
+      this.#focusInput();
+      return;
     }
+    if (!this.#chipRow.focusAfterRemoval(index)) this.#focusInput();
+  }
+  /** Moves focus to the current input when one exists. */
+  #focusInput() {
+    if (this.hasInputTarget) this.inputTarget.focus();
   }
-  /** Handles arrow navigation and deletion within the chip list (delegated). */
-  #onTagKeydown = (event) => {
-    if (event.defaultPrevented) return;
-    if (isReservedArrowChord(event)) return;
-    const button = event.target.closest("button");
-    if (!button) return;
-    const buttons = this.#removeButtons;
-    const index = buttons.indexOf(button);
-    if (index === -1) return;
-    switch (logicalArrowKey(event.key, this.element)) {
-      case "ArrowLeft":
-        if (index > 0) {
-          event.preventDefault();
-          this.#roving.setActive(index - 1, { focus: true });
-        }
-        break;
-      case "ArrowRight":
-        event.preventDefault();
-        if (index < buttons.length - 1) {
-          this.#roving.setActive(index + 1, { focus: true });
-        } else {
-          this.inputTarget.focus();
-        }
-        break;
-      case "Delete":
-      case "Backspace":
-        event.preventDefault();
-        this.#removeAt(index);
-        break;
-    }
-  };
   /** Rebuilds the hidden form fields, the `full` flag, and the roving Tab stop. */
-  #syncState() {
+  #syncState(values) {
     if (this.hasFieldsTarget) {
       this.fieldsTarget.replaceChildren(
-        ...this.#values.map((value) => {
+        ...values.map((value) => {
           const input = document.createElement("input");
           input.type = "hidden";
           input.name = this.nameValue;
@@ -17069,28 +18478,37 @@ var TagsInputController = class extends Controller {
         })
       );
     }
-    const full = this.maxValue > 0 && this.tagTargets.length >= this.maxValue;
+    const full = this.maxValue > 0 && values.length >= this.maxValue;
     this.element.toggleAttribute("data-stimeo--tags-input-full", full);
-    if (this.#removeButtons.length > 0 && this.#roving.activeIndex === -1) {
-      this.#roving.setActive(0);
-    }
-  }
-  /** Mirrors the changed tag into the live region for assistive tech. */
-  #announce(value) {
-    if (this.hasStatusTarget) this.statusTarget.textContent = value;
-  }
-  /** Reports a rejected addition via `stimeo--tags-input:reject`. */
+    this.#chipRow.ensureTabStop();
+  }
+  /** Repairs derived state after DOM/Turbo changes and reports a changed tag order. */
+  #reconcileTags() {
+    if (this.hasTagsTarget) this.#chipRow.connect(this.tagsTarget);
+    else this.#chipRow.disconnect();
+    const tags = this.#values;
+    this.#syncState(tags);
+    const changed = !this.#sameTags(this.#tagValues, tags);
+    this.#tagValues = tags;
+    if (changed) this.dispatch("reconcile", { detail: { tags } });
+  }
+  /** Sends one localized tag transition through the page's shared announcer. */
+  #announceTransition(added, value, count) {
+    const template = added ? this.announceTextValue : this.announceRemovedTextValue;
+    announce(fillTemplate(template, { label: value, value, count }));
+  }
+  /** Reports rejection with `{ value, reason: "duplicate" | "empty" | "max" }`. */
   #reject(value, reason) {
     this.dispatch("reject", { detail: { value, reason } });
   }
-  /** The remove buttons in document order (the roving navigation set). */
-  get #removeButtons() {
-    return Array.from(this.tagsTarget.querySelectorAll("button"));
-  }
   /** Current tag values in order. */
   get #values() {
     return this.tagTargets.map((tag) => tag.dataset.value ?? "");
   }
+  /** Whether two arrays carry the same values in the same submitted order. */
+  #sameTags(left, right) {
+    return left.length === right.length && left.every((value, index) => value === right[index]);
+  }
 };
 function px(value) {
   const n = Number.parseFloat(value);
@@ -17300,6 +18718,10 @@ var ThemeController = class extends Controller {
 };
 var AM = 0;
 var PM = 1;
+var SECONDS_PER_MINUTE = 60;
+var SECONDS_PER_HOUR = 60 * SECONDS_PER_MINUTE;
+var SECONDS_PER_DAY = 24 * SECONDS_PER_HOUR;
+var hasModifier2 = (event) => event.altKey || event.ctrlKey || event.metaKey || event.shiftKey;
 var TimePickerController = class extends Controller {
   static targets = ["segment", "field"];
   static values = {
@@ -17309,35 +18731,80 @@ var TimePickerController = class extends Controller {
     wrap: { type: Boolean, default: true }
   };
   static actions = ["onKeydown"];
-  static events = ["change"];
-  /** Current numeric value per segment kind (hours are the *displayed* hours). */
-  #state = { hour: 0, minute: 0, second: 0, meridiem: AM };
+  static events = ["change", "reconcile"];
+  /** Collapses target, Value, and retained-attribute morphs into one silent render. */
+  #reconcile = new MicrotaskCoalescer(() => this.#reconcileDom());
+  /** Canonical state; the displayed hour and meridiem are derived from this value. */
+  #state = { hour: 0, minute: 0, second: 0 };
   /** Direct-entry digit buffer and the segment it belongs to. */
   #typeBuffer = "";
   #typeSegment = null;
-  /** Last composed field value, to suppress duplicate `change` dispatches. */
+  /** Last composed value, used to suppress duplicate user notifications. */
   #lastValue = "";
-  /** Seeds each segment from its initial `aria-valuenow` and syncs the field. */
+  #observer = null;
+  #connected = false;
+  #domDirty = false;
+  /** Seeds state from the DOM, renders canonical ARIA, and starts morph observation. */
   connect() {
-    for (const segment of this.segmentTargets) {
-      const kind = this.#kindOf(segment);
-      if (!kind) continue;
-      const now = Number(segment.getAttribute("aria-valuenow"));
-      const { min, max } = this.#bounds(kind);
-      this.#state[kind] = Number.isFinite(now) ? Math.min(max, Math.max(min, now)) : min;
-    }
-    for (const segment of this.segmentTargets) this.#renderSegment(segment);
-    this.#syncField(false);
+    this.#connected = true;
+    this.#reconcile.activate();
+    this.element.addEventListener("focusout", this.#onFocusOut);
+    this.#domDirty = false;
+    this.#adoptDomState();
+    this.#render();
+    this.#observeMutations();
+  }
+  /** Releases the observer, listener, queued reconciliation, and transient input state. */
+  disconnect() {
+    this.#connected = false;
+    this.#reconcile.cancel();
+    this.element.removeEventListener("focusout", this.#onFocusOut);
+    this.#observer?.disconnect();
+    this.#observer = null;
+    this.#domDirty = false;
+    this.#clearTypeBuffer();
+    this.#lastValue = "";
+  }
+  /** Re-renders the canonical instant when 12/24-hour presentation changes at runtime. */
+  hourCycleValueChanged() {
+    this.#reconcile.schedule();
   }
-  /** Handles stepping, inter-segment focus moves, jumps, and direct entry. */
+  /** Recomposes the optional seconds portion after a runtime Value change. */
+  secondsValueChanged() {
+    this.#reconcile.schedule();
+  }
+  /** Adopts a segment inserted or replaced by a Turbo morph. */
+  segmentTargetConnected() {
+    this.#domDirty = true;
+    this.#clearTypeBuffer();
+    this.#reconcile.schedule();
+  }
+  /** Rebuilds state after a segment leaves the retained controller element. */
+  segmentTargetDisconnected() {
+    this.#domDirty = true;
+    this.#clearTypeBuffer();
+    this.#reconcile.schedule();
+  }
+  /** Reflects the current composed value into a field added or replaced at runtime. */
+  fieldTargetConnected() {
+    this.#reconcile.schedule();
+  }
+  /** Reconciles silently when the optional field leaves at runtime. */
+  fieldTargetDisconnected() {
+    this.#reconcile.schedule();
+  }
+  /** Handles APG stepping, inter-segment focus moves, jumps, and direct entry. */
   onKeydown(event) {
     if (isReservedArrowChord(event)) return;
     const segment = event.target?.closest(
-      "[data-stimeo--time-picker-target='segment']"
+      "[data-stimeo--time-picker-target~='segment']"
     );
-    const kind = segment ? this.#kindOf(segment) : null;
-    if (!segment || !kind) return;
-    switch (logicalArrowKey(event.key, this.element)) {
+    if (!segment || !this.segmentTargets.includes(segment)) return;
+    const kind = this.#kindOf(segment);
+    if (!kind) return;
+    const key = logicalArrowKey(event.key, this.element);
+    if ((key === "Home" || key === "End") && hasModifier2(event)) return;
+    switch (key) {
       case "ArrowUp":
         event.preventDefault();
         this.#step(kind, this.#delta(kind));
@@ -17356,134 +18823,202 @@ var TimePickerController = class extends Controller {
         break;
       case "Home":
         event.preventDefault();
-        this.#set(kind, this.#bounds(kind).min);
+        this.#setDisplayed(kind, this.#bounds(kind).min);
+        this.#commitRender();
         break;
       case "End":
         event.preventDefault();
-        this.#set(kind, this.#bounds(kind).max);
+        this.#setDisplayed(kind, this.#bounds(kind).max);
+        this.#commitRender();
         break;
       default:
-        if (/^[0-9]$/.test(event.key)) {
+        if (kind !== "meridiem" && /^[0-9]$/.test(event.key) && !hasModifier2(event)) {
           event.preventDefault();
           this.#typeDigit(segment, kind, event.key);
+          return;
         }
         return;
     }
-    this.#typeBuffer = "";
-    this.#typeSegment = null;
+    this.#clearTypeBuffer();
   }
-  /** The per-step delta: minutes step by `step`, others by 1, meridiem toggles. */
+  /** Clears direct-entry state when Tab, Shift+Tab, or pointer focus leaves a segment. */
+  #onFocusOut = (event) => {
+    const segment = event.target?.closest(
+      "[data-stimeo--time-picker-target~='segment']"
+    );
+    if (!segment || !this.segmentTargets.includes(segment)) return;
+    this.#clearTypeBuffer();
+  };
+  /** Uses the normalized positive-integer minute step; other segments step by one. */
   #delta(kind) {
-    return kind === "minute" ? this.stepValue : 1;
+    if (kind !== "minute") return 1;
+    const step = Math.trunc(this.stepValue);
+    return Number.isFinite(step) && step > 0 ? step : 1;
   }
-  /** Steps a segment, wrapping at its bounds and carrying over when enabled. */
+  /** Mutates one complete action and then renders/notifies its final value once. */
   #step(kind, delta) {
-    if (kind === "meridiem") {
-      this.#set("meridiem", this.#state.meridiem === AM ? PM : AM);
-      return;
-    }
-    const { min, max } = this.#bounds(kind);
-    const span = max - min + 1;
-    const raw = this.#state[kind] + delta;
-    if (raw > max || raw < min) {
-      if (!this.wrapValue) {
-        this.#set(kind, Math.min(max, Math.max(min, raw)));
-        return;
-      }
-      const wrapped = ((raw - min) % span + span) % span + min;
-      const carry = Math.floor((raw - min) / span);
-      this.#set(kind, wrapped);
-      this.#carry(kind, carry);
-      return;
+    if (kind === "meridiem" && this.wrapValue) {
+      this.#state.hour = modulo(this.#state.hour + 12, 24);
+    } else if (this.wrapValue) {
+      const scale = kind === "hour" ? SECONDS_PER_HOUR : kind === "minute" ? SECONDS_PER_MINUTE : 1;
+      this.#setFromSeconds(this.#secondsOfDay + delta * scale);
+    } else if (kind === "hour") {
+      this.#state.hour = Math.min(23, Math.max(0, this.#state.hour + delta));
+    } else {
+      const { min, max } = this.#bounds(kind);
+      const displayed = this.#displayValue(kind);
+      this.#setDisplayed(kind, Math.min(max, Math.max(min, displayed + delta)));
     }
-    this.#set(kind, raw);
-  }
-  /** Propagates a wrap carry from `kind` into the next larger segment. */
-  #carry(kind, amount) {
-    if (kind === "second") this.#step("minute", amount);
-    else if (kind === "minute") this.#step("hour", amount);
+    this.#commitRender();
   }
-  /**
-   * Sets a segment's value (clamped to its `[min, max]` bounds), re-renders it,
-   * and resyncs the composed field. Clamping here guards the direct-entry path:
-   * typing `0` into a 12-hour hour (min 1) must not commit an out-of-range
-   * `aria-valuenow="0"`. The stepping path already passes in-bounds values, so
-   * the clamp is a no-op there.
-   */
-  #set(kind, value) {
-    const { min, max } = this.#bounds(kind);
-    this.#state[kind] = Math.min(max, Math.max(min, value));
-    const segment = this.segmentTargets.find((s) => this.#kindOf(s) === kind);
-    if (segment) this.#renderSegment(segment);
-    this.#syncField(true);
-  }
-  /** Accumulates a typed digit, committing and advancing after two digits. */
+  /** Accumulates a typed digit, rendering once and advancing after completion. */
   #typeDigit(segment, kind, digit) {
-    if (kind === "meridiem") return;
     if (this.#typeSegment !== kind) this.#typeBuffer = "";
     this.#typeSegment = kind;
     const { max } = this.#bounds(kind);
     const candidate = Number(`${this.#typeBuffer}${digit}`);
-    if (candidate <= max) this.#typeBuffer = `${this.#typeBuffer}${digit}`;
-    else this.#typeBuffer = digit;
-    this.#set(kind, Number(this.#typeBuffer));
+    this.#typeBuffer = candidate <= max ? `${this.#typeBuffer}${digit}` : digit;
+    this.#setDisplayed(kind, Number(this.#typeBuffer));
+    this.#commitRender();
     if (this.#typeBuffer.length >= 2 || Number(this.#typeBuffer) * 10 > max) {
-      this.#typeBuffer = "";
-      this.#typeSegment = null;
+      this.#clearTypeBuffer();
       this.#focusSibling(segment, 1);
     }
   }
-  /** Moves focus to the previous/next segment, if one exists. */
+  /** Moves focus to the previous/next valid segment, if one exists. */
   #focusSibling(segment, direction) {
-    const index = this.segmentTargets.indexOf(segment);
-    const next = this.segmentTargets[index + direction];
-    next?.focus();
+    const segments = this.segmentTargets.filter((candidate) => this.#kindOf(candidate) !== null);
+    const index = segments.indexOf(segment);
+    segments[index + direction]?.focus();
+  }
+  /** Clears the direct-entry buffer and its owning segment together. */
+  #clearTypeBuffer() {
+    this.#typeBuffer = "";
+    this.#typeSegment = null;
+  }
+  /** Reconciles one coalesced target, Value, or retained-attribute mutation batch. */
+  #reconcileDom() {
+    if (this.#domDirty) {
+      this.#domDirty = false;
+      this.#clearTypeBuffer();
+      this.#adoptDomState();
+    }
+    this.#render();
+  }
+  /** Rebuilds canonical state from the targets; an absent hour represents midnight. */
+  #adoptDomState() {
+    let displayedHour = 0;
+    let meridiem = AM;
+    let minute = 0;
+    let second = 0;
+    for (const segment of this.segmentTargets) {
+      const kind = this.#kindOf(segment);
+      if (!kind) continue;
+      const value = this.#authoredValue(segment, kind);
+      if (kind === "hour") displayedHour = value;
+      else if (kind === "minute") minute = value;
+      else if (kind === "second") second = value;
+      else meridiem = value;
+    }
+    this.#state = {
+      hour: this.hourCycleValue === 12 ? displayedHour % 12 + (meridiem === PM ? 12 : 0) : displayedHour,
+      minute,
+      second
+    };
+  }
+  /** Reads and integer-clamps one authored `aria-valuenow`. */
+  #authoredValue(segment, kind) {
+    const raw = Number(segment.getAttribute("aria-valuenow"));
+    const { min, max } = this.#bounds(kind);
+    if (!Number.isFinite(raw)) return min;
+    return Math.min(max, Math.max(min, Math.trunc(raw)));
+  }
+  /** Writes a displayed segment value back into canonical state without rendering. */
+  #setDisplayed(kind, raw) {
+    const { min, max } = this.#bounds(kind);
+    const value = Math.min(max, Math.max(min, Math.trunc(raw)));
+    if (kind === "hour") {
+      this.#state.hour = this.hourCycleValue === 12 ? value % 12 + (this.#state.hour >= 12 ? 12 : 0) : value;
+    } else if (kind === "minute" || kind === "second") {
+      this.#state[kind] = value;
+    } else {
+      this.#state.hour = this.#state.hour % 12 + (value === PM ? 12 : 0);
+    }
+  }
+  /** Converts seconds with day wrapping into the canonical three-unit state. */
+  #setFromSeconds(raw) {
+    const seconds = modulo(raw, SECONDS_PER_DAY);
+    this.#state.hour = Math.floor(seconds / SECONDS_PER_HOUR);
+    this.#state.minute = Math.floor(seconds % SECONDS_PER_HOUR / SECONDS_PER_MINUTE);
+    this.#state.second = seconds % SECONDS_PER_MINUTE;
   }
-  /** Reflects a segment's current value onto its ARIA/text representation. */
+  /** Reflects canonical state to every segment without dispatching user events. */
+  #renderSegments() {
+    this.#withoutObservation(() => {
+      for (const segment of this.segmentTargets) this.#renderSegment(segment);
+    });
+  }
+  /**
+   * Reflects canonical state during connection or DOM reconciliation.
+   *
+   * No user edit reaches here, so `change` never fires from this path. A pass
+   * that moves the committed value reports `reconcile` instead.
+   *
+   * @stimeoRenderRoot
+   */
+  #render() {
+    this.#renderSegments();
+    const value = this.#composedValue;
+    const previous = this.#lastValue;
+    this.#writeField(value);
+    this.#lastValue = value;
+    if (previous !== "" && value !== previous) {
+      this.dispatch("reconcile", { detail: { value } });
+    }
+  }
+  /** Reflects one completed user action and dispatches its final change exactly once. */
+  #commitRender() {
+    this.#renderSegments();
+    const value = this.#composedValue;
+    const fieldChanged = this.#writeField(value);
+    if (fieldChanged) this.fieldTarget.dispatchEvent(new Event("change", { bubbles: true }));
+    if (value !== this.#lastValue) this.dispatch("change", { detail: { value } });
+    this.#lastValue = value;
+  }
+  /** Reflects one segment's value and controller-owned ARIA bounds/text. */
   #renderSegment(segment) {
     const kind = this.#kindOf(segment);
     if (!kind) return;
-    const value = this.#state[kind];
-    if (kind === "meridiem") {
-      const text2 = value === PM ? "PM" : "AM";
-      segment.setAttribute("aria-valuenow", String(value));
-      segment.setAttribute("aria-valuetext", text2);
-      segment.setAttribute("aria-valuemin", String(AM));
-      segment.setAttribute("aria-valuemax", String(PM));
-      segment.textContent = text2;
-      return;
-    }
+    const value = this.#displayValue(kind);
+    const text = kind === "meridiem" ? value === PM ? "PM" : "AM" : pad(value);
     const { min, max } = this.#bounds(kind);
-    const text = String(value).padStart(2, "0");
     segment.setAttribute("aria-valuenow", String(value));
     segment.setAttribute("aria-valuetext", text);
     segment.setAttribute("aria-valuemin", String(min));
     segment.setAttribute("aria-valuemax", String(max));
     segment.textContent = text;
   }
-  /** Composes `HH:MM[:SS]` and notifies both native-form and widget consumers. */
-  #syncField(notify) {
-    const h24 = this.#hours24();
-    const parts = [pad(h24), pad(this.#state.minute)];
+  /** Writes a composed value to the optional form field and reports whether it changed. */
+  #writeField(value) {
+    if (!this.hasFieldTarget || this.fieldTarget.value === value) return false;
+    this.fieldTarget.value = value;
+    return true;
+  }
+  /** The canonical form value composed as `HH:MM[:SS]`. */
+  get #composedValue() {
+    const parts = [pad(this.#state.hour), pad(this.#state.minute)];
     if (this.secondsValue) parts.push(pad(this.#state.second));
-    const value = parts.join(":");
-    const fieldChanged = this.hasFieldTarget && this.fieldTarget.value !== value;
-    if (fieldChanged) {
-      this.fieldTarget.value = value;
-    }
-    if (notify && fieldChanged) {
-      this.fieldTarget.dispatchEvent(new Event("change", { bubbles: true }));
-    }
-    if (notify && value !== this.#lastValue) this.dispatch("change", { detail: { value } });
-    this.#lastValue = value;
+    return parts.join(":");
   }
-  /** Converts the displayed hour (+ meridiem in 12-hour mode) to 24-hour. */
-  #hours24() {
-    if (this.hourCycleValue !== 12) return this.#state.hour;
-    const base = this.#state.hour % 12;
-    return base + (this.#state.meridiem === PM ? 12 : 0);
+  /** Returns a canonical unit in the presentation form exposed by its segment. */
+  #displayValue(kind) {
+    if (kind === "hour") {
+      return this.hourCycleValue === 12 ? this.#state.hour % 12 || 12 : this.#state.hour;
+    }
+    if (kind === "meridiem") return this.#state.hour >= 12 ? PM : AM;
+    return this.#state[kind];
   }
-  /** The inclusive `[min, max]` bounds for a segment kind. */
+  /** The inclusive controller-owned bounds for a segment kind. */
   #bounds(kind) {
     switch (kind) {
       case "hour":
@@ -17495,6 +19030,38 @@ var TimePickerController = class extends Controller {
         return { min: AM, max: PM };
     }
   }
+  /** Watches retained segment state while excluding this controller's own reflections. */
+  #observeMutations() {
+    const observer = new MutationObserver((records) => {
+      const changed = records.some(
+        ({ target }) => target instanceof HTMLElement && this.segmentTargets.includes(target)
+      );
+      if (!changed) return;
+      this.#domDirty = true;
+      this.#clearTypeBuffer();
+      this.#reconcile.schedule();
+    });
+    this.#observer = observer;
+    this.#observeWith(observer);
+  }
+  /** Registers retained attribute observation on the controller subtree. */
+  #observeWith(observer) {
+    observer.observe(this.element, {
+      subtree: true,
+      attributes: true,
+      attributeFilter: ["aria-valuenow", "data-segment"]
+    });
+  }
+  /** Temporarily pauses observation so derived ARIA writes cannot become DOM input. */
+  #withoutObservation(run) {
+    const observer = this.#observer;
+    observer?.disconnect();
+    try {
+      run();
+    } finally {
+      if (observer && this.#connected) this.#observeWith(observer);
+    }
+  }
   /** Reads a segment's declared kind, or null when absent/invalid. */
   #kindOf(segment) {
     const kind = segment.getAttribute("data-segment");
@@ -17503,7 +19070,14 @@ var TimePickerController = class extends Controller {
     }
     return null;
   }
+  /** Canonical state as seconds since the start of its nominal day. */
+  get #secondsOfDay() {
+    return this.#state.hour * SECONDS_PER_HOUR + this.#state.minute * SECONDS_PER_MINUTE + this.#state.second;
+  }
 };
+function modulo(value, modulus) {
+  return (value % modulus + modulus) % modulus;
+}
 function pad(value) {
   return String(value).padStart(2, "0");
 }
@@ -17826,6 +19400,16 @@ var ToastController = class extends Controller {
     this.#rafHandles.delete(element);
   }
 };
+var ITEM_ATTRIBUTES = [
+  "aria-pressed",
+  "disabled",
+  "hidden",
+  "type",
+  "href",
+  "contenteditable",
+  "controls"
+];
+var hasModifier3 = (event) => event.altKey || event.ctrlKey || event.metaKey || event.shiftKey;
 var ToggleGroupController = class extends Controller {
   static targets = ["item"];
   static values = {
@@ -17833,90 +19417,362 @@ var ToggleGroupController = class extends Controller {
   };
   static actions = ["onKeydown", "toggle"];
   static events = ["change"];
-  #roving = new RovingTabindex(() => this.itemTargets);
-  /** Establishes the roving entry point (first pressed item, else the first). */
+  #roving = new RovingTabindex(() => this.#managedTargets);
+  #handledEvents = /* @__PURE__ */ new WeakSet();
+  #managedItems = /* @__PURE__ */ new Set();
+  #originalTabindex = /* @__PURE__ */ new Map();
+  #ownedPressed = /* @__PURE__ */ new Set();
+  #internalPressedValues = /* @__PURE__ */ new Map();
+  #observer = null;
+  #connected = false;
+  /**
+   * Normalizes state and establishes one roving entry point. A single authored
+   * `tabindex="0"` survives reconnect; otherwise the first pressed, navigable
+   * item wins, falling back to the first navigable item.
+   */
   connect() {
-    const firstPressed = this.itemTargets.findIndex((item) => this.#isPressed(item));
-    this.#roving.setActive(firstPressed === -1 ? 0 : firstPressed);
+    const currentItems = new Set(this.itemTargets);
+    for (const item of this.#managedItems) {
+      if (!currentItems.has(item)) this.#releaseItem(item);
+    }
+    const authoredStops = this.itemTargets.filter(
+      (item) => this.#isSupportedHost(item) && item.getAttribute("tabindex") === "0" && this.#isNavigable(item)
+    );
+    const preferred = authoredStops.length === 1 ? authoredStops[0] : null;
+    for (const item of this.itemTargets) this.#reconcileHost(item, false);
+    this.#normalizeSelection();
+    this.#ensureTabStop(preferred);
+    this.element.addEventListener("click", this.#onClickCapture, true);
+    this.element.addEventListener("keydown", this.#onKeydownCapture, true);
+    this.element.addEventListener("click", this.#onClick);
+    this.element.addEventListener("keydown", this.#onKeydown);
+    this.element.addEventListener("focusin", this.#onFocusin);
+    this.#connected = true;
+    this.#internalPressedValues.clear();
+    this.#observeMutations();
   }
-  /** Toggles the activated item. Bound via `data-action` (click). */
+  /** Releases every listener and observer while retaining DOM state for Turbo cache/reconnect. */
+  disconnect() {
+    this.#connected = false;
+    this.element.removeEventListener("click", this.#onClickCapture, true);
+    this.element.removeEventListener("keydown", this.#onKeydownCapture, true);
+    this.element.removeEventListener("click", this.#onClick);
+    this.element.removeEventListener("keydown", this.#onKeydown);
+    this.element.removeEventListener("focusin", this.#onFocusin);
+    this.#observer?.disconnect();
+    this.#observer = null;
+    this.#internalPressedValues.clear();
+  }
+  /** Drops a newly connected item from the Tab sequence before reconciling the group. */
+  itemTargetConnected(item) {
+    if (!this.#connected) return;
+    this.#reconcileHost(item, true);
+    this.#normalizeSelection();
+    this.#ensureTabStop();
+  }
+  /** Restores attributes owned only while an element is an item and repairs the Tab stop. */
+  itemTargetDisconnected(item) {
+    if (!this.#connected) return;
+    this.#releaseItem(item);
+    this.#normalizeSelection();
+    this.#ensureTabStop();
+  }
+  /** Reconciles the single-selection invariant when the Stimulus Value changes. */
+  modeValueChanged() {
+    if (!this.#connected) return;
+    this.#normalizeSelection();
+    this.#ensureTabStop();
+  }
+  /**
+   * Toggles the action's item. Per-item action wiring is optional because click
+   * is also delegated from the group.
+   */
   toggle(event) {
-    this.#toggleIndex(this.itemTargets.indexOf(event.currentTarget));
+    if (event.defaultPrevented) return;
+    const item = event.currentTarget;
+    if (!item || !this.itemTargets.includes(item)) return;
+    this.#handledEvents.add(event);
+    this.#toggleItem(item);
   }
-  /** Arrow/Home/End move focus only; Space/Enter toggle non-button hosts. */
+  /**
+   * Moves focus or activates the action's item. Per-item action wiring is
+   * optional because keydown is also delegated from the group.
+   */
   onKeydown(event) {
-    if (event.defaultPrevented) return;
+    const item = event.currentTarget;
+    if (!item || !this.itemTargets.includes(item)) return;
+    this.#handleKeydown(event, item);
+  }
+  /** Blocks disabled activation before per-item or consumer event handlers run. */
+  #onClickCapture = (event) => {
+    const item = this.#itemForEventTarget(event.target);
+    if (!item || !this.#isSupportedHost(item) || !this.#isActivationDisabled(item)) return;
+    event.preventDefault();
+    event.stopImmediatePropagation();
+  };
+  /** Blocks disabled keyboard activation while leaving navigation keys available. */
+  #onKeydownCapture = (event) => {
+    if (event.key !== " " && event.key !== "Enter") return;
+    const item = this.#itemForEventTarget(event.target);
+    if (!item || !this.#isSupportedHost(item) || !this.#isActivationDisabled(item)) return;
+    event.preventDefault();
+    event.stopImmediatePropagation();
+  };
+  /** Delegated click path for static and runtime-added items without actions. */
+  #onClick = (event) => {
+    if (this.#handledEvents.delete(event) || event.defaultPrevented) return;
+    const item = this.#itemForEventTarget(event.target);
+    if (item) this.#toggleItem(item);
+  };
+  /** Delegated keydown path for static and runtime-added items without actions. */
+  #onKeydown = (event) => {
+    const item = this.#itemForEventTarget(event.target);
+    if (item) this.#handleKeydown(event, item);
+  };
+  /** Keeps programmatic and pointer focus as the group's next Tab entry point. */
+  #onFocusin = (event) => {
+    const item = this.#itemForEventTarget(event.target);
+    if (!item || !this.#isNavigable(item)) return;
+    this.#setActive(item);
+  };
+  /** Applies the APG navigation and activation key map to one supported item. */
+  #handleKeydown(event, item) {
+    if (event.defaultPrevented || !this.#isSupportedHost(item)) return;
+    if (event.isComposing) return;
     if (isReservedArrowChord(event)) return;
-    const current = this.itemTargets.indexOf(event.currentTarget);
-    if (current === -1) return;
-    let next = null;
-    const rtl = isRtl(this.element);
-    const horizontalStep = (key) => rtl ? key === "ArrowRight" ? -1 : 1 : key === "ArrowRight" ? 1 : -1;
-    switch (event.key) {
-      case "ArrowRight":
-      case "ArrowDown":
-        next = rovingMove(
-          current,
-          this.itemTargets.length,
-          event.key === "ArrowDown" ? 1 : horizontalStep(event.key),
-          "wrap"
-        );
-        break;
-      case "ArrowLeft":
-      case "ArrowUp":
-        next = rovingMove(
-          current,
-          this.itemTargets.length,
-          event.key === "ArrowUp" ? -1 : horizontalStep(event.key),
-          "wrap"
-        );
-        break;
-      case "Home":
-        next = 0;
-        break;
-      case "End":
-        next = this.itemTargets.length - 1;
-        break;
-      case " ":
-      case "Enter":
-        if (event.currentTarget instanceof HTMLButtonElement) return;
+    if ((event.key === "Home" || event.key === "End") && hasModifier3(event)) return;
+    if (!this.#managedItems.has(item)) this.#reconcileHost(item, true);
+    this.#ensureTabStop();
+    const items = this.#managedTargets;
+    const current = items.indexOf(item);
+    if (event.key === " " || event.key === "Enter") {
+      if (this.#isActivationDisabled(item)) {
         event.preventDefault();
-        this.#toggleIndex(current);
+        event.stopImmediatePropagation();
         return;
-      default:
+      }
+      if (item instanceof HTMLButtonElement) {
+        if (event.repeat) event.preventDefault();
         return;
+      }
+      event.preventDefault();
+      if (!event.repeat) this.#toggleItem(item);
+      return;
+    }
+    const step = logicalArrowStep(event.key, this.element);
+    let destination;
+    if (step !== 0) {
+      destination = this.#nextNavigable(current, step);
+    } else if (event.key === "Home") {
+      destination = this.#navigableItems[0];
+    } else if (event.key === "End") {
+      const navigable = this.#navigableItems;
+      destination = navigable[navigable.length - 1];
+    } else {
+      return;
     }
     event.preventDefault();
-    this.#roving.setActive(next, { focus: true });
+    if (destination) this.#setActive(destination, true);
   }
-  /** Applies the toggle at `index` per the current mode and dispatches `change`. */
-  #toggleIndex(index) {
-    const item = this.itemTargets[index];
-    if (!item) return;
+  /** Applies one user toggle and dispatches the documented change detail. */
+  #toggleItem(item) {
+    if (!this.#isSupportedHost(item) || this.#isActivationDisabled(item)) return;
+    if (!this.#managedItems.has(item)) this.#reconcileHost(item, true);
     const willPress = !this.#isPressed(item);
     if (this.modeValue === "single") {
-      this.itemTargets.forEach((other, i) => {
-        this.#setPressed(other, i === index && willPress);
-      });
+      for (const other of this.#managedTargets)
+        this.#setPressed(other, other === item && willPress);
     } else {
       this.#setPressed(item, willPress);
     }
-    this.#roving.setActive(index);
+    this.#setActive(item);
     this.dispatch("change", {
       detail: { value: this.#itemValue(item), pressed: willPress, values: this.#pressedValues() }
     });
   }
+  /** Reconciles supported hosts, pressed state, and the roving invariant after a DOM mutation. */
+  #reconcile() {
+    for (const item of this.itemTargets) this.#reconcileHost(item, true);
+    this.#normalizeSelection();
+    this.#ensureTabStop();
+  }
+  /** Begins or ends ownership according to the item's current host semantics. */
+  #reconcileHost(item, dropFromTabSequence) {
+    if (!this.#isSupportedHost(item)) {
+      this.#releaseItem(item);
+      return;
+    }
+    if (!this.#managedItems.has(item)) {
+      this.#managedItems.add(item);
+      this.#originalTabindex.set(item, item.getAttribute("tabindex"));
+      if (dropFromTabSequence) item.tabIndex = -1;
+    }
+    this.#normalizePressed(item);
+  }
+  /** Restores only defaults owned because an element belonged to this group. */
+  #releaseItem(item) {
+    if (!this.#managedItems.delete(item)) return;
+    const original = this.#originalTabindex.get(item);
+    if (original === null) item.removeAttribute("tabindex");
+    else if (original !== void 0) item.setAttribute("tabindex", original);
+    this.#originalTabindex.delete(item);
+    if (this.#ownedPressed.delete(item)) item.removeAttribute("aria-pressed");
+    this.#internalPressedValues.delete(item);
+  }
+  /** Supplies a missing pressed state and normalizes invalid ARIA tokens. */
+  #normalizePressed(item) {
+    const value = item.getAttribute("aria-pressed");
+    if (value === null) {
+      this.#ownedPressed.add(item);
+      this.#internalPressedValues.set(item, "false");
+      item.setAttribute("aria-pressed", "false");
+    } else if (value !== "true" && value !== "false") {
+      item.setAttribute("aria-pressed", "false");
+    }
+  }
+  /** Makes the first DOM-ordered pressed item the sole pressed item in single mode. */
+  #normalizeSelection() {
+    for (const item of this.#managedTargets) this.#normalizePressed(item);
+    if (this.modeValue !== "single") return;
+    let found = false;
+    for (const item of this.#managedTargets) {
+      if (!this.#isPressed(item)) continue;
+      if (!found) found = true;
+      else this.#setPressed(item, false);
+    }
+  }
+  /** Keeps one navigable Tab stop, preferring current DOM state after initial connect. */
+  #ensureTabStop(initialPreference) {
+    const navigable = this.#navigableItems;
+    let active;
+    if (initialPreference !== void 0) {
+      active = initialPreference ?? void 0;
+    } else {
+      const current = this.#managedTargets.filter(
+        (item) => item.tabIndex === 0 && this.#isNavigable(item)
+      );
+      if (current.length === 1) active = current[0];
+    }
+    active ??= navigable.find((item) => this.#isPressed(item));
+    active ??= navigable[0];
+    this.#setActive(active ?? null);
+  }
+  /** Moves through the full item order until a navigable destination is found. */
+  #nextNavigable(fromIndex, delta) {
+    const items = this.#managedTargets;
+    let index = fromIndex;
+    for (let step = 0; step < items.length; step++) {
+      index = rovingMove(index, items.length, delta, "wrap");
+      const candidate = items[index];
+      if (candidate && this.#isNavigable(candidate)) return candidate;
+    }
+    return void 0;
+  }
+  /** Assigns the single roving Tab stop and optionally moves DOM focus. */
+  #setActive(item, focus = false) {
+    this.#roving.setActive(this.#managedTargets.indexOf(item), { focus });
+  }
+  /** Finds this group's item containing an event target, excluding nested groups. */
+  #itemForEventTarget(target) {
+    if (!this.#ownsEventTarget(target)) return void 0;
+    const node = target;
+    return this.itemTargets.find((item) => item === node || item.contains(node));
+  }
+  /** Whether the closest Toggle Group scope around a target is this instance. */
+  #ownsEventTarget(target) {
+    return target instanceof Element && target.closest('[data-controller~="stimeo--toggle-group"]') === this.element;
+  }
+  /** Hosts whose activation model can be owned without conflicting native behavior. */
+  #isSupportedHost(item) {
+    if (item instanceof HTMLButtonElement) return item.type === "button";
+    return !isInteractiveHost(item);
+  }
+  /** Items eligible for roving focus (ARIA-disabled deliberately remains eligible). */
+  #isNavigable(item) {
+    if (!this.#isSupportedHost(item) || this.#isHidden(item)) return false;
+    if (!(item instanceof HTMLButtonElement)) return true;
+    return !item.disabled && !inheritsFieldsetDisabled(item);
+  }
+  /** Whether hidden applies on the path from an item up to the group root. */
+  #isHidden(item) {
+    let current = item;
+    while (current && current !== this.element) {
+      if (current.hasAttribute("hidden")) return true;
+      current = current.parentElement;
+    }
+    return false;
+  }
+  /** Whether ARIA, visibility, or native HTML semantics suppress activation. */
+  #isActivationDisabled(item) {
+    if (!this.#isNavigable(item)) return true;
+    let current = item;
+    while (current) {
+      if (current.getAttribute("aria-disabled") === "true") return true;
+      current = current.parentElement;
+    }
+    return false;
+  }
+  /** Releases default ownership when a Turbo morph authors `aria-pressed`. */
+  #releaseAuthoredPressed(records) {
+    for (const record of records) {
+      if (record.attributeName !== "aria-pressed") continue;
+      const item = record.target;
+      const value = item.getAttribute("aria-pressed");
+      if (value !== null && this.#internalPressedValues.get(item) !== value) {
+        this.#ownedPressed.delete(item);
+      }
+    }
+    this.#internalPressedValues.clear();
+  }
+  /** Watches target membership, retained item hosts/state, and inherited host/fieldset state. */
+  #observeMutations() {
+    const observer = new MutationObserver((records) => {
+      this.#releaseAuthoredPressed(records);
+      observer.disconnect();
+      this.#reconcile();
+      this.#observeWith(observer);
+    });
+    this.#observer = observer;
+    this.#observeWith(observer);
+  }
+  /** Registers every root and ancestor observation on one observer instance. */
+  #observeWith(observer) {
+    observer.observe(this.element, {
+      subtree: true,
+      childList: true,
+      attributes: true,
+      attributeFilter: ITEM_ATTRIBUTES
+    });
+    let ancestor = this.element.parentElement;
+    while (ancestor) {
+      observer.observe(ancestor, {
+        attributes: true,
+        attributeFilter: ["contenteditable", "disabled"]
+      });
+      ancestor = ancestor.parentElement;
+    }
+  }
+  /** Supported targets currently managed by the roving primitive. */
+  get #managedTargets() {
+    return this.itemTargets.filter((item) => this.#managedItems.has(item));
+  }
+  /** Managed items eligible for the roving Tab stop. */
+  get #navigableItems() {
+    return this.#managedTargets.filter((item) => this.#isNavigable(item));
+  }
   /** Whether an item is currently pressed. */
   #isPressed(item) {
     return item.getAttribute("aria-pressed") === "true";
   }
-  /** Reflects the pressed state on `aria-pressed`. */
+  /** Reflects pressed state while distinguishing controller writes from authored morphs. */
   #setPressed(item, pressed) {
-    item.setAttribute("aria-pressed", pressed ? "true" : "false");
+    const value = pressed ? "true" : "false";
+    this.#internalPressedValues.set(item, value);
+    item.setAttribute("aria-pressed", value);
   }
-  /** The `data-value` of every currently pressed item. */
+  /** The DOM-ordered values of every currently pressed managed item. */
   #pressedValues() {
-    return this.itemTargets.filter((item) => this.#isPressed(item)).map((item) => this.#itemValue(item));
+    return this.#managedTargets.filter((item) => this.#isPressed(item)).map((item) => this.#itemValue(item));
   }
   /** An item's value (`data-value`, defaulting to empty). */
   #itemValue(item) {