@swisspost/design-system-components 9.0.0-next.33 → 9.0.0-next.35

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: '9e041dbc11a0ad98e581074ca17db997226a129d', "data-version": version, role: "tooltip", onPointerOver: this.handleInterest, onPointerOut: this.handleInterestLost, onFocusIn: this.handleInterest, onFocusOut: this.handleInterestLost }, h("post-popovercontainer", { key: '77f9068a4a174ec861bc09ed046bab8a326b8ee7', class: popoverClass, arrow: this.arrow, placement: this.placement, ref: (el) => (this.popoverRef = el) }, h("slot", { key: '4490380ebda34ed649e2cdb9654308ad941a6ee5' }))));
     }
     static get is() { return "post-tooltip"; }
     static get encapsulation() { return "shadow"; }
@@ -250,7 +254,7 @@ export class PostTooltip {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": "Defines the placement of the tooltip according to the floating-ui options available at https://floating-ui.com/docs/computePosition#placement.\nTooltips are automatically flipped to the opposite side if there is not enough available space and are shifted\ntowards the viewport if they would overlap edge boundaries."
+                    "text": "Defines the position of the tooltip relative to its trigger.\nTooltips are automatically flipped to the opposite side if there is not enough available space and are shifted towards the viewport if they would overlap edge boundaries.\nFor supported values and behavior details, see the [Floating UI placement documentation](https://floating-ui.com/docs/computePosition#placement)."
                 },
                 "attribute": "placement",
                 "reflect": false,

package/dist/collection/index.js

@@ -4,7 +4,7 @@ export { PostAccordionItem } from './components/post-accordion-item/post-accordi
 export { PostAvatar } from './components/post-avatar/post-avatar';
 export { PostBackToTop } from './components/post-back-to-top/post-back-to-top';
 export { PostBanner } from './components/post-banner/post-banner';
-export { PostBreadcrumb } from './components/post-breadcrumb/post-breadcrumb';
+export { PostBreadcrumbs } from './components/post-breadcrumbs/post-breadcrumbs';
 export { PostBreadcrumbItem } from './components/post-breadcrumb-item/post-breadcrumb-item';
 export { PostCardControl } from './components/post-card-control/post-card-control';
 export { PostClosebutton } from './components/post-closebutton/post-closebutton';

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;

package/dist/collection/utils/get-root.js

@@ -1,5 +1,10 @@
+import { IS_BROWSER } from "./environment";
+/**
+ * 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 function getRoot(element) {
-    const root = element.getRootNode();
+    const root = IS_BROWSER ? element.getRootNode() : element;
     if (root instanceof Document || root instanceof ShadowRoot) {
         return root;
     }

package/dist/collection/utils/index.js

@@ -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/dist/collection/utils/is-motion-reduced.js

@@ -1,3 +1,4 @@
+import { IS_BROWSER } from "./environment";
 export function isMotionReduced() {
-    return window.matchMedia('(prefers-reduced-motion: reduce)').matches;
+    return IS_BROWSER ? window.matchMedia('(prefers-reduced-motion: reduce)').matches : false;
 }

package/dist/components/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/dist/components/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/dist/components/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/dist/components/index.js

@@ -4,7 +4,7 @@ export { P as PostAccordionItem } from './post-accordion-item2.js';
 export { P as PostAvatar } from './post-avatar2.js';
 export { P as PostBackToTop } from './post-back-to-top2.js';
 export { P as PostBanner } from './post-banner2.js';
-export { P as PostBreadcrumb } from './post-breadcrumb2.js';
+export { P as PostBreadcrumbs } from './post-breadcrumbs2.js';
 export { P as PostBreadcrumbItem } from './post-breadcrumb-item2.js';
 export { P as PostCardControl } from './post-card-control2.js';
 export { P as PostClosebutton } from './post-closebutton2.js';

package/dist/components/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/dist/components/package.js

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

package/dist/components/post-accordion-item2.js

@@ -2,8 +2,9 @@ import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal
 import { v as version } from './package.js';
 import { H as HEADING_LEVELS } from './heading-levels.js';
 import { c as checkEmptyOrOneOf } from './index2.js';
-import { n as nanoid } from './index.browser.js';
+import './breakpoints.js';
 import { e as eventGuard } from './event-guard.js';
+import { n as nanoid } from './index.browser.js';
 import { d as defineCustomElement$3 } from './post-collapsible2.js';
 import { d as defineCustomElement$2 } from './post-collapsible-trigger2.js';
 import { d as defineCustomElement$1 } from './post-icon2.js';
@@ -21,8 +22,6 @@ const PostAccordionItem = /*@__PURE__*/ proxyCustomElement(class PostAccordionIt
         this.collapsed = false;
         this.headingLevel = undefined;
     }
-    collapsible;
-    get host() { return this; }
     validateHeadingLevel() {
         checkEmptyOrOneOf(this, 'headingLevel', HEADING_LEVELS, 'The `heading-level` property of the `post-accordion-item` must be a number between 1 and 6.');
     }
@@ -58,6 +57,7 @@ const PostAccordionItem = /*@__PURE__*/ proxyCustomElement(class PostAccordionIt
                 'has-image': !!this.slottedLogo,
             } }, h("slot", { key: '1a42494db72a7b437b1d98fa2e8159d73ece22fa', name: "logo", onSlotchange: this.onSlotLogoChange.bind(this) })), h("slot", { key: '049865bb25f833780ef8e27fe8477e06476a2427', name: "header" }), h("post-icon", { key: 'da0cf7078e4f51710dbfd39c0afa90465fcb53c6', name: "2051" })))), h("post-collapsible", { key: '7c3b268e34d3e4f52820b11a6c090aefbc16e3b9', id: `${this.id}--collapse`, collapsed: this.collapsed, ref: el => (this.collapsible = el) }, h("div", { key: '993a7fffbccb557aed2842305f3927e5c3b5047a', class: "accordion-body", part: "body" }, h("slot", { key: '580eb87b1cb4f88acd7dddddecaa1c1982b7f6e3' }))))));
     }
+    get host() { return this; }
     static get watchers() { return {
         "headingLevel": ["validateHeadingLevel"]
     }; }

package/dist/components/post-accordion2.js

@@ -2,6 +2,7 @@ import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal
 import { v as version } from './package.js';
 import { H as HEADING_LEVELS } from './heading-levels.js';
 import { c as checkOneOf } from './check-one-of.js';
+import './breakpoints.js';
 import { e as eventGuard } from './event-guard.js';
 
 const postAccordionCss = ":host{display:block}::slotted(post-accordion-item){display:block}::slotted(post-accordion-item:not(:only-of-type:first-of-type)){margin-block-start:calc(var(--post-device-border-width-default)*-1)}::slotted(post-accordion-item:not(:only-of-type):first-of-type){--post-accordion-button-border-top:var(--post-device-border-width-default) var(--post-core-border-style-solid) var(--post-scheme-color-interactive-primary-enabled-stroke)}";
@@ -12,12 +13,10 @@ const PostAccordion = /*@__PURE__*/ proxyCustomElement(class PostAccordion exten
         super();
         this.__registerHost();
         this.__attachShadow();
+        this.expandedItems = new Set();
         this.headingLevel = undefined;
         this.multiple = false;
     }
-    accordionItems;
-    expandedItems = new Set();
-    get host() { return this; }
     validateHeadingLevel(newValue = this.headingLevel) {
         if (!newValue)
             return;
@@ -96,6 +95,7 @@ const PostAccordion = /*@__PURE__*/ proxyCustomElement(class PostAccordion exten
     render() {
         return (h(Host, { key: '80e15cf7835f213cfee1ca7cf83cc2fd24bba3ff', "data-version": version }, h("div", { key: '1cf03d4960115b52394b5cb07cd2286747c728dd', class: "accordion" }, h("slot", { key: 'b94328a45a3cba6a8d3b418061036eb8af2cf027', onSlotchange: () => this.registerAccordionItems() }))));
     }
+    get host() { return this; }
     static get watchers() { return {
         "headingLevel": ["validateHeadingLevel"]
     }; }