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

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

@@ -2,10 +2,12 @@ import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal
 import { v as version } from './package.js';
 import { H as HEADING_LEVELS } from './heading-levels.js';
 import { c as checkEmptyOrOneOf } from './index2.js';
-import { d as defineCustomElement$2 } from './post-collapsible2.js';
-import { d as defineCustomElement$1 } from './post-collapsible-trigger2.js';
+import { n as nanoid } from './index.browser.js';
+import { d as defineCustomElement$3 } from './post-collapsible2.js';
+import { d as defineCustomElement$2 } from './post-collapsible-trigger2.js';
+import { d as defineCustomElement$1 } from './post-icon2.js';
 
-const postAccordionItemCss = "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}";
+const postAccordionItemCss = ":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}";
 const PostAccordionItemStyle0 = postAccordionItemCss;
 
 const PostAccordionItem = /*@__PURE__*/ proxyCustomElement(class PostAccordionItem extends HTMLElement {
@@ -14,21 +16,23 @@ const PostAccordionItem = /*@__PURE__*/ proxyCustomElement(class PostAccordionIt
         this.__registerHost();
         this.__attachShadow();
         this.id = undefined;
+        this.slottedLogo = undefined;
         this.collapsed = false;
-        this.headingLevel = 2;
+        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.localName === 'post-accordion-item') {
+        if (event.target === this.host &&
+            event.target.localName === 'post-accordion-item') {
             this.collapsed = !event.detail;
         }
     }
@@ -38,10 +42,20 @@ const PostAccordionItem = /*@__PURE__*/ proxyCustomElement(class PostAccordionIt
     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: 'd021bf895019606800fa6cf3a85a2ea0a2fea7e4', id: this.id, "data-version": version }, h("div", { key: '8a78f2511889eb90d2cbdccf00f76802e043a1e7', part: "accordion-item", class: "accordion-item" }, h("post-collapsible-trigger", { key: 'c4c09df6d5bb1b3883ad696a362b222cfcf1c9bb', for: `${this.id}--collapse` }, h(HeadingTag, { key: 'fbc49fcc1e4096193e1fd945b728b8c0caf6001d', class: "accordion-header", id: `${this.id}--header` }, h("button", { key: '2a55471aa04c5e676647a2e5c8cb2d587b74aed4', type: "button", class: `accordion-button${this.collapsed ? ' collapsed' : ''}` }, h("slot", { key: '83b5811e74fb31f2fafd66e5aedc2f260d75e3e0', name: "header" })))), h("post-collapsible", { key: '8d0695dd8944bb77df60c43116be01ec2608dbb4', id: `${this.id}--collapse`, collapsed: this.collapsed, ref: el => (this.collapsible = el) }, h("div", { key: '17c75ea9cf1e9adb95d176c65ab23322c994d388', class: "accordion-body" }, h("slot", { key: '21dc6d44c6bb009058e0e1e5dbcd4bfc2a9463ee' }))))));
+        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' }))))));
     }
     get host() { return this; }
     static get watchers() { return {
@@ -52,6 +66,7 @@ const PostAccordionItem = /*@__PURE__*/ proxyCustomElement(class PostAccordionIt
         "collapsed": [1028],
         "headingLevel": [2, "heading-level"],
         "id": [32],
+        "slottedLogo": [32],
         "toggle": [64]
     }, [[2, "postToggle", "onCollapseToggle"]], {
         "headingLevel": ["validateHeadingLevel"]
@@ -60,7 +75,7 @@ function defineCustomElement() {
     if (typeof customElements === "undefined") {
         return;
     }
-    const components = ["post-accordion-item", "post-collapsible", "post-collapsible-trigger"];
+    const components = ["post-accordion-item", "post-collapsible", "post-collapsible-trigger", "post-icon"];
     components.forEach(tagName => { switch (tagName) {
         case "post-accordion-item":
             if (!customElements.get(tagName)) {
@@ -69,10 +84,15 @@ function defineCustomElement() {
             break;
         case "post-collapsible":
             if (!customElements.get(tagName)) {
-                defineCustomElement$2();
+                defineCustomElement$3();
             }
             break;
         case "post-collapsible-trigger":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$2();
+            }
+            break;
+        case "post-icon":
             if (!customElements.get(tagName)) {
                 defineCustomElement$1();
             }

package/dist/components/post-accordion2.js

@@ -3,7 +3,7 @@ import { v as version } from './package.js';
 import { H as HEADING_LEVELS } from './heading-levels.js';
 import { c as checkOneOf } from './check-one-of.js';
 
-const postAccordionCss = ":host{display:block}";
+const postAccordionCss = ":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)}";
 const PostAccordionStyle0 = postAccordionCss;
 
 const PostAccordion = /*@__PURE__*/ proxyCustomElement(class PostAccordion extends HTMLElement {
@@ -28,21 +28,23 @@ const PostAccordion = /*@__PURE__*/ proxyCustomElement(class PostAccordion exten
         this.validateHeadingLevel();
     }
     collapseToggleHandler(event) {
-        if (event.target.localName === 'post-accordion-item') {
-            event.stopPropagation();
-            const toggledItem = event.target;
-            const isClosing = this.expandedItems.has(toggledItem);
+        event.stopPropagation();
+        const toggledItem = event.target;
+        const closestParentAccordion = toggledItem.closest('post-accordion');
+        if (closestParentAccordion === this.host && toggledItem.localName === 'post-accordion-item') {
+            const toggledAccordionItem = event.target;
+            const isClosing = this.expandedItems.has(toggledAccordionItem);
             if (isClosing) {
-                this.expandedItems.delete(toggledItem);
+                this.expandedItems.delete(toggledAccordionItem);
             }
             else {
-                this.expandedItems.add(toggledItem);
+                this.expandedItems.add(toggledAccordionItem);
             }
             if (this.multiple || isClosing)
                 return;
             // close other open accordion items to have only one opened at a time
             Array.from(this.expandedItems.values())
-                .filter(item => item !== toggledItem)
+                .filter(item => item !== toggledAccordionItem)
                 .forEach(item => {
                 item.toggle(false);
             });
@@ -92,7 +94,7 @@ const PostAccordion = /*@__PURE__*/ proxyCustomElement(class PostAccordion exten
         });
     }
     render() {
-        return (h(Host, { key: 'db4caaa1a64791d3a1dc622cf865a162b3cfd733', "data-version": version }, h("div", { key: '62ebf7e00b534b9b68137ac4ab57b92bd290bc21', class: "accordion" }, h("slot", { key: '61c69386c1ba9e7f53dd3465dd7eb06ac646e35b', onSlotchange: () => this.registerAccordionItems() }))));
+        return (h(Host, { key: 'cfc6280e052937f50bc481fe73cf25ede6e40314', "data-version": version }, h("div", { key: '090539a2ebe9d216609a7e56597c5f379d439fb8', class: "accordion" }, h("slot", { key: '4ae4095b14b6b9233f1d66c8543d625a77a77e09', onSlotchange: () => this.registerAccordionItems() }))));
     }
     get host() { return this; }
     static get watchers() { return {

package/dist/components/post-avatar.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface PostAvatar extends Components.PostAvatar, HTMLElement {}
+export const PostAvatar: {
+    prototype: PostAvatar;
+    new (): PostAvatar;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/post-avatar.js

@@ -0,0 +1,6 @@
+import { P as PostAvatar$1, d as defineCustomElement$1 } from './post-avatar2.js';
+
+const PostAvatar = PostAvatar$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { PostAvatar, defineCustomElement };

package/dist/components/post-avatar2.js

@@ -0,0 +1,173 @@
+import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+import { v as version } from './package.js';
+import { c as checkNonEmpty } from './check-non-empty.js';
+
+const postAvatarCss = "/*!\n * Copyright 2021 by Swiss Post, Information Technology\n */:host{--post-avatar-bg:var(--post-scheme-color-interactive-primary-enabled-bg2);--post-avatar-fg:var(--post-scheme-color-interactive-primary-enabled-fg3);display:inline-flex;position:relative;width:var(--post-device-sizing-interactive-icon-size3);height:var(--post-device-sizing-interactive-icon-size3);background-color:var(--post-scheme-color-interactive-primary-enabled-stroke3);border:var(--post-device-border-width-default) solid var(--post-scheme-color-interactive-primary-enabled-stroke3);border-radius:var(--post-device-border-radius-round);font-size:var(--post-device-font-size-8);vertical-align:top;line-height:1}:host::after{display:block;content:\"\";position:absolute;inset:0;z-index:1;border-radius:inherit}*,*::before,*::after{box-sizing:border-box}slot,img,::slotted(img){display:block;width:100%;height:100%}img,::slotted(img){border-radius:var(--post-device-border-radius-round)}::slotted(:not(img)){display:none !important}.initials{display:flex;justify-content:center;align-items:center;position:relative;z-index:2;width:100%;height:100%;background-color:var(--post-avatar-bg);border-radius:var(--post-device-border-radius-round);color:var(--post-avatar-fg);text-transform:uppercase}.initials span{width:1px !important;height:1px !important;padding:0 !important;margin:-1px !important;overflow:hidden !important;clip:rect(0, 0, 0, 0) !important;white-space:nowrap !important;border:0 !important}.initials span:not(caption){position:absolute !important}";
+const PostAvatarStyle0 = postAvatarCss;
+
+// 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 = {}));
+const PostAvatar = /*@__PURE__*/ proxyCustomElement(class PostAvatar extends HTMLElement {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+        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))));
+    }
+    get host() { return this; }
+    static get watchers() { return {
+        "firstname": ["validateFirstname"]
+    }; }
+    static get style() { return PostAvatarStyle0; }
+}, [1, "post-avatar", {
+        "firstname": [1],
+        "lastname": [1],
+        "userid": [1],
+        "email": [1],
+        "slottedImage": [32],
+        "avatarType": [32],
+        "imageUrl": [32],
+        "imageAlt": [32],
+        "initials": [32]
+    }, undefined, {
+        "firstname": ["validateFirstname"]
+    }]);
+PostAvatar.INTERNAL_USERID_IMAGE_SRC = 'https://web.post.ch/UserProfileImage/{userid}.png';
+function defineCustomElement() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["post-avatar"];
+    components.forEach(tagName => { switch (tagName) {
+        case "post-avatar":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, PostAvatar);
+            }
+            break;
+    } });
+}
+
+export { PostAvatar as P, defineCustomElement as d };

package/dist/components/post-back-to-top.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface PostBackToTop extends Components.PostBackToTop, HTMLElement {}
+export const PostBackToTop: {
+    prototype: PostBackToTop;
+    new (): PostBackToTop;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/post-back-to-top.js

@@ -0,0 +1,6 @@
+import { P as PostBackToTop$1, d as defineCustomElement$1 } from './post-back-to-top2.js';
+
+const PostBackToTop = PostBackToTop$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { PostBackToTop, defineCustomElement };

package/dist/components/post-back-to-top2.js

@@ -0,0 +1,100 @@
+import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+import { s as slideUp, a as slideDown } from './slide.js';
+import { v as version } from './package.js';
+import { c as checkType } from './check-type.js';
+import { c as checkNonEmpty } from './check-non-empty.js';
+import { d as defineCustomElement$1 } from './post-icon2.js';
+
+const postBackToTopCss = ":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}";
+const PostBackToTopStyle0 = postBackToTopCss;
+
+const PostBackToTop = /*@__PURE__*/ proxyCustomElement(class PostBackToTop extends HTMLElement {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+        this.handleScroll = () => {
+            this.belowFold = this.isBelowFold();
+        };
+        this.label = undefined;
+        this.belowFold = false;
+    }
+    isBelowFold() {
+        return window.scrollY > window.innerHeight;
+    }
+    // Watch for changes in belowFold
+    watchBelowFold(newValue) {
+        if (newValue) {
+            slideUp(this.el, this.translateY);
+        }
+        else {
+            slideDown(this.el, this.translateY);
+        }
+    }
+    scrollToTop() {
+        window.scrollTo({
+            top: 0,
+        });
+    }
+    // Validate the label
+    validateLabel() {
+        checkType(this.label, 'string', 'The label property of the Back to Top component is required for accessibility purposes. Please ensure it is set.');
+        checkNonEmpty(this.label, 'The label property of the Back to Top component must not be empty. Please provide a proper text for the label');
+    }
+    // Set the initial state
+    componentWillLoad() {
+        this.belowFold = this.isBelowFold();
+    }
+    componentDidLoad() {
+        window.addEventListener('scroll', this.handleScroll, false);
+        this.translateY = window
+            .getComputedStyle(this.el)
+            .getPropertyValue('--post-floating-button-translate-y');
+        if (!this.belowFold) {
+            this.el.style.transform = `translateY(${this.translateY})`;
+        }
+        // Initial load
+        if (this.belowFold) {
+            slideUp(this.el, this.translateY);
+        }
+        this.validateLabel();
+    }
+    disconnectedCallback() {
+        window.removeEventListener('scroll', this.handleScroll);
+    }
+    render() {
+        return (h(Host, { key: '92d56ff9055c2af38ae47b28c3af20771eed9a39', "data-version": version }, h("button", { key: 'ae305dd5b5a3f8d97553945e547ad45e824e6b7d', class: "back-to-top", "aria-hidden": this.belowFold ? 'false' : 'true', tabindex: this.belowFold ? '0' : '-1', onClick: this.scrollToTop }, h("post-icon", { key: '37792f99d6ef79df4260f6ad1c5780e545f7870a', "aria-hidden": "true", name: "3026" }), h("span", { key: '8768101a26e259c2bd0695a97e6bb4077ad31ae6', class: "visually-hidden" }, this.label))));
+    }
+    get el() { return this; }
+    static get watchers() { return {
+        "belowFold": ["watchBelowFold"],
+        "label": ["validateLabel"]
+    }; }
+    static get style() { return PostBackToTopStyle0; }
+}, [1, "post-back-to-top", {
+        "label": [1],
+        "belowFold": [32]
+    }, undefined, {
+        "belowFold": ["watchBelowFold"],
+        "label": ["validateLabel"]
+    }]);
+function defineCustomElement() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["post-back-to-top", "post-icon"];
+    components.forEach(tagName => { switch (tagName) {
+        case "post-back-to-top":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, PostBackToTop);
+            }
+            break;
+        case "post-icon":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$1();
+            }
+            break;
+    } });
+}
+
+export { PostBackToTop as P, defineCustomElement as d };

package/dist/components/post-banner.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface PostBanner extends Components.PostBanner, HTMLElement {}
+export const PostBanner: {
+    prototype: PostBanner;
+    new (): PostBanner;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/post-banner.js

@@ -0,0 +1,6 @@
+import { P as PostBanner$1, d as defineCustomElement$1 } from './post-banner2.js';
+
+const PostBanner = PostBanner$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { PostBanner, defineCustomElement };