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

package/dist/collection/components/post-megadropdown-trigger/post-megadropdown-trigger.js

@@ -21,8 +21,8 @@ export class PostMegadropdownTrigger {
      * Watch for changes to the `for` property to validate its type and ensure it is a string.
      * @param forValue - The new value of the `for` property.
      */
-    validateControlFor(forValue = this.for) {
-        checkType(forValue, 'string', 'The "for" property is required and should be a string.');
+    validateControlFor() {
+        checkType(this, 'for', 'string');
     }
     get megadropdown() {
         const ref = document.getElementById(this.for);
@@ -78,7 +78,7 @@ export class PostMegadropdownTrigger {
         }
     }
     render() {
-        return (h(Host, { key: '108c3703a2abb21bda4e907e3dfbbaf7a572ff0a', "data-version": version, "tab-index": "-1" }, h("button", { key: 'd7ab70fef0db1dcaa908fdc75b8d751e94d04bb9' }, h("slot", { key: 'c2c4c633794da7777849bc1e6380e98a4bf0f1b5' }))));
+        return (h(Host, { key: '99849b6b851d061c1365eb5d507cba0e7e6e3ae6', "data-version": version, "tab-index": "-1" }, h("button", { key: 'ddd553c4b893538155263e5bd82c763be68eb3f3' }, h("slot", { key: 'eb006c5b13c69a8e089702f1b46f88bc3d74b045' }))));
     }
     static get is() { return "post-megadropdown-trigger"; }
     static get originalStyleUrls() {

package/dist/collection/components/post-menu-trigger/post-menu-trigger.js

@@ -17,8 +17,8 @@ export class PostMenuTrigger {
      * Watch for changes to the `for` property to validate its type and ensure it is a string.
      * @param forValue - The new value of the `for` property.
      */
-    validateControlFor(forValue = this.for) {
-        checkType(forValue, 'string', 'The "for" property is required and should be a string.');
+    validateControlFor() {
+        checkType(this, 'for', 'string');
     }
     get menu() {
         const ref = this.root.getElementById(this.for);
@@ -73,7 +73,7 @@ export class PostMenuTrigger {
         }
     }
     render() {
-        return (h(Host, { key: '39bea077fd4d85f442b7b1d56969a203c470a269', "data-version": version, "tab-index": "-1" }, h("slot", { key: '9f7777a4167cdfbf9f1ab2dfe7c3d6e759c8a83b' })));
+        return (h(Host, { key: '84316d4a69c4231be636e5ff8971752d5af9bab2', "data-version": version, "tab-index": "-1" }, h("slot", { key: 'd3091adcf7033c4dd25e49fa383ccb9773b2d226' })));
     }
     static get is() { return "post-menu-trigger"; }
     static get originalStyleUrls() {

package/dist/collection/components/post-tab-header/post-tab-header.js

@@ -11,14 +11,14 @@ export class PostTabHeader {
         this.panel = undefined;
     }
     host;
-    validateFor(newValue) {
-        checkNonEmpty(newValue, 'The "panel" prop is required for the post-tab-header.');
+    validateFor() {
+        checkNonEmpty(this, 'panel');
     }
     componentWillLoad() {
         this.tabId = `tab-${this.host.id || nanoid(6)}`;
     }
     render() {
-        return (h(Host, { key: '79e7eed336d8867b9741efb96f80c1a3b1910a3f', id: this.tabId, role: "tab", "data-version": version, "aria-selected": "false", tabindex: "-1", class: "tab-title", slot: "tabs" }, h("slot", { key: '10f7977c4f26a41730d364c8e60b7a15b87bb45c' })));
+        return (h(Host, { key: '336824660de90bf5c570e9739947927a32612fbd', id: this.tabId, role: "tab", "data-version": version, "aria-selected": "false", tabindex: "-1", class: "tab-title", slot: "tabs" }, h("slot", { key: '8bfe0b57fa96044692e2db3fd983ccde427558e7' })));
     }
     static get is() { return "post-tab-header"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/post-togglebutton/post-togglebutton.js

@@ -9,8 +9,8 @@ export class PostTogglebutton {
         this.toggled = false;
     }
     host;
-    validateToggled(value = this.toggled) {
-        checkType(value, 'boolean', 'The "toggled" property of the post-togglebutton must be a boolean.');
+    validateToggled() {
+        checkType(this, 'toggled', 'boolean');
     }
     componentWillLoad() {
         this.validateToggled();
@@ -29,7 +29,7 @@ export class PostTogglebutton {
         }
     };
     render() {
-        return (h(Host, { key: 'b8488abcad38f815ff6ccaef358bebee904512cd', "data-version": version, role: "button", tabindex: "0", "aria-pressed": this.toggled.toString() }, h("slot", { key: '6bc5745dca9c408c241ca1993a5d75ff94d3b444' })));
+        return (h(Host, { key: '3a1429a9b67b8cfafae184fe0d060ee3a04974e0', "data-version": version, role: "button", tabindex: "0", "aria-pressed": this.toggled.toString() }, h("slot", { key: '9ab1537574423740fc335fde732c699698acac25' })));
     }
     static get is() { return "post-togglebutton"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/post-tooltip/post-tooltip.js

@@ -102,7 +102,7 @@ export class PostTooltip {
     wasOpenedByFocus = false;
     host;
     validateDelayed() {
-        checkEmptyOrType(this.delayed, 'boolean', 'The post-tooltip "delayed" property should be a boolean.');
+        checkEmptyOrType(this, 'delayed', 'boolean');
     }
     connectedCallback() {
         this.validateDelayed();
@@ -216,7 +216,7 @@ export class PostTooltip {
     }
     render() {
         const popoverClass = `${this.arrow ? ' has-arrow' : ''}`;
-        return (h(Host, { key: '170a2b1fe50a5080930fa2603a74ee310fd006dd', "data-version": version, role: "tooltip", onPointerOver: this.handleInterest, onPointerOut: this.handleInterestLost, onFocusIn: this.handleInterest, onFocusOut: this.handleInterestLost }, h("post-popovercontainer", { key: 'bd6658b278d53eff9bd93326bcadb467cbb318f4', class: popoverClass, arrow: this.arrow, placement: this.placement, ref: (el) => (this.popoverRef = el) }, h("slot", { key: 'b534b427a0511bc5971574b59e74d847a4b562a2' }))));
+        return (h(Host, { key: '89b0e64fd5fde4c21d9c1eb624facff38b287e4a', "data-version": version, role: "tooltip", onPointerOver: this.handleInterest, onPointerOut: this.handleInterestLost, onFocusIn: this.handleInterest, onFocusOut: this.handleInterestLost }, h("post-popovercontainer", { key: '8006874c12a2eebe39682a09db677e8b315dd6bb', class: popoverClass, arrow: this.arrow, placement: this.placement, ref: (el) => (this.popoverRef = el) }, h("slot", { key: 'cf3bd12703885fe886f1703038437b59a4d79fd3' }))));
     }
     static get is() { return "post-tooltip"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/utils/breakpoints.js

@@ -6,36 +6,37 @@ export class Breakpoint {
     };
     constructor() {
         if (!this.breakpointMap) {
-            const styles = getComputedStyle(document.documentElement);
-            const keys = styles.getPropertyValue('--post-breakpoint-keys').split(', ');
-            const names = styles.getPropertyValue('--post-breakpoint-names').split(', ');
-            this.breakpointMap = styles
-                .getPropertyValue('--post-breakpoint-widths')
-                .split(', ')
-                .map((width, i) => {
-                return {
-                    minWidth: Number(width),
-                    key: keys[i],
-                    name: names[i],
-                };
-            })
+            const keys = this.getStyles('--post-breakpoint-keys');
+            const names = this.getStyles('--post-breakpoint-names');
+            const widths = this.getStyles('--post-breakpoint-widths');
+            this.breakpointMap = widths
+                .map((width, i) => ({
+                minWidth: Number(width),
+                key: keys[i],
+                name: names[i],
+            }))
                 .reverse();
             window.addEventListener('resize', () => this.updateHandler(), { passive: true });
         }
     }
+    getStyles(propertyName) {
+        const styles = getComputedStyle(document.documentElement);
+        return (styles
+            .getPropertyValue(propertyName)
+            ?.split(',')
+            .map(w => w.trim()) ?? []);
+    }
     updateHandler(emitEvents = true) {
         const calculated = this.breakpointMap.find(({ minWidth }) => innerWidth >= minWidth);
         if (this.current.key !== calculated.key) {
             this.current.key = calculated.key;
-            if (emitEvents) {
+            if (emitEvents)
                 this.dispatchEvent('key');
-            }
         }
         if (this.current.name !== calculated.name) {
             this.current.name = calculated.name;
-            if (emitEvents) {
+            if (emitEvents)
                 this.dispatchEvent('name');
-            }
         }
     }
     dispatchEvent(type) {

package/dist/collection/utils/property-checkers/check-non-empty.js

@@ -1,6 +1,10 @@
 import { EMPTY_VALUES } from "./constants";
-export function checkNonEmpty(value, error) {
+export function checkNonEmpty(component, prop, customMessage) {
+    const componentName = component.host.localName;
+    const value = component[prop];
+    const defaultMessage = `The prop \`${String(prop)}\` of the \`${componentName}\` component is required.`;
+    const message = customMessage || defaultMessage;
     if (EMPTY_VALUES.some(v => v === value)) {
-        throw new Error(error);
+        throw new Error(message);
     }
 }

package/dist/collection/utils/property-checkers/check-one-of.js

@@ -1,5 +1,9 @@
-export function checkOneOf(value, possibleValues, error) {
+export function checkOneOf(component, prop, possibleValues, customMessage) {
+    const componentName = component.host.localName;
+    const value = component[prop];
+    const defaultMessage = `The prop \`${String(prop)}\` of the \`${componentName}\` component must be one of the following values: ${possibleValues.join(', ')}.`;
+    const message = customMessage || defaultMessage;
     if (!possibleValues.includes(value)) {
-        throw new Error(error);
+        throw new Error(message);
     }
 }

package/dist/collection/utils/property-checkers/check-pattern.js

@@ -1,5 +1,9 @@
-export function checkPattern(value, pattern, errorMessage) {
+export function checkPattern(component, prop, pattern, customMessage) {
+    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;
     if (typeof value !== 'string' || !pattern.test(value)) {
-        throw new Error(errorMessage);
+        throw new Error(message);
     }
 }

package/dist/collection/utils/property-checkers/check-type.js

@@ -1,12 +1,17 @@
-export function checkType(value, type, error) {
+export function checkType(component, prop, type, customMessage) {
+    const componentName = component.host.localName;
+    const value = component[prop];
     const typeIsArray = type === 'array';
     const valueIsArray = Array.isArray(value);
+    const defaultMessage = `The prop \`${String(prop)}\` of the \`${componentName}\` component must be of type \`
+    ${type}\`.`;
+    const message = customMessage || defaultMessage;
     if (typeIsArray || valueIsArray) {
         if (valueIsArray !== typeIsArray) {
-            throw new Error(error);
+            throw new Error(message);
         }
     }
     else if (typeof value !== type) {
-        throw new Error(error);
+        throw new Error(message);
     }
 }

package/dist/collection/utils/property-checkers/check-url.js

@@ -1,11 +1,15 @@
-export function checkUrl(value, error) {
+export function checkUrl(component, prop, customMessage) {
+    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;
     if (typeof value !== 'string' && !(value instanceof URL)) {
-        throw new Error(error);
+        throw new Error(message);
     }
     try {
         new URL(value, 'https://www.post.ch');
     }
     catch {
-        throw new Error(error);
+        throw new Error(message);
     }
 }

package/dist/collection/utils/property-checkers/empty-or.js

@@ -1,7 +1,9 @@
 import { EMPTY_VALUES } from "./constants";
 export function emptyOr(check) {
     return (...args) => {
-        const value = args[0];
+        const component = args[0];
+        const prop = args[1];
+        const value = component[prop];
         if (!EMPTY_VALUES.some(v => v === value)) {
             check(...args);
         }

package/dist/components/check-non-empty.js

@@ -1,8 +1,12 @@
 import { E as EMPTY_VALUES } from './constants.js';
 
-function checkNonEmpty(value, error) {
+function checkNonEmpty(component, prop, customMessage) {
+    const componentName = component.host.localName;
+    const value = component[prop];
+    const defaultMessage = `The prop \`${String(prop)}\` of the \`${componentName}\` component is required.`;
+    const message = customMessage || defaultMessage;
     if (EMPTY_VALUES.some(v => v === value)) {
-        throw new Error(error);
+        throw new Error(message);
     }
 }
 

package/dist/components/check-one-of.js

@@ -1,6 +1,10 @@
-function checkOneOf(value, possibleValues, error) {
+function checkOneOf(component, prop, possibleValues, customMessage) {
+    const componentName = component.host.localName;
+    const value = component[prop];
+    const defaultMessage = `The prop \`${String(prop)}\` of the \`${componentName}\` component must be one of the following values: ${possibleValues.join(', ')}.`;
+    const message = customMessage || defaultMessage;
     if (!possibleValues.includes(value)) {
-        throw new Error(error);
+        throw new Error(message);
     }
 }
 

package/dist/components/check-type.js

@@ -1,13 +1,18 @@
-function checkType(value, type, error) {
+function checkType(component, prop, type, customMessage) {
+    const componentName = component.host.localName;
+    const value = component[prop];
     const typeIsArray = type === 'array';
     const valueIsArray = Array.isArray(value);
+    const defaultMessage = `The prop \`${String(prop)}\` of the \`${componentName}\` component must be of type \`
+    ${type}\`.`;
+    const message = customMessage || defaultMessage;
     if (typeIsArray || valueIsArray) {
         if (valueIsArray !== typeIsArray) {
-            throw new Error(error);
+            throw new Error(message);
         }
     }
     else if (typeof value !== type) {
-        throw new Error(error);
+        throw new Error(message);
     }
 }
 

package/dist/components/index2.js

@@ -4,28 +4,38 @@ import { c as checkType } from './check-type.js';
 
 function emptyOr(check) {
     return (...args) => {
-        const value = args[0];
+        const component = args[0];
+        const prop = args[1];
+        const value = component[prop];
         if (!EMPTY_VALUES.some(v => v === value)) {
             check(...args);
         }
     };
 }
 
-function checkPattern(value, pattern, errorMessage) {
+function checkPattern(component, prop, pattern, customMessage) {
+    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;
     if (typeof value !== 'string' || !pattern.test(value)) {
-        throw new Error(errorMessage);
+        throw new Error(message);
     }
 }
 
-function checkUrl(value, error) {
+function checkUrl(component, prop, customMessage) {
+    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;
     if (typeof value !== 'string' && !(value instanceof URL)) {
-        throw new Error(error);
+        throw new Error(message);
     }
     try {
         new URL(value, 'https://www.post.ch');
     }
     catch {
-        throw new Error(error);
+        throw new Error(message);
     }
 }
 

package/dist/components/package.js

@@ -1,3 +1,3 @@
-const version = "9.0.0-next.19";
+const version = "9.0.0-next.21";
 
 export { version as v };

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

@@ -22,8 +22,8 @@ const PostAccordionItem = /*@__PURE__*/ proxyCustomElement(class PostAccordionIt
     }
     collapsible;
     get host() { return this; }
-    validateHeadingLevel(newValue = this.headingLevel) {
-        checkEmptyOrOneOf(newValue, HEADING_LEVELS, 'The `heading-level` property of the `post-accordion-item` must be a number between 1 and 6.');
+    validateHeadingLevel() {
+        checkEmptyOrOneOf(this, 'headingLevel', HEADING_LEVELS, 'The `heading-level` property of the `post-accordion-item` must be a number between 1 and 6.');
     }
     componentWillLoad() {
         this.id = this.host.id || `p${nanoid(6)}`;
@@ -53,10 +53,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: 'f1275370d7aff41e1fc60285395af35a1ecc90e7', id: this.id, "data-version": version }, h("div", { key: 'd74f762805143939a891e40cfa7a4779ea29921d', part: "accordion-item", class: "accordion-item" }, h("post-collapsible-trigger", { key: '5ddad810d8b1f8564bdaaf2b09e9e89eee96e007', for: `${this.id}--collapse` }, h(HeadingTag, { key: 'fc6dc947d426bb31de04e83d8c9795a0c826733c', class: "accordion-header", id: `${this.id}--header` }, h("button", { key: 'bd8005bb87e8e00fee57794bd73c5f06cb642a3d', type: "button", class: `accordion-button${this.collapsed ? ' collapsed' : ''}`, part: "button" }, h("span", { key: '89eb0b80e63867e2dcd6b27d95c6519d1e86b10d', class: {
+        return (h(Host, { key: '4c4baf7ac22c632de6b0bc332ffc275e50bb4d71', id: this.id, "data-version": version }, h("div", { key: '576529323c3adca347ec685688c071e21a2f3a76', part: "accordion-item", class: "accordion-item" }, h("post-collapsible-trigger", { key: 'cc29c396173e55168a3bec963d5e101cb3fb17b2', for: `${this.id}--collapse` }, h(HeadingTag, { key: '76f8eed33f0c84bf6e1a534b04a8ccc0c69c6380', class: "accordion-header", id: `${this.id}--header` }, h("button", { key: 'f56e67ffc94fea0452d1879d3410318b3b12c4bc', type: "button", class: `accordion-button${this.collapsed ? ' collapsed' : ''}`, part: "button" }, h("span", { key: 'd5f23318d5c498e0cd9dd1f15c13a636e49b7817', class: {
                 'logo-container': true,
                 'has-image': !!this.slottedLogo,
-            } }, h("slot", { key: '0940530a15ce04b50af007db7f1530ae3c6a456d', name: "logo", onSlotchange: this.onSlotLogoChange.bind(this) })), h("slot", { key: 'f06a6b067727be0667b4ea9384e75ee8aa435bfc', name: "header" }), h("post-icon", { key: '460b2c22083cc3049e0c83fc690cb44e3f984db7', name: "2051" })))), h("post-collapsible", { key: '2411f1f93d136ae0bfcbf0da9bb2902d7da0e2a0', id: `${this.id}--collapse`, collapsed: this.collapsed, ref: el => (this.collapsible = el) }, h("div", { key: 'e648a76e35c28bc1aa5cc57233bf6e8277532294', class: "accordion-body", part: "body" }, h("slot", { key: '7841fff45f2132990d8f1577dfe7d3707d1eb46c' }))))));
+            } }, h("slot", { key: '051d48cc4201e2d954f4d4bc25c836ddc8e24d0f', name: "logo", onSlotchange: this.onSlotLogoChange.bind(this) })), h("slot", { key: 'e9f687c79fab8bd3bd94e4da022b2aea7e0bba5c', name: "header" }), h("post-icon", { key: 'c1f3486254269ab50a89bd6acf8c714cbbced3b8', name: "2051" })))), h("post-collapsible", { key: '7f3788a90e59cdb4f985fd14c64286cb938a3c23', id: `${this.id}--collapse`, collapsed: this.collapsed, ref: el => (this.collapsible = el) }, h("div", { key: 'e17ae656614ac27d4f09ebba0a7bb547f88f5728', class: "accordion-body", part: "body" }, h("slot", { key: '0387ebe5ce518bbb8b78c66d919715a78b5ae558' }))))));
     }
     static get watchers() { return {
         "headingLevel": ["validateHeadingLevel"]

package/dist/components/post-accordion2.js

@@ -20,7 +20,7 @@ const PostAccordion = /*@__PURE__*/ proxyCustomElement(class PostAccordion exten
     validateHeadingLevel(newValue = this.headingLevel) {
         if (!newValue)
             return;
-        checkOneOf(newValue, HEADING_LEVELS, 'The `heading-level` property of the `post-accordion` must be a number between 1 and 6.');
+        checkOneOf(this, 'headingLevel', HEADING_LEVELS, 'The `heading-level` property of the `post-accordion` must be a number between 1 and 6.');
         this.accordionItems.forEach(item => {
             item.setAttribute('heading-level', String(newValue));
         });
@@ -96,7 +96,7 @@ const PostAccordion = /*@__PURE__*/ proxyCustomElement(class PostAccordion exten
         });
     }
     render() {
-        return (h(Host, { key: '8c3ff1ccd37541dd906f9f7dddfdad241f9a29ee', "data-version": version }, h("div", { key: '331a8c56a9b2e4497cf6b7e7a7c80f6eb500bf7f', class: "accordion" }, h("slot", { key: 'a59cab01203187c5ed9b0766f5181aef8e1baf63', onSlotchange: () => this.registerAccordionItems() }))));
+        return (h(Host, { key: '9ec8ca1ceac6587be68272568f216c958460ac0a', "data-version": version }, h("div", { key: '99887626d105f0e8f86b24e211591e7be820738d', class: "accordion" }, h("slot", { key: '4d8a003377c3a90648818a00144fd5f3a65be084', onSlotchange: () => this.registerAccordionItems() }))));
     }
     static get watchers() { return {
         "headingLevel": ["validateHeadingLevel"]

package/dist/components/post-avatar2.js

@@ -35,7 +35,7 @@ const PostAvatar = /*@__PURE__*/ proxyCustomElement(class PostAvatar extends HTM
     static INTERNAL_USERID_IMAGE_SRC = 'https://web.post.ch/UserProfileImage/{userid}.png';
     get host() { return this; }
     validateFirstname() {
-        checkNonEmpty(this.firstname, 'The `firstname` property of the `post-avatar` is required!');
+        checkNonEmpty(this, 'firstname');
     }
     async getAvatar() {
         if (this.slottedImage !== null) {

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

@@ -16,7 +16,7 @@ const PostBackToTop = /*@__PURE__*/ proxyCustomElement(class PostBackToTop exten
         this.label = undefined;
         this.belowFold = false;
     }
-    get el() { return this; }
+    get host() { return this; }
     translateY;
     isBelowFold() {
         return window.scrollY > window.innerHeight;
@@ -27,10 +27,10 @@ const PostBackToTop = /*@__PURE__*/ proxyCustomElement(class PostBackToTop exten
     // Watch for changes in belowFold
     watchBelowFold(newValue) {
         if (newValue) {
-            slideUp(this.el, this.translateY);
+            slideUp(this.host, this.translateY);
         }
         else {
-            slideDown(this.el, this.translateY);
+            slideDown(this.host, this.translateY);
         }
     }
     scrollToTop() {
@@ -40,8 +40,8 @@ const PostBackToTop = /*@__PURE__*/ proxyCustomElement(class PostBackToTop exten
     }
     // Validate the label
     validateLabel() {
-        checkType(this.label, 'string', 'The label property of the Back to Top component is required for accessibility purposes. Please ensure it is set.');
-        checkNonEmpty(this.label, 'The label property of the Back to Top component must not be empty. Please provide a proper text for the label');
+        checkType(this, 'label', 'string');
+        checkNonEmpty(this, 'label');
     }
     // Set the initial state
     componentWillLoad() {
@@ -50,14 +50,14 @@ const PostBackToTop = /*@__PURE__*/ proxyCustomElement(class PostBackToTop exten
     componentDidLoad() {
         window.addEventListener('scroll', this.handleScroll, false);
         this.translateY = window
-            .getComputedStyle(this.el)
+            .getComputedStyle(this.host)
             .getPropertyValue('--post-floating-button-translate-y');
         if (!this.belowFold) {
-            this.el.style.transform = `translateY(${this.translateY})`;
+            this.host.style.transform = `translateY(${this.translateY})`;
         }
         // Initial load
         if (this.belowFold) {
-            slideUp(this.el, this.translateY);
+            slideUp(this.host, this.translateY);
         }
         this.validateLabel();
     }
@@ -65,7 +65,7 @@ const PostBackToTop = /*@__PURE__*/ proxyCustomElement(class PostBackToTop exten
         window.removeEventListener('scroll', this.handleScroll);
     }
     render() {
-        return (h(Host, { key: 'c718f2e4cd8ee679cabf72cba7a493770fab2585', "data-version": version }, h("button", { key: '9573fafeb9f4a81b82331f82d42caede5bc8d625', class: "back-to-top", "aria-hidden": this.belowFold ? 'false' : 'true', tabindex: this.belowFold ? '0' : '-1', onClick: this.scrollToTop }, h("post-icon", { key: '7041105b5bb9dbea36999699c9d77d5eca272984', "aria-hidden": "true", name: "3026" }), h("span", { key: 'e8ad9cc2b468d304b01221da24e870b90701cb92', class: "visually-hidden" }, this.label))));
+        return (h(Host, { key: '4d8c4e05ebcdd088c924ac0329b2238eb1d3c6ca', "data-version": version }, h("button", { key: 'fc37aff8558d7eb4b27a870f11133fc6984f4e11', class: "back-to-top", "aria-hidden": this.belowFold ? 'false' : 'true', tabindex: this.belowFold ? '0' : '-1', onClick: this.scrollToTop }, h("post-icon", { key: '4b978c44982ec0b02798ce75766b2acdd8497412', "aria-hidden": "true", name: "3026" }), h("span", { key: '4a899be348a6c8721696c634970773cd77f685d9', class: "visually-hidden" }, this.label))));
     }
     static get watchers() { return {
         "belowFold": ["watchBelowFold"],

package/dist/components/post-banner2.js

@@ -29,20 +29,20 @@ const PostBanner = /*@__PURE__*/ proxyCustomElement(class PostBanner extends HTM
         this.type = 'neutral';
     }
     get host() { return this; }
-    validateDismissible(isDismissible = this.dismissible) {
-        checkType(isDismissible, 'boolean', 'The post-banner "dismissible" prop should be a boolean.');
+    validateDismissible() {
+        checkType(this, 'dismissible', 'boolean');
         setTimeout(() => this.validateDismissLabel());
     }
-    validateDismissLabel(dismissLabel = this.dismissLabel) {
+    validateDismissLabel() {
         if (this.dismissible) {
-            checkNonEmpty(dismissLabel, 'Dismissible post-banner\'s require a "dismiss-label" prop.');
+            checkNonEmpty(this, 'dismissLabel', 'Dismissible post-banner\'s require a "dismiss-label" prop.');
         }
     }
-    validateIcon(icon = this.icon) {
-        checkEmptyOrPattern(icon, /\d{4}|none/, 'The post-banner "icon" prop should be a 4-digits string.');
+    validateIcon() {
+        checkEmptyOrPattern(this, 'icon', /\d{4}|none/, 'The post-banner "icon" prop should be a 4-digit string.');
     }
-    validateType(type = this.type) {
-        checkEmptyOrOneOf(type, BANNER_TYPES, `The post-banner requires a type form: ${BANNER_TYPES.join(', ')}`);
+    validateType() {
+        checkEmptyOrOneOf(this, 'type', BANNER_TYPES);
     }
     /**
      * An event emitted when the banner element is dismissed, after the transition.
@@ -76,14 +76,14 @@ 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: '9886e598c972c8c77c1d25a385edb0c604b47b44', name: "heading" }))),
+            this.hasHeading && (h("div", { key: `${this.bannerId}-heading`, class: "banner-heading" }, h("slot", { key: 'd4b29e3591f026b880c4b859a47bcbc3e3b11ced', 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: '0463b479e1f6e9f2c287a06109bc9037de4de2e1', name: "actions" })),
+            h("div", { key: `${this.bannerId}-buttons`, class: "banner-buttons" }, h("slot", { key: '2f1461a2374d736cb3b72641aa150bc611082f56', name: "actions" })),
         ];
-        return (h(Host, { key: '43b3385f47d4f7dcd0a150656a79258d045d41ad', "data-version": version }, h("div", { key: 'edb9c07973a4d8b1c0a9efe7f95e9fcf5bcb4b59', role: "alert", class: this.classes, part: this.classes }, this.dismissible && (h("button", { key: '537ee712114b5095e20e30cd5681fd287da0bd5d', class: "btn-close", onClick: this.onDismissButtonClick }, h("span", { key: 'a13b1b71e64c7e732487035f2d175c5a041538c0', 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: '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)));
     }
     static get watchers() { return {
         "dismissible": ["validateDismissible"],

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

@@ -12,6 +12,7 @@ const PostBreadcrumbItem = /*@__PURE__*/ proxyCustomElement(class PostBreadcrumb
         this.__registerHost();
         this.__attachShadow();
         this.url = undefined;
+        this.fullUrl = undefined;
     }
     get host() { return this; }
     validUrl;
@@ -27,11 +28,9 @@ const PostBreadcrumbItem = /*@__PURE__*/ proxyCustomElement(class PostBreadcrumb
     constructUrl(value) {
         const hasBaseURL = /^https?:\/\//.test(String(this.url));
         if (typeof value === 'string') {
-            const urlString = hasBaseURL
-                ? value
-                : `${window.location.origin}${value}`;
-            checkEmptyOrUrl(urlString, 'The "url" property of the post-breadcrumb-item is invalid');
-            return urlString;
+            this.fullUrl = hasBaseURL ? value : `${window.location.origin}${value}`;
+            checkEmptyOrUrl(this, 'fullUrl');
+            return this.fullUrl;
         }
         return undefined;
     }
@@ -49,14 +48,15 @@ const PostBreadcrumbItem = /*@__PURE__*/ proxyCustomElement(class PostBreadcrumb
     }
     render() {
         const BreadcrumbTag = this.validUrl ? 'a' : 'span';
-        return (h(Host, { key: 'ddd9e35e632f29c7854e03ee989527203b65b153', "data-version": version }, h("post-icon", { key: '713d822e2f32b6f7dfec594f9787c190664fb8d6', name: "2111", class: "breadcrumb-item-icon" }), h(BreadcrumbTag, { key: '80f211d04535691993caa52b1ee97eb71f7fdbc4', class: "breadcrumb-item", ...(this.validUrl ? { href: this.validUrl } : {}), onKeyDown: (event) => this.handleKeyDown(event) }, h("slot", { key: '850f1212db8da0d356b8e3d10ba95cf2b49e896c' }))));
+        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' }))));
     }
     static get watchers() { return {
         "url": ["validateUrl"]
     }; }
     static get style() { return PostBreadcrumbItemStyle0; }
 }, [1, "post-breadcrumb-item", {
-        "url": [1]
+        "url": [1],
+        "fullUrl": [32]
     }, undefined, {
         "url": ["validateUrl"]
     }]);

package/dist/components/post-breadcrumb2.js

@@ -27,7 +27,7 @@ const PostBreadcrumb = /*@__PURE__*/ proxyCustomElement(class PostBreadcrumb ext
     breadcrumbNavRef;
     lastItem;
     validateUrl() {
-        checkUrl(this.homeUrl, 'The "url" property of the home-icon is invalid');
+        checkUrl(this, 'homeUrl');
     }
     componentWillLoad() {
         this.updateBreadcrumbItems();
@@ -50,7 +50,7 @@ const PostBreadcrumb = /*@__PURE__*/ proxyCustomElement(class PostBreadcrumb ext
     }, 50);
     // Updates breadcrumb items and sets the last item
     updateBreadcrumbItems() {
-        this.breadcrumbItems = Array.from(this.host.querySelectorAll('post-breadcrumb-item')).map((item) => ({
+        this.breadcrumbItems = Array.from(this.host.querySelectorAll('post-breadcrumb-item')).map(item => ({
             text: item.textContent || '',
             url: item.getAttribute('url') || '',
         }));
@@ -96,18 +96,18 @@ const PostBreadcrumb = /*@__PURE__*/ proxyCustomElement(class PostBreadcrumb ext
     }
     render() {
         const visibleItems = this.breadcrumbItems.slice(0, -1);
-        return (h(Host, { key: 'd24a602e1c84ec7227c44a02ac0bebcfe0358b89', "data-version": version }, h("nav", { key: '7ba77ead7ee58f141da4b3e38b11372312ddccf0', "aria-label": "Breadcrumb", class: "breadcrumbs-nav", ref: (el) => (this.breadcrumbNavRef = el) }, h("ol", { key: '210f747196e7450c25f088b258868adc4809e587', class: "no-list breadcrumbs-list" }, h("li", { key: '66627682df3f2a9879d037c1f1f0ed3633267590' }, h("a", { key: 'eb3f05c7badfb40f91aa8d961b4a3cca15946c6e', href: this.homeUrl, class: "breadcrumb-link" }, h("span", { key: 'd4295523999fe7b0192d7d110e84f939b93be1a9', class: "visually-hidden" }, this.homeText), h("post-icon", { key: 'd77ed3f3b22acefd7675dbe94023a9763e7afac9', name: "home", class: "home-icon" }))), this.isConcatenated ? (h("div", { class: "menu-trigger-wrapper", "aria-label": "More breadcrumbs", onKeyDown: (e) => {
+        return (h(Host, { key: 'd2fd5b6f8319124fa17649c8c5e479e727fc069a', "data-version": version }, h("nav", { key: 'a5f9b38fa054ad46d8972c28d175f864bed3c365', "aria-label": "Breadcrumb", class: "breadcrumbs-nav", ref: el => (this.breadcrumbNavRef = el) }, h("ol", { key: 'ac7ca9a80315ce6ba70e1aaaae6202fbb1a6933e', class: "no-list breadcrumbs-list" }, h("li", { key: '9927b293673f16bbe837419baf7d4a8f97885bc0' }, h("a", { key: '2b2de9924472a3da00f843c7b569358b60d43539', href: this.homeUrl, class: "breadcrumb-link" }, h("span", { key: '540a16d9673e9c423493597468a3db00b7d75cef', class: "visually-hidden" }, this.homeText), h("post-icon", { key: '73fad27cd72f18bb5ea281c88ff2c184d7d8187d', 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();
                 }
-            } }, h("post-icon", { name: "2111", class: "breadcrumb-item-icon" }), h("div", { class: "actual-menu" }, h("post-menu-trigger", { for: "breadcrumb-menu", tabIndex: 0 }, h("button", { class: "btn test", tabIndex: -1 }, "...")), h("post-menu", { id: "breadcrumb-menu" }, visibleItems.map((item) => (h("post-menu-item", { key: item.url || item.text, class: "breadcrumb-item", onKeyDown: (e) => {
+            } }, h("post-icon", { name: "2111", class: "breadcrumb-item-icon" }), h("div", { class: "actual-menu" }, h("post-menu-trigger", { for: "breadcrumb-menu", tabIndex: 0 }, h("button", { class: "btn test", tabIndex: -1 }, "...")), h("post-menu", { id: "breadcrumb-menu" }, visibleItems.map(item => (h("post-menu-item", { key: item.url || item.text, class: "breadcrumb-item", onKeyDown: e => {
                 if (e.key === 'Enter' || e.key === ' ') {
                     const linkElement = e.currentTarget.querySelector('a');
                     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: '602d2071f6077fa61782f87970c8e8756ad8c20d', url: this.lastItem.url, "aria-current": "page", tabindex: -1 }, this.lastItem.text))), h("div", { key: 'e00662dad1d308e9791140acd85dbe34084adf34', class: "hidden-items" }, h("a", { key: '8d71359ec18220eaa83095750a1e0fb82e716238', href: this.homeUrl, class: "hidden-breadcrumb-item" }, h("span", { key: 'c5231a0e4d392627bbc8df44016bd8336438a1fd', class: "visually-hidden" }, this.homeText), h("post-icon", { key: '449f27766fb18df99f70cba07de7d5e861a25da6', 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: '31d86d933720b5f6f6928ccfd251443261e9479e', url: this.lastItem.url, "aria-current": "page", tabindex: -1 }, this.lastItem.text))), h("div", { key: '3248d32aa6a73c97c3071be85174fb8634d4e722', class: "hidden-items" }, h("a", { key: '05b0231d3a5793588aa9ede628a7b1e6d2e2faf0', href: this.homeUrl, class: "hidden-breadcrumb-item" }, h("span", { key: '15a63a894124717cfb2be61779c3971772c38397', class: "visually-hidden" }, this.homeText), h("post-icon", { key: '6c893c56b6a34f311fa66d71c4cb523b00535458', 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)))))));
     }
     static get watchers() { return {
         "homeUrl": ["validateUrl"]