@swisspost/design-system-components 9.0.0-next.32 → 9.0.0-next.34

package/dist/types/components/post-mainnavigation/post-mainnavigation.d.ts

@@ -1,71 +1,46 @@
 export declare class PostMainnavigation {
-    private header;
     private navbar;
-    private rightScrollButton;
-    private leftScrollButton;
     private scrollRepeatInterval;
     private navbarDisableTimer;
     private resizeObserver;
     private mutationObserver;
-    host: HTMLPostMainnavigationElement;
     canScrollLeft: boolean;
     canScrollRight: boolean;
-    translationAmount: number;
+    constructor();
+    componentDidLoad(): void;
     /**
-     * Update navbar translation when 'translateAmount' changes and recalculate scrollability
+     * Disconnects observers and remove event listeners when the main navigation is removed from the DOM.
      */
-    onTranslateAmountChanges(value: number): void;
+    disconnectedCallback(): void;
     /**
-     * Retrieves a reference to the closest 'post-header' element when the main navigation is added to the DOM.
-     * This ensures that we can interact with the header for mobile menu toggling.
+     * Stops the repeated scrolling when the mouse button is released.
      */
-    connectedCallback(): void;
+    stopScrolling(): void;
+    private handleMutations;
+    private get navigationItems();
     /**
-     * Cleans up references and disconnects the MutationObserver when the main navigation is removed from the DOM.
+     * Hack to fix the layout shift due to bold text on active elements
      */
-    disconnectedCallback(): void;
-    componentDidLoad(): void;
     private fixLayoutShift;
     private handleBackButtonClick;
     /**
-     * Moves focus on the navbar and adjusts scrolling to bring focused element into view.
+     * Returns whether scrolling is enabled in either the left or right direction.
      */
-    private adjustTranslation;
+    private get canScroll();
     /**
      * Checks if scrolling is possible in either direction (left or right) and updates the state accordingly.
      */
     private checkScrollability;
-    /**
-     * Returns whether scrolling is enabled in either the left or right direction.
-     */
-    private get canScroll();
     /**
      * Handles the scrolling behavior when a user clicks on the left or right scroll buttons.
      */
     private handleScrollButtonClick;
-    /**
-     * Stops the repeated scrolling when the mouse button is released.
-     */
-    stopScrolling(): void;
-    private scroll;
-    private translateRightTo;
-    private translateLeftTo;
-    /**
-     * Returns the navigation list container element
-     */
-    private get navigationList();
-    /**
-     * Returns the navigation items
-     */
-    private get navigationItems();
+    private scrollRight;
+    private scrollLeft;
     /**
      * Temporarily disables interactions with the navbar during scrolling to prevent accidental clicks.
      * Re-enables interactions after a brief delay to avoid blocking the user entirely.
      */
-    private disableNavbar;
-    /**
-     * Allows to translate the navbar without a transition
-     */
-    private withoutTransition;
+    private temporarilyDisableNavbar;
     render(): any;
 }

package/dist/types/components/post-megadropdown-trigger/post-megadropdown-trigger.d.ts

@@ -26,6 +26,8 @@ export declare class PostMegadropdownTrigger {
     private get megadropdown();
     private handleToggle;
     private handleKeyDown;
+    private handleToggleMegadropdown;
     componentDidLoad(): void;
+    disconnectedCallback(): void;
     render(): any;
 }

package/dist/types/components/post-menu/post-menu.d.ts

@@ -41,6 +41,7 @@ export declare class PostMenu {
      */
     hide(): Promise<void>;
     private handleKeyDown;
+    private handlePostToggle;
     private handleClick;
     private controlKeyDownHandler;
     private getSlottedItems;

package/dist/types/components/post-menu-trigger/post-menu-trigger.d.ts

@@ -21,7 +21,7 @@ export declare class PostMenuTrigger {
     validateControlFor(): void;
     private get menu();
     private handleToggle;
-    private handleKeyDown;
+    private readonly handleKeyDown;
     connectedCallback(): void;
     componentDidLoad(): void;
     render(): any;

package/dist/types/components/post-popover/post-popover.d.ts

@@ -1,7 +1,8 @@
 import { Placement } from '@floating-ui/dom';
 export declare class PostPopover {
     private popoverRef;
-    private localBeforeToggleHandler;
+    private readonly localBeforeToggleHandler;
+    private readonly triggerObserver;
     host: HTMLPostPopoverElement;
     /**
      * Defines the placement of the popover according to the floating-ui options available at https://floating-ui.com/docs/computePosition#placement.
@@ -38,5 +39,6 @@ export declare class PostPopover {
     toggle(target: HTMLElement, force?: boolean): Promise<void>;
     private get triggers();
     private beforeToggleHandler;
+    private patchAccessibilityFeatures;
     render(): any;
 }

package/dist/types/components/post-popovercontainer/post-popovercontainer.d.ts

@@ -1,6 +1,5 @@
 import { EventEmitter } from '../../stencil-public-runtime';
 import { Placement } from '@floating-ui/dom';
-import '@oddbird/popover-polyfill';
 interface PopoverElement {
     showPopover: () => void;
     hidePopover: () => void;
@@ -50,6 +49,7 @@ export declare class PostPopovercontainer {
      * @param event MouseEvent with cursor position
      */
     private mouseTrackingHandler;
+    connectedCallback(): void;
     componentDidLoad(): void;
     disconnectedCallback(): void;
     /**

package/dist/types/components/post-tooltip/post-tooltip.d.ts

@@ -1,8 +1,8 @@
 import { Placement } from '@floating-ui/dom';
-import 'long-press-event';
 export declare class PostTooltip {
     private popoverRef;
     private wasOpenedByFocus;
+    private readonly triggerObserver;
     host: HTMLPostTooltipElement;
     /**
      * Defines the placement of the tooltip according to the floating-ui options available at https://floating-ui.com/docs/computePosition#placement.
@@ -56,5 +56,10 @@ export declare class PostTooltip {
      * Re-enable pointer events when the tooltip is no longer in focus or hovered
      */
     private handleInterestLost;
+    /**
+     * Patch some accessibility features that are hard to remember or understand
+     * @param {HTMLElement} trigger
+     */
+    private patchAccessibilityFeatures;
     render(): any;
 }

package/dist/types/components.d.ts

@@ -67,7 +67,7 @@ export namespace Components {
          */
         "lastname"?: string;
         /**
-          * Defines the company internal userId.<div className="mb-1 banner banner-warning banner-sm">Can only be used on post.ch domains!</div>
+          * Defines the company internal userId.<div className="mb-4 banner banner-warning banner-sm">Can only be used on post.ch domains!</div>
          */
         "userid"?: string;
     }
@@ -144,7 +144,7 @@ export namespace Components {
          */
         "label": string;
         /**
-          * Defines the `name` attribute of the control. <span className="banner banner-sm banner-info">This is a required property, when the control should participate in a native `form`. If not specified, a native `form` will never contain this controls value.</span> <span className="banner banner-sm banner-info">This is a required property, when the control is used with type `radio`.</span>
+          * Defines the `name` attribute of the control. <span className="mb-4 banner banner-sm banner-info">This is a required property, when the control should participate in a native `form`. If not specified, a native `form` will never contain this controls value.</span> <span className="banner banner-sm banner-info">This is a required property, when the control is used with type `radio`.</span>
          */
         "name": string;
         /**
@@ -945,7 +945,7 @@ declare namespace LocalJSX {
          */
         "lastname"?: string;
         /**
-          * Defines the company internal userId.<div className="mb-1 banner banner-warning banner-sm">Can only be used on post.ch domains!</div>
+          * Defines the company internal userId.<div className="mb-4 banner banner-warning banner-sm">Can only be used on post.ch domains!</div>
          */
         "userid"?: string;
     }
@@ -1018,7 +1018,7 @@ declare namespace LocalJSX {
          */
         "label": string;
         /**
-          * Defines the `name` attribute of the control. <span className="banner banner-sm banner-info">This is a required property, when the control should participate in a native `form`. If not specified, a native `form` will never contain this controls value.</span> <span className="banner banner-sm banner-info">This is a required property, when the control is used with type `radio`.</span>
+          * Defines the `name` attribute of the control. <span className="mb-4 banner banner-sm banner-info">This is a required property, when the control should participate in a native `form`. If not specified, a native `form` will never contain this controls value.</span> <span className="banner banner-sm banner-info">This is a required property, when the control is used with type `radio`.</span>
          */
         "name"?: string;
         /**

package/dist/types/popover-fn.d.ts

@@ -0,0 +1,11 @@
+// It seems like the package '@oddbird/popover-polyfill does not properly declare it's types.
+// This file fixes that issue so typescript does not complain about it on the import line
+
+declare module '@oddbird/popover-polyfill/dist/popover-fn.js' {
+  export {
+    apply,
+    injectStyles,
+    isPolyfilled,
+    isSupported,
+  } from '../node_modules/@oddbird/popover-polyfill/dist/popover-fn.js';
+}

package/dist/types/utils/environment.d.ts

@@ -0,0 +1,2 @@
+export declare const IS_SERVER: boolean;
+export declare const IS_BROWSER: boolean;

package/dist/types/utils/event-guard.d.ts

@@ -0,0 +1,4 @@
+export declare function eventGuard(host: HTMLElement, event: CustomEvent, options: {
+    targetLocalName: string;
+    delegatorSelector?: string;
+}, callback: () => void): void;

package/dist/types/utils/get-root.d.ts

@@ -1 +1,5 @@
+/**
+ * getRootNode() can only be used after the element has been attached to the document!
+ * So use it for example in the componentDidLoad lifecycle hook.
+ */
 export declare function getRoot(element: Element): Document | ShadowRoot;

package/dist/types/utils/index.d.ts

@@ -1,7 +1,12 @@
+export * from './get-focusable-children';
+export * from './attribute-observer';
 export * from './component-on-ready';
 export * from './property-checkers';
+export * from './breakpoints';
 export * from './debounce';
+export * from './event-guard';
 export * from './get-root';
 export * from './is-motion-reduced';
 export * from './sass-export';
 export * from './timeout';
+export * from './environment';

package/loaders/attribute-observer.js

@@ -1,3 +1,5 @@
+import { I as IS_BROWSER } from './breakpoints.js';
+
 function getAttributeObserver(attribute, handler) {
     /**
      * Handle attribute changes and childList changes from the observer
@@ -19,7 +21,7 @@ function getAttributeObserver(attribute, handler) {
         });
     }
     // Initialize a mutation observer for patching accessibility features
-    return new MutationObserver(observerHandler);
+    return IS_BROWSER ? new MutationObserver(observerHandler) : null;
 }
 
 export { getAttributeObserver as g };

package/loaders/breakpoints.js

@@ -1,11 +1,13 @@
+const IS_SERVER = typeof window === 'undefined';
+const IS_BROWSER = !IS_SERVER;
+
 class Breakpoint {
-    breakpointMap;
-    current = {
-        key: '',
-        name: '',
-    };
     constructor() {
-        if (!this.breakpointMap) {
+        this.current = {
+            key: '',
+            name: '',
+        };
+        if (IS_BROWSER && !this.breakpointMap) {
             const keys = this.getStyles('--post-breakpoint-keys');
             const names = this.getStyles('--post-breakpoint-names');
             const widths = this.getStyles('--post-breakpoint-widths');
@@ -40,7 +42,9 @@ class Breakpoint {
         }
     }
     dispatchEvent(type) {
-        window.dispatchEvent(new CustomEvent(`postBreakpoint:${type}`, { detail: this.current[type] }));
+        if (IS_BROWSER) {
+            window.dispatchEvent(new CustomEvent(`postBreakpoint:${type}`, { detail: this.current[type] }));
+        }
     }
     get(type) {
         this.updateHandler(false);
@@ -49,4 +53,4 @@ class Breakpoint {
 }
 const breakpoint = new Breakpoint();
 
-export { breakpoint as b };
+export { IS_BROWSER as I, breakpoint as b };

package/loaders/event-guard.js

@@ -0,0 +1,45 @@
+function eventGuard(host, event, options, callback) {
+    const target = event.target;
+    if (!target)
+        return;
+    if (target.localName === options.targetLocalName) {
+        if (!options.delegatorSelector || shadowClosest(target, options.delegatorSelector) === host) {
+            callback();
+        }
+    }
+}
+/**
+ * Traverses up the DOM (including crossing shadow DOM boundaries) starting from the given element
+ * to find and return the closest ancestor that matches the specified CSS selector.
+ * If no matching element is found, returns null.
+ *
+ * @param element - The starting element from which the search begins.
+ * @param selector - The CSS selector used to test each ancestor element.
+ * @returns The closest matching ancestor element or null if none is found.
+ */
+function shadowClosest(element, selector) {
+    let currentElement = element;
+    while (currentElement) {
+        if (currentElement.matches(selector)) {
+            return currentElement;
+        }
+        const parent = currentElement.parentElement;
+        if (parent) {
+            currentElement = parent;
+        }
+        else {
+            const parentNode = currentElement.parentNode;
+            // When no parentElement exists, check if the current element is inside a shadow DOM.
+            // If so, move up to the shadow host to continue the search outside the shadow boundary.
+            if (parentNode instanceof ShadowRoot) {
+                currentElement = parentNode.host;
+            }
+            else {
+                currentElement = null;
+            }
+        }
+    }
+    return null;
+}
+
+export { eventGuard as e };

package/loaders/get-root.js

@@ -1,5 +1,11 @@
+import { I as IS_BROWSER } from './breakpoints.js';
+
+/**
+ * getRootNode() can only be used after the element has been attached to the document!
+ * So use it for example in the componentDidLoad lifecycle hook.
+ */
 function getRoot(element) {
-    const root = element.getRootNode();
+    const root = IS_BROWSER ? element.getRootNode() : element;
     if (root instanceof Document || root instanceof ShadowRoot) {
         return root;
     }

package/loaders/index.js

@@ -1,8 +1,8 @@
 export { getAssetPath, setAssetPath, setNonce, setPlatformOptions } from '@stencil/core/internal/client';
+import './breakpoints.js';
 export { PostAvatar, defineCustomElement as defineCustomElementPostAvatar } from './post-avatar.js';
 import './post-popovercontainer2.js';
-import './breakpoints.js';
-export { PostPopover, defineCustomElement as defineCustomElementPostPopover } from './post-popover.js';
+export { PostMegadropdown, defineCustomElement as defineCustomElementPostMegadropdown } from './post-megadropdown.js';
 export { PostTooltip, defineCustomElement as defineCustomElementPostTooltip } from './post-tooltip.js';
 export { PostAccordion, defineCustomElement as defineCustomElementPostAccordion } from './post-accordion.js';
 export { PostAccordionItem, defineCustomElement as defineCustomElementPostAccordionItem } from './post-accordion-item.js';
@@ -24,11 +24,11 @@ export { PostList, defineCustomElement as defineCustomElementPostList } from './
 export { PostListItem, defineCustomElement as defineCustomElementPostListItem } from './post-list-item.js';
 export { PostLogo, defineCustomElement as defineCustomElementPostLogo } from './post-logo.js';
 export { PostMainnavigation, defineCustomElement as defineCustomElementPostMainnavigation } from './post-mainnavigation.js';
-export { PostMegadropdown, defineCustomElement as defineCustomElementPostMegadropdown } from './post-megadropdown.js';
 export { PostMegadropdownTrigger, defineCustomElement as defineCustomElementPostMegadropdownTrigger } from './post-megadropdown-trigger.js';
 export { PostMenu, defineCustomElement as defineCustomElementPostMenu } from './post-menu.js';
 export { PostMenuItem, defineCustomElement as defineCustomElementPostMenuItem } from './post-menu-item.js';
 export { PostMenuTrigger, defineCustomElement as defineCustomElementPostMenuTrigger } from './post-menu-trigger.js';
+export { PostPopover, defineCustomElement as defineCustomElementPostPopover } from './post-popover.js';
 export { PostPopovercontainer, defineCustomElement as defineCustomElementPostPopovercontainer } from './post-popovercontainer.js';
 export { PostRating, defineCustomElement as defineCustomElementPostRating } from './post-rating.js';
 export { PostTabHeader, defineCustomElement as defineCustomElementPostTabHeader } from './post-tab-header.js';

package/loaders/long-press-event.js

@@ -0,0 +1,264 @@
+/*!
+ * long-press-event - v@version@
+ * Pure JavaScript long-press-event
+ * https://github.com/john-doherty/long-press-event
+ * @author John Doherty <www.johndoherty.info>
+ * @license MIT
+ */
+(function (window, document) {
+
+    // local timer object based on rAF
+    var timer = null;
+
+    // check if we're using a touch screen
+    var hasPointerEvents = (('PointerEvent' in window) || (window.navigator && 'msPointerEnabled' in window.navigator));
+    var isTouch = (('ontouchstart' in window) || (navigator.MaxTouchPoints > 0) || (navigator.msMaxTouchPoints > 0));
+
+    // switch to pointer events or touch events if using a touch screen
+    var mouseDown = hasPointerEvents ? 'pointerdown' : isTouch ? 'touchstart' : 'mousedown';
+    var mouseUp = hasPointerEvents ? 'pointerup' : isTouch ? 'touchend' : 'mouseup';
+    var mouseMove = hasPointerEvents ? 'pointermove' : isTouch ? 'touchmove' : 'mousemove';
+    var mouseLeave = hasPointerEvents ? 'pointerleave' : isTouch ? 'touchleave' : 'mouseleave';
+
+    // track number of pixels the mouse moves during long press
+    var startX = 0; // mouse x position when timer started
+    var startY = 0; // mouse y position when timer started
+    var maxDiffX = 10; // max number of X pixels the mouse can move during long press before it is canceled
+    var maxDiffY = 10; // max number of Y pixels the mouse can move during long press before it is canceled
+
+    // patch CustomEvent to allow constructor creation (IE/Chrome)
+    if (typeof window.CustomEvent !== 'function') {
+
+        window.CustomEvent = function (event, params) {
+
+            params = params || { bubbles: false, cancelable: false, detail: undefined };
+
+            var evt = document.createEvent('CustomEvent');
+            evt.initCustomEvent(event, params.bubbles, params.cancelable, params.detail);
+            return evt;
+        };
+
+        window.CustomEvent.prototype = window.Event.prototype;
+    }
+
+    // requestAnimationFrame() shim by Paul Irish
+    window.requestAnimFrame = (function () {
+        return window.requestAnimationFrame ||
+            window.webkitRequestAnimationFrame ||
+            window.mozRequestAnimationFrame ||
+            window.oRequestAnimationFrame ||
+            window.msRequestAnimationFrame || function (callback) {
+                window.setTimeout(callback, 1000 / 60);
+            };
+    })();
+
+    /**
+     * Behaves the same as setTimeout except uses requestAnimationFrame() where possible for better performance
+     * @param {function} fn The callback function
+     * @param {int} delay The delay in milliseconds
+     * @returns {object} handle to the timeout object
+     */
+    function requestTimeout(fn, delay) {
+
+        if (!window.requestAnimationFrame && !window.webkitRequestAnimationFrame &&
+            !(window.mozRequestAnimationFrame && window.mozCancelRequestAnimationFrame) && // Firefox 5 ships without cancel support
+            !window.oRequestAnimationFrame && !window.msRequestAnimationFrame) return window.setTimeout(fn, delay);
+
+        var start = new Date().getTime();
+        var handle = {};
+
+        var loop = function () {
+            var current = new Date().getTime();
+            var delta = current - start;
+
+            if (delta >= delay) {
+                fn.call();
+            }
+            else {
+                handle.value = requestAnimFrame(loop);
+            }
+        };
+
+        handle.value = requestAnimFrame(loop);
+
+        return handle;
+    }
+
+    /**
+     * Behaves the same as clearTimeout except uses cancelRequestAnimationFrame() where possible for better performance
+     * @param {object} handle The callback function
+     * @returns {void}
+     */
+    function clearRequestTimeout(handle) {
+        if (handle) {
+            window.cancelAnimationFrame ? window.cancelAnimationFrame(handle.value) :
+                window.webkitCancelAnimationFrame ? window.webkitCancelAnimationFrame(handle.value) :
+                    window.webkitCancelRequestAnimationFrame ? window.webkitCancelRequestAnimationFrame(handle.value) : /* Support for legacy API */
+                        window.mozCancelRequestAnimationFrame ? window.mozCancelRequestAnimationFrame(handle.value) :
+                            window.oCancelRequestAnimationFrame ? window.oCancelRequestAnimationFrame(handle.value) :
+                                window.msCancelRequestAnimationFrame ? window.msCancelRequestAnimationFrame(handle.value) :
+                                    clearTimeout(handle);
+        }
+    }
+
+    /**
+     * Fires the 'long-press' event on element
+     * @param {MouseEvent|PointerEvent|TouchEvent} originalEvent The original event being fired
+     * @returns {void}
+     */
+    function fireLongPressEvent(originalEvent) {
+
+        clearLongPressTimer();
+
+        originalEvent = unifyEvent(originalEvent);
+
+        // fire the long-press event
+        var allowClickEvent = this.dispatchEvent(new CustomEvent('long-press', {
+            bubbles: true,
+            cancelable: true,
+
+            // custom event data (legacy)
+            detail: {
+                clientX: originalEvent.clientX,
+                clientY: originalEvent.clientY,
+                offsetX: originalEvent.offsetX,
+                offsetY: originalEvent.offsetY,
+                pageX: originalEvent.pageX,
+                pageY: originalEvent.pageY
+            },
+
+            // add coordinate data that would typically acompany a touch/click event
+            clientX: originalEvent.clientX,
+            clientY: originalEvent.clientY,
+            offsetX: originalEvent.offsetX,
+            offsetY: originalEvent.offsetY,
+            pageX: originalEvent.pageX,
+            pageY: originalEvent.pageY,
+            screenX: originalEvent.screenX,
+            screenY: originalEvent.screenY
+        }));
+
+        if (!allowClickEvent) {
+            // suppress the next click event if e.preventDefault() was called in long-press handler
+            document.addEventListener('click', function suppressEvent(e) {
+                document.removeEventListener('click', suppressEvent, true);
+                cancelEvent(e);
+            }, true);
+        }
+    }
+
+    /**
+     * consolidates mouse, touch, and Pointer events
+     * @param {MouseEvent|PointerEvent|TouchEvent} e The original event being fired
+     * @returns {MouseEvent|PointerEvent|Touch}
+     */
+    function unifyEvent(e) {
+        if (e.changedTouches !== undefined) {
+            return e.changedTouches[0];
+        }
+        return e;
+    }
+
+    /**
+     * method responsible for starting the long press timer
+     * @param {event} e - event object
+     * @returns {void}
+     */
+    function startLongPressTimer(e) {
+
+        clearLongPressTimer();
+
+        var el = e.target;
+
+        // get delay from html attribute if it exists, otherwise default to 1500
+        var longPressDelayInMs = parseInt(getNearestAttribute(el, 'data-long-press-delay', '1500'), 10); // default 1500
+
+        // start the timer
+        timer = requestTimeout(fireLongPressEvent.bind(el, e), longPressDelayInMs);
+    }
+
+    /**
+     * method responsible for clearing a pending long press timer
+     * @param {event} e - event object
+     * @returns {void}
+     */
+    function clearLongPressTimer(e) {
+        clearRequestTimeout(timer);
+        timer = null;
+    }
+
+    /**
+    * Cancels the current event
+    * @param {object} e - browser event object
+    * @returns {void}
+    */
+    function cancelEvent(e) {
+        e.stopImmediatePropagation();
+        e.preventDefault();
+        e.stopPropagation();
+    }
+
+    /**
+     * Starts the timer on mouse down and logs current position
+     * @param {object} e - browser event object
+     * @returns {void}
+     */
+    function mouseDownHandler(e) {
+        startX = e.clientX;
+        startY = e.clientY;
+        startLongPressTimer(e);
+    }
+
+    /**
+     * If the mouse moves n pixels during long-press, cancel the timer
+     * @param {object} e - browser event object
+     * @returns {void}
+     */
+    function mouseMoveHandler(e) {
+
+        // calculate total number of pixels the pointer has moved
+        var diffX = Math.abs(startX - e.clientX);
+        var diffY = Math.abs(startY - e.clientY);
+
+        // if pointer has moved more than allowed, cancel the long-press timer and therefore the event
+        if (diffX >= maxDiffX || diffY >= maxDiffY) {
+            clearLongPressTimer();
+        }
+    }
+
+    /**
+     * Gets attribute off HTML element or nearest parent
+     * @param {object} el - HTML element to retrieve attribute from
+     * @param {string} attributeName - name of the attribute
+     * @param {any} defaultValue - default value to return if no match found
+     * @returns {any} attribute value or defaultValue
+     */
+    function getNearestAttribute(el, attributeName, defaultValue) {
+
+        // walk up the dom tree looking for data-action and data-trigger
+        while (el && el !== document.documentElement) {
+
+            var attributeValue = el.getAttribute(attributeName);
+
+            if (attributeValue) {
+                return attributeValue;
+            }
+
+            el = el.parentNode;
+        }
+
+        return defaultValue;
+    }
+
+    // hook events that clear a pending long press event
+    document.addEventListener(mouseUp, clearLongPressTimer, true);
+    document.addEventListener(mouseLeave, clearLongPressTimer, true);
+    document.addEventListener(mouseMove, mouseMoveHandler, true);
+    document.addEventListener('wheel', clearLongPressTimer, true);
+    document.addEventListener('scroll', clearLongPressTimer, true);
+    document.addEventListener('contextmenu', clearLongPressTimer, true);
+
+    // hook events that can trigger a long press event
+    document.addEventListener(mouseDown, mouseDownHandler, true); // <- start
+
+}(window, document));

package/loaders/package.js

@@ -1,3 +1,3 @@
-const version = "9.0.0-next.32";
+const version = "9.0.0-next.34";
 
 export { version as v };