@swisspost/design-system-components 10.0.0-next.37 → 10.0.0-next.39

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.37";
+const version = "10.0.0-next.39";
 
 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';
@@ -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)}`;
@@ -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: '4de770633e0c9b9bb92b92a66be9a1481bf0fb3e', id: this.id, "data-version": version }, h("div", { key: '4c2b91b25637cbe284442626d02d0ce6496589a4', part: "accordion-item", class: "accordion-item" }, h("post-collapsible-trigger", { key: '777f8b222b017b765f265296ad2829a027a99c22', for: `${this.id}--collapse` }, h(HeadingTag, { key: 'a646d911ea83c004fbc5490cb1e9dafdf490d09f', class: "accordion-header", id: `${this.id}--header` }, h("button", { key: '0c30a665426b98fff997874c365ffc6b97ecc01c', type: "button", class: `accordion-button${this.collapsed ? ' collapsed' : ''}`, part: "button" }, h("span", { key: '64edd8541af949f87ad929173c4a5210f892b0b6', 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: 'a3dfd1796d7c3b854980078673a017d58acb97ea', name: "logo", onSlotchange: this.onSlotLogoChange.bind(this) })), h("slot", { key: 'd008c9aebfd8431afa4eae1af8646dd7de97916b', name: "header" }), h("post-icon", { key: 'ee5150a9cd7693e57f639cf09d9c4f24aae57308', name: "2051" })))), h("post-collapsible", { key: '12d2ef55e0e7615619a0a246268e8af3d3d8e712', id: `${this.id}--collapse`, collapsed: this.collapsed, ref: el => (this.collapsible = el) }, h("div", { key: 'd2cf362418c50ad56f8dee8e43baabbd976682f9', class: "accordion-body", part: "body" }, h("slot", { key: '6792db26a9eab60e113d62e23faf003a6b43685b' }))))));
     }
     get host() { return this; }
     static get watchers() { return {

package/dist/components/post-accordion2.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 checkOneOf } from './check-one-of.js';
+import { c as checkRequiredAndOneOf } from './index2.js';
 import './breakpoints.js';
 import { e as eventGuard } from './event-guard.js';
 
@@ -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") {

package/dist/components/post-card-control2.js

@@ -1,6 +1,5 @@
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
-import { c as checkOneOf } from './check-one-of.js';
-import { c as checkNonEmpty } from './check-non-empty.js';
+import { b as checkRequiredAndType, d as checkEmptyOrType, c as checkRequiredAndOneOf } from './index2.js';
 import './breakpoints.js';
 import { v as version } from './package.js';
 import { d as defineCustomElement$1 } from './post-icon2.js';
@@ -12,10 +11,10 @@ let cardControlIds = 0;
 const PostCardControl = /*@__PURE__*/ proxyCustomElement(class PostCardControl extends HTMLElement {
     /**
      * A public method to reset the controls `checked` and `validity` state.
-     * The validity state is set to `null`, so it's neither valid nor invalid.
+     * The validity state is set to `undefined`, so it's neither valid nor invalid.
      */
     async reset() {
-        this.validity = null;
+        this.validity = undefined;
         this.controlSetChecked(this.initialChecked);
     }
     /**
@@ -27,10 +26,24 @@ const PostCardControl = /*@__PURE__*/ proxyCustomElement(class PostCardControl e
         this.controlSetChecked(false);
     }
     validateControlLabel() {
-        checkNonEmpty(this, 'label');
+        checkRequiredAndType(this, 'label', 'string');
+    }
+    validateControlDescription() {
+        checkEmptyOrType(this, 'description', 'string');
     }
     validateControlType() {
-        checkOneOf(this, 'type', ['checkbox', 'radio']);
+        checkRequiredAndOneOf(this, 'type', ['checkbox', 'radio']);
+    }
+    validateControlName() {
+        checkEmptyOrType(this, 'name', 'string');
+    }
+    validateControlValue() {
+        if (this.type == 'radio') {
+            checkEmptyOrType(this, 'value', 'string');
+        }
+    }
+    validateControlIcon() {
+        checkEmptyOrType(this, 'icon', 'string');
     }
     updateControlChecked(checked = this.checked) {
         this.controlSetChecked(checked);
@@ -67,14 +80,14 @@ const PostCardControl = /*@__PURE__*/ proxyCustomElement(class PostCardControl e
         this.controlId = `PostCardControl_${cardControlIds++}`;
         this.focused = false;
         this.label = undefined;
-        this.description = null;
+        this.description = undefined;
         this.type = undefined;
-        this.name = null;
-        this.value = null;
+        this.name = undefined;
+        this.value = undefined;
         this.checked = false;
         this.disabled = false;
-        this.validity = null;
-        this.icon = null;
+        this.validity = undefined;
+        this.icon = undefined;
         this.cardClickHandler = this.cardClickHandler.bind(this);
         this.controlClickHandler = this.controlClickHandler.bind(this);
         this.controlChangeHandler = this.controlChangeHandler.bind(this);
@@ -221,14 +234,14 @@ const PostCardControl = /*@__PURE__*/ proxyCustomElement(class PostCardControl e
         this.hasIcon = Boolean(this.host.querySelector('[slot="icon"]') || this.icon);
     }
     render() {
-        return (h(Host, { key: '9172642a4424a3393c0738feba3a3ef8dcea43e8', "data-version": version, onClick: this.cardClickHandler }, h("div", { key: 'd6e47613dfe9d33647fd2379010275d70cbcbdcb', class: {
+        return (h(Host, { key: 'ff23ac518f715fc7c2727dd7c2abccd0fdb486da', "data-version": version, onClick: this.cardClickHandler }, h("div", { key: '3519942dfeb694729e4b6c7c7df4b68854ccde81', class: {
                 'card-control': true,
                 'is-checked': this.checked,
                 'is-disabled': this.disabled,
                 'is-focused': this.focused,
-                'is-valid': this.validity !== null && this.validity !== 'false',
-                'is-invalid': this.validity === 'false',
-            } }, h("input", { key: '44b0e5d5c2c6a759300979a5c33c2a65afaaa27d', ref: el => (this.control = el), id: this.controlId, class: "card-control--input", type: this.type, name: this.name, value: this.value, checked: this.checked, "aria-describedby": `${this.controlId}_content`, "aria-disabled": this.disabled, "aria-invalid": this.validity === 'false', onClick: this.controlClickHandler, onInput: this.controlChangeHandler, onChange: this.controlChangeHandler, onFocus: this.controlFocusHandler, onBlur: this.controlFocusHandler, onKeyDown: this.controlKeyDownHandler }), h("label", { key: 'fd3106562bfcb5ca0e7e5704272f927bfb201af5', id: `${this.controlId}_label`, htmlFor: this.controlId, class: "card-control--label" }, this.label, this.description ? (h("div", { class: "card-control--description" }, this.description)) : null), this.hasIcon ? (h("div", { class: "card-control--icon" }, h("slot", { name: "icon" }, this.icon ? h("post-icon", { name: this.icon }) : null))) : null, h("div", { key: 'ebfa245a0e2b6e45384586408614ce85494fbc58', id: `${this.controlId}_content`, class: "card-control--content" }, h("slot", { key: '99b406bc58fbfcd054f1b551a453a7ac1f4276f6' })))));
+                'is-valid': this.validity !== undefined && this.validity !== false,
+                'is-invalid': this.validity === false,
+            } }, h("input", { key: 'f47a58485c7d507565e29c832ca1c3d6b053bc17', ref: el => (this.control = el), id: this.controlId, class: "card-control--input", type: this.type, name: this.name, value: this.value, checked: this.checked, "aria-describedby": `${this.controlId}_content`, "aria-disabled": this.disabled, "aria-invalid": this.validity === false, onClick: this.controlClickHandler, onInput: this.controlChangeHandler, onChange: this.controlChangeHandler, onFocus: this.controlFocusHandler, onBlur: this.controlFocusHandler, onKeyDown: this.controlKeyDownHandler }), h("label", { key: '65e8247d88c2cc6bb2e0be17e7d6fab3502fb364', id: `${this.controlId}_label`, htmlFor: this.controlId, class: "card-control--label" }, this.label, this.description ? (h("div", { class: "card-control--description" }, this.description)) : null), this.hasIcon ? (h("div", { class: "card-control--icon" }, h("slot", { name: "icon" }, this.icon ? h("post-icon", { name: this.icon }) : null))) : null, h("div", { key: 'df538a1f14b49fa7bd6907ef57d045c7303b6d77', id: `${this.controlId}_content`, class: "card-control--content" }, h("slot", { key: '1a79c6a2da57a5b8aef911dc2acd09e553b79489' })))));
     }
     componentDidRender() {
         this.setHostContext();
@@ -236,7 +249,11 @@ const PostCardControl = /*@__PURE__*/ proxyCustomElement(class PostCardControl e
     }
     componentDidLoad() {
         this.validateControlLabel();
+        this.validateControlName();
+        this.validateControlValue();
+        this.validateControlDescription();
         this.validateControlType();
+        this.validateControlIcon();
     }
     formAssociatedCallback() {
         this.controlSetChecked(this.checked);
@@ -254,7 +271,11 @@ const PostCardControl = /*@__PURE__*/ proxyCustomElement(class PostCardControl e
     get host() { return this; }
     static get watchers() { return {
         "label": ["validateControlLabel"],
+        "description": ["validateControlDescription"],
         "type": ["validateControlType"],
+        "name": ["validateControlName"],
+        "value": ["validateControlValue"],
+        "icon": ["validateControlIcon"],
         "checked": ["updateControlChecked"],
         "disabled": ["updateControlDisabled"]
     }; }
@@ -267,14 +288,18 @@ const PostCardControl = /*@__PURE__*/ proxyCustomElement(class PostCardControl e
         "value": [1],
         "checked": [1028],
         "disabled": [1028],
-        "validity": [1025],
+        "validity": [1028],
         "icon": [1],
         "focused": [32],
         "reset": [64],
         "groupReset": [64]
     }, undefined, {
         "label": ["validateControlLabel"],
+        "description": ["validateControlDescription"],
         "type": ["validateControlType"],
+        "name": ["validateControlName"],
+        "value": ["validateControlValue"],
+        "icon": ["validateControlIcon"],
         "checked": ["updateControlChecked"],
         "disabled": ["updateControlDisabled"]
     }]);

package/dist/components/post-closebutton2.js

@@ -12,7 +12,7 @@ const PostClosebutton = /*@__PURE__*/ proxyCustomElement(class PostClosebutton e
         this.__attachShadow();
     }
     render() {
-        return (h(Host, { key: 'cfa55f799fdf9ad0f3ac1eb296e063b5001de997', "data-version": version }, h("button", { key: '7c8a084f6d7278329ddfb5fc4b2b8f992a185666', class: "btn btn-icon-close", type: "button" }, h("post-icon", { key: 'fc74ccb4f0c4c091a02a41cdef918d6c3b065c8c', "aria-hidden": "true", name: "closex" }), h("span", { key: '98478b013714df6d82c6c2f533ac8ecd2abae778', class: "visually-hidden" }, h("slot", { key: '109e2bca4436986dd037d8c29088cc79395bc200' })))));
+        return (h(Host, { key: '7b5e179b42eefd1823b2b2ef7ee17c94bd9f0ddd', "data-version": version }, h("button", { key: '471e68d1ddcfe741f5450d002b2daa86cec0f986', class: "btn btn-icon-close", type: "button" }, h("post-icon", { key: '928fa7460988cffa269a29506e68e056f84bcef8', "aria-hidden": "true", name: "closex" }), h("span", { key: 'c1501f4a8b7d8d95be7d02576b10143b9e6b0654', class: "visually-hidden" }, h("slot", { key: 'a9f1ab8db57486d420db0981090ad2ba5183c289' })))));
     }
     get host() { return this; }
     static get style() { return PostClosebuttonStyle0; }