stimeo-ui 0.9.0 → 0.11.0

data/dist/controllers/password_strength_controller.js

@@ -2,6 +2,92 @@ import { Controller } from '@hotwired/stimulus';
 
 // src/controllers/password_strength_controller.ts
 
+// src/utils/announce.ts
+function announce(message, options = {}) {
+  const text = message.trim();
+  if (text.length === 0) return;
+  window.dispatchEvent(
+    new CustomEvent("stimeo--announcer:announce", {
+      detail: { message: text, assertive: options.assertive === true }
+    })
+  );
+}
+function fillTemplate(template, values) {
+  return template.replace(/\{([a-zA-Z][a-zA-Z0-9]*)\}/g, (match, name) => {
+    const replacement = values[name];
+    return replacement === void 0 ? match : String(replacement);
+  });
+}
+
+// src/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;
+  }
+  /** 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);
+    }
+  }
+  /** 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);
+  }
+};
+
+// src/utils/coerce.ts
+function toFiniteNumber(raw) {
+  if (raw === null || raw === void 0 || raw === "") return null;
+  const value = typeof raw === "number" ? raw : Number(raw);
+  return Number.isFinite(value) ? value : null;
+}
+
+// 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;
+    const generation = this.#generation;
+    queueMicrotask(() => {
+      if (generation !== this.#generation || !this.#queued || !this.#active) return;
+      this.#queued = false;
+      this.#run();
+    });
+  }
+};
+
 // src/utils/safe_timeout.ts
 var TimerRegistry = class {
   /** Live timer ids that have not yet been cleared (or, for timeouts, fired). */
@@ -75,6 +161,7 @@ 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"];
+var MIN_LEVELS = 2;
 var PasswordStrengthController = class _PasswordStrengthController extends Controller {
   static targets = ["input", "meter", "label"];
   static values = {
@@ -82,50 +169,143 @@ var PasswordStrengthController = class _PasswordStrengthController extends Contr
     // 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: "" }
+    levels: { type: String, default: "" },
+    announceText: { type: String, default: "" }
   };
-  static actions = ["evaluate"];
-  static events = ["change"];
-  /** Delay (ms) before the polite live-region label is written, to throttle SR flooding. */
+  static actions = ["evaluate", "setScore"];
+  static events = ["change", "reconcile"];
+  /** Delay (ms) before one settled level is sent to the shared announcer. */
   static #announceDelay = 200;
   #timers = new SafeTimeout();
+  #beforeCache = new BeforeCacheReset(() => this.#rewindForCache());
+  #repaint = new MicrotaskCoalescer(() => this.#reconcile());
+  #levels = [...DEFAULT_LEVELS];
   #announceId = null;
+  #announcedLevel = null;
+  #externalScore = null;
+  #lastDetail = null;
+  /** Reflects the current DOM state and opens the reconciliation window. */
   connect() {
-    this.#update({ announce: false });
+    this.#repaint.activate();
+    this.#beforeCache.activate();
+    this.#lastDetail = this.#detail(this.#render());
   }
+  /** Releases the reconciliation window, the cache subscription and the debounce. */
   disconnect() {
-    this.#timers.clearAll();
-    this.#announceId = null;
+    this.#repaint.cancel();
+    this.#beforeCache.deactivate();
+    this.#cancelAnnouncement();
+    this.#announcedLevel = null;
+    this.#externalScore = null;
+    this.#lastDetail = null;
   }
   /** Re-evaluates strength from the input. Bound via `data-action` (`input`). */
   evaluate() {
-    this.#update();
+    this.#externalScore = null;
+    this.#commit();
   }
   /**
-   * Recomputes the strength. The meter ARIA, data hooks, the custom property and
-   * the `change` event apply immediately; the live-region label text is debounced
-   * unless `announce` is `false` (the initial render).
+   * Adopts a score computed outside the built-in heuristic, clamped into the
+   * declared scale. An unreadable value leaves the current score standing, and
+   * the next `evaluate` hands scoring back to the heuristic.
    */
-  #update(options = {}) {
-    const password = this.hasInputTarget ? this.inputTarget.value : "";
-    const labels = parseStringList(this.levelsValue, DEFAULT_LEVELS);
-    const max = labels.length;
-    const score = this.#score(password, max);
-    const label = score > 0 ? labels[score - 1] ?? "" : "";
+  setScore(event) {
+    const next = toFiniteNumber(event.params?.score ?? event.detail?.score);
+    if (next === null) return;
+    this.#externalScore = next;
+    this.#commit();
+  }
+  /** Re-reads the scale when application code or a Turbo morph changes `levels`. */
+  levelsValueChanged() {
+    this.#levels = this.#readLevels();
+    this.#repaint.schedule();
+  }
+  /** Repaints when application code or a Turbo morph changes `minScore`. */
+  minScoreValueChanged() {
+    this.#repaint.schedule();
+  }
+  /** Repaints when application code or a Turbo morph changes `announceText`. */
+  announceTextValueChanged() {
+    this.#repaint.schedule();
+  }
+  /** Scores the field added or replaced at runtime. */
+  inputTargetConnected() {
+    this.#repaint.schedule();
+  }
+  /** Falls back to the pristine state after the scored field is removed. */
+  inputTargetDisconnected() {
+    this.#repaint.schedule();
+  }
+  /** Syncs a meter added or replaced at runtime, which carries no value yet. */
+  meterTargetConnected() {
+    this.#repaint.schedule();
+  }
+  /** Repaints the remaining output after a meter is removed. */
+  meterTargetDisconnected() {
+    this.#repaint.schedule();
+  }
+  /** Fills a readout added or replaced at runtime. */
+  labelTargetConnected() {
+    this.#repaint.schedule();
+  }
+  /** Repaints the remaining output after a readout is removed. */
+  labelTargetDisconnected() {
+    this.#repaint.schedule();
+  }
+  /** Reflects one confirmed scoring pass and offers its level to the reader. */
+  #commit() {
+    const reading = this.#render();
+    this.#lastDetail = this.#detail(reading);
+    this.dispatch("change", { detail: this.#lastDetail });
+    this.#scheduleAnnouncement(reading);
+  }
+  /** Repaints one mutation batch and reports a changed controller-derived state. */
+  #reconcile() {
+    const previous = this.#lastDetail;
+    const owed = this.#announceId !== null;
+    this.#cancelAnnouncement();
+    const reading = this.#render();
+    const detail = this.#detail(reading);
+    this.#lastDetail = detail;
+    if (reading.score === 0) this.#announcedLevel = null;
+    if (owed) this.#scheduleAnnouncement(reading);
+    if (previous && this.#detailsDiffer(previous, detail)) {
+      this.dispatch("reconcile", { detail });
+    }
+  }
+  /**
+   * Synchronizes the meter ARIA, the root state hooks, the fill custom property
+   * and the visible level readout.
+   *
+   * @stimeoRenderRoot
+   */
+  #render() {
+    const max = this.#levels.length;
+    const score = this.#currentScore(max);
+    const level = this.#levels[score - 1] ?? "";
+    const meetsMin = score > 0 && score >= this.#minScore;
+    const band = this.#band(score, max);
     this.#reflectMeter(score, max);
-    this.#reflectRoot(score, max);
-    if (options.announce === false) {
-      this.#writeLabel(label);
-      return;
+    this.#reflectRoot(score, max, band, meetsMin);
+    this.#writeLabel(level);
+    return { score, level, max, meetsMin, band };
+  }
+  /**
+   * The declared minimum, or the Value's default (`0`, an inert gate) when the
+   * declaration cannot be read as a number. Every comparison against an unread
+   * number answers false, which would fail even the strongest password instead
+   * of leaving the gate off, so the unreadable declaration is confined to its
+   * own Value the way an unreadable scale is.
+   */
+  get #minScore() {
+    return Number.isFinite(this.minScoreValue) ? this.minScoreValue : 0;
+  }
+  /** The externally supplied score when one stands, else the heuristic's. */
+  #currentScore(max) {
+    if (this.#externalScore !== null) {
+      return Math.min(max, Math.max(0, Math.round(this.#externalScore)));
     }
-    this.dispatch("change", {
-      detail: { score, level: label, max, meetsMin: score > 0 && score >= this.minScoreValue }
-    });
-    if (this.#announceId !== null) this.#timers.clear(this.#announceId);
-    this.#announceId = this.#timers.set(() => {
-      this.#writeLabel(label);
-      this.#announceId = null;
-    }, _PasswordStrengthController.#announceDelay);
+    return this.#score(this.hasInputTarget ? this.inputTarget.value : "", max);
   }
   /** Syncs the meter target's ARIA value attributes (`0..levels.length`). */
   #reflectMeter(score, max) {
@@ -139,25 +319,27 @@ var PasswordStrengthController = class _PasswordStrengthController extends Contr
    * empty), the `data-below-min` hook when the score is under `minScore`, and the
    * `0–1` fill the consumer's CSS turns into the bar width.
    */
-  #reflectRoot(score, max) {
-    const band = this.#band(score, max);
+  #reflectRoot(score, max, band, meetsMin) {
     this.#toggle("data-strength", band, band.length > 0);
-    this.#toggle("data-below-min", "true", score > 0 && score < this.minScoreValue);
-    const ratio = max > 0 ? score / max : 0;
-    this.element.style.setProperty("--stimeo--password-strength", String(ratio));
+    this.#toggle("data-below-min", "true", score > 0 && !meetsMin);
+    this.element.style.setProperty("--stimeo--password-strength", String(score / max));
   }
-  #writeLabel(label) {
-    if (this.hasLabelTarget) this.labelTarget.textContent = label;
+  /** Writes the visible readout only when its text actually changed. */
+  #writeLabel(text) {
+    if (!this.hasLabelTarget || this.labelTarget.textContent === text) return;
+    this.labelTarget.textContent = text;
   }
   /**
    * Locale-independent styling band (one of {@link STRENGTH_BANDS}) for `score`
-   * out of `max`. Empty input → `""`. Quantizes the `score/max` ratio into the
-   * four fixed bands, so a non-default level count still maps onto a stable hook.
+   * out of `max`. Empty input → `""`. Maps the position within the declared scale
+   * onto the position within the fixed bands, so both ends stay anchored on any
+   * level count: the weakest score is always `weak` and the strongest `strong`,
+   * and only the middle collapses when the scales differ in size.
    */
   #band(score, max) {
-    if (score <= 0 || max <= 0) return "";
-    const index = Math.ceil(score / max * STRENGTH_BANDS.length) - 1;
-    return STRENGTH_BANDS[Math.min(STRENGTH_BANDS.length - 1, Math.max(0, index))] ?? "";
+    if (score <= 0) return "";
+    const index = Math.round((score - 1) / (max - 1) * (STRENGTH_BANDS.length - 1));
+    return STRENGTH_BANDS[index] ?? STRENGTH_BANDS[0];
   }
   /** Sets `name` to `value` when `on`, else removes it (value/presence data hook). */
   #toggle(name, value, on) {
@@ -167,6 +349,11 @@ var PasswordStrengthController = class _PasswordStrengthController extends Contr
       this.element.removeAttribute(name);
     }
   }
+  /** The declared level labels, or the defaults when the scale cannot order. */
+  #readLevels() {
+    const declared = parseStringList(this.levelsValue, DEFAULT_LEVELS);
+    return declared.length >= MIN_LEVELS ? declared : [...DEFAULT_LEVELS];
+  }
   /**
    * Lightweight zero-dependency strength heuristic returning an integer in
    * `[0, max]` (`max` = number of levels). Empty input is `0` (no level); any
@@ -176,7 +363,7 @@ var PasswordStrengthController = class _PasswordStrengthController extends Contr
    * alone cannot mask trivial repetition.
    */
   #score(password, max) {
-    if (password.length === 0 || max === 0) return 0;
+    if (password.length === 0) return 0;
     let points = 0;
     for (const milestone of LENGTH_MILESTONES) {
       if (password.length >= milestone) points += 1;
@@ -186,6 +373,64 @@ var PasswordStrengthController = class _PasswordStrengthController extends Contr
     const bucketed = Math.round(points / MAX_POINTS * max);
     return Math.min(max, Math.max(1, bucketed));
   }
+  /** Debounces one i18n-neutral message for a level transition into the announcer. */
+  #scheduleAnnouncement(reading) {
+    this.#cancelAnnouncement();
+    if (reading.score === 0) {
+      this.#announcedLevel = null;
+      return;
+    }
+    if (reading.level === this.#announcedLevel) return;
+    const message = fillTemplate(this.announceTextValue, {
+      level: reading.level,
+      score: reading.score,
+      max: reading.max,
+      band: reading.band
+    });
+    if (message.trim().length === 0) return;
+    this.#announceId = this.#timers.set(() => {
+      this.#announcedLevel = reading.level;
+      announce(message);
+      this.#announceId = null;
+    }, _PasswordStrengthController.#announceDelay);
+  }
+  /** Cancels the one outstanding message without touching visible output. */
+  #cancelAnnouncement() {
+    if (this.#announceId !== null) this.#timers.clear(this.#announceId);
+    this.#announceId = null;
+  }
+  /**
+   * Returns every output derived from the field value to its pristine form.
+   *
+   * The value itself is not carried in a Turbo snapshot, so a band, a fill or a
+   * readout left behind would describe a password the restored page no longer
+   * holds. The pass is silent: `connect()` derives the state again from whatever
+   * the restored field contains.
+   */
+  #rewindForCache() {
+    this.#cancelAnnouncement();
+    this.#announcedLevel = null;
+    this.#externalScore = null;
+    this.#lastDetail = null;
+    this.#reflectMeter(0, this.#levels.length);
+    this.#toggle("data-strength", "", false);
+    this.#toggle("data-below-min", "true", false);
+    this.element.style.removeProperty("--stimeo--password-strength");
+    this.#writeLabel("");
+  }
+  /** Selects the public event state from the richer internal reading. */
+  #detail(reading) {
+    return {
+      score: reading.score,
+      level: reading.level,
+      max: reading.max,
+      meetsMin: reading.meetsMin
+    };
+  }
+  /** Compares exactly the state carried by `change` and `reconcile`. */
+  #detailsDiffer(left, right) {
+    return left.score !== right.score || left.level !== right.level || left.max !== right.max || left.meetsMin !== right.meetsMin;
+  }
 };
 
 export { PasswordStrengthController };

data/dist/controllers/pointer_drag_controller.js

@@ -64,6 +64,7 @@ var DetachGate = class _DetachGate {
 };
 
 // src/controllers/pointer_drag_controller.ts
+var NATIVE_KEY_OWNERS = "input, textarea, select, button, a[href], summary, [contenteditable]";
 var PointerDragController = class _PointerDragController extends Controller {
   static targets = ["handle"];
   static values = {
@@ -73,6 +74,7 @@ var PointerDragController = class _PointerDragController extends Controller {
     disabled: { type: Boolean, default: false },
     follow: { type: Boolean, default: false }
   };
+  static actions = ["reset"];
   static events = ["start", "move", "end", "cancel"];
   /** Marker attribute recording that this controller set the touch-action. */
   static #TOUCH_ACTION_MARKER = "data-pointer-drag-touch-action";
@@ -106,23 +108,49 @@ var PointerDragController = class _PointerDragController extends Controller {
     }
     this.#teardown();
   }
-  /** Prepares handles added at runtime (touch-action + focusability). */
+  /**
+   * Returns the element to its origin: drops the committed follow offset and the
+   * inline `translate` that carries it.
+   *
+   * In follow mode the inline `translate` belongs to this controller, and the
+   * committed offset lives in a field the DOM cannot reach — so a consumer that
+   * wants the element back at the start, or that has written a position of its
+   * own, needs this to make the two agree again. An in-flight drag is cancelled
+   * first, or its deltas would land on top of the offset just cleared.
+   */
+  reset() {
+    const live = this.#pointer?.started ? this.#pointer.pointerType : this.#keyboard ? "keyboard" : null;
+    if (this.#pointer || this.#keyboard) this.#teardownSessions();
+    if (live) this.#dispatchCancel(live);
+    this.#followBase = { x: 0, y: 0 };
+    this.#applyFollow(0, 0);
+  }
   handleTargetConnected(handle) {
+    if (handle !== this.element) this.#restoreHandle(this.element);
     this.#prepareHandle(handle);
   }
   handleTargetDisconnected(handle) {
-    if (!this.element.contains(handle)) {
-      if (this.#pointer?.handle === handle) this.#endPointerSession();
-      if (this.#keyboard?.handle === handle) this.#clearKeyboardSession();
-    }
     this.#restoreHandle(handle);
+    if (this.element.contains(handle)) return;
+    const interrupted = this.#pointer?.handle === handle && this.#pointer.started ? this.#pointer.pointerType : this.#keyboard?.handle === handle ? "keyboard" : null;
+    if (this.#pointer?.handle === handle) this.#endPointerSession();
+    if (this.#keyboard?.handle === handle) this.#clearKeyboardSession();
+    if (!this.hasHandleTarget) this.#prepareHandle(this.element);
+    if (interrupted) this.#dispatchCancel(interrupted);
   }
-  /** Re-derives the handles' touch-action when the axis changes. */
-  axisValueChanged() {
+  /**
+   * Re-derives the handles' touch-action when the axis changes.
+   *
+   * Two layers, like the `tabindex` loan: the marker says the value was once
+   * ours, and the current inline value says it still is. A consumer that wrote
+   * its own `touch-action` after connect keeps it.
+   */
+  axisValueChanged(_value, previousValue) {
+    const lent = this.#touchActionFor(previousValue ?? this.axisValue);
     for (const handle of this.#handles()) {
-      if (handle.hasAttribute(_PointerDragController.#TOUCH_ACTION_MARKER)) {
-        handle.style.touchAction = this.#touchActionForAxis();
-      }
+      if (!handle.hasAttribute(_PointerDragController.#TOUCH_ACTION_MARKER)) continue;
+      if (handle.style.touchAction !== lent) continue;
+      handle.style.touchAction = this.#touchActionForAxis();
     }
   }
   /** Cancels any in-flight session when the controller is disabled mid-drag. */
@@ -203,9 +231,10 @@ var PointerDragController = class _PointerDragController extends Controller {
     const handle = this.#handleFor(event.target);
     if (!handle) return;
     if (event.defaultPrevented) return;
+    if (event.isComposing) return;
+    if (this.#ownsNativeKeys(event.target, handle)) return;
     if (isReservedArrowChord(event)) return;
     if (event.key === "Escape") {
-      if (event.isComposing) return;
       if (this.#pointer?.started) {
         const { pointerType } = this.#pointer;
         this.#teardownSessions();
@@ -314,6 +343,7 @@ var PointerDragController = class _PointerDragController extends Controller {
     const interrupted = this.#pointer?.started ? this.#pointer.pointerType : this.#keyboard ? "keyboard" : null;
     this.#teardownSessions();
     for (const handle of this.#handles()) this.#restoreHandle(handle);
+    this.#followReset();
     if (interrupted && this.element.isConnected) this.#dispatchCancel(interrupted);
   }
   /**
@@ -383,8 +413,12 @@ var PointerDragController = class _PointerDragController extends Controller {
   }
   /** `touch-action` that lets the page keep panning on the locked axis only. */
   #touchActionForAxis() {
-    if (this.axisValue === "x") return "pan-y";
-    if (this.axisValue === "y") return "pan-x";
+    return this.#touchActionFor(this.axisValue);
+  }
+  /** The `touch-action` an `axis` declaration lends, for any axis value. */
+  #touchActionFor(axis) {
+    if (axis === "x") return "pan-y";
+    if (axis === "y") return "pan-x";
     return "none";
   }
   /**
@@ -395,8 +429,10 @@ var PointerDragController = class _PointerDragController extends Controller {
    * are marker-owned so `#restoreHandle` reverts them symmetrically on teardown.
    */
   #prepareHandle(handle) {
-    if (handle.style.touchAction === "" || handle.hasAttribute(_PointerDragController.#TOUCH_ACTION_MARKER)) {
-      handle.style.touchAction = this.#touchActionForAxis();
+    const lent = this.#touchActionForAxis();
+    const marked = handle.hasAttribute(_PointerDragController.#TOUCH_ACTION_MARKER);
+    if (handle.style.touchAction === "" || marked && handle.style.touchAction === lent) {
+      handle.style.touchAction = lent;
       handle.setAttribute(_PointerDragController.#TOUCH_ACTION_MARKER, "true");
     }
     if (handle.tabIndex < 0 && !handle.hasAttribute("tabindex")) {
@@ -404,17 +440,27 @@ var PointerDragController = class _PointerDragController extends Controller {
       handle.setAttribute(_PointerDragController.#TABINDEX_MARKER, "true");
     }
   }
+  /** Whether the key belongs to a native control or editing surface in the handle. */
+  #ownsNativeKeys(target, handle) {
+    const owner = target?.closest(NATIVE_KEY_OWNERS) ?? null;
+    return owner !== null && owner !== handle && handle.contains(owner);
+  }
   /** Reverts the marker-owned touch-action + tabindex (authored values untouched). */
   #restoreHandle(handle) {
     if (handle.hasAttribute(_PointerDragController.#TOUCH_ACTION_MARKER)) {
-      handle.style.touchAction = "";
+      if (handle.style.touchAction === this.#touchActionForAxis()) {
+        handle.style.touchAction = "";
+      }
       handle.removeAttribute(_PointerDragController.#TOUCH_ACTION_MARKER);
     }
     if (handle.hasAttribute(_PointerDragController.#TABINDEX_MARKER)) {
-      handle.removeAttribute(_PointerDragController.#TABINDEX_MARKER);
-      if (handle.getAttribute("tabindex") === "0" && document.activeElement !== handle) {
+      const ours = handle.getAttribute("tabindex") === "0";
+      if (ours && document.activeElement !== handle) {
         handle.removeAttribute("tabindex");
+        handle.removeAttribute(_PointerDragController.#TABINDEX_MARKER);
+        return;
       }
+      if (!ours) handle.removeAttribute(_PointerDragController.#TABINDEX_MARKER);
     }
   }
 };

data/dist/controllers/portal_controller.js

@@ -69,15 +69,42 @@ var PortalController = class extends Controller {
   static events = ["mount", "unmount"];
   /** Decides whether a `disconnect()` is an in-page move or a real detach. */
   #gate = new DetachGate();
+  /** The `to` declaration after validation; the default when it cannot be parsed. */
+  #toSelector = "body";
+  /**
+   * Validates the destination declaration once, keeping only a selector the engine can
+   * read.
+   *
+   * A selector reads back as an ordinary string, so a malformed one survives until it is
+   * handed to the DOM — where it would take the whole teleport down and leave the part
+   * silently doing nothing. Falling back to the default puts the node somewhere visible
+   * instead, which reads as a mistake and can be traced back to the declaration.
+   */
+  toValueChanged() {
+    const selector = this.toValue;
+    if (selector.length > 0) {
+      try {
+        this.element.matches(selector);
+        this.#toSelector = selector;
+        return;
+      } catch {
+      }
+    }
+    this.#toSelector = "body";
+  }
   connect() {
     this.#gate.cancel();
-    if (portalState.has(this.element)) return;
+    const existing = portalState.get(this.element);
+    if (existing) {
+      existing.owner = this;
+      return;
+    }
     const node = this.hasContentTarget ? this.contentTarget : this.element;
     const destination = this.#destination();
     if (!destination || destination === node || node.contains(destination)) return;
     const placeholder = document.createComment("stimeo--portal");
     node.parentNode?.insertBefore(placeholder, node);
-    portalState.set(this.element, { node, placeholder });
+    portalState.set(this.element, { node, placeholder, owner: this });
     if (this.positionValue === "prepend") {
       destination.prepend(node);
     } else {
@@ -96,7 +123,7 @@ var PortalController = class extends Controller {
     }
     this.#gate.disconnected(this, () => {
       const current = portalState.get(this.element);
-      if (current) this.#restore(current);
+      if (current?.owner === this) this.#restore(current);
     });
   }
   /** Returns the node to its placeholder (or removes it) and clears the bookkeeping. */
@@ -112,15 +139,9 @@ var PortalController = class extends Controller {
     placeholder.remove();
     this.dispatch("unmount", { detail: {} });
   }
-  /** Resolves the destination for `to`, tolerating an invalid selector. */
+  /** Resolves the destination from the validated `to` selector. */
   #destination() {
-    const selector = this.toValue.trim();
-    if (!selector) return null;
-    try {
-      return document.querySelector(selector);
-    } catch {
-      return null;
-    }
+    return document.querySelector(this.#toSelector);
   }
 };