stimeo-ui 0.17.0 → 0.18.0

package/dist/controllers/carousel_controller.js

@@ -37,17 +37,31 @@ 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;
+}
+
+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 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;
+  const registry2 = create();
+  Object.defineProperty(globalThis, symbol, { value: registry2 });
+  return registry2;
 }
 
+var registry = sharedRegistry(
+  "stimeo-ui.attribute-lease.registry.v1",
+  () => ({ stacks: /* @__PURE__ */ new WeakMap(), names: /* @__PURE__ */ new Map() })
+);
 function isAttributeValue(value) {
   return value === null || typeof value === "string";
 }
@@ -64,24 +78,46 @@ function readLeaseRecord(element, record) {
     return void 0;
   }
 }
-var AttributeLease = class _AttributeLease {
-  static #registry = sharedRegistry(
-    "stimeo-ui.attribute-lease.registry.v1",
-    () => ({ stacks: /* @__PURE__ */ new WeakMap(), names: /* @__PURE__ */ new Map() })
-  );
+function attributeStack(element, attribute) {
+  const byAttribute = registry.stacks.get(element) ?? /* @__PURE__ */ new Map();
+  registry.stacks.set(element, byAttribute);
+  const known = byAttribute.get(attribute);
+  if (known) return known;
+  const found = [];
+  for (const record of registry.names.get(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;
+  const stack = found.sort((one, other) => depth(one) - depth(other)).map(({ record, written, original, linked }, index) => ({
+    lease: null,
+    record,
+    written,
+    original,
+    linked: linked && index > 0
+  }));
+  byAttribute.set(attribute, stack);
+  return stack;
+}
+function findHold(stack, lease, record) {
+  return stack.find((held) => held.lease === lease) ?? stack.find((held) => held.lease === null && held.record === record);
+}
+var AttributeLease = class {
   #attribute;
   #record;
   #base;
+  #preserveAuthor;
   #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;
+    this.#preserveAuthor = options.preserveAuthor === true;
+    const names = registry.names;
     names.set(attribute, (names.get(attribute) ?? /* @__PURE__ */ new Set()).add(this.#record));
   }
   write(element, value) {
-    const stack = this.#stack(element);
+    const stack = attributeStack(element, this.#attribute);
     const hold = this.#take(stack) ?? this.#acquire(element, stack);
     this.#held.add(element);
     const shows = !this.#covered(element, stack, hold);
@@ -91,8 +127,8 @@ var AttributeLease = class _AttributeLease {
   }
   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 known = registry.stacks.get(element)?.has(this.#attribute);
+    const stack = held || known || element.hasAttribute(this.#record) ? attributeStack(element, this.#attribute) : [];
     const hold = this.#take(stack);
     if (!hold) return false;
     const carries = element.getAttribute(this.#attribute) === hold.written;
@@ -110,31 +146,8 @@ var AttributeLease = class _AttributeLease {
   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);
+    const hold = findHold(stack, this, this.#record);
     if (hold) hold.lease = this;
     return hold;
   }
@@ -143,7 +156,7 @@ var AttributeLease = class _AttributeLease {
     const top = stack.at(-1);
     const bottom = stack[0];
     const over = top?.written === current ? top : void 0;
-    const from = this.#base ? bottom : over;
+    const from = this.#base ? this.#preserveAuthor && !stack.some((held) => held.written === current) ? void 0 : bottom : over;
     const hold = {
       lease: this,
       record: this.#record,
@@ -173,15 +186,11 @@ var AttributeLease = class _AttributeLease {
       );
     });
     for (const [name, recorded] of records) {
-      if (element.getAttribute(name) === recorded) continue;
-      if (recorded === null) element.removeAttribute(name);
-      else element.setAttribute(name, recorded);
+      setAttributeIfChanged(element, name, recorded);
     }
   }
   #reflect(element, value) {
-    if (element.getAttribute(this.#attribute) === value) return;
-    if (value === null) element.removeAttribute(this.#attribute);
-    else element.setAttribute(this.#attribute, value);
+    setAttributeIfChanged(element, this.#attribute, value);
   }
 };
 
@@ -238,6 +247,48 @@ var ListenerSet = class {
   }
 };
 
+var HoverRecheck = class {
+  #document;
+  #release;
+  #listeners = new ListenerSet();
+  #pending = /* @__PURE__ */ new Set();
+  #tickets = /* @__PURE__ */ new WeakMap();
+  constructor(document2, release) {
+    this.#document = document2;
+    this.#release = release;
+  }
+  wait(element) {
+    this.#pending.add(element);
+    this.#tickets.set(element, /* @__PURE__ */ Symbol());
+    this.#listeners.add(this.#document, "pointermove", this.#onPointerMove, {
+      capture: true,
+      passive: true
+    });
+  }
+  cancel(element) {
+    this.#tickets.delete(element);
+    this.#pending.delete(element);
+    if (this.#pending.size === 0) this.#listeners.dispose();
+  }
+  dispose() {
+    this.#listeners.dispose();
+    this.#pending.clear();
+    this.#tickets = /* @__PURE__ */ new WeakMap();
+  }
+  #onPointerMove = () => {
+    this.#listeners.dispose();
+    const waiting = [...this.#pending].map(
+      (element) => [element, this.#tickets.get(element)]
+    );
+    this.#pending.clear();
+    for (const [element, ticket] of waiting) {
+      if (this.#tickets.get(element) !== ticket) continue;
+      if (element.matches(":hover")) continue;
+      this.#release(element);
+    }
+  };
+};
+
 var MicrotaskCoalescer = class {
   #run;
   #queued = false;
@@ -254,6 +305,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;
@@ -284,6 +338,9 @@ var MorphRenderWatcher = class {
   schedule() {
     this.#pass.schedule();
   }
+  get pending() {
+    return this.#pass.pending;
+  }
   disconnect() {
     this.#listeners.dispose();
     this.#pass.cancel();
@@ -451,9 +508,8 @@ var StateRegions = class _StateRegions {
         const below = hold.linked ? stack[index - 1] : void 0;
         if (below) {
           if (region.hidden !== below.written) region.hidden = below.written;
-        } else if (region.getAttribute("hidden") !== hold.authored) {
-          if (hold.authored === null) region.removeAttribute("hidden");
-          else region.setAttribute("hidden", hold.authored);
+        } else {
+          setAttributeIfChanged(region, "hidden", hold.authored);
         }
       }
       this.#mark(region, stack);
@@ -528,9 +584,7 @@ var StateRegions = class _StateRegions {
       );
     });
     for (const [name, recorded] of records) {
-      if (region.getAttribute(name) === recorded) continue;
-      if (recorded === null) region.removeAttribute(name);
-      else region.setAttribute(name, recorded);
+      setAttributeIfChanged(region, name, recorded);
     }
   }
   #recorded(region, name) {
@@ -567,6 +621,7 @@ var CarouselController = class _CarouselController extends Controller {
     "prev",
     "next",
     "picker",
+    "pickerList",
     "playToggle",
     "onLabel",
     "offLabel"
@@ -604,7 +659,10 @@ var CarouselController = class _CarouselController extends Controller {
     this.identifier
   );
   #gate = new DetachGate();
-  #pointer = new ListenerSet();
+  #pointer = new HoverRecheck(this.element.ownerDocument, () => {
+    this.#pointerPaused = false;
+    this.#syncTimer();
+  });
   #handledEvents = /* @__PURE__ */ new WeakSet();
   #connected = false;
   #index = 0;
@@ -621,11 +679,12 @@ var CarouselController = class _CarouselController extends Controller {
     this.#hiddenPaused = document.visibilityState === "hidden";
     this.#syncTimer();
   };
+  #listeners = new ListenerSet();
   connect() {
     const moved = this.#gate.pending;
     this.#gate.cancel();
     this.#pointerPaused = moved && this.#pointerPaused || this.element.matches(":hover");
-    if (this.#pointerPaused) this.#awaitPointer();
+    if (this.#pointerPaused) this.#pointer.wait(this.element);
     this.#focusPaused = this.element.contains(document.activeElement);
     this.#hiddenPaused = document.visibilityState === "hidden";
     this.#motionHold = prefersReducedMotion();
@@ -635,13 +694,13 @@ var CarouselController = class _CarouselController extends Controller {
     this.#syncTimer();
     this.#connected = true;
     this.#reconcileTargets.observe(this.element);
-    this.element.addEventListener("click", this.#onClick);
-    this.element.addEventListener("keydown", this.#onKeydown);
-    this.element.addEventListener("focusin", this.#onFocusin);
-    this.element.addEventListener("focusout", this.#onFocusout);
-    this.element.addEventListener("mouseenter", this.#onMouseenter);
-    this.element.addEventListener("mouseleave", this.#onMouseleave);
-    document.addEventListener("visibilitychange", this.#onVisibilityChange);
+    this.#listeners.add(this.element, "click", this.#onClick);
+    this.#listeners.add(this.element, "keydown", this.#onKeydown);
+    this.#listeners.add(this.element, "focusin", this.#onFocusin);
+    this.#listeners.add(this.element, "focusout", this.#onFocusout);
+    this.#listeners.add(this.element, "mouseenter", this.#onMouseenter);
+    this.#listeners.add(this.element, "mouseleave", this.#onMouseleave);
+    this.#listeners.add(document, "visibilitychange", this.#onVisibilityChange);
     this.#observer = new MutationObserver(this.#onAttributeMutations);
     this.#observer.observe(this.element, {
       subtree: true,
@@ -652,13 +711,7 @@ var CarouselController = class _CarouselController extends Controller {
   disconnect() {
     this.#connected = false;
     this.#pointer.dispose();
-    this.element.removeEventListener("click", this.#onClick);
-    this.element.removeEventListener("keydown", this.#onKeydown);
-    this.element.removeEventListener("focusin", this.#onFocusin);
-    this.element.removeEventListener("focusout", this.#onFocusout);
-    this.element.removeEventListener("mouseenter", this.#onMouseenter);
-    this.element.removeEventListener("mouseleave", this.#onMouseleave);
-    document.removeEventListener("visibilitychange", this.#onVisibilityChange);
+    this.#listeners.dispose();
     this.#observer?.disconnect();
     this.#observer = null;
     this.#reconcileTargets.disconnect();
@@ -803,18 +856,6 @@ var CarouselController = class _CarouselController extends Controller {
     this.#setPointerPaused(false);
     this.#syncTimer();
   });
-  #onPointerMove = () => {
-    this.#pointer.dispose();
-    if (this.element.matches(":hover")) return;
-    this.#pointerPaused = false;
-    this.#syncTimer();
-  };
-  #awaitPointer() {
-    this.#pointer.add(document, "pointermove", this.#onPointerMove, {
-      capture: true,
-      passive: true
-    });
-  }
   #setPointerPaused(paused) {
     this.#pointer.dispose();
     this.#pointerPaused = paused;
@@ -853,17 +894,20 @@ var CarouselController = class _CarouselController extends Controller {
       case "ArrowLeft":
       case "ArrowUp": {
         event.preventDefault();
-        const step = logicalArrowStep(event.key, this.element);
+        const step = logicalArrowStep(
+          event.key,
+          this.hasPickerListTarget ? this.pickerListTarget : this.element
+        );
         this.#roving.setActive(rovingMove(current, length, step), { focus: true });
         return;
       }
       case "Home":
-        if (hasModifier(event)) return;
+        if (hasModifierChord(event)) return;
         event.preventDefault();
         this.#roving.setActive(0, { focus: true });
         return;
       case "End":
-        if (hasModifier(event)) return;
+        if (hasModifierChord(event)) return;
         event.preventDefault();
         this.#roving.setActive(length - 1, { focus: true });
         return;
@@ -1019,15 +1063,9 @@ var CarouselController = class _CarouselController extends Controller {
 function isFocusEvent(event) {
   return event?.type.startsWith("focus") === true;
 }
-function hasModifier(event) {
-  return event.altKey || event.ctrlKey || event.metaKey || event.shiftKey;
-}
 function hits(elements, node) {
   return ownerIndex(elements, node) !== -1;
 }
-function setAttributeIfChanged(element, name, value) {
-  if (element.getAttribute(name) !== value) element.setAttribute(name, value);
-}
 
 export { CarouselController };
 //# sourceMappingURL=carousel_controller.js.map