stimeo-ui 0.16.0 → 0.18.0

package/dist/controllers/toggle_group_controller.js

@@ -1,13 +1,31 @@
 import { Controller } from '@hotwired/stimulus';
 
-// src/controllers/toggle_group_controller.ts
+var FOCUS_EVENTS = /* @__PURE__ */ new Set(["blur", "focus", "focusin", "focusout"]);
+var POINTER_EVENTS = /* @__PURE__ */ new Set(["mouseenter", "mouseleave", "pointerenter", "pointerleave"]);
+function stateReasonFor(event) {
+  if (!event) return "api";
+  if (FOCUS_EVENTS.has(event.type)) return "focus";
+  if (POINTER_EVENTS.has(event.type)) return "pointer";
+  return "user";
+}
+
+function actionSource(source) {
+  if (source instanceof HTMLElement) {
+    return { event: null, host: source, origin: source, reason: "api" };
+  }
+  const event = source ?? null;
+  return {
+    event,
+    host: event?.currentTarget instanceof Element ? event.currentTarget : null,
+    origin: event?.target instanceof Element ? event.target : null,
+    reason: stateReasonFor(event)
+  };
+}
 
-// src/utils/logical_scroll.ts
 function isRtl(element) {
   return window.getComputedStyle(element).direction === "rtl";
 }
 
-// src/utils/arrow_step.ts
 function logicalArrowStep(key, element) {
   if (key === "ArrowDown") return 1;
   if (key === "ArrowUp") return -1;
@@ -19,8 +37,108 @@ function isReservedArrowChord(event, allow = []) {
   if (!event.key.startsWith("Arrow")) return false;
   return event.altKey && !allow.includes("alt") || event.ctrlKey && !allow.includes("ctrl") || event.metaKey && !allow.includes("meta") || event.shiftKey && !allow.includes("shift");
 }
+function hasModifierChord(event) {
+  return event.altKey || event.ctrlKey || event.metaKey || event.shiftKey;
+}
+
+function setAttributeIfChanged(element, name, value, beforeWrite) {
+  if (element.getAttribute(name) === value) return false;
+  beforeWrite?.();
+  if (value === null) element.removeAttribute(name);
+  else element.setAttribute(name, value);
+  return true;
+}
+
+var AuthoredMutationWatcher = class {
+  #onAuthored;
+  #claims = null;
+  #observer = null;
+  constructor(onAuthored) {
+    this.#onAuthored = onAuthored;
+  }
+  observe(root, options) {
+    this.disconnect();
+    const observer = new MutationObserver((records) => {
+      if (this.#observer !== observer) return;
+      const authored = this.#filter(records);
+      if (authored.length > 0) this.#onAuthored(authored);
+    });
+    this.#observer = observer;
+    this.#claims = { attributes: /* @__PURE__ */ new Map(), children: /* @__PURE__ */ new Map() };
+    observer.observe(root, {
+      attributes: true,
+      attributeFilter: [...options.attributes],
+      subtree: options.subtree ?? false,
+      childList: options.childList ?? false
+    });
+    if (options.ancestorAttributes) {
+      let ancestor = root.parentElement;
+      while (ancestor) {
+        observer.observe(ancestor, {
+          attributes: true,
+          attributeFilter: [...options.ancestorAttributes]
+        });
+        ancestor = ancestor.parentElement;
+      }
+    }
+  }
+  claim(target, name, value) {
+    const claims = this.#claims?.attributes;
+    let attributes = claims?.get(target);
+    if (!attributes) {
+      attributes = /* @__PURE__ */ new Map();
+      claims?.set(target, attributes);
+    }
+    const pending = attributes.get(name);
+    attributes.set(name, { value, count: (pending?.count ?? 0) + 1 });
+  }
+  claimCurrent(target, name) {
+    this.claim(target, name, target.getAttribute(name));
+  }
+  claimChildList(target, added, removed) {
+    const claims = this.#claims?.children;
+    const pending = claims?.get(target) ?? { added: /* @__PURE__ */ new Map(), removed: /* @__PURE__ */ new Map() };
+    for (const node of added) pending.added.set(node, (pending.added.get(node) ?? 0) + 1);
+    for (const node of removed) pending.removed.set(node, (pending.removed.get(node) ?? 0) + 1);
+    claims?.set(target, pending);
+  }
+  take() {
+    return this.#filter(this.#observer?.takeRecords() ?? []);
+  }
+  disconnect() {
+    this.#observer?.disconnect();
+    this.#observer = null;
+    this.#claims = null;
+  }
+  #filter(records) {
+    const authored = records.filter((record) => !this.#consume(record));
+    this.#claims?.attributes.clear();
+    this.#claims?.children.clear();
+    return authored;
+  }
+  #consume(record) {
+    if (record.type === "attributes") {
+      const target = record.target;
+      const pending2 = this.#claims?.attributes.get(target)?.get(record.attributeName);
+      if (!pending2 || pending2.count === 0 || target.getAttribute(record.attributeName) !== pending2.value) {
+        return false;
+      }
+      pending2.count -= 1;
+      return true;
+    }
+    const pending = this.#claims?.children.get(record.target);
+    if (!pending) return false;
+    const added = [...record.addedNodes];
+    const removed = [...record.removedNodes];
+    if (added.some((node) => !pending.added.get(node)) || removed.some((node) => !pending.removed.get(node))) {
+      return false;
+    }
+    for (const node of added) pending.added.set(node, (pending.added.get(node) ?? 0) - 1);
+    for (const node of removed) pending.removed.set(node, (pending.removed.get(node) ?? 0) - 1);
+    return true;
+  }
+};
 
-// src/utils/event_owner.ts
 function ownerIndex(candidates, node) {
   if (!(node instanceof Node)) return -1;
   return candidates.findIndex((candidate) => candidate.contains(node));
@@ -29,7 +147,6 @@ function ownerOf(candidates, node) {
   return candidates[ownerIndex(candidates, node)] ?? null;
 }
 
-// src/utils/field_mirror.ts
 function writeFields(container, values, { name, form = "" }) {
   const current = [...container.children];
   const submits = current.length === values.length && current.every(
@@ -52,7 +169,6 @@ function commitField(target) {
   target.dispatchEvent(new Event("change", { bubbles: true }));
 }
 
-// src/utils/focus_candidate.ts
 function inheritsFieldsetDisabled(control) {
   let fieldset = control.closest("fieldset[disabled]");
   while (fieldset) {
@@ -63,7 +179,6 @@ function inheritsFieldsetDisabled(control) {
   return false;
 }
 
-// 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;
@@ -80,27 +195,36 @@ function isInteractiveHost(element) {
   return false;
 }
 
-// src/utils/microtask_coalescer.ts
+var ListenerSet = class {
+  #abort = new AbortController();
+  add(target, type, handler, options) {
+    target.addEventListener(type, handler, { ...options, signal: this.#abort.signal });
+  }
+  dispose() {
+    this.#abort.abort();
+    this.#abort = new AbortController();
+  }
+};
+
 var MicrotaskCoalescer = class {
   #run;
   #queued = false;
   #active = false;
   #generation = 0;
-  /** @param run - the single reconciliation pass, invoked at most once per batch. */
   constructor(run) {
     this.#run = run;
   }
-  /** Opens the window in which {@link schedule} is honoured; call from `connect()`. */
   activate() {
     this.#active = true;
   }
-  /** Closes the window and drops any pending pass; call from `disconnect()`. */
   cancel() {
     this.#active = false;
     this.#queued = false;
     this.#generation += 1;
   }
-  /** Requests one pass after the batch settles. Idempotent; inert outside the window. */
+  get pending() {
+    return this.#queued;
+  }
   schedule() {
     if (!this.#active || this.#queued) return;
     this.#queued = true;
@@ -113,31 +237,53 @@ var MicrotaskCoalescer = class {
   }
 };
 
-// src/utils/roving_tabindex.ts
+var MorphRenderWatcher = class {
+  #listeners = new ListenerSet();
+  #pass;
+  #element = null;
+  #onMorph = () => this.#pass.schedule();
+  constructor(run) {
+    this.#pass = new MicrotaskCoalescer(run);
+  }
+  observe(element) {
+    if (this.#element === element) return;
+    this.disconnect();
+    this.#element = element;
+    this.#pass.activate();
+    this.#listeners.add(element, "turbo:morph-element", this.#onMorph);
+  }
+  schedule() {
+    this.#pass.schedule();
+  }
+  get pending() {
+    return this.#pass.pending;
+  }
+  disconnect() {
+    this.#listeners.dispose();
+    this.#pass.cancel();
+    this.#element = null;
+  }
+};
+
+var MoveCounter = class {
+  #sequence = 0;
+  record() {
+    this.#sequence += 1;
+    return this.#sequence;
+  }
+  isLatest(token) {
+    return token === this.#sequence;
+  }
+};
+
 var RovingTabindex = class {
-  /** Returns the current ordered item elements; called on every operation. */
   #getItems;
-  /**
-   * @param getItems - Returns the current ordered item elements. Called on every
-   *   operation so the live target list is always used.
-   */
   constructor(getItems) {
     this.#getItems = getItems;
   }
-  /** Index of the currently tabbable item (`tabindex="0"`), or `-1` if none. */
   get activeIndex() {
     return this.#getItems().findIndex((item) => item.tabIndex === 0);
   }
-  /**
-   * Makes exactly the item at `index` tabbable (`tabindex="0"`) and removes every
-   * other item from the Tab sequence (`tabindex="-1"`). An out-of-range `index`
-   * (e.g. `-1`) leaves all items at `-1`, which a controller can use to express
-   * "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,
-   *   and `items` to reuse an event-scoped collection snapshot.
-   */
   setActive(index, options = {}) {
     const { focus = false } = options;
     const items = options.items ?? this.#getItems();
@@ -153,7 +299,10 @@ function rovingMove(current, length, delta, wrap) {
   return (next + length) % length;
 }
 
-// src/controllers/toggle_group_controller.ts
+function targetSelector(identifier, name) {
+  return `[data-${identifier}-target~="${name}"]`;
+}
+
 var ITEM_ATTRIBUTES = [
   "aria-pressed",
   "data-value",
@@ -164,8 +313,9 @@ var ITEM_ATTRIBUTES = [
   "contenteditable",
   "controls"
 ];
-var hasModifier = (event) => event.altKey || event.ctrlKey || event.metaKey || event.shiftKey;
 var ToggleGroupController = class extends Controller {
+  #moves = new MoveCounter();
+  #connectionGeneration = 0;
   static targets = ["item", "fields"];
   static values = {
     mode: { type: String, default: "multiple" },
@@ -177,28 +327,18 @@ var ToggleGroupController = class extends Controller {
   #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();
-  /** One pass per batch of item, Value, and retained-element changes. */
-  #pass = new MicrotaskCoalescer(() => this.#reconcileDom());
-  #observer = null;
+  #originalTabindex = /* @__PURE__ */ new WeakMap();
+  #ownedPressed = /* @__PURE__ */ new Map();
+  #pass = new MorphRenderWatcher(() => this.#reconcileDom());
+  #observer = new AuthoredMutationWatcher((records) => {
+    this.#releaseAuthoredPressed(records);
+    this.#pass.schedule();
+  });
   #connected = false;
-  /** The pressed set last published: read on connect, then committed or reported. */
   #committedValues = [];
-  /**
-   * How many presses the user has committed, so a press whose reports are still
-   * going out can tell that a listener has committed a newer one meanwhile.
-   */
-  #presses = 0;
-  /**
-   * 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. The pressed set it
-   * settles on is the one a later move is measured from; connecting reports
-   * nothing.
-   */
+  #listeners = new ListenerSet();
   connect() {
+    this.#releaseDefaultsRewrittenWhileAway();
     const currentItems = new Set(this.itemTargets);
     for (const item of this.#managedItems) {
       if (!currentItems.has(item)) this.#releaseItem(item);
@@ -212,84 +352,62 @@ var ToggleGroupController = class extends Controller {
     this.#ensureTabStop(preferred);
     this.#mirrorFields(false);
     this.#committedValues = this.#pressedValues();
-    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.#listeners.add(this.element, "click", this.#onClickCapture, { capture: true });
+    this.#listeners.add(this.element, "keydown", this.#onKeydownCapture, { capture: true });
+    this.#listeners.add(this.element, "click", this.#onClick);
+    this.#listeners.add(this.element, "keydown", this.#onKeydown);
+    this.#listeners.add(this.element, "focusin", this.#onFocusin);
     this.#connected = true;
-    this.#internalPressedValues.clear();
-    this.#pass.activate();
+    this.#pass.observe(this.element);
     this.#observeMutations();
   }
-  /**
-   * Releases every listener, the observer, and a pass still queued, while
-   * retaining DOM state for Turbo cache/reconnect.
-   */
   disconnect() {
+    this.#connectionGeneration += 1;
     this.#connected = false;
-    this.#pass.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.#observer?.disconnect();
-    this.#observer = null;
-    this.#internalPressedValues.clear();
+    this.#pass.disconnect();
+    this.#listeners.dispose();
+    this.#observer.disconnect();
   }
-  /** Drops a newly connected item from the Tab sequence before the batch is reconciled. */
   itemTargetConnected(item) {
     if (!this.#connected) return;
     this.#reconcileHost(item, true);
     this.#pass.schedule();
   }
-  /** Restores attributes owned only while an element is an item, then reconciles the batch. */
   itemTargetDisconnected(item) {
     if (!this.#connected) return;
     this.#releaseItem(item);
     this.#pass.schedule();
   }
-  /** Reconciles the single-selection invariant when the Stimulus Value changes. */
   modeValueChanged() {
     this.#pass.schedule();
   }
-  /** Rebuilds the submitted fields when the public name changes at runtime. */
   nameValueChanged() {
     this.#pass.schedule();
   }
-  /** Repoints the submitted fields when the owning form changes at runtime. */
   formValueChanged() {
     this.#pass.schedule();
   }
-  /**
-   * Toggles the action's item. Per-item action wiring is optional because click
-   * is also delegated from the group.
-   */
-  toggle(event) {
-    if (event.defaultPrevented) return;
-    const item = event.currentTarget;
+  toggle(source) {
+    const { event, host, origin, reason } = actionSource(source);
+    const item = host?.closest(targetSelector(this.identifier, "item"));
     if (!item || !this.itemTargets.includes(item)) return;
-    this.#handledEvents.add(event);
-    this.#toggleItem(item);
+    if (origin && origin.closest(`[data-controller~="${this.identifier}"]`) !== this.element)
+      return;
+    if (event?.defaultPrevented) return;
+    if (event) this.#handledEvents.add(event);
+    this.#toggleItem(item, reason);
   }
-  /**
-   * Moves focus or activates the action's item. Per-item action wiring is
-   * optional because keydown is also delegated from the group.
-   */
   onKeydown(event) {
     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);
@@ -297,29 +415,25 @@ var ToggleGroupController = class extends Controller {
     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;
-    if ((event.key === "Home" || event.key === "End") && hasModifier(event)) return;
+    if ((event.key === "Home" || event.key === "End") && hasModifierChord(event)) return;
     if (!this.#managedItems.has(item)) this.#reconcileHost(item, true);
     this.#ensureTabStop();
     const items = this.#managedTargets;
@@ -353,19 +467,9 @@ var ToggleGroupController = class extends Controller {
     event.preventDefault();
     if (destination) this.#setActive(destination, true);
   }
-  /**
-   * Applies one user toggle and dispatches the documented change detail. The set
-   * it leaves is taken as published before either report goes out, so a
-   * listener that presses again or writes `aria-pressed` is measured from it. A
-   * listener of the native `change` that presses again has had that newer press
-   * reported, so this press's `change` would describe a set that is gone and is
-   * not dispatched.
-   *
-   * @stimeoRuntimeOnly `mode` is the rule this one press follows; the lasting single-press
-   *   normalisation is a render root of its own.
-   */
-  #toggleItem(item) {
+  #toggleItem(item, reason = "user") {
     if (!this.#isSupportedHost(item) || this.#isActivationDisabled(item)) return;
+    const generation = this.#connectionGeneration;
     if (!this.#managedItems.has(item)) this.#reconcileHost(item, true);
     const willPress = !this.#isPressed(item);
     if (this.modeValue === "single") {
@@ -376,49 +480,40 @@ var ToggleGroupController = class extends Controller {
     }
     this.#setActive(item);
     const values = this.#pressedValues();
+    const previous = this.#committedValues;
+    const changed = values.length !== previous.length || values.some((value, index) => value !== previous[index]);
     this.#committedValues = values;
-    this.#presses += 1;
-    const press = this.#presses;
+    if (!changed) {
+      this.#mirrorFields(false);
+      return;
+    }
+    const token = this.#moves.record();
     this.#mirrorFields(true);
-    if (press !== this.#presses) return;
+    if (generation !== this.#connectionGeneration || !this.#moves.isLatest(token)) return;
     this.dispatch("change", {
-      detail: { value: this.#itemValue(item), pressed: willPress, values: [...values] }
+      detail: { value: this.#itemValue(item), pressed: willPress, values: [...values], reason }
     });
   }
-  /**
-   * Mirrors the pressed values into the optional fields container.
-   *
-   * @stimeoRenderRoot
-   */
   #mirrorFields(notify) {
     if (!this.hasFieldsTarget) return;
     const options = { name: this.nameValue, form: this.formValue };
-    if (writeFields(this.fieldsTarget, this.#pressedValues(), options) && notify) {
-      commitField(this.fieldsTarget);
-    }
+    const removed = [...this.fieldsTarget.childNodes];
+    const changed = writeFields(this.fieldsTarget, this.#pressedValues(), options);
+    if (changed)
+      this.#observer.claimChildList(this.fieldsTarget, [...this.fieldsTarget.childNodes], removed);
+    if (changed && notify) commitField(this.fieldsTarget);
   }
-  /**
-   * Reconciles supported hosts, pressed state, the roving invariant, and the
-   * fields after the page changed the group, then reports a pressed set that
-   * moved. Records still queued are read first, so an author's write is not lost
-   * when observation is suspended for this pass's own writes; observation resumes
-   * before the report, so an edit a listener makes is seen by the next pass.
-   */
   #reconcileDom() {
-    const observer = this.#observer;
-    if (observer) {
-      this.#releaseAuthoredPressed(observer.takeRecords());
-      observer.disconnect();
-    }
+    this.#releaseAuthoredPressed(this.#observer.take());
     for (const item of this.itemTargets) this.#reconcileHost(item, true);
     this.#normalizeSelection();
     this.#ensureTabStop();
     this.#mirrorFields(false);
-    this.#internalPressedValues.clear();
-    if (observer) this.#observeWith(observer);
+    const authored = this.#observer.take();
+    this.#releaseAuthoredPressed(authored);
+    if (authored.length > 0) this.#pass.schedule();
     this.#reportMove();
   }
-  /** Reports a pressed set that moved since the one this group last published. */
   #reportMove() {
     const values = this.#pressedValues();
     const previous = this.#committedValues;
@@ -428,7 +523,6 @@ var ToggleGroupController = class extends Controller {
     this.#committedValues = values;
     this.dispatch("reconcile", { detail: { values: [...values] } });
   }
-  /** Begins or ends ownership according to the item's current host semantics. */
   #reconcileHost(item, dropFromTabSequence) {
     if (!this.#isSupportedHost(item)) {
       this.#releaseItem(item);
@@ -441,34 +535,23 @@ var ToggleGroupController = class extends Controller {
     }
     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);
+    if (this.#ownedPressed.delete(item)) this.#writePressed(item, null);
   }
-  /** 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");
+      this.#ownedPressed.set(item, "false");
+      this.#writePressed(item, "false");
     } else if (value !== "true" && value !== "false") {
-      item.setAttribute("aria-pressed", "false");
+      this.#writePressed(item, "false");
     }
   }
-  /**
-   * Makes the first DOM-ordered pressed item the sole pressed item in single mode.
-   *
-   * @stimeoRenderRoot
-   */
   #normalizeSelection() {
-    for (const item of this.#managedTargets) this.#normalizePressed(item);
     if (this.modeValue !== "single") return;
     let found = false;
     for (const item of this.#managedTargets) {
@@ -477,7 +560,6 @@ var ToggleGroupController = class extends Controller {
       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;
@@ -493,7 +575,6 @@ var ToggleGroupController = class extends Controller {
     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;
@@ -504,31 +585,25 @@ var ToggleGroupController = class extends Controller {
     }
     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 null;
     return ownerOf(this.itemTargets, target);
   }
-  /** Whether the closest Toggle Group scope around a target is this instance. */
   #ownsEventTarget(target) {
     return target instanceof Element && target.closest(`[data-controller~="${this.identifier}"]`) === 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) {
@@ -537,7 +612,6 @@ var ToggleGroupController = class extends Controller {
     }
     return false;
   }
-  /** Whether ARIA, visibility, or native HTML semantics suppress activation. */
   #isActivationDisabled(item) {
     if (!this.#isNavigable(item)) return true;
     let current = item;
@@ -547,72 +621,59 @@ var ToggleGroupController = class extends Controller {
     }
     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) {
+      if (value !== null) {
         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);
-      this.#pass.schedule();
-    });
-    this.#observer = observer;
-    this.#observeWith(observer);
-  }
-  /** Registers every root and ancestor observation on one observer instance. */
-  #observeWith(observer) {
-    observer.observe(this.element, {
+    this.#observer.observe(this.element, {
       subtree: true,
       childList: true,
-      attributes: true,
-      attributeFilter: ITEM_ATTRIBUTES
+      attributes: ITEM_ATTRIBUTES,
+      ancestorAttributes: ["contenteditable", "disabled"]
     });
-    let ancestor = this.element.parentElement;
-    while (ancestor) {
-      observer.observe(ancestor, {
-        attributes: true,
-        attributeFilter: ["contenteditable", "disabled"]
-      });
-      ancestor = ancestor.parentElement;
+  }
+  #releaseDefaultsRewrittenWhileAway() {
+    for (const [item, written] of this.#ownedPressed) {
+      const current = item.getAttribute("aria-pressed");
+      if (current !== null && current !== written) this.#ownedPressed.delete(item);
     }
   }
-  /** 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 pressed state while distinguishing controller writes from authored morphs. */
   #setPressed(item, pressed) {
     const value = pressed ? "true" : "false";
-    this.#internalPressedValues.set(item, value);
-    item.setAttribute("aria-pressed", value);
+    if (this.#ownedPressed.has(item)) this.#ownedPressed.set(item, value);
+    this.#writePressed(item, value);
   }
-  /** The DOM-ordered values of every currently pressed managed item. */
   #pressedValues() {
     return this.#managedTargets.filter((item) => this.#isPressed(item)).map((item) => this.#itemValue(item));
   }
-  /** An item's value (`data-value`, defaulting to empty). */
   #itemValue(item) {
     return item.getAttribute("data-value") ?? "";
   }
+  #writePressed(item, value) {
+    setAttributeIfChanged(
+      item,
+      "aria-pressed",
+      value,
+      () => this.#observer.claim(item, "aria-pressed", value)
+    );
+  }
 };
 
 export { ToggleGroupController };
-//# sourceMappingURL=toggle_group_controller.js.map
 //# sourceMappingURL=toggle_group_controller.js.map