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

package/dist/collection/utils/event-guard.js

@@ -0,0 +1,43 @@
+export 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;
+}

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/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/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/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.32";
+const version = "9.0.0-next.34";
 
 export { version as v };

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

@@ -2,6 +2,8 @@ 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 './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';
@@ -20,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.');
     }
@@ -31,12 +31,11 @@ const PostAccordionItem = /*@__PURE__*/ proxyCustomElement(class PostAccordionIt
     componentDidLoad() {
         this.validateHeadingLevel();
     }
-    // capture to make sure the "collapsed" property is updated before the event is consumed
+    // Capture to make sure the "collapsed" property is updated before the event is consumed
     onCollapseToggle(event) {
-        if (event.target === this.host &&
-            event.target.localName === 'post-accordion-item') {
+        eventGuard(this.host, event, { targetLocalName: 'post-collapsible', delegatorSelector: 'post-accordion-item' }, () => {
             this.collapsed = !event.detail;
-        }
+        });
     }
     /**
      * Triggers the collapse programmatically.
@@ -53,11 +52,12 @@ const PostAccordionItem = /*@__PURE__*/ proxyCustomElement(class PostAccordionIt
     render() {
         const headingLevel = this.host.closest('post-accordion')?.getAttribute('heading-level');
         const HeadingTag = `h${headingLevel ?? this.headingLevel ?? 2}`;
-        return (h(Host, { key: '4c4baf7ac22c632de6b0bc332ffc275e50bb4d71', id: this.id, "data-version": version }, h("div", { key: '576529323c3adca347ec685688c071e21a2f3a76', part: "accordion-item", class: "accordion-item" }, h("post-collapsible-trigger", { key: 'cc29c396173e55168a3bec963d5e101cb3fb17b2', for: `${this.id}--collapse` }, h(HeadingTag, { key: '76f8eed33f0c84bf6e1a534b04a8ccc0c69c6380', class: "accordion-header", id: `${this.id}--header` }, h("button", { key: 'f56e67ffc94fea0452d1879d3410318b3b12c4bc', type: "button", class: `accordion-button${this.collapsed ? ' collapsed' : ''}`, part: "button" }, h("span", { key: 'd5f23318d5c498e0cd9dd1f15c13a636e49b7817', class: {
+        return (h(Host, { key: '725d3710f7937f82c2382938d15770001e923b61', id: this.id, "data-version": version }, h("div", { key: '679d25d8278fbf9ae68546ee50c27a86ded95999', part: "accordion-item", class: "accordion-item" }, h("post-collapsible-trigger", { key: '7c2af8dc6a1f5265b4ae2cad066be7d2e0bf6a78', for: `${this.id}--collapse` }, h(HeadingTag, { key: 'a10e59a17fdb272fe6308d2ba98f37f90490fab8', class: "accordion-header", id: `${this.id}--header` }, h("button", { key: 'e2b527850c8342a8adf99453d0ac330b6a94760f', type: "button", class: `accordion-button${this.collapsed ? ' collapsed' : ''}`, part: "button" }, h("span", { key: 'b722a4bc51757546eefa58c7c3ea3a688838298a', class: {
                 'logo-container': true,
                 'has-image': !!this.slottedLogo,
-            } }, h("slot", { key: '051d48cc4201e2d954f4d4bc25c836ddc8e24d0f', name: "logo", onSlotchange: this.onSlotLogoChange.bind(this) })), h("slot", { key: 'e9f687c79fab8bd3bd94e4da022b2aea7e0bba5c', name: "header" }), h("post-icon", { key: 'c1f3486254269ab50a89bd6acf8c714cbbced3b8', name: "2051" })))), h("post-collapsible", { key: '7f3788a90e59cdb4f985fd14c64286cb938a3c23', id: `${this.id}--collapse`, collapsed: this.collapsed, ref: el => (this.collapsible = el) }, h("div", { key: 'e17ae656614ac27d4f09ebba0a7bb547f88f5728', class: "accordion-body", part: "body" }, h("slot", { key: '0387ebe5ce518bbb8b78c66d919715a78b5ae558' }))))));
+            } }, 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,8 @@ 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)}";
 const PostAccordionStyle0 = postAccordionCss;
@@ -11,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;
@@ -30,10 +30,7 @@ const PostAccordion = /*@__PURE__*/ proxyCustomElement(class PostAccordion exten
         this.validateHeadingLevel();
     }
     collapseToggleHandler(event) {
-        event.stopPropagation();
-        const toggledItem = event.target;
-        const closestParentAccordion = toggledItem.closest('post-accordion');
-        if (closestParentAccordion === this.host && toggledItem.localName === 'post-accordion-item') {
+        eventGuard(this.host, event, { targetLocalName: 'post-accordion-item', delegatorSelector: 'post-accordion' }, () => {
             const toggledAccordionItem = event.target;
             const isClosing = this.expandedItems.has(toggledAccordionItem);
             if (isClosing) {
@@ -44,13 +41,13 @@ const PostAccordion = /*@__PURE__*/ proxyCustomElement(class PostAccordion exten
             }
             if (this.multiple || isClosing)
                 return;
-            // close other open accordion items to have only one opened at a time
+            // Close other open accordion items to ensure only one is open at a time
             Array.from(this.expandedItems.values())
                 .filter(item => item !== toggledAccordionItem)
                 .forEach(item => {
                 item.toggle(false);
             });
-        }
+        });
     }
     /**
      * Toggles the `post-accordion-item` with the given id.
@@ -96,8 +93,9 @@ const PostAccordion = /*@__PURE__*/ proxyCustomElement(class PostAccordion exten
         });
     }
     render() {
-        return (h(Host, { key: '9ec8ca1ceac6587be68272568f216c958460ac0a', "data-version": version }, h("div", { key: '99887626d105f0e8f86b24e211591e7be820738d', class: "accordion" }, h("slot", { key: '4d8a003377c3a90648818a00144fd5f3a65be084', onSlotchange: () => this.registerAccordionItems() }))));
+        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"]
     }; }

package/dist/components/post-avatar2.js

@@ -1,6 +1,7 @@
 import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
 import { v as version } from './package.js';
 import { c as checkNonEmpty } from './check-non-empty.js';
+import './breakpoints.js';
 
 const postAvatarCss = "/*!\n * Copyright 2021 by Swiss Post, Information Technology\n */:host{--post-avatar-bg:var(--post-scheme-color-interactive-primary-enabled-bg2);--post-avatar-fg:var(--post-scheme-color-interactive-primary-enabled-fg3);display:inline-flex;position:relative;width:var(--post-device-sizing-interactive-icon-size3);height:var(--post-device-sizing-interactive-icon-size3);background-color:var(--post-scheme-color-interactive-primary-enabled-stroke3);border:var(--post-device-border-width-default) solid var(--post-scheme-color-interactive-primary-enabled-stroke3);border-radius:var(--post-device-border-radius-round);font-size:var(--post-device-font-size-8);vertical-align:top;line-height:1}:host::after{display:block;content:\"\";position:absolute;inset:0;z-index:1;border-radius:inherit}*,*::before,*::after{box-sizing:border-box}slot,img,::slotted(img){display:block;width:100%;height:100%}img,::slotted(img){border-radius:var(--post-device-border-radius-round)}::slotted(:not(img)){display:none !important}.initials{display:flex;justify-content:center;align-items:center;position:relative;z-index:2;width:100%;height:100%;background-color:var(--post-avatar-bg);border-radius:var(--post-device-border-radius-round);color:var(--post-avatar-fg);text-transform:uppercase}.initials span{width:1px !important;height:1px !important;padding:0 !important;margin:-1px !important;overflow:hidden !important;clip:rect(0, 0, 0, 0) !important;white-space:nowrap !important;border:0 !important}.initials span:not(caption){position:absolute !important}";
 const PostAvatarStyle0 = postAvatarCss;
@@ -32,8 +33,6 @@ const PostAvatar = /*@__PURE__*/ proxyCustomElement(class PostAvatar extends HTM
         this.imageAlt = '';
         this.initials = '';
     }
-    static INTERNAL_USERID_IMAGE_SRC = 'https://web.post.ch/UserProfileImage/{userid}.png';
-    get host() { return this; }
     validateFirstname() {
         checkNonEmpty(this, 'firstname');
     }
@@ -135,12 +134,13 @@ const PostAvatar = /*@__PURE__*/ proxyCustomElement(class PostAvatar extends HTM
         }, []);
         return (h(Host, { "data-version": version }, h("slot", { onSlotchange: this.onSlotDefaultChange.bind(this) }, this.avatarType === 'image' && h("img", { src: this.imageUrl, alt: this.imageAlt }), this.avatarType === 'initials' && h("div", { class: "initials" }, initials))));
     }
+    get host() { return this; }
     static get watchers() { return {
         "firstname": ["validateFirstname"]
     }; }
     static get style() { return PostAvatarStyle0; }
 }, [1, "post-avatar", {
-        "firstname": [1],
+        "firstname": [513],
         "lastname": [1],
         "userid": [1],
         "email": [1],
@@ -152,6 +152,7 @@ const PostAvatar = /*@__PURE__*/ proxyCustomElement(class PostAvatar extends HTM
     }, undefined, {
         "firstname": ["validateFirstname"]
     }]);
+PostAvatar.INTERNAL_USERID_IMAGE_SRC = 'https://web.post.ch/UserProfileImage/{userid}.png';
 function defineCustomElement() {
     if (typeof customElements === "undefined") {
         return;