stimeo-ui 0.17.0 → 0.18.0

data/dist/controllers/persist_controller.js

@@ -5,11 +5,15 @@ function sharedRegistry(key, create) {
   const scope = globalThis;
   const existing = scope[symbol];
   if (existing !== void 0) return existing;
-  const registry = create();
-  Object.defineProperty(globalThis, symbol, { value: registry });
-  return registry;
+  const registry2 = create();
+  Object.defineProperty(globalThis, symbol, { value: registry2 });
+  return registry2;
 }
 
+sharedRegistry(
+  "stimeo-ui.attribute-lease.registry.v1",
+  () => ({ stacks: /* @__PURE__ */ new WeakMap(), names: /* @__PURE__ */ new Map() })
+);
 function isAttributeValue(value) {
   return value === null || typeof value === "string";
 }
@@ -35,126 +39,37 @@ function leasedAuthorValue(element, attribute) {
   }
   return void 0;
 }
-(class _AttributeLease {
-  static #registry = sharedRegistry(
-    "stimeo-ui.attribute-lease.registry.v1",
-    () => ({ stacks: /* @__PURE__ */ new WeakMap(), names: /* @__PURE__ */ new Map() })
-  );
-  #attribute;
-  #record;
-  #base;
-  #held = /* @__PURE__ */ new Set();
-  constructor(attribute, owner, options = {}) {
-    this.#attribute = attribute;
-    this.#record = `data-${owner}-${attribute}-lease`;
-    this.#base = options.base === true;
-    const names = _AttributeLease.#registry.names;
-    names.set(attribute, (names.get(attribute) ?? /* @__PURE__ */ new Set()).add(this.#record));
-  }
-  write(element, value) {
-    const stack = this.#stack(element);
-    const hold = this.#take(stack) ?? this.#acquire(element, stack);
-    this.#held.add(element);
-    const shows = !this.#covered(element, stack, hold);
-    hold.written = value;
-    this.#mark(element, stack);
-    if (shows) this.#reflect(element, value);
-  }
-  return(element) {
-    const held = this.#held.delete(element);
-    const known = _AttributeLease.#registry.stacks.get(element)?.has(this.#attribute);
-    const stack = held || known || element.hasAttribute(this.#record) ? this.#stack(element) : [];
-    const hold = this.#take(stack);
-    if (!hold) return false;
-    const carries = element.getAttribute(this.#attribute) === hold.written;
-    const owns = carries && !this.#covered(element, stack, hold);
-    const index = stack.indexOf(hold);
-    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;
-    this.#reflect(element, below ? below.written : hold.original);
-    return true;
+
+var PREFIX = "__stimeo_raw_v1_";
+sharedRegistry(
+  "stimeo-ui.form-data-projection.registry.v1",
+  () => /* @__PURE__ */ new WeakMap()
+);
+function decodedName(key) {
+  if (!key.startsWith(PREFIX)) return null;
+  const separator = PREFIX.length + 32;
+  if (key[separator] !== ":") return null;
+  try {
+    const name = JSON.parse(key.slice(separator + 1));
+    return typeof name === "string" ? name : null;
+  } catch {
+    return null;
   }
-  returnAll() {
-    for (const element of Array.from(this.#held)) this.return(element);
-  }
-  #stack(element) {
-    const stacks = _AttributeLease.#registry.stacks;
-    const byAttribute = stacks.get(element) ?? /* @__PURE__ */ new Map();
-    stacks.set(element, byAttribute);
-    const stack = byAttribute.get(this.#attribute) ?? this.#seed(element);
-    byAttribute.set(this.#attribute, stack);
-    return stack;
-  }
-  #seed(element) {
-    const found = [];
-    for (const record of _AttributeLease.#registry.names.get(this.#attribute) ?? []) {
-      const read = readLeaseRecord(element, record);
-      if (read) found.push({ ...read, record });
-    }
-    const depth = ({ beneath }) => beneath.filter((name) => found.some((other) => other.record === name)).length;
-    return found.sort((one, other) => depth(one) - depth(other)).map(({ record, written, original, linked }, index) => ({
-      lease: null,
-      record,
-      written,
-      original,
-      linked: linked && index > 0
-    }));
-  }
-  #take(stack) {
-    const hold = stack.find((held) => held.lease === this) ?? stack.find((held) => held.lease === null && held.record === this.#record);
-    if (hold) hold.lease = this;
-    return hold;
-  }
-  #acquire(element, stack) {
-    const current = element.getAttribute(this.#attribute);
-    const top = stack.at(-1);
-    const bottom = stack[0];
-    const over = top?.written === current ? top : void 0;
-    const from = this.#base ? bottom : over;
-    const hold = {
-      lease: this,
-      record: this.#record,
-      written: current,
-      original: from ? from.original : current,
-      linked: !this.#base && over !== void 0
-    };
-    if (this.#base && bottom) {
-      bottom.linked = true;
-      stack.unshift(hold);
-    } else stack.push(hold);
-    return hold;
-  }
-  #covered(element, stack, hold) {
-    const current = element.getAttribute(this.#attribute);
-    return stack.slice(stack.indexOf(hold) + 1).some((above) => above.written === current);
-  }
-  #mark(element, stack) {
-    const records = /* @__PURE__ */ new Map([[this.#record, null]]);
-    stack.forEach((hold, index) => {
-      const names = stack.slice(0, index).map((under) => under.record);
-      const beneath = [...new Set(names.reverse())].filter((name) => name !== hold.record);
-      const marker = hold.linked || beneath.length === 0 ? [] : [false];
-      records.set(
-        hold.record,
-        hold.written === hold.original && beneath.length === 0 && index === stack.length - 1 ? null : JSON.stringify([hold.original, hold.written, ...marker, ...beneath])
-      );
-    });
-    for (const [name, recorded] of records) {
-      if (element.getAttribute(name) === recorded) continue;
-      if (recorded === null) element.removeAttribute(name);
-      else element.setAttribute(name, recorded);
-    }
+}
+function projectedFieldName(name) {
+  return decodedName(name) ?? name;
+}
+
+var ListenerSet = class {
+  #abort = new AbortController();
+  add(target, type, handler, options) {
+    target.addEventListener(type, handler, { ...options, signal: this.#abort.signal });
   }
-  #reflect(element, value) {
-    if (element.getAttribute(this.#attribute) === value) return;
-    if (value === null) element.removeAttribute(this.#attribute);
-    else element.setAttribute(this.#attribute, value);
+  dispose() {
+    this.#abort.abort();
+    this.#abort = new AbortController();
   }
-});
+};
 
 var MicrotaskCoalescer = class {
   #run;
@@ -172,6 +87,9 @@ var MicrotaskCoalescer = class {
     this.#queued = false;
     this.#generation += 1;
   }
+  get pending() {
+    return this.#queued;
+  }
   schedule() {
     if (!this.#active || this.#queued) return;
     this.#queued = true;
@@ -364,6 +282,7 @@ var PersistController = class _PersistController extends Controller {
   #logicalKey = null;
   #payload = null;
   #registeredClearOn = null;
+  #clearOnListeners = new ListenerSet();
   #excluded = DEFAULT_EXCLUDE;
   #knownFields = /* @__PURE__ */ new WeakSet();
   #forcedRestore = /* @__PURE__ */ new Set();
@@ -377,13 +296,14 @@ var PersistController = class _PersistController extends Controller {
   #onClearEvent = () => {
     this.clear();
   };
+  #listeners = new ListenerSet();
   connect() {
     if (this.#connected) return;
     this.#connected = true;
     this.#logicalKey = this.#resolveLogicalKey();
     this.#excluded = parseStringList(this.excludeValue, DEFAULT_EXCLUDE);
-    this.element.addEventListener("input", this.#onInput);
-    this.element.addEventListener("change", this.#onInput);
+    this.#listeners.add(this.element, "input", this.#onInput);
+    this.#listeners.add(this.element, "change", this.#onInput);
     this.#syncClearOn();
     this.#restoreDynamic.activate();
     this.#observer.observe(this.element, {
@@ -408,8 +328,7 @@ var PersistController = class _PersistController extends Controller {
   disconnect() {
     this.#flushPendingSave();
     this.#connected = false;
-    this.element.removeEventListener("input", this.#onInput);
-    this.element.removeEventListener("change", this.#onInput);
+    this.#listeners.dispose();
     this.#unbindClearOn();
     this.#observer.disconnect();
     this.#restoreDynamic.cancel();
@@ -631,11 +550,12 @@ var PersistController = class _PersistController extends Controller {
     if (NON_VALUE_TYPES.has(field.type) || SENSITIVE_TYPES.has(field.type)) return false;
     if (SENSITIVE_TYPES.has(leasedAuthorValue(field, "type") ?? "")) return false;
     if (excluded.includes(field.type)) return false;
-    if (field.name.length > 0 && excluded.includes(field.name)) return false;
+    const name = projectedFieldName(field.name);
+    if (name.length > 0 && excluded.includes(name)) return false;
     return true;
   }
   #keyOf(field) {
-    return field.name || field.id || null;
+    return projectedFieldName(field.name) || field.id || null;
   }
   #ownsField(field) {
     return field.closest(`[data-controller~="${this.identifier}"]`) === this.element;
@@ -655,12 +575,12 @@ var PersistController = class _PersistController extends Controller {
     if (next === this.#registeredClearOn) return;
     this.#unbindClearOn();
     if (next === null) return;
-    this.element.addEventListener(next, this.#onClearEvent);
+    this.#clearOnListeners.add(this.element, next, this.#onClearEvent);
     this.#registeredClearOn = next;
   }
   #unbindClearOn() {
     if (this.#registeredClearOn === null) return;
-    this.element.removeEventListener(this.#registeredClearOn, this.#onClearEvent);
+    this.#clearOnListeners.dispose();
     this.#registeredClearOn = null;
   }
   #validEventName(value) {

data/dist/controllers/pointer_drag_controller.js

@@ -4,6 +4,9 @@ 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;
+}
 
 var DetachGate = class _DetachGate {
   #pending = false;
@@ -50,6 +53,33 @@ function ownerOf(candidates, node) {
   return candidates[ownerIndex(candidates, node)] ?? null;
 }
 
+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) {
@@ -77,6 +107,9 @@ var MicrotaskCoalescer = class {
     this.#queued = false;
     this.#generation += 1;
   }
+  get pending() {
+    return this.#queued;
+  }
   schedule() {
     if (!this.#active || this.#queued) return;
     this.#queued = true;
@@ -107,6 +140,9 @@ var MorphRenderWatcher = class {
   schedule() {
     this.#pass.schedule();
   }
+  get pending() {
+    return this.#pass.pending;
+  }
   disconnect() {
     this.#listeners.dispose();
     this.#pass.cancel();
@@ -202,6 +238,143 @@ var OwnedPointerSession = class {
   };
 };
 
+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) {
@@ -232,9 +405,13 @@ var PointerDragController = class _PointerDragController extends Controller {
   static actions = ["reset"];
   static events = ["start", "move", "end", "cancel"];
   static #TOUCH_ACTION_MARKER = "data-pointer-drag-touch-action";
-  static #TABINDEX_MARKER = "data-pointer-drag-tabindex";
+  #tabindex = new TabindexLoan("0", this.identifier, { preserveFocus: true });
   #pointer = null;
   #keyboard = null;
+  #keyboardFocusSession = null;
+  #listeners = new ListenerSet();
+  #shadowFocus = new ListenerSet();
+  #keyboardFocus = new MicrotaskCoalescer(() => this.#settleKeyboardFocus());
   #followBase = { x: 0, y: 0 };
   #gestureFollows = false;
   #followOutput = null;
@@ -249,14 +426,23 @@ var PointerDragController = class _PointerDragController extends Controller {
     this.#gate.cancel();
     if (!this.#pointer) TRANSIENT_DRAG.reset(this.element);
     if (!this.#keyboard) TRANSIENT_GRAB.reset(this.element);
-    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.#morphRender.disconnect();
-    this.element.removeEventListener("pointerdown", this.#onPointerDown);
-    this.element.removeEventListener("keydown", this.#onKeydown);
+    this.#listeners.dispose();
+    this.#shadowFocus.dispose();
+    this.#keyboardFocus.cancel();
+    this.#keyboardFocusSession = null;
     if (this.#pointer || this.#keyboard) {
       this.#gate.disconnected(this, () => this.#teardown());
       return;
@@ -264,9 +450,11 @@ var PointerDragController = class _PointerDragController extends Controller {
     this.#teardown();
   }
   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);
   }
@@ -298,7 +486,8 @@ var PointerDragController = class _PointerDragController extends Controller {
     }
     this.#teardownSessions();
   }
-  #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;
@@ -353,13 +542,14 @@ var PointerDragController = class _PointerDragController extends Controller {
     }
     this.#dispatchCancel(pointerType);
   }
-  #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) {
@@ -383,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;
     }
@@ -404,9 +595,50 @@ var PointerDragController = class _PointerDragController extends Controller {
       }
     });
   };
+  #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" } });
@@ -442,14 +674,17 @@ var PointerDragController = class _PointerDragController extends Controller {
     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");
   }
   #teardown() {
     const interrupted = this.#pointer?.started ? this.#pointer.pointerType : this.#keyboard ? "keyboard" : null;
     this.#teardownSessions();
     for (const handle of this.#handles()) this.#restoreHandle(handle);
+    this.#tabindex.returnAll();
     if (interrupted) this.#followReset();
     if (interrupted && this.element.isConnected) this.#dispatchCancel(interrupted);
   }
@@ -530,14 +765,13 @@ 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 });
   }
   #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);
   }
   #restoreHandle(handle) {
     if (handle.hasAttribute(_PointerDragController.#TOUCH_ACTION_MARKER)) {
@@ -546,15 +780,7 @@ 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(