interestfor 1.0.12 → 1.0.13

package/README.md

@@ -140,7 +140,7 @@ browsers:
 
 
 ## Implementation
-The polyfill adds event listeners to document.body that monitor for hover
+The polyfill adds event listeners to the document that monitor for hover
 or keyboard events relevant for the `interestfor` API. When interesting
 events happen to elements with the `interestfor` attribute or elements that
 are the targets of those elements, it fires `interest` and `loseinterest`

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "interestfor",
-  "version": "1.0.12",
+  "version": "1.0.13",
   "description": "A polyfill for the `interestfor` API",
   "keywords": "interestfor, interesttarget, polyfill, hover-triggering",
   "homepage": "https://github.com/mfreed7/interestfor#readme",

package/src/interestfor.js

@@ -52,10 +52,10 @@
         e.stopImmediatePropagation();
       }
     };
-    document.body.addEventListener(interestEventName, cancel, {
+    document.addEventListener(interestEventName, cancel, {
       capture: true,
     });
-    document.body.addEventListener(loseInterestEventName, cancel, {
+    document.addEventListener(loseInterestEventName, cancel, {
       capture: true,
     });
   }
@@ -989,13 +989,13 @@
         touchInProgress = false;
       }
     };
-    document.body.addEventListener("pointerover", clearTouch);
-    document.body.addEventListener("pointerdown", clearTouch);
-    document.body.addEventListener("mouseover", (e) => handler(e, Source.Hover));
-    document.body.addEventListener("mouseout", (e) => handler(e, Source.DeHover));
-    document.body.addEventListener("focusin", (e) => handler(e, Source.Focus));
-    document.body.addEventListener("focusout", (e) => handler(e, Source.Blur));
-    document.body.addEventListener("keydown", (e) => {
+    document.addEventListener("pointerover", clearTouch);
+    document.addEventListener("pointerdown", clearTouch);
+    document.addEventListener("mouseover", (e) => handler(e, Source.Hover));
+    document.addEventListener("mouseout", (e) => handler(e, Source.DeHover));
+    document.addEventListener("focusin", (e) => handler(e, Source.Focus));
+    document.addEventListener("focusout", (e) => handler(e, Source.Blur));
+    document.addEventListener("keydown", (e) => {
       touchInProgress = false;
       if (e.key === "Escape" && !e.defaultPrevented) {
         // Lose interest in all invokers, most recent first. These
@@ -1010,31 +1010,46 @@
         });
       }
     });
+
+    // WebKit (iOS) long-press workarounds:
+    // 1. On Android, holding for ~500ms fires `pointercancel` and `touchcancel`,
+    //    so the popover can open immediately when `longPressTimer` fires while
+    //    the finger is still down. On iOS WebKit, holding a button with
+    //    `user-select: none` does not cancel the touch stream; when the finger
+    //    is later lifted, iOS fires `pointerup` (which triggers WebKit's native
+    //    popover light-dismiss because the popover was not open at
+    //    `pointerdown`) followed by `touchend` and synthesized mouse/`click`
+    //    events. On iOS only, record that the 500ms hold succeeded
+    //    (`longPressActive`), and on `touchend` (which fires after `pointerup`),
+    //    call `preventDefault()` to suppress the synthesized `click` and open
+    //    the popover then.
+    // 2. Unlike Android (which applies a native touch slop before firing
+    //    `touchmove`), iOS WebKit dispatches `touchmove` on tiny finger jitter
+    //    during a stationary hold. On iOS only, ignore `touchmove` events within
+    //    10px of `touchstart` (matching UIKit's default `allowableMovement` on
+    //    `UILongPressGestureRecognizer`).
+    const longPressMoveSlop = 10;
+    const isIOS = () => /iPad|iPhone|iPod/.test(navigator.userAgent);
+    
+    
     // Touch support
     const longPressTime = 500;
-    // WebKit (iOS) long-press workaround:
-    // On Android, holding for ~500ms fires `pointercancel` and `touchcancel`,
-    // so the popover can open immediately when `longPressTimer` fires while the
-    // finger is still down. On iOS WebKit, holding a button with
-    // `user-select: none` does not cancel the touch stream; when the finger is
-    // later lifted, iOS fires `pointerup` (which triggers WebKit's native
-    // popover light-dismiss because the popover was not open at `pointerdown`)
-    // followed by `touchend` and synthesized mouse/`click` events.
-    // On iOS only, record that the 500ms hold succeeded (`longPressActive`),
-    // and on `touchend` (which fires after `pointerup`), call `preventDefault()`
-    // to suppress the synthesized `click` and open the popover then.
-    const isIOS = /iPad|iPhone|iPod/.test(navigator.userAgent);
-    document.body.addEventListener("touchstart", (e) => {
+    document.addEventListener("touchstart", (e) => {
       touchInProgress = true;
       const invoker = e.target.closest("button[interestfor]");
       if (invoker) {
         initializeDataField(invoker);
+        const ios = isIOS();
+        if (ios && e.touches?.length === 1) {
+          invoker[dataField].touchStartX = e.touches[0].clientX;
+          invoker[dataField].touchStartY = e.touches[0].clientY;
+        }
         invoker[dataField].longPressActive = false;
         invoker[dataField].longPressTimer = setTimeout(() => {
           // Long-press shows interest immediately, and that interest is not
           // lost by de-hovering or blurring the invoker.
           if (invoker[dataField].state === InterestState.NoInterest) {
-            if (isIOS) {
+            if (ios) {
               invoker[dataField].longPressActive = true;
             } else {
               GainOrLoseInterest(
@@ -1051,13 +1066,20 @@
     const cancelLongPress = (e) => {
       const invoker = e.target.closest("button[interestfor]");
       if (invoker && invoker[dataField]) {
+        if (isIOS() && e.type === "touchmove" && e.touches?.length === 1) {
+          const dx = e.touches[0].clientX - invoker[dataField].touchStartX;
+          const dy = e.touches[0].clientY - invoker[dataField].touchStartY;
+          if (Math.hypot(dx, dy) <= longPressMoveSlop) {
+            return;
+          }
+        }
         clearTimeout(invoker[dataField].longPressTimer);
         invoker[dataField].longPressTimer = null;
         invoker[dataField].longPressActive = false;
       }
     };
-    document.body.addEventListener("touchmove", cancelLongPress);
-    document.body.addEventListener(
+    document.addEventListener("touchmove", cancelLongPress);
+    document.addEventListener(
       "touchend",
       (e) => {
         const invoker = e.target.closest("button[interestfor]");

package/src/interestfor.min.js

@@ -5,4 +5,4 @@
 // LICENSE file in the root directory of this source tree.
 
 
-!function(){const e="interestfor",t="interest",n="loseinterest",r="--interest-delay-start",o="--interest-delay-end",s="--interest-delay",i="--interest-button-content",a="--interest-button-polyfill-content",l="interest-button",c="__interestForData",u="__interestForTargetData",d="__interestForButton",f="__interestForButtonInvoker",m="__interestForExplicitTarget",p="http://www.w3.org/1999/xlink",h=new Set,b=new Set,g=new Set;let y=!1;if(window.interestForPolyfillInstalled)return;window.interestForPolyfillInstalled=!0;const E=HTMLButtonElement.prototype.hasOwnProperty("interestForElement");if(E&&!window.interestForUsePolyfillAlways)return;if(E){const e=e=>{e.isTrusted&&(e.preventDefault(),e.stopImmediatePropagation())};document.body.addEventListener(t,e,{capture:!0}),document.body.addEventListener(n,e,{capture:!0})}window.InterestEvent&&!window.interestForUsePolyfillAlways||(window.InterestEvent=class extends Event{#e;constructor(e,t={}){super(e,t);const{source:n}=t;if(null!=n&&!(n instanceof Element))throw new TypeError("source must be an element");this.#e=n}get[Symbol.toStringTag](){return"InterestEvent"}get source(){const e=this.#e;if(!e)return null;const t=P(e);return t!==P(this.target||document)?t.host:e}});const w="none",v="full",T="explicit",A="hover",L="dehover",N="focus",x="blur";function P(e){return e&&"function"==typeof e.getRootNode?e.getRootNode():e&&e.parentNode?P(e.parentNode):e}function k(e,r,o,s={}){if(!e||!r)return!1;if(!e.isConnected||I(e)!==r||o===w&&F(r)!==e)return!1;if(o!==w){z(e),e[c].state!==w&&e[c].target!==r&&D(e);const n=F(r);if(n){if(n===e)return o===T&&(n[c].state=T),n[c].clearLostTask(),!1;if(!k(n,r,w))return!1;if(!e.isConnected||I(e)!==r)return!1}return function(e,n,r){const o=e[c];switch(r){case v:case T:if(o.state!==w)throw new Error("Invalid state");if(!n.dispatchEvent(new InterestEvent(t,{source:e,cancelable:!0})))return!1;if(o.state=r,o.target=n,o.clearGainedTask(),n[u]||(n[u]={}),n[u].invoker=e,n.hasAttribute("popover")&&(n.addEventListener("beforetoggle",_),n[u].shownByInterest=!1,!$(n))){try{n.showPopover({source:e})}catch{}n[u].shownByInterest=$(n)}if(h.add(e),e.classList.add("interest-source"),n.classList.add("interest-target"),H(n)||e.setAttribute("aria-expanded","true"),"none"===getComputedStyle(e).anchorName&&"auto"===getComputedStyle(n).positionAnchor){const t=`--interest-anchor-${Math.random().toString(36).substring(2)}`;e.style.anchorName=t,n.style.positionAnchor=t,o.anchorName=t}break;default:throw new Error("Invalid state")}return!0}(e,r,o)}return function(e,{force:t=!1,closePopovers:r=!0}={}){const o=e[c];if(clearTimeout(o.gainedTimer),clearTimeout(o.lostTimer),o.state===w)return!0;const s=o.target,i=s.dispatchEvent(new InterestEvent(n,{source:e,cancelable:!t}));if(!i)return!1;const a=s[u],l=r&&a?.invoker===e&&a.shownByInterest;D(e),l&&$(s)&&function(e,t){const n=e[c],r=t.contains(document.activeElement);r&&(n.suppressNextFocusInterest=!0);try{t.hidePopover()}catch{}r&&(n.suppressNextFocusInterest=!1)}(e,s);return!0}(e,s)}function S(e){const t=1e3*O(e,o);if(!M(t))return;const n=e[c];n.clearLostTask();const r=n.target;n.lostTimer=setTimeout(()=>{k(e,r,w)},t)}function F(e){const t=e[u]?.invoker||null;if(!t)return null;const n=t[c];return n&&n.state!==w&&n.target===e&&I(t)===e?t:null}function I(t){if(!t.hasAttribute(e)||!t.isConnected||!function(e){if(e instanceof HTMLButtonElement)return!e.matches(":disabled");if(e instanceof HTMLAnchorElement||e instanceof HTMLAreaElement)return e.hasAttribute("href");if(window.SVGAElement&&e instanceof SVGAElement)return e.hasAttribute("href")||e.hasAttributeNS(p,"href");return!1}(t))return null;const n=C(t);return n&&n.isConnected?n:null}function C(t){const n=t.getAttribute(e);if(null===n)return null;const r=t[m];if(r&&""===n)return function(e,t){const n=P(e);let r=P(t);for(;r;){if(r===n)return!0;r=r instanceof ShadowRoot?P(r.host):null}return!1}(r,t)?r:null;if(""===n)return null;const o=P(t);return"function"==typeof o.getElementById?o.getElementById(n):null}function $(e){try{return e.matches(":popover-open")}catch{return!1}}function _(e){if("closed"!==e.newState)return;const t=e.currentTarget,n=F(t);if(n){if(t.contains(document.activeElement)){const e=n[c];e.suppressNextFocusInterest=!0,setTimeout(()=>{e.suppressNextFocusInterest=!1},0)}k(n,t,w,{closePopovers:!1})}}function M(e){return e>=0&&e<=2147483647}function B(e){const t=String(e).trim(),n=t.match(/^([\d.]+(?:e[+-]?\d+)?)s$/i);if(n)return parseFloat(n[1]);const r=t.match(/^([\d.]+(?:e[+-]?\d+)?)ms$/i);return r?parseFloat(r[1])/1e3:/\b(infinity|nan)\b/i.test(t)?1/0:parseFloat(t)||0}function O(e,t){const n=getComputedStyle(e),o=n.getPropertyValue(t).trim();if("normal"!==o.toLowerCase())return B(o);const i=n.getPropertyValue(s).trim();if(i&&"normal"!==i.toLowerCase()){const e=i.split(/\s+/).filter(e=>e.length>0);if(e.length>0){const n=e[0],o=e.length>1?e[1]:n;let s;if(s=t===r?n:o,"normal"!==s.toLowerCase())return B(s)}}return t===r?.25:.15}function D(e){const t=e[c];if(!t)return;if(clearTimeout(t.gainedTimer),clearTimeout(t.lostTimer),t.state===w)return;const n=t.target;h.delete(e),e.classList.remove("interest-source"),n&&(n[u]?.invoker===e&&(n.removeEventListener("beforetoggle",_),n[u]=null,n.classList.remove("interest-target")),H(n)||e.setAttribute("aria-expanded","false")),t.anchorName&&(e.style.anchorName="",n&&(n.style.positionAnchor=""),t.anchorName=null),t.state=w,t.target=null}const V=["a[href]","area[href]","input:not([disabled])","select:not([disabled])","textarea:not([disabled])","button:not([disabled])","iframe","object","embed","[contenteditable]",'[tabindex]:not([tabindex="-1"])'].join(",");function H(e){if("hint"!==e.getAttribute("popover")?.toLowerCase())return!1;if(e.querySelector(V))return!1;if(e.querySelector("h1,h2,h3,h4,h5,h6,ul,ol,li,table,nav,header,footer,main,aside,article,section,form,blockquote,details,summary,dialog"))return!1;const t=e.querySelectorAll("[role]");for(const e of t){const t=e.getAttribute("role").toLowerCase();if(!["presentation","none","generic","image"].includes(t))return!1}return!0}function G(e){return e?e.replace(/\s+/g," ").trim():""}function j(e,t=!1){if(e.nodeType===Node.TEXT_NODE)return e.data;if(e.nodeType!==Node.ELEMENT_NODE)return"";if(!t&&(e.hasAttribute("hidden")||"true"===e.getAttribute("aria-hidden")||"script"===e.localName||"style"===e.localName))return"";const n=e.getAttribute("aria-label");if(n)return n;if("img"===e.localName||"area"===e.localName)return e.getAttribute("alt")||"";let r="";for(const t of e.childNodes)r+=j(t);return r}function q(e,t){if(t.id)if(H(t)){if((e.getAttribute("aria-labelledby")||"").trim().split(/\s+/).includes(t.id))return;const n=function(e){const t=e.getAttribute("aria-labelledby");if(t){const n=P(e);if("function"==typeof n.getElementById){const e=[];for(const r of t.trim().split(/\s+/)){const t=r?n.getElementById(r):null;t&&e.push(G(j(t,!0)))}const r=G(e.join(" "));if(r)return r}}const n=G(e.getAttribute("aria-label"));if(n)return n;if(e.labels?.length){const t=G([...e.labels].map(e=>j(e,!0)).join(" "));if(t)return t}return G(j(e,!0))||G(e.getAttribute("title"))}(e),r=G(j(t,!0));n?r&&r!==n&&!e.hasAttribute("aria-describedby")&&e.setAttribute("aria-describedby",t.id):r&&e.setAttribute("aria-labelledby",t.id)}else e.hasAttribute("aria-details")||e.setAttribute("aria-details",t.id),e.setAttribute("aria-expanded","false"),t.hasAttribute("role")||t.setAttribute("role","tooltip")}function z(e){e[c]||(e[c]={state:w,target:null,a11yTarget:null,gainedTimer:null,lostTimer:null,longPressTimer:null,suppressNextFocusInterest:!1,clearGainedTask(){clearTimeout(this.gainedTimer)},clearLostTask(){clearTimeout(this.lostTimer)}});const t=I(e);t&&e[c].a11yTarget!==t&&(e[c].a11yTarget=t,q(e,t))}function R(e){if(e[f])return e[f];if(e.assignedSlot)return e.assignedSlot;if(e.parentElement)return e.parentElement;const t=e.parentNode;return t instanceof ShadowRoot?t.host:null}function U(e){const t=new Set;if(0===h.size)return t;const n=e=>{const r=F(e);r&&!t.has(r)&&(t.add(r),n(r));const o=R(e);o&&!t.has(o)&&n(o)};return n(e),t}function X(e,t){if(y)return;if(!e.isConnected)return;const n=I(e);n&&z(e);const o=e[c];if(t===A||t===N){let s=!1;o&&(o.clearLostTask(),s=t===N&&o.suppressNextFocusInterest,o.suppressNextFocusInterest=!1);for(const t of U(e))t[c].clearLostTask();n&&!s&&o.state===w&&function(e,t){const n=I(e);if(!n)return;const o=1e3*O(e,r);M(o)&&(e[c].clearGainedTask(),e[c].gainedTimer=setTimeout(()=>{k(e,n,t)},o))}(e,v)}else if(o&&(o.clearGainedTask(),o.state===v&&S(e)),t===x||!e.matches(":hover"))for(const t of U(e))S(t)}function J(e){return e instanceof HTMLElement&&"area"!==e.localName&&!!e.parentNode&&!!I(e)}function K(e){const t=getComputedStyle(e).getPropertyValue(i).trim();return t&&"none"!==t&&"normal"!==t?t:null}function Q(){const e=this[f];e&&k(e,I(e),T)}function W(e,t){let n=e[d];t?(n||(n=e.ownerDocument.createElement("span"),n.className=l,n.setAttribute("aria-hidden","true"),n[f]=e,n.addEventListener("click",Q),e[d]=n,b.add(e)),n.style.getPropertyValue(a)!==t&&n.style.setProperty(a,t),e.nextSibling!==n&&e.after(n)):n&&(n.remove(),e[d]=null,b.delete(e))}function Y(t){const n=[];for(const r of t){let t=null;const o=I(r);o?(g.delete(r),J(r)&&(t=K(r))):r.isConnected&&r.hasAttribute(e)?g.add(r):g.delete(r),n.push([r,o,t])}for(const[e,t,r]of n)t&&z(e),W(e,r)}function Z(t){const n=new Set;let r=!1;const o=t=>{if(t.nodeType===Node.ELEMENT_NODE&&!t[f]){t.hasAttribute(e)&&n.add(t);for(const r of t.querySelectorAll(`[${e}]`))n.add(r)}};for(const s of t){if("childList"===s.type){for(const e of s.addedNodes)e.nodeType!==Node.ELEMENT_NODE||e[f]||(r=!0,o(e));continue}const t=s.target;switch(s.attributeName){case e:null!==s.oldValue&&D(t),""!==t.getAttribute(e)&&(t[m]=null),n.add(t);break;case"id":r=!0;break;default:o(t)}}for(const e of[...h]){const t=e[c].target;e.isConnected&&t&&t.isConnected||D(e)}if(r)for(const e of g)n.add(e);for(const e of[...b])n.has(e)||(J(e)?e.nextSibling!==e[d]&&e.after(e[d]):W(e,null));Y(n)}function ee(){!function(){const t=document.createElement("style");t.textContent=`@property ${r} {syntax: "normal | <time>"; inherits: false; initial-value: normal;}\n      @property ${o} {syntax: "normal | <time>"; inherits: false; initial-value: normal;}\n      @property ${s} {syntax: "*"; inherits: false;}\n      @property ${i} {syntax: "*"; inherits: false;}`,document.head.appendChild(t);const n=`span.${l}[aria-hidden]`,u=document.createElement("style");u.textContent=`:where(button[${e}]) {\n        -webkit-user-select: none;\n        user-select: none;\n      }\n      :where(${n}) {\n        display: inline-block;\n        vertical-align: middle;\n        color: inherit;\n        background-color: transparent;\n        box-sizing: border-box;\n        min-inline-size: 24px;\n        min-block-size: 24px;\n        min-block-size: max(24px, 1lh);\n        align-content: center;\n        text-align: center;\n        -webkit-user-select: none;\n        user-select: none;\n        cursor: help;\n      }\n      :where(${n}:hover) {\n        background-color: color-mix(in oklab, currentColor 10%, transparent);\n      }\n      :where(${n}:active) {\n        background-color: color-mix(in oklab, currentColor 20%, transparent);\n      }\n      :where(${n})::before {\n        content: var(${a});\n      }`,document.head.prepend(u),document[c]={globalPropsStyle:t,uaStyle:u}}(),function(){const e=(e,t)=>{const n=e.composedPath(),r=n.length?n[0]:e.target;if(r instanceof Element)for(let e=r;e;e=R(e))X(e,t)},t=e=>{"touch"!==e.pointerType&&(y=!1)};document.body.addEventListener("pointerover",t),document.body.addEventListener("pointerdown",t),document.body.addEventListener("mouseover",t=>e(t,A)),document.body.addEventListener("mouseout",t=>e(t,L)),document.body.addEventListener("focusin",t=>e(t,N)),document.body.addEventListener("focusout",t=>e(t,x)),document.body.addEventListener("keydown",e=>{y=!1,"Escape"!==e.key||e.defaultPrevented||[...h].reverse().forEach(e=>{k(e,e[c].target,w,{force:!0})})});const n=/iPad|iPhone|iPod/.test(navigator.userAgent);document.body.addEventListener("touchstart",e=>{y=!0;const t=e.target.closest("button[interestfor]");t&&(z(t),t[c].longPressActive=!1,t[c].longPressTimer=setTimeout(()=>{t[c].state===w&&(n?t[c].longPressActive=!0:k(t,I(t),T)),t[c].longPressTimer=null},500))});const r=e=>{const t=e.target.closest("button[interestfor]");t&&t[c]&&(clearTimeout(t[c].longPressTimer),t[c].longPressTimer=null,t[c].longPressActive=!1)};document.body.addEventListener("touchmove",r),document.body.addEventListener("touchend",e=>{const t=e.target.closest("button[interestfor]"),n=t?.[c]?.longPressActive;r(e),n&&(e.cancelable&&e.preventDefault(),t[c].state===w&&k(t,I(t),T))},{passive:!1})}(),new MutationObserver(Z).observe(document,{childList:!0,subtree:!0,attributes:!0,attributeOldValue:!0,attributeFilter:[e,"id","href","disabled"]}),Y(document.querySelectorAll(`[${e}]`)),console.log(`interestfor polyfill installed (native: ${E}).`)}!function(){const t={configurable:!0,enumerable:!0,get(){return C(this)},set(t){if(null==t)this[m]=null,this.removeAttribute(e);else{if(!(t instanceof Element))throw new TypeError("Failed to set the 'interestForElement' property: The provided value is not of type 'Element'.");this[m]=t,this.setAttribute(e,"")}}};[window.HTMLButtonElement,window.HTMLAnchorElement,window.HTMLAreaElement,window.SVGAElement].forEach(e=>{!e||Object.prototype.hasOwnProperty.call(e.prototype,"interestForElement")&&!window.interestForUsePolyfillAlways||Object.defineProperty(e.prototype,"interestForElement",t)})}(),"complete"===document.readyState?ee():window.addEventListener("load",ee)}();
+!function(){const e="interestfor",t="interest",n="loseinterest",r="--interest-delay-start",o="--interest-delay-end",s="--interest-delay",i="--interest-button-content",a="--interest-button-polyfill-content",l="interest-button",c="__interestForData",u="__interestForTargetData",d="__interestForButton",f="__interestForButtonInvoker",m="__interestForExplicitTarget",h="http://www.w3.org/1999/xlink",p=new Set,b=new Set,g=new Set;let y=!1;if(window.interestForPolyfillInstalled)return;window.interestForPolyfillInstalled=!0;const E=HTMLButtonElement.prototype.hasOwnProperty("interestForElement");if(E&&!window.interestForUsePolyfillAlways)return;if(E){const e=e=>{e.isTrusted&&(e.preventDefault(),e.stopImmediatePropagation())};document.addEventListener(t,e,{capture:!0}),document.addEventListener(n,e,{capture:!0})}window.InterestEvent&&!window.interestForUsePolyfillAlways||(window.InterestEvent=class extends Event{#e;constructor(e,t={}){super(e,t);const{source:n}=t;if(null!=n&&!(n instanceof Element))throw new TypeError("source must be an element");this.#e=n}get[Symbol.toStringTag](){return"InterestEvent"}get source(){const e=this.#e;if(!e)return null;const t=x(e);return t!==x(this.target||document)?t.host:e}});const w="none",v="full",T="explicit",A="hover",L="dehover",N="focus",S="blur";function x(e){return e&&"function"==typeof e.getRootNode?e.getRootNode():e&&e.parentNode?x(e.parentNode):e}function P(e,r,o,s={}){if(!e||!r)return!1;if(!e.isConnected||I(e)!==r||o===w&&F(r)!==e)return!1;if(o!==w){z(e),e[c].state!==w&&e[c].target!==r&&D(e);const n=F(r);if(n){if(n===e)return o===T&&(n[c].state=T),n[c].clearLostTask(),!1;if(!P(n,r,w))return!1;if(!e.isConnected||I(e)!==r)return!1}return function(e,n,r){const o=e[c];switch(r){case v:case T:if(o.state!==w)throw new Error("Invalid state");if(!n.dispatchEvent(new InterestEvent(t,{source:e,cancelable:!0})))return!1;if(o.state=r,o.target=n,o.clearGainedTask(),n[u]||(n[u]={}),n[u].invoker=e,n.hasAttribute("popover")&&(n.addEventListener("beforetoggle",M),n[u].shownByInterest=!1,!$(n))){try{n.showPopover({source:e})}catch{}n[u].shownByInterest=$(n)}if(p.add(e),e.classList.add("interest-source"),n.classList.add("interest-target"),H(n)||e.setAttribute("aria-expanded","true"),"none"===getComputedStyle(e).anchorName&&"auto"===getComputedStyle(n).positionAnchor){const t=`--interest-anchor-${Math.random().toString(36).substring(2)}`;e.style.anchorName=t,n.style.positionAnchor=t,o.anchorName=t}break;default:throw new Error("Invalid state")}return!0}(e,r,o)}return function(e,{force:t=!1,closePopovers:r=!0}={}){const o=e[c];if(clearTimeout(o.gainedTimer),clearTimeout(o.lostTimer),o.state===w)return!0;const s=o.target,i=s.dispatchEvent(new InterestEvent(n,{source:e,cancelable:!t}));if(!i)return!1;const a=s[u],l=r&&a?.invoker===e&&a.shownByInterest;D(e),l&&$(s)&&function(e,t){const n=e[c],r=t.contains(document.activeElement);r&&(n.suppressNextFocusInterest=!0);try{t.hidePopover()}catch{}r&&(n.suppressNextFocusInterest=!1)}(e,s);return!0}(e,s)}function k(e){const t=1e3*O(e,o);if(!_(t))return;const n=e[c];n.clearLostTask();const r=n.target;n.lostTimer=setTimeout(()=>{P(e,r,w)},t)}function F(e){const t=e[u]?.invoker||null;if(!t)return null;const n=t[c];return n&&n.state!==w&&n.target===e&&I(t)===e?t:null}function I(t){if(!t.hasAttribute(e)||!t.isConnected||!function(e){if(e instanceof HTMLButtonElement)return!e.matches(":disabled");if(e instanceof HTMLAnchorElement||e instanceof HTMLAreaElement)return e.hasAttribute("href");if(window.SVGAElement&&e instanceof SVGAElement)return e.hasAttribute("href")||e.hasAttributeNS(h,"href");return!1}(t))return null;const n=C(t);return n&&n.isConnected?n:null}function C(t){const n=t.getAttribute(e);if(null===n)return null;const r=t[m];if(r&&""===n)return function(e,t){const n=x(e);let r=x(t);for(;r;){if(r===n)return!0;r=r instanceof ShadowRoot?x(r.host):null}return!1}(r,t)?r:null;if(""===n)return null;const o=x(t);return"function"==typeof o.getElementById?o.getElementById(n):null}function $(e){try{return e.matches(":popover-open")}catch{return!1}}function M(e){if("closed"!==e.newState)return;const t=e.currentTarget,n=F(t);if(n){if(t.contains(document.activeElement)){const e=n[c];e.suppressNextFocusInterest=!0,setTimeout(()=>{e.suppressNextFocusInterest=!1},0)}P(n,t,w,{closePopovers:!1})}}function _(e){return e>=0&&e<=2147483647}function B(e){const t=String(e).trim(),n=t.match(/^([\d.]+(?:e[+-]?\d+)?)s$/i);if(n)return parseFloat(n[1]);const r=t.match(/^([\d.]+(?:e[+-]?\d+)?)ms$/i);return r?parseFloat(r[1])/1e3:/\b(infinity|nan)\b/i.test(t)?1/0:parseFloat(t)||0}function O(e,t){const n=getComputedStyle(e),o=n.getPropertyValue(t).trim();if("normal"!==o.toLowerCase())return B(o);const i=n.getPropertyValue(s).trim();if(i&&"normal"!==i.toLowerCase()){const e=i.split(/\s+/).filter(e=>e.length>0);if(e.length>0){const n=e[0],o=e.length>1?e[1]:n;let s;if(s=t===r?n:o,"normal"!==s.toLowerCase())return B(s)}}return t===r?.25:.15}function D(e){const t=e[c];if(!t)return;if(clearTimeout(t.gainedTimer),clearTimeout(t.lostTimer),t.state===w)return;const n=t.target;p.delete(e),e.classList.remove("interest-source"),n&&(n[u]?.invoker===e&&(n.removeEventListener("beforetoggle",M),n[u]=null,n.classList.remove("interest-target")),H(n)||e.setAttribute("aria-expanded","false")),t.anchorName&&(e.style.anchorName="",n&&(n.style.positionAnchor=""),t.anchorName=null),t.state=w,t.target=null}const V=["a[href]","area[href]","input:not([disabled])","select:not([disabled])","textarea:not([disabled])","button:not([disabled])","iframe","object","embed","[contenteditable]",'[tabindex]:not([tabindex="-1"])'].join(",");function H(e){if("hint"!==e.getAttribute("popover")?.toLowerCase())return!1;if(e.querySelector(V))return!1;if(e.querySelector("h1,h2,h3,h4,h5,h6,ul,ol,li,table,nav,header,footer,main,aside,article,section,form,blockquote,details,summary,dialog"))return!1;const t=e.querySelectorAll("[role]");for(const e of t){const t=e.getAttribute("role").toLowerCase();if(!["presentation","none","generic","image"].includes(t))return!1}return!0}function G(e){return e?e.replace(/\s+/g," ").trim():""}function j(e,t=!1){if(e.nodeType===Node.TEXT_NODE)return e.data;if(e.nodeType!==Node.ELEMENT_NODE)return"";if(!t&&(e.hasAttribute("hidden")||"true"===e.getAttribute("aria-hidden")||"script"===e.localName||"style"===e.localName))return"";const n=e.getAttribute("aria-label");if(n)return n;if("img"===e.localName||"area"===e.localName)return e.getAttribute("alt")||"";let r="";for(const t of e.childNodes)r+=j(t);return r}function q(e,t){if(t.id)if(H(t)){if((e.getAttribute("aria-labelledby")||"").trim().split(/\s+/).includes(t.id))return;const n=function(e){const t=e.getAttribute("aria-labelledby");if(t){const n=x(e);if("function"==typeof n.getElementById){const e=[];for(const r of t.trim().split(/\s+/)){const t=r?n.getElementById(r):null;t&&e.push(G(j(t,!0)))}const r=G(e.join(" "));if(r)return r}}const n=G(e.getAttribute("aria-label"));if(n)return n;if(e.labels?.length){const t=G([...e.labels].map(e=>j(e,!0)).join(" "));if(t)return t}return G(j(e,!0))||G(e.getAttribute("title"))}(e),r=G(j(t,!0));n?r&&r!==n&&!e.hasAttribute("aria-describedby")&&e.setAttribute("aria-describedby",t.id):r&&e.setAttribute("aria-labelledby",t.id)}else e.hasAttribute("aria-details")||e.setAttribute("aria-details",t.id),e.setAttribute("aria-expanded","false"),t.hasAttribute("role")||t.setAttribute("role","tooltip")}function z(e){e[c]||(e[c]={state:w,target:null,a11yTarget:null,gainedTimer:null,lostTimer:null,longPressTimer:null,suppressNextFocusInterest:!1,clearGainedTask(){clearTimeout(this.gainedTimer)},clearLostTask(){clearTimeout(this.lostTimer)}});const t=I(e);t&&e[c].a11yTarget!==t&&(e[c].a11yTarget=t,q(e,t))}function X(e){if(e[f])return e[f];if(e.assignedSlot)return e.assignedSlot;if(e.parentElement)return e.parentElement;const t=e.parentNode;return t instanceof ShadowRoot?t.host:null}function R(e){const t=new Set;if(0===p.size)return t;const n=e=>{const r=F(e);r&&!t.has(r)&&(t.add(r),n(r));const o=X(e);o&&!t.has(o)&&n(o)};return n(e),t}function Y(e,t){if(y)return;if(!e.isConnected)return;const n=I(e);n&&z(e);const o=e[c];if(t===A||t===N){let s=!1;o&&(o.clearLostTask(),s=t===N&&o.suppressNextFocusInterest,o.suppressNextFocusInterest=!1);for(const t of R(e))t[c].clearLostTask();n&&!s&&o.state===w&&function(e,t){const n=I(e);if(!n)return;const o=1e3*O(e,r);_(o)&&(e[c].clearGainedTask(),e[c].gainedTimer=setTimeout(()=>{P(e,n,t)},o))}(e,v)}else if(o&&(o.clearGainedTask(),o.state===v&&k(e)),t===S||!e.matches(":hover"))for(const t of R(e))k(t)}function U(e){return e instanceof HTMLElement&&"area"!==e.localName&&!!e.parentNode&&!!I(e)}function J(e){const t=getComputedStyle(e).getPropertyValue(i).trim();return t&&"none"!==t&&"normal"!==t?t:null}function K(){const e=this[f];e&&P(e,I(e),T)}function Q(e,t){let n=e[d];t?(n||(n=e.ownerDocument.createElement("span"),n.className=l,n.setAttribute("aria-hidden","true"),n[f]=e,n.addEventListener("click",K),e[d]=n,b.add(e)),n.style.getPropertyValue(a)!==t&&n.style.setProperty(a,t),e.nextSibling!==n&&e.after(n)):n&&(n.remove(),e[d]=null,b.delete(e))}function W(t){const n=[];for(const r of t){let t=null;const o=I(r);o?(g.delete(r),U(r)&&(t=J(r))):r.isConnected&&r.hasAttribute(e)?g.add(r):g.delete(r),n.push([r,o,t])}for(const[e,t,r]of n)t&&z(e),Q(e,r)}function Z(t){const n=new Set;let r=!1;const o=t=>{if(t.nodeType===Node.ELEMENT_NODE&&!t[f]){t.hasAttribute(e)&&n.add(t);for(const r of t.querySelectorAll(`[${e}]`))n.add(r)}};for(const s of t){if("childList"===s.type){for(const e of s.addedNodes)e.nodeType!==Node.ELEMENT_NODE||e[f]||(r=!0,o(e));continue}const t=s.target;switch(s.attributeName){case e:null!==s.oldValue&&D(t),""!==t.getAttribute(e)&&(t[m]=null),n.add(t);break;case"id":r=!0;break;default:o(t)}}for(const e of[...p]){const t=e[c].target;e.isConnected&&t&&t.isConnected||D(e)}if(r)for(const e of g)n.add(e);for(const e of[...b])n.has(e)||(U(e)?e.nextSibling!==e[d]&&e.after(e[d]):Q(e,null));W(n)}function ee(){!function(){const t=document.createElement("style");t.textContent=`@property ${r} {syntax: "normal | <time>"; inherits: false; initial-value: normal;}\n      @property ${o} {syntax: "normal | <time>"; inherits: false; initial-value: normal;}\n      @property ${s} {syntax: "*"; inherits: false;}\n      @property ${i} {syntax: "*"; inherits: false;}`,document.head.appendChild(t);const n=`span.${l}[aria-hidden]`,u=document.createElement("style");u.textContent=`:where(button[${e}]) {\n        -webkit-user-select: none;\n        user-select: none;\n      }\n      :where(${n}) {\n        display: inline-block;\n        vertical-align: middle;\n        color: inherit;\n        background-color: transparent;\n        box-sizing: border-box;\n        min-inline-size: 24px;\n        min-block-size: 24px;\n        min-block-size: max(24px, 1lh);\n        align-content: center;\n        text-align: center;\n        -webkit-user-select: none;\n        user-select: none;\n        cursor: help;\n      }\n      :where(${n}:hover) {\n        background-color: color-mix(in oklab, currentColor 10%, transparent);\n      }\n      :where(${n}:active) {\n        background-color: color-mix(in oklab, currentColor 20%, transparent);\n      }\n      :where(${n})::before {\n        content: var(${a});\n      }`,document.head.prepend(u),document[c]={globalPropsStyle:t,uaStyle:u}}(),function(){const e=(e,t)=>{const n=e.composedPath(),r=n.length?n[0]:e.target;if(r instanceof Element)for(let e=r;e;e=X(e))Y(e,t)},t=e=>{"touch"!==e.pointerType&&(y=!1)};document.addEventListener("pointerover",t),document.addEventListener("pointerdown",t),document.addEventListener("mouseover",t=>e(t,A)),document.addEventListener("mouseout",t=>e(t,L)),document.addEventListener("focusin",t=>e(t,N)),document.addEventListener("focusout",t=>e(t,S)),document.addEventListener("keydown",e=>{y=!1,"Escape"!==e.key||e.defaultPrevented||[...p].reverse().forEach(e=>{P(e,e[c].target,w,{force:!0})})});const n=()=>/iPad|iPhone|iPod/.test(navigator.userAgent);document.addEventListener("touchstart",e=>{y=!0;const t=e.target.closest("button[interestfor]");if(t){z(t);const r=n();r&&1===e.touches?.length&&(t[c].touchStartX=e.touches[0].clientX,t[c].touchStartY=e.touches[0].clientY),t[c].longPressActive=!1,t[c].longPressTimer=setTimeout(()=>{t[c].state===w&&(r?t[c].longPressActive=!0:P(t,I(t),T)),t[c].longPressTimer=null},500)}});const r=e=>{const t=e.target.closest("button[interestfor]");if(t&&t[c]){if(n()&&"touchmove"===e.type&&1===e.touches?.length){const n=e.touches[0].clientX-t[c].touchStartX,r=e.touches[0].clientY-t[c].touchStartY;if(Math.hypot(n,r)<=10)return}clearTimeout(t[c].longPressTimer),t[c].longPressTimer=null,t[c].longPressActive=!1}};document.addEventListener("touchmove",r),document.addEventListener("touchend",e=>{const t=e.target.closest("button[interestfor]"),n=t?.[c]?.longPressActive;r(e),n&&(e.cancelable&&e.preventDefault(),t[c].state===w&&P(t,I(t),T))},{passive:!1})}(),new MutationObserver(Z).observe(document,{childList:!0,subtree:!0,attributes:!0,attributeOldValue:!0,attributeFilter:[e,"id","href","disabled"]}),W(document.querySelectorAll(`[${e}]`)),console.log(`interestfor polyfill installed (native: ${E}).`)}!function(){const t={configurable:!0,enumerable:!0,get(){return C(this)},set(t){if(null==t)this[m]=null,this.removeAttribute(e);else{if(!(t instanceof Element))throw new TypeError("Failed to set the 'interestForElement' property: The provided value is not of type 'Element'.");this[m]=t,this.setAttribute(e,"")}}};[window.HTMLButtonElement,window.HTMLAnchorElement,window.HTMLAreaElement,window.SVGAElement].forEach(e=>{!e||Object.prototype.hasOwnProperty.call(e.prototype,"interestForElement")&&!window.interestForUsePolyfillAlways||Object.defineProperty(e.prototype,"interestForElement",t)})}(),"complete"===document.readyState?ee():window.addEventListener("load",ee)}();

package/test/interest_test_matrix.html

@@ -0,0 +1,298 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="utf-8">
+  <title>Interest Invokers, Command Invokers &amp; Hint Popovers Test Page</title>
+  <style>
+    body { font-family: sans-serif; line-height: 1.6; margin: 16px; }
+    section { border-bottom: 1px solid #ccc; padding: 12px 0; }
+    h2 { margin: 0 0 8px; font-size: 1rem; }
+    /* Minimal implicit-anchor offset so concurrent popovers do not completely occlude triggers */
+    [popover] { inset: auto; margin: 4px; position-area: block-end; }
+    [popover="hint"] { position-area: inline-end; }
+  </style>
+  <script src="../src/interestfor.js"></script>
+</head>
+<body>
+
+  <h1>Invoker &amp; Popover Permutations Test Suite</h1>
+
+  <!-- ===================================================================== -->
+  <!-- 1. Interest invokers pointing to plain hints                          -->
+  <!-- ===================================================================== -->
+  <section id="test-1">
+    <h2>1. Plain Hints (<code>interestfor</code> + non-interactive content)</h2>
+
+    <button id="btn-plain-text" interestfor="hint-plain-text">
+      1a. Plain text hint
+    </button>
+    <div id="hint-plain-text" popover="hint">
+      Basic plain text inside a hint popover.
+    </div>
+
+    <button id="btn-plain-p" interestfor="hint-plain-p">
+      1b. Paragraph hint (&lt;p&gt; / role="paragraph")
+    </button>
+    <div id="hint-plain-p" popover="hint">
+      <p role="paragraph">Paragraph node with explicit role="paragraph" inside a plain hint.</p>
+      <p>Second standard &lt;p&gt; element with implicit paragraph semantics.</p>
+    </div>
+
+    <button id="btn-plain-tooltip" interestfor="hint-plain-tooltip">
+      1c. Explicit role="tooltip" plain hint
+    </button>
+    <div id="hint-plain-tooltip" popover="hint" role="tooltip">
+      Plain hint with explicit role="tooltip".
+    </div>
+  </section>
+
+  <!-- ===================================================================== -->
+  <!-- 2. Interest invokers pointing to rich hints                           -->
+  <!-- ===================================================================== -->
+  <section id="test-2">
+    <h2>2. Rich Hints (<code>interestfor</code> + interactive/structured popovers)</h2>
+
+    <!-- Adjacent in DOM: tests whether aria-details is omitted when popover is next sibling -->
+    <button id="btn-rich-adjacent" interestfor="hint-rich-adjacent">
+      2a. Rich hint (DOM-adjacent)
+    </button>
+    <div id="hint-rich-adjacent" popover="hint">
+      <h3>Rich Hovercard (Adjacent)</h3>
+      <p>Contains interactive elements to trigger rich-hint semantics.</p>
+      <a href="#test-2">Explore details</a>
+      <button type="button">Action inside rich hint</button>
+    </div>
+
+    <!-- Non-adjacent in DOM: tests automatic aria-details + aria-expanded wiring -->
+    <button id="btn-rich-separated" interestfor="hint-rich-separated">
+      2b. Rich hint (Non-adjacent in DOM)
+    </button>
+
+    <span>Spacer sibling between trigger and target popover.</span>
+
+    <div id="hint-rich-separated" popover="hint">
+      <h3>Rich Hovercard (Separated in DOM)</h3>
+      <p>Tests browser-managed <code>aria-expanded</code> and <code>aria-details</code> relationships.</p>
+      <input type="text" placeholder="Focusable input in rich hint">
+      <button type="button">Save</button>
+    </div>
+  </section>
+
+  <!-- ===================================================================== -->
+  <!-- 3. Dual-purpose button invokers                                       -->
+  <!-- ===================================================================== -->
+  <section id="test-3">
+    <h2>3. Dual-Purpose Button Invokers (<code>interestfor</code> + <code>commandfor</code> / <code>popovertarget</code>)</h2>
+
+    <!-- 3a. interestfor (hint) + commandfor (secondary auto popover) -->
+    <button id="btn-dual-command-popover"
+            interestfor="hint-dual-1"
+            commandfor="popover-secondary-action"
+            command="toggle-popover">
+      3a. Hover for hint / Click to toggle secondary popover (commandfor)
+    </button>
+    <div id="hint-dual-1" popover="hint" role="tooltip">
+      Preview tooltip via interestfor.
+    </div>
+    <div id="popover-secondary-action" popover="auto">
+      <p>Secondary action popover opened via <code>commandfor</code> + <code>command="toggle-popover"</code>.</p>
+      <button type="button">Inner control</button>
+    </div>
+
+    <!-- 3b. interestfor (hint) + commandfor (modal dialog) -->
+    <button id="btn-dual-command-dialog"
+            interestfor="hint-dual-2"
+            commandfor="dialog-action"
+            command="show-modal">
+      3b. Hover for hint / Click to open modal dialog (commandfor)
+    </button>
+    <div id="hint-dual-2" popover="hint" role="tooltip">
+      Opens modal dialog when activated.
+    </div>
+    <dialog id="dialog-action">
+      <p>Dialog opened via <code>commandfor="dialog-action" command="show-modal"</code>.</p>
+      <button commandfor="dialog-action" command="close">Close Dialog</button>
+    </dialog>
+
+    <!-- 3c. interestfor + commandfor pointing to the SAME popover (hover to preview, click to pin) -->
+    <button id="btn-dual-same-target"
+            interestfor="hint-shared-target"
+            commandfor="hint-shared-target"
+            command="show-popover">
+      3c. Same target: Hover to preview / Click to keep open
+    </button>
+    <div id="hint-shared-target" popover="hint">
+      <p>Shared rich hint target for both <code>interestfor</code> and <code>commandfor</code>.</p>
+      <button type="button">Interactive child</button>
+    </div>
+
+    <!-- 3d. interestfor + legacy popovertarget -->
+    <button id="btn-dual-popovertarget"
+            interestfor="hint-dual-3"
+            popovertarget="popover-legacy-target"
+            popovertargetaction="toggle">
+      3d. Hover for hint / Click via popovertarget
+    </button>
+    <div id="hint-dual-3" popover="hint" role="tooltip">
+      Hint on a button using popovertarget.
+    </div>
+    <div id="popover-legacy-target" popover="auto">
+      <p>Secondary popover controlled by <code>popovertarget</code>.</p>
+    </div>
+  </section>
+
+  <!-- ===================================================================== -->
+  <!-- 4. Nested interest invokers inside their own popover                  -->
+  <!-- ===================================================================== -->
+  <section id="test-4">
+    <h2>4. Nested Interest Invokers Inside Their Own Popover</h2>
+
+    <button id="btn-open-outer-rich" interestfor="popover-self-host" commandfor="popover-self-host" command="toggle-popover">
+      4a. Open / Interest Outer Rich Hint (#popover-self-host)
+    </button>
+
+    <div id="popover-self-host" popover="hint">
+      <h3>Outer Rich Hint (#popover-self-host)</h3>
+      <p>Contains an invoker pointing back to this enclosing popover, and another pointing to a second rich hint:</p>
+
+      <!-- Invoker placed INSIDE the very popover it controls -->
+      <button id="btn-self-nested" interestfor="popover-self-host">
+        4b. Self-referencing invoker inside #popover-self-host
+      </button>
+
+      <!-- Invoker inside #popover-self-host interacting with another rich hint -->
+      <button id="btn-nested-to-second-rich" interestfor="popover-nested-rich-2">
+        4c. Invoker inside #popover-self-host -&gt; #popover-nested-rich-2
+      </button>
+    </div>
+
+    <div id="popover-nested-rich-2" popover="hint">
+      <h3>Second Rich Hint (#popover-nested-rich-2)</h3>
+      <p>Triggered from inside #popover-self-host.</p>
+      <!-- Also includes a self-referencing invoker inside itself -->
+      <button id="btn-self-nested-2" interestfor="popover-nested-rich-2">
+        4d. Self-referencing invoker inside #popover-nested-rich-2
+      </button>
+      <a href="#test-4">Nested interactive link</a>
+    </div>
+  </section>
+
+  <!-- ===================================================================== -->
+  <!-- 5. Hyperlink interest invokers (<a href> + interestfor)               -->
+  <!-- ===================================================================== -->
+  <section id="test-5">
+    <h2>5. Hyperlink Interest Invokers (<code>&lt;a href&gt;</code> + <code>interestfor</code>)</h2>
+
+    <p>
+      Hover or focus the profile link for
+      <a id="link-rich-hovercard" href="#profile-destination" interestfor="hovercard-profile">@mfreed7</a>
+      or the documentation link for
+      <a id="link-plain-hint" href="#docs-destination" interestfor="hovercard-plain">Popover API Spec</a>.
+    </p>
+
+    <div id="hovercard-profile" popover="hint">
+      <h3>Mason (@mfreed7)</h3>
+      <p>Browser Engineer working on Blink / Open UI.</p>
+      <a href="#follow">Follow</a>
+      <button type="button">Message</button>
+    </div>
+
+    <div id="hovercard-plain" popover="hint" role="tooltip">
+      Plain tooltip preview for a standard navigable hyperlink.
+    </div>
+  </section>
+
+  <!-- ===================================================================== -->
+  <!-- 6. Author-defined ARIA states combined with interest invokers         -->
+  <!-- ===================================================================== -->
+  <section id="test-6">
+    <h2>6. Author-Defined ARIA States + <code>interestfor</code></h2>
+
+    <p id="author-desc">Author-supplied description text via aria-describedby.</p>
+    <div id="author-details">Author-supplied extra details node via aria-details.</div>
+
+    <!-- Explicit aria-expanded="false" and aria-describedby on a button pointing to a rich hint -->
+    <button id="btn-author-aria-false"
+            interestfor="hint-author-rich"
+            aria-expanded="false"
+            aria-describedby="author-desc">
+      6a. Button with explicit aria-expanded="false" + aria-describedby
+    </button>
+
+    <!-- Explicit aria-expanded="true" and aria-details on a button pointing to a rich hint -->
+    <button id="btn-author-aria-true"
+            interestfor="hint-author-rich"
+            aria-expanded="true"
+            aria-details="author-details">
+      6b. Button with explicit aria-expanded="true" + aria-details
+    </button>
+
+    <!-- Explicit aria-expanded and aria-describedby on a hyperlink invoker -->
+    <a id="link-author-aria"
+       href="#section-6"
+       interestfor="hint-author-plain"
+       aria-expanded="false"
+       aria-describedby="author-desc">
+      6c. Link with explicit aria-expanded="false" + aria-describedby
+    </a>
+
+    <div id="hint-author-rich" popover="hint">
+      <h3>Rich Hint Target for Author-Defined ARIA Triggers</h3>
+      <button type="button">Interactive Button</button>
+    </div>
+
+    <div id="hint-author-plain" popover="hint" role="tooltip">
+      Plain hint target for author-ARIA link trigger.
+    </div>
+  </section>
+
+  <!-- ===================================================================== -->
+  <!-- 7. Interest invokers combined with has-interest-for state             -->
+  <!-- ===================================================================== -->
+  <section id="test-7">
+    <h2>7. Interest Invokers + <code>has-interest-for</code> &amp; <code>aria-expanded</code></h2>
+
+    <!-- Boolean has-interest-for alongside primary disclosure aria-expanded="false" -->
+    <button id="btn-has-interest-collapsed"
+            interestfor="hint-has-interest-rich"
+            commandfor="panel-primary-disclosure"
+            command="toggle-popover"
+            has-interest-for
+            aria-expanded="false">
+      7a. Control with has-interest-for + aria-expanded="false" (Primary Collapsed)
+    </button>
+
+    <!-- Explicit ID/value has-interest-for alongside primary disclosure aria-expanded="true" -->
+    <button id="btn-has-interest-expanded"
+            interestfor="hint-has-interest-plain"
+            has-interest-for="hint-has-interest-plain"
+            aria-expanded="true">
+      7b. Control with has-interest-for="hint-has-interest-plain" + aria-expanded="true" (Primary Expanded)
+    </button>
+
+    <!-- Hyperlink with has-interest-for + aria-expanded -->
+    <a id="link-has-interest"
+       href="#section-7"
+       interestfor="hint-has-interest-rich"
+       has-interest-for
+       aria-expanded="false">
+      7c. Link with has-interest-for + aria-expanded="false"
+    </a>
+
+    <div id="hint-has-interest-rich" popover="hint">
+      <h3>Rich Hint on a <code>has-interest-for</code> Control</h3>
+      <p>Tests disambiguation between primary disclosure state and interest popover state.</p>
+      <button type="button">Hint Action</button>
+    </div>
+
+    <div id="hint-has-interest-plain" popover="hint" role="tooltip">
+      Plain hint on a control with has-interest-for and aria-expanded="true".
+    </div>
+
+    <div id="panel-primary-disclosure" popover="auto">
+      <p>Primary disclosure popover controlled by 7a.</p>
+    </div>
+  </section>
+
+</body>
+</html>

package/test/test.html

@@ -572,6 +572,87 @@ async function runTests() {
     await wait(25);
     assert_true(target.matches(":popover-open"), "mouse pointerover re-enables hover interest");
   });
+
+  await test("iOS long-press ignores touchmove within 10px slop and cancels beyond 10px", async () => {
+    const origUA = Object.getOwnPropertyDescriptor(Navigator.prototype, "userAgent");
+    Object.defineProperty(navigator, "userAgent", {
+      value: "Mozilla/5.0 (iPhone; CPU iPhone OS 27_0 like Mac OS X) AppleWebKit/605.1.15",
+      configurable: true,
+    });
+    const dispatchTouch = (el, type, x, y) => {
+      const ev = new Event(type, { bubbles: true, cancelable: true });
+      ev.touches = type === "touchend" ? [] : [{ clientX: x, clientY: y }];
+      el.dispatchEvent(ev);
+      return ev;
+    };
+    try {
+      const { invoker, target } = createPair();
+      // 1. Jitter within 10px (e.g. 6, 8 -> distance 10) does not cancel long press:
+      dispatchTouch(invoker, "touchstart", 100, 100);
+      dispatchTouch(invoker, "touchmove", 106, 108);
+      await wait(520);
+      assert_false(target.matches(":popover-open"), "on iOS, popover waits for touchend");
+      // Jitter after the 500ms timer has fired (still within 10px) also does not cancel:
+      dispatchTouch(invoker, "touchmove", 95, 100);
+      const endEv = dispatchTouch(invoker, "touchend", 95, 100);
+      assert_true(endEv.defaultPrevented, "touchend prevented default to suppress click");
+      assert_true(target.matches(":popover-open"), "long press with <=10px jitter opened popover on touchend");
+
+      pressEscape();
+      assert_false(target.matches(":popover-open"), "closed via Escape");
+
+      // 2. Movement >10px (e.g. 7, 8 -> distance ~10.63) cancels long press:
+      dispatchTouch(invoker, "touchstart", 100, 100);
+      dispatchTouch(invoker, "touchmove", 107, 108);
+      await wait(520);
+      const endEv2 = dispatchTouch(invoker, "touchend", 107, 108);
+      assert_false(endEv2.defaultPrevented, "canceled long press does not preventDefault on touchend");
+      assert_false(target.matches(":popover-open"), "long press with >10px movement did not open popover");
+    } finally {
+      if (origUA) {
+        Object.defineProperty(navigator, "userAgent", origUA);
+      } else {
+        delete navigator.userAgent;
+      }
+      // Reset touchInProgress for any subsequent tests
+      document.body.dispatchEvent(new PointerEvent("pointerover", { bubbles: true, pointerType: "mouse" }));
+    }
+  });
+
+  // =========================================================================
+  section("6. Document Body Replacement (e.g. Turbo Drive)");
+  // =========================================================================
+
+  await test("Hover, focus, and Escape still work after document.body is replaced", async () => {
+    const originalBody = document.body;
+    const newBody = document.createElement("body");
+    newBody.innerHTML =
+      '<button id="swap_invoker" interestfor="swap_target">Invoker</button>' +
+      '<div id="swap_target" popover="auto">Target</div>';
+    originalBody.replaceWith(newBody);
+    try {
+      const invoker = document.getElementById("swap_invoker");
+      const target = document.getElementById("swap_target");
+      invoker.style.setProperty("--interest-delay-start", "10ms");
+      invoker.style.setProperty("--interest-delay-end", "10ms");
+      await nextTick();
+
+      hover(invoker);
+      await wait(25);
+      assert_true(target.matches(":popover-open"), "hover opens popover in replaced body");
+      dehover(invoker);
+      await wait(25);
+      assert_false(target.matches(":popover-open"), "dehover closes popover in replaced body");
+
+      focusIn(invoker);
+      await wait(25);
+      assert_true(target.matches(":popover-open"), "focus opens popover in replaced body");
+      pressEscape();
+      assert_false(target.matches(":popover-open"), "Escape closes popover in replaced body");
+    } finally {
+      newBody.replaceWith(originalBody);
+    }
+  });
 }
 </script>