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

package/dist/cjs/{post-tooltip-52d690e4.js → post-tooltip-4d4d2ea9.js}

@@ -1,9 +1,10 @@
 'use strict';
 
-const index = require('./index-d6bf2c66.js');
-const _package = require('./package-6f8f430c.js');
-const attributeObserver = require('./attribute-observer-6d8b886b.js');
+const index = require('./index-b60129c4.js');
+const attributeObserver = require('./attribute-observer-c3a805b2.js');
 const index$1 = require('./index-23e36ff7.js');
+const breakpoints = require('./breakpoints-cdf1b747.js');
+const _package = require('./package-3426e8f7.js');
 
 var commonjsGlobal = typeof globalThis !== 'undefined' ? globalThis : typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};
 
@@ -4509,274 +4510,14 @@ module.exports = exports['default'];
 
 const isFocusable = /*@__PURE__*/getDefaultExportFromCjs(focusable.exports);
 
-/*!
- * 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));
-
 const postTooltipCss = "post-popovercontainer[arrow]::after{position:absolute;content:\"\";inset:-13px;z-index:-1}post-popovercontainer>div{padding:var(--post-core-dimension-4) var(--post-core-dimension-8);max-width:calc(224px - var(--post-core-dimension-8));min-height:var(--post-core-dimension-16)}";
 const PostTooltipStyle0 = postTooltipCss;
 
+if (breakpoints.IS_BROWSER) {
+    (async () => {
+        await Promise.resolve().then(function () { return require('./long-press-event-6e62d113.js'); });
+    })();
+}
 const OPEN_DELAY = 650; // matches HTML title delay
 /**
  * @slot default - Slot for the content of the tooltip.
@@ -4801,7 +4542,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);
@@ -4813,7 +4555,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;
@@ -4846,35 +4588,18 @@ 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 = attributeObserver.getAttributeObserver(tooltipTargetAttribute, patchAccessibilityFeatures);
 const PostTooltip = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
+        this.wasOpenedByFocus = false;
+        // Initialize a mutation observer for patching accessibility features
+        this.triggerObserver = breakpoints.IS_BROWSER
+            ? attributeObserver.getAttributeObserver(tooltipTargetAttribute, this.patchAccessibilityFeatures)
+            : null;
         this.placement = 'top';
         this.arrow = true;
         this.delayed = false;
     }
-    popoverRef;
-    wasOpenedByFocus = false;
-    get host() { return index.getElement(this); }
     validateDelayed() {
         index$1.checkEmptyOrType(this, 'delayed', 'boolean');
     }
@@ -4901,9 +4626,9 @@ const PostTooltip = class {
             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],
@@ -4924,7 +4649,7 @@ const PostTooltip = class {
             document.removeEventListener('focusin', globalInterestHandler);
             document.removeEventListener('focusout', globalInterestLostHandler);
             document.removeEventListener('long-press', globalInterestHandler);
-            triggerObserver.disconnect();
+            this.triggerObserver?.disconnect();
         }
     }
     /**
@@ -4988,10 +4713,28 @@ const PostTooltip = class {
         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 (index.h(index.Host, { key: '89b0e64fd5fde4c21d9c1eb624facff38b287e4a', "data-version": _package.version, role: "tooltip", onPointerOver: this.handleInterest, onPointerOut: this.handleInterestLost, onFocusIn: this.handleInterest, onFocusOut: this.handleInterestLost }, index.h("post-popovercontainer", { key: '8006874c12a2eebe39682a09db677e8b315dd6bb', class: popoverClass, arrow: this.arrow, placement: this.placement, ref: (el) => (this.popoverRef = el) }, index.h("slot", { key: 'cf3bd12703885fe886f1703038437b59a4d79fd3' }))));
+        return (index.h(index.Host, { key: 'f6e535d23220c3b53840913882b7302d54cc6a89', "data-version": _package.version, role: "tooltip", onPointerOver: this.handleInterest, onPointerOut: this.handleInterestLost, onFocusIn: this.handleInterest, onFocusOut: this.handleInterestLost }, index.h("post-popovercontainer", { key: '25aaaee555958fdacd3aa204b90d09ab14289b51', class: popoverClass, arrow: this.arrow, placement: this.placement, ref: (el) => (this.popoverRef = el) }, index.h("slot", { key: '81ae53f9ab5189253a256861b6df5a2cd31fe678' }))));
     }
+    get host() { return index.getElement(this); }
     static get watchers() { return {
         "delayed": ["validateDelayed"]
     }; }

package/dist/cjs/post-tooltip.cjs.entry.js

@@ -2,15 +2,16 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const postTooltip = require('./post-tooltip-52d690e4.js');
-require('./index-d6bf2c66.js');
-require('./package-6f8f430c.js');
-require('./attribute-observer-6d8b886b.js');
+const postTooltip = require('./post-tooltip-4d4d2ea9.js');
+require('./index-b60129c4.js');
+require('./attribute-observer-c3a805b2.js');
+require('./breakpoints-cdf1b747.js');
 require('./index-23e36ff7.js');
 require('./constants-238701d3.js');
 require('./check-one-of-75d270b5.js');
 require('./check-type-cdbf6d29.js');
 require('./check-url-220a286c.js');
+require('./package-3426e8f7.js');
 
 
 

package/dist/collection/animations/collapse.js

@@ -1,3 +1,4 @@
+import { IS_BROWSER } from "../utils/index";
 const collapseDuration = 350;
 const collapseEasing = 'ease';
 const collapsedKeyframe = { height: '0', overflow: 'hidden' };
@@ -7,7 +8,8 @@ const animationOptions = {
     fill: 'forwards',
 };
 export function collapse(el) {
-    const expandedKeyframe = { height: window.getComputedStyle(el).height };
+    const elHeight = IS_BROWSER ? window.getComputedStyle(el).height : `${el.scrollHeight}px`;
+    const expandedKeyframe = { height: elHeight };
     return el.animate([expandedKeyframe, collapsedKeyframe], animationOptions);
 }
 export function expand(el) {

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

@@ -2,17 +2,16 @@ import { h, Host } from "@stencil/core";
 import { version } from "../../../../package";
 import { HEADING_LEVELS } from "../../types/index";
 import { checkOneOf } from "../../utils/index";
+import { eventGuard } from "../../utils/event-gua"; // Import eventGuard
 /**
  * @slot default - Slot for placing post-accordion-item components.
  */
 export class PostAccordion {
     constructor() {
+        this.expandedItems = new Set();
         this.headingLevel = undefined;
         this.multiple = false;
     }
-    accordionItems;
-    expandedItems = new Set();
-    host;
     validateHeadingLevel(newValue = this.headingLevel) {
         if (!newValue)
             return;
@@ -26,10 +25,7 @@ export class PostAccordion {
         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) {
@@ -40,13 +36,13 @@ export class PostAccordion {
             }
             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.
@@ -92,7 +88,7 @@ export class PostAccordion {
         });
     }
     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() }))));
     }
     static get is() { return "post-accordion"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/post-accordion-item/post-accordion-item.js

@@ -3,6 +3,7 @@ import { version } from "../../../../package";
 import { HEADING_LEVELS } from "../../types/index";
 import { checkEmptyOrOneOf } from "../../utils/index";
 import { nanoid } from "nanoid";
+import { eventGuard } from "../../utils/event-gua";
 /**
  * @part button - The pseudo-element, used to override styles on the components internal header `button` element.
  * @part body - The pseudo-element, used to override styles on the components internal `body` element.
@@ -17,8 +18,6 @@ export class PostAccordionItem {
         this.collapsed = false;
         this.headingLevel = undefined;
     }
-    collapsible;
-    host;
     validateHeadingLevel() {
         checkEmptyOrOneOf(this, 'headingLevel', HEADING_LEVELS, 'The `heading-level` property of the `post-accordion-item` must be a number between 1 and 6.');
     }
@@ -28,12 +27,11 @@ export class PostAccordionItem {
     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.
@@ -50,10 +48,10 @@ export class PostAccordionItem {
     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' }))))));
     }
     static get is() { return "post-accordion-item"; }
     static get encapsulation() { return "shadow"; }

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

@@ -28,8 +28,6 @@ export class PostAvatar {
         this.imageAlt = '';
         this.initials = '';
     }
-    static INTERNAL_USERID_IMAGE_SRC = 'https://web.post.ch/UserProfileImage/{userid}.png';
-    host;
     validateFirstname() {
         checkNonEmpty(this, 'firstname');
     }
@@ -160,7 +158,7 @@ export class PostAvatar {
                     "text": "Defines the users firstname."
                 },
                 "attribute": "firstname",
-                "reflect": false
+                "reflect": true
             },
             "lastname": {
                 "type": "string",
@@ -191,7 +189,7 @@ export class PostAvatar {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": "Defines the company internal userId.<div className=\"mb-1 banner banner-warning banner-sm\">Can only be used on post.ch domains!</div>"
+                    "text": "Defines the company internal userId.<div className=\"mb-4 banner banner-warning banner-sm\">Can only be used on post.ch domains!</div>"
                 },
                 "attribute": "userid",
                 "reflect": false
@@ -232,3 +230,4 @@ export class PostAvatar {
             }];
     }
 }
+PostAvatar.INTERNAL_USERID_IMAGE_SRC = 'https://web.post.ch/UserProfileImage/{userid}.png';

package/dist/collection/components/post-back-to-top/post-back-to-top.css

@@ -1 +1 @@
-:host{--post-floating-button-translate-y: calc(-1 * var(--post-core-dimension-112));position:fixed;inset-block-start:var(--post-device-position-4);inset-inline-end:var(--post-device-position-1)}:host .back-to-top{padding:0;overflow:visible;border:0;background:none;color:var(--post-scheme-color-interactive-button-secondary-enabled-fg);font:inherit;-webkit-user-select:none;user-select:none;appearance:button;box-shadow:var(--post-device-elevation-300);cursor:pointer;border-radius:var(--post-device-border-radius-round);width:var(--post-device-sizing-interactive-button-height-2);height:var(--post-device-sizing-interactive-button-height-2);border:var(--post-device-border-width-default) solid var(--post-scheme-color-interactive-button-secondary-enabled-stroke);color:var(--post-scheme-color-interactive-button-secondary-enabled-fg);background-color:var(--post-scheme-color-interactive-button-secondary-enabled-bg);display:flex;align-items:center;justify-content:center}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){:host .back-to-top{background-color:ButtonFace !important}:host .back-to-top:hover{background-color:Highlight !important}}:host .back-to-top{outline-offset:var(--post-device-spacing-padding-2) !important;outline:var(--post-scheme-color-interactive-focus-stroke) none var(--post-device-border-width-focus) !important}:host .back-to-top:is(:focus-visible,:has(:focus-visible),.pretend-focus){outline-style:var(--post-core-border-style-solid) !important}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){:host .back-to-top:is(:focus-visible,:has(:focus-visible),.pretend-focus){outline-color:Highlight !important}}@supports not selector(:has(:focus-visible)){:host .back-to-top:is(:focus-visible,:focus-within,.pretend-focus){outline-style:var(--post-core-border-style-solid) !important}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){:host .back-to-top:is(:focus-visible,:focus-within,.pretend-focus){outline-color:Highlight !important}}}:host .back-to-top:hover{border-color:var(--post-scheme-color-interactive-button-secondary-hover-stroke);color:var(--post-scheme-color-interactive-button-secondary-hover-fg);background-color:var(--post-scheme-color-interactive-button-secondary-hover-bg)}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){:host .back-to-top:hover{color:HighlightText !important}}:host .back-to-top post-icon{height:var(--post-device-sizing-interactive-button-icon-3);width:var(--post-device-sizing-interactive-button-icon-3)}:host .visually-hidden{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);border:0}
+:host{--post-floating-button-position-top: var(--post-device-position-4);--post-back-to-top-position-top: calc( var(--post-header-height) + var(--post-floating-button-position-top) );--post-back-to-top-elevation: var(--post-device-elevation-300);position:fixed;inset-block-start:var(--post-back-to-top-position-top);inset-inline-end:var(--post-device-position-1)}:host .back-to-top{padding:0;overflow:visible;border:0;background:none;color:var(--post-scheme-color-interactive-button-secondary-enabled-fg);font:inherit;-webkit-user-select:none;user-select:none;appearance:button;box-shadow:var(--post-back-to-top-elevation);cursor:pointer;border-radius:var(--post-device-border-radius-round);width:var(--post-device-sizing-interactive-button-height-2);height:var(--post-device-sizing-interactive-button-height-2);border:var(--post-device-border-width-default) solid var(--post-scheme-color-interactive-button-secondary-enabled-stroke);color:var(--post-scheme-color-interactive-button-secondary-enabled-fg);background-color:var(--post-scheme-color-interactive-button-secondary-enabled-bg);display:flex;align-items:center;justify-content:center}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){:host .back-to-top{background-color:ButtonFace !important}:host .back-to-top:hover{background-color:Highlight !important}}:host .back-to-top{outline-offset:var(--post-device-spacing-padding-2) !important;outline:var(--post-scheme-color-interactive-focus-stroke) none var(--post-device-border-width-focus) !important}:host .back-to-top:is(:focus-visible,:has(:focus-visible),.pretend-focus){outline-style:var(--post-core-border-style-solid) !important}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){:host .back-to-top:is(:focus-visible,:has(:focus-visible),.pretend-focus){outline-color:Highlight !important}}@supports not selector(:has(:focus-visible)){:host .back-to-top:is(:focus-visible,:focus-within,.pretend-focus){outline-style:var(--post-core-border-style-solid) !important}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){:host .back-to-top:is(:focus-visible,:focus-within,.pretend-focus){outline-color:Highlight !important}}}:host .back-to-top:hover{border-color:var(--post-scheme-color-interactive-button-secondary-hover-stroke);color:var(--post-scheme-color-interactive-button-secondary-hover-fg);background-color:var(--post-scheme-color-interactive-button-secondary-hover-bg)}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){:host .back-to-top:hover{color:HighlightText !important}}:host .back-to-top post-icon{height:var(--post-device-sizing-interactive-button-icon-3);width:var(--post-device-sizing-interactive-button-icon-3)}:host .visually-hidden{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);border:0}