stimeo-ui 0.17.0 → 0.18.0

package/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(