interestfor 1.0.8 → 1.0.9

package/README.md

@@ -27,14 +27,84 @@ can be done by hovering the element with the mouse, or focusing it with the
 keyboard. If the target is a popover, it will automatically be shown and hidden
 upon receiving and losing interest.
 
+A few more details:
+
+- Only `<button>` (when not disabled), `<a href>`, `<area href>`, and SVG
+  `<a href>` elements can be interest invokers. The `interestfor` attribute has
+  no effect on other elements.
+- The `interest` and `loseinterest` events are cancelable. Calling
+  `preventDefault()` on `interest` prevents interest from being shown, and on
+  `loseinterest` keeps interest (and the popover) in place.
+- Pressing Escape makes all interest invokers lose interest. These
+  `loseinterest` events are not cancelable.
+- If the target popover was already open when interest was gained, it is not
+  hidden when interest is lost.
+- If the target popover is hidden some other way (e.g. light dismiss), the
+  invoker loses interest.
+- Popovers can be nested: hovering an invoker inside a popover that was shown
+  via interest keeps the outer popover open.
+- The `interestForElement` property is available on `HTMLButtonElement`,
+  `HTMLAnchorElement`, `HTMLAreaElement`, and `SVGAElement`. It reflects the
+  `interestfor` attribute as an element reference.
+- The optional `::interest-button` pseudo element provides a button that shows
+  interest immediately when clicked or tapped. See below.
+
 Again, this is a quick summary. For the complete details, please [read the
-explainer](https://open-ui.org/components/interest-invokers.explainer).
+OpenUI explainer](https://open-ui.org/components/interest-invokers.explainer),
+the [HTML spec PR](https://github.com/whatwg/html/pull/11006), and the CSSWG
+specs for [the pseudo classes](https://drafts.csswg.org/selectors-5/#interest-pseudos)
+and [CSS properties](https://drafts.csswg.org/css-ui-4/#interest).
+
+## The `::interest-button` pseudo element
+
+An interest invoker can have an `::interest-button` pseudo element, which is
+a small button rendered just after the invoker. Clicking (or tapping) it shows
+interest immediately, without waiting for any delay. Interest shown this way is
+not lost when the mouse leaves the invoker or the invoker loses focus. It is
+lost when the user clicks outside the popover, presses Escape, or hovers and
+then leaves the target popover. The pseudo element is only rendered if its
+`content` property is set.
+
+The polyfill can't add a real pseudo element, so it inserts a
+`<span class="interest-button" aria-hidden="true">` element as the next sibling
+of the invoker. Set the `--interest-button-content` custom property on the
+invoker to the value you'd use for `content`, and use `+ .interest-button` to
+style it. These must be separate rules, because a browser that doesn't
+recognize `::interest-button` will drop the entire rule containing it:
+
+```css
+/* Native */
+[interestfor]::interest-button {
+  content: "?";
+}
+/* Polyfill */
+[interestfor] {
+  --interest-button-content: "?";
+}
+[interestfor] + .interest-button {
+  /* Additional polyfill-only styles */
+}
+```
+
+Both the native pseudo element and the polyfill element get these default
+styles, which can be overridden: `display: inline-block`,
+`vertical-align: middle`, `min-inline-size: 24px`,
+`min-block-size: max(24px, 1lh)`, `cursor: help`, a transparent background, and
+a slightly tinted background on `:hover` and `:active`.
+
+Because the interest button can be tapped, it provides a way for touchscreen
+users to show interest in links (see below). Note that the polyfill implements
+this as a `<span>` with a click handler on purpose - that makes it non-focusable,
+which is correct, because the invoker itself will show interest if focused, so
+there should not be two focus stops. See [this section of the explainer](https://open-ui.org/components/interest-invokers.explainer/#rich-hints-aka-hovercards-or-other:~:text=Importantly%2C%20this%20new%20pseudo%20element%20is%20not%20keyboard%20focusable)
+for more details.
 
 ## Touchscreen support
 
 This polyfill provides limited touchscreen support. On a touchscreen,
 long-pressing a `<button>` element that has an `interestfor` attribute will show
-interest in the target.
+interest in the target. As with the interest button, this interest is not lost
+when the button loses hover or focus.
 
 However, long-pressing a link (`<a>` element) is **not** supported. This is
 because on today's browsers, long-pressing a link element brings up a useful
@@ -44,7 +114,8 @@ be surpressed completely. There is currently no way to provide access to the
 long-press context menu and *also* provide a way to show interest. Since the
 context menu contains items that users often use, eliminating access to the
 context menu is not what most people want. So this polyfill will not support
-long-press on links.
+long-press on links. To let touchscreen users show interest in a link, give it
+an interest button (see the `::interest-button` section above).
 
 This is one of the primary motivations for Chromium championing this as a
 native API in all browsers: to support all users, including those using
@@ -108,6 +179,30 @@ native feature:
   class names. This is to avoid the entire selector being invalidated if the
   browser does not recognize the native pseudo class (e.g. `:interest-source`).
 
+- The `::interest-button` pseudo element is implemented as a real
+  `<span class="interest-button">` element, inserted after the invoker, and
+  configured with the `--interest-button-content` custom property (see above).
+  Because it is a real element:
+  - It inherits styles from the invoker's parent, not from the invoker.
+  - It can affect sibling selectors such as `+` and `:nth-child()`.
+  - Click listeners on the invoker don't see clicks on the interest button.
+  - It is not implicitly anchored to the invoker for anchor positioning.
+- The polyfill only re-reads `--interest-button-content` when the DOM or the
+  `interestfor`, `id`, `href`, or `disabled` attributes change. Changes caused
+  only by styles (e.g. class changes, `:hover`, media queries) are not
+  detected.
+- Interest buttons are not created for invokers inside shadow roots, or for
+  `<area>` or SVG `<a>` invokers.
+- Clicking the interest button while the target popover is open causes the
+  popover to be light dismissed and then shown again, which fires an extra
+  pair of `loseinterest` and `interest` events.
+- The polyfill does not run in browsers that natively support `interestfor`.
+  In browsers that support `interestfor` but not `::interest-button`, no
+  interest button is shown.
+- The polyfill installs a `MutationObserver` on the document to keep interest
+  buttons up to date, and prepends a `<style>` element to `<head>` containing
+  the default styles for interest invokers and interest buttons.
+
 
 ## Tests
 

package/package.json

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

package/src/interestfor.js

@@ -14,9 +14,24 @@
   const interestDelayStartProp = "--interest-delay-start";
   const interestDelayEndProp = "--interest-delay-end";
   const interestDelayProp = "--interest-delay";
+  // Stands in for the `content` property of the `::interest-button` pseudo
+  // element. It is set on the invoker.
+  const interestButtonContentProp = "--interest-button-content";
+  // An unregistered (and therefore inherited) copy of the content value, which
+  // is set on the polyfilled interest button, so that its ::before pseudo
+  // element can render it.
+  const interestButtonInternalContentProp =
+    "--interest-button-polyfill-content";
+  const interestButtonClass = "interest-button";
   const dataField = "__interestForData";
   const targetDataField = "__interestForTargetData";
+  const buttonField = "__interestForButton";
+  const buttonInvokerField = "__interestForButtonInvoker";
+  const explicitTargetField = "__interestForExplicitTarget";
+  const xlinkNamespace = "http://www.w3.org/1999/xlink";
   const invokersWithInterest = new Set();
+  const invokersWithButtons = new Set();
+  const invokersMissingTarget = new Set();
   let touchInProgress = false;
 
   // Feature detection
@@ -77,7 +92,12 @@
   // Enum-like state and source
   const InterestState = {
     NoInterest: "none",
+    // Interest gained via hover or focus, after a delay. This is lost when
+    // the invoker is de-hovered or blurred.
     FullInterest: "full",
+    // Interest gained immediately via long-press or the `::interest-button`.
+    // This is not lost when the invoker itself is de-hovered or blurred.
+    ExplicitInterest: "explicit",
   };
   const Source = {
     Hover: "hover",
@@ -96,7 +116,7 @@
   }
 
   // Gain or lose interest
-  function GainOrLoseInterest(invoker, target, newState) {
+  function GainOrLoseInterest(invoker, target, newState, options = {}) {
     if (!invoker || !target) {
       return false;
     }
@@ -111,9 +131,21 @@
 
     // If gaining, handle existing invoker
     if (newState !== InterestState.NoInterest) {
+      initializeDataField(invoker);
+      if (
+        invoker[dataField].state !== InterestState.NoInterest &&
+        invoker[dataField].target !== target
+      ) {
+        // The `interestfor` attribute changed while this invoker had interest,
+        // and the mutation observer hasn't run yet.
+        resetInterestState(invoker);
+      }
       const existing = GetInterestInvoker(target);
       if (existing) {
         if (existing === invoker) {
+          if (newState === InterestState.ExplicitInterest) {
+            existing[dataField].state = InterestState.ExplicitInterest;
+          }
           existing[dataField].clearLostTask();
           return false;
         } else {
@@ -130,73 +162,182 @@
         }
       }
       // finally apply interest
-      return applyState(invoker, newState);
+      return applyState(invoker, target, newState);
     }
 
     // losing interest
-    clearState(invoker);
-    return true;
+    return clearState(invoker, options);
   }
 
   // Schedule tasks
   function ScheduleInterestGainedTask(invoker, newState) {
+    const target = GetInterestForTarget(invoker);
+    if (!target) {
+      return;
+    }
     const delay = getDelaySeconds(invoker, interestDelayStartProp) * 1000;
-    if (!isFinite(delay) || delay < 0) {
+    if (!isSchedulableDelay(delay)) {
       return;
     }
     invoker[dataField].clearGainedTask();
     invoker[dataField].gainedTimer = setTimeout(() => {
-      GainOrLoseInterest(invoker, GetInterestForTarget(invoker), newState);
+      GainOrLoseInterest(invoker, target, newState);
     }, delay);
   }
 
   function ScheduleInterestLostTask(invoker) {
     const delay = getDelaySeconds(invoker, interestDelayEndProp) * 1000;
-    if (!isFinite(delay) || delay < 0) {
+    if (!isSchedulableDelay(delay)) {
       return;
     }
-    invoker[dataField].clearLostTask();
-    invoker[dataField].lostTimer = setTimeout(() => {
-      GainOrLoseInterest(
-        invoker,
-        GetInterestForTarget(invoker),
-        InterestState.NoInterest
-      );
+    const data = invoker[dataField];
+    data.clearLostTask();
+    const target = data.target;
+    data.lostTimer = setTimeout(() => {
+      GainOrLoseInterest(invoker, target, InterestState.NoInterest);
     }, delay);
   }
 
   // Helpers
   function GetInterestInvoker(target) {
     const inv = target[targetDataField]?.invoker || null;
-    return inv && inv[dataField]?.state !== InterestState.NoInterest
-      ? inv
-      : null;
+    if (!inv) {
+      return null;
+    }
+    const data = inv[dataField];
+    if (
+      !data ||
+      data.state === InterestState.NoInterest ||
+      data.target !== target ||
+      GetInterestForTarget(inv) !== target
+    ) {
+      return null;
+    }
+    return inv;
   }
+
+  // Returns the target of a valid interest invoker, or null.
   function GetInterestForTarget(el) {
+    if (
+      !el.hasAttribute(attributeName) ||
+      !el.isConnected ||
+      !isValidInterestInvoker(el)
+    ) {
+      return null;
+    }
+    const target = getAttrAssociatedElement(el);
+    return target && target.isConnected ? target : null;
+  }
+
+  // Only some elements can be interest invokers. This mirrors the
+  // IsValidInterestInvoker() overrides in Chromium.
+  function isValidInterestInvoker(el) {
+    if (el instanceof HTMLButtonElement) {
+      return !el.matches(":disabled");
+    }
+    if (el instanceof HTMLAnchorElement || el instanceof HTMLAreaElement) {
+      return el.hasAttribute("href");
+    }
+    if (window.SVGAElement && el instanceof SVGAElement) {
+      return el.hasAttribute("href") || el.hasAttributeNS(xlinkNamespace, "href");
+    }
+    return false;
+  }
+
+  // Resolves the `interestfor` attribute (or an element set via the
+  // `interestForElement` property) within the invoker's tree scope.
+  function getAttrAssociatedElement(el) {
     const id = el.getAttribute(attributeName);
-    return document.getElementById(id);
+    if (id === null) {
+      return null;
+    }
+    const explicitTarget = el[explicitTargetField];
+    if (explicitTarget && id === "") {
+      return isInShadowIncludingAncestorTree(explicitTarget, el)
+        ? explicitTarget
+        : null;
+    }
+    if (id === "") {
+      return null;
+    }
+    const root = getRootNode(el);
+    return typeof root.getElementById === "function"
+      ? root.getElementById(id)
+      : null;
   }
 
-  function onPopoverToggle(e) {
-    const popover = e.target;
-    if (e.newState === 'closed') {
-      const invoker = popover[targetDataField]?.invoker;
-      if (invoker) {
-        GainOrLoseInterest(invoker, popover, InterestState.NoInterest);
+  // Returns true if `candidate` is in the same tree as `el`, or in the tree of
+  // one of `el`'s shadow hosts.
+  function isInShadowIncludingAncestorTree(candidate, el) {
+    const candidateRoot = getRootNode(candidate);
+    let root = getRootNode(el);
+    while (root) {
+      if (root === candidateRoot) {
+        return true;
       }
+      root = root instanceof ShadowRoot ? getRootNode(root.host) : null;
+    }
+    return false;
+  }
+
+  function isPopoverOpen(el) {
+    try {
+      return el.matches(":popover-open");
+    } catch {
+      return false;
     }
   }
 
+  // If the target popover is hidden by something other than the loss of
+  // interest (e.g. light dismiss), the invoker loses interest. This uses
+  // `beforetoggle`, since in Chromium, the loss of interest happens
+  // synchronously as the popover begins to hide.
+  function onPopoverBeforeToggle(e) {
+    if (e.newState !== "closed") {
+      return;
+    }
+    const popover = e.currentTarget;
+    const invoker = GetInterestInvoker(popover);
+    if (!invoker) {
+      return;
+    }
+    if (popover.contains(document.activeElement)) {
+      // Focus will be returned to the previously focused element after the
+      // popover hides. If that is the invoker, don't show interest again
+      // because of that focus.
+      const data = invoker[dataField];
+      data.suppressNextFocusInterest = true;
+      setTimeout(() => {
+        data.suppressNextFocusInterest = false;
+      }, 0);
+    }
+    // The popover is already hiding, so don't try to hide it again.
+    GainOrLoseInterest(invoker, popover, InterestState.NoInterest, {
+      closePopovers: false,
+    });
+  }
+
+  // Delays longer than setTimeout() supports (which would fire immediately)
+  // are treated as infinite, i.e. interest is never gained or lost.
+  function isSchedulableDelay(delayMs) {
+    return delayMs >= 0 && delayMs <= 2147483647;
+  }
+
   function parseTimeValue(val) {
     const s = String(val).trim();
-    const m_s = s.match(/^([\d.]+)s$/);
+    const m_s = s.match(/^([\d.]+(?:e[+-]?\d+)?)s$/i);
     if (m_s) {
       return parseFloat(m_s[1]);
     }
-    const m_ms = s.match(/^([\d.]+)ms$/);
+    const m_ms = s.match(/^([\d.]+(?:e[+-]?\d+)?)ms$/i);
     if (m_ms) {
       return parseFloat(m_ms[1]) / 1000;
     }
+    // Values such as `calc(infinity * 1s)` mean that interest is never
+    // gained or lost via hover or focus.
+    if (/\b(infinity|nan)\b/i.test(s)) {
+      return Infinity;
+    }
     return parseFloat(s) || 0;
   }
 
@@ -232,32 +373,44 @@
         }
     }
 
-    // If we got here, the effective value is 'normal'. Return the default.
-    return prop === interestDelayStartProp ? 0.5 : 0.25;
+    // If we got here, the effective value is 'normal'. Return the Chromium default.
+    return prop === interestDelayStartProp ? 0.25 : 0.15;
   }
 
   // Actual state transitions
-  function applyState(invoker, newState) {
+  function applyState(invoker, target, newState) {
     const data = invoker[dataField];
-    const target = GetInterestForTarget(invoker);
     switch (newState) {
       case InterestState.FullInterest:
+      case InterestState.ExplicitInterest:
         if (data.state !== InterestState.NoInterest) {
           throw new Error("Invalid state");
         }
-        const shouldContinue = target.dispatchEvent(new InterestEvent(interestEventName, { source: invoker }));
-        if (!shouldContinue) return;
-        try {
-          target.showPopover({ source: invoker });
-        } catch {}
-        data.state = InterestState.FullInterest;
+        const shouldContinue = target.dispatchEvent(
+          new InterestEvent(interestEventName, {
+            source: invoker,
+            cancelable: true,
+          })
+        );
+        if (!shouldContinue) return false;
+        data.state = newState;
+        data.target = target;
+        data.clearGainedTask();
         if (!target[targetDataField]) {
           target[targetDataField] = {};
         }
         target[targetDataField].invoker = invoker;
         if (target.hasAttribute('popover')) {
-          target[targetDataField].toggleListener = onPopoverToggle;
-          target.addEventListener('toggle', onPopoverToggle);
+          target.addEventListener('beforetoggle', onPopoverBeforeToggle);
+          // Only show the popover if it isn't already open. Only popovers that
+          // were shown here get hidden when interest is lost.
+          target[targetDataField].shownByInterest = false;
+          if (!isPopoverOpen(target)) {
+            try {
+              target.showPopover({ source: invoker });
+            } catch {}
+            target[targetDataField].shownByInterest = isPopoverOpen(target);
+          }
         }
         invokersWithInterest.add(invoker);
         invoker.classList.add("interest-source");
@@ -281,33 +434,88 @@
     return true;
   }
 
-  function clearState(invoker, force = false) {
+  // Fires the `loseinterest` event, and if not cancelled, removes interest
+  // and hides the target popover (if it was shown via interest). If `force` is
+  // true, the event is not cancelable.
+  function clearState(invoker, { force = false, closePopovers = true } = {}) {
     const data = invoker[dataField];
     clearTimeout(data.gainedTimer);
     clearTimeout(data.lostTimer);
-    if (data.state !== InterestState.NoInterest) {
-      const target = GetInterestForTarget(invoker);
-      const shouldContinue = target.dispatchEvent(new InterestEvent(loseInterestEventName, { source: invoker }));
-      if (!force && !shouldContinue) return;
-      try {
-        target.hidePopover();
-      } catch {}
-      if (target[targetDataField]?.toggleListener) {
-        target.removeEventListener('toggle', target[targetDataField].toggleListener);
-      }
-      target[targetDataField] = null;
-      invokersWithInterest.delete(invoker);
-      invoker.classList.remove("interest-source");
-      target.classList.remove("interest-target");
+    if (data.state === InterestState.NoInterest) {
+      return true;
+    }
+    const target = data.target;
+    const shouldContinue = target.dispatchEvent(
+      new InterestEvent(loseInterestEventName, {
+        source: invoker,
+        cancelable: !force,
+      })
+    );
+    if (!shouldContinue) return false;
+    const targetData = target[targetDataField];
+    const shouldHide =
+      closePopovers &&
+      targetData?.invoker === invoker &&
+      targetData.shownByInterest;
+    resetInterestState(invoker);
+    if (shouldHide && isPopoverOpen(target)) {
+      hideTargetPopover(invoker, target);
+    }
+    return true;
+  }
+
+  // Removes interest without firing events, or hiding the target. This
+  // mirrors ChangeInterestState(kNoInterest) in Chromium, and is used directly
+  // when the invoker or target is removed, or the `interestfor` attribute
+  // changes.
+  function resetInterestState(invoker) {
+    const data = invoker[dataField];
+    if (!data) {
+      return;
+    }
+    clearTimeout(data.gainedTimer);
+    clearTimeout(data.lostTimer);
+    if (data.state === InterestState.NoInterest) {
+      return;
+    }
+    const target = data.target;
+    invokersWithInterest.delete(invoker);
+    invoker.classList.remove("interest-source");
+    if (target) {
+      if (target[targetDataField]?.invoker === invoker) {
+        target.removeEventListener('beforetoggle', onPopoverBeforeToggle);
+        target[targetDataField] = null;
+        target.classList.remove("interest-target");
+      }
       if (!isPlainHint(target)) {
         invoker.setAttribute("aria-expanded", "false");
       }
-      if (data.anchorName) {
-        invoker.style.anchorName = "";
+    }
+    if (data.anchorName) {
+      invoker.style.anchorName = "";
+      if (target) {
         target.style.positionAnchor = "";
-        data.anchorName = null;
       }
-      data.state = InterestState.NoInterest;
+      data.anchorName = null;
+    }
+    data.state = InterestState.NoInterest;
+    data.target = null;
+  }
+
+  function hideTargetPopover(invoker, target) {
+    // If focus is within the popover, hiding it returns focus to the
+    // previously focused element. If that is the invoker, don't show interest
+    // again because of that focus.
+    const data = invoker[dataField];
+    const focusInside = target.contains(document.activeElement);
+    if (focusInside) {
+      data.suppressNextFocusInterest = true;
+    }
+    try {
+      target.hidePopover();
+    } catch {}
+    if (focusInside) {
+      data.suppressNextFocusInterest = false;
     }
   }
 
@@ -370,9 +578,11 @@
     if (el[dataField]) return;
     el[dataField] = {
       state: InterestState.NoInterest,
+      target: null,
       gainedTimer: null,
       lostTimer: null,
       longPressTimer: null,
+      suppressNextFocusInterest: false,
       clearGainedTask() {
         clearTimeout(this.gainedTimer);
       },
@@ -386,6 +596,49 @@
     }
   }
 
+  // Returns the flat tree parent of `el`. The polyfilled `::interest-button`
+  // is treated as a child of its invoker, for tree traversal purposes, as
+  // the real pseudo element would be. (It is treated as a sibling for layout
+  // tree traversal purposes only.)
+  function getParentForInterest(el) {
+    if (el[buttonInvokerField]) {
+      return el[buttonInvokerField];
+    }
+    if (el.assignedSlot) {
+      return el.assignedSlot;
+    }
+    if (el.parentElement) {
+      return el.parentElement;
+    }
+    const parent = el.parentNode;
+    return parent instanceof ShadowRoot ? parent.host : null;
+  }
+
+  // Returns all invokers that have interest in `el`, or in any of its
+  // ancestors, and (recursively) all invokers that have interest in those
+  // invokers or their ancestors. This mirrors AllSourceInterestInvokers() in
+  // Chromium, and allows nested interest popovers to stay open while the inner
+  // ones are hovered.
+  function allSourceInterestInvokers(el) {
+    const sources = new Set();
+    if (invokersWithInterest.size === 0) {
+      return sources;
+    }
+    const visit = (node) => {
+      const upstream = GetInterestInvoker(node);
+      if (upstream && !sources.has(upstream)) {
+        sources.add(upstream);
+        visit(upstream);
+      }
+      const parent = getParentForInterest(node);
+      if (parent && !sources.has(parent)) {
+        visit(parent);
+      }
+    };
+    visit(el);
+    return sources;
+  }
+
   function HandleInterestHoverOrFocus(el, source) {
     if (touchInProgress) {
       return;
@@ -394,52 +647,235 @@
       return;
     }
     const target = GetInterestForTarget(el);
-    if (!target) {
-      const containingTarget = el.closest(".interest-target");
-      if (containingTarget) {
-        const upstreamInvoker = GetInterestInvoker(containingTarget);
-        if (upstreamInvoker) {
-          if (source === Source.Hover || source === Source.Focus) {
-            upstreamInvoker[dataField].clearLostTask();
-          } else {
-            if (source === Source.Blur || !el.matches(":hover")) {
-              ScheduleInterestLostTask(upstreamInvoker);
-            }
-          }
-        }
-      }
-      return;
+    if (target) {
+      initializeDataField(el);
     }
-    initializeDataField(el);
     const data = el[dataField];
-    const upstreamInvoker = GetInterestInvoker(el);
 
     // Hover or focus
     if (source === Source.Hover || source === Source.Focus) {
-      data.clearLostTask && data.clearLostTask();
-      if (upstreamInvoker) {
+      let suppressFocusInterest = false;
+      if (data) {
+        data.clearLostTask();
+        suppressFocusInterest =
+          source === Source.Focus && data.suppressNextFocusInterest;
+        data.suppressNextFocusInterest = false;
+      }
+      for (const upstreamInvoker of allSourceInterestInvokers(el)) {
         upstreamInvoker[dataField].clearLostTask();
       }
-      ScheduleInterestGainedTask(el, InterestState.FullInterest);
+      if (
+        target &&
+        !suppressFocusInterest &&
+        data.state === InterestState.NoInterest
+      ) {
+        ScheduleInterestGainedTask(el, InterestState.FullInterest);
+      }
     } else {
       // Dehover or blur
-      data.clearGainedTask && data.clearGainedTask();
-      if (data.state !== InterestState.NoInterest) {
-        ScheduleInterestLostTask(el);
+      if (data) {
+        data.clearGainedTask();
+        // Explicit interest is not lost by de-hovering or blurring the
+        // invoker itself.
+        if (data.state === InterestState.FullInterest) {
+          ScheduleInterestLostTask(el);
+        }
       }
-      if (upstreamInvoker) {
-        upstreamInvoker[dataField].clearGainedTask();
-        if (source === Source.Blur || !el.matches(":hover")) {
+      if (source === Source.Blur || !el.matches(":hover")) {
+        for (const upstreamInvoker of allSourceInterestInvokers(el)) {
           ScheduleInterestLostTask(upstreamInvoker);
         }
       }
     }
   }
 
+  // `::interest-button` support. The pseudo element is polyfilled with a real
+  // element, inserted as the next sibling of the invoker. It is only created
+  // if the invoker has a `--interest-button-content` value other than `none`
+  // or `normal`, which stands in for the `content` property on the real pseudo
+  // element.
+  function wantsInterestButton(invoker) {
+    return (
+      invoker instanceof HTMLElement &&
+      invoker.localName !== "area" &&
+      !!invoker.parentNode &&
+      !!GetInterestForTarget(invoker)
+    );
+  }
+
+  function getInterestButtonContent(invoker) {
+    const value = getComputedStyle(invoker)
+      .getPropertyValue(interestButtonContentProp)
+      .trim();
+    if (!value || value === "none" || value === "normal") {
+      return null;
+    }
+    return value;
+  }
+
+  function onInterestButtonClick() {
+    // Activating the interest button shows interest immediately, without
+    // delays.
+    const invoker = this[buttonInvokerField];
+    if (invoker) {
+      GainOrLoseInterest(
+        invoker,
+        GetInterestForTarget(invoker),
+        InterestState.ExplicitInterest
+      );
+    }
+  }
+
+  function setInterestButton(invoker, content) {
+    let button = invoker[buttonField];
+    if (!content) {
+      if (button) {
+        button.remove();
+        invoker[buttonField] = null;
+        invokersWithButtons.delete(invoker);
+      }
+      return;
+    }
+    if (!button) {
+      button = invoker.ownerDocument.createElement("span");
+      button.className = interestButtonClass;
+      // The real pseudo element is not exposed to accessibility, and is not
+      // focusable.
+      button.setAttribute("aria-hidden", "true");
+      button[buttonInvokerField] = invoker;
+      button.addEventListener("click", onInterestButtonClick);
+      invoker[buttonField] = button;
+      invokersWithButtons.add(invoker);
+    }
+    if (
+      button.style.getPropertyValue(interestButtonInternalContentProp) !==
+      content
+    ) {
+      button.style.setProperty(interestButtonInternalContentProp, content);
+    }
+    if (invoker.nextSibling !== button) {
+      invoker.after(button);
+    }
+  }
+
+  function updateInterestButtons(invokers) {
+    // Read all styles first, and then modify the DOM, to avoid forcing a style
+    // recalc for each invoker.
+    const updates = [];
+    for (const invoker of invokers) {
+      let content = null;
+      if (invoker.isConnected && invoker.hasAttribute(attributeName)) {
+        if (wantsInterestButton(invoker)) {
+          invokersMissingTarget.delete(invoker);
+          content = getInterestButtonContent(invoker);
+        } else {
+          // The target might be added (or become valid) later.
+          invokersMissingTarget.add(invoker);
+        }
+      } else {
+        invokersMissingTarget.delete(invoker);
+      }
+      updates.push([invoker, content]);
+    }
+    for (const [invoker, content] of updates) {
+      setInterestButton(invoker, content);
+    }
+  }
+
+  function handleMutations(records) {
+    const candidates = new Set();
+    let recheckMissingTargets = false;
+    const addInvokers = (node) => {
+      if (node.nodeType !== Node.ELEMENT_NODE || node[buttonInvokerField]) {
+        return;
+      }
+      if (node.hasAttribute(attributeName)) {
+        candidates.add(node);
+      }
+      for (const el of node.querySelectorAll(`[${attributeName}]`)) {
+        candidates.add(el);
+      }
+    };
+    for (const record of records) {
+      if (record.type === "childList") {
+        for (const node of record.addedNodes) {
+          if (node.nodeType === Node.ELEMENT_NODE && !node[buttonInvokerField]) {
+            recheckMissingTargets = true;
+            addInvokers(node);
+          }
+        }
+        continue;
+      }
+      const el = record.target;
+      switch (record.attributeName) {
+        case attributeName:
+          if (record.oldValue !== null) {
+            // Changing the `interestfor` attribute removes interest, without
+            // firing events.
+            resetInterestState(el);
+          }
+          if (el.getAttribute(attributeName) !== "") {
+            el[explicitTargetField] = null;
+          }
+          candidates.add(el);
+          break;
+        case "id":
+          recheckMissingTargets = true;
+          break;
+        default:
+          // `href` or `disabled`, which affect invoker validity.
+          addInvokers(el);
+          break;
+      }
+    }
+    // Invokers or targets that were removed from the document lose interest,
+    // without firing events.
+    for (const invoker of [...invokersWithInterest]) {
+      const target = invoker[dataField].target;
+      if (!invoker.isConnected || !target || !target.isConnected) {
+        resetInterestState(invoker);
+      }
+    }
+    if (recheckMissingTargets) {
+      for (const invoker of invokersMissingTarget) {
+        candidates.add(invoker);
+      }
+    }
+    // Keep existing interest buttons next to their invokers, and remove them
+    // if their invoker is no longer valid. This avoids reading styles.
+    for (const invoker of [...invokersWithButtons]) {
+      if (candidates.has(invoker)) {
+        continue;
+      }
+      if (!wantsInterestButton(invoker)) {
+        setInterestButton(invoker, null);
+      } else if (invoker.nextSibling !== invoker[buttonField]) {
+        invoker.after(invoker[buttonField]);
+      }
+    }
+    updateInterestButtons(candidates);
+  }
+
+  function observeMutations() {
+    new MutationObserver(handleMutations).observe(document, {
+      childList: true,
+      subtree: true,
+      attributes: true,
+      attributeOldValue: true,
+      attributeFilter: [attributeName, "id", "href", "disabled"],
+    });
+  }
+
   // Attach listeners
   function addEventHandlers() {
     const handler = (e, source) => {
-      for (let el = e.target; el; el = el.parentElement) {
+      // Use the composed path, so that invokers in open shadow roots work.
+      const path = e.composedPath();
+      const start = path.length ? path[0] : e.target;
+      if (!(start instanceof Element)) {
+        return;
+      }
+      for (let el = start; el; el = getParentForInterest(el)) {
         HandleInterestHoverOrFocus(el, source);
       }
     };
@@ -448,9 +884,16 @@
     document.body.addEventListener("focusin", (e) => handler(e, Source.Focus));
     document.body.addEventListener("focusout", (e) => handler(e, Source.Blur));
     document.body.addEventListener("keydown", (e) => {
-      if (e.key === "Escape") {
-        invokersWithInterest.forEach((invoker) => {
-          clearState(invoker, true);
+      if (e.key === "Escape" && !e.defaultPrevented) {
+        // Lose interest in all invokers, most recent first. These
+        // `loseinterest` events are not cancelable.
+        [...invokersWithInterest].reverse().forEach((invoker) => {
+          GainOrLoseInterest(
+            invoker,
+            invoker[dataField].target,
+            InterestState.NoInterest,
+            { force: true }
+          );
         });
       }
     });
@@ -462,7 +905,15 @@
       if (invoker) {
         initializeDataField(invoker);
         invoker[dataField].longPressTimer = setTimeout(() => {
-          GainOrLoseInterest(invoker, GetInterestForTarget(invoker), InterestState.FullInterest);
+          // Long-press shows interest immediately, and that interest is not
+          // lost by de-hovering or blurring the invoker.
+          if (invoker[dataField].state === InterestState.NoInterest) {
+            GainOrLoseInterest(
+              invoker,
+              GetInterestForTarget(invoker),
+              InterestState.ExplicitInterest
+            );
+          }
           invoker[dataField].longPressTimer = null;
         }, longPressTime);
       }
@@ -486,15 +937,90 @@
     const style = document.createElement("style");
     style.textContent = `@property ${interestDelayStartProp} {syntax: "normal | <time>"; inherits: false; initial-value: normal;}
       @property ${interestDelayEndProp} {syntax: "normal | <time>"; inherits: false; initial-value: normal;}
-      @property ${interestDelayProp} {syntax: "[ normal | <time> ]{1,2}"; inherits: false; initial-value: normal;}`;
+      @property ${interestDelayProp} {syntax: "[ normal | <time> ]{1,2}"; inherits: false; initial-value: normal;}
+      @property ${interestButtonContentProp} {syntax: "*"; inherits: false;}`;
     document.head.appendChild(style);
-    document[dataField] = { globalPropsStyle: style };
+    // Equivalents of the UA stylesheet rules for interest invokers. These are
+    // inserted first, and use :where(), so that author styles take precedence.
+    const button = `span.${interestButtonClass}[aria-hidden]`;
+    const uaStyle = document.createElement("style");
+    uaStyle.textContent = `:where(button[${attributeName}]) {
+        -webkit-user-select: none;
+        user-select: none;
+      }
+      :where(${button}) {
+        display: inline-block;
+        vertical-align: middle;
+        color: inherit;
+        background-color: transparent;
+        box-sizing: border-box;
+        min-inline-size: 24px;
+        min-block-size: 24px;
+        min-block-size: max(24px, 1lh);
+        align-content: center;
+        text-align: center;
+        -webkit-user-select: none;
+        user-select: none;
+        cursor: help;
+      }
+      :where(${button}:hover) {
+        background-color: color-mix(in oklab, currentColor 10%, transparent);
+      }
+      :where(${button}:active) {
+        background-color: color-mix(in oklab, currentColor 20%, transparent);
+      }
+      :where(${button})::before {
+        content: var(${interestButtonInternalContentProp});
+      }`;
+    document.head.prepend(uaStyle);
+    document[dataField] = { globalPropsStyle: style, uaStyle };
+  }
+
+  // The `interestForElement` IDL attribute, which reflects the `interestfor`
+  // content attribute as an element reference.
+  function installInterestForElement() {
+    const descriptor = {
+      configurable: true,
+      enumerable: true,
+      get() {
+        return getAttrAssociatedElement(this);
+      },
+      set(value) {
+        if (value === null || value === undefined) {
+          this[explicitTargetField] = null;
+          this.removeAttribute(attributeName);
+        } else if (value instanceof Element) {
+          this[explicitTargetField] = value;
+          this.setAttribute(attributeName, "");
+        } else {
+          throw new TypeError(
+            "Failed to set the 'interestForElement' property: The provided value is not of type 'Element'."
+          );
+        }
+      },
+    };
+    [
+      window.HTMLButtonElement,
+      window.HTMLAnchorElement,
+      window.HTMLAreaElement,
+      window.SVGAElement,
+    ].forEach((iface) => {
+      if (
+        iface &&
+        !Object.prototype.hasOwnProperty.call(iface.prototype, "interestForElement")
+      ) {
+        Object.defineProperty(iface.prototype, "interestForElement", descriptor);
+      }
+    });
   }
+  installInterestForElement();
 
   // Initialize
   function init() {
     registerCustomProperties();
     addEventHandlers();
+    observeMutations();
+    updateInterestButtons(document.querySelectorAll(`[${attributeName}]`));
     console.log(`interestfor polyfill installed (native: ${nativeSupported}).`);
   }
   if (document.readyState === "complete") {

package/src/interestfor.min.js

@@ -5,4 +5,4 @@
 // LICENSE file in the root directory of this source tree.
 
 
-!function(){const e="interest",t="loseinterest",n="--interest-delay-start",r="--interest-delay-end",o="--interest-delay",s="__interestForData",i="__interestForTargetData",a=new Set;let l=!1;if(window.interestForPolyfillInstalled)return;window.interestForPolyfillInstalled=!0;const c=HTMLButtonElement.prototype.hasOwnProperty("interestForElement");if(c&&!window.interestForUsePolyfillAlways)return;if(c){const n=e=>{e.isTrusted&&(e.preventDefault(),e.stopImmediatePropagation())};document.body.addEventListener(e,n,{capture:!0}),document.body.addEventListener(t,n,{capture:!0})}window.InterestEvent||(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 u="none",d="full",m="hover",f="dehover",h="focus",g="blur";function p(e){return e&&"function"==typeof e.getRootNode?e.getRootNode():e&&e.parentNode?p(e.parentNode):e}function y(t,n,r){if(!t||!n)return!1;if(!t.isConnected||T(t)!==n||r===u&&b(n)!==t)return!1;if(r!==u){const o=b(n);if(o){if(o===t)return o[s].clearLostTask(),!1;if(!y(o,n,u))return!1;if(!t.isConnected||T(t)!==n)return!1}return function(t,n){const r=t[s],o=T(t);if(n!==d)throw new Error("Invalid state");if(r.state!==u)throw new Error("Invalid state");if(!o.dispatchEvent(new InterestEvent(e,{source:t})))return;try{o.showPopover({source:t})}catch{}if(r.state=d,o[i]||(o[i]={}),o[i].invoker=t,o.hasAttribute("popover")&&(o[i].toggleListener=L,o.addEventListener("toggle",L)),a.add(t),t.classList.add("interest-source"),o.classList.add("interest-target"),P(o)||t.setAttribute("aria-expanded","true"),"none"===getComputedStyle(t).anchorName&&"auto"===getComputedStyle(o).positionAnchor){const e=`--interest-anchor-${Math.random().toString(36).substring(2)}`;t.style.anchorName=e,o.style.positionAnchor=e,r.anchorName=e}return!0}(t,r)}return k(t),!0}function v(e){const t=1e3*w(e,r);!isFinite(t)||t<0||(e[s].clearLostTask(),e[s].lostTimer=setTimeout(()=>{y(e,T(e),u)},t))}function b(e){const t=e[i]?.invoker||null;return t&&t[s]?.state!==u?t:null}function T(e){const t=e.getAttribute("interestfor");return document.getElementById(t)}function L(e){const t=e.target;if("closed"===e.newState){const e=t[i]?.invoker;e&&y(e,t,u)}}function E(e){const t=String(e).trim(),n=t.match(/^([\d.]+)s$/);if(n)return parseFloat(n[1]);const r=t.match(/^([\d.]+)ms$/);return r?parseFloat(r[1])/1e3:parseFloat(t)||0}function w(e,t){const r=getComputedStyle(e),s=r.getPropertyValue(t).trim();if("normal"!==s.toLowerCase())return E(s);const i=r.getPropertyValue(o).trim();if(i&&"normal"!==i.toLowerCase()){const e=i.split(/\s+/).filter(e=>e.length>0);if(e.length>0){const r=e[0],o=e.length>1?e[1]:r;let s;if(s=t===n?r:o,"normal"!==s.toLowerCase())return E(s)}}return t===n?.5:.25}function k(e,n=!1){const r=e[s];if(clearTimeout(r.gainedTimer),clearTimeout(r.lostTimer),r.state!==u){const o=T(e),s=o.dispatchEvent(new InterestEvent(t,{source:e}));if(!n&&!s)return;try{o.hidePopover()}catch{}o[i]?.toggleListener&&o.removeEventListener("toggle",o[i].toggleListener),o[i]=null,a.delete(e),e.classList.remove("interest-source"),o.classList.remove("interest-target"),P(o)||e.setAttribute("aria-expanded","false"),r.anchorName&&(e.style.anchorName="",o.style.positionAnchor="",r.anchorName=null),r.state=u}}const A=["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 P(e){if("hint"!==e.getAttribute("popover")?.toLowerCase())return!1;if(e.querySelector(A))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 S(e){if(e[s])return;e[s]={state:u,gainedTimer:null,lostTimer:null,longPressTimer:null,clearGainedTask(){clearTimeout(this.gainedTimer)},clearLostTask(){clearTimeout(this.lostTimer)}};const t=T(e);t&&function(e,t){P(t)?e.setAttribute("aria-describedby",t.id):(e.setAttribute("aria-details",t.id),e.setAttribute("aria-expanded","false"),t.hasAttribute("role")||t.setAttribute("role","tooltip"))}(e,t)}function C(e,t){if(l)return;if(!e.isConnected)return;if(!T(e)){const n=e.closest(".interest-target");if(n){const r=b(n);r&&(t===m||t===h?r[s].clearLostTask():t!==g&&e.matches(":hover")||v(r))}return}S(e);const r=e[s],o=b(e);t===m||t===h?(r.clearLostTask&&r.clearLostTask(),o&&o[s].clearLostTask(),function(e,t){const r=1e3*w(e,n);!isFinite(r)||r<0||(e[s].clearGainedTask(),e[s].gainedTimer=setTimeout(()=>{y(e,T(e),t)},r))}(e,d)):(r.clearGainedTask&&r.clearGainedTask(),r.state!==u&&v(e),o&&(o[s].clearGainedTask(),t!==g&&e.matches(":hover")||v(o)))}function x(){!function(){const e=document.createElement("style");e.textContent=`@property ${n} {syntax: "normal | <time>"; inherits: false; initial-value: normal;}\n      @property ${r} {syntax: "normal | <time>"; inherits: false; initial-value: normal;}\n      @property ${o} {syntax: "[ normal | <time> ]{1,2}"; inherits: false; initial-value: normal;}`,document.head.appendChild(e),document[s]={globalPropsStyle:e}}(),function(){const e=(e,t)=>{for(let n=e.target;n;n=n.parentElement)C(n,t)};document.body.addEventListener("mouseover",t=>e(t,m)),document.body.addEventListener("mouseout",t=>e(t,f)),document.body.addEventListener("focusin",t=>e(t,h)),document.body.addEventListener("focusout",t=>e(t,g)),document.body.addEventListener("keydown",e=>{"Escape"===e.key&&a.forEach(e=>{k(e,!0)})}),document.body.addEventListener("touchstart",e=>{l=!0;const t=e.target.closest("button[interestfor]");t&&(S(t),t[s].longPressTimer=setTimeout(()=>{y(t,T(t),d),t[s].longPressTimer=null},500))});const t=e=>{const t=e.target.closest("button[interestfor]");t&&t[s]?.longPressTimer&&(clearTimeout(t[s].longPressTimer),t[s].longPressTimer=null)};document.body.addEventListener("touchend",e=>{t(e),l=!1}),document.body.addEventListener("touchmove",t)}(),console.log(`interestfor polyfill installed (native: ${c}).`)}"complete"===document.readyState?x():window.addEventListener("load",x)}();
+!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,y=new Set;let g=!1;if(window.interestForPolyfillInstalled)return;window.interestForPolyfillInstalled=!0;const w=HTMLButtonElement.prototype.hasOwnProperty("interestForElement");if(w&&!window.interestForUsePolyfillAlways)return;if(w){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.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=S(e);return t!==S(this.target||document)?t.host:e}});const E="none",v="full",T="explicit",L="hover",A="dehover",x="focus",k="blur";function S(e){return e&&"function"==typeof e.getRootNode?e.getRootNode():e&&e.parentNode?S(e.parentNode):e}function N(e,r,o,s={}){if(!e||!r)return!1;if(!e.isConnected||I(e)!==r||o===E&&F(r)!==e)return!1;if(o!==E){q(e),e[c].state!==E&&e[c].target!==r&&H(e);const n=F(r);if(n){if(n===e)return o===T&&(n[c].state=T),n[c].clearLostTask(),!1;if(!N(n,r,E))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!==E)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(h.add(e),e.classList.add("interest-source"),n.classList.add("interest-target"),G(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===E)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;H(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 P(e){const t=1e3*V(e,o);if(!_(t))return;const n=e[c];n.clearLostTask();const r=n.target;n.lostTimer=setTimeout(()=>{N(e,r,E)},t)}function F(e){const t=e[u]?.invoker||null;if(!t)return null;const n=t[c];return n&&n.state!==E&&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=S(e);let r=S(t);for(;r;){if(r===n)return!0;r=r instanceof ShadowRoot?S(r.host):null}return!1}(r,t)?r:null;if(""===n)return null;const o=S(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)}N(n,t,E,{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 V(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 H(e){const t=e[c];if(!t)return;if(clearTimeout(t.gainedTimer),clearTimeout(t.lostTimer),t.state===E)return;const n=t.target;h.delete(e),e.classList.remove("interest-source"),n&&(n[u]?.invoker===e&&(n.removeEventListener("beforetoggle",M),n[u]=null,n.classList.remove("interest-target")),G(n)||e.setAttribute("aria-expanded","false")),t.anchorName&&(e.style.anchorName="",n&&(n.style.positionAnchor=""),t.anchorName=null),t.state=E,t.target=null}const O=["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 G(e){if("hint"!==e.getAttribute("popover")?.toLowerCase())return!1;if(e.querySelector(O))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 q(e){if(e[c])return;e[c]={state:E,target:null,gainedTimer:null,lostTimer:null,longPressTimer:null,suppressNextFocusInterest:!1,clearGainedTask(){clearTimeout(this.gainedTimer)},clearLostTask(){clearTimeout(this.lostTimer)}};const t=I(e);t&&function(e,t){G(t)?e.setAttribute("aria-describedby",t.id):(e.setAttribute("aria-details",t.id),e.setAttribute("aria-expanded","false"),t.hasAttribute("role")||t.setAttribute("role","tooltip"))}(e,t)}function D(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 z(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=D(e);o&&!t.has(o)&&n(o)};return n(e),t}function j(e,t){if(g)return;if(!e.isConnected)return;const n=I(e);n&&q(e);const o=e[c];if(t===L||t===x){let s=!1;o&&(o.clearLostTask(),s=t===x&&o.suppressNextFocusInterest,o.suppressNextFocusInterest=!1);for(const t of z(e))t[c].clearLostTask();n&&!s&&o.state===E&&function(e,t){const n=I(e);if(!n)return;const o=1e3*V(e,r);_(o)&&(e[c].clearGainedTask(),e[c].gainedTimer=setTimeout(()=>{N(e,n,t)},o))}(e,v)}else if(o&&(o.clearGainedTask(),o.state===v&&P(e)),t===k||!e.matches(":hover"))for(const t of z(e))P(t)}function R(e){return e instanceof HTMLElement&&"area"!==e.localName&&!!e.parentNode&&!!I(e)}function U(e){const t=getComputedStyle(e).getPropertyValue(i).trim();return t&&"none"!==t&&"normal"!==t?t:null}function J(){const e=this[f];e&&N(e,I(e),T)}function K(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",J),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 Q(t){const n=[];for(const r of t){let t=null;r.isConnected&&r.hasAttribute(e)?R(r)?(y.delete(r),t=U(r)):y.add(r):y.delete(r),n.push([r,t])}for(const[e,t]of n)K(e,t)}function W(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&&H(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||H(e)}if(r)for(const e of y)n.add(e);for(const e of[...b])n.has(e)||(R(e)?e.nextSibling!==e[d]&&e.after(e[d]):K(e,null));Q(n)}function X(){!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: "[ normal | <time> ]{1,2}"; inherits: false; initial-value: normal;}\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=D(e))j(e,t)};document.body.addEventListener("mouseover",t=>e(t,L)),document.body.addEventListener("mouseout",t=>e(t,A)),document.body.addEventListener("focusin",t=>e(t,x)),document.body.addEventListener("focusout",t=>e(t,k)),document.body.addEventListener("keydown",e=>{"Escape"!==e.key||e.defaultPrevented||[...h].reverse().forEach(e=>{N(e,e[c].target,E,{force:!0})})}),document.body.addEventListener("touchstart",e=>{g=!0;const t=e.target.closest("button[interestfor]");t&&(q(t),t[c].longPressTimer=setTimeout(()=>{t[c].state===E&&N(t,I(t),T),t[c].longPressTimer=null},500))});const t=e=>{const t=e.target.closest("button[interestfor]");t&&t[c]?.longPressTimer&&(clearTimeout(t[c].longPressTimer),t[c].longPressTimer=null)};document.body.addEventListener("touchend",e=>{t(e),g=!1}),document.body.addEventListener("touchmove",t)}(),new MutationObserver(W).observe(document,{childList:!0,subtree:!0,attributes:!0,attributeOldValue:!0,attributeFilter:[e,"id","href","disabled"]}),Q(document.querySelectorAll(`[${e}]`)),console.log(`interestfor polyfill installed (native: ${w}).`)}!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")&&Object.defineProperty(e.prototype,"interestForElement",t)})}(),"complete"===document.readyState?X():window.addEventListener("load",X)}();

package/test/basic_test.html

@@ -4,8 +4,12 @@
 
 <a interestfor=foo href=bar>Link - hover me, don't click me</a>
 <button interestfor=foo>
-  <span style="margin:10px;">Button - hover me, don't click me</span></a>
+  <span style="margin:10px;">Button - hover me, don't click me</span></button>
 <div popover id=foo>Popover</div>
+<p>
+  <a interestfor=bar href=bar class=with-button>Link with an interest button - click the "?"</a>
+</p>
+<div popover id=bar>Popover shown by the interest button</div>
 
 <style>
   [interestfor] {
@@ -23,4 +27,12 @@
   [popover] {
     position-area: right center;
   }
+  /* Native ::interest-button */
+  .with-button::interest-button {
+    content: "?";
+  }
+  /* Polyfilled ::interest-button */
+  .with-button {
+    --interest-button-content: "?";
+  }
 </style>