stimeo-ui 0.16.0 → 0.18.0

package/dist/controllers/pointer_drag_controller.js

@@ -1,69 +1,50 @@
 import { Controller } from '@hotwired/stimulus';
 
-// src/controllers/pointer_drag_controller.ts
-
-// src/utils/arrow_step.ts
 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;
+}
 
-// src/utils/detach_gate.ts
 var DetachGate = class _DetachGate {
-  /** Set while a probe is queued, waiting for a reconnect to cancel it. */
   #pending = false;
-  /**
-   * True while a probe is queued — the last disconnect was ambiguous and no
-   * reconnect has cancelled it yet. Read it from `connect()` to tell the
-   * reconnect half of an in-page move from a first connect: a controller whose
-   * initialisation restarts a measurement (a min-duration floor, an elapsed
-   * counter) must skip it for the move, where nothing actually restarted.
-   */
   get pending() {
     return this.#pending;
   }
-  /**
-   * True when the disconnect is definitely a real detach — the element left
-   * the document, or `data-controller` no longer lists the identifier. False
-   * means ambiguous (in-page move or observed-root exit), NOT "alive".
-   */
   static isDetached(host) {
-    if (!host.element.isConnected) return true;
-    const tokens = (host.element.getAttribute("data-controller") ?? "").split(/\s+/);
-    return !tokens.includes(host.identifier);
-  }
-  /**
-   * Call from `disconnect()`: runs `teardown` synchronously on a definite
-   * detach (fast path), otherwise defers it one microtask — a reconnect
-   * ({@link cancel} from `connect()`) keeps the state, no reconnect runs it.
-   * One microtask is the whole probe window: Stimulus reconnects a moved
-   * element within the same mutation batch, before the checkpoint drains.
-   */
+    return !host.element.isConnected || !_DetachGate.#listed(host);
+  }
   disconnected(host, teardown) {
-    if (_DetachGate.isDetached(host)) {
+    const carried = _DetachGate.#carried(host);
+    if (!carried && _DetachGate.isDetached(host)) {
       this.#pending = false;
       teardown();
       return;
     }
     this.#pending = true;
-    queueMicrotask(() => {
+    const probe = () => {
       if (!this.#pending) return;
       this.#pending = false;
       teardown();
-    });
+    };
+    if (carried) setTimeout(probe, 0);
+    else queueMicrotask(probe);
+  }
+  static #carried(host) {
+    const element = host.element;
+    return !element.isConnected && element.closest("[data-turbo-permanent]") !== null && _DetachGate.#listed(host);
+  }
+  static #listed(host) {
+    const tokens = (host.element.getAttribute("data-controller") ?? "").split(/\s+/);
+    return tokens.includes(host.identifier);
   }
-  /**
-   * Disarms a pending probe. Call from `connect()` (the reconnect that proves
-   * an in-page move) and from the head of any teardown path not routed through
-   * {@link disconnected} (disabled-toggle, Escape), so an orphaned probe can
-   * never run the teardown a second time.
-   */
   cancel() {
     this.#pending = false;
   }
 };
 
-// src/utils/event_owner.ts
 function ownerIndex(candidates, node) {
   if (!(node instanceof Node)) return -1;
   return candidates.findIndex((candidate) => candidate.contains(node));
@@ -72,7 +53,148 @@ function ownerOf(candidates, node) {
   return candidates[ownerIndex(candidates, node)] ?? null;
 }
 
-// src/utils/owned_pointer_session.ts
+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 flatTreeContains(ancestor, element) {
+  for (let node = element; node; node = flatTreeParent(node)) {
+    if (node === ancestor) return true;
+  }
+  return false;
+}
+function closestInFlatTree(element, selector) {
+  for (let node = element; node; node = flatTreeParent(node)) {
+    if (node.matches(selector)) return node;
+  }
+  return null;
+}
+function deepActiveElement(ownerDocument) {
+  let active = ownerDocument.activeElement;
+  while (active?.shadowRoot?.activeElement) active = active.shadowRoot.activeElement;
+  return active;
+}
+
+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;
+  constructor(run) {
+    this.#run = run;
+  }
+  activate() {
+    this.#active = true;
+  }
+  cancel() {
+    this.#active = false;
+    this.#queued = false;
+    this.#generation += 1;
+  }
+  get pending() {
+    return this.#queued;
+  }
+  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();
+    });
+  }
+};
+
+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 NUMBER_BOUNDS = {
+  nonNegative: { finite: true, min: 0 },
+  positive: { finite: true, exclusiveMin: 0 }};
+function matchesNumberBounds(value, bounds) {
+  if (!Number.isFinite(value)) {
+    const direction = value === Infinity ? "positive" : value === -Infinity ? "negative" : null;
+    if (direction === null) return false;
+    if (bounds.allowInfinity !== "both" && bounds.allowInfinity !== direction) return false;
+  }
+  if (bounds.min !== void 0 && value < bounds.min) return false;
+  if (bounds.max !== void 0 && value > bounds.max) return false;
+  if (bounds.exclusiveMin !== void 0 && value <= bounds.exclusiveMin) return false;
+  if (bounds.integer && !Number.isInteger(value)) return false;
+  if (bounds.allowedValues !== void 0 && !bounds.allowedValues.includes(value)) return false;
+  return true;
+}
+
+function readNumber(raw, fallback, bounds) {
+  return matchesNumberBounds(raw, bounds) ? raw : fallback;
+}
+
+var NumberValueReader = class {
+  #lastRejected = /* @__PURE__ */ new Map();
+  read(owner, name, raw, fallback, bounds) {
+    const resolved = readNumber(raw, fallback, bounds);
+    if (matchesNumberBounds(raw, bounds)) {
+      this.#lastRejected.delete(name);
+      return resolved;
+    }
+    const attribute = `data-${owner.identifier}-${name.replace(/[A-Z]/g, (letter) => `-${letter.toLowerCase()}`)}-value`;
+    const literal = owner.element.getAttribute(attribute);
+    if (literal === null) {
+      this.#lastRejected.delete(name);
+      return resolved;
+    }
+    if (this.#lastRejected.get(name) !== literal) {
+      this.#lastRejected.set(name, literal);
+      console.warn(
+        `Stimeo UI: "${owner.identifier}" has an invalid number Value "${name}" declaration ${JSON.stringify(literal)}; using ${fallback}.`
+      );
+    }
+    return resolved;
+  }
+};
+
 var OwnedPointerSession = class {
   #pointerId;
   #owner;
@@ -92,7 +214,6 @@ var OwnedPointerSession = class {
     } catch {
     }
   }
-  /** Releases capture and listeners, then reports the end exactly once. */
   end() {
     this.#finish("teardown");
   }
@@ -117,23 +238,158 @@ var OwnedPointerSession = class {
   };
 };
 
-// src/utils/transient_hooks.ts
+function setAttributeIfChanged(element, name, value, beforeWrite) {
+  if (element.getAttribute(name) === value) return false;
+  if (value === null) element.removeAttribute(name);
+  else element.setAttribute(name, value);
+  return true;
+}
+
+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;
+}
+
+function holdsFocus(element) {
+  return element.matches(":focus") || deepActiveElement(element.ownerDocument) === element;
+}
+var TabindexLoan = class _TabindexLoan {
+  static #registry = sharedRegistry(
+    "stimeo-ui.tabindex-loan.registry.v1",
+    () => ({ stacks: /* @__PURE__ */ new WeakMap(), names: /* @__PURE__ */ new Set() })
+  );
+  #value;
+  #record;
+  #preserveFocus;
+  #lent = /* @__PURE__ */ new Set();
+  constructor(value, owner, options = {}) {
+    this.#value = value;
+    this.#record = `data-${owner}-tabindex-loan`;
+    this.#preserveFocus = options.preserveFocus === true;
+    _TabindexLoan.#registry.names.add(this.#record);
+  }
+  lend(element, options = {}) {
+    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 && options.onlyIfUnfocusable && (current !== null || element.tabIndex >= 0)) return;
+    if (!held && current !== null && !linked) return;
+    this.#lent.add(element);
+    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);
+    }
+  }
+  return(element) {
+    const stack = this.#stack(element);
+    const hold = stack.find((held) => held.loan === this) ?? stack.find(
+      (held) => held.loan === null && held.record === this.#record && held.value === this.#value
+    );
+    if (!hold) return false;
+    if (!this.#release(element, stack, hold, this.#preserveFocus)) {
+      hold.loan = this;
+      this.#lent.add(element);
+      return false;
+    }
+    this.#lent.delete(element);
+    return true;
+  }
+  returnAll() {
+    for (const element of Array.from(this.#lent)) this.return(element);
+  }
+  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 && !holdsFocus(element)) 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, preserveFocus = false) {
+    const current = element.getAttribute("tabindex");
+    const index = stack.indexOf(hold);
+    const owns = current === hold.value && !stack.slice(index + 1).some((above2) => above2.value === current);
+    if (owns && preserveFocus && holdsFocus(element)) return false;
+    stack.splice(index, 1);
+    const above = stack[index];
+    if (above) above.linked &&= hold.linked;
+    this.#mark(element, stack);
+    if (!owns) return true;
+    const below = hold.linked ? stack[index - 1] : void 0;
+    if (!below) element.removeAttribute("tabindex");
+    else if (below.value !== current) element.setAttribute("tabindex", below.value);
+    return true;
+  }
+  #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) {
+      setAttributeIfChanged(element, name, recorded);
+    }
+  }
+};
+
 var TransientHooks = class {
   #attributes;
   constructor(options) {
     this.#attributes = options.attributes;
   }
-  /** Drops the declared hooks from `element`; what it carries besides stays. */
   reset(element) {
     for (const attribute of this.#attributes) element.removeAttribute(attribute);
   }
 };
 
-// src/controllers/pointer_drag_controller.ts
 var TRANSIENT_DRAG = new TransientHooks({ attributes: ["data-dragging"] });
 var TRANSIENT_GRAB = new TransientHooks({ attributes: ["data-grabbed"] });
 var NATIVE_KEY_OWNERS = "input, textarea, select, button, a[href], summary, [contenteditable]";
 var PointerDragController = class _PointerDragController extends Controller {
+  #numbers = new NumberValueReader();
   static targets = ["handle"];
   static values = {
     axis: { type: String, default: "both" },
@@ -142,52 +398,63 @@ var PointerDragController = class _PointerDragController extends Controller {
     disabled: { type: Boolean, default: false },
     follow: { type: Boolean, default: false }
   };
+  static valueConstraints = {
+    threshold: NUMBER_BOUNDS.nonNegative,
+    keyboardStep: NUMBER_BOUNDS.positive
+  };
   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";
-  /** Marker attribute recording that this controller set `tabindex`. */
-  static #TABINDEX_MARKER = "data-pointer-drag-tabindex";
+  #tabindex = new TabindexLoan("0", this.identifier, { preserveFocus: true });
   #pointer = null;
   #keyboard = null;
-  /** Committed follow offset from past drops; a new drag's deltas add onto it. */
+  #keyboardFocusSession = null;
+  #listeners = new ListenerSet();
+  #shadowFocus = new ListenerSet();
+  #keyboardFocus = new MicrotaskCoalescer(() => this.#settleKeyboardFocus());
   #followBase = { x: 0, y: 0 };
-  /** Decides whether a mid-session disconnect() is an in-page move or a detach. */
+  #gestureFollows = false;
+  #followOutput = null;
   #gate = new DetachGate();
+  #morphRender = new MorphRenderWatcher(() => {
+    for (const handle of this.#handles()) this.#prepareHandle(handle);
+    this.#reflectSession();
+  });
   connect() {
+    this.#morphRender.observe(this.element);
+    if (!this.#pointer && !this.#keyboard) this.#followOutput = null;
     this.#gate.cancel();
     if (!this.#pointer) TRANSIENT_DRAG.reset(this.element);
     if (!this.#keyboard) TRANSIENT_GRAB.reset(this.element);
-    if (this.followValue && !this.#pointer && !this.#keyboard) {
-      this.#followBase = this.#parseFollowBase();
-    }
-    this.element.addEventListener("pointerdown", this.#onPointerDown);
-    this.element.addEventListener("keydown", this.#onKeydown);
+    this.#listeners.add(this.element, "pointerdown", this.#onPointerDown);
+    this.#listeners.add(this.element, "keydown", this.#onKeydown);
+    this.#listeners.add(this.element, "focusout", this.#onFocusout);
+    this.#listeners.add(this.element, "focusin", this.#onFocusin);
+    this.#keyboardFocus.activate();
     if (!this.hasHandleTarget) this.#prepareHandle(this.element);
+    if (this.#keyboard) {
+      this.#watchShadowFocus(this.#keyboard.handle);
+      this.#checkKeyboardFocus(this.#keyboard);
+    }
   }
   disconnect() {
-    this.element.removeEventListener("pointerdown", this.#onPointerDown);
-    this.element.removeEventListener("keydown", this.#onKeydown);
+    this.#morphRender.disconnect();
+    this.#listeners.dispose();
+    this.#shadowFocus.dispose();
+    this.#keyboardFocus.cancel();
+    this.#keyboardFocusSession = null;
     if (this.#pointer || this.#keyboard) {
       this.#gate.disconnected(this, () => this.#teardown());
       return;
     }
     this.#teardown();
   }
-  /**
-   * 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 follows = this.#pointer || this.#keyboard ? this.#gestureFollows : this.followValue;
     const live = this.#pointer?.started ? this.#pointer.pointerType : this.#keyboard ? "keyboard" : null;
     if (this.#pointer || this.#keyboard) this.#teardownSessions();
     if (live) this.#dispatchCancel(live);
+    if (!follows) return;
     this.#followBase = { x: 0, y: 0 };
     this.#applyFollow(0, 0);
   }
@@ -204,13 +471,6 @@ var PointerDragController = class _PointerDragController extends Controller {
     if (!this.hasHandleTarget) this.#prepareHandle(this.element);
     if (interrupted) this.#dispatchCancel(interrupted);
   }
-  /**
-   * 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()) {
@@ -219,7 +479,6 @@ var PointerDragController = class _PointerDragController extends Controller {
       handle.style.touchAction = this.#touchActionForAxis();
     }
   }
-  /** Cancels any in-flight session when the controller is disabled mid-drag. */
   disabledValueChanged() {
     if (!this.disabledValue) return;
     if (this.#pointer?.started || this.#keyboard) {
@@ -227,17 +486,14 @@ var PointerDragController = class _PointerDragController extends Controller {
     }
     this.#teardownSessions();
   }
-  /**
-   * Arms a pointer drag on a handle; `start` waits for the threshold.
-   *
-   * @stimeoRuntimeOnly `disabled` decides whether this one pointer press starts a gesture.
-   */
-  #onPointerDown = (event) => {
+  #onPointerDown = (rawEvent) => {
+    const event = rawEvent;
     if (this.disabledValue || this.#pointer || this.#keyboard || event.button !== 0) return;
     const handle = this.#handleFor(event.target);
     if (!handle) return;
     event.preventDefault();
     handle.focus();
+    this.#beginGesture();
     const session = {
       pointer: null,
       handle,
@@ -254,18 +510,13 @@ var PointerDragController = class _PointerDragController extends Controller {
     });
     this.#pointer = session;
   };
-  /**
-   * Applies one tracked move: threshold, hooks, follow offset, events.
-   *
-   * @stimeoRuntimeOnly `threshold` decides when this one pointer move starts the drag.
-   */
   #trackMove(session, event) {
     const [dx, dy] = this.#filterAxis(
       event.clientX - session.originX,
       event.clientY - session.originY
     );
     if (!session.started) {
-      if (Math.hypot(dx, dy) < this.thresholdValue) return;
+      if (Math.hypot(dx, dy) < this.#safeThreshold) return;
       session.started = true;
       this.element.setAttribute("data-dragging", "true");
       this.dispatch("start", {
@@ -279,13 +530,6 @@ var PointerDragController = class _PointerDragController extends Controller {
       detail: { dx, dy, x: event.clientX, y: event.clientY, pointerType: session.pointerType }
     });
   }
-  /**
-   * Closes the session and reports only the outcome the caller does not own.
-   *
-   * A teardown (detach, Escape, mid-drag disable, `reset`) is announced by the
-   * path that asked for it, so this one stays silent; `pointerup` below the
-   * threshold was a plain click, and `pointercancel` is an OS gesture takeover.
-   */
   #finishPointer(session, kind) {
     const { started, dx, dy, pointerType } = session;
     this.#pointer = null;
@@ -298,19 +542,14 @@ var PointerDragController = class _PointerDragController extends Controller {
     }
     this.#dispatchCancel(pointerType);
   }
-  /**
-   * Keyboard alternative: Space/Enter grab & drop, arrows move, Escape cancels.
-   *
-   * @stimeoRuntimeOnly `disabled` decides whether this one key is taken and `keyboardStep` is the
-   *   distance of one keyboard move.
-   */
-  #onKeydown = (event) => {
+  #onKeydown = (rawEvent) => {
+    const event = rawEvent;
     if (this.disabledValue) return;
     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 (this.#ownsNativeKeys(event.composedPath()[0] ?? event.target, handle)) return;
     if (isReservedArrowChord(event)) return;
     if (event.key === "Escape") {
       if (this.#pointer?.started) {
@@ -334,6 +573,7 @@ var PointerDragController = class _PointerDragController extends Controller {
     }
     if (!this.#keyboard) return;
     if (event.key === "Home" || event.key === "End") {
+      if (hasModifierChord(event)) return;
       event.preventDefault();
       return;
     }
@@ -355,9 +595,50 @@ var PointerDragController = class _PointerDragController extends Controller {
       }
     });
   };
-  /** Enters the grabbed mode: `data-grabbed` on element + handle, then `start`. */
+  #onFocusin = () => {
+    const session = this.#keyboard;
+    if (session) {
+      this.#watchShadowFocus(session.handle);
+      this.#checkKeyboardFocus(session);
+    }
+  };
+  #watchShadowFocus(handle) {
+    const tree = handle.getRootNode();
+    let active = tree.activeElement;
+    while (active?.shadowRoot) {
+      const shadow = active.shadowRoot;
+      this.#shadowFocus.add(shadow, "focusin", this.#onFocusin);
+      active = shadow.activeElement;
+    }
+  }
+  #onFocusout = (rawEvent) => {
+    const destination = rawEvent.relatedTarget;
+    const session = this.#keyboard;
+    if (session && this.#handleFor(destination) === session.handle && !this.#ownsNativeKeys(destination, session.handle)) {
+      return;
+    }
+    this.#checkKeyboardFocus(this.#keyboard);
+  };
+  #checkKeyboardFocus(session) {
+    this.#keyboardFocusSession = session;
+    this.#keyboardFocus.schedule();
+  }
+  #settleKeyboardFocus() {
+    const session = this.#keyboardFocusSession;
+    this.#keyboardFocusSession = null;
+    if (!session || this.#keyboard !== session || !this.element.isConnected) return;
+    const tree = session.handle.getRootNode();
+    const active = tree.activeElement ?? null;
+    if (this.#handleFor(active) === session.handle && !this.#ownsNativeKeys(active, session.handle)) {
+      return;
+    }
+    this.#clearKeyboardSession();
+    this.#dispatchCancel("keyboard");
+  }
   #grabKeyboard(handle) {
+    this.#beginGesture();
     this.#keyboard = { handle, dx: 0, dy: 0 };
+    this.#watchShadowFocus(handle);
     this.element.setAttribute("data-grabbed", "true");
     handle.setAttribute("data-grabbed", "true");
     this.dispatch("start", { detail: { x: 0, y: 0, pointerType: "keyboard" } });
@@ -369,9 +650,8 @@ var PointerDragController = class _PointerDragController extends Controller {
     this.#followCommit(session.dx, session.dy);
     this.dispatch("end", { detail: { dx: session.dx, dy: session.dy, pointerType: "keyboard" } });
   }
-  /** Maps an arrow key to a raw (unfiltered) `keyboardStep` delta. */
   #keyboardDelta(key) {
-    const step = this.keyboardStepValue;
+    const step = this.#safeKeyboardStep;
     switch (key) {
       case "ArrowRight":
         return [step, 0];
@@ -385,47 +665,29 @@ var PointerDragController = class _PointerDragController extends Controller {
         return null;
     }
   }
-  /**
-   * Zeroes the delta on the locked axis (`axis` = x | y | both).
-   *
-   * @stimeoRuntimeOnly `axis` filters the offset of one move to the allowed direction.
-   */
   #filterAxis(dx, dy) {
     if (this.axisValue === "x") return [dx, 0];
     if (this.axisValue === "y") return [0, dy];
     return [dx, dy];
   }
-  /** Silently closes a live pointer session; the caller announces the outcome. */
   #endPointerSession() {
     this.#pointer?.pointer?.end();
   }
   #clearKeyboardSession() {
+    this.#shadowFocus.dispose();
     this.#keyboard?.handle.removeAttribute("data-grabbed");
     this.#keyboard = null;
+    this.#keyboardFocusSession = null;
     this.element.removeAttribute("data-grabbed");
   }
-  /**
-   * Full teardown for a controller whose element is going away or lost its
-   * controller. Into a dead (detached) tree it is silent — consumers restore
-   * from their own `connect()`, not from a cancel event. But a detach that
-   * KEEPS the element (Turbo morph, `data-controller` removed) leaves the
-   * consumers alive and listening: an in-flight session must end in `cancel`
-   * there, or a composer like sortable strands its one-at-a-time session
-   * bookkeeping forever.
-   */
   #teardown() {
-    this.#gate.cancel();
     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();
+    this.#tabindex.returnAll();
+    if (interrupted) this.#followReset();
     if (interrupted && this.element.isConnected) this.#dispatchCancel(interrupted);
   }
-  /**
-   * Silently tears down whatever session is live (disconnect / disabled /
-   * Escape). Composed from the two single-session teardowns so pointer and
-   * keyboard cleanup cannot diverge as either path evolves.
-   */
   #teardownSessions() {
     this.#endPointerSession();
     this.#clearKeyboardSession();
@@ -434,63 +696,52 @@ var PointerDragController = class _PointerDragController extends Controller {
     this.#followReset();
     this.dispatch("cancel", { detail: { pointerType } });
   }
-  /**
-   * Applies the in-flight offset to the element's `translate` (follow only).
-   *
-   * @stimeoRuntimeOnly `follow` decides whether this one move writes the offset as a translate; the
-   *   offset itself comes from the gesture.
-   */
+  #beginGesture() {
+    this.#gestureFollows = this.followValue;
+    if (this.#gestureFollows) this.#followBase = this.#parseFollowBase();
+  }
   #followMove(dx, dy) {
-    if (!this.followValue) return;
+    if (!this.#gestureFollows) return;
     this.#applyFollow(this.#followBase.x + dx, this.#followBase.y + dy);
   }
-  /**
-   * Folds a drop's deltas into the committed base offset (follow only).
-   *
-   * @stimeoRuntimeOnly `follow` decides whether the end of this one gesture keeps the offset as a
-   *   translate.
-   */
   #followCommit(dx, dy) {
-    if (!this.followValue) return;
+    if (!this.#gestureFollows) return;
     this.#followBase = { x: this.#followBase.x + dx, y: this.#followBase.y + dy };
     this.#applyFollow(this.#followBase.x, this.#followBase.y);
   }
-  /**
-   * Snaps back to the committed position (follow only) — the cancel contract.
-   *
-   * @stimeoRuntimeOnly `follow` decides whether cancelling this one gesture clears the translate it
-   *   wrote.
-   */
   #followReset() {
-    if (!this.followValue) return;
+    if (!this.#gestureFollows) return;
     this.#applyFollow(this.#followBase.x, this.#followBase.y);
   }
-  /**
-   * Writes the offset as the standalone CSS `translate` property — independent
-   * of `transform`, so an authored transform (scale, rotate…) is never
-   * clobbered. At the origin the property is removed to keep the DOM clean.
-   */
+  #reflectSession() {
+    if (this.#pointer?.started) this.element.setAttribute("data-dragging", "true");
+    else this.element.removeAttribute("data-dragging");
+    if (this.#keyboard) {
+      this.element.setAttribute("data-grabbed", "true");
+      this.#keyboard.handle.setAttribute("data-grabbed", "true");
+    } else {
+      this.element.removeAttribute("data-grabbed");
+      for (const handle of this.#handles()) handle.removeAttribute("data-grabbed");
+    }
+    const follows = this.#pointer || this.#keyboard ? this.#gestureFollows : this.followValue;
+    if (follows && this.#followOutput) {
+      this.#applyFollow(this.#followOutput.x, this.#followOutput.y);
+    }
+  }
   #applyFollow(x, y) {
+    this.#followOutput = { x, y };
     if (x === 0 && y === 0) this.element.style.removeProperty("translate");
     else this.element.style.setProperty("translate", `${x}px ${y}px`);
   }
-  /**
-   * Reads a committed follow offset back from the inline `translate`. Only the
-   * controller's own `<x>px <y>px` shape is recognized; anything else (an
-   * authored percentage, `none`, an empty string) starts the base at 0 — follow
-   * mode owns this property, per the class contract.
-   */
   #parseFollowBase() {
     const raw = this.element.style.getPropertyValue("translate").trim();
     const match = /^(-?\d+(?:\.\d+)?)px(?:\s+(-?\d+(?:\.\d+)?)px)?$/.exec(raw);
     if (!match) return { x: 0, y: 0 };
     return { x: Number(match[1]), y: Number(match[2] ?? "0") };
   }
-  /** The active handles: the `handle` targets, else the element itself. */
   #handles() {
     return this.hasHandleTarget ? this.handleTargets : [this.element];
   }
-  /** Resolves the handle owning an event target (the handle or a descendant). */
   #handleFor(target) {
     return ownerOf(this.#handles(), target);
   }
@@ -499,25 +750,14 @@ var PointerDragController = class _PointerDragController extends Controller {
     if (type === "touch" || type === "pen") return type;
     return "mouse";
   }
-  /** `touch-action` that lets the page keep panning on the locked axis only. */
   #touchActionForAxis() {
     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";
   }
-  /**
-   * Establishes the handle contract: a `touch-action` derived from `axis`
-   * (marker-guarded so an authored inline value wins and reconnects stay
-   * idempotent) and focusability for the keyboard path (`tabindex="0"` only when
-   * the author supplied none — prefer a real `<button>` handle). Both additions
-   * are marker-owned so `#restoreHandle` reverts them symmetrically on teardown.
-   *
-   * @stimeoRenderRoot
-   */
   #prepareHandle(handle) {
     const lent = this.#touchActionForAxis();
     const marked = handle.hasAttribute(_PointerDragController.#TOUCH_ACTION_MARKER);
@@ -525,17 +765,14 @@ var PointerDragController = class _PointerDragController extends Controller {
       handle.style.touchAction = lent;
       handle.setAttribute(_PointerDragController.#TOUCH_ACTION_MARKER, "true");
     }
-    if (handle.tabIndex < 0 && !handle.hasAttribute("tabindex")) {
-      handle.setAttribute("tabindex", "0");
-      handle.setAttribute(_PointerDragController.#TABINDEX_MARKER, "true");
-    }
+    this.#tabindex.lend(handle, { onlyIfUnfocusable: 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);
+    let element = target;
+    while (element.shadowRoot?.activeElement) element = element.shadowRoot.activeElement;
+    const owner = closestInFlatTree(element, NATIVE_KEY_OWNERS);
+    return owner !== null && owner !== handle && flatTreeContains(handle, owner);
   }
-  /** Reverts the marker-owned touch-action + tabindex (authored values untouched). */
   #restoreHandle(handle) {
     if (handle.hasAttribute(_PointerDragController.#TOUCH_ACTION_MARKER)) {
       if (handle.style.touchAction === this.#touchActionForAxis()) {
@@ -543,18 +780,27 @@ var PointerDragController = class _PointerDragController extends Controller {
       }
       handle.removeAttribute(_PointerDragController.#TOUCH_ACTION_MARKER);
     }
-    if (handle.hasAttribute(_PointerDragController.#TABINDEX_MARKER)) {
-      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);
-    }
+    this.#tabindex.return(handle);
+  }
+  get #safeThreshold() {
+    return this.#numbers.read(
+      this,
+      "threshold",
+      this.thresholdValue,
+      _PointerDragController.values.threshold.default,
+      _PointerDragController.valueConstraints.threshold
+    );
+  }
+  get #safeKeyboardStep() {
+    return this.#numbers.read(
+      this,
+      "keyboardStep",
+      this.keyboardStepValue,
+      _PointerDragController.values.keyboardStep.default,
+      _PointerDragController.valueConstraints.keyboardStep
+    );
   }
 };
 
 export { PointerDragController };
-//# sourceMappingURL=pointer_drag_controller.js.map
 //# sourceMappingURL=pointer_drag_controller.js.map