interestfor 1.0.3 → 1.0.5

package/COPYRIGHT

@@ -0,0 +1,7 @@
+// Copyright (c) 2025, Mason Freed
+// All rights reserved.
+//
+// This source code is licensed under the BSD-style license found in the
+// LICENSE file in the root directory of this source tree.
+
+

package/README.md

@@ -29,18 +29,21 @@ upon receiving and losing interest.
 Again, this is a quick summary. For the complete details, please [read the
 explainer](https://open-ui.org/components/interest-invokers.explainer).
 
-## Touchscreen not supported
-
-This polyfill will not provide touchscreen users with any way to show interest
-in the invoker, because on touchscreen, long-press is the user-understood way to
-"show interest" in an element. On today's browsers, long-pressing a link element
-brings up a useful context menu that contains items like "Share" and "Open in
-new tab". In order for the polyfill to support interest on mobile, that context
-menu would need to 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 developers want. So
-this polyfill does nothing on mobile touchscreen.
+## 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.
+
+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
+context menu that contains items like "Share" and "Open in new tab". In order
+for the polyfill to support interest on links, that context menu would need to
+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.
 
 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
@@ -54,7 +57,7 @@ browsers:
 
 ## Implementation
 The polyfill adds event listeners to document.body that monitor for hover
-or keyboard events relevant fo the `interestfor` API. When interesting
+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`
 events on the target of the `interestfor` attribute. If the
@@ -69,10 +72,22 @@ native feature:
 
   ```css
   [interestfor] {
-    interest-show-delay: 400ms;
-    --interest-show-delay: 400ms;
-    interest-hide-delay: 200ms;
-    --interest-hide-delay: 200ms;
+    interest-delay-start: 400ms;
+    --interest-delay-start: 400ms;
+    interest-delay-end: 200ms;
+    --interest-delay-end: 200ms;
+  }
+  /* Or, use the shorthand: */
+  [interestfor] {
+    interest-delay: 400ms 200ms;
+    --interest-delay: 400ms 200ms;
+  }
+  /* The keyword `normal` can also be used to specify the default delay: */
+  [interestfor].no-show-delay {
+    interest-delay-start: 0s;
+    --interest-delay-start: 0s;
+    interest-delay-end: normal;
+    --interest-delay-end: normal;
   }
   ```
 
@@ -80,19 +95,19 @@ native feature:
   implemented as regular class names, so again add both to your stylesheet:
 
   ```css
-  :is([interestfor]:has-interest),
-  [interestfor].has-interest {
+  :is([interestfor]:interest-source),
+  [interestfor].interest-source {
     /* invoker styles */
   }
-  :is([popover]:target-of-interest),
-  [popover].target-of-interest {
+  :is([popover]:interest-target),
+  [popover].interest-target {
     /* target popover styles */
   }
   ```
 
   Note the `:is()` wrapped around the "normal" selector for the real pseudo
   class names. This is to avoid the entire selector being invalidated if the
-  browser does not recognize the native pseudo class (e.g. `:has-interest`).
+  browser does not recognize the native pseudo class (e.g. `:interest-source`).
 
 
 ## Tests
@@ -104,13 +119,6 @@ polyfill (optionally minified) or the native feature. You can run tests directly
 from this repo,
 [here](https://mfreed7.github.io/interestfor/test/test.html).
 
-## Things that don't (yet?) work
-
-These things are currently not handled correctly by this polyfill:
-
-- There is no support for the `--interest-delay` shorthand.
-- There is no touchscreen support, as mentioned above.
-
 ## Improvements / Bugs
 
 If you find issues with the polyfill, feel free to file them [here](https://github.com/mfreed7/interestfor/issues).

package/build.sh

@@ -0,0 +1,20 @@
+#!/bin/bash
+
+# Exit on any error
+set -e
+
+BASE_DIR=$(pwd)
+SRC_DIR="${BASE_DIR}/src"
+BUILD_DIR="${BASE_DIR}/dist"
+SOURCE_FILE="${SRC_DIR}/interestfor.js"
+MINIFIED_FILE="${BUILD_DIR}/interestfor.min.js"
+OUTPUT_FILE="${SRC_DIR}/interestfor.min.js"
+
+# Minify the combined file
+terser "${SOURCE_FILE}" --compress --mangle --output "${MINIFIED_FILE}"
+
+cat COPYRIGHT "${MINIFIED_FILE}" > "${OUTPUT_FILE}"
+
+rm "${MINIFIED_FILE}"
+
+echo "--- Minified output to ${OUTPUT_FILE} ---"

package/package.json

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

package/src/interestfor.js

@@ -11,19 +11,21 @@
   const attributeName = "interestfor";
   const interestEventName = "interest";
   const loseInterestEventName = "loseinterest";
-  const showDelayProp = "--interest-show-delay";
-  const hideDelayProp = "--interest-hide-delay";
+  const interestDelayStartProp = "--interest-delay-start";
+  const interestDelayEndProp = "--interest-delay-end";
+  const interestDelayProp = "--interest-delay";
   const dataField = "__interestForData";
   const targetDataField = "__interestForTargetData";
+  const invokersWithInterest = new Set();
+  let touchInProgress = false;
 
   // Feature detection
   if (window.interestForPolyfillInstalled) {
     return;
   }
   window.interestForPolyfillInstalled = true;
-  const nativeSupported = HTMLButtonElement.prototype.hasOwnProperty(
-    "interestForElement"
-  );
+  const nativeSupported =
+    HTMLButtonElement.prototype.hasOwnProperty("interestForElement");
   if (nativeSupported && !window.interestForUsePolyfillAlways) {
     return;
   }
@@ -34,15 +36,18 @@
         e.preventDefault();
         e.stopImmediatePropagation();
       }
-    }
-    document.body.addEventListener(interestEventName,cancel,{capture:true});
-    document.body.addEventListener(loseInterestEventName,cancel,{capture:true});
+    };
+    document.body.addEventListener(interestEventName, cancel, {
+      capture: true,
+    });
+    document.body.addEventListener(loseInterestEventName, cancel, {
+      capture: true,
+    });
   }
 
   // Enum-like state and source
   const InterestState = {
     NoInterest: "none",
-    PartialInterest: "partial",
     FullInterest: "full",
   };
   const Source = {
@@ -50,6 +55,7 @@
     DeHover: "dehover",
     Focus: "focus",
     Blur: "blur",
+    Touch: "touch",
   };
 
   // Gain or lose interest
@@ -78,7 +84,10 @@
             return false;
           }
           // re-check preconditions
-          if (!invoker.isConnected || GetInterestForTarget(invoker) !== target) {
+          if (
+            !invoker.isConnected ||
+            GetInterestForTarget(invoker) !== target
+          ) {
             return false;
           }
         }
@@ -94,7 +103,7 @@
 
   // Schedule tasks
   function ScheduleInterestGainedTask(invoker, newState) {
-    const delay = getDelaySeconds(invoker, showDelayProp) * 1000;
+    const delay = getDelaySeconds(invoker, interestDelayStartProp) * 1000;
     if (!isFinite(delay) || delay < 0) {
       return;
     }
@@ -105,7 +114,7 @@
   }
 
   function ScheduleInterestLostTask(invoker) {
-    const delay = getDelaySeconds(invoker, hideDelayProp) * 1000;
+    const delay = getDelaySeconds(invoker, interestDelayEndProp) * 1000;
     if (!isFinite(delay) || delay < 0) {
       return;
     }
@@ -131,13 +140,63 @@
     return document.getElementById(id);
   }
 
+  function onPopoverToggle(e) {
+    const popover = e.target;
+    if (e.newState === 'closed') {
+      const invoker = popover[targetDataField]?.invoker;
+      if (invoker) {
+        GainOrLoseInterest(invoker, popover, InterestState.NoInterest);
+      }
+    }
+  }
+
+  function parseTimeValue(val) {
+    const s = String(val).trim();
+    const m_s = s.match(/^([\d.]+)s$/);
+    if (m_s) {
+      return parseFloat(m_s[1]);
+    }
+    const m_ms = s.match(/^([\d.]+)ms$/);
+    if (m_ms) {
+      return parseFloat(m_ms[1]) / 1000;
+    }
+    return parseFloat(s) || 0;
+  }
+
   function getDelaySeconds(el, prop) {
-    const raw = getComputedStyle(el).getPropertyValue(prop).trim();
-    const m = raw.match(/^([\d.]+)s$/);
-    if (m) {
-      return parseFloat(m[1]);
+    const style = getComputedStyle(el);
+    const longhandValue = style.getPropertyValue(prop).trim();
+
+    // Longhand has priority. If it's not 'normal', use it.
+    if (longhandValue.toLowerCase() !== 'normal') {
+        return parseTimeValue(longhandValue);
+    }
+
+    // Longhand is 'normal', so check shorthand. This isn't exactly                                                           │
+    // correct, since the longhand might have been explicitly set to                                                          │
+    // 'normal'.   
+    const shorthand = style.getPropertyValue(interestDelayProp).trim();
+    if (shorthand && shorthand.toLowerCase() !== 'normal') {
+        const parts = shorthand.split(/\s+/).filter((s) => s.length > 0);
+        if (parts.length > 0) {
+            const firstValue = parts[0];
+            const secondValue = parts.length > 1 ? parts[1] : firstValue;
+            let valueFromShorthand;
+            if (prop === interestDelayStartProp) {
+                valueFromShorthand = firstValue;
+            } else { // prop === interestDelayEndProp
+                valueFromShorthand = secondValue;
+            }
+
+            // If the value from the shorthand is not 'normal', use it.
+            if (valueFromShorthand.toLowerCase() !== 'normal') {
+                return parseTimeValue(valueFromShorthand);
+            }
+        }
     }
-    return parseFloat(raw) || 0;
+
+    // If we got here, the effective value is 'normal'. Return the default.
+    return prop === interestDelayStartProp ? 0.5 : 0.25;
   }
 
   // Actual state transitions
@@ -145,47 +204,38 @@
     const data = invoker[dataField];
     const target = GetInterestForTarget(invoker);
     switch (newState) {
-      case InterestState.PartialInterest:
-        if (data.state === InterestState.NoInterest) {
-          if (!target.dispatchEvent(new Event(interestEventName))) {
-            return;
-          }
-          try {
-            target.showPopover();
-          } catch {}
-        }
-        data.state = InterestState.PartialInterest;
-        if (!target[targetDataField]) {
-          target[targetDataField] = {};
-        }
-        target[targetDataField].invoker = invoker;
-        invoker.classList.add("has-partial-interest", "has-interest");
-        target.classList.add(
-          "target-of-partial-interest",
-          "target-of-interest"
-        );
-        disableFocusable(target);
-        break;
       case InterestState.FullInterest:
-        if (data.state !== InterestState.PartialInterest) {
-          if (!target.dispatchEvent(new Event(interestEventName))) {
-            return;
-          }
-          try {
-            target.showPopover();
-          } catch {}
+        if (data.state !== InterestState.NoInterest) {
+          throw new Error("Invalid state");
         }
+        target.dispatchEvent(new Event(interestEventName));
+        try {
+          target.showPopover({ source: invoker });
+        } catch {}
         data.state = InterestState.FullInterest;
         if (!target[targetDataField]) {
           target[targetDataField] = {};
         }
         target[targetDataField].invoker = invoker;
-        invoker.classList.remove("has-partial-interest");
-        invoker.classList.add("has-interest");
-        target.classList.remove("target-of-partial-interest");
-        target.classList.add("target-of-interest");
-        restoreFocusable(target);
+        if (target.hasAttribute('popover')) {
+          target[targetDataField].toggleListener = onPopoverToggle;
+          target.addEventListener('toggle', onPopoverToggle);
+        }
+        invokersWithInterest.add(invoker);
+        invoker.classList.add("interest-source");
+        target.classList.add("interest-target");
+        if (!isPlainHint(target)) {
+          invoker.setAttribute("aria-expanded", "true");
+        }
+        const anchorName = `--interest-anchor-${Math.random()
+          .toString(36)
+          .substring(2)}`;
+        invoker.style.anchorName = anchorName;
+        target.style.positionAnchor = anchorName;
+        data.anchorName = anchorName;
         break;
+      default:
+        throw new Error("Invalid state");
     }
     return true;
   }
@@ -196,19 +246,25 @@
     clearTimeout(data.lostTimer);
     if (data.state !== InterestState.NoInterest) {
       const target = GetInterestForTarget(invoker);
-      if (!target.dispatchEvent(new Event(loseInterestEventName))) {
-        return;
-      }
+      target.dispatchEvent(new Event(loseInterestEventName));
       try {
         target.hidePopover();
       } catch {}
+      if (target[targetDataField]?.toggleListener) {
+        target.removeEventListener('toggle', target[targetDataField].toggleListener);
+      }
       target[targetDataField] = null;
-      invoker.classList.remove("has-partial-interest", "has-interest");
-      target.classList.remove(
-        "target-of-partial-interest",
-        "target-of-interest"
-      );
-      restoreFocusable(target);
+      invokersWithInterest.delete(invoker);
+      invoker.classList.remove("interest-source");
+      target.classList.remove("interest-target");
+      if (!isPlainHint(target)) {
+        invoker.setAttribute("aria-expanded", "false");
+      }
+      if (data.anchorName) {
+        invoker.style.anchorName = "";
+        target.style.positionAnchor = "";
+        data.anchorName = null;
+      }
       data.state = InterestState.NoInterest;
     }
   }
@@ -227,51 +283,93 @@
     "[contenteditable]",
     '[tabindex]:not([tabindex="-1"])',
   ].join(",");
-  function disableFocusable(root) {
-    root.querySelectorAll(focusableSelector).forEach((el) => {
-      if (el.hasAttribute("data-original-tabindex")) {
-        return;
+
+  // Accessibility utilities
+  function isPlainHint(target) {
+    if (target.getAttribute("popover")?.toLowerCase() !== "hint") {
+      return false;
+    }
+    // Anything focusable is not plain.
+    if (target.querySelector(focusableSelector)) {
+      return false;
+    }
+    // Common structural/semantic elements that are not focusable.
+    const structuralSelector =
+      "h1,h2,h3,h4,h5,h6,ul,ol,li,table,nav,header,footer,main,aside,article,section,form,blockquote,details,summary,dialog";
+    if (target.querySelector(structuralSelector)) {
+      return false;
+    }
+    // Check for ARIA roles.
+    const elementsWithRoles = target.querySelectorAll("[role]");
+    for (const el of elementsWithRoles) {
+      const role = el.getAttribute("role").toLowerCase();
+      // Allowed roles are those that don't add semantics for a screen reader to explore.
+      if (!["presentation", "none", "generic", "image"].includes(role)) {
+        return false;
       }
-      const orig = el.getAttribute("tabindex");
-      el.setAttribute("data-original-tabindex", orig === null ? "none" : orig);
-      el.setAttribute("tabindex", "-1");
-    });
+    }
+    return true;
   }
-  function restoreFocusable(root) {
-    root.querySelectorAll("[data-original-tabindex]").forEach((el) => {
-      const orig = el.getAttribute("data-original-tabindex");
-      if (orig === "none") {
-        el.removeAttribute("tabindex");
-      } else {
-        el.setAttribute("tabindex", orig);
+
+  function setupAccessibility(invoker, target) {
+    if (isPlainHint(target)) {
+      invoker.setAttribute("aria-describedby", target.id);
+    } else {
+      // Rich hint
+      invoker.setAttribute("aria-details", target.id);
+      invoker.setAttribute("aria-expanded", "false");
+      if (!target.hasAttribute("role")) {
+        target.setAttribute("role", "tooltip");
       }
-      el.removeAttribute("data-original-tabindex");
-    });
+    }
+  }
+
+  function initializeDataField(el) {
+    if (el[dataField]) return;
+    el[dataField] = {
+      state: InterestState.NoInterest,
+      gainedTimer: null,
+      lostTimer: null,
+      longPressTimer: null,
+      clearGainedTask() {
+        clearTimeout(this.gainedTimer);
+      },
+      clearLostTask() {
+        clearTimeout(this.lostTimer);
+      },
+    };
+    const target = GetInterestForTarget(el);
+    if (target) {
+      setupAccessibility(el, target);
+    }
   }
 
   function HandleInterestHoverOrFocus(el, source) {
+    if (touchInProgress) {
+      return;
+    }
     if (!el.isConnected) {
       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;
     }
-    let data = el[dataField];
-    if (!data) {
-      el[dataField] = {
-        state: InterestState.NoInterest,
-        gainedTimer: null,
-        lostTimer: null,
-        clearGainedTask() {
-          clearTimeout(this.gainedTimer);
-        },
-        clearLostTask() {
-          clearTimeout(this.lostTimer);
-        },
-      };
-      data = el[dataField];
-    }
+    initializeDataField(el);
+    const data = el[dataField];
     const upstreamInvoker = GetInterestInvoker(el);
 
     // Hover or focus
@@ -279,21 +377,8 @@
       data.clearLostTask && data.clearLostTask();
       if (upstreamInvoker) {
         upstreamInvoker[dataField].clearLostTask();
-        if (
-          upstreamInvoker[dataField].state === InterestState.PartialInterest
-        ) {
-          applyState(upstreamInvoker, InterestState.FullInterest);
-        }
       }
-      const needsPartialInterest =
-        source === Source.Focus &&
-        target.matches(":has(" + focusableSelector + ")");
-      ScheduleInterestGainedTask(
-        el,
-        needsPartialInterest
-          ? InterestState.PartialInterest
-          : InterestState.FullInterest
-      );
+      ScheduleInterestGainedTask(el, InterestState.FullInterest);
     } else {
       // Dehover or blur
       data.clearGainedTask && data.clearGainedTask();
@@ -324,51 +409,54 @@
       HandleInterestHoverOrFocus(e.target, Source.Blur)
     );
     document.body.addEventListener("keydown", (e) => {
-      let data = e.target[dataField];
-      if (!data) {
-        return;
-      }
-      if (data.state !== InterestState.PartialInterest) {
-        return;
+      if (e.key === "Escape") {
+        invokersWithInterest.forEach((invoker) => {
+          clearState(invoker);
+        });
       }
-      if (
-        e.key === "ArrowUp" &&
-        e.altKey &&
-        data.state === InterestState.PartialInterest
-      ) {
-        e.preventDefault();
-        applyState(e.target, InterestState.FullInterest);
+    });
+    // Touch support
+    const longPressTime = 500;
+    document.body.addEventListener("touchstart", (e) => {
+      touchInProgress = true;
+      const invoker = e.target.closest("button[interestfor]");
+      if (invoker) {
+        initializeDataField(invoker);
+        invoker[dataField].longPressTimer = setTimeout(() => {
+          GainOrLoseInterest(invoker, GetInterestForTarget(invoker), InterestState.FullInterest);
+          invoker[dataField].longPressTimer = null;
+        }, longPressTime);
       }
-      if (e.key === "Escape" && data.state !== InterestState.NoInterest) {
-        e.preventDefault();
-        clearState(e.target);
+    });
+    const cancelLongPress = (e) => {
+      const invoker = e.target.closest("button[interestfor]");
+      if (invoker && invoker[dataField]?.longPressTimer) {
+        clearTimeout(invoker[dataField].longPressTimer);
+        invoker[dataField].longPressTimer = null;
       }
+    };
+    document.body.addEventListener("touchend", (e) => {
+      cancelLongPress(e);
+      touchInProgress = false;
     });
+    document.body.addEventListener("touchmove", cancelLongPress);
   }
 
   // CSS registration
   function registerCustomProperties() {
     const style = document.createElement("style");
-    style.textContent = `@property ${showDelayProp} {syntax: "<time>"; inherits: false; initial-value: 0.5s;}
-      @property ${hideDelayProp} {syntax: "<time>"; inherits: false; initial-value: 0.5s;}`;
+    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;}`;
     document.head.appendChild(style);
     document[dataField] = { globalPropsStyle: style };
   }
-  function injectStyles() {
-    const style = document.createElement("style");
-    style.textContent = `.target-of-partial-interest::after { content: "{Press Alt+UpArrow to activate}"; display: block; color: darkgrey; font-size: 0.8em;}`;
-    document.head.appendChild(style);
-    document[dataField].globalHintStyle = style;
-  }
 
   // Initialize
   function init() {
     registerCustomProperties();
-    injectStyles();
     addEventHandlers();
-    console.log(
-      `interestfor polyfill installed (native: ${nativeSupported}).`
-    );
+    console.log(`interestfor polyfill installed (native: ${nativeSupported}).`);
   }
   if (document.readyState === "complete") {
     init();

package/src/interestfor.min.js

@@ -1,2 +1,8 @@
-!function(){let t="interest",e="loseinterest",r="--interest-show-delay",a="--interest-hide-delay",n="__interestForData",i="__interestForTargetData";if(window.interestForPolyfillInstalled)return;window.interestForPolyfillInstalled=!0;let s=HTMLButtonElement.prototype.hasOwnProperty("interestForElement");if(s&&!window.interestForUsePolyfillAlways)return;if(s){let l=t=>{t.isTrusted&&(t.preventDefault(),t.stopImmediatePropagation())};document.body.addEventListener(t,l,{capture:!0}),document.body.addEventListener(e,l,{capture:!0})}let o={NoInterest:"none",PartialInterest:"partial",FullInterest:"full"},d={Hover:"hover",DeHover:"dehover",Focus:"focus",Blur:"blur"};function u(t,e,r){if(!t||!e||!t.isConnected||p(t)!==e||r===o.NoInterest&&f(e)!==t)return!1;if(r!==o.NoInterest){let a=f(e);if(a){if(a===t)return a[n].clearLostTask(),!1;if(!u(a,e,o.NoInterest)||!t.isConnected||p(t)!==e)return!1}return h(t,r)}return v(t),!0}function c(t){let e=1e3*b(t,a);isFinite(e)&&!(e<0)&&(t[n].clearLostTask(),t[n].lostTimer=setTimeout(()=>{u(t,p(t),o.NoInterest)},e))}function f(t){let e=t[i]?.invoker||null;return e&&e[n]?.state!==o.NoInterest?e:null}function p(t){let e=t.getAttribute("interestfor");return document.getElementById(e)}function b(t,e){let r=getComputedStyle(t).getPropertyValue(e).trim(),a=r.match(/^([\d.]+)s$/);return a?parseFloat(a[1]):parseFloat(r)||0}function h(e,r){let a=e[n],s=p(e);switch(r){case o.PartialInterest:if(a.state===o.NoInterest){if(!s.dispatchEvent(new Event(t)))return;try{s.showPopover()}catch{}}a.state=o.PartialInterest,s[i]||(s[i]={}),s[i].invoker=e,e.classList.add("has-partial-interest","has-interest"),s.classList.add("target-of-partial-interest","target-of-interest"),function t(e){e.querySelectorAll(y).forEach(t=>{if(t.hasAttribute("data-original-tabindex"))return;let e=t.getAttribute("tabindex");t.setAttribute("data-original-tabindex",null===e?"none":e),t.setAttribute("tabindex","-1")})}(s);break;case o.FullInterest:if(a.state!==o.PartialInterest){if(!s.dispatchEvent(new Event(t)))return;try{s.showPopover()}catch{}}a.state=o.FullInterest,s[i]||(s[i]={}),s[i].invoker=e,e.classList.remove("has-partial-interest"),e.classList.add("has-interest"),s.classList.remove("target-of-partial-interest"),s.classList.add("target-of-interest"),g(s)}return!0}function v(t){let r=t[n];if(clearTimeout(r.gainedTimer),clearTimeout(r.lostTimer),r.state!==o.NoInterest){let a=p(t);if(!a.dispatchEvent(new Event(e)))return;try{a.hidePopover()}catch{}a[i]=null,t.classList.remove("has-partial-interest","has-interest"),a.classList.remove("target-of-partial-interest","target-of-interest"),g(a),r.state=o.NoInterest}}let y='a[href],area[href],input:not([disabled]),select:not([disabled]),textarea:not([disabled]),button:not([disabled]),iframe,object,embed,[contenteditable],[tabindex]:not([tabindex="-1"])';function g(t){t.querySelectorAll("[data-original-tabindex]").forEach(t=>{let e=t.getAttribute("data-original-tabindex");"none"===e?t.removeAttribute("tabindex"):t.setAttribute("tabindex",e),t.removeAttribute("data-original-tabindex")})}function m(t,e){if(!t.isConnected)return;let a=p(t);if(!a)return;let i=t[n];i||(t[n]={state:o.NoInterest,gainedTimer:null,lostTimer:null,clearGainedTask(){clearTimeout(this.gainedTimer)},clearLostTask(){clearTimeout(this.lostTimer)}},i=t[n]);let s=f(t);if(e===d.Hover||e===d.Focus){i.clearLostTask&&i.clearLostTask(),s&&(s[n].clearLostTask(),s[n].state===o.PartialInterest&&h(s,o.FullInterest));let l=e===d.Focus&&a.matches(":has("+y+")");!function t(e,a){let i=1e3*b(e,r);isFinite(i)&&!(i<0)&&(e[n].clearGainedTask(),e[n].gainedTimer=setTimeout(()=>{u(e,p(e),a)},i))}(t,l?o.PartialInterest:o.FullInterest)}else i.clearGainedTask&&i.clearGainedTask(),i.state!==o.NoInterest&&c(t),s&&(s[n].clearGainedTask(),e!==d.Blur&&t.matches(":hover")||c(s))}function I(){!function t(){let e=document.createElement("style");e.textContent=`@property ${r} {syntax: "<time>"; inherits: false; initial-value: 0.5s;}
-      @property ${a} {syntax: "<time>"; inherits: false; initial-value: 0.5s;}`,document.head.appendChild(e),document[n]={globalPropsStyle:e}}(),function t(){let e=document.createElement("style");e.textContent='.target-of-partial-interest::after { content: "{Press Alt+UpArrow to activate}"; display: block; color: darkgrey; font-size: 0.8em;}',document.head.appendChild(e),document[n].globalHintStyle=e}(),document.body.addEventListener("mouseover",t=>m(t.target,d.Hover)),document.body.addEventListener("mouseout",t=>m(t.target,d.DeHover)),document.body.addEventListener("focusin",t=>m(t.target,d.Focus)),document.body.addEventListener("focusout",t=>m(t.target,d.Blur)),document.body.addEventListener("keydown",t=>{let e=t.target[n];e&&e.state===o.PartialInterest&&("ArrowUp"===t.key&&t.altKey&&e.state===o.PartialInterest&&(t.preventDefault(),h(t.target,o.FullInterest)),"Escape"===t.key&&e.state!==o.NoInterest&&(t.preventDefault(),v(t.target)))}),console.log(`interestfor polyfill installed (native: ${s}).`)}"complete"===document.readyState?I():window.addEventListener("load",I)}();
+// Copyright (c) 2025, Mason Freed
+// All rights reserved.
+//
+// This source code is licensed under the BSD-style license found in the
+// 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",i="__interestForData",s="__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})}const d="none",u="full",m="hover",f="dehover",h="focus",g="blur";function y(t,n,r){if(!t||!n)return!1;if(!t.isConnected||b(t)!==n||r===d&&v(n)!==t)return!1;if(r!==d){const o=v(n);if(o){if(o===t)return o[i].clearLostTask(),!1;if(!y(o,n,d))return!1;if(!t.isConnected||b(t)!==n)return!1}return function(t,n){const r=t[i],o=b(t);if(n!==u)throw new Error("Invalid state");{if(r.state!==d)throw new Error("Invalid state");o.dispatchEvent(new Event(e));try{o.showPopover({source:t})}catch{}r.state=u,o[s]||(o[s]={}),o[s].invoker=t,o.hasAttribute("popover")&&(o[s].toggleListener=T,o.addEventListener("toggle",T)),a.add(t),t.classList.add("interest-source"),o.classList.add("interest-target"),P(o)||t.setAttribute("aria-expanded","true");const n=`--interest-anchor-${Math.random().toString(36).substring(2)}`;t.style.anchorName=n,o.style.positionAnchor=n,r.anchorName=n}return!0}(t,r)}return E(t),!0}function p(e){const t=1e3*w(e,r);!isFinite(t)||t<0||(e[i].clearLostTask(),e[i].lostTimer=setTimeout(()=>{y(e,b(e),d)},t))}function v(e){const t=e[s]?.invoker||null;return t&&t[i]?.state!==d?t:null}function b(e){const t=e.getAttribute("interestfor");return document.getElementById(t)}function T(e){const t=e.target;if("closed"===e.newState){const e=t[s]?.invoker;e&&y(e,t,d)}}function L(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),i=r.getPropertyValue(t).trim();if("normal"!==i.toLowerCase())return L(i);const s=r.getPropertyValue(o).trim();if(s&&"normal"!==s.toLowerCase()){const e=s.split(/\s+/).filter(e=>e.length>0);if(e.length>0){const r=e[0],o=e.length>1?e[1]:r;let i;if(i=t===n?r:o,"normal"!==i.toLowerCase())return L(i)}}return t===n?.5:.25}function E(e){const n=e[i];if(clearTimeout(n.gainedTimer),clearTimeout(n.lostTimer),n.state!==d){const r=b(e);r.dispatchEvent(new Event(t));try{r.hidePopover()}catch{}r[s]?.toggleListener&&r.removeEventListener("toggle",r[s].toggleListener),r[s]=null,a.delete(e),e.classList.remove("interest-source"),r.classList.remove("interest-target"),P(r)||e.setAttribute("aria-expanded","false"),n.anchorName&&(e.style.anchorName="",r.style.positionAnchor="",n.anchorName=null),n.state=d}}const k=["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(k))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 A(e){if(e[i])return;e[i]={state:d,gainedTimer:null,lostTimer:null,longPressTimer:null,clearGainedTask(){clearTimeout(this.gainedTimer)},clearLostTask(){clearTimeout(this.lostTimer)}};const t=b(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(!b(e)){const n=e.closest(".interest-target");if(n){const r=v(n);r&&(t===m||t===h?r[i].clearLostTask():t!==g&&e.matches(":hover")||p(r))}return}A(e);const r=e[i],o=v(e);t===m||t===h?(r.clearLostTask&&r.clearLostTask(),o&&o[i].clearLostTask(),function(e,t){const r=1e3*w(e,n);!isFinite(r)||r<0||(e[i].clearGainedTask(),e[i].gainedTimer=setTimeout(()=>{y(e,b(e),t)},r))}(e,u)):(r.clearGainedTask&&r.clearGainedTask(),r.state!==d&&p(e),o&&(o[i].clearGainedTask(),t!==g&&e.matches(":hover")||p(o)))}function F(){!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[i]={globalPropsStyle:e}}(),function(){document.body.addEventListener("mouseover",e=>C(e.target,m)),document.body.addEventListener("mouseout",e=>C(e.target,f)),document.body.addEventListener("focusin",e=>C(e.target,h)),document.body.addEventListener("focusout",e=>C(e.target,g)),document.body.addEventListener("keydown",e=>{"Escape"===e.key&&a.forEach(e=>{E(e)})}),document.body.addEventListener("touchstart",e=>{l=!0;const t=e.target.closest("button[interestfor]");t&&(A(t),t[i].longPressTimer=setTimeout(()=>{y(t,b(t),u),t[i].longPressTimer=null},500))});const e=e=>{const t=e.target.closest("button[interestfor]");t&&t[i]?.longPressTimer&&(clearTimeout(t[i].longPressTimer),t[i].longPressTimer=null)};document.body.addEventListener("touchend",t=>{e(t),l=!1}),document.body.addEventListener("touchmove",e)}(),console.log(`interestfor polyfill installed (native: ${c}).`)}"complete"===document.readyState?F():window.addEventListener("load",F)}();

package/test/basic_test.html

@@ -1,6 +1,22 @@
 <!DOCTYPE html>
 
-<script src="interestfor.min.js" async></script>
+<script src="../src/interestfor.js" async></script>
 
 <a interestfor=foo href=bar>Link - hover me, don't click me</a>
+<button interestfor=foo>Button - hover me, don't click me</a>
 <div popover id=foo>Popover</div>
+
+<style>
+  [interestfor] {
+    interest-delay: 600ms 300ms;
+    --interest-delay: 600ms 300ms;
+  }
+  :is([interestfor]:interest-source),
+  [interestfor].interest-source {
+    background-color: lightgreen;
+  }
+  :is([popover]:interest-target),
+  [popover].interest-target {
+    background-color: lightblue;
+  }
+</style>

package/test/test.html

@@ -199,7 +199,8 @@ async function waitForHoverOrFocus(type,element,target,timeMilliseconds) {
     const timeout = new Promise(resolve => setTimeout(() => {
       gotTimeout=true;
       resolve();
-    },timeMilliseconds));
+    },timeMilliseconds*1.5));
+    // Make sure the user doesn't leave too early:
     switch (type) {
       case 'hover':
         const mouseLeft = new Promise(resolve => element.addEventListener('mouseleave',resolve, {once:true}));
@@ -223,11 +224,22 @@ async function waitForHoverOrFocus(type,element,target,timeMilliseconds) {
   return {midEvents, midTargetOpen, endEvents: [...events], endTargetOpen: target.matches(':popover-open')};
 }
 
-async function testOne(invoker, target, type, description) {
+async function testOne(invoker, target, type, description, useShorthand = false) {
   assert_true(true,'---' + description,true);
   assert_false(target.matches(':popover-open'),'popover should start closed',true);
-  invoker.style.setProperty('--interest-show-delay',hoverTimeMilliseconds + 'ms');
-  invoker.style.setProperty('--interest-hide-delay',hoverTimeMilliseconds + 'ms');
+  if (useShorthand) {
+    invoker.style.setProperty('--interest-delay', `${hoverTimeMilliseconds}ms ${hoverTimeMilliseconds}ms`);
+    invoker.style.setProperty('interest-delay', `${hoverTimeMilliseconds}ms ${hoverTimeMilliseconds}ms`);
+    invoker.style.removeProperty('--interest-delay-start');
+    invoker.style.removeProperty('interest-delay-start');
+    invoker.style.removeProperty('--interest-delay-end');
+    invoker.style.removeProperty('interest-delay-end');
+  } else {
+    invoker.style.setProperty('--interest-delay-start',hoverTimeMilliseconds + 'ms');
+    invoker.style.setProperty('interest-delay-start',hoverTimeMilliseconds + 'ms');
+    invoker.style.setProperty('--interest-delay-end',hoverTimeMilliseconds + 'ms');
+    invoker.style.setProperty('interest-delay-end',hoverTimeMilliseconds + 'ms');
+  }
   invoker.classList.remove('hide');
 
   // Show interest in the invoker
@@ -290,6 +302,20 @@ async function testHarness() {
     await testOne(dynamic_invoker,dynamic_target,type,'Dynamically-added elements');
     dynamic_invoker.remove();
     dynamic_target.remove();
+
+    // Dynamically add elements for shorthand test:
+    const shorthand_invoker = document.createElement('a');
+    shorthand_invoker.href = 'foo';
+    shorthand_invoker.setAttribute('interestfor','shorthand_target');
+    shorthand_invoker.classList='hide test-element';
+    const shorthand_target = document.createElement('div');
+    shorthand_target.popover = 'auto';
+    shorthand_target.id = 'shorthand_target';
+    shorthand_target.classList = 'hide';
+    targets.append(shorthand_invoker,shorthand_target);
+    await testOne(shorthand_invoker,shorthand_target,type,'Dynamically-added elements (shorthand)', true);
+    shorthand_invoker.remove();
+    shorthand_target.remove();
   }
 
   // Test complete