@swisspost/design-system-components 10.0.0-next.38 → 10.0.0-next.40

package/dist/components/index2.js

@@ -1,47 +1,88 @@
-import { E as EMPTY_VALUES } from './constants.js';
-import { c as checkOneOf } from './check-one-of.js';
-import { c as checkType } from './check-type.js';
+const EMPTY_VALUES = [undefined, null, '', NaN];
 
-function emptyOr(check) {
-    return (...args) => {
-        const component = args[0];
-        const prop = args[1];
+function isValueEmpty(value) {
+    return EMPTY_VALUES.some(v => v === value);
+}
+
+function requiredAnd(check) {
+    return (component, prop, ...extraArgs) => {
+        const componentName = component.host.localName;
         const value = component[prop];
-        if (!EMPTY_VALUES.some(v => v === value)) {
-            check(...args);
+        const message = `The prop \`${String(prop)}\` of the \`${componentName}\` component is not defined.`;
+        if (isValueEmpty(value)) {
+            throw new Error(message);
+        }
+        else {
+            check(component, prop, ...extraArgs);
         }
     };
 }
 
-function checkPattern(component, prop, pattern, customMessage) {
+function checkOneOf(component, prop, possibleValues) {
     const componentName = component.host.localName;
     const value = component[prop];
-    const defaultMessage = `The prop \`${String(prop)}\` of the \`${componentName}\` component must be follow the format \`${pattern}\`.`;
-    const message = customMessage || defaultMessage;
+    const message = `The prop \`${String(prop)}\` of the \`${componentName}\` component must be one of the following values: ${possibleValues.join(', ')}.`;
+    if (!possibleValues.includes(value)) {
+        console.error(message);
+    }
+}
+
+function checkPattern(component, prop, pattern) {
+    const componentName = component.host.localName;
+    const value = component[prop];
+    const message = `The prop \`${String(prop)}\` of the \`${componentName}\` component must follow the format \`${pattern}\`.`;
     if (typeof value !== 'string' || !pattern.test(value)) {
-        throw new Error(message);
+        console.error(message);
+    }
+}
+
+function checkType(component, prop, type) {
+    const componentName = component.host.localName;
+    const value = component[prop];
+    const typeIsArray = type === 'array';
+    const valueIsArray = Array.isArray(value);
+    const message = `The prop \`${String(prop)}\` of the \`${componentName}\` component must be of type \`${type}\`.`;
+    if (typeIsArray || valueIsArray) {
+        if (valueIsArray !== typeIsArray) {
+            console.error(message);
+        }
+    }
+    else if (typeof value !== type) {
+        console.error(message);
     }
 }
 
-function checkUrl(component, prop, customMessage) {
+function checkUrl(component, prop) {
     const componentName = component.host.localName;
     const value = component[prop];
-    const defaultMessage = `The prop \`${String(prop)}\` of the \`${componentName}\` component is invalid.`;
-    const message = customMessage || defaultMessage;
+    const message = `The prop \`${String(prop)}\` of the \`${componentName}\` component is invalid.`;
     if (typeof value !== 'string' && !(value instanceof URL)) {
-        throw new Error(message);
+        console.error(message);
+        return;
     }
     try {
         new URL(value, 'https://www.post.ch');
     }
     catch {
-        throw new Error(message);
+        console.error(message);
     }
 }
 
+function emptyOr(check) {
+    return (component, prop, ...extraArgs) => {
+        const value = component[prop];
+        if (!isValueEmpty(value)) {
+            check(component, prop, ...extraArgs);
+        }
+    };
+}
+
 const checkEmptyOrOneOf = emptyOr(checkOneOf);
 const checkEmptyOrPattern = emptyOr(checkPattern);
 const checkEmptyOrType = emptyOr(checkType);
 const checkEmptyOrUrl = emptyOr(checkUrl);
+const checkRequiredAndOneOf = requiredAnd(checkOneOf);
+const checkRequiredAndType = requiredAnd(checkType);
+const checkRequiredAndUrl = requiredAnd(checkUrl);
 
-export { checkEmptyOrPattern as a, checkUrl as b, checkEmptyOrOneOf as c, checkEmptyOrUrl as d, checkEmptyOrType as e };
+export { checkEmptyOrOneOf as a, checkRequiredAndType as b, checkRequiredAndOneOf as c, checkEmptyOrType as d, checkEmptyOrPattern as e, checkRequiredAndUrl as f, checkEmptyOrUrl as g };

package/dist/components/package.js

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

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

@@ -1,7 +1,7 @@
 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 { c as checkEmptyOrOneOf } from './index2.js';
+import { a as checkEmptyOrOneOf } from './index2.js';
 import './breakpoints.js';
 import { e as eventGuard } from './event-guard.js';
 import { n as nanoid } from './index.browser.js';
@@ -9,7 +9,7 @@ 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-block-start:calc(var(--post-device-border-width-default)*-1);border-block-end: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;inset-block-end:auto;border-block-start: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 postAccordionItemCss = ".accordion-item::after{display:block;content:\"\";margin-block-start:calc(var(--post-device-border-width-default)*-1);border-block-end: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;inset-block-end:auto;border-block-start-width:var(--post-accordion-button-border-top-width, var(--post-device-border-width-default));border-block-start-style:var(--post-core-border-style-solid);border-block-start-color:var(--post-scheme-color-interactive-primary-enabled-stroke)}.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 {
@@ -23,7 +23,7 @@ const PostAccordionItem = /*@__PURE__*/ proxyCustomElement(class PostAccordionIt
         this.headingLevel = undefined;
     }
     validateHeadingLevel() {
-        checkEmptyOrOneOf(this, 'headingLevel', HEADING_LEVELS, 'The `heading-level` property of the `post-accordion-item` must be a number between 1 and 6.');
+        checkEmptyOrOneOf(this, 'headingLevel', HEADING_LEVELS);
     }
     componentWillLoad() {
         this.id = this.host.id || `p${nanoid(6)}`;
@@ -33,7 +33,7 @@ const PostAccordionItem = /*@__PURE__*/ proxyCustomElement(class PostAccordionIt
     }
     // Capture to make sure the "collapsed" property is updated before the event is consumed
     onCollapseToggle(event) {
-        eventGuard(this.host, event, { targetLocalName: 'post-collapsible', delegatorSelector: 'post-accordion-item' }, () => {
+        eventGuard(this.host, event, { targetLocalName: 'post-accordion-item', delegatorSelector: 'post-accordion-item' }, () => {
             this.collapsed = !event.detail;
         });
     }
@@ -52,10 +52,10 @@ const PostAccordionItem = /*@__PURE__*/ proxyCustomElement(class PostAccordionIt
     render() {
         const headingLevel = this.host.closest('post-accordion')?.getAttribute('heading-level');
         const HeadingTag = `h${headingLevel ?? this.headingLevel ?? 2}`;
-        return (h(Host, { key: '725d3710f7937f82c2382938d15770001e923b61', id: this.id, "data-version": version }, h("div", { key: '679d25d8278fbf9ae68546ee50c27a86ded95999', part: "accordion-item", class: "accordion-item" }, h("post-collapsible-trigger", { key: '7c2af8dc6a1f5265b4ae2cad066be7d2e0bf6a78', for: `${this.id}--collapse` }, h(HeadingTag, { key: 'a10e59a17fdb272fe6308d2ba98f37f90490fab8', class: "accordion-header", id: `${this.id}--header` }, h("button", { key: 'e2b527850c8342a8adf99453d0ac330b6a94760f', type: "button", class: `accordion-button${this.collapsed ? ' collapsed' : ''}`, part: "button" }, h("span", { key: 'b722a4bc51757546eefa58c7c3ea3a688838298a', class: {
+        return (h(Host, { key: '41b746c2ed269178d6a889899da6d55c44b647e1', id: this.id, "data-version": version }, h("div", { key: '8d675ccd039e8317673e68ac79cc3b99b5524200', part: "accordion-item", class: "accordion-item" }, h("post-collapsible-trigger", { key: 'b19a63493df6dded4797fc7286ee51a5984a6ecf', for: `${this.id}--collapse` }, h(HeadingTag, { key: 'c4dc2f1b5a6528ccd241a70da1b59ba3dbdc999c', class: "accordion-header", id: `${this.id}--header` }, h("button", { key: '27d5e2111b32819d9df23f824ee9bcfeb6ae0714', type: "button", class: `accordion-button${this.collapsed ? ' collapsed' : ''}`, part: "button" }, h("span", { key: '4e6840a49b432a39a93392aab9e1fb31ed13e120', class: {
                 'logo-container': true,
                 'has-image': !!this.slottedLogo,
-            } }, h("slot", { key: '1a42494db72a7b437b1d98fa2e8159d73ece22fa', name: "logo", onSlotchange: this.onSlotLogoChange.bind(this) })), h("slot", { key: '049865bb25f833780ef8e27fe8477e06476a2427', name: "header" }), h("post-icon", { key: 'da0cf7078e4f51710dbfd39c0afa90465fcb53c6', name: "2051" })))), h("post-collapsible", { key: '7c3b268e34d3e4f52820b11a6c090aefbc16e3b9', id: `${this.id}--collapse`, collapsed: this.collapsed, ref: el => (this.collapsible = el) }, h("div", { key: '993a7fffbccb557aed2842305f3927e5c3b5047a', class: "accordion-body", part: "body" }, h("slot", { key: '580eb87b1cb4f88acd7dddddecaa1c1982b7f6e3' }))))));
+            } }, h("slot", { key: '1f802c84252b6ba84d8a595fec744e345e6cc77f', name: "logo", onSlotchange: this.onSlotLogoChange.bind(this) })), h("slot", { key: '3d7b75e30b0aa31c36fd558db73b9055985c872c', name: "header" }), h("post-icon", { key: '1d5a701f86551bd62d3ed88892d0c4561a7b86c5', name: "2051" })))), h("post-collapsible", { key: '95f5c1d5fc09ffaa32eda367f2a1364e38007b4a', id: `${this.id}--collapse`, collapsed: this.collapsed, ref: el => (this.collapsible = el) }, h("div", { key: '69a4c7a8c20283477f637ee61185f576cdadfbb5', class: "accordion-body", part: "body" }, h("slot", { key: '24eb9e5998b86189d321367702a9e6c97ca0c0e1' }))))));
     }
     get host() { return this; }
     static get watchers() { return {

package/dist/components/post-accordion2.js

@@ -1,11 +1,11 @@
 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 { c as checkOneOf } from './check-one-of.js';
+import { c as checkRequiredAndOneOf } from './index2.js';
 import './breakpoints.js';
 import { e as eventGuard } from './event-guard.js';
 
-const postAccordionCss = ":host{display:block}::slotted(post-accordion-item){display:block}::slotted(post-accordion-item:not(:only-of-type:first-of-type)){margin-block-start: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 postAccordionCss = ":host{display:block}::slotted(post-accordion-item){display:block}::slotted(post-accordion-item:not(:only-of-type:first-of-type)){margin-block-start:calc(var(--post-device-border-width-default)*-1)}::slotted(post-accordion-item:where(:only-of-type,:not(:first-of-type))){--post-accordion-button-border-top-width:0}";
 const PostAccordionStyle0 = postAccordionCss;
 
 const PostAccordion = /*@__PURE__*/ proxyCustomElement(class PostAccordion extends HTMLElement {
@@ -17,16 +17,16 @@ const PostAccordion = /*@__PURE__*/ proxyCustomElement(class PostAccordion exten
         this.headingLevel = undefined;
         this.multiple = false;
     }
-    validateHeadingLevel(newValue = this.headingLevel) {
-        if (!newValue)
-            return;
-        checkOneOf(this, 'headingLevel', HEADING_LEVELS, 'The `heading-level` property of the `post-accordion` must be a number between 1 and 6.');
+    validateHeadingLevel() {
+        checkRequiredAndOneOf(this, 'headingLevel', HEADING_LEVELS);
         this.accordionItems.forEach(item => {
-            item.setAttribute('heading-level', String(newValue));
+            item.setAttribute('heading-level', String(this.headingLevel));
         });
     }
     componentWillLoad() {
         this.registerAccordionItems();
+    }
+    componentDidLoad() {
         this.validateHeadingLevel();
     }
     collapseToggleHandler(event) {
@@ -93,7 +93,7 @@ const PostAccordion = /*@__PURE__*/ proxyCustomElement(class PostAccordion exten
         });
     }
     render() {
-        return (h(Host, { key: '80e15cf7835f213cfee1ca7cf83cc2fd24bba3ff', "data-version": version }, h("div", { key: '1cf03d4960115b52394b5cb07cd2286747c728dd', class: "accordion" }, h("slot", { key: 'b94328a45a3cba6a8d3b418061036eb8af2cf027', onSlotchange: () => this.registerAccordionItems() }))));
+        return (h(Host, { key: '7057a6926f2279f7fc86d7f8539dd3ca884a3d70', "data-version": version }, h("div", { key: 'a6d337471d1d16c09d7e6af950d39c58fc6f2880', class: "accordion" }, h("slot", { key: '9687babb4b539f6e54468555b4057a2b378e1e10', onSlotchange: () => this.registerAccordionItems() }))));
     }
     get host() { return this; }
     static get watchers() { return {

package/dist/components/post-avatar2.js

@@ -1,6 +1,6 @@
 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';
+import { b as checkRequiredAndType, d as checkEmptyOrType, e as checkEmptyOrPattern } from './index2.js';
 import './breakpoints.js';
 
 const postAvatarCss = "@keyframes popIn{from{transform:scale(0.9);opacity:0;transition-property:transform,opacity,overlay,display;transition-behavior:allow-discrete;transition-duration:var(--post-transition-duration, 0.35s);transition-timing-function:linear(0, 0.007, 0.029 2.2%, 0.118 4.7%, 0.625 14.4%, 0.826 19%, 0.902, 0.962, 1.008 26.1%, 1.041 28.7%, 1.064 32.1%, 1.07 36%, 1.061 40.5%, 1.015 53.4%, 0.999 61.6%, 0.995 71.2%, 1)}to{opacity:1;transform:scale(1)}}:host{--post-avatar-bg:var(--post-scheme-color-interactive-primary-enabled-bg2);--post-avatar-fg:var(--post-scheme-color-interactive-primary-enabled-fg3);display:inline-flex;position:relative;width:var(--post-device-sizing-interactive-icon-size3);height:var(--post-device-sizing-interactive-icon-size3);background-color:var(--post-scheme-color-interactive-primary-enabled-stroke3);border:var(--post-device-border-width-default) solid var(--post-scheme-color-interactive-primary-enabled-stroke3);border-radius:var(--post-device-border-radius-round);font-size:var(--post-device-font-size-8);vertical-align:top;line-height:1}:host::after{display:block;content:\"\";position:absolute;inset:0;z-index:1;border-radius:inherit}*,*::before,*::after{box-sizing:border-box}slot,img,::slotted(img){display:block;width:100%;height:100%}img,::slotted(img){border-radius:var(--post-device-border-radius-round)}::slotted(:not(img)){display:none !important}.initials{display:flex;justify-content:center;align-items:center;position:relative;z-index:2;width:100%;height:100%;background-color:var(--post-avatar-bg);border-radius:var(--post-device-border-radius-round);color:var(--post-avatar-fg);text-transform:uppercase}.initials span{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}";
@@ -11,6 +11,7 @@ const GRAVATAR_DEFAULT = '404';
 const GRAVATAR_RATING = 'g';
 const GRAVATAR_SIZE = 80;
 const GRAVATAR_BASE_URL = `https://www.gravatar.com/avatar/{email}?s=${GRAVATAR_SIZE}&d=${GRAVATAR_DEFAULT}&r=${GRAVATAR_RATING}`;
+const emailPattern = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;
 var AvatarType;
 (function (AvatarType) {
     AvatarType["Slotted"] = "slotted";
@@ -34,7 +35,17 @@ const PostAvatar = /*@__PURE__*/ proxyCustomElement(class PostAvatar extends HTM
         this.initials = '';
     }
     validateFirstname() {
-        checkNonEmpty(this, 'firstname');
+        checkRequiredAndType(this, 'firstname', 'string');
+    }
+    validateLastname() {
+        checkEmptyOrType(this, 'lastname', 'string');
+    }
+    validateUserid() {
+        checkEmptyOrType(this, 'userid', 'string');
+    }
+    validateEmail() {
+        if (this.email)
+            checkEmptyOrPattern(this, 'email', emailPattern);
     }
     async getAvatar() {
         if (this.slottedImage !== null) {
@@ -122,6 +133,9 @@ const PostAvatar = /*@__PURE__*/ proxyCustomElement(class PostAvatar extends HTM
     }
     componentDidLoad() {
         this.validateFirstname();
+        this.validateLastname();
+        this.validateUserid();
+        this.validateEmail();
     }
     render() {
         const initials = this.getNames().reduce((acc, n, i) => {
@@ -136,7 +150,10 @@ const PostAvatar = /*@__PURE__*/ proxyCustomElement(class PostAvatar extends HTM
     }
     get host() { return this; }
     static get watchers() { return {
-        "firstname": ["validateFirstname"]
+        "firstname": ["validateFirstname"],
+        "lastname": ["validateLastname"],
+        "userid": ["validateUserid"],
+        "email": ["validateEmail"]
     }; }
     static get style() { return PostAvatarStyle0; }
 }, [1, "post-avatar", {
@@ -150,7 +167,10 @@ const PostAvatar = /*@__PURE__*/ proxyCustomElement(class PostAvatar extends HTM
         "imageAlt": [32],
         "initials": [32]
     }, undefined, {
-        "firstname": ["validateFirstname"]
+        "firstname": ["validateFirstname"],
+        "lastname": ["validateLastname"],
+        "userid": ["validateUserid"],
+        "email": ["validateEmail"]
     }]);
 PostAvatar.INTERNAL_USERID_IMAGE_SRC = 'https://web.post.ch/UserProfileImage/{userid}.png';
 function defineCustomElement() {

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

@@ -1,8 +1,7 @@
 import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
 import { s as slideDown, a as slideUp } 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 { b as checkRequiredAndType } from './index2.js';
 import './breakpoints.js';
 import { d as defineCustomElement$1 } from './post-icon2.js';
 
@@ -23,6 +22,9 @@ const PostBackToTop = /*@__PURE__*/ proxyCustomElement(class PostBackToTop exten
     isBelowFold() {
         return window.scrollY > window.innerHeight;
     }
+    validateLabel() {
+        checkRequiredAndType(this, 'label', 'string');
+    }
     /*Watch for changes in belowFold to show/hide the back to top button*/
     watchBelowFold(newValue) {
         if (newValue) {
@@ -66,11 +68,6 @@ const PostBackToTop = /*@__PURE__*/ proxyCustomElement(class PostBackToTop exten
             this.host.style.transform = `translateY(${this.translateY})`;
         }
     }
-    // Validate the label
-    validateLabel() {
-        checkNonEmpty(this, 'label');
-        checkType(this, 'label', 'string');
-    }
     // Set the initial state
     componentWillLoad() {
         this.belowFold = this.isBelowFold();
@@ -84,20 +81,20 @@ const PostBackToTop = /*@__PURE__*/ proxyCustomElement(class PostBackToTop exten
         window.removeEventListener('scroll', this.handleScroll);
     }
     render() {
-        return (h(Host, { key: 'c1ab6c5e7619ad829d64aea16c59a923310cf091', "data-version": version }, h("button", { key: '99e10e4d16c8d82521b001c3b3d902d8ba47ee92', class: "back-to-top", "aria-hidden": this.belowFold ? 'false' : 'true', tabindex: this.belowFold ? '0' : '-1', onClick: this.scrollToTop }, h("post-icon", { key: '5a6a1b472b45fcc466127ece7091617e4700ee16', "aria-hidden": "true", name: "3026" }), h("span", { key: 'c8502e4822347d48034f6a936203e3314c7ae91e', class: "visually-hidden" }, this.label))));
+        return (h(Host, { key: '7edc6db9d849cf9ce0308a2ac5b2c2f9bc4e47a9', "data-version": version }, h("button", { key: '610e81756ce3dd927f55d48beb8cd829b66fc247', class: "back-to-top", "aria-hidden": this.belowFold ? 'false' : 'true', tabindex: this.belowFold ? '0' : '-1', onClick: this.scrollToTop }, h("post-icon", { key: 'bb1f3cc462de7680361f4cfd04abb1816aebd488', "aria-hidden": "true", name: "3026" }), h("span", { key: '4fbd84d78c425140adea5833450cef60af967f5a', class: "visually-hidden" }, this.label))));
     }
     get host() { return this; }
     static get watchers() { return {
-        "belowFold": ["watchBelowFold"],
-        "label": ["validateLabel"]
+        "label": ["validateLabel"],
+        "belowFold": ["watchBelowFold"]
     }; }
     static get style() { return PostBackToTopStyle0; }
 }, [1, "post-back-to-top", {
         "label": [513],
         "belowFold": [32]
     }, undefined, {
-        "belowFold": ["watchBelowFold"],
-        "label": ["validateLabel"]
+        "label": ["validateLabel"],
+        "belowFold": ["watchBelowFold"]
     }]);
 function defineCustomElement() {
     if (typeof customElements === "undefined") {

package/dist/components/post-banner2.js

@@ -1,12 +1,10 @@
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
 import { v as version } from './package.js';
 import { f as fadeOut } from './fade.js';
-import { a as checkEmptyOrPattern, c as checkEmptyOrOneOf } from './index2.js';
+import { b as checkRequiredAndType, d as checkEmptyOrType, a as checkEmptyOrOneOf } from './index2.js';
 import './breakpoints.js';
 import { n as nanoid } from './index.browser.js';
 import { d as defineCustomElement$1 } from './post-icon2.js';
-import { c as checkType } from './check-type.js';
-import { c as checkNonEmpty } from './check-non-empty.js';
 
 const BANNER_TYPES = ['neutral', 'success', 'warning', 'danger', 'info'];
 
@@ -29,23 +27,21 @@ const PostBanner = /*@__PURE__*/ proxyCustomElement(class PostBanner extends HTM
         this.icon = undefined;
         this.type = 'neutral';
     }
-    validateDismissible() {
-        checkType(this, 'dismissible', 'boolean');
-        setTimeout(() => this.validateDismissLabel());
-    }
-    validateDismissLabel() {
+    checkDismissible() {
         if (this.dismissible) {
-            checkNonEmpty(this, 'dismissLabel', 'Dismissible post-banner\'s require a "dismiss-label" prop.');
+            setTimeout(() => {
+                checkRequiredAndType(this, 'dismissLabel', 'string');
+            });
         }
     }
     validateIcon() {
-        checkEmptyOrPattern(this, 'icon', /\d{4}|none/, 'The post-banner "icon" prop should be a 4-digit string.');
+        checkEmptyOrType(this, 'icon', 'string');
     }
     validateType() {
         checkEmptyOrOneOf(this, 'type', BANNER_TYPES);
     }
     componentDidLoad() {
-        this.validateDismissible();
+        this.checkDismissible();
         this.validateIcon();
         this.validateType();
     }
@@ -71,19 +67,18 @@ const PostBanner = /*@__PURE__*/ proxyCustomElement(class PostBanner extends HTM
     }
     render() {
         const defaultBannerContent = [
-            this.hasHeading && (h("div", { key: `${this.bannerId}-heading`, class: "banner-heading" }, h("slot", { key: 'd4b29e3591f026b880c4b859a47bcbc3e3b11ced', name: "heading" }))),
+            this.hasHeading && (h("div", { key: `${this.bannerId}-heading`, class: "banner-heading" }, h("slot", { key: '6bf8a3c8152cda870f7d3036c837918f83dee8e1', name: "heading" }))),
             h("slot", { key: `${this.bannerId}-message` }),
         ];
         const actionBannerContent = [
             h("div", { key: `${this.bannerId}-content`, class: "banner-content" }, defaultBannerContent),
-            h("div", { key: `${this.bannerId}-buttons`, class: "banner-buttons" }, h("slot", { key: '2f1461a2374d736cb3b72641aa150bc611082f56', name: "actions" })),
+            h("div", { key: `${this.bannerId}-buttons`, class: "banner-buttons" }, h("slot", { key: '07a3ade9a798eeb292e28820483a4e5096fe3569', name: "actions" })),
         ];
-        return (h(Host, { key: 'ec72012fa82e03b0dca2368025449e1942731c21', "data-version": version }, h("div", { key: 'acae7ac34af951ca9176769ab4bcdc388d769931', role: "alert", class: this.classes, part: this.classes }, this.dismissible && (h("button", { key: '23cc4d77c2825bc76cedcdc321b80b9b0f333e71', class: "btn-close", onClick: this.onDismissButtonClick }, h("span", { key: '2f0753d49fc86f19df743f33a086c14b2a0686f7', class: "visually-hidden" }, this.dismissLabel))), this.icon && this.icon !== 'none' && (h("post-icon", { key: `${this.bannerId}-icon`, name: this.icon })), this.hasActions ? actionBannerContent : defaultBannerContent)));
+        return (h(Host, { key: '9b6c1935e20686e69005a0034ca711363b880647', "data-version": version }, h("div", { key: '9a4effd086d7279cbd91bea6b5510bc66349fdc5', role: "alert", class: this.classes, part: this.classes }, this.dismissible && (h("button", { key: '7e822d65eaf6eb9aa356aed8cc95c0107ee1ae27', class: "btn-close", onClick: this.onDismissButtonClick }, h("span", { key: 'f1c7356412ddb9d046f985fde25703715a20755d', class: "visually-hidden" }, this.dismissLabel))), this.icon && this.icon !== 'none' && (h("post-icon", { key: `${this.bannerId}-icon`, name: this.icon })), this.hasActions ? actionBannerContent : defaultBannerContent)));
     }
     get host() { return this; }
     static get watchers() { return {
-        "dismissible": ["validateDismissible"],
-        "dismissLabel": ["validateDismissLabel"],
+        "dismissible": ["checkDismissible"],
         "icon": ["validateIcon"],
         "type": ["validateType"]
     }; }
@@ -100,8 +95,7 @@ const PostBanner = /*@__PURE__*/ proxyCustomElement(class PostBanner extends HTM
         "onDismissButtonClick": [32],
         "dismiss": [64]
     }, undefined, {
-        "dismissible": ["validateDismissible"],
-        "dismissLabel": ["validateDismissLabel"],
+        "dismissible": ["checkDismissible"],
         "icon": ["validateIcon"],
         "type": ["validateType"]
     }]);

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

@@ -1,6 +1,6 @@
 import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
 import { v as version } from './package.js';
-import { d as checkEmptyOrUrl } from './index2.js';
+import { g as checkEmptyOrUrl } from './index2.js';
 import './breakpoints.js';
 import { d as defineCustomElement$1 } from './post-icon2.js';
 
@@ -47,7 +47,7 @@ const PostBreadcrumbItem = /*@__PURE__*/ proxyCustomElement(class PostBreadcrumb
     }
     render() {
         const BreadcrumbTag = this.validUrl ? 'a' : 'span';
-        return (h(Host, { key: 'd0444118aa031f4cf6f5161d7aa21900e9768348', "data-version": version }, h("post-icon", { key: '719a76e6e86bbb02526c4610acefb3ad253454af', name: "2111", class: "breadcrumb-item-icon" }), h(BreadcrumbTag, { key: '3f5ffb9c77567dba35efa7938029cd519de55474', class: "breadcrumb-item", ...(this.validUrl ? { href: this.validUrl } : {}), onKeyDown: event => this.handleKeyDown(event) }, h("slot", { key: 'bb1be29905c1533f2238a47a346fb35d6a7645fd' }))));
+        return (h(Host, { key: '8db753265537822996e971b6910284246ed0c9b2', "data-version": version }, h("post-icon", { key: '5a40f01b5876337f6dff6117b61d0138b0c85d1e', name: "2111", class: "breadcrumb-item-icon" }), h(BreadcrumbTag, { key: '8a023863726927eca0f222a27f9b8946bc6c3b57', class: "breadcrumb-item", ...(this.validUrl ? { href: this.validUrl } : {}), onKeyDown: event => this.handleKeyDown(event) }, h("slot", { key: 'f98dd0552ff91b845bb838518cc619d613f57e5c' }))));
     }
     get host() { return this; }
     static get watchers() { return {

package/dist/components/post-breadcrumbs2.js

@@ -1,6 +1,6 @@
 import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
 import { v as version } from './package.js';
-import { b as checkUrl } from './index2.js';
+import { f as checkRequiredAndUrl, d as checkEmptyOrType } from './index2.js';
 import './breakpoints.js';
 import { d as defineCustomElement$6 } from './post-breadcrumb-item2.js';
 import { d as defineCustomElement$5 } from './post-icon2.js';
@@ -49,13 +49,18 @@ const PostBreadcrumbs = /*@__PURE__*/ proxyCustomElement(class PostBreadcrumbs e
         this.isConcatenated = undefined;
         this.lastWindowWidth = undefined;
     }
-    validateUrl() {
-        checkUrl(this, 'homeUrl');
+    validateHomeUrl() {
+        checkRequiredAndUrl(this, 'homeUrl');
+    }
+    validateHomeText() {
+        checkEmptyOrType(this, 'homeUrl', 'string');
     }
     componentWillLoad() {
         this.updateBreadcrumbItems();
     }
     componentDidLoad() {
+        this.validateHomeUrl();
+        this.validateHomeText();
         window.addEventListener('resize', this.handleResize);
         this.waitForBreadcrumbsRef();
     }
@@ -103,7 +108,7 @@ const PostBreadcrumbs = /*@__PURE__*/ proxyCustomElement(class PostBreadcrumbs e
     }
     render() {
         const visibleItems = this.breadcrumbItems.slice(0, -1);
-        return (h(Host, { key: 'f0c2507a02ea79059af1e4dfefce17ab04780fbe', "data-version": version }, h("nav", { key: '0307206eecadfa5a47ba88f9c17c72b88d26be5c', "aria-label": "Breadcrumbs", class: "breadcrumbs-nav", ref: el => (this.breadcrumbsNavRef = el) }, h("ol", { key: '646809f73775f8cd74b6b97c21b7055569fa5f4c', class: "no-list breadcrumbs-list" }, h("li", { key: '15bd467366517f0b9a11e54dfdffc13a0b681f3c' }, h("a", { key: 'd05e860d2de60b740b77120f0745752ff1ec1d17', href: this.homeUrl, class: "breadcrumb-link" }, h("span", { key: '3241f72e9fdc82e1521762d2fc47a6472366f722', class: "visually-hidden" }, this.homeText), h("post-icon", { key: '2cdfdb5641b1ba459070b724e6578b842b8d90ae', name: "home", class: "home-icon" }))), this.isConcatenated ? (h("div", { class: "menu-trigger-wrapper", "aria-label": "More breadcrumbs", onKeyDown: e => {
+        return (h(Host, { key: '6498bbfb52739937fc8043a78fa66d922ce740ef', "data-version": version }, h("nav", { key: '421e51bdf79856ba2feb6c23f1b5bb4f5a87f975', "aria-label": "Breadcrumbs", class: "breadcrumbs-nav", ref: el => (this.breadcrumbsNavRef = el) }, h("ol", { key: '191140970a37312b486b594b065fcc6ef580f1ae', class: "no-list breadcrumbs-list" }, h("li", { key: '37e0da2803814556bac7102e4e27b13cfd268472' }, h("a", { key: 'b11a8dba7b19dac336dc5905dd74b84a9b83da58', href: this.homeUrl, class: "breadcrumb-link" }, h("span", { key: '147009734e9174d7b9541c3f5325d914ef5d35c0', class: "visually-hidden" }, this.homeText), h("post-icon", { key: '56dd5647116c03c11506fb1e2957edeb389c5718', name: "home", class: "home-icon" }))), this.isConcatenated ? (h("div", { class: "menu-trigger-wrapper", "aria-label": "More breadcrumbs", onKeyDown: e => {
                 if (e.key === 'Enter' || e.key === ' ') {
                     e.preventDefault();
                     this.handleBreadcrumbItemClick();
@@ -114,11 +119,12 @@ const PostBreadcrumbs = /*@__PURE__*/ proxyCustomElement(class PostBreadcrumbs e
                     linkElement?.click();
                     e.preventDefault();
                 }
-            } }, item.url ? h("a", { href: item.url }, item.text) : h("span", null, item.text)))))))) : (visibleItems.map(item => (h("post-breadcrumb-item", { url: item.url, key: item.url || item.text }, item.text)))), this.lastItem && (h("post-breadcrumb-item", { key: '9820e7cc99072f16f9118e3783de126b1c65c51c', url: this.lastItem.url, "aria-current": "page", tabindex: -1 }, this.lastItem.text))), h("div", { key: '960f5784f11bd87e787722bd888cf91ec65329e1', class: "hidden-items" }, h("a", { key: '73dfb29ff5b45c6e3fe9a8f88abfde56fc9bb5e3', href: this.homeUrl, class: "hidden-breadcrumb-item" }, h("span", { key: 'bf6be08c70fca37879312b2adbf2808d83599cf3', class: "visually-hidden" }, this.homeText), h("post-icon", { key: '8c94c725dc315ac31187e079cb01def2891ac352', name: "home", class: "home-icon" })), this.breadcrumbItems.map(item => (h("post-breadcrumb-item", { url: item.url, key: `hidden-${item.url || item.text}`, class: "hidden-breadcrumb-item" }, item.text)))))));
+            } }, item.url ? h("a", { href: item.url }, item.text) : h("span", null, item.text)))))))) : (visibleItems.map(item => (h("post-breadcrumb-item", { url: item.url, key: item.url || item.text }, item.text)))), this.lastItem && (h("post-breadcrumb-item", { key: 'ca1fe70041a11fa14e04e3e3d4fce699f23a127f', url: this.lastItem.url, "aria-current": "page", tabindex: -1 }, this.lastItem.text))), h("div", { key: '360825da69d23943a55ceb7095fabcccbf65795b', class: "hidden-items" }, h("a", { key: '9c5dedc65e639c853bc537a93971a45c6d801d00', href: this.homeUrl, class: "hidden-breadcrumb-item" }, h("span", { key: '2e6961ca93e24ba8042cf15f2f8cc14511c3d374', class: "visually-hidden" }, this.homeText), h("post-icon", { key: 'ea61643af1b2384e931ecbf5b9ff48950b69719e', name: "home", class: "home-icon" })), this.breadcrumbItems.map(item => (h("post-breadcrumb-item", { url: item.url, key: `hidden-${item.url || item.text}`, class: "hidden-breadcrumb-item" }, item.text)))))));
     }
     get host() { return this; }
     static get watchers() { return {
-        "homeUrl": ["validateUrl"]
+        "homeUrl": ["validateHomeUrl"],
+        "homeText": ["validateHomeText"]
     }; }
     static get style() { return PostBreadcrumbsStyle0; }
 }, [1, "post-breadcrumbs", {
@@ -128,7 +134,8 @@ const PostBreadcrumbs = /*@__PURE__*/ proxyCustomElement(class PostBreadcrumbs e
         "isConcatenated": [32],
         "lastWindowWidth": [32]
     }, undefined, {
-        "homeUrl": ["validateUrl"]
+        "homeUrl": ["validateHomeUrl"],
+        "homeText": ["validateHomeText"]
     }]);
 function defineCustomElement() {
     if (typeof customElements === "undefined") {