@swisspost/design-system-components 9.0.0-next.2 → 9.0.0-next.21

package/loaders/post-accordion-item.js

@@ -1,84 +1,4 @@
-import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
-import { v as version } from './package.js';
-import { H as HEADING_LEVELS } from './heading-levels.js';
-import { a as checkEmptyOrOneOf } from './index2.js';
-import { d as defineCustomElement$3 } from './post-collapsible2.js';
-import { d as defineCustomElement$2 } from './post-collapsible-trigger2.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{border-block:2px solid #666;--post-bg-rgb:244, 243, 241}.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;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;outline:none}.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 PostAccordionItemStyle0 = postAccordionItemCss;
-
-const PostAccordionItem$1 = /*@__PURE__*/ proxyCustomElement(class PostAccordionItem extends HTMLElement {
-    constructor() {
-        super();
-        this.__registerHost();
-        this.__attachShadow();
-        this.id = 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()}`;
-    }
-    // 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') {
-            this.collapsed = !event.detail;
-        }
-    }
-    /**
-     * Triggers the collapse programmatically.
-     */
-    async toggle(force) {
-        return this.collapsible.toggle(force);
-    }
-    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' }))))));
-    }
-    get host() { return this; }
-    static get watchers() { return {
-        "headingLevel": ["validateHeadingLevel"]
-    }; }
-    static get style() { return PostAccordionItemStyle0; }
-}, [1, "post-accordion-item", {
-        "collapsed": [1028],
-        "headingLevel": [2, "heading-level"],
-        "id": [32],
-        "toggle": [64]
-    }, [[2, "postToggle", "onCollapseToggle"]], {
-        "headingLevel": ["validateHeadingLevel"]
-    }]);
-function defineCustomElement$1() {
-    if (typeof customElements === "undefined") {
-        return;
-    }
-    const components = ["post-accordion-item", "post-collapsible", "post-collapsible-trigger"];
-    components.forEach(tagName => { switch (tagName) {
-        case "post-accordion-item":
-            if (!customElements.get(tagName)) {
-                customElements.define(tagName, PostAccordionItem$1);
-            }
-            break;
-        case "post-collapsible":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$3();
-            }
-            break;
-        case "post-collapsible-trigger":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$2();
-            }
-            break;
-    } });
-}
+import { P as PostAccordionItem$1, d as defineCustomElement$1 } from './post-accordion-item2.js';
 
 const PostAccordionItem = PostAccordionItem$1;
 const defineCustomElement = defineCustomElement$1;

package/loaders/post-accordion-item2.js

@@ -0,0 +1,103 @@
+import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+import { v as version } from './package.js';
+import { H as HEADING_LEVELS } from './heading-levels.js';
+import { b as checkEmptyOrOneOf } from './index2.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 = ".accordion-item::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)}.accordion-item: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){.accordion-item: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:var(--post-scheme-color-interactive-button-secondary-enabled-fg);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}@media (forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.accordion-button{background-color:ButtonFace !important}.accordion-button:hover{background-color:Highlight !important}}.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 {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+        this.id = undefined;
+        this.slottedLogo = undefined;
+        this.collapsed = false;
+        this.headingLevel = undefined;
+    }
+    collapsible;
+    get host() { return this; }
+    validateHeadingLevel() {
+        checkEmptyOrOneOf(this, 'headingLevel', HEADING_LEVELS, 'The `heading-level` property of the `post-accordion-item` must be a number between 1 and 6.');
+    }
+    componentWillLoad() {
+        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') {
+            this.collapsed = !event.detail;
+        }
+    }
+    /**
+     * Triggers the collapse programmatically.
+     */
+    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() {
+        const headingLevel = this.host.closest('post-accordion')?.getAttribute('heading-level');
+        const HeadingTag = `h${headingLevel ?? this.headingLevel ?? 2}`;
+        return (h(Host, { key: '4c4baf7ac22c632de6b0bc332ffc275e50bb4d71', id: this.id, "data-version": version }, h("div", { key: '576529323c3adca347ec685688c071e21a2f3a76', part: "accordion-item", class: "accordion-item" }, h("post-collapsible-trigger", { key: 'cc29c396173e55168a3bec963d5e101cb3fb17b2', for: `${this.id}--collapse` }, h(HeadingTag, { key: '76f8eed33f0c84bf6e1a534b04a8ccc0c69c6380', class: "accordion-header", id: `${this.id}--header` }, h("button", { key: 'f56e67ffc94fea0452d1879d3410318b3b12c4bc', type: "button", class: `accordion-button${this.collapsed ? ' collapsed' : ''}`, part: "button" }, h("span", { key: 'd5f23318d5c498e0cd9dd1f15c13a636e49b7817', class: {
+                'logo-container': true,
+                'has-image': !!this.slottedLogo,
+            } }, h("slot", { key: '051d48cc4201e2d954f4d4bc25c836ddc8e24d0f', name: "logo", onSlotchange: this.onSlotLogoChange.bind(this) })), h("slot", { key: 'e9f687c79fab8bd3bd94e4da022b2aea7e0bba5c', name: "header" }), h("post-icon", { key: 'c1f3486254269ab50a89bd6acf8c714cbbced3b8', name: "2051" })))), h("post-collapsible", { key: '7f3788a90e59cdb4f985fd14c64286cb938a3c23', id: `${this.id}--collapse`, collapsed: this.collapsed, ref: el => (this.collapsible = el) }, h("div", { key: 'e17ae656614ac27d4f09ebba0a7bb547f88f5728', class: "accordion-body", part: "body" }, h("slot", { key: '0387ebe5ce518bbb8b78c66d919715a78b5ae558' }))))));
+    }
+    static get watchers() { return {
+        "headingLevel": ["validateHeadingLevel"]
+    }; }
+    static get style() { return PostAccordionItemStyle0; }
+}, [1, "post-accordion-item", {
+        "collapsed": [1028],
+        "headingLevel": [2, "heading-level"],
+        "id": [32],
+        "slottedLogo": [32],
+        "toggle": [64]
+    }, [[2, "postToggle", "onCollapseToggle"]], {
+        "headingLevel": ["validateHeadingLevel"]
+    }]);
+function defineCustomElement() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    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)) {
+                customElements.define(tagName, PostAccordionItem);
+            }
+            break;
+        case "post-collapsible":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$3();
+            }
+            break;
+        case "post-collapsible-trigger":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$2();
+            }
+            break;
+        case "post-icon":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$1();
+            }
+            break;
+    } });
+}
+
+export { PostAccordionItem as P, defineCustomElement as d };

package/loaders/post-accordion.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$1 = /*@__PURE__*/ proxyCustomElement(class PostAccordion extends HTMLElement {
@@ -11,14 +11,16 @@ const PostAccordion$1 = /*@__PURE__*/ proxyCustomElement(class PostAccordion ext
         super();
         this.__registerHost();
         this.__attachShadow();
-        this.expandedItems = new Set();
         this.headingLevel = undefined;
         this.multiple = false;
     }
+    accordionItems;
+    expandedItems = new Set();
+    get host() { return this; }
     validateHeadingLevel(newValue = this.headingLevel) {
         if (!newValue)
             return;
-        checkOneOf(newValue, HEADING_LEVELS, 'The `heading-level` property of the `post-accordion` must be a number between 1 and 6.');
+        checkOneOf(this, 'headingLevel', HEADING_LEVELS, 'The `heading-level` property of the `post-accordion` must be a number between 1 and 6.');
         this.accordionItems.forEach(item => {
             item.setAttribute('heading-level', String(newValue));
         });
@@ -94,9 +96,8 @@ const PostAccordion$1 = /*@__PURE__*/ proxyCustomElement(class PostAccordion ext
         });
     }
     render() {
-        return (h(Host, { key: 'cfc6280e052937f50bc481fe73cf25ede6e40314', "data-version": version }, h("div", { key: '090539a2ebe9d216609a7e56597c5f379d439fb8', class: "accordion" }, h("slot", { key: '4ae4095b14b6b9233f1d66c8543d625a77a77e09', onSlotchange: () => this.registerAccordionItems() }))));
+        return (h(Host, { key: '9ec8ca1ceac6587be68272568f216c958460ac0a', "data-version": version }, h("div", { key: '99887626d105f0e8f86b24e211591e7be820738d', class: "accordion" }, h("slot", { key: '4d8a003377c3a90648818a00144fd5f3a65be084', onSlotchange: () => this.registerAccordionItems() }))));
     }
-    get host() { return this; }
     static get watchers() { return {
         "headingLevel": ["validateHeadingLevel"]
     }; }

package/loaders/post-avatar.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../dist/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/loaders/post-avatar.js

@@ -0,0 +1,172 @@
+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$1 = /*@__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 = '';
+    }
+    static INTERNAL_USERID_IMAGE_SRC = 'https://web.post.ch/UserProfileImage/{userid}.png';
+    get host() { return this; }
+    validateFirstname() {
+        checkNonEmpty(this, 'firstname');
+    }
+    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) {
+        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.`);
+            }
+        }
+        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) {
+        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))
+                .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 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"]
+    }]);
+function defineCustomElement$1() {
+    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$1);
+            }
+            break;
+    } });
+}
+
+const PostAvatar = PostAvatar$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { PostAvatar, defineCustomElement };

package/loaders/post-back-to-top.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../dist/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/loaders/post-back-to-top.js

@@ -0,0 +1,104 @@
+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$2 } 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:var(--post-scheme-color-interactive-button-secondary-enabled-fg);font:inherit;-webkit-user-select:none;user-select:none;appearance:button;box-shadow:var(--post-device-elevation-300);cursor:pointer;border-radius:var(--post-device-border-radius-round);width:var(--post-device-sizing-interactive-button-height-2);height:var(--post-device-sizing-interactive-button-height-2);border:var(--post-device-border-width-default) solid var(--post-scheme-color-interactive-button-secondary-enabled-stroke);color:var(--post-scheme-color-interactive-button-secondary-enabled-fg);background-color:var(--post-scheme-color-interactive-button-secondary-enabled-bg);display:flex;align-items:center;justify-content:center}@media (forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){:host .back-to-top{background-color:ButtonFace !important}:host .back-to-top:hover{background-color:Highlight !important}}:host .back-to-top{outline-offset:var(--post-device-spacing-padding-2) !important;outline:var(--post-scheme-color-interactive-focus-stroke) none var(--post-device-border-width-focus) !important}:host .back-to-top:is(:focus-visible,:has(:focus-visible),.pretend-focus){outline-style:var(--post-core-border-style-solid) !important}@media (forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){:host .back-to-top:is(:focus-visible,:has(:focus-visible),.pretend-focus){outline-color:Highlight !important}}@supports not selector(:has(:focus-visible)){:host .back-to-top:is(:focus-visible,:focus-within,.pretend-focus){outline-style:var(--post-core-border-style-solid) !important}@media (forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){:host .back-to-top:is(:focus-visible,:focus-within,.pretend-focus){outline-color:Highlight !important}}}:host .back-to-top:hover{border-color:var(--post-scheme-color-interactive-button-secondary-hover-stroke);color:var(--post-scheme-color-interactive-button-secondary-hover-fg);background-color:var(--post-scheme-color-interactive-button-secondary-hover-bg)}: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$1 = /*@__PURE__*/ proxyCustomElement(class PostBackToTop extends HTMLElement {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+        this.label = undefined;
+        this.belowFold = false;
+    }
+    get host() { return this; }
+    translateY;
+    isBelowFold() {
+        return window.scrollY > window.innerHeight;
+    }
+    handleScroll = () => {
+        this.belowFold = this.isBelowFold();
+    };
+    // Watch for changes in belowFold
+    watchBelowFold(newValue) {
+        if (newValue) {
+            slideUp(this.host, this.translateY);
+        }
+        else {
+            slideDown(this.host, this.translateY);
+        }
+    }
+    scrollToTop() {
+        window.scrollTo({
+            top: 0,
+        });
+    }
+    // Validate the label
+    validateLabel() {
+        checkType(this, 'label', 'string');
+        checkNonEmpty(this, 'label');
+    }
+    // Set the initial state
+    componentWillLoad() {
+        this.belowFold = this.isBelowFold();
+    }
+    componentDidLoad() {
+        window.addEventListener('scroll', this.handleScroll, false);
+        this.translateY = window
+            .getComputedStyle(this.host)
+            .getPropertyValue('--post-floating-button-translate-y');
+        if (!this.belowFold) {
+            this.host.style.transform = `translateY(${this.translateY})`;
+        }
+        // Initial load
+        if (this.belowFold) {
+            slideUp(this.host, this.translateY);
+        }
+        this.validateLabel();
+    }
+    disconnectedCallback() {
+        window.removeEventListener('scroll', this.handleScroll);
+    }
+    render() {
+        return (h(Host, { key: '4d8c4e05ebcdd088c924ac0329b2238eb1d3c6ca', "data-version": version }, h("button", { key: 'fc37aff8558d7eb4b27a870f11133fc6984f4e11', class: "back-to-top", "aria-hidden": this.belowFold ? 'false' : 'true', tabindex: this.belowFold ? '0' : '-1', onClick: this.scrollToTop }, h("post-icon", { key: '4b978c44982ec0b02798ce75766b2acdd8497412', "aria-hidden": "true", name: "3026" }), h("span", { key: '4a899be348a6c8721696c634970773cd77f685d9', class: "visually-hidden" }, this.label))));
+    }
+    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$1() {
+    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$1);
+            }
+            break;
+        case "post-icon":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$2();
+            }
+            break;
+    } });
+}
+
+const PostBackToTop = PostBackToTop$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { PostBackToTop, defineCustomElement };

package/loaders/post-banner.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../dist/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;