stimeo-ui 0.10.0 → 0.12.0

data/dist/controllers/count_up_controller.js

@@ -2,29 +2,58 @@ import { Controller } from '@hotwired/stimulus';
 
 // src/controllers/count_up_controller.ts
 
+// src/utils/authored_integer.ts
+var TOKEN_BODY = /\d[\d.,'’’    _]*\d|\d/;
+var SIGN_OPENER = /[\s([]/;
+function authoredInteger(text) {
+  const firstDigit = /\d/.exec(text);
+  if (firstDigit === null) return null;
+  const at = firstDigit.index;
+  const signed = at > 0 && text[at - 1] === "-" && (at === 1 || SIGN_OPENER.test(text[at - 2]));
+  const body = TOKEN_BODY.exec(text.slice(at));
+  const runs = body[0].split(/\D+/);
+  const separators = body[0].match(/\D+/g) ?? [];
+  const lead = runs[0];
+  const heads = lead.length <= 3 && !lead.startsWith("0");
+  let digits = lead;
+  for (let i = 1; heads && i < runs.length; i += 1) {
+    if (separators[i - 1]?.length !== 1 || runs[i]?.length !== 3) break;
+    digits += runs[i];
+  }
+  const magnitude = Number.parseInt(digits, 10);
+  return signed ? -magnitude || 0 : magnitude;
+}
+
 // src/utils/reduced_motion.ts
 function prefersReducedMotion() {
   return typeof window.matchMedia === "function" && window.matchMedia("(prefers-reduced-motion: reduce)").matches;
 }
 
 // src/controllers/count_up_controller.ts
+var DEFAULT_DURATION = 1200;
 var CountUpController = class extends Controller {
   static values = {
-    duration: { type: Number, default: 1200 },
+    duration: { type: Number, default: DEFAULT_DURATION },
     from: { type: Number, default: 0 },
     once: { type: Boolean, default: true }
   };
   static actions = ["start"];
   static events = ["end"];
   #frame = null;
-  /** The authored final text, restored verbatim when the run settles. */
-  #finalText = "";
+  /** The animation length, with a declaration outside its domain read as the default. */
+  get #duration() {
+    return Number.isFinite(this.durationValue) && this.durationValue > 0 ? this.durationValue : DEFAULT_DURATION;
+  }
+  /** The starting value, with a declaration that is not a finite number read as zero. */
+  get #from() {
+    return Number.isFinite(this.fromValue) ? this.fromValue : 0;
+  }
   connect() {
-    if (this.element.hasAttribute("data-count-up-label")) {
-      this.element.textContent = this.element.getAttribute("aria-label") ?? this.element.textContent;
-      this.#restoreLabel();
-      this.element.setAttribute("data-count-up-done", "true");
-    }
+    const ticker = this.#ownedTicker();
+    if (ticker === null) return;
+    const authored = ticker.getAttribute("aria-label");
+    this.#unwrap(ticker, authored);
+    if (authored !== null) this.element.setAttribute("data-count-up-done", "true");
   }
   disconnect() {
     if (this.#frame !== null) this.#settle();
@@ -36,27 +65,22 @@ var CountUpController = class extends Controller {
   start() {
     if (this.#frame !== null) return;
     if (this.onceValue && this.element.hasAttribute("data-count-up-done")) return;
-    this.#finalText = this.element.textContent ?? "";
-    const target = Number.parseInt(this.#finalText.replace(/[^0-9-]/g, ""), 10);
-    if (Number.isNaN(target)) return;
+    const node = this.#numericNode();
+    if (node === null) return;
+    const authored = node.data;
+    const target = authoredInteger(authored);
     if (prefersReducedMotion()) {
       this.element.setAttribute("data-count-up-done", "true");
       this.dispatch("end", { detail: { value: target } });
       return;
     }
-    const authored = this.element.getAttribute("aria-label");
-    if (authored !== null) {
-      this.element.setAttribute("data-count-up-original-label", authored);
-    }
-    this.element.setAttribute("data-count-up-label", "true");
-    this.element.setAttribute("aria-label", this.#finalText);
+    const ticker = this.#wrap(node, authored);
+    const from = this.#from;
     const started = performance.now();
     const step = (now) => {
-      const t = Math.min((now - started) / this.durationValue, 1);
+      const t = Math.min((now - started) / this.#duration, 1);
       const eased = 1 - (1 - t) ** 3;
-      this.element.textContent = String(
-        Math.round(this.fromValue + (target - this.fromValue) * eased)
-      );
+      ticker.textContent = String(Math.round(from + (target - from) * eased));
       if (t < 1) {
         this.#frame = requestAnimationFrame(step);
       } else {
@@ -66,26 +90,41 @@ var CountUpController = class extends Controller {
     };
     this.#frame = requestAnimationFrame(step);
   }
+  /** The first text node that displays a number, or null when the host has none. */
+  #numericNode() {
+    const walker = document.createTreeWalker(this.element, NodeFilter.SHOW_TEXT);
+    let node = walker.nextNode();
+    while (node !== null && authoredInteger(node.data) === null) {
+      node = walker.nextNode();
+    }
+    return node;
+  }
+  /** The wrapper this controller published, if one outlived its run. */
+  #ownedTicker() {
+    return this.element.querySelector("[data-count-up-label]");
+  }
+  /** Publishes the ticking number inside a named wrapper, replacing `node`. */
+  #wrap(node, authored) {
+    const ticker = document.createElement("span");
+    ticker.setAttribute("data-count-up-label", "true");
+    ticker.setAttribute("role", "img");
+    ticker.setAttribute("aria-label", authored);
+    node.replaceWith(ticker);
+    ticker.append(node);
+    return ticker;
+  }
+  /** Puts `text` back where the wrapper stood, leaving the rest of the host alone. */
+  #unwrap(ticker, text) {
+    ticker.replaceWith(document.createTextNode(text ?? ticker.textContent ?? ""));
+  }
   /** Ends the run: cancels the frame and restores the authored presentation. */
   #settle() {
     if (this.#frame !== null) cancelAnimationFrame(this.#frame);
     this.#frame = null;
-    this.element.textContent = this.#finalText;
-    this.#restoreLabel();
+    const ticker = this.#ownedTicker();
+    if (ticker !== null) this.#unwrap(ticker, ticker.getAttribute("aria-label"));
     this.element.setAttribute("data-count-up-done", "true");
   }
-  /** Releases the marker-owned aria-label, restoring any parked authored value. */
-  #restoreLabel() {
-    if (!this.element.hasAttribute("data-count-up-label")) return;
-    const original = this.element.getAttribute("data-count-up-original-label");
-    if (original !== null) {
-      this.element.setAttribute("aria-label", original);
-      this.element.removeAttribute("data-count-up-original-label");
-    } else {
-      this.element.removeAttribute("aria-label");
-    }
-    this.element.removeAttribute("data-count-up-label");
-  }
 };
 
 export { CountUpController };

data/dist/controllers/intersection_controller.js

@@ -9,6 +9,14 @@ function isBeforeRootStart(entry) {
   const rootTop = entry.rootBounds?.top ?? 0;
   return rect.bottom <= rootTop;
 }
+function queryRoot(selector) {
+  if (!selector) return null;
+  try {
+    return document.querySelector(selector);
+  } catch {
+  }
+  return null;
+}
 var IntersectionWatcher = class {
   #onEntries;
   #observer = null;
@@ -30,7 +38,10 @@ var IntersectionWatcher = class {
    * the watcher inert — without `IntersectionObserver` support (very old
    * browsers; the caller's no-JS fallback stays in charge) or with no targets.
    * If initial construction with the configured options fails, the watcher
-   * warns and retries once with the same root and platform defaults.
+   * warns and retries once with the same root and platform defaults. A
+   * `rootSelector` that does not parse resolves to the viewport (see
+   * {@link IntersectionWatchOptions.rootSelector}), so a typo never fails the
+   * call.
    *
    * @throws The fallback constructor error if both construction attempts fail,
    *   or whatever the platform throws from `observe()`. The exception is passed
@@ -43,7 +54,7 @@ var IntersectionWatcher = class {
     if (typeof IntersectionObserver === "undefined") return false;
     const list = Array.isArray(targets) ? targets : [targets];
     if (list.length === 0) return false;
-    const root = "root" in options ? options.root ?? null : options.rootSelector ? document.querySelector(options.rootSelector) : null;
+    const root = "root" in options ? options.root ?? null : queryRoot(options.rootSelector);
     let observer = null;
     try {
       const onEntries = (entries) => {
@@ -136,6 +147,25 @@ var IntersectionController = class extends Controller {
   }
   connect() {
     if (this.onceValue && this.element.getAttribute("data-intersecting") === "true") return;
+    this.#observe();
+  }
+  disconnect() {
+    this.#watcher.stop();
+  }
+  /**
+   * Re-reads the visibility line and rebuilds the observer. Turbo 8 morphing
+   * rewrites the attribute in place without a reconnect, and the line is what
+   * the intersection callback compares every ratio against, so a value frozen at
+   * connect time would decide `data-intersecting` wrongly for the rest of the
+   * page's life. Nothing to rebuild before the first `connect()`; after a spent
+   * one-shot the watcher is deliberately stopped, and re-observing would deliver
+   * the current state and fire `enter` a second time.
+   */
+  thresholdValueChanged() {
+    if (this.#watcher.active) this.#observe();
+  }
+  /** (Re)installs the observer from the current Values. */
+  #observe() {
     this.#effectiveThreshold = this.#clampedThreshold();
     this.#watcher.start(this.element, {
       rootSelector: this.rootSelectorValue,
@@ -144,9 +174,6 @@ var IntersectionController = class extends Controller {
     });
     if (this.#watcher.usingPlatformDefaults) this.#effectiveThreshold = 0;
   }
-  disconnect() {
-    this.#watcher.stop();
-  }
   /**
    * Re-delivers the current intersection state as a fresh transition. Bound via
    * `data-action` (e.g. `my-feed:appended@window->stimeo--intersection#refresh`).
@@ -177,14 +204,29 @@ var IntersectionController = class extends Controller {
     const previous = this.element.getAttribute("data-intersecting");
     this.element.setAttribute("data-intersecting", intersecting ? "true" : "false");
     if (intersecting && previous !== "true") {
-      this.dispatch("enter", { detail: { ratio } });
       if (this.onceValue) this.#watcher.stop();
+      this.dispatch("enter", { detail: { ratio } });
     } else if (!intersecting && previous === "true") {
       this.dispatch("exit", {
-        detail: { ratio, position: isBeforeRootStart(entry) ? "before" : "after" }
+        detail: { ratio, position: this.#leftViaStartEdge(entry) ? "before" : "after" }
       });
     }
   }
+  /**
+   * Which edge the element left across, for the `exit` detail. A non-zero
+   * `threshold` withdraws visibility while the element still overlaps the root,
+   * so the leaving rect can straddle the start edge — the direction is the
+   * element's own top against that edge, not whether it has cleared the root
+   * entirely (that is what `passed` reports). An element with no layout box
+   * (`display: none`, a collapsed `<details>`) is reported with an empty rect
+   * that carries no position at all, so it is deliberately neither direction
+   * and takes the "still ahead" reading.
+   */
+  #leftViaStartEdge(entry) {
+    const rect = entry.boundingClientRect;
+    if (rect.width === 0 && rect.height === 0) return false;
+    return rect.top < (entry.rootBounds?.top ?? 0);
+  }
   /**
    * Reflects the "scrolled past" state onto `data-passed` and fires `passed` on
    * transitions — the line sticky headers and reading progress key off. Like
@@ -204,9 +246,14 @@ var IntersectionController = class extends Controller {
   /**
    * Observer thresholds: the `threshold` line itself, plus `ratioSteps` evenly
    * spaced steps when fine-grained `change` ratios are wanted (progress bars).
+   *
+   * 0 is always observed. An observer notifies only at the lines it was given,
+   * so a non-zero `threshold` on its own delivers its last callback while the
+   * element is still partly visible: the element leaving for good would never be
+   * reported, freezing the ratio and `data-passed` mid-departure.
    */
   #thresholds() {
-    const thresholds = /* @__PURE__ */ new Set([this.#clampedThreshold()]);
+    const thresholds = /* @__PURE__ */ new Set([0, this.#clampedThreshold()]);
     if (this.ratioStepsValue > 0) {
       for (let i = 0; i <= this.ratioStepsValue; i += 1) {
         thresholds.add(i / this.ratioStepsValue);

data/dist/controllers/lazy_frame_controller.js

@@ -3,6 +3,14 @@ import { Controller } from '@hotwired/stimulus';
 // src/controllers/lazy_frame_controller.ts
 
 // src/utils/intersection_watcher.ts
+function queryRoot(selector) {
+  if (!selector) return null;
+  try {
+    return document.querySelector(selector);
+  } catch {
+  }
+  return null;
+}
 var IntersectionWatcher = class {
   #onEntries;
   #observer = null;
@@ -24,7 +32,10 @@ var IntersectionWatcher = class {
    * the watcher inert — without `IntersectionObserver` support (very old
    * browsers; the caller's no-JS fallback stays in charge) or with no targets.
    * If initial construction with the configured options fails, the watcher
-   * warns and retries once with the same root and platform defaults.
+   * warns and retries once with the same root and platform defaults. A
+   * `rootSelector` that does not parse resolves to the viewport (see
+   * {@link IntersectionWatchOptions.rootSelector}), so a typo never fails the
+   * call.
    *
    * @throws The fallback constructor error if both construction attempts fail,
    *   or whatever the platform throws from `observe()`. The exception is passed
@@ -37,7 +48,7 @@ var IntersectionWatcher = class {
     if (typeof IntersectionObserver === "undefined") return false;
     const list = Array.isArray(targets) ? targets : [targets];
     if (list.length === 0) return false;
-    const root = "root" in options ? options.root ?? null : options.rootSelector ? document.querySelector(options.rootSelector) : null;
+    const root = "root" in options ? options.root ?? null : queryRoot(options.rootSelector);
     let observer = null;
     try {
       const onEntries = (entries) => {
@@ -106,47 +117,98 @@ var LazyFrameController = class extends Controller {
   static events = ["load"];
   /** Shared IO plumbing (support guard, active guard, teardown). */
   #watcher = new IntersectionWatcher((entries) => this.#onIntersect(entries));
+  #connected = false;
   #loaded = false;
-  /** Focus reaching the frame triggers the load before it intersects (keyboard / AT). */
-  #onFocus = () => this.#trigger();
+  /**
+   * Whether the observer last saw the frame inside the observed area — `null`
+   * until it has reported. A re-entry needs a frame that was seen inside and
+   * then left, so an unknown position is never a departure.
+   */
+  #inside = null;
+  /**
+   * Focus reaching the frame starts the FIRST load before it intersects (keyboard / AT).
+   * `#load` releases this listener, so focus never reaches an already-loaded frame.
+   */
+  #onFocus = () => this.#load();
+  /**
+   * Follows the held URL at runtime: one that arrives arms the frame, one that is
+   * taken away disarms it, so an empty `url` holds no triggers either way.
+   *
+   * Stimulus runs value callbacks before `connect()`, so the connected guard keeps
+   * arming in one place. A frame that already loaded keeps its held URL for the next
+   * re-entry instead of fetching on the spot.
+   */
+  urlValueChanged() {
+    if (!this.#connected || this.#loaded) return;
+    if (this.urlValue) this.#arm();
+    else this.#stopObserving();
+  }
+  /** Rebuilds the observer when the early-load margin changes at runtime. */
+  rootMarginValueChanged() {
+    if (this.#connected && this.#watcher.active) this.#observe();
+  }
   connect() {
-    if (this.element.hasAttribute("data-lazy-loaded")) {
-      this.#loaded = true;
-      return;
-    }
-    if (!this.urlValue) return;
-    this.element.addEventListener("focusin", this.#onFocus);
-    this.#watcher.start(this.element, { rootMargin: this.rootMarginValue });
+    this.#loaded = this.element.hasAttribute("data-lazy-loaded");
+    this.#inside = null;
+    this.#connected = true;
+    if (this.#loaded && this.onceValue) return;
+    this.#arm();
   }
   disconnect() {
+    this.#connected = false;
     this.#stopObserving();
   }
+  /** Attaches the triggers that still have a job to do. */
+  #arm() {
+    if (!this.urlValue) return;
+    if (!this.#loaded) this.element.addEventListener("focusin", this.#onFocus);
+    this.#observe();
+  }
+  #observe() {
+    this.#watcher.start(this.element, { rootMargin: this.rootMarginValue });
+  }
   #onIntersect(entries) {
     for (const entry of entries) {
       if (entry.isIntersecting) {
-        this.#trigger();
-        return;
+        const returning = this.#inside === false;
+        this.#inside = true;
+        this.#enter(returning);
+      } else if (this.#inside) {
+        this.#inside = false;
       }
     }
   }
-  #trigger() {
-    if (!this.#loaded) this.#load();
-    else if (!this.onceValue) this.#reload();
+  /** Applies an intersecting entry: the first one loads, a return re-fetches. */
+  #enter(returning) {
+    if (!this.#loaded) {
+      this.#load();
+      return;
+    }
+    if (this.onceValue || !returning) return;
+    this.#reload();
   }
   /** Starts the load by writing the held URL to `src`. */
   #load() {
+    if (!this.urlValue) return;
     this.#loaded = true;
     this.element.setAttribute("src", this.urlValue);
     this.element.setAttribute("data-lazy-loaded", "true");
     this.dispatch("load", { detail: { url: this.urlValue } });
-    if (this.onceValue) this.#stopObserving();
+    this.element.removeEventListener("focusin", this.#onFocus);
+    if (this.onceValue) this.#watcher.stop();
   }
-  /** Re-entry while `once` is off: ask Turbo to reload the frame's current `src`. */
+  /** Re-entry while `once` is off: fetch the held URL again. */
   #reload() {
+    const src = this.element.getAttribute("src");
+    if (this.urlValue && this.urlValue !== src) {
+      this.element.setAttribute("src", this.urlValue);
+      this.dispatch("load", { detail: { url: this.urlValue } });
+      return;
+    }
     const frame = this.element;
     if (typeof frame.reload !== "function") return;
     frame.reload();
-    this.dispatch("load", { detail: { url: this.urlValue } });
+    this.dispatch("load", { detail: { url: src ?? "" } });
   }
   #stopObserving() {
     this.#watcher.stop();

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();
@@ -226,6 +255,10 @@ var PointerDragController = class _PointerDragController extends Controller {
       return;
     }
     if (!this.#keyboard) return;
+    if (event.key === "Home" || event.key === "End") {
+      event.preventDefault();
+      return;
+    }
     const step = this.#keyboardDelta(event.key);
     if (!step) return;
     event.preventDefault();
@@ -314,6 +347,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 +417,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 +433,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 +444,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);
   }
 };