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

package/dist/collection/components/post-menu/post-menu.js

@@ -2,30 +2,57 @@ import { h, Host, } from "@stencil/core";
 import { version } from "../../../../package";
 import { getFocusableChildren } from "../../utils/get-focusable-children";
 import { getRoot } from "../../utils/index";
+import { eventGuard } from "../../utils/event-gua";
 export class PostMenu {
     constructor() {
+        this.lastFocusedElement = null;
+        this.KEYCODES = {
+            SPACE: ' ',
+            ENTER: 'Enter',
+            UP: 'ArrowUp',
+            DOWN: 'ArrowDown',
+            TAB: 'Tab',
+            HOME: 'Home',
+            END: 'End',
+            ESCAPE: 'Escape',
+        };
+        this.handleKeyDown = (e) => {
+            e.stopPropagation();
+            if (e.key === this.KEYCODES.ESCAPE) {
+                this.toggle(this.host);
+                return;
+            }
+            if (Object.values(this.KEYCODES).includes(e.key)) {
+                this.controlKeyDownHandler(e);
+            }
+        };
+        this.handlePostToggle = (event) => {
+            eventGuard(this.host, event, { targetLocalName: 'post-popovercontainer', delegatorSelector: 'post-menu' }, () => {
+                this.isVisible = event.detail;
+                this.toggleMenu.emit(this.isVisible);
+                requestAnimationFrame(() => {
+                    if (this.isVisible) {
+                        this.lastFocusedElement = this.root?.activeElement;
+                        const menuItems = this.getSlottedItems();
+                        if (menuItems.length > 0) {
+                            menuItems[0].focus();
+                        }
+                    }
+                    else if (this.lastFocusedElement) {
+                        this.lastFocusedElement.focus();
+                    }
+                });
+            });
+        };
+        this.handleClick = (e) => {
+            const target = e.target;
+            if (['BUTTON', 'A', 'INPUT', 'SELECT', 'TEXTAREA'].includes(target.tagName)) {
+                this.toggle(this.host);
+            }
+        };
         this.placement = 'bottom';
         this.isVisible = false;
     }
-    popoverRef;
-    lastFocusedElement = null;
-    KEYCODES = {
-        SPACE: ' ',
-        ENTER: 'Enter',
-        UP: 'ArrowUp',
-        DOWN: 'ArrowDown',
-        TAB: 'Tab',
-        HOME: 'Home',
-        END: 'End',
-        ESCAPE: 'Escape',
-    };
-    host;
-    /**
-     * Emits when the menu is shown or hidden.
-     * The event payload is a boolean: `true` when the menu was opened, `false` when it was closed.
-     **/
-    toggleMenu;
-    root;
     connectedCallback() {
         this.root = getRoot(this.host);
         this.host.addEventListener('keydown', this.handleKeyDown);
@@ -34,24 +61,12 @@ export class PostMenu {
     disconnectedCallback() {
         this.host.removeEventListener('keydown', this.handleKeyDown);
         this.host.removeEventListener('click', this.handleClick);
+        this.popoverRef?.removeEventListener('postToggle', this.handlePostToggle);
     }
     componentDidLoad() {
-        this.popoverRef.addEventListener('postToggle', (event) => {
-            this.isVisible = event.detail;
-            this.toggleMenu.emit(this.isVisible);
-            requestAnimationFrame(() => {
-                if (this.isVisible) {
-                    this.lastFocusedElement = this.root.activeElement;
-                    const menuItems = this.getSlottedItems();
-                    if (menuItems.length > 0) {
-                        menuItems[0].focus();
-                    }
-                }
-                else if (this.lastFocusedElement) {
-                    this.lastFocusedElement.focus();
-                }
-            });
-        });
+        if (this.popoverRef) {
+            this.popoverRef.addEventListener('postToggle', this.handlePostToggle);
+        }
     }
     /**
      * Toggles the menu visibility based on its current state.
@@ -88,22 +103,6 @@ export class PostMenu {
             console.error('hide: popoverRef is null or undefined');
         }
     }
-    handleKeyDown = (e) => {
-        e.stopPropagation();
-        if (e.key === this.KEYCODES.ESCAPE) {
-            this.toggle(this.host);
-            return;
-        }
-        if (Object.values(this.KEYCODES).includes(e.key)) {
-            this.controlKeyDownHandler(e);
-        }
-    };
-    handleClick = (e) => {
-        const target = e.target;
-        if (['BUTTON', 'A', 'INPUT', 'SELECT', 'TEXTAREA'].includes(target.tagName)) {
-            this.toggle(this.host);
-        }
-    };
     controlKeyDownHandler(e) {
         const menuItems = this.getSlottedItems();
         if (!menuItems.length) {
@@ -152,7 +151,7 @@ export class PostMenu {
             .flatMap(el => Array.from(getFocusableChildren(el))));
     }
     render() {
-        return (h(Host, { key: 'bbf51586a2b534d8784124547afb4e3a1b5c8dc8', "data-version": version, role: "menu" }, h("post-popovercontainer", { key: 'd54ac2a016ca74fc9fe8a34cdde5ac42786cde9e', placement: this.placement, ref: e => (this.popoverRef = e) }, h("div", { key: 'bbcd8c421bb6ac757c9d818ce6b56f343032ba74', class: "popover-container", part: "popover-container" }, h("slot", { key: 'af9513da5bb0c9d42b1f1d04af0fd9ee2a681e81' })))));
+        return (h(Host, { key: 'a86276a1fefccbb1f2b50f1ad74dd98ddcbdae5d', "data-version": version, role: "menu" }, h("post-popovercontainer", { key: 'a0b2a35714ba370b7a73d92d1d6c036aa7039aea', placement: this.placement, ref: e => (this.popoverRef = e) }, h("div", { key: '98da2e21f8e4b4e02b4c347bc4f9238edc635b77', class: "popover-container", part: "popover-container" }, h("slot", { key: 'd3060c46482c5f3179827b8996a9a4b24abf49fa' })))));
     }
     static get is() { return "post-menu"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/post-menu-trigger/post-menu-trigger.js

@@ -3,16 +3,20 @@ import { version } from "../../../../package";
 import { checkType, getRoot } from "../../utils/index";
 export class PostMenuTrigger {
     constructor() {
+        /**
+         * Reference to the slotted button within the trigger, if present.
+         * Used to manage click and key events for menu control.
+         */
+        this.slottedButton = null;
+        this.handleKeyDown = (e) => {
+            if (e.key === 'ArrowUp' || e.key === 'ArrowDown') {
+                e.preventDefault();
+                this.handleToggle();
+            }
+        };
         this.for = undefined;
         this.ariaExpanded = false;
     }
-    host;
-    /**
-     * Reference to the slotted button within the trigger, if present.
-     * Used to manage click and key events for menu control.
-     */
-    slottedButton = null;
-    root;
     /**
      * Watch for changes to the `for` property to validate its type and ensure it is a string.
      * @param forValue - The new value of the `for` property.
@@ -32,12 +36,6 @@ export class PostMenuTrigger {
             console.warn(`No post-menu found with ID: ${this.for}`);
         }
     }
-    handleKeyDown = (e) => {
-        if (e.key === 'ArrowUp' || e.key === 'ArrowDown') {
-            e.preventDefault();
-            this.handleToggle();
-        }
-    };
     connectedCallback() {
         this.root = getRoot(this.host);
     }
@@ -73,7 +71,7 @@ export class PostMenuTrigger {
         }
     }
     render() {
-        return (h(Host, { key: '84316d4a69c4231be636e5ff8971752d5af9bab2', "data-version": version, "tab-index": "-1" }, h("slot", { key: 'd3091adcf7033c4dd25e49fa383ccb9773b2d226' })));
+        return (h(Host, { key: '1b9589febc2976d17eed3363d91b4321473b7b5e', "data-version": version, "tab-index": "-1" }, h("slot", { key: 'bec55f97274084ab4721dc085dc9e1c3a216c0a3' })));
     }
     static get is() { return "post-menu-trigger"; }
     static get originalStyleUrls() {
@@ -103,7 +101,7 @@ export class PostMenuTrigger {
                     "text": "ID of the menu element that this trigger is linked to. Used to open and close the specified menu."
                 },
                 "attribute": "for",
-                "reflect": false
+                "reflect": true
             }
         };
     }

package/dist/collection/components/post-popover/post-popover.js

@@ -1,6 +1,6 @@
 import { h, Host } from "@stencil/core";
+import { IS_BROWSER, getAttributeObserver } from "../../utils/index";
 import { version } from "../../../../package";
-import { getAttributeObserver } from "../../utils/attribute-observer";
 /**
  * @slot default - Slot for placing content inside the popover.
  */
@@ -20,16 +20,12 @@ const globalToggleHandler = (e) => {
     const popover = document.getElementById(popoverTarget);
     popover?.toggle(currentElement);
 };
-// Initialize a mutation observer for patching accessibility features
-const triggerObserver = getAttributeObserver(popoverTargetAttribute, trigger => {
-    const force = trigger.hasAttribute(popoverTargetAttribute);
-    trigger.setAttribute('aria-expanded', force ? 'false' : null);
-});
 export class PostPopover {
-    popoverRef;
-    localBeforeToggleHandler;
-    host;
     constructor() {
+        // Initialize a mutation observer for patching accessibility features
+        this.triggerObserver = IS_BROWSER
+            ? getAttributeObserver(popoverTargetAttribute, this.patchAccessibilityFeatures)
+            : null;
         this.placement = 'top';
         this.closeButtonCaption = undefined;
         this.arrow = true;
@@ -40,7 +36,7 @@ export class PostPopover {
         if (popoverInstances === 0) {
             window.addEventListener('pointerup', globalToggleHandler);
             window.addEventListener('keydown', globalToggleHandler);
-            triggerObserver.observe(document.body, {
+            this.triggerObserver?.observe(document.body, {
                 subtree: true,
                 childList: true,
                 attributeFilter: [popoverTargetAttribute],
@@ -58,7 +54,7 @@ export class PostPopover {
         if (popoverInstances === 0) {
             window.removeEventListener('click', globalToggleHandler);
             window.removeEventListener('keydown', globalToggleHandler);
-            triggerObserver.disconnect();
+            this.triggerObserver?.disconnect();
         }
         this.popoverRef.removeEventListener('beforetoggle', this.localBeforeToggleHandler);
         this.triggers.forEach(trigger => trigger.removeAttribute('aria-expanded'));
@@ -94,8 +90,12 @@ export class PostPopover {
     beforeToggleHandler() {
         this.triggers.forEach(trigger => trigger.setAttribute('aria-expanded', 'false'));
     }
+    patchAccessibilityFeatures(trigger) {
+        const force = trigger.hasAttribute(popoverTargetAttribute);
+        trigger.setAttribute('aria-expanded', force ? 'false' : null);
+    }
     render() {
-        return (h(Host, { key: 'ec1aab472fb8f7d6515050d90f6a8b20730640f0', "data-version": version }, h("post-popovercontainer", { key: 'beda133fe8cf98f9db6b61f2bf3e08b3549d3b86', arrow: this.arrow, placement: this.placement, ref: e => (this.popoverRef = e) }, h("div", { key: 'dd0ad949ddc80632b3918cba539781cf23a46163', class: "popover-container" }, h("div", { key: '038dfcf60ff63b0fbe142c0e29db78fe13c5a51b', class: "popover-content" }, h("slot", { key: 'cabcedfbbd0dfc179a66bde0f9afd6a250e4fe1c' })), h("button", { key: 'bb8333e139158f3220c80380cd587e564664b612', class: "btn-close", onClick: () => this.hide() }, h("span", { key: '285a90c985133c7b53150a649850a6e675fdb4d8', class: "visually-hidden" }, this.closeButtonCaption))))));
+        return (h(Host, { key: '0eee6a532fc25170b70f2424b7238ae31f0efa2e', "data-version": version }, h("post-popovercontainer", { key: '52af51e794bd070a000fbdd5f0c05ee2f0c3ac1c', arrow: this.arrow, placement: this.placement, ref: e => (this.popoverRef = e) }, h("div", { key: '772b5efef90b136a38b69fccfce2d5607d46035a', class: "popover-container" }, h("div", { key: '8bfdf07447daa58f88c788f04fdfab483783ca7e', class: "popover-content" }, h("slot", { key: '7866899dbf93c856253e2448a0ca696499c94c12' })), h("button", { key: '5056fcd7654309c1f9810b8136ce472b6cf7946f', class: "btn-close", onClick: () => this.hide() }, h("span", { key: '9f9c9b8007a6431367197d824ca42cfd7ca91761', class: "visually-hidden" }, this.closeButtonCaption))))));
     }
     static get is() { return "post-popover"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/post-popovercontainer/post-popovercontainer.js

@@ -1,8 +1,9 @@
 import { Host, h } from "@stencil/core";
+import { IS_BROWSER } from "../../utils/index";
+import { version } from "../../../../package";
 import { arrow, autoUpdate, computePosition, flip, inline, limitShift, offset, shift, size, } from "@floating-ui/dom";
 // Polyfill for popovers, can be removed when https://caniuse.com/?search=popover is green
-import "@oddbird/popover-polyfill";
-import { version } from "../../../../package";
+import { apply, isSupported } from "@oddbird/popover-polyfill/dist/popover-fn.js";
 /**
  * @slot - Default slot for placing content inside the popovercontainer.
  */
@@ -14,35 +15,6 @@ export class PostPopovercontainer {
         this.arrow = false;
         this.safeSpace = undefined;
     }
-    static STATIC_SIDES = {
-        top: 'bottom',
-        right: 'left',
-        bottom: 'top',
-        left: 'right',
-    };
-    static PROPERTIES_TO_CLEAR = [
-        '--safe-space-popover-x',
-        '--safe-space-popover-y',
-        '--safe-space-popover-x-start',
-        '--safe-space-popover-x-end',
-        '--safe-space-popover-y-start',
-        '--safe-space-popover-y-end',
-        '--safe-space-trigger-x',
-        '--safe-space-trigger-y',
-        '--safe-space-trigger-x-start',
-        '--safe-space-trigger-x-end',
-        '--safe-space-trigger-y-start',
-        '--safe-space-trigger-y-end',
-    ];
-    host;
-    arrowRef;
-    eventTarget;
-    clearAutoUpdate;
-    toggleTimeoutId;
-    /**
-     * Fires whenever the popover gets shown or hidden, passing the new state in event.details as a boolean
-     */
-    postToggle;
     /**
      * Updates cursor position for safe space feature when popover is open.
      * Sets CSS custom properties for dynamic styling of safe area.
@@ -52,6 +24,11 @@ export class PostPopovercontainer {
         this.host.style.setProperty('--safe-space-cursor-x', `${event.clientX}px`);
         this.host.style.setProperty('--safe-space-cursor-y', `${event.clientY}px`);
     }
+    connectedCallback() {
+        if (IS_BROWSER && !isSupported()) {
+            apply();
+        }
+    }
     componentDidLoad() {
         this.host.addEventListener('beforetoggle', this.handleToggle.bind(this));
     }
@@ -246,9 +223,9 @@ export class PostPopovercontainer {
         }
     }
     render() {
-        return (h(Host, { key: '4b1d039e821b26d830de798a8103995391d8e01b', "data-version": version, popover: this.manualClose ? 'manual' : 'auto' }, h("div", { key: '30e50db7f861df8339da244b1393372759a0fc13' }, this.arrow && (h("span", { key: 'acd8bae5e39cf6407fdefaaf0e2137d35b4c468d', class: "arrow", ref: el => {
+        return (h(Host, { key: 'bbd430fbda9344c351d59f3d59cf84049992709b', "data-version": version, popover: this.manualClose ? 'manual' : 'auto' }, h("div", { key: 'e359cac588d1dd1359c88f8e472828be845fdad7' }, this.arrow && (h("span", { key: '45329ae23722e93410132746e4e39e88e86cd310', class: "arrow", ref: el => {
                 this.arrowRef = el;
-            } })), h("slot", { key: 'a4854df31cab7e452c89cf4a8f36249878c6cd0c' }))));
+            } })), h("slot", { key: 'bb9b4b3d8e7c36f024883d02bd34766bf2e9de88' }))));
     }
     static get is() { return "post-popovercontainer"; }
     static get originalStyleUrls() {
@@ -464,3 +441,23 @@ export class PostPopovercontainer {
     }
     static get elementRef() { return "host"; }
 }
+PostPopovercontainer.STATIC_SIDES = {
+    top: 'bottom',
+    right: 'left',
+    bottom: 'top',
+    left: 'right',
+};
+PostPopovercontainer.PROPERTIES_TO_CLEAR = [
+    '--safe-space-popover-x',
+    '--safe-space-popover-y',
+    '--safe-space-popover-x-start',
+    '--safe-space-popover-x-end',
+    '--safe-space-popover-y-start',
+    '--safe-space-popover-y-end',
+    '--safe-space-trigger-x',
+    '--safe-space-trigger-y',
+    '--safe-space-trigger-x-start',
+    '--safe-space-trigger-x-end',
+    '--safe-space-trigger-y-start',
+    '--safe-space-trigger-y-end',
+];

package/dist/collection/components/post-rating/post-rating.js

@@ -1,19 +1,8 @@
 import { h, Host } from "@stencil/core";
 import { version } from "../../../../package";
 export class PostRating {
-    hasChanged = false;
-    host;
-    /**
-     * An event emitted whenever the component's value has changed (on input).
-     * The event payload can be used like so: `event.detail.value`.
-     */
-    postInput;
-    /**
-     * An event emitted whenever the component's value has changed (on blur).
-     * The event payload can be used like so: `event.detail.value`.
-     */
-    postChange;
     constructor() {
+        this.hasChanged = false;
         this.hoveredIndex = undefined;
         this.label = 'Rating';
         this.stars = 5;

package/dist/collection/components/post-tab-header/post-tab-header.js

@@ -10,7 +10,6 @@ export class PostTabHeader {
         this.tabId = undefined;
         this.panel = undefined;
     }
-    host;
     validateFor() {
         checkNonEmpty(this, 'panel');
     }
@@ -18,7 +17,7 @@ export class PostTabHeader {
         this.tabId = `tab-${this.host.id || nanoid(6)}`;
     }
     render() {
-        return (h(Host, { key: '336824660de90bf5c570e9739947927a32612fbd', id: this.tabId, role: "tab", "data-version": version, "aria-selected": "false", tabindex: "-1", class: "tab-title", slot: "tabs" }, h("slot", { key: '8bfe0b57fa96044692e2db3fd983ccde427558e7' })));
+        return (h(Host, { key: '5046c46fa27fd6586c694420abf197b227b56520', id: this.tabId, role: "tab", "data-version": version, "aria-selected": "false", tabindex: "-1", class: "tab-title", slot: "tabs" }, h("slot", { key: '78c2f660e4f2307ca95a63f4cfd90d08cc6942df' })));
     }
     static get is() { return "post-tab-header"; }
     static get encapsulation() { return "shadow"; }
@@ -54,7 +53,7 @@ export class PostTabHeader {
                     "text": "The name of the panel controlled by the tab header."
                 },
                 "attribute": "panel",
-                "reflect": false
+                "reflect": true
             }
         };
     }

package/dist/collection/components/post-tab-panel/post-tab-panel.js

@@ -9,13 +9,12 @@ export class PostTabPanel {
         this.panelId = undefined;
         this.name = undefined;
     }
-    host;
     componentWillLoad() {
         // get the id set on the host element or use a random id by default
         this.panelId = `panel-${this.host.id || nanoid(6)}`;
     }
     render() {
-        return (h(Host, { key: '8331ab54bda793a120dc467d8406cc0a02a5c480', "data-version": version, id: this.panelId, role: "tabpanel" }, h("slot", { key: '7da6d67b69150a70ee290ad8ef9b95684ea3f83d' })));
+        return (h(Host, { key: '98427b35c6637af65930b69b75ea56facf044000', "data-version": version, id: this.panelId, role: "tabpanel" }, h("slot", { key: '4fa02667e8ff088c10122e010cfd7efe8ff3af57' })));
     }
     static get is() { return "post-tab-panel"; }
     static get encapsulation() { return "shadow"; }
@@ -46,7 +45,7 @@ export class PostTabPanel {
                     "text": "The name of the panel, used to associate it with a tab header."
                 },
                 "attribute": "name",
-                "reflect": false
+                "reflect": true
             }
         };
     }

package/dist/collection/components/post-tabs/post-tabs.js

@@ -10,21 +10,12 @@ import { componentOnReady } from "../../utils/index";
  */
 export class PostTabs {
     constructor() {
+        this.isLoaded = false;
         this.activePanel = undefined;
     }
-    activeTab;
-    showing;
-    hiding;
-    isLoaded = false;
     get tabs() {
         return Array.from(this.host.querySelectorAll('post-tab-header')).filter(tab => tab.closest('post-tabs') === this.host);
     }
-    host;
-    /**
-     * An event emitted after the active tab changes, when the fade in transition of its associated panel is finished.
-     * The payload is the name of the newly shown panel.
-     */
-    postChange;
     componentDidLoad() {
         this.moveMisplacedTabs();
         this.enableTabs();

package/dist/collection/components/post-tag/post-tag.js

@@ -4,7 +4,6 @@ import { version } from "../../../../package";
  * @slot default - Content to place in the `default` slot.<p>Markup accepted: <a href="https://developer.mozilla.org/en-US/docs/Glossary/Inline-level_content">inline content</a>.</p>
  */
 export class PostTag {
-    host;
     constructor() {
         this.classes = undefined;
         this.variant = undefined;

package/dist/collection/components/post-togglebutton/post-togglebutton.js

@@ -6,9 +6,18 @@ import { checkType } from "../../utils/index";
  */
 export class PostTogglebutton {
     constructor() {
+        this.handleClick = () => {
+            this.toggled = !this.toggled;
+        };
+        this.handleKeydown = (event) => {
+            // perform a click when enter or spaced are pressed to mimic the button behavior
+            if (event.key === 'Enter' || event.key === ' ') {
+                event.preventDefault(); // prevents the page from scrolling when space is pressed
+                this.host.click();
+            }
+        };
         this.toggled = false;
     }
-    host;
     validateToggled() {
         checkType(this, 'toggled', 'boolean');
     }
@@ -18,16 +27,6 @@ export class PostTogglebutton {
         this.host.addEventListener('click', () => this.handleClick());
         this.host.addEventListener('keydown', (e) => this.handleKeydown(e));
     }
-    handleClick = () => {
-        this.toggled = !this.toggled;
-    };
-    handleKeydown = (event) => {
-        // perform a click when enter or spaced are pressed to mimic the button behavior
-        if (event.key === 'Enter' || event.key === ' ') {
-            event.preventDefault(); // prevents the page from scrolling when space is pressed
-            this.host.click();
-        }
-    };
     render() {
         return (h(Host, { key: '3a1429a9b67b8cfafae184fe0d060ee3a04974e0', "data-version": version, role: "button", tabindex: "0", "aria-pressed": this.toggled.toString() }, h("slot", { key: '9ab1537574423740fc335fde732c699698acac25' })));
     }

package/dist/collection/components/post-tooltip/post-tooltip.js

@@ -1,9 +1,12 @@
 import { h, Host } from "@stencil/core";
-import { version } from "../../../../package";
 import isFocusable from "ally.js/is/focusable";
-import "long-press-event";
-import { getAttributeObserver } from "../../utils/attribute-observer";
-import { checkEmptyOrType } from "../../utils/index";
+import { IS_BROWSER, checkEmptyOrType, getAttributeObserver } from "../../utils/index";
+import { version } from "../../../../package";
+if (IS_BROWSER) {
+    (async () => {
+        await import('long-press-event');
+    })();
+}
 const OPEN_DELAY = 650; // matches HTML title delay
 /**
  * @slot default - Slot for the content of the tooltip.
@@ -28,7 +31,8 @@ let tooltipTimeout = null;
  * @returns
  */
 const globalInterestHandler = (e) => {
-    const targetElement = e.target.closest(tooltipTargetAttributeSelector);
+    const eventTarget = e.target;
+    const targetElement = eventTarget.closest(tooltipTargetAttributeSelector);
     globalCurrentTarget = targetElement;
     if (!targetElement || !('getAttribute' in targetElement)) {
         clearTimeout(tooltipTimeout);
@@ -40,7 +44,7 @@ const globalInterestHandler = (e) => {
     const tooltip = document.getElementById(tooltipTarget);
     // Determine if the tooltip was triggered by a focus event
     const triggeredByFocus = e.type === 'focusin';
-    void tooltip?.show(targetElement, triggeredByFocus);
+    tooltip?.show(targetElement, triggeredByFocus);
     if (hideTooltipTimeout) {
         window.clearTimeout(hideTooltipTimeout);
         hideTooltipTimeout = null;
@@ -73,34 +77,17 @@ const globalHideTooltip = (tooltip) => {
         hideTooltipTimeout = null;
     }, 42);
 };
-/**
- * Patch some accessibility features that are hard to remember or understand
- * @param {HTMLElement} trigger
- */
-const patchAccessibilityFeatures = (trigger) => {
-    const describedBy = trigger.getAttribute('aria-describedby');
-    const id = trigger.getAttribute(tooltipTargetAttribute);
-    // Add tooltip to aria-describedby
-    if (!describedBy?.includes(id)) {
-        const newDescribedBy = describedBy ? `${describedBy} ${id}` : id;
-        trigger.setAttribute('aria-describedby', newDescribedBy);
-    }
-    // Make element focusable
-    if (!isFocusable(trigger)) {
-        trigger.setAttribute('tabindex', '0');
-    }
-};
-// Initialize a mutation observer for patching accessibility features
-const triggerObserver = getAttributeObserver(tooltipTargetAttribute, patchAccessibilityFeatures);
 export class PostTooltip {
     constructor() {
+        this.wasOpenedByFocus = false;
+        // Initialize a mutation observer for patching accessibility features
+        this.triggerObserver = IS_BROWSER
+            ? getAttributeObserver(tooltipTargetAttribute, this.patchAccessibilityFeatures)
+            : null;
         this.placement = 'top';
         this.arrow = true;
         this.delayed = false;
     }
-    popoverRef;
-    wasOpenedByFocus = false;
-    host;
     validateDelayed() {
         checkEmptyOrType(this, 'delayed', 'boolean');
     }
@@ -127,9 +114,9 @@ export class PostTooltip {
             document.addEventListener('focusout', globalInterestLostHandler);
             document.addEventListener('long-press', globalInterestHandler);
             // Initially run the accessibility patcher on all triggers
-            document.querySelectorAll('[data-tooltip-target]').forEach(patchAccessibilityFeatures);
+            document.querySelectorAll('[data-tooltip-target]').forEach(this.patchAccessibilityFeatures);
             // Start watching for future triggers
-            triggerObserver.observe(document.body, {
+            this.triggerObserver?.observe(document.body, {
                 subtree: true,
                 childList: true,
                 attributeFilter: [tooltipTargetAttribute],
@@ -150,7 +137,7 @@ export class PostTooltip {
             document.removeEventListener('focusin', globalInterestHandler);
             document.removeEventListener('focusout', globalInterestLostHandler);
             document.removeEventListener('long-press', globalInterestHandler);
-            triggerObserver.disconnect();
+            this.triggerObserver?.disconnect();
         }
     }
     /**
@@ -214,9 +201,26 @@ export class PostTooltip {
         globalHideTooltip(this);
         this.host.style.pointerEvents = 'auto';
     }
+    /**
+     * Patch some accessibility features that are hard to remember or understand
+     * @param {HTMLElement} trigger
+     */
+    patchAccessibilityFeatures(trigger) {
+        const describedBy = trigger.getAttribute('aria-describedby');
+        const id = trigger.getAttribute(tooltipTargetAttribute);
+        // Add tooltip to aria-describedby
+        if (!describedBy?.includes(id)) {
+            const newDescribedBy = describedBy ? `${describedBy} ${id}` : id;
+            trigger.setAttribute('aria-describedby', newDescribedBy);
+        }
+        // Make element focusable
+        if (!isFocusable(trigger)) {
+            trigger.setAttribute('tabindex', '0');
+        }
+    }
     render() {
         const popoverClass = `${this.arrow ? ' has-arrow' : ''}`;
-        return (h(Host, { key: '89b0e64fd5fde4c21d9c1eb624facff38b287e4a', "data-version": version, role: "tooltip", onPointerOver: this.handleInterest, onPointerOut: this.handleInterestLost, onFocusIn: this.handleInterest, onFocusOut: this.handleInterestLost }, h("post-popovercontainer", { key: '8006874c12a2eebe39682a09db677e8b315dd6bb', class: popoverClass, arrow: this.arrow, placement: this.placement, ref: (el) => (this.popoverRef = el) }, h("slot", { key: 'cf3bd12703885fe886f1703038437b59a4d79fd3' }))));
+        return (h(Host, { key: 'f6e535d23220c3b53840913882b7302d54cc6a89', "data-version": version, role: "tooltip", onPointerOver: this.handleInterest, onPointerOut: this.handleInterestLost, onFocusIn: this.handleInterest, onFocusOut: this.handleInterestLost }, h("post-popovercontainer", { key: '25aaaee555958fdacd3aa204b90d09ab14289b51', class: popoverClass, arrow: this.arrow, placement: this.placement, ref: (el) => (this.popoverRef = el) }, h("slot", { key: '81ae53f9ab5189253a256861b6df5a2cd31fe678' }))));
     }
     static get is() { return "post-tooltip"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/utils/attribute-observer.js

@@ -1,3 +1,4 @@
+import { IS_BROWSER } from "./environment";
 export function getAttributeObserver(attribute, handler) {
     /**
      * Handle attribute changes and childList changes from the observer
@@ -19,5 +20,5 @@ export function getAttributeObserver(attribute, handler) {
         });
     }
     // Initialize a mutation observer for patching accessibility features
-    return new MutationObserver(observerHandler);
+    return IS_BROWSER ? new MutationObserver(observerHandler) : null;
 }

package/dist/collection/utils/breakpoints.js

@@ -1,11 +1,11 @@
+import { IS_BROWSER } from "./environment";
 export 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 +40,9 @@ export 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);

package/dist/collection/utils/environment.js

@@ -0,0 +1,2 @@
+export const IS_SERVER = typeof window === 'undefined';
+export const IS_BROWSER = !IS_SERVER;