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

package/loaders/post-accordion.js

@@ -1,127 +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 { c as checkOneOf } from './check-one-of.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 PostAccordionStyle0 = postAccordionCss;
-
-const PostAccordion$1 = /*@__PURE__*/ proxyCustomElement(class PostAccordion extends HTMLElement {
-    constructor() {
-        super();
-        this.__registerHost();
-        this.__attachShadow();
-        this.expandedItems = new Set();
-        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.');
-        this.accordionItems.forEach(item => {
-            item.setAttribute('heading-level', String(newValue));
-        });
-    }
-    componentWillLoad() {
-        this.registerAccordionItems();
-        this.validateHeadingLevel();
-    }
-    collapseToggleHandler(event) {
-        eventGuard(this.host, event, { targetLocalName: 'post-accordion-item', delegatorSelector: 'post-accordion' }, () => {
-            const toggledAccordionItem = event.target;
-            const isClosing = this.expandedItems.has(toggledAccordionItem);
-            if (isClosing) {
-                this.expandedItems.delete(toggledAccordionItem);
-            }
-            else {
-                this.expandedItems.add(toggledAccordionItem);
-            }
-            if (this.multiple || isClosing)
-                return;
-            // Close other open accordion items to ensure only one is open at a time
-            Array.from(this.expandedItems.values())
-                .filter(item => item !== toggledAccordionItem)
-                .forEach(item => {
-                item.toggle(false);
-            });
-        });
-    }
-    /**
-     * Toggles the `post-accordion-item` with the given id.
-     */
-    async toggle(id) {
-        const itemToToggle = this.accordionItems.find(item => item.id === id);
-        if (!itemToToggle)
-            throw new Error(`No post-accordion-item found with id #${id}.`);
-        await itemToToggle.toggle();
-    }
-    /**
-     * Expands all `post-accordion-item`.
-     *
-     * If `multiple="true"` is not set and all items are closed, it will open the first one.
-     * Otherwise, it will keep the opened one.
-     */
-    async expandAll() {
-        if (this.multiple) {
-            await Promise.all(this.accordionItems.map(item => item.toggle(true)));
-        }
-        else if (!this.expandedItems.size) {
-            await this.accordionItems[0].toggle(true);
-        }
-    }
-    /**
-     * Collapses all `post-accordion-item`.
-     */
-    async collapseAll() {
-        await Promise.all(this.accordionItems.map(item => item.toggle(false)));
-    }
-    registerAccordionItems() {
-        this.accordionItems = Array.from(this.host.querySelectorAll('post-accordion-item'));
-        this.accordionItems
-            .filter(item => {
-            return !item.collapsed || this.expandedItems.has(item);
-        })
-            .forEach((item, index) => {
-            if (!this.multiple && index !== 0) {
-                item.setAttribute('collapsed', '');
-                return;
-            }
-            this.expandedItems.add(item);
-        });
-    }
-    render() {
-        return (h(Host, { key: '80e15cf7835f213cfee1ca7cf83cc2fd24bba3ff', "data-version": version }, h("div", { key: '1cf03d4960115b52394b5cb07cd2286747c728dd', class: "accordion" }, h("slot", { key: 'b94328a45a3cba6a8d3b418061036eb8af2cf027', onSlotchange: () => this.registerAccordionItems() }))));
-    }
-    get host() { return this; }
-    static get watchers() { return {
-        "headingLevel": ["validateHeadingLevel"]
-    }; }
-    static get style() { return PostAccordionStyle0; }
-}, [1, "post-accordion", {
-        "headingLevel": [2, "heading-level"],
-        "multiple": [4],
-        "toggle": [64],
-        "expandAll": [64],
-        "collapseAll": [64]
-    }, [[0, "postToggle", "collapseToggleHandler"]], {
-        "headingLevel": ["validateHeadingLevel"]
-    }]);
-function defineCustomElement$1() {
-    if (typeof customElements === "undefined") {
-        return;
-    }
-    const components = ["post-accordion"];
-    components.forEach(tagName => { switch (tagName) {
-        case "post-accordion":
-            if (!customElements.get(tagName)) {
-                customElements.define(tagName, PostAccordion$1);
-            }
-            break;
-    } });
-}
+import { P as PostAccordion$1, d as defineCustomElement$1 } from './post-accordion2.js';
 
 const PostAccordion = PostAccordion$1;
 const defineCustomElement = defineCustomElement$1;

package/{dist/esm/post-accordion-03796d13.js → loaders/post-accordion2.js}

@@ -1,30 +1,32 @@
-import { r as registerInstance, h, H as Host, g as getElement } from './index-f4d19816.js';
-import { v as version } from './package-33ac2576.js';
-import { H as HEADING_LEVELS } from './heading-levels-5b7b4349.js';
-import { c as checkOneOf } from './check-one-of-0bee20f5.js';
-import './breakpoints-7812702e.js';
-import { e as eventGuard } from './event-guard-538ee077.js';
+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 { f 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 = class {
-    constructor(hostRef) {
-        registerInstance(this, hostRef);
+const PostAccordion = /*@__PURE__*/ proxyCustomElement(class PostAccordion extends HTMLElement {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
         this.expandedItems = new Set();
         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) {
@@ -91,13 +93,34 @@ const PostAccordion = class {
         });
     }
     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 getElement(this); }
+    get host() { return this; }
     static get watchers() { return {
         "headingLevel": ["validateHeadingLevel"]
     }; }
-};
-PostAccordion.style = PostAccordionStyle0;
+    static get style() { return PostAccordionStyle0; }
+}, [1, "post-accordion", {
+        "headingLevel": [2, "heading-level"],
+        "multiple": [4],
+        "toggle": [64],
+        "expandAll": [64],
+        "collapseAll": [64]
+    }, [[0, "postToggle", "collapseToggleHandler"]], {
+        "headingLevel": ["validateHeadingLevel"]
+    }]);
+function defineCustomElement() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["post-accordion"];
+    components.forEach(tagName => { switch (tagName) {
+        case "post-accordion":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, PostAccordion);
+            }
+            break;
+    } });
+}
 
-export { PostAccordion as P };
+export { PostAccordion as P, defineCustomElement as d };

package/loaders/post-avatar.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 { c as checkRequiredAndType, a as checkEmptyOrType, b 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$1 = /*@__PURE__*/ proxyCustomElement(class PostAvatar extends H
         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$1 = /*@__PURE__*/ proxyCustomElement(class PostAvatar extends H
     }
     componentDidLoad() {
         this.validateFirstname();
+        this.validateLastname();
+        this.validateUserid();
+        this.validateEmail();
     }
     render() {
         const initials = this.getNames().reduce((acc, n, i) => {
@@ -136,7 +150,10 @@ const PostAvatar$1 = /*@__PURE__*/ proxyCustomElement(class PostAvatar extends H
     }
     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$1 = /*@__PURE__*/ proxyCustomElement(class PostAvatar extends H
         "imageAlt": [32],
         "initials": [32]
     }, undefined, {
-        "firstname": ["validateFirstname"]
+        "firstname": ["validateFirstname"],
+        "lastname": ["validateLastname"],
+        "userid": ["validateUserid"],
+        "email": ["validateEmail"]
     }]);
 PostAvatar$1.INTERNAL_USERID_IMAGE_SRC = 'https://web.post.ch/UserProfileImage/{userid}.png';
 function defineCustomElement$1() {

package/loaders/post-back-to-top.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 { c as checkRequiredAndType } from './index2.js';
 import './breakpoints.js';
 import { d as defineCustomElement$2 } from './post-icon2.js';
 
@@ -23,6 +22,9 @@ const PostBackToTop$1 = /*@__PURE__*/ proxyCustomElement(class PostBackToTop ext
     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$1 = /*@__PURE__*/ proxyCustomElement(class PostBackToTop ext
             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$1 = /*@__PURE__*/ proxyCustomElement(class PostBackToTop ext
         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$1() {
     if (typeof customElements === "undefined") {

package/loaders/post-banner.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 { c as checkEmptyOrPattern, a as checkEmptyOrOneOf } from './index2.js';
+import { c as checkRequiredAndType, a as checkEmptyOrType, d as checkEmptyOrOneOf } from './index2.js';
 import './breakpoints.js';
 import { n as nanoid } from './index.browser.js';
 import { d as defineCustomElement$2 } 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$1 = /*@__PURE__*/ proxyCustomElement(class PostBanner extends H
         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$1 = /*@__PURE__*/ proxyCustomElement(class PostBanner extends H
     }
     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$1 = /*@__PURE__*/ proxyCustomElement(class PostBanner extends H
         "onDismissButtonClick": [32],
         "dismiss": [64]
     }, undefined, {
-        "dismissible": ["validateDismissible"],
-        "dismissLabel": ["validateDismissLabel"],
+        "dismissible": ["checkDismissible"],
         "icon": ["validateIcon"],
         "type": ["validateType"]
     }]);

package/loaders/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 { e 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/loaders/post-breadcrumbs.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 { e as checkRequiredAndUrl, a as checkEmptyOrType } from './index2.js';
 import './breakpoints.js';
 import { d as defineCustomElement$7 } from './post-breadcrumb-item2.js';
 import { d as defineCustomElement$6 } from './post-icon2.js';
@@ -49,13 +49,18 @@ const PostBreadcrumbs$1 = /*@__PURE__*/ proxyCustomElement(class PostBreadcrumbs
         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$1 = /*@__PURE__*/ proxyCustomElement(class PostBreadcrumbs
     }
     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$1 = /*@__PURE__*/ proxyCustomElement(class PostBreadcrumbs
                     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$1 = /*@__PURE__*/ proxyCustomElement(class PostBreadcrumbs
         "isConcatenated": [32],
         "lastWindowWidth": [32]
     }, undefined, {
-        "homeUrl": ["validateUrl"]
+        "homeUrl": ["validateHomeUrl"],
+        "homeText": ["validateHomeText"]
     }]);
 function defineCustomElement$1() {
     if (typeof customElements === "undefined") {

package/loaders/post-card-control.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 { c as checkRequiredAndType, a as checkEmptyOrType, f as checkRequiredAndOneOf } from './index2.js';
 import './breakpoints.js';
 import { v as version } from './package.js';
 import { d as defineCustomElement$2 } from './post-icon2.js';
@@ -12,10 +11,10 @@ let cardControlIds = 0;
 const PostCardControl$1 = /*@__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$1 = /*@__PURE__*/ proxyCustomElement(class PostCardControl
         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$1 = /*@__PURE__*/ proxyCustomElement(class PostCardControl
         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$1 = /*@__PURE__*/ proxyCustomElement(class PostCardControl
         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$1 = /*@__PURE__*/ proxyCustomElement(class PostCardControl
     }
     componentDidLoad() {
         this.validateControlLabel();
+        this.validateControlName();
+        this.validateControlValue();
+        this.validateControlDescription();
         this.validateControlType();
+        this.validateControlIcon();
     }
     formAssociatedCallback() {
         this.controlSetChecked(this.checked);
@@ -254,7 +271,11 @@ const PostCardControl$1 = /*@__PURE__*/ proxyCustomElement(class PostCardControl
     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$1 = /*@__PURE__*/ proxyCustomElement(class PostCardControl
         "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"]
     }]);