interestfor 1.0.4 → 1.0.6

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

@@ -1,8 +1,10 @@
 # `interestfor` Polyfill
 
-A polyfill for the `interestfor` attribute. This is an emerging standard for
-an API that hopes to be implemented in browsers. See the explainer for all of
-the details for the "real" feature:
+A polyfill for the `interestfor` attribute. This is a new API for "interest
+interactions" that is in the process of being implemented in browsers. It will
+[likely ship soon in
+Chrome](https://groups.google.com/a/chromium.org/g/blink-dev/c/bX1G_yDt6W4?e=48417069).
+See the explainer for all of the details for the "real" feature:
 
   https://open-ui.org/components/interest-invokers.explainer/
 
@@ -29,18 +31,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
+## Touchscreen support
 
-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.
+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
@@ -74,6 +79,16 @@ native feature:
     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] {
+    interest-delay-end: normal;
+    --interest-delay-end: normal;
+  }
   ```
 
 - The CSS pseudo classes for detecting invoker and target interest states are
@@ -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.4",
+  "version": "1.0.6",
   "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,11 +11,13 @@
   const attributeName = "interestfor";
   const interestEventName = "interest";
   const loseInterestEventName = "loseinterest";
-  const showDelayProp = "--interest-delay-start";
-  const hideDelayProp = "--interest-delay-end";
+  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) {
@@ -53,6 +55,7 @@
     DeHover: "dehover",
     Focus: "focus",
     Blur: "blur",
+    Touch: "touch",
   };
 
   // Gain or lose interest
@@ -100,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;
     }
@@ -111,7 +114,7 @@
   }
 
   function ScheduleInterestLostTask(invoker) {
-    const delay = getDelaySeconds(invoker, hideDelayProp) * 1000;
+    const delay = getDelaySeconds(invoker, interestDelayEndProp) * 1000;
     if (!isFinite(delay) || delay < 0) {
       return;
     }
@@ -137,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);
     }
-    return parseFloat(raw) || 0;
+
+    // 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);
+            }
+        }
+    }
+
+    // If we got here, the effective value is 'normal'. Return the default.
+    return prop === interestDelayStartProp ? 0.5 : 0.25;
   }
 
   // Actual state transitions
@@ -164,16 +217,22 @@
           target[targetDataField] = {};
         }
         target[targetDataField].invoker = invoker;
+        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;
-        restoreFocusable(target);
         break;
       default:
         throw new Error("Invalid state");
@@ -191,16 +250,21 @@
       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 (!isPlainHint(target)) {
+        invoker.setAttribute("aria-expanded", "false");
+      }
       if (data.anchorName) {
         invoker.style.anchorName = "";
         target.style.positionAnchor = "";
         data.anchorName = null;
       }
-      restoreFocusable(target);
       data.state = InterestState.NoInterest;
     }
   }
@@ -219,29 +283,71 @@
     "[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;
     }
@@ -262,21 +368,8 @@
       }
       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
@@ -303,33 +396,55 @@
 
   // Attach listeners
   function addEventHandlers() {
-    document.body.addEventListener("mouseover", (e) =>
-      HandleInterestHoverOrFocus(e.target, Source.Hover)
-    );
-    document.body.addEventListener("mouseout", (e) =>
-      HandleInterestHoverOrFocus(e.target, Source.DeHover)
-    );
-    document.body.addEventListener("focusin", (e) =>
-      HandleInterestHoverOrFocus(e.target, Source.Focus)
-    );
-    document.body.addEventListener("focusout", (e) =>
-      HandleInterestHoverOrFocus(e.target, Source.Blur)
-    );
+    const handler = (e, source) => {
+      for (let el = e.target; el; el = el.parentElement) {
+        HandleInterestHoverOrFocus(el, source);
+      }
+    };
+    document.body.addEventListener("mouseover", (e) => handler(e, Source.Hover));
+    document.body.addEventListener("mouseout", (e) => handler(e, Source.DeHover));
+    document.body.addEventListener("focusin", (e) => handler(e, Source.Focus));
+    document.body.addEventListener("focusout", (e) => handler(e, Source.Blur));
     document.body.addEventListener("keydown", (e) => {
       if (e.key === "Escape") {
         invokersWithInterest.forEach((invoker) => {
-          e.preventDefault();
           clearState(invoker);
         });
       }
     });
+    // 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);
+      }
+    });
+    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 };
   }

package/src/interestfor.min.js

@@ -1 +1,8 @@
-!function(){const e="interestfor",t="interest",n="loseinterest",r="--interest-delay-start",o="--interest-delay-end",s="__interestForData",i="__interestForTargetData",a=new Set;if(window.interestForPolyfillInstalled)return;window.interestForPolyfillInstalled=!0;const l=HTMLButtonElement.prototype.hasOwnProperty("interestForElement");if(l&&!window.interestForUsePolyfillAlways)return;if(l){const e=e=>{e.isTrusted&&(e.preventDefault(),e.stopImmediatePropagation())};document.body.addEventListener(t,e,{capture:!0}),document.body.addEventListener(n,e,{capture:!0})}const d={NoInterest:"none",FullInterest:"full"},c={Hover:"hover",DeHover:"dehover",Focus:"focus",Blur:"blur"};function u(e,n,r){if(!e||!n)return!1;if(!e.isConnected||v(e)!==n||r===d.NoInterest&&m(n)!==e)return!1;if(r!==d.NoInterest){const o=m(n);if(o){if(o===e)return o[s].clearLostTask(),!1;if(!u(o,n,d.NoInterest))return!1;if(!e.isConnected||v(e)!==n)return!1}return function(e,n){const r=e[s],o=v(e);if(n!==d.FullInterest)throw new Error("Invalid state");if(r.state!==d.NoInterest)throw new Error("Invalid state");o.dispatchEvent(new Event(t));try{o.showPopover({source:e})}catch{}r.state=d.FullInterest,o[i]||(o[i]={}),o[i].invoker=e,a.add(e),e.classList.add("interest-source"),o.classList.add("interest-target"),p(o);return!0}(e,r)}return b(e),!0}function f(e){const t=1e3*y(e,o);!isFinite(t)||t<0||(e[s].clearLostTask(),e[s].lostTimer=setTimeout((()=>{u(e,v(e),d.NoInterest)}),t))}function m(e){const t=e[i]?.invoker||null;return t&&t[s]?.state!==d.NoInterest?t:null}function v(t){const n=t.getAttribute(e);return document.getElementById(n)}function y(e,t){const n=getComputedStyle(e).getPropertyValue(t).trim(),r=n.match(/^([\d.]+)s$/);return r?parseFloat(r[1]):parseFloat(n)||0}function b(e){const t=e[s];if(clearTimeout(t.gainedTimer),clearTimeout(t.lostTimer),t.state!==d.NoInterest){const r=v(e);r.dispatchEvent(new Event(n));try{r.hidePopover()}catch{}r[i]=null,a.delete(e),e.classList.remove("interest-source"),r.classList.remove("interest-target"),p(r),t.state=d.NoInterest}}["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){e.querySelectorAll("[data-original-tabindex]").forEach((e=>{const t=e.getAttribute("data-original-tabindex");"none"===t?e.removeAttribute("tabindex"):e.setAttribute("tabindex",t),e.removeAttribute("data-original-tabindex")}))}function T(e,t){if(!e.isConnected)return;if(!v(e))return;let n=e[s];n||(e[s]={state:d.NoInterest,gainedTimer:null,lostTimer:null,clearGainedTask(){clearTimeout(this.gainedTimer)},clearLostTask(){clearTimeout(this.lostTimer)}},n=e[s]);const o=m(e);t===c.Hover||t===c.Focus?(n.clearLostTask&&n.clearLostTask(),o&&o[s].clearLostTask(),function(e,t){const n=1e3*y(e,r);!isFinite(n)||n<0||(e[s].clearGainedTask(),e[s].gainedTimer=setTimeout((()=>{u(e,v(e),t)}),n))}(e,d.FullInterest)):(n.clearGainedTask&&n.clearGainedTask(),n.state!==d.NoInterest&&f(e),o&&(o[s].clearGainedTask(),t!==c.Blur&&e.matches(":hover")||f(o)))}function h(){!function(){const e=document.createElement("style");e.textContent=`@property ${r} {syntax: "<time>"; inherits: false; initial-value: 0.5s;}\n      @property ${o} {syntax: "<time>"; inherits: false; initial-value: 0.5s;}`,document.head.appendChild(e),document[s]={globalPropsStyle:e}}(),document.body.addEventListener("mouseover",(e=>T(e.target,c.Hover))),document.body.addEventListener("mouseout",(e=>T(e.target,c.DeHover))),document.body.addEventListener("focusin",(e=>T(e.target,c.Focus))),document.body.addEventListener("focusout",(e=>T(e.target,c.Blur))),document.body.addEventListener("keydown",(e=>{"Escape"===e.key&&a.forEach((t=>{e.preventDefault(),b(t)}))})),console.log(`interestfor polyfill installed (native: ${l}).`)}"complete"===document.readyState?h():window.addEventListener("load",h)}();
+// 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 w(t),!0}function p(e){const t=1e3*E(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 E(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 w(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*E(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(){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=>{w(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 t=e=>{const t=e.target.closest("button[interestfor]");t&&t[i]?.longPressTimer&&(clearTimeout(t[i].longPressTimer),t[i].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?F():window.addEventListener("load",F)}();

package/test/basic_test.html

@@ -3,4 +3,21 @@
 <script src="../src/interestfor.js" async></script>
 
 <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>
 <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

@@ -224,13 +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-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');
+  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
@@ -293,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