@swisspost/design-system-components 10.0.0-next.46 → 10.0.0-next.48

package/dist/esm/loader.js

@@ -4,7 +4,7 @@ export { s as setNonce } from './index-C8a0ddDa.js';
 const defineCustomElements = async (win, options) => {
   if (typeof window === 'undefined') return undefined;
   await globalScripts();
-  return bootstrapLazy([["post-breadcrumbs",[[1,"post-breadcrumbs",{"homeUrl":[1,"home-url"],"homeText":[1,"home-text"],"breadcrumbItems":[32],"isConcatenated":[32],"lastWindowWidth":[32]},null,{"homeUrl":["validateHomeUrl"],"homeText":["validateHomeText"]}]]],["post-footer",[[1,"post-footer",{"label":[1],"device":[32],"gridSlotDisplayed":[32]},null,{"label":["validateLabel"]}]]],["post-back-to-top",[[1,"post-back-to-top",{"label":[513],"belowFold":[32]},null,{"label":["validateLabel"],"belowFold":["watchBelowFold"]}]]],["post-card-control",[[65,"post-card-control",{"label":[513],"description":[1],"type":[1],"name":[1],"value":[1],"checked":[1028],"disabled":[1028],"validity":[1028],"icon":[1],"focused":[32],"reset":[64],"groupReset":[64]},null,{"label":["validateControlLabel"],"description":["validateControlDescription"],"type":["validateControlType"],"name":["validateControlName"],"value":["validateControlValue"],"icon":["validateControlIcon"],"checked":["updateControlChecked"],"disabled":["updateControlDisabled"]}]]],["post-popover",[[1,"post-popover",{"placement":[1],"closeButtonCaption":[1,"close-button-caption"],"arrow":[4],"show":[64],"hide":[64],"toggle":[64]},null,{"placement":["validatePlacement"],"closeButtonCaption":["validateCloseButtonCaption"]}]]],["post-rating",[[1,"post-rating",{"label":[1],"stars":[2],"currentRating":[1026,"current-rating"],"readonly":[4],"hoveredIndex":[32]},null,{"label":["validateLabel"],"stars":["validateStars"],"currentRating":["validateCurrentRating"]}]]],["post-tooltip",[[1,"post-tooltip",{"placement":[1],"arrow":[4],"animation":[1],"open":[1540],"show":[64],"hide":[64],"toggle":[64]},null,{"placement":["validatePlacement"]}]]],["post-avatar",[[1,"post-avatar",{"firstname":[513],"lastname":[1],"userid":[1],"email":[1],"slottedImage":[32],"avatarType":[32],"imageUrl":[32],"imageAlt":[32],"initials":[32]},null,{"firstname":["validateFirstname"],"lastname":["validateLastname"],"userid":["validateUserid"],"email":["validateEmail"]}]]],["post-banner",[[1,"post-banner",{"dismissible":[4],"dismissLabel":[1,"dismiss-label"],"type":[1],"bannerId":[32],"classes":[32],"hasActions":[32],"hasHeading":[32],"onDismissButtonClick":[32],"dismiss":[64]},null,{"dismissible":["checkDismissible"],"type":["validateType"]}]]],["post-linkarea",[[1,"post-linkarea"]]],["post-tab-header",[[1,"post-tab-header",{"panel":[513],"tabId":[32]},null,{"panel":["validateFor"]}]]],["post-tab-panel",[[1,"post-tab-panel",{"name":[513],"panelId":[32]},null,{"name":["validateName"]}]]],["post-tabs",[[1,"post-tabs",{"activePanel":[1,"active-panel"],"fullWidth":[516,"full-width"],"show":[64]}]]],["post-tooltip-trigger",[[1,"post-tooltip-trigger",{"for":[513],"delay":[2]},null,{"for":["validateControlFor"]}]]],["post-collapsible_2",[[1,"post-collapsible",{"collapsed":[1028],"toggle":[64]},null,{"collapsed":["collapsedChange"]}],[1,"post-collapsible-trigger",{"for":[513],"update":[64]},null,{"for":["validateAriaAttributes"]}]]],["post-closebutton_15",[[1,"post-language-switch",{"caption":[1],"description":[1],"variant":[1],"activeLang":[32]},[[0,"postChange","handlePostChange"],[0,"postLanguageOptionInitiallyActive","handleInitiallyActive"]],{"caption":["validateCaption"],"description":["validateDescription"],"variant":["validateVariant"]}],[1,"post-closebutton"],[4,"post-mainnavigation",{"canScrollLeft":[32],"canScrollRight":[32]},[[9,"mouseup","stopScrolling"],[9,"mouseleave","stopScrolling"]]],[1,"post-header",{"device":[32],"hasNavigation":[32],"mobileMenuExtended":[32],"megadropdownOpen":[32],"toggleMobileMenu":[64]},null,{"device":["lockBody"],"mobileMenuExtended":["lockBody"]}],[4,"post-language-option",{"code":[1],"active":[1540],"variant":[1],"name":[1],"url":[1],"select":[64]},null,{"code":["validateCode"],"variant":["validateVariant"],"name":["validateName"],"url":["validateUrl"]}],[4,"post-list",{"titleHidden":[4,"title-hidden"],"horizontal":[516],"titleId":[32]}],[1,"post-list-item"],[1,"post-logo",{"url":[1]},null,{"url":["validateUrl"]}],[4,"post-megadropdown",{"device":[32],"isVisible":[32],"animationClass":[32],"toggle":[64],"show":[64],"hide":[64],"focusFirst":[64]}],[4,"post-megadropdown-trigger",{"for":[1],"ariaExpanded":[32]},null,{"for":["validateControlFor"]}],[1,"post-togglebutton",{"toggled":[1028]}],[1,"post-menu",{"placement":[1],"isVisible":[32],"toggle":[64],"show":[64],"hide":[64]},null,{"placement":["validatePlacement"]}],[4,"post-menu-trigger",{"for":[513],"ariaExpanded":[32]},null,{"for":["validateControlFor"]}],[4,"post-popovercontainer",{"placement":[1],"edgeGap":[2,"edge-gap"],"animation":[1],"arrow":[4],"manualClose":[4,"manual-close"],"safeSpace":[513,"safe-space"],"show":[64],"hide":[64],"toggle":[64]},null,{"placement":["validatePlacement"],"edgeGap":["validateEdgeGap"],"safeSpace":["validateSafeSpace"]}],[1,"post-icon",{"animation":[1],"base":[1],"flipH":[4,"flip-h"],"flipV":[4,"flip-v"],"name":[513],"rotate":[2],"scale":[2]},null,{"animation":["validateAnimation"],"base":["validateBase"],"name":["validateName"],"rotate":["validateRotate"],"scale":["validateScale"]}]]],["post-accordion_2",[[1,"post-accordion-item",{"collapsed":[1028],"headingLevel":[2,"heading-level"],"id":[32],"slottedLogo":[32],"toggle":[64]},[[2,"postToggle","onCollapseToggle"]],{"headingLevel":["validateHeadingLevel"]}],[1,"post-accordion",{"headingLevel":[2,"heading-level"],"multiple":[4],"toggle":[64],"expandAll":[64],"collapseAll":[64]},[[0,"postToggle","collapseToggleHandler"]],{"headingLevel":["validateHeadingLevel"]}]]],["post-breadcrumb-item_2",[[1,"post-breadcrumb-item",{"url":[1],"fullUrl":[32]},null,{"url":["validateUrl"]}],[4,"post-menu-item"]]]], options);
+  return bootstrapLazy([["post-breadcrumbs",[[1,"post-breadcrumbs",{"homeUrl":[1,"home-url"],"homeText":[1,"home-text"],"breadcrumbItems":[32],"isConcatenated":[32],"lastWindowWidth":[32]},null,{"homeUrl":["validateHomeUrl"],"homeText":["validateHomeText"]}]]],["post-footer",[[1,"post-footer",{"label":[1],"device":[32],"gridSlotDisplayed":[32]},null,{"label":["validateLabel"]}]]],["post-back-to-top",[[1,"post-back-to-top",{"label":[513],"belowFold":[32]},null,{"label":["validateLabel"],"belowFold":["watchBelowFold"]}]]],["post-card-control",[[65,"post-card-control",{"label":[513],"description":[1],"type":[1],"name":[1],"value":[1],"checked":[1028],"disabled":[1028],"validity":[1028],"icon":[1],"focused":[32],"reset":[64],"groupReset":[64]},null,{"label":["validateControlLabel"],"description":["validateControlDescription"],"type":["validateControlType"],"name":["validateControlName"],"value":["validateControlValue"],"icon":["validateControlIcon"],"checked":["updateControlChecked"],"disabled":["updateControlDisabled"]}]]],["post-popover",[[1,"post-popover",{"placement":[1],"closeButtonCaption":[1,"close-button-caption"],"arrow":[4],"show":[64],"hide":[64],"toggle":[64]},null,{"placement":["validatePlacement"],"closeButtonCaption":["validateCloseButtonCaption"]}]]],["post-rating",[[1,"post-rating",{"label":[1],"stars":[2],"currentRating":[1026,"current-rating"],"readonly":[4],"hoveredIndex":[32]},null,{"label":["validateLabel"],"stars":["validateStars"],"currentRating":["validateCurrentRating"]}]]],["post-tooltip",[[1,"post-tooltip",{"placement":[1],"arrow":[4],"animation":[1],"open":[1540],"show":[64],"hide":[64],"toggle":[64]},null,{"placement":["validatePlacement"]}]]],["post-avatar",[[1,"post-avatar",{"firstname":[513],"lastname":[1],"userid":[1],"email":[1],"slottedImage":[32],"avatarType":[32],"imageUrl":[32],"imageAlt":[32],"initials":[32],"storageKey":[32]},null,{"firstname":["validateFirstname"],"lastname":["validateLastname"],"userid":["updateUserid"],"email":["updateEmail"]}]]],["post-banner",[[1,"post-banner",{"type":[513],"hasActions":[32],"dismiss":[64]},[[0,"click","onCloseButtonClick"]],{"type":["validateType"]}]]],["post-linkarea",[[1,"post-linkarea"]]],["post-tab-header",[[1,"post-tab-header",{"panel":[513],"tabId":[32]},null,{"panel":["validateFor"]}]]],["post-tab-panel",[[1,"post-tab-panel",{"name":[513],"panelId":[32]},null,{"name":["validateName"]}]]],["post-tabs",[[1,"post-tabs",{"activePanel":[1,"active-panel"],"fullWidth":[516,"full-width"],"show":[64]}]]],["post-tooltip-trigger",[[1,"post-tooltip-trigger",{"for":[513],"delay":[2]},null,{"for":["validateControlFor"]}]]],["post-collapsible_2",[[1,"post-collapsible",{"collapsed":[1028],"toggle":[64]},null,{"collapsed":["collapsedChange"]}],[1,"post-collapsible-trigger",{"for":[513],"update":[64]},null,{"for":["validateAriaAttributes"]}]]],["post-closebutton_15",[[1,"post-language-switch",{"caption":[1],"description":[1],"variant":[1],"activeLang":[32]},[[0,"postChange","handlePostChange"],[0,"postLanguageOptionInitiallyActive","handleInitiallyActive"]],{"caption":["validateCaption"],"description":["validateDescription"],"variant":["validateVariant"]}],[1,"post-closebutton"],[4,"post-mainnavigation",{"canScrollLeft":[32],"canScrollRight":[32]},[[9,"mouseup","stopScrolling"],[9,"mouseleave","stopScrolling"]]],[1,"post-header",{"device":[32],"hasNavigation":[32],"mobileMenuExtended":[32],"megadropdownOpen":[32],"toggleMobileMenu":[64]},null,{"device":["lockBody"],"mobileMenuExtended":["lockBody"]}],[4,"post-language-option",{"code":[1],"active":[1540],"variant":[1],"name":[1],"url":[1],"select":[64]},null,{"code":["validateCode"],"variant":["validateVariant"],"name":["validateName"],"url":["validateUrl"]}],[4,"post-list",{"titleHidden":[4,"title-hidden"],"horizontal":[516],"titleId":[32]}],[1,"post-list-item"],[1,"post-logo",{"url":[1]},null,{"url":["validateUrl"]}],[4,"post-megadropdown",{"device":[32],"isVisible":[32],"animationClass":[32],"toggle":[64],"show":[64],"hide":[64],"focusFirst":[64]}],[4,"post-megadropdown-trigger",{"for":[1],"ariaExpanded":[32]},null,{"for":["validateControlFor"]}],[1,"post-togglebutton",{"toggled":[1028]}],[1,"post-menu",{"placement":[1],"isVisible":[32],"toggle":[64],"show":[64],"hide":[64]},null,{"placement":["validatePlacement"]}],[4,"post-menu-trigger",{"for":[513],"ariaExpanded":[32]},null,{"for":["validateControlFor"]}],[4,"post-popovercontainer",{"placement":[1],"edgeGap":[2,"edge-gap"],"animation":[1],"arrow":[4],"manualClose":[4,"manual-close"],"safeSpace":[513,"safe-space"],"show":[64],"hide":[64],"toggle":[64]},null,{"placement":["validatePlacement"],"edgeGap":["validateEdgeGap"],"safeSpace":["validateSafeSpace"]}],[1,"post-icon",{"animation":[1],"base":[1],"flipH":[4,"flip-h"],"flipV":[4,"flip-v"],"name":[513],"rotate":[2],"scale":[2]},null,{"animation":["validateAnimation"],"base":["validateBase"],"name":["validateName"],"rotate":["validateRotate"],"scale":["validateScale"]}]]],["post-accordion_2",[[1,"post-accordion-item",{"collapsed":[1028],"headingLevel":[2,"heading-level"],"id":[32],"slottedLogo":[32],"toggle":[64]},[[2,"postToggle","onCollapseToggle"]],{"headingLevel":["validateHeadingLevel"]}],[1,"post-accordion",{"headingLevel":[2,"heading-level"],"multiple":[4],"toggle":[64],"expandAll":[64],"collapseAll":[64]},[[0,"postToggle","collapseToggleHandler"]],{"headingLevel":["validateHeadingLevel"]}]]],["post-breadcrumb-item_2",[[1,"post-breadcrumb-item",{"url":[1],"fullUrl":[32]},null,{"url":["validateUrl"]}],[4,"post-menu-item"]]]], options);
 };
 
 export { defineCustomElements };

package/dist/esm/package-0Ltezq5O.js

@@ -0,0 +1,3 @@
+const version = "10.0.0-next.48";
+
+export { version as v };

package/dist/esm/post-accordion_2.entry.js

@@ -1,8 +1,8 @@
 import { r as registerInstance, h, H as Host, a as getElement } from './index-C8a0ddDa.js';
-import { v as version } from './package-7hVD-I9l.js';
-import { d as checkRequiredAndOneOf, e as checkEmptyOrOneOf } from './index-BWC0gtGU.js';
+import { v as version } from './package-0Ltezq5O.js';
+import { b as checkRequiredAndOneOf, d as checkEmptyOrOneOf } from './index-VmK3ABCB.js';
 import './breakpoints-_0G7tavk.js';
-import { E as EventFrom } from './event-from-8U5GFtQP.js';
+import { E as EventFrom } from './event-from-kraHE1r3.js';
 import { n as nanoid } from './index.browser-BLchVpF6.js';
 
 const HEADING_LEVELS = [1, 2, 3, 4, 5, 6];
@@ -162,10 +162,10 @@ const PostAccordionItem = class {
     render() {
         const headingLevel = this.host.closest('post-accordion')?.getAttribute('heading-level');
         const HeadingTag = `h${headingLevel ?? this.headingLevel ?? 2}`;
-        return (h(Host, { key: 'd7176f314fa0f907bd5b69555a2f25561f3875cf', id: this.id, "data-version": version }, h("div", { key: '978c451798e5bafe38ef57be29818f02ccf49dab', part: "accordion-item", class: "accordion-item" }, h("post-collapsible-trigger", { key: '615da8a2ad5fb3c3fd1e5e0c2c8ee9a260a34263', for: `${this.id}--collapse` }, h(HeadingTag, { key: '9c270ded36f1e1b1b466ba8c4ca529ab26368d5c', class: "accordion-header", id: `${this.id}--header` }, h("button", { key: 'ddf278d1ccf6d78932ae4c6a9617d5852fb73064', type: "button", class: `accordion-button${this.collapsed ? ' collapsed' : ''}`, part: "button" }, h("span", { key: '3989145bdbe0a313c6ed10220d2089c89688d613', class: {
+        return (h(Host, { key: 'b98847d19894430b6f65130aebf8673a45afd1e6', id: this.id, "data-version": version }, h("div", { key: 'f26f9d3a4a1f59db23b4698b321e28e112c3eed0', part: "accordion-item", class: "accordion-item" }, h("post-collapsible-trigger", { key: '14bdacce04d67a03655f600feeaeec065e0fc198', for: `${this.id}--collapse` }, h(HeadingTag, { key: '7a07a70d172306ce37f8bd0143b21ed7ec0cab8a', class: "accordion-header", id: `${this.id}--header` }, h("button", { key: '5ad0698a62df5c4b2c0a77ff622090b20f348e9c', type: "button", class: `accordion-button${this.collapsed ? ' collapsed' : ''}`, part: "button" }, h("span", { key: '6e5fcb0c9efa8a57e05fd162c72b9c170a8210c6', class: {
                 'logo-container': true,
                 'has-image': !!this.slottedLogo,
-            } }, h("slot", { key: 'dd053bf73234db3bac772bf730003b4f2cc030cb', name: "logo", onSlotchange: this.onSlotLogoChange.bind(this) })), h("slot", { key: '9ac06513d55828a9d7a3552aa66c9946fde7c793', name: "header" }), h("post-icon", { key: 'fb46c528581e1a149706fd9e124857cc288747f8', name: "2051" })))), h("post-collapsible", { key: '996887d6a0098a37dbac8d5edb950900f57d15f7', id: `${this.id}--collapse`, collapsed: this.collapsed, ref: el => (this.collapsible = el) }, h("div", { key: '21fa64a007cf0da4e0c0cf56f5862641d016517a', class: "accordion-body", part: "body" }, h("slot", { key: '2a9f7731183e35c37523e079d437612dbda1a01b' }))))));
+            } }, h("slot", { key: '41a1409f723bf52de893324ce45d4e7f31eb8908', name: "logo", onSlotchange: this.onSlotLogoChange.bind(this) })), h("slot", { key: '7186adfe4a4fe67f4dbaeb7569820d0d06c18428', name: "header" }), h("post-icon", { key: 'fbfcbdc9947a8c7cf80d861aba3a77be0dff91d1', name: "2051" })))), h("post-collapsible", { key: '5de19aab5eb0134b7c3e7f43e5c2da0cb8413908', id: `${this.id}--collapse`, collapsed: this.collapsed, ref: el => (this.collapsible = el) }, h("div", { key: '5112ba8604ea177af4d88033f682c2a4cc6c4ffd', class: "accordion-body", part: "body" }, h("slot", { key: 'd70ab76842fced3f7dec812471685071e377bc61' }))))));
     }
     get host() { return getElement(this); }
     static get watchers() { return {

package/dist/esm/post-avatar.entry.js

@@ -1,15 +1,16 @@
 import { r as registerInstance, h, H as Host, a as getElement } from './index-C8a0ddDa.js';
-import { v as version } from './package-7hVD-I9l.js';
-import { c as checkRequiredAndType, a as checkEmptyOrType, b as checkEmptyOrPattern } from './index-BWC0gtGU.js';
+import { v as version } from './package-0Ltezq5O.js';
+import { c as checkRequiredAndType, a as checkEmptyOrType, e as checkEmptyOrPattern } from './index-VmK3ABCB.js';
 import './breakpoints-_0G7tavk.js';
 
-const postAvatarCss = "@keyframes popIn{from{transform:scale(0.9);opacity:0;transition-property:transform,opacity,overlay,display;transition-behavior:allow-discrete;transition-duration:var(--post-transition-duration, 0.35s);transition-timing-function:linear(0, 0.007, 0.029 2.2%, 0.118 4.7%, 0.625 14.4%, 0.826 19%, 0.902, 0.962, 1.008 26.1%, 1.041 28.7%, 1.064 32.1%, 1.07 36%, 1.061 40.5%, 1.015 53.4%, 0.999 61.6%, 0.995 71.2%, 1)}to{opacity:1;transform:scale(1)}}: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{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);border:0}";
-
 // https://docs.gravatar.com/api/avatars/images/
 const GRAVATAR_DEFAULT = '404';
 const GRAVATAR_RATING = 'g';
 const GRAVATAR_SIZE = 80;
 const GRAVATAR_BASE_URL = `https://www.gravatar.com/avatar/{email}?s=${GRAVATAR_SIZE}&d=${GRAVATAR_DEFAULT}&r=${GRAVATAR_RATING}`;
+
+const postAvatarCss = "@keyframes popIn{from{transform:scale(0.9);opacity:0;transition-property:transform,opacity,overlay,display;transition-behavior:allow-discrete;transition-duration:var(--post-transition-duration, 0.35s);transition-timing-function:linear(0, 0.007, 0.029 2.2%, 0.118 4.7%, 0.625 14.4%, 0.826 19%, 0.902, 0.962, 1.008 26.1%, 1.041 28.7%, 1.064 32.1%, 1.07 36%, 1.061 40.5%, 1.015 53.4%, 0.999 61.6%, 0.995 71.2%, 1)}to{opacity:1;transform:scale(1)}}: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{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);border:0}";
+
 const emailPattern = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;
 var AvatarType;
 (function (AvatarType) {
@@ -25,6 +26,8 @@ const PostAvatar = class {
         this.imageUrl = '';
         this.imageAlt = '';
         this.initials = '';
+        // To handle email or userid updates and reset the storage item
+        this.storageKey = '';
     }
     validateFirstname() {
         checkRequiredAndType(this, 'firstname', 'string');
@@ -32,47 +35,67 @@ const PostAvatar = class {
     validateLastname() {
         checkEmptyOrType(this, 'lastname', 'string');
     }
-    validateUserid() {
+    updateUserid() {
+        this.validateUserId();
+        this.getAvatarImage();
+    }
+    updateEmail() {
+        this.validateEmail();
+        this.getAvatarImage();
+    }
+    validateUserId() {
         checkEmptyOrType(this, 'userid', 'string');
     }
     validateEmail() {
         if (this.email)
             checkEmptyOrPattern(this, 'email', emailPattern);
     }
-    async getAvatar() {
-        if (this.slottedImage !== null) {
-            this.avatarType = AvatarType.Slotted;
-        }
-        else {
-            let imageLoaded = false;
-            if (!imageLoaded && this.userid)
+    async getAvatarImage() {
+        let imageLoaded = false;
+        this.slottedImage = this.host.querySelector('img');
+        const imageUrl = this.slottedImage?.getAttribute('src');
+        if (!imageUrl) {
+            if (this.userid) {
                 imageLoaded = await this.getImageByProp(this.userid, this.fetchImageByUserId.bind(this));
-            if (!imageLoaded && this.email)
+            }
+            if (!imageLoaded && this.email?.match(emailPattern)) {
                 imageLoaded = await this.getImageByProp(this.email, this.fetchImageByEmail.bind(this));
-            if (!imageLoaded)
-                this.getAvatarByInitials();
+            }
+            if (!imageLoaded) {
+                this.getAvatarInitials();
+            }
+        }
+        else {
+            const slottedImageLoaded = await this.getImageByProp(imageUrl, this.fetchSlottedImage.bind(this));
+            if (!slottedImageLoaded) {
+                this.slottedImage.style.display = 'none';
+                this.getAvatarInitials();
+            }
+            else {
+                this.slottedImage.style.display = 'block';
+            }
         }
     }
     async getImageByProp(prop, fetchImage) {
         if (!prop)
             return false;
-        const imageResponse = (await this.getStorageItem(prop)) ?? { ok: false, url: '' };
-        if (!imageResponse.ok) {
-            try {
-                const r = await fetchImage();
-                imageResponse.ok = r.ok;
-                imageResponse.url = r.url;
-                this.imageUrl = imageResponse.url;
-                this.imageAlt = `${this.firstname} ${this.lastname} avatar`;
-                this.avatarType = AvatarType.Image;
-                this.setStorageItem(this.userid, JSON.stringify(imageResponse));
-            }
-            catch (error) {
-                this.removeStorageItem(prop);
-                console.info(`Loading avatar by type "${AvatarType.Image}" failed.`);
-            }
+        let imageResponse;
+        try {
+            imageResponse = await fetchImage(prop);
+        }
+        catch (error) {
+            console.info('Loading avatar image failed.', error);
+            return false;
+        }
+        if (!imageResponse?.ok) {
+            return false;
+        }
+        else {
+            this.imageUrl = imageResponse.url;
+            this.imageAlt = `${this.firstname} ${this.lastname} avatar`;
+            this.avatarType = AvatarType.Image;
+            return true;
         }
-        return imageResponse.ok;
     }
     async fetchImageByUserId() {
         return await fetch(PostAvatar.INTERNAL_USERID_IMAGE_SRC.replace('{userid}', encodeURIComponent(this.userid)));
@@ -82,7 +105,10 @@ const PostAvatar = class {
         const imageUrl = GRAVATAR_BASE_URL.replace('{email}', email);
         return await fetch(imageUrl);
     }
-    getAvatarByInitials() {
+    async fetchSlottedImage(imageUrl) {
+        return await fetch(imageUrl, { method: 'HEAD' });
+    }
+    getAvatarInitials() {
         this.initials = this.getInitials();
         this.avatarType = AvatarType.Initials;
     }
@@ -95,19 +121,6 @@ const PostAvatar = class {
             .join('')
             .trim();
     }
-    async getStorageItem(keyToken) {
-        const key = await this.cryptify(keyToken);
-        const value = window?.sessionStorage?.getItem(key);
-        return value ? JSON.parse(value) : null;
-    }
-    async setStorageItem(keyToken, value) {
-        const key = await this.cryptify(keyToken);
-        window?.sessionStorage?.setItem(key, value);
-    }
-    async removeStorageItem(keyToken) {
-        const key = await this.cryptify(keyToken);
-        window?.sessionStorage?.removeItem(key);
-    }
     async cryptify(key) {
         return await crypto.subtle.digest('SHA-256', new TextEncoder().encode(key)).then(buffer => {
             return Array.from(new Uint8Array(buffer))
@@ -115,18 +128,42 @@ const PostAvatar = class {
                 .join('');
         });
     }
-    onSlotDefaultChange() {
-        this.slottedImage = this.host.querySelector('img');
-        this.getAvatar();
+    slotChanged() {
+        const slot = this.host.shadowRoot.querySelector('slot');
+        const assignedNodes = slot?.assignedNodes({ flatten: true }) || [];
+        assignedNodes.forEach(node => {
+            if (node.nodeType === Node.ELEMENT_NODE) {
+                const el = node;
+                if (el.tagName === 'IMG') {
+                    this.observeImageSrcChanges(el);
+                }
+            }
+        });
+        this.getAvatarImage();
     }
-    componentWillRender() {
-        this.slottedImage = this.host.querySelector('img');
-        this.getAvatar();
+    // Observe the Slotted image src attribute and update the image
+    observeImageSrcChanges(img) {
+        if (this.slottedImageObserver) {
+            this.slottedImageObserver.disconnect();
+        }
+        this.slottedImageObserver = new MutationObserver(mutations => {
+            mutations.forEach(mutation => {
+                if (mutation.type === 'attributes' && mutation.attributeName === 'src') {
+                    this.getAvatarImage();
+                }
+            });
+        });
+        this.slottedImageObserver.observe(img, { attributes: true, attributeFilter: ['src'] });
+    }
+    connectedCallback() {
+        //This provides a fallback by showing the initials while the image is still loading or delayed.
+        this.getAvatarInitials();
+        this.getAvatarImage();
     }
     componentDidLoad() {
         this.validateFirstname();
         this.validateLastname();
-        this.validateUserid();
+        this.validateUserId();
         this.validateEmail();
     }
     render() {
@@ -138,14 +175,14 @@ const PostAvatar = class {
             // eslint-disable-next-line @stencil-community/render-returns-host
             return acc;
         }, []);
-        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))));
+        return (h(Host, { "data-version": version }, h("span", { class: this.avatarType === 'slotted' ? '' : 'd-none' }, h("slot", { onSlotchange: this.slotChanged.bind(this) })), this.avatarType === 'image' && h("img", { src: this.imageUrl, alt: this.imageAlt }), this.avatarType === 'initials' && h("div", { class: "initials" }, initials)));
     }
     get host() { return getElement(this); }
     static get watchers() { return {
         "firstname": ["validateFirstname"],
         "lastname": ["validateLastname"],
-        "userid": ["validateUserid"],
-        "email": ["validateEmail"]
+        "userid": ["updateUserid"],
+        "email": ["updateEmail"]
     }; }
 };
 PostAvatar.INTERNAL_USERID_IMAGE_SRC = 'https://web.post.ch/UserProfileImage/{userid}.png';

package/dist/esm/post-back-to-top.entry.js

@@ -1,10 +1,35 @@
 import { r as registerInstance, h, H as Host, a as getElement } from './index-C8a0ddDa.js';
-import { s as slideDown, a as slideUp } from './slide-BuLMaH5t.js';
-import { v as version } from './package-7hVD-I9l.js';
-import { c as checkRequiredAndType } from './index-BWC0gtGU.js';
+import { v as version } from './package-0Ltezq5O.js';
+import { c as checkRequiredAndType } from './index-VmK3ABCB.js';
 import './breakpoints-_0G7tavk.js';
 
-const postBackToTopCss = ":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}";
+// Define common animation options
+const easing = 'ease';
+const defaultDuration = 500;
+const fill = 'forwards';
+function createSlideFadeAnimation(el, keyframes, duration = defaultDuration) {
+    return el.animate(keyframes, {
+        duration: duration,
+        easing,
+        fill,
+    });
+}
+function slideUpAndFadeOut(el, translateY = '-100%', duration = defaultDuration) {
+    const keyframes = [
+        { transform: 'translateY(0)', opacity: '1' },
+        { transform: `translateY(${translateY})`, opacity: '0' },
+    ];
+    return createSlideFadeAnimation(el, keyframes, duration);
+}
+function slideDownAndFadeIn(el, translateY = '-100%', duration = defaultDuration) {
+    const keyframes = [
+        { transform: `translateY(${translateY})`, opacity: '0' },
+        { transform: 'translateY(0)', opacity: '1' },
+    ];
+    return createSlideFadeAnimation(el, keyframes, duration);
+}
+
+const postBackToTopCss = ":host{opacity:0;--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}";
 
 const PostBackToTop = class {
     constructor(hostRef) {
@@ -23,10 +48,10 @@ const PostBackToTop = class {
     /*Watch for changes in belowFold to show/hide the back to top button*/
     watchBelowFold(newValue) {
         if (newValue) {
-            slideDown(this.host, this.translateY);
+            slideDownAndFadeIn(this.host, this.translateY);
         }
         else {
-            slideUp(this.host, this.translateY);
+            slideUpAndFadeOut(this.host, this.translateY);
         }
     }
     scrollToTop() {
@@ -57,7 +82,7 @@ const PostBackToTop = class {
                 parseFloat(positionTop.replace('px', '')) -
                 parseFloat(elevationHeight.replace('px', ''))) + 'px';
         if (this.belowFold) {
-            slideDown(this.host, this.translateY);
+            slideDownAndFadeIn(this.host, this.translateY);
         }
         if (!this.belowFold) {
             this.host.style.transform = `translateY(${this.translateY})`;
@@ -76,7 +101,7 @@ const PostBackToTop = class {
         window.removeEventListener('scroll', this.handleScroll);
     }
     render() {
-        return (h(Host, { key: '7edc6db9d849cf9ce0308a2ac5b2c2f9bc4e47a9', "data-version": version }, h("button", { key: '610e81756ce3dd927f55d48beb8cd829b66fc247', class: "back-to-top", "aria-hidden": this.belowFold ? 'false' : 'true', tabindex: this.belowFold ? '0' : '-1', onClick: this.scrollToTop }, h("post-icon", { key: 'bb1f3cc462de7680361f4cfd04abb1816aebd488', "aria-hidden": "true", name: "3026" }), h("span", { key: '4fbd84d78c425140adea5833450cef60af967f5a', class: "visually-hidden" }, this.label))));
+        return (h(Host, { key: '820244e9c039304895d78887000ed986707bf3b1', "data-version": version }, h("button", { key: 'c1d38883fbf31c50b2b00e08e6b22cbc6be37adb', class: "back-to-top", "aria-hidden": this.belowFold ? 'false' : 'true', tabindex: this.belowFold ? '0' : '-1', onClick: this.scrollToTop }, h("post-icon", { key: '3cc57c355a12bf500f368e906d147be10f9014e7', "aria-hidden": "true", name: "3026" }), h("span", { key: '134e5c579e2d99d64c25ce21ab538e51520a6dd6', class: "visually-hidden" }, this.label))));
     }
     get host() { return getElement(this); }
     static get watchers() { return {