@swisspost/design-system-components 9.0.0-next.1 → 9.0.0-next.10

package/dist/cjs/{post-tooltip-8d7e64f6.js → post-tooltip-cefce5e1.js}

@@ -1,13 +1,9 @@
 'use strict';
 
-const index = require('./index-c15bd800.js');
-const _package = require('./package-c7d01968.js');
+const index = require('./index-f1b08cdb.js');
+const _package = require('./package-aaec3cba.js');
 const attributeObserver = require('./attribute-observer-10f08c04.js');
-const index$1 = require('./index-01f30442.js');
-
-function timeout(delay) {
-    return new Promise(resolve => setTimeout(resolve, delay));
-}
+const index$1 = require('./index-5d4e0aed.js');
 
 var commonjsGlobal = typeof globalThis !== 'undefined' ? globalThis : typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};
 
@@ -4778,7 +4774,7 @@ const isFocusable = /*@__PURE__*/getDefaultExportFromCjs(focusable.exports);
 
 }(window, document));
 
-const postTooltipCss = ":host{--post-contrast-color:#fff;--post-bg-rgb:51, 51, 51}post-popovercontainer{padding:.25rem .5rem;max-width:13.5rem;min-height:1rem}post-popovercontainer[arrow]::after{position:absolute;content:\"\";inset:-13px;z-index:-1}";
+const postTooltipCss = "post-popovercontainer{padding:var(--post-core-dimension-4) var(--post-core-dimension-8);max-width:calc(2*var(--post-core-dimension-112) - var(--post-core-dimension-8));min-height:var(--post-core-dimension-16)}post-popovercontainer[arrow]::after{position:absolute;content:\"\";inset:-13px;z-index:-1}";
 const PostTooltipStyle0 = postTooltipCss;
 
 const OPEN_DELAY = 650; // matches HTML title delay
@@ -4792,6 +4788,8 @@ let tooltipInstances = 0;
 let hideTooltipTimeout = null;
 const tooltipTargetAttribute = 'data-tooltip-target';
 const tooltipTargetAttributeSelector = `[${tooltipTargetAttribute}]`;
+let globalCurrentTarget;
+let tooltipTimeout = null;
 /**
  * Global event listener to show tooltips. This is globalized so that triggers that are rendered
  * async will still work without the need to set listeners on the element itself
@@ -4804,8 +4802,11 @@ const tooltipTargetAttributeSelector = `[${tooltipTargetAttribute}]`;
  */
 const globalInterestHandler = (e) => {
     const targetElement = e.target.closest(tooltipTargetAttributeSelector);
-    if (!targetElement || !('getAttribute' in targetElement))
+    globalCurrentTarget = targetElement;
+    if (!targetElement || !('getAttribute' in targetElement)) {
+        clearTimeout(tooltipTimeout);
         return;
+    }
     const tooltipTarget = targetElement.getAttribute(tooltipTargetAttribute);
     if (!tooltipTarget || tooltipTarget === '')
         return;
@@ -4930,18 +4931,29 @@ const PostTooltip = class {
      * @param triggeredByFocus A boolean indicating if the tooltip was triggered by a focus event.
      */
     async show(target, triggeredByFocus = false) {
-        if (this.delayed)
-            await timeout(OPEN_DELAY);
-        // Determine if the tooltip was opened by a focus event
-        this.wasOpenedByFocus = triggeredByFocus;
-        // Disable pointer events if triggered by focus, otherwise enable them
-        if (this.wasOpenedByFocus) {
-            this.host.style.pointerEvents = 'none';
+        const showTooltip = () => {
+            // If focus or pointer event is not on the button anymore, don't show the tooltip
+            if (globalCurrentTarget !== target)
+                return;
+            // Determine if the tooltip was opened by a focus event
+            this.wasOpenedByFocus = triggeredByFocus;
+            // Disable pointer events if triggered by focus, otherwise enable them
+            if (this.wasOpenedByFocus) {
+                this.host.style.pointerEvents = 'none';
+            }
+            else {
+                this.host.style.pointerEvents = 'auto';
+            }
+            this.popoverRef.show(target);
+        };
+        if (this.delayed) {
+            tooltipTimeout = setTimeout(() => {
+                showTooltip();
+            }, OPEN_DELAY);
         }
         else {
-            this.host.style.pointerEvents = 'auto';
+            showTooltip();
         }
-        this.popoverRef.show(target);
     }
     /**
      * Programmatically hide this tooltip
@@ -4976,7 +4988,7 @@ const PostTooltip = class {
     }
     render() {
         const popoverClass = `${this.arrow ? ' has-arrow' : ''}`;
-        return (index.h(index.Host, { key: '6d5e454da6fb46fb4446d8ed1deb8c6a9f2f2e0f', "data-version": _package.version, role: "tooltip", onPointerOver: this.handleInterest, onPointerOut: this.handleInterestLost, onFocusIn: this.handleInterest, onFocusOut: this.handleInterestLost }, index.h("post-popovercontainer", { key: '7b626cd4699e4178fbd8506b88fae64c94ab1631', class: popoverClass, arrow: this.arrow, placement: this.placement, ref: (el) => (this.popoverRef = el) }, index.h("slot", { key: 'ae5721af16313dc3737947d2ae130e0514ef2dd8' }))));
+        return (index.h(index.Host, { key: '492f3f8b1b323417304ffba6c93f277c18f5b3d8', "data-version": _package.version, role: "tooltip", onPointerOver: this.handleInterest, onPointerOut: this.handleInterestLost, onFocusIn: this.handleInterest, onFocusOut: this.handleInterestLost }, index.h("post-popovercontainer", { key: '1b25c36c8351f0471e9acdf1fdf3073fa59683da', class: popoverClass, arrow: this.arrow, placement: this.placement, ref: (el) => (this.popoverRef = el) }, index.h("slot", { key: '0c1f7d6c81e214155976d1fb6151ec0f97724724' }))));
     }
     get host() { return index.getElement(this); }
     static get watchers() { return {

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

@@ -2,13 +2,15 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const postTooltip = require('./post-tooltip-8d7e64f6.js');
-require('./index-c15bd800.js');
-require('./package-c7d01968.js');
+const postTooltip = require('./post-tooltip-cefce5e1.js');
+require('./index-f1b08cdb.js');
+require('./package-aaec3cba.js');
 require('./attribute-observer-10f08c04.js');
-require('./index-01f30442.js');
+require('./index-5d4e0aed.js');
 require('./constants-238701d3.js');
 require('./check-one-of-f4f5d0c0.js');
+require('./check-type-64af82a9.js');
+require('./check-url-3ffdd2fb.js');
 
 
 

package/dist/cjs/slide-5d51abe8.js

@@ -0,0 +1,28 @@
+'use strict';
+
+const easing = 'ease';
+const duration = 500;
+const fill = 'forwards';
+const slideUp = (el, translateSize = '100%') => {
+    return el.animate([
+        { transform: `translateY(${translateSize})` }, // Starting position (no translation)
+        { transform: 'translateY(0)' }, // End position
+    ], {
+        duration: duration,
+        easing,
+        fill,
+    });
+};
+const slideDown = (el, translateSize = '100%') => {
+    return el.animate([
+        { transform: 'translateY(0)' }, // Starting position (no translation)
+        { transform: `translateY(${translateSize})` }, // End position
+    ], {
+        duration: duration,
+        easing,
+        fill,
+    });
+};
+
+exports.slideDown = slideDown;
+exports.slideUp = slideUp;

package/dist/collection/animations/slide.js

@@ -0,0 +1,23 @@
+const easing = 'ease';
+const duration = 500;
+const fill = 'forwards';
+export const slideUp = (el, translateSize = '100%') => {
+    return el.animate([
+        { transform: `translateY(${translateSize})` }, // Starting position (no translation)
+        { transform: 'translateY(0)' }, // End position
+    ], {
+        duration: duration,
+        easing,
+        fill,
+    });
+};
+export const slideDown = (el, translateSize = '100%') => {
+    return el.animate([
+        { transform: 'translateY(0)' }, // Starting position (no translation)
+        { transform: `translateY(${translateSize})` }, // End position
+    ], {
+        duration: duration,
+        easing,
+        fill,
+    });
+};

package/dist/collection/collection-manifest.json

@@ -2,20 +2,38 @@
   "entries": [
     "components/post-accordion/post-accordion.js",
     "components/post-accordion-item/post-accordion-item.js",
-    "components/post-alert/post-alert.js",
+    "components/post-avatar/post-avatar.js",
+    "components/post-back-to-top/post-back-to-top.js",
+    "components/post-banner/post-banner.js",
+    "components/post-breadcrumb/post-breadcrumb.js",
+    "components/post-breadcrumb-item/post-breadcrumb-item.js",
     "components/post-card-control/post-card-control.js",
+    "components/post-closebutton/post-closebutton.js",
     "components/post-collapsible/post-collapsible.js",
     "components/post-collapsible-trigger/post-collapsible-trigger.js",
+    "components/post-footer/post-footer.js",
+    "components/post-header/post-header.js",
     "components/post-icon/post-icon.js",
+    "components/post-language-option/post-language-option.js",
+    "components/post-language-switch/post-language-switch.js",
+    "components/post-list/post-list.js",
+    "components/post-list-item/post-list-item.js",
     "components/post-logo/post-logo.js",
+    "components/post-mainnavigation/post-mainnavigation.js",
+    "components/post-megadropdown/post-megadropdown.js",
+    "components/post-megadropdown-trigger/post-megadropdown-trigger.js",
+    "components/post-menu/post-menu.js",
+    "components/post-menu-item/post-menu-item.js",
+    "components/post-menu-trigger/post-menu-trigger.js",
     "components/post-popover/post-popover.js",
     "components/post-popovercontainer/post-popovercontainer.js",
     "components/post-rating/post-rating.js",
     "components/post-tabs/post-tabs.js",
     "components/post-tab-header/post-tab-header.js",
     "components/post-tab-panel/post-tab-panel.js",
-    "components/post-tooltip/post-tooltip.js",
-    "components/post-tag/post-tag.js"
+    "components/post-tag/post-tag.js",
+    "components/post-togglebutton/post-togglebutton.js",
+    "components/post-tooltip/post-tooltip.js"
   ],
   "compiler": {
     "name": "@stencil/core",

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

@@ -1 +1 @@
-:host{display:block}
+:host{display:block}::slotted(post-accordion-item){display:block}::slotted(post-accordion-item:not(:only-of-type:first-of-type)){margin-top: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)}

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

@@ -1 +1 @@
-post-accordion-item::part(accordion-item),.bg-yellow post-accordion-item::part(accordion-item),.bg-white post-accordion-item::part(accordion-item),.bg-light post-accordion-item::part(accordion-item),.bg-gray post-accordion-item::part(accordion-item),.bg-dark post-accordion-item::part(accordion-item),.bg-black post-accordion-item::part(accordion-item),.bg-primary post-accordion-item::part(accordion-item),.bg-secondary post-accordion-item::part(accordion-item),.bg-success post-accordion-item::part(accordion-item),.bg-warning post-accordion-item::part(accordion-item),.bg-error post-accordion-item::part(accordion-item),.bg-info post-accordion-item::part(accordion-item),.bg-success-background post-accordion-item::part(accordion-item),.bg-warning-background post-accordion-item::part(accordion-item),.bg-error-background post-accordion-item::part(accordion-item),.bg-nightblue post-accordion-item::part(accordion-item),.bg-nightblue-bright post-accordion-item::part(accordion-item),.bg-petrol post-accordion-item::part(accordion-item),.bg-petrol-bright post-accordion-item::part(accordion-item),.bg-coral post-accordion-item::part(accordion-item),.bg-coral-bright post-accordion-item::part(accordion-item),.bg-olive post-accordion-item::part(accordion-item),.bg-olive-bright post-accordion-item::part(accordion-item),.bg-purple post-accordion-item::part(accordion-item),.bg-purple-bright post-accordion-item::part(accordion-item),.bg-aubergine post-accordion-item::part(accordion-item),.bg-aubergine-bright post-accordion-item::part(accordion-item),.accordion-item,.bg-yellow .accordion-item,.bg-white .accordion-item,.bg-light .accordion-item,.bg-gray .accordion-item,.bg-dark .accordion-item,.bg-black .accordion-item,.bg-primary .accordion-item,.bg-secondary .accordion-item,.bg-success .accordion-item,.bg-warning .accordion-item,.bg-error .accordion-item,.bg-info .accordion-item,.bg-success-background .accordion-item,.bg-warning-background .accordion-item,.bg-error-background .accordion-item,.bg-nightblue .accordion-item,.bg-nightblue-bright .accordion-item,.bg-petrol .accordion-item,.bg-petrol-bright .accordion-item,.bg-coral .accordion-item,.bg-coral-bright .accordion-item,.bg-olive .accordion-item,.bg-olive-bright .accordion-item,.bg-purple .accordion-item,.bg-purple-bright .accordion-item,.bg-aubergine .accordion-item,.bg-aubergine-bright .accordion-item{--post-bg-opacity: 1;background-color:rgba(var(--post-bg-rgb), var(--post-bg-opacity)) !important;color:var(--post-contrast-color) !important}post-accordion-item::part(accordion-item),.bg-yellow post-accordion-item::part(accordion-item),.bg-white post-accordion-item::part(accordion-item),.bg-light post-accordion-item::part(accordion-item),.bg-gray post-accordion-item::part(accordion-item),.bg-dark post-accordion-item::part(accordion-item),.bg-black post-accordion-item::part(accordion-item),.bg-primary post-accordion-item::part(accordion-item),.bg-secondary post-accordion-item::part(accordion-item),.bg-success post-accordion-item::part(accordion-item),.bg-warning post-accordion-item::part(accordion-item),.bg-error post-accordion-item::part(accordion-item),.bg-info post-accordion-item::part(accordion-item),.bg-success-background post-accordion-item::part(accordion-item),.bg-warning-background post-accordion-item::part(accordion-item),.bg-error-background post-accordion-item::part(accordion-item),.bg-nightblue post-accordion-item::part(accordion-item),.bg-nightblue-bright post-accordion-item::part(accordion-item),.bg-petrol post-accordion-item::part(accordion-item),.bg-petrol-bright post-accordion-item::part(accordion-item),.bg-coral post-accordion-item::part(accordion-item),.bg-coral-bright post-accordion-item::part(accordion-item),.bg-olive post-accordion-item::part(accordion-item),.bg-olive-bright post-accordion-item::part(accordion-item),.bg-purple post-accordion-item::part(accordion-item),.bg-purple-bright post-accordion-item::part(accordion-item),.bg-aubergine post-accordion-item::part(accordion-item),.bg-aubergine-bright post-accordion-item::part(accordion-item),.accordion-item,.bg-yellow .accordion-item,.bg-white .accordion-item,.bg-light .accordion-item,.bg-gray .accordion-item,.bg-dark .accordion-item,.bg-black .accordion-item,.bg-primary .accordion-item,.bg-secondary .accordion-item,.bg-success .accordion-item,.bg-warning .accordion-item,.bg-error .accordion-item,.bg-info .accordion-item,.bg-success-background .accordion-item,.bg-warning-background .accordion-item,.bg-error-background .accordion-item,.bg-nightblue .accordion-item,.bg-nightblue-bright .accordion-item,.bg-petrol .accordion-item,.bg-petrol-bright .accordion-item,.bg-coral .accordion-item,.bg-coral-bright .accordion-item,.bg-olive .accordion-item,.bg-olive-bright .accordion-item,.bg-purple .accordion-item,.bg-purple-bright .accordion-item,.bg-aubergine .accordion-item,.bg-aubergine-bright .accordion-item{--post-contrast-color: #000;--post-focus-color: #1976c8;--post-contrast-color-inverted: #fff;--post-gray-10: hsl(0, 0%, 90%);--post-gray-20: hsl(0, 0%, 80%);--post-gray-40: hsl(0, 0%, 60%);--post-gray-60: hsl(0, 0%, 40%);--post-gray-80: hsl(0, 0%, 20%);--post-yellow: #fc0;--post-white: #fff;--post-light: #faf9f8;--post-gray: #f4f3f1;--post-dark: hsl(0, 0%, 20%);--post-black: #000;--post-primary: hsl(0, 0%, 20%);--post-secondary: hsl(0, 0%, 40%);--post-success: #2c871d;--post-warning: #f49e00;--post-error: #a51728;--post-info: #cce4ee;--post-success-background: #c0debb;--post-warning-background: #fce2b2;--post-error-background: #ffdade;--post-nightblue: #004976;--post-nightblue-bright: #0076a8;--post-petrol: #006d68;--post-petrol-bright: #00968f;--post-coral: #9e2a2f;--post-coral-bright: #e03c31;--post-olive: #716135;--post-olive-bright: #aa9d2e;--post-purple: #80276c;--post-purple-bright: #c5299b;--post-aubergine: #523178;--post-aubergine-bright: #7566a0;--post-contrast-color-rgb: 0, 0, 0;--post-contrast-color-inverted-rgb: 255, 255, 255;--post-gray-10-rgb: 230, 230, 230;--post-gray-20-rgb: 204, 204, 204;--post-gray-40-rgb: 153, 153, 153;--post-gray-60-rgb: 102, 102, 102;--post-gray-80-rgb: 51, 51, 51;--post-black-alpha-10-rgba: rgba(0, 0, 0, 0.1);--post-black-alpha-20-rgba: rgba(0, 0, 0, 0.2);--post-black-alpha-40-rgba: rgba(0, 0, 0, 0.4);--post-black-alpha-60-rgba: rgba(0, 0, 0, 0.6);--post-black-alpha-80-rgba: rgba(0, 0, 0, 0.8);--post-white-alpha-10-rgba: rgba(255, 255, 255, 0.1);--post-white-alpha-20-rgba: rgba(255, 255, 255, 0.2);--post-white-alpha-40-rgba: rgba(255, 255, 255, 0.4);--post-white-alpha-60-rgba: rgba(255, 255, 255, 0.6);--post-white-alpha-80-rgba: rgba(255, 255, 255, 0.8);--post-yellow-rgb: 255, 204, 0;--post-white-rgb: 255, 255, 255;--post-light-rgb: 250, 249, 248;--post-gray-rgb: 244, 243, 241;--post-dark-rgb: 51, 51, 51;--post-black-rgb: 0, 0, 0;--post-primary-rgb: 51, 51, 51;--post-secondary-rgb: 102, 102, 102;--post-success-rgb: 44, 135, 29;--post-warning-rgb: 244, 158, 0;--post-error-rgb: 165, 23, 40;--post-info-rgb: 204, 228, 238;--post-success-background-rgb: 192, 222, 187;--post-warning-background-rgb: 252, 226, 178;--post-error-background-rgb: 255, 218, 222;--post-nightblue-rgb: 0, 73, 118;--post-nightblue-bright-rgb: 0, 118, 168;--post-petrol-rgb: 0, 109, 104;--post-petrol-bright-rgb: 0, 150, 143;--post-coral-rgb: 158, 42, 47;--post-coral-bright-rgb: 224, 60, 49;--post-olive-rgb: 113, 97, 53;--post-olive-bright-rgb: 170, 157, 46;--post-purple-rgb: 128, 39, 108;--post-purple-bright-rgb: 197, 41, 155;--post-aubergine-rgb: 82, 49, 120;--post-aubergine-bright-rgb: 117, 102, 160}.accordion-item{--post-bg-rgb: 244, 243, 241;border-block:2px solid #666}.bg-yellow .accordion-item{--post-bg-rgb: 255, 255, 255}.bg-white .accordion-item{--post-bg-rgb: 244, 243, 241}.bg-light .accordion-item{--post-bg-rgb: 255, 255, 255}.bg-gray .accordion-item{--post-bg-rgb: 255, 255, 255}.bg-dark .accordion-item{--post-bg-rgb: 255, 255, 255}.bg-black .accordion-item{--post-bg-rgb: 255, 255, 255}.bg-primary .accordion-item{--post-bg-rgb: 255, 255, 255}.bg-secondary .accordion-item{--post-bg-rgb: 255, 255, 255}.bg-success .accordion-item{--post-bg-rgb: 255, 255, 255}.bg-warning .accordion-item{--post-bg-rgb: 255, 255, 255}.bg-error .accordion-item{--post-bg-rgb: 255, 255, 255}.bg-info .accordion-item{--post-bg-rgb: 255, 255, 255}.bg-success-background .accordion-item{--post-bg-rgb: 255, 255, 255}.bg-warning-background .accordion-item{--post-bg-rgb: 255, 255, 255}.bg-error-background .accordion-item{--post-bg-rgb: 255, 255, 255}.bg-nightblue .accordion-item{--post-bg-rgb: 255, 255, 255}.bg-nightblue-bright .accordion-item{--post-bg-rgb: 255, 255, 255}.bg-petrol .accordion-item{--post-bg-rgb: 255, 255, 255}.bg-petrol-bright .accordion-item{--post-bg-rgb: 255, 255, 255}.bg-coral .accordion-item{--post-bg-rgb: 255, 255, 255}.bg-coral-bright .accordion-item{--post-bg-rgb: 255, 255, 255}.bg-olive .accordion-item{--post-bg-rgb: 255, 255, 255}.bg-olive-bright .accordion-item{--post-bg-rgb: 255, 255, 255}.bg-purple .accordion-item{--post-bg-rgb: 255, 255, 255}.bg-purple-bright .accordion-item{--post-bg-rgb: 255, 255, 255}.bg-aubergine .accordion-item{--post-bg-rgb: 255, 255, 255}.bg-aubergine-bright .accordion-item{--post-bg-rgb: 255, 255, 255}.accordion-item+.accordion-item{border-block-start:0}.accordion-header{color:#333;font-size:1rem;font-weight:700;line-height:1.5;margin:0}.accordion-button{padding:0;overflow:visible;border:0;background:none;color:inherit;font:inherit;-webkit-user-select:none;user-select:none;appearance:button;outline:none;width:100%;position:relative;padding-block:1rem;padding-inline-start:1rem;padding-inline-end:3rem;text-align:start;transition:opacity 250ms,border-color 250ms,background-color 250ms,color 250ms}.accordion-button:focus-visible{outline:2px solid #1976c8}.accordion-button:hover{color:#000;background-color:#e6e6e6}.accordion-button:disabled{opacity:.4;pointer-events:none}.accordion-button::after{-webkit-mask-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m23.6 18.3-.9.9-6.7-6.6-6.6 6.6-.9-.9 7.5-7.6z'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m23.6 18.3-.9.9-6.7-6.6-6.6 6.6-.9-.9 7.5-7.6z'/%3E%3C/svg%3E");background-color:currentColor;color:currentColor;forced-color-adjust:preserve-parent-color;content:"";display:block;height:1.5rem;width:1.5rem;position:absolute;inset-inline-end:1rem;inset-block-start:50%;transform:translateY(-50%);transition:transform 250ms cubic-bezier(0.4, 0, 0.2, 1)}.accordion-button.collapsed::after{transform:translateY(-50%) rotate(-180deg)}.accordion-button>.text-truncate{display:block}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.accordion-button:hover:not(:disabled),.accordion-button:focus-visible:not(:disabled){outline:2px solid Highlight}.accordion-button:disabled{opacity:1 !important}}.accordion-body{padding:.5rem 1rem 1rem;font-weight:400}.accordion-button>*,.accordion-body>:first-child{margin-block-start:0 !important}.accordion-button>*,.accordion-body>:last-child{margin-block-end:0 !important}:host{display:block}.accordion-button{cursor:pointer}.accordion-button>::slotted(.text-truncate){display:block}post-accordion-item::part(accordion-item){--post-bg-rgb: 244, 243, 241}.bg-yellow post-accordion-item::part(accordion-item){--post-bg-rgb: 255, 255, 255}.bg-white post-accordion-item::part(accordion-item){--post-bg-rgb: 244, 243, 241}.bg-light post-accordion-item::part(accordion-item){--post-bg-rgb: 255, 255, 255}.bg-gray post-accordion-item::part(accordion-item){--post-bg-rgb: 255, 255, 255}.bg-dark post-accordion-item::part(accordion-item){--post-bg-rgb: 255, 255, 255}.bg-black post-accordion-item::part(accordion-item){--post-bg-rgb: 255, 255, 255}.bg-primary post-accordion-item::part(accordion-item){--post-bg-rgb: 255, 255, 255}.bg-secondary post-accordion-item::part(accordion-item){--post-bg-rgb: 255, 255, 255}.bg-success post-accordion-item::part(accordion-item){--post-bg-rgb: 255, 255, 255}.bg-warning post-accordion-item::part(accordion-item){--post-bg-rgb: 255, 255, 255}.bg-error post-accordion-item::part(accordion-item){--post-bg-rgb: 255, 255, 255}.bg-info post-accordion-item::part(accordion-item){--post-bg-rgb: 255, 255, 255}.bg-success-background post-accordion-item::part(accordion-item){--post-bg-rgb: 255, 255, 255}.bg-warning-background post-accordion-item::part(accordion-item){--post-bg-rgb: 255, 255, 255}.bg-error-background post-accordion-item::part(accordion-item){--post-bg-rgb: 255, 255, 255}.bg-nightblue post-accordion-item::part(accordion-item){--post-bg-rgb: 255, 255, 255}.bg-nightblue-bright post-accordion-item::part(accordion-item){--post-bg-rgb: 255, 255, 255}.bg-petrol post-accordion-item::part(accordion-item){--post-bg-rgb: 255, 255, 255}.bg-petrol-bright post-accordion-item::part(accordion-item){--post-bg-rgb: 255, 255, 255}.bg-coral post-accordion-item::part(accordion-item){--post-bg-rgb: 255, 255, 255}.bg-coral-bright post-accordion-item::part(accordion-item){--post-bg-rgb: 255, 255, 255}.bg-olive post-accordion-item::part(accordion-item){--post-bg-rgb: 255, 255, 255}.bg-olive-bright post-accordion-item::part(accordion-item){--post-bg-rgb: 255, 255, 255}.bg-purple post-accordion-item::part(accordion-item){--post-bg-rgb: 255, 255, 255}.bg-purple-bright post-accordion-item::part(accordion-item){--post-bg-rgb: 255, 255, 255}.bg-aubergine post-accordion-item::part(accordion-item){--post-bg-rgb: 255, 255, 255}.bg-aubergine-bright post-accordion-item::part(accordion-item){--post-bg-rgb: 255, 255, 255}:host(:not(:first-of-type)) .accordion-item{border-block-start:0}
+:host::after{display:block;content:"";margin-top:calc(var(--post-device-border-width-default)*-1);border-bottom:var(--post-device-border-width-default) var(--post-core-border-style-solid) var(--post-scheme-color-interactive-primary-enabled-stroke)}:host:has(.accordion-button:hover)::after{border-color:var(--post-scheme-color-interactive-primary-hover-stroke)}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){:host:has(.accordion-button:hover)::after{border-color:Highlight}}.accordion-header{color:var(--post-scheme-color-interactive-primary-enabled-fg1);font-size:var(--post-device-font-size-5);margin:0;line-height:var(--post-device-line-height-heading);font-weight:var(--post-device-font-weight-black)}.accordion-button{padding:0;overflow:visible;border:0;background:none;color:inherit;font:inherit;-webkit-user-select:none;user-select:none;appearance:button;display:flex;position:relative;width:100%;align-items:center;text-align:start;gap:var(--post-device-spacing-gap-7);padding:calc(var(--post-device-spacing-padding-19) + var(--post-device-border-width-default)) calc(var(--post-device-spacing-padding-5) + var(--post-device-border-width-default));cursor:pointer}.accordion-button::before{display:block;position:absolute;content:"";inset:0;bottom:auto;border-top:var(--post-accordion-button-border-top)}.accordion-button{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}.accordion-button:is(:focus-visible,:has(:focus-visible),.pretend-focus){outline-style:var(--post-core-border-style-solid) !important;border-radius:var(--post-device-border-radius-focus)}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.accordion-button:is(:focus-visible,:has(:focus-visible),.pretend-focus){outline-color:Highlight !important}}@supports not selector(:has(:focus-visible)){.accordion-button:is(:focus-visible,:focus-within,.pretend-focus){outline-style:var(--post-core-border-style-solid) !important;border-radius:var(--post-device-border-radius-focus)}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.accordion-button:is(:focus-visible,:focus-within,.pretend-focus){outline-color:Highlight !important}}}.accordion-button slot::slotted(span[slot=header]){flex-grow:1}.accordion-button post-icon{flex:none;width:var(--post-core-dimension-24);aspect-ratio:1;transition:transform 250ms cubic-bezier(0.4, 0, 0.2, 1)}.accordion-button.collapsed{padding-block-start:calc(var(--post-device-spacing-padding-19) + var(--post-device-border-width-default));padding-block-end:calc(var(--post-device-spacing-padding-19) + var(--post-device-border-width-default))}.accordion-button.collapsed post-icon{transform:rotate(-180deg)}.accordion-button:hover{color:var(--post-scheme-color-interactive-primary-hover-fg1)}.accordion-button>::slotted(.text-truncate){display:block}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.accordion-button:hover,.accordion-button:focus-visible{color:Highlight}}.accordion-body{padding-block-start:var(--post-device-spacing-padding-15);padding-block-end:calc(var(--post-device-spacing-padding-block-25) + var(--post-device-border-width-default));padding-inline:var(--post-device-spacing-padding-5)}.logo-container{display:none;width:var(--post-device-sizing-logo-1);aspect-ratio:1}.logo-container.has-image{display:block}.logo-container slot::slotted(img){display:block;width:100%;height:100%;object-fit:cover}.accordion-button>::slotted(:first-child),.accordion-body>::slotted(:first-child){margin-block-start:0 !important}.accordion-button>::slotted(:last-child),.accordion-body>::slotted(:last-child){margin-block-end:0 !important}

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

@@ -2,28 +2,34 @@ import { h, Host } from "@stencil/core";
 import { version } from "../../../../package";
 import { HEADING_LEVELS } from "../../types/index";
 import { checkEmptyOrOneOf } from "../../utils/index";
+import { nanoid } from "nanoid";
 /**
+ * @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.
+ * @slot logo - Slot for the placing a logo before the header.
  * @slot header - Slot for placing custom content within the accordion item's header.
  * @slot default - Slot for placing content within the accordion item's body.
  */
 export class PostAccordionItem {
     constructor() {
         this.id = undefined;
+        this.slottedLogo = undefined;
         this.collapsed = false;
         this.headingLevel = undefined;
     }
     validateHeadingLevel(newValue = this.headingLevel) {
         checkEmptyOrOneOf(newValue, HEADING_LEVELS, 'The `heading-level` property of the `post-accordion-item` must be a number between 1 and 6.');
     }
-    connectedCallback() {
-        this.validateHeadingLevel();
-    }
     componentWillLoad() {
-        this.id = this.host.id || `a${crypto.randomUUID()}`;
+        this.id = this.host.id || `p${nanoid(6)}`;
+    }
+    componentDidLoad() {
+        this.validateHeadingLevel();
     }
     // 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') {
+        if (event.target === this.host &&
+            event.target.localName === 'post-accordion-item') {
             this.collapsed = !event.detail;
         }
     }
@@ -33,10 +39,20 @@ export class PostAccordionItem {
     async toggle(force) {
         return this.collapsible.toggle(force);
     }
+    onSlotLogoChange() {
+        this.slottedLogo = this.host.querySelector('img[slot="logo"]');
+    }
+    componentWillRender() {
+        this.slottedLogo = this.host.querySelector('img[slot="logo"]');
+    }
     render() {
-        var _a;
-        const HeadingTag = `h${(_a = this.headingLevel) !== null && _a !== void 0 ? _a : 2}`;
-        return (h(Host, { key: 'aecbfd6651aee22951ec68b0da39be594567c98d', id: this.id, "data-version": version }, h("div", { key: '5b5b9413af8def5026de1797048010befefaf5b8', part: "accordion-item", class: "accordion-item" }, h("post-collapsible-trigger", { key: 'cbc532d60f9f472c2a1d6121271b2a1480df7d02', for: `${this.id}--collapse` }, h(HeadingTag, { key: 'f966d5de3035d76fcb9567af82cc7e10a92d39fd', class: "accordion-header", id: `${this.id}--header` }, h("button", { key: '67bb979d1cc39d7030f1e65861bd2ba72ed87f6a', type: "button", class: `accordion-button${this.collapsed ? ' collapsed' : ''}` }, h("slot", { key: '78a56ee30ea2e670ce8b10180acea473a1782766', name: "header" })))), h("post-collapsible", { key: '7e11e21c19f5c0675f08796b304570f6f1e13c06', id: `${this.id}--collapse`, collapsed: this.collapsed, ref: el => (this.collapsible = el) }, h("div", { key: 'c44dba2d26b7ac6486eb9b2866e757f4a42adc52', class: "accordion-body" }, h("slot", { key: '6e3a5f6fceef5211985a868e06777dfac8d0819a' }))))));
+        var _a, _b;
+        const headingLevel = (_a = this.host.closest('post-accorddion')) === null || _a === void 0 ? void 0 : _a.getAttribute('heading-level');
+        const HeadingTag = `h${(_b = headingLevel !== null && headingLevel !== void 0 ? headingLevel : this.headingLevel) !== null && _b !== void 0 ? _b : 2}`;
+        return (h(Host, { key: '373cd09f89f295da7e3757223720c63ef66a5713', id: this.id, "data-version": version }, h("div", { key: '8039b22b872c62681a5322a97e7d3152c9a95539', part: "accordion-item", class: "accordion-item" }, h("post-collapsible-trigger", { key: '110fd30957bba9116e7de9ea8489c2c0284bacf6', for: `${this.id}--collapse` }, h(HeadingTag, { key: '2ae4afc979da88ea988356403461f6a3efaa07aa', class: "accordion-header", id: `${this.id}--header` }, h("button", { key: '2ac61546ba0de5571225d6e7b9558f3dbc7f62d3', type: "button", class: `accordion-button${this.collapsed ? ' collapsed' : ''}`, part: "button" }, h("span", { key: '132516a258f87e4226d218ced5c57f9aa42c88e5', class: {
+                'logo-container': true,
+                'has-image': !!this.slottedLogo,
+            } }, h("slot", { key: 'dba5d7d0774640dbc12931c25fd07454e4210d1f', name: "logo", onSlotchange: this.onSlotLogoChange.bind(this) })), h("slot", { key: 'a26af2ee15938855748a828cca2855d2381f4aba', name: "header" }), h("post-icon", { key: '37a112eb68bed41d5b88472c160d355af967957f', name: "2051" })))), h("post-collapsible", { key: '6486a18c1ec3c97ee24f1ccaf1abb49a75890fe5', id: `${this.id}--collapse`, collapsed: this.collapsed, ref: el => (this.collapsible = el) }, h("div", { key: '23b80e5f4ff31c4de2c0f3e75048c4ac1380371f', class: "accordion-body", part: "body" }, h("slot", { key: '90e370978278c913f88092d0908dbd9437763dd8' }))))));
     }
     static get is() { return "post-accordion-item"; }
     static get encapsulation() { return "shadow"; }
@@ -100,7 +116,8 @@ export class PostAccordionItem {
     }
     static get states() {
         return {
-            "id": {}
+            "id": {},
+            "slottedLogo": {}
         };
     }
     static get methods() {

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

@@ -0,0 +1,3 @@
+/*!
+ * Copyright 2021 by Swiss Post, Information Technology
+ */: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}

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

@@ -0,0 +1,237 @@
+import { h, Host } from "@stencil/core";
+import { version } from "../../../../package";
+import { checkNonEmpty } from "../../utils/index";
+// 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}`;
+var AvatarType;
+(function (AvatarType) {
+    AvatarType["Slotted"] = "slotted";
+    AvatarType["Image"] = "image";
+    AvatarType["Initials"] = "initials";
+    AvatarType[AvatarType["Null"] = null] = "Null";
+})(AvatarType || (AvatarType = {}));
+/**
+ * @slot default - Slot for inserting a custom image as avatar.
+ */
+export class PostAvatar {
+    constructor() {
+        this.firstname = undefined;
+        this.lastname = undefined;
+        this.userid = undefined;
+        this.email = undefined;
+        this.slottedImage = undefined;
+        this.avatarType = null;
+        this.imageUrl = '';
+        this.imageAlt = '';
+        this.initials = '';
+    }
+    validateFirstname() {
+        checkNonEmpty(this.firstname, 'The `firstname` property of the `post-avatar` is required!');
+    }
+    async getAvatar() {
+        if (this.slottedImage !== null) {
+            this.avatarType = AvatarType.Slotted;
+        }
+        else {
+            let imageLoaded = false;
+            if (!imageLoaded && this.userid)
+                imageLoaded = await this.getImageByProp(this.userid, this.fetchImageByUserId.bind(this));
+            if (!imageLoaded && this.email)
+                imageLoaded = await this.getImageByProp(this.email, this.fetchImageByEmail.bind(this));
+            if (!imageLoaded)
+                this.getAvatarByInitials();
+        }
+    }
+    async getImageByProp(prop, fetchImage) {
+        var _a;
+        if (!prop)
+            return false;
+        const imageResponse = (_a = (await this.getStorageItem(prop))) !== null && _a !== void 0 ? _a : { 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.`);
+            }
+        }
+        return imageResponse.ok;
+    }
+    async fetchImageByUserId() {
+        return await fetch(PostAvatar.INTERNAL_USERID_IMAGE_SRC.replace('{userid}', encodeURIComponent(this.userid)));
+    }
+    async fetchImageByEmail() {
+        const email = await this.cryptify(this.email);
+        const imageUrl = GRAVATAR_BASE_URL.replace('{email}', email);
+        return await fetch(imageUrl);
+    }
+    getAvatarByInitials() {
+        this.initials = this.getInitials();
+        this.avatarType = AvatarType.Initials;
+    }
+    getNames() {
+        return [this.firstname, this.lastname].filter(n => n);
+    }
+    getInitials() {
+        return this.getNames()
+            .map(n => n.charAt(0))
+            .join('')
+            .trim();
+    }
+    async getStorageItem(keyToken) {
+        var _a;
+        const key = await this.cryptify(keyToken);
+        const value = (_a = window === null || window === void 0 ? void 0 : window.sessionStorage) === null || _a === void 0 ? void 0 : _a.getItem(key);
+        return value ? JSON.parse(value) : null;
+    }
+    async setStorageItem(keyToken, value) {
+        var _a;
+        const key = await this.cryptify(keyToken);
+        (_a = window === null || window === void 0 ? void 0 : window.sessionStorage) === null || _a === void 0 ? void 0 : _a.setItem(key, value);
+    }
+    async removeStorageItem(keyToken) {
+        var _a;
+        const key = await this.cryptify(keyToken);
+        (_a = window === null || window === void 0 ? void 0 : window.sessionStorage) === null || _a === void 0 ? void 0 : _a.removeItem(key);
+    }
+    async cryptify(key) {
+        return await crypto.subtle.digest('SHA-256', new TextEncoder().encode(key)).then(buffer => {
+            return Array.from(new Uint8Array(buffer))
+                .map(bytes => bytes.toString(16).padStart(2, '0'))
+                .join('');
+        });
+    }
+    onSlotDefaultChange() {
+        this.slottedImage = this.host.querySelector('img');
+        this.getAvatar();
+    }
+    componentWillRender() {
+        this.slottedImage = this.host.querySelector('img');
+        this.getAvatar();
+    }
+    componentDidLoad() {
+        this.validateFirstname();
+    }
+    render() {
+        const initials = this.getNames().reduce((acc, n, i) => {
+            if (i > 0)
+                acc.push(h("span", null, " "));
+            acc.push(n.charAt(0));
+            acc.push(h("span", null, n.slice(1)));
+            // 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))));
+    }
+    static get is() { return "post-avatar"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["post-avatar.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["post-avatar.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "firstname": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": true,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Defines the users firstname."
+                },
+                "attribute": "firstname",
+                "reflect": false
+            },
+            "lastname": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Defines the users lastname."
+                },
+                "attribute": "lastname",
+                "reflect": false
+            },
+            "userid": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "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>"
+                },
+                "attribute": "userid",
+                "reflect": false
+            },
+            "email": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Defines the users email address associated with a gravatar profile picture."
+                },
+                "attribute": "email",
+                "reflect": false
+            }
+        };
+    }
+    static get states() {
+        return {
+            "slottedImage": {},
+            "avatarType": {},
+            "imageUrl": {},
+            "imageAlt": {},
+            "initials": {}
+        };
+    }
+    static get elementRef() { return "host"; }
+    static get watchers() {
+        return [{
+                "propName": "firstname",
+                "methodName": "validateFirstname"
+            }];
+    }
+}
+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

@@ -0,0 +1 @@
+:host{--post-floating-button-translate-y: calc(-1 * var(--post-core-dimension-112));position:fixed;top:var(--post-device-position-1);right:var(--post-device-position-1)}:host .back-to-top{padding:0;overflow:visible;border:0;background:none;color:inherit;font:inherit;-webkit-user-select:none;user-select:none;appearance:button;box-shadow:.5px 3px 4px rgba(0,0,0,.1),2px 4px 10px 4px rgba(0,0,0,.12);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}: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)}: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}