stimeo-ui 0.15.0 → 0.17.0

package/dist/controllers/conditional_fields_controller.d.ts

@@ -28,6 +28,11 @@ type Trigger = HTMLInputElement | HTMLSelectElement;
  * another region being hidden in the same pass — the controller root temporarily
  * receives `tabindex="-1"` and focus.
  *
+ * An element that stops being a region gets back what this controller wrote on
+ * it: `aria-hidden`, `data-visible`, the `hidden` a declared condition set, and
+ * the marked `disabled` of each control no hidden region still covers. The
+ * `hidden` of a region without a condition and every authored `disabled` stay.
+ *
  * `change` and `reconcile` dispatch `{ region, visible }`.
  *
  * @remarks
@@ -71,8 +76,16 @@ declare class ConditionalFieldsController extends Controller<HTMLElement> {
     triggerTargetDisconnected(): void;
     /** Initializes a region target inserted or restored at runtime. */
     regionTargetConnected(): void;
-    /** Reconciles the remaining region set after a target leaves. */
-    regionTargetDisconnected(): void;
+    /**
+     * Queues a departed region for the return of its written state and reconciles the rest.
+     *
+     * The return is queued rather than immediate because teardown reports every
+     * region as disconnected, and a disconnected controller leaves its derived state
+     * in the DOM. The pass that drains the queue skips an element that is still a
+     * region, which drops what teardown queued, and keeps a departure queued before
+     * a disconnect for the pass after the reconnect.
+     */
+    regionTargetDisconnected(region: HTMLElement): void;
     /** Reconciles when application code or a morph changes the match policy. */
     matchValueChanged(): void;
     /** Reconciles control ownership when hidden controls become enabled or excluded. */

package/dist/controllers/conditional_fields_controller.js

@@ -1,14 +1,10 @@
 import { Controller } from '@hotwired/stimulus';
 
-// src/controllers/conditional_fields_controller.ts
-
-// src/utils/event_owner.ts
 function ownerIndex(candidates, node) {
   if (!(node instanceof Node)) return -1;
   return candidates.findIndex((candidate) => candidate.contains(node));
 }
 
-// src/utils/focus_candidate.ts
 function inheritsFieldsetDisabled(control) {
   let fieldset = control.closest("fieldset[disabled]");
   while (fieldset) {
@@ -18,59 +14,92 @@ function inheritsFieldsetDisabled(control) {
   }
   return false;
 }
+function unslotted(element) {
+  return element.assignedSlot === null && element.parentElement?.shadowRoot != null;
+}
+function flatTreeParent(element) {
+  if (unslotted(element)) return null;
+  const parent = element.assignedSlot ?? element.parentNode;
+  if (parent instanceof ShadowRoot) return parent.host;
+  return parent instanceof Element ? parent : null;
+}
 function canTakeFocus(element) {
-  if (element.closest("[hidden], [inert]")) return false;
+  for (let node = element; node; node = flatTreeParent(node)) {
+    if (unslotted(node) || node.matches("[hidden], [inert]")) return false;
+  }
   if (element instanceof HTMLInputElement && element.type === "hidden") return false;
   if (!("disabled" in element)) return true;
   if (element.disabled) return false;
   return !inheritsFieldsetDisabled(element);
 }
 
-// src/utils/listener_set.ts
+var FormResetWatcher = class {
+  #owns;
+  #onReset;
+  #frames = /* @__PURE__ */ new Set();
+  #generation = 0;
+  constructor(owns, onReset) {
+    this.#owns = owns;
+    this.#onReset = onReset;
+  }
+  observe() {
+    document.addEventListener("reset", this.#handleReset, true);
+  }
+  disconnect() {
+    document.removeEventListener("reset", this.#handleReset, true);
+    this.#generation += 1;
+    for (const frame of this.#frames) cancelAnimationFrame(frame);
+    this.#frames.clear();
+  }
+  #handleReset = (event) => {
+    const form = event.target;
+    if (!(form instanceof HTMLFormElement) || !this.#owns(form)) return;
+    const generation = this.#generation;
+    queueMicrotask(() => {
+      if (generation !== this.#generation) return;
+      if (event.eventPhase === Event.NONE) {
+        this.#settle(event);
+        return;
+      }
+      const frame = requestAnimationFrame(() => {
+        this.#frames.delete(frame);
+        this.#settle(event);
+      });
+      this.#frames.add(frame);
+    });
+  };
+  #settle(event) {
+    if (!event.defaultPrevented) this.#onReset();
+  }
+};
+
 var ListenerSet = class {
-  /** The generation every `add` joins until the next `dispose()`. */
   #abort = new AbortController();
-  /**
-   * Attaches `handler` to the open generation, exactly as the caller spelled it.
-   *
-   * The set supplies the signal, so `options` carries everything else the DOM
-   * accepts — `capture` included, which has to match at release time and no
-   * longer has a second place to drift from.
-   */
   add(target, type, handler, options) {
     target.addEventListener(type, handler, { ...options, signal: this.#abort.signal });
   }
-  /**
-   * Releases every listener of the open generation, synchronously, and opens the
-   * next one. Idempotent, and safe before anything has been added.
-   */
   dispose() {
     this.#abort.abort();
     this.#abort = new AbortController();
   }
 };
 
-// src/utils/microtask_coalescer.ts
 var MicrotaskCoalescer = class {
   #run;
   #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. */
   schedule() {
     if (!this.#active || this.#queued) return;
     this.#queued = true;
@@ -83,68 +112,148 @@ var MicrotaskCoalescer = class {
   }
 };
 
-// src/utils/before_cache_reset.ts
-var BeforeCacheReset = class _BeforeCacheReset {
-  /** Every subscribed instance, iterated by the one shared document listener. */
-  static #subscribers = /* @__PURE__ */ new Set();
-  /** The shared listener; installed while at least one instance is subscribed. */
-  static #onBeforeCache = () => {
-    for (const subscriber of _BeforeCacheReset.#subscribers) subscriber.#rewind();
-  };
-  #rewind;
-  /** @param rewind - the pass that returns this controller's state to its initial form. */
-  constructor(rewind) {
-    this.#rewind = rewind;
+var MorphRenderWatcher = class {
+  #listeners = new ListenerSet();
+  #pass;
+  #element = null;
+  #onMorph = () => this.#pass.schedule();
+  constructor(run) {
+    this.#pass = new MicrotaskCoalescer(run);
   }
-  /** Subscribes to `turbo:before-cache`; call from `connect()`. Idempotent. */
-  activate() {
-    const first = _BeforeCacheReset.#subscribers.size === 0;
-    _BeforeCacheReset.#subscribers.add(this);
-    if (first) {
-      document.addEventListener("turbo:before-cache", _BeforeCacheReset.#onBeforeCache);
-    }
+  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();
   }
-  /** Unsubscribes; call from `disconnect()`. Safe when never subscribed. */
-  deactivate() {
-    _BeforeCacheReset.#subscribers.delete(this);
-    if (_BeforeCacheReset.#subscribers.size > 0) return;
-    document.removeEventListener("turbo:before-cache", _BeforeCacheReset.#onBeforeCache);
+  disconnect() {
+    this.#listeners.dispose();
+    this.#pass.cancel();
+    this.#element = null;
   }
 };
 
-// src/utils/tabindex_loan.ts
-var TabindexLoan = class {
+function queryOpenDescendants(root, selector) {
+  const matches = [];
+  const roots = [root];
+  for (const scope of roots) {
+    matches.push(...scope.querySelectorAll(selector));
+    if (scope.nodeType === Node.ELEMENT_NODE) {
+      const shadow = scope.shadowRoot;
+      if (shadow) roots.push(shadow);
+    }
+    for (const element of scope.querySelectorAll("*")) {
+      if (element.shadowRoot) roots.push(element.shadowRoot);
+    }
+  }
+  return matches;
+}
+
+function sharedRegistry(key, create) {
+  const symbol = Symbol.for(key);
+  const scope = globalThis;
+  const existing = scope[symbol];
+  if (existing !== void 0) return existing;
+  const registry = create();
+  Object.defineProperty(globalThis, symbol, { value: registry });
+  return registry;
+}
+
+var TabindexLoan = class _TabindexLoan {
+  static #registry = sharedRegistry(
+    "stimeo-ui.tabindex-loan.registry.v1",
+    () => ({ stacks: /* @__PURE__ */ new WeakMap(), names: /* @__PURE__ */ new Set() })
+  );
   #value;
+  #record;
   #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,
-   *   which a scroll region with no focusable content of its own needs.
-   */
-  constructor(value = "-1") {
+  constructor(value, owner) {
     this.#value = value;
+    this.#record = `data-${owner}-tabindex-loan`;
+    _TabindexLoan.#registry.names.add(this.#record);
   }
-  /** Lends `element` the value; no-ops when it already carries a `tabindex`. */
   lend(element) {
-    if (element.hasAttribute("tabindex")) return;
-    element.setAttribute("tabindex", this.#value);
+    const stack = this.#stack(element);
+    const current = element.getAttribute("tabindex");
+    const held = stack.find((hold) => hold.loan === this) ?? stack.find(
+      (hold) => hold.loan === null && hold.record === this.#record && hold.value === this.#value
+    );
+    const linked = stack.at(-1)?.value === current;
+    if (!held && current !== null && !linked) return;
     this.#lent.add(element);
-    this.#beforeCache.activate();
+    if (held) held.loan = this;
+    else stack.push({ loan: this, record: this.#record, value: this.#value, linked });
+    this.#mark(element, stack);
+    if (current === null || !held && current !== this.#value) {
+      element.setAttribute("tabindex", this.#value);
+    }
   }
-  /** Takes back every loan whose value is still the one that was lent. */
   returnAll() {
     for (const element of this.#lent) {
-      if (element.getAttribute("tabindex") === this.#value) element.removeAttribute("tabindex");
+      const stack = this.#stack(element);
+      const hold = stack.find((held) => held.loan === this);
+      if (hold) this.#release(element, stack, hold);
     }
     this.#lent.clear();
-    this.#beforeCache.deactivate();
+  }
+  reclaim(element) {
+    if (element.getAttribute(this.#record) !== this.#value) return;
+    const stack = this.#stack(element);
+    const hold = stack.find((held) => held.loan === null && held.record === this.#record);
+    if (hold && !element.matches(":focus")) this.#release(element, stack, hold);
+  }
+  reclaimWithin(root) {
+    for (const element of queryOpenDescendants(root, `[${this.#record}]`)) {
+      this.reclaim(element);
+    }
+  }
+  #stack(element) {
+    const stacks = _TabindexLoan.#registry.stacks;
+    const stack = stacks.get(element) ?? this.#seed(element);
+    stacks.set(element, stack);
+    return stack;
+  }
+  #seed(element) {
+    const current = element.getAttribute("tabindex");
+    const holds = [];
+    for (const record of _TabindexLoan.#registry.names) {
+      const value = element.getAttribute(record);
+      if (value !== null) holds.push({ loan: null, record, value, linked: true });
+    }
+    holds.sort((one, other) => Number(one.value === current) - Number(other.value === current));
+    for (const [index, hold] of holds.entries()) hold.linked = index > 0;
+    return holds;
+  }
+  #release(element, stack, hold) {
+    const current = element.getAttribute("tabindex");
+    const index = stack.indexOf(hold);
+    const owns = current === hold.value && !stack.slice(index + 1).some((above2) => above2.value === current);
+    stack.splice(index, 1);
+    const above = stack[index];
+    if (above) above.linked &&= hold.linked;
+    this.#mark(element, stack);
+    if (!owns) return;
+    const below = hold.linked ? stack[index - 1] : void 0;
+    if (!below) element.removeAttribute("tabindex");
+    else if (below.value !== current) element.setAttribute("tabindex", below.value);
+  }
+  #mark(element, stack) {
+    const records = /* @__PURE__ */ new Map([[this.#record, null]]);
+    for (const hold of stack) records.set(hold.record, hold.value);
+    for (const [name, recorded] of records) {
+      if (element.getAttribute(name) === recorded) continue;
+      if (recorded === null) element.removeAttribute(name);
+      else element.setAttribute(name, recorded);
+    }
   }
 };
 
-// src/controllers/conditional_fields_controller.ts
 var DISABLED_MARKER = "data-conditional-disabled";
+var CONTROLS = "input, textarea, select, button";
 var OBSERVED_ATTRIBUTES = [
   "hidden",
   "aria-hidden",
@@ -167,19 +276,19 @@ var ConditionalFieldsController = class extends Controller {
   };
   static actions = ["evaluate"];
   static events = ["change", "reconcile"];
-  /** Logical state last committed for each current region; rebuilt on every connect. */
   #lastVisible = /* @__PURE__ */ new WeakMap();
-  /** Controller writes awaiting an observer callback, separated from authored morphs. */
   #internalWrites = /* @__PURE__ */ new WeakMap();
   #observing = false;
-  /** Coalesces one target/morph/mutation batch into one full DOM reconciliation. */
-  #reconcile = new MicrotaskCoalescer(() => this.#reconcileDom());
+  #departed = /* @__PURE__ */ new Set();
+  #concealed = /* @__PURE__ */ new WeakSet();
+  #reconcile = new MorphRenderWatcher(() => this.#reconcileDom());
   #listeners = new ListenerSet();
-  /** Provides the last-resort focus landmark without claiming an authored tabindex. */
-  #rootTabindex = new TabindexLoan();
-  /** Watches retained targets and controls whose declarative or reflected state changed. */
+  #formReset = new FormResetWatcher(
+    (form) => this.#hasTriggerOwnedBy(form),
+    () => this.#reconcile.schedule()
+  );
+  #rootTabindex = new TabindexLoan("-1", this.identifier);
   #observer = new MutationObserver((records) => this.#onMutations(records));
-  /** Evaluates only events whose source is one of this instance's live trigger targets. */
   #onTriggerInput = (event) => {
     const target = event.target;
     const triggers = this.triggerTargets;
@@ -187,25 +296,12 @@ var ConditionalFieldsController = class extends Controller {
       this.#commitChange(triggers);
     }
   };
-  /** Reconciles property-only retained-element changes after Turbo morphs. */
-  #onMorph = () => {
-    this.#reconcile.schedule();
-  };
-  /** Reconciles the settled defaults after a non-cancelled owning form reset. */
-  #onReset = (event) => {
-    const form = event.target;
-    if (form instanceof HTMLFormElement && this.#hasTriggerOwnedBy(form)) {
-      queueMicrotask(() => {
-        if (!event.defaultPrevented) this.#reconcile.schedule();
-      });
-    }
-  };
-  /** Reflects initial live state and opens every retained-DOM reconciliation path. */
   connect() {
+    this.#rootTabindex.reclaim(this.element);
     this.#lastVisible = /* @__PURE__ */ new WeakMap();
     this.#internalWrites = /* @__PURE__ */ new WeakMap();
-    this.#reconcile.activate();
     this.#settle();
+    this.#reconcile.observe(this.element);
     this.#observer.observe(this.element, {
       attributes: true,
       attributeFilter: OBSERVED_ATTRIBUTES,
@@ -215,54 +311,46 @@ var ConditionalFieldsController = class extends Controller {
     this.#observing = true;
     this.#listeners.add(this.element, "change", this.#onTriggerInput);
     this.#listeners.add(this.element, "input", this.#onTriggerInput);
-    this.#listeners.add(this.element, "turbo:morph-element", this.#onMorph);
-    document.addEventListener("reset", this.#onReset, true);
+    this.#formReset.observe();
   }
-  /** Releases all external resources and returns the temporary focus landmark loan. */
   disconnect() {
-    this.#reconcile.cancel();
+    this.#reconcile.disconnect();
     this.#observing = false;
     this.#observer.disconnect();
     this.#listeners.dispose();
-    document.removeEventListener("reset", this.#onReset, true);
+    this.#formReset.disconnect();
     this.#rootTabindex.returnAll();
   }
-  /** Reconciles after a trigger target is inserted or restored. */
   triggerTargetConnected() {
     this.#reconcile.schedule();
   }
-  /** Reconciles after a trigger target is removed or replaced. */
   triggerTargetDisconnected() {
     this.#reconcile.schedule();
   }
-  /** Initializes a region target inserted or restored at runtime. */
   regionTargetConnected() {
     this.#reconcile.schedule();
   }
-  /** Reconciles the remaining region set after a target leaves. */
-  regionTargetDisconnected() {
+  regionTargetDisconnected(region) {
+    this.#departed.add(region);
     this.#reconcile.schedule();
   }
-  /** Reconciles when application code or a morph changes the match policy. */
   matchValueChanged() {
     this.#reconcile.schedule();
   }
-  /** Reconciles control ownership when hidden controls become enabled or excluded. */
   disableHiddenValueChanged() {
     this.#reconcile.schedule();
   }
-  /** Re-evaluates every region and repairs all reflected DOM state. */
   evaluate() {
     this.#commitChange();
   }
-  /**
-   * Computes one settled plan, shows destinations before hiding sources, and then
-   * returns logical transitions in DOM order after every region is internally coherent.
-   */
   #settle(triggers = this.triggerTargets) {
     const regions = this.regionTargets;
     const plan = /* @__PURE__ */ new Map();
     for (const region of regions) plan.set(region, this.#isVisible(region, triggers));
+    for (const departed of this.#departed) {
+      if (!plan.has(departed)) this.#release(departed, plan);
+    }
+    this.#departed.clear();
     const changed = /* @__PURE__ */ new Set();
     const applicationOrder = [
       ...regions.filter((region) => plan.get(region) === true),
@@ -276,19 +364,16 @@ var ConditionalFieldsController = class extends Controller {
     }
     return regions.filter((region) => changed.has(region)).map((region) => ({ region, visible: plan.get(region) === true }));
   }
-  /** Reports logical transitions caused by user input or the public action. */
   #commitChange(triggers = this.triggerTargets) {
     for (const detail of this.#settle(triggers)) {
       this.dispatch("change", { detail });
     }
   }
-  /** Reports logical transitions derived from DOM, lifecycle, reset, or Value state. */
   #reconcileDom() {
     for (const detail of this.#settle()) {
       this.dispatch("reconcile", { detail });
     }
   }
-  /** Applies one planned state while keeping event history separate from DOM repair. */
   #applyRegion(region, visible, plan) {
     const previous = this.#lastVisible.get(region) ?? !region.hidden;
     const changed = visible !== previous;
@@ -298,17 +383,16 @@ var ConditionalFieldsController = class extends Controller {
     this.#syncRegionControls(region, visible);
     return changed;
   }
-  /** Reflects visibility idempotently, recording writes so the observer ignores its own work. */
   #syncRegionState(region, visible) {
+    if (!visible && this.#predicateFor(region) !== null) this.#concealed.add(region);
+    else this.#concealed.delete(region);
     this.#writeAttribute(region, "hidden", visible ? null : "");
     this.#writeAttribute(region, "aria-hidden", visible ? null : "true");
     this.#writeAttribute(region, "data-visible", visible ? "true" : null);
   }
-  /** Enables/disables descendant controls, touching only state carrying our marker. */
   #syncRegionControls(region, visible) {
     const shouldDisable = !visible && this.disableHiddenValue;
-    const controls = region.querySelectorAll("input, textarea, select, button");
-    for (const control of controls) {
+    for (const control of region.querySelectorAll(CONTROLS)) {
       const marked = control.hasAttribute(DISABLED_MARKER);
       if (shouldDisable) {
         if (!control.disabled) {
@@ -318,18 +402,30 @@ var ConditionalFieldsController = class extends Controller {
           this.#writeAttribute(control, DISABLED_MARKER, "true");
         }
       } else if (marked) {
-        this.#writeAttribute(control, "disabled", null);
-        this.#writeAttribute(control, DISABLED_MARKER, null);
+        this.#enable(control);
+      }
+    }
+  }
+  #enable(control) {
+    this.#writeAttribute(control, "disabled", null);
+    this.#writeAttribute(control, DISABLED_MARKER, null);
+  }
+  #release(element, plan) {
+    this.#lastVisible.delete(element);
+    if (this.#concealed.delete(element)) this.#writeAttribute(element, "hidden", null);
+    this.#writeAttribute(element, "aria-hidden", null);
+    this.#writeAttribute(element, "data-visible", null);
+    for (const control of element.querySelectorAll(CONTROLS)) {
+      if (control.hasAttribute(DISABLED_MARKER) && this.#survivesPlan(control, plan)) {
+        this.#enable(control);
       }
     }
   }
-  /** Whether a region's declared condition holds across `triggers` per `match`. */
   #isVisible(region, triggers) {
     const predicate = this.#predicateFor(region);
     if (predicate === null) return !region.hidden;
     return triggers.length > 0 && (this.matchValue === "all" ? triggers.every(predicate) : triggers.some(predicate));
   }
-  /** Builds the deterministic per-trigger predicate from the region's condition. */
   #predicateFor(region) {
     if (region.hasAttribute("data-when-checked")) {
       return (trigger) => this.#isChecked(trigger);
@@ -346,19 +442,16 @@ var ConditionalFieldsController = class extends Controller {
   #isChecked(trigger) {
     return trigger instanceof HTMLInputElement && trigger.checked;
   }
-  /** A trigger has a value when a radio/checkbox is selected, or its control value matches. */
   #matchesValue(trigger, wanted) {
     if (trigger instanceof HTMLInputElement && (trigger.type === "checkbox" || trigger.type === "radio")) {
       return trigger.checked && trigger.value === wanted;
     }
     return trigger.value === wanted;
   }
-  /** Moves focus to the first safe trigger, or to the controller landmark as a fallback. */
   #retreatFocus(region, plan) {
     const active = document.activeElement;
     if (active && region.contains(active)) this.#moveFocus(plan);
   }
-  /** Moves focus after the caller establishes that the active node is being hidden. */
   #moveFocus(plan) {
     const destination = this.triggerTargets.find(
       (trigger) => canTakeFocus(trigger) && this.#survivesPlan(trigger, plan)
@@ -371,11 +464,9 @@ var ConditionalFieldsController = class extends Controller {
     this.#rootTabindex.lend(this.element);
     this.element.focus();
   }
-  /** Whether a focus candidate sits outside every region this pass will hide. */
   #survivesPlan(candidate, plan) {
     return [...plan].every(([region, visible]) => visible || !region.contains(candidate));
   }
-  /** Records one idempotent attribute write before MutationObserver sees it. */
   #writeAttribute(element, name, value) {
     if (element.getAttribute(name) !== value) {
       if (this.#observing) {
@@ -390,7 +481,6 @@ var ConditionalFieldsController = class extends Controller {
       else element.setAttribute(name, value);
     }
   }
-  /** Separates authored records from controller writes and queues one relevant repair. */
   #onMutations(records) {
     const triggers = this.triggerTargets;
     const regions = this.regionTargets;
@@ -420,16 +510,13 @@ var ConditionalFieldsController = class extends Controller {
     }
     if (needsReconcile) this.#reconcile.schedule();
   }
-  /** Whether an authored mutation target belongs to a trigger, region, or managed control. */
   #elementAffectsState(target, triggers, regions) {
     return ownerIndex(triggers, target) !== -1 || ownerIndex(regions, target) !== -1;
   }
-  /** Whether a form owns at least one current trigger, including `form=` associations. */
   #hasTriggerOwnedBy(form) {
     return this.triggerTargets.some((trigger) => trigger.form === form);
   }
 };
 
 export { ConditionalFieldsController };
-//# sourceMappingURL=conditional_fields_controller.js.map
 //# sourceMappingURL=conditional_fields_controller.js.map