@swisspost/design-system-components 10.0.0-next.70 → 10.0.0-next.72

package/dist/cjs/post-tabs.cjs.entry.js

@@ -1,35 +1,26 @@
 'use strict';
 
-var index = require('./index-DPdHkdGf.js');
-var _package = require('./package-Ds_LS1pB.js');
+var index = require('./index-ngUOBQot.js');
 var fade = require('./fade-CPQhl1fP.js');
-var index$1 = require('./index-qCzRmwgB.js');
-require('./index-YBj3gUJp.js');
+require('./breakpoints-B0Olgvgc.js');
+var componentOnReady = require('./component-on-ready-CifOTqw1.js');
+var _package = require('./package-Bi-tiNRc.js');
+var type = require('./type-shT641Eo.js');
 require('./utils-s05L2ulk.js');
-
-/**
- * Invoke the `componentOnReady` method if it is available, simulate it otherwise
- * @see https://stenciljs.com/docs/api#componentonready
- */
-function componentOnReady(el) {
-    if (typeof el.componentOnReady === 'function') {
-        return el.componentOnReady();
-    }
-    else {
-        return new Promise(resolve => customOnReady(() => {
-            resolve(el);
-        }));
-    }
-}
-function customOnReady(callback) {
-    if (typeof requestAnimationFrame === 'function') {
-        return requestAnimationFrame(callback);
-    }
-    return setTimeout(callback);
-}
+require('./create-validator-decorator-Bnx17kwi.js');
 
 const postTabsCss = () => `.tabs-wrapper{position:relative;padding-top:1rem;border:0;background-color:rgba(0,0,0,.02)}.tabs-wrapper::after{content:"";position:absolute;bottom:0;width:100%;height:1px;background-color:#ccc}.tabs-wrapper .tabs{background-color:rgba(0,0,0,0) !important}@media (forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.tabs-wrapper::after{background-color:ButtonBorder}}.tabs{display:flex;flex-wrap:nowrap;overflow-x:auto;overscroll-behavior-x:contain;white-space:nowrap;margin-block:0;padding-inline-start:0;list-style:none}.tabs::after{content:"";display:block;flex:1 0 auto;width:1rem}.tab-content{padding-top:1rem}:host{display:block}:host([full-width=true]) .tabs-wrapper{margin-inline:calc(-1*var(--post-container-offset))}:host([full-width=true]) .tabs-wrapper .tabs{padding-inline:var(--post-container-offset)}`;
 
+var __decorate = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function")
+        r = Reflect.decorate(decorators, target, key, desc);
+    else
+        for (var i = decorators.length - 1; i >= 0; i--)
+            if (d = decorators[i])
+                r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
 const PostTabs = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
@@ -50,8 +41,8 @@ const PostTabs = class {
         return Array.from(this.host.querySelectorAll('post-tab-panel')).filter(panel => panel.closest('post-tabs') === this.host);
     }
     validateLabel() {
-        if (this.isNavigationMode) {
-            index$1.checkRequiredAndType(this, 'label', 'string');
+        if (this.isNavigationMode && !this.label) {
+            console.error(`[${this.host.localName}] Property "label" is required in navigation mode. Received: ${JSON.stringify(this.label)}.`, this.host);
         }
     }
     componentWillRender() {
@@ -225,7 +216,7 @@ const PostTabs = class {
         if (!this.tabs)
             return;
         this.tabs.forEach(async (tab) => {
-            await componentOnReady(tab);
+            await componentOnReady.componentOnReady(tab);
             // In navigation mode, navigation is handled by the consumer's routing
             if (this.isNavigationMode) {
                 return;
@@ -315,10 +306,10 @@ const PostTabs = class {
     }
     render() {
         const TabsContainer = this.isNavigationMode ? 'nav' : 'div';
-        return (index.h(index.Host, { key: '4eb78778cb1a98e78714b5b8d69d15eaa68170c6', "data-version": _package.version }, index.h("div", { key: '203c1529d44e676d40dd4f87593bcce07901079f', class: "tabs-wrapper", part: "post-tabs" }, index.h(TabsContainer, { key: '70f132a96d11fdcc0f0e9bab5053cc3a188b5b04', class: "tabs", role: this.isNavigationMode ? undefined : 'tablist', "aria-label": this.isNavigationMode ? this.label : undefined }, index.h("slot", { key: '24e2b06bf1b884d83d6c915d4c54029856f2a0ec', onSlotchange: () => {
+        return (index.h(index.Host, { key: '3b674ed455e34a7efc1c1ffed14ac719a7ecb061', "data-version": _package.version }, index.h("div", { key: '749f4695adc7c3125bfb678606249c48a4d7ea31', class: "tabs-wrapper", part: "post-tabs" }, index.h(TabsContainer, { key: 'c06c83dbcbdf9f3fd38f01db7beae181748b369d', class: "tabs", role: this.isNavigationMode ? undefined : 'tablist', "aria-label": this.isNavigationMode ? this.label : undefined }, index.h("slot", { key: 'b065d0200fb2d4b6a63e23141d3e625a4147a93d', onSlotchange: () => {
                 this.moveMisplacedTabs();
                 this.enableTabs();
-            } }))), !this.isNavigationMode && (index.h("div", { key: 'bd6530a08d31258fa028761f44f0db4dc12541ec', class: "tab-content", part: "post-tabs-content" }, index.h("slot", { key: 'df50010f2b6cfbd77bc435bedbff1677415869e5', name: "panels", onSlotchange: () => this.moveMisplacedPanels() })))));
+            } }))), !this.isNavigationMode && (index.h("div", { key: '8dc41274f8c9da24b2d65eebf213ea35c41368d0', class: "tab-content", part: "post-tabs-content" }, index.h("slot", { key: 'e859256ebcb60fc0457349ca991508406b3bc309', name: "panels", onSlotchange: () => this.moveMisplacedPanels() })))));
     }
     get host() { return index.getElement(this); }
     static get watchers() { return {
@@ -327,6 +318,9 @@ const PostTabs = class {
             }]
     }; }
 };
+__decorate([
+    type.Type('string')
+], PostTabs.prototype, "label", void 0);
 PostTabs.style = postTabsCss();
 
 exports.post_tabs = PostTabs;

package/dist/cjs/post-tooltip-trigger.cjs.entry.js

@@ -1,20 +1,26 @@
 'use strict';
 
-var index = require('./index-DPdHkdGf.js');
-var index$1 = require('./index-qCzRmwgB.js');
-require('./index-YBj3gUJp.js');
-var _package = require('./package-Ds_LS1pB.js');
-var focusable = require('./focusable-ZqET_zrB.js');
-require('./_commonjsHelpers-BJu3ubxk.js');
+var index = require('./index-ngUOBQot.js');
+require('./breakpoints-B0Olgvgc.js');
+var _package = require('./package-Bi-tiNRc.js');
+var required = require('./required-lRDOdbd6.js');
+var type = require('./type-shT641Eo.js');
+require('./create-validator-decorator-Bnx17kwi.js');
 
 const postTooltipTriggerCss = () => `post-tooltip-trigger{vertical-align:top}:host{cursor:pointer}`;
 
+var __decorate = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function")
+        r = Reflect.decorate(decorators, target, key, desc);
+    else
+        for (var i = decorators.length - 1; i >= 0; i--)
+            if (d = decorators[i])
+                r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
 const TRIGGER_EVENTS = ['pointerenter', 'pointerleave', 'focusin', 'focusout', 'long-press'];
-{
-    (async () => {
-        await Promise.resolve().then(function () { return require('./long-press-event-Dx21Ojod.js'); });
-    })();
-}
+let isFocusable;
 const PostTooltipTrigger = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
@@ -33,13 +39,21 @@ const PostTooltipTrigger = class {
         this.boundTriggerHandler = this.handleTriggerEvent.bind(this);
         this.boundTooltipHandler = this.handleTooltipEvent.bind(this);
     }
-    validateControlFor() {
-        index$1.checkEmptyOrType(this, 'for', 'string');
-    }
     get tooltip() {
         const ref = document.getElementById(this.for);
         return ref?.localName === 'post-tooltip' ? ref : null;
     }
+    componentWillLoad() {
+        {
+            // Fire-and-forget: long-press-event registers a global event listener on import.
+            Promise.resolve().then(function () { return require('./long-press-event-Dx21Ojod.js'); });
+            // Load ally.js lazily; setupTrigger uses optional chaining to handle the
+            // case where it hasn't loaded yet (falls back to adding tabindex="0").
+            Promise.resolve().then(function () { return require('./focusable-COT2uiEV.js'); }).then(function (n) { return n.focusable; }).then(m => {
+                isFocusable ?? (isFocusable = m.default);
+            });
+        }
+    }
     componentDidLoad() {
         this.setupTrigger();
         this.attachListeners();
@@ -79,7 +93,7 @@ const PostTooltipTrigger = class {
     setupTrigger() {
         this.trigger = this.host.querySelector('*');
         if (this.trigger) {
-            if (!focusable.isFocusable(this.trigger)) {
+            if (!isFocusable?.(this.trigger)) {
                 this.trigger.setAttribute('tabindex', '0');
             }
             const describedBy = this.trigger.getAttribute('aria-describedby') || '';
@@ -172,15 +186,14 @@ const PostTooltipTrigger = class {
         this.tooltip?.hide();
     }
     render() {
-        return (index.h(index.Host, { key: '7121e61cb791f41af5f41b5e2586b0a0399a4e05', "data-version": _package.version }, index.h("slot", { key: '5de58a569a3bfedb44330c7b66150e58afdfea9b', onSlotchange: () => this.handleSlotChange() })));
+        return (index.h(index.Host, { key: 'a1f51fabc4417e30a2b3454f9faf239a3a1f8071', "data-version": _package.version }, index.h("slot", { key: '0ee1caede699ad7bc0c529f6fd1dd85c63107136', onSlotchange: () => this.handleSlotChange() })));
     }
     get host() { return index.getElement(this); }
-    static get watchers() { return {
-        "for": [{
-                "validateControlFor": 0
-            }]
-    }; }
 };
+__decorate([
+    required.Required(),
+    type.Type('string')
+], PostTooltipTrigger.prototype, "for", void 0);
 PostTooltipTrigger.style = postTooltipTriggerCss();
 
 exports.post_tooltip_trigger = PostTooltipTrigger;

package/dist/cjs/post-tooltip.cjs.entry.js

@@ -1,13 +1,24 @@
 'use strict';
 
-var index = require('./index-DPdHkdGf.js');
-var _package = require('./package-Ds_LS1pB.js');
-var index$1 = require('./index-qCzRmwgB.js');
-require('./index-YBj3gUJp.js');
+var index = require('./index-ngUOBQot.js');
 var placement = require('./placement-qEFR9hmI.js');
+require('./breakpoints-B0Olgvgc.js');
+var _package = require('./package-Bi-tiNRc.js');
+var oneOf = require('./one-of-BHyX4vYq.js');
+require('./create-validator-decorator-Bnx17kwi.js');
 
 const postTooltipCss = () => `:host{display:none}:host([open]){display:contents}post-popovercontainer[arrow]::after{position:absolute;content:"";inset:-13px;z-index:-1}post-popovercontainer{--post-current-bg:var(--post-scheme-color-surface-accent-bg);--post-current-fg:var(--post-scheme-color-surface-accent-fg);--post-popovercontainer-arrow-border-width:var(--post-device-border-width-alternative1);--post-popovercontainer-arrow-border-color:var(--post-scheme-color-surface-accent-fg)}post-popovercontainer::part(post-popovercontainer-border-mask){display:block;box-shadow:inset 0 0 0 var(--post-device-spacing-padding-14) var(--post-scheme-color-surface-accent-bg)}post-popovercontainer::part(post-popovercontainer-content){border:var(--post-device-border-width-alternative1) solid var(--post-scheme-color-surface-accent-fg);border-radius:var(--post-device-border-radius-1);padding:var(--post-device-spacing-padding-14) var(--post-device-spacing-padding-15);font-size:var(--post-device-font-size-9);max-width:var(--post-tooltip-max-width, 280px);width:inherit;word-wrap:break-word;white-space:normal}`;
 
+var __decorate = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function")
+        r = Reflect.decorate(decorators, target, key, desc);
+    else
+        for (var i = decorators.length - 1; i >= 0; i--)
+            if (d = decorators[i])
+                r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
 const PostTooltip = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
@@ -26,12 +37,6 @@ const PostTooltip = class {
          */
         this.open = false;
     }
-    validatePlacement() {
-        index$1.checkEmptyOrOneOf(this, 'placement', placement.PLACEMENT_TYPES);
-    }
-    componentWillLoad() {
-        this.validatePlacement();
-    }
     componentDidLoad() {
         if (!this.host.id) {
             console.error(
@@ -71,15 +76,13 @@ const PostTooltip = class {
     }
     render() {
         const popoverClass = `${this.arrow ? 'has-arrow' : ''}`;
-        return (index.h(index.Host, { key: '4822f0831a0ce3e74e7eeb181f562b2e4624efc8', "data-version": _package.version }, index.h("post-popovercontainer", { key: 'ba403db39900c4fddc6ab7dca4be73c17b2e60bf', safeSpace: "trapezoid", class: popoverClass, role: "tooltip", arrow: this.arrow, placement: this.placement, onPostBeforeToggle: e => this.handleBeforeToggle(e), ref: (el) => (this.popoverRef = el) }, index.h("slot", { key: '205a693e6e0c2ed41c7c8b5a2dd8ae214f20e199' }))));
+        return (index.h(index.Host, { key: '8186d5446993e1c21c107a496239e56af2493e87', "data-version": _package.version }, index.h("post-popovercontainer", { key: '6f916cddf8f3b577b7920b02c001905b782b6ff7', safeSpace: "trapezoid", class: popoverClass, role: "tooltip", arrow: this.arrow, placement: this.placement, onPostBeforeToggle: e => this.handleBeforeToggle(e), ref: (el) => (this.popoverRef = el) }, index.h("slot", { key: '0443322d0ef00792b14e69fd55abaf42f64c0838' }))));
     }
     get host() { return index.getElement(this); }
-    static get watchers() { return {
-        "placement": [{
-                "validatePlacement": 0
-            }]
-    }; }
 };
+__decorate([
+    oneOf.OneOf(placement.PLACEMENT_TYPES)
+], PostTooltip.prototype, "placement", void 0);
 PostTooltip.style = postTooltipCss();
 
 exports.post_tooltip = PostTooltip;

package/dist/cjs/required-lRDOdbd6.js

@@ -0,0 +1,44 @@
+'use strict';
+
+var createValidatorDecorator = require('./create-validator-decorator-Bnx17kwi.js');
+
+/**
+ * Property decorator that validates the property is not empty.
+ * If the property is empty (undefined, null, '', NaN), an error is logged.
+ * This validator is blocking: if it fails, subsequent validators will not run.
+ *
+ * Validation runs on `componentDidLoad` and whenever the property value changes.
+ *
+ * @param options - Optional configuration.
+ * @param options.when - The property name to watch. Validation only runs when this property's value matches the `truthy` option.
+ * @param options.truthy - The value that the `when` property must match for validation to run. Defaults to `true`.
+ */
+function Required(options) {
+    const validator = createValidatorDecorator.createValidatorDecorator({
+        priority: 0,
+        blocking: true,
+        validateEmptyValues: true,
+        run(component, property) {
+            if (options && typeof options.when === 'string') {
+                const truthy = options.truthy ?? true;
+                if (component[options.when] !== truthy) {
+                    return true;
+                }
+            }
+            const { value, showError } = createValidatorDecorator.getValidationContext(component, property);
+            if (createValidatorDecorator.isValueEmpty(value)) {
+                showError('is required');
+                return false;
+            }
+            return true;
+        },
+    });
+    return function (target, property) {
+        validator(target, property);
+        if (options?.when) {
+            createValidatorDecorator.registerDependency(target, options.when, property);
+        }
+    };
+}
+
+exports.Required = Required;

package/dist/cjs/type-shT641Eo.js

@@ -0,0 +1,30 @@
+'use strict';
+
+var createValidatorDecorator = require('./create-validator-decorator-Bnx17kwi.js');
+
+/**
+ * Property decorator that validates the property value is of the specified type.
+ *
+ * Validation runs on `componentDidLoad` and whenever the property value changes.
+ *
+ * @param type - The expected type ('boolean', 'number', 'string', 'array', 'object', 'function').
+ */
+function Type(type) {
+    return createValidatorDecorator.createValidatorDecorator({
+        priority: 1,
+        blocking: false,
+        run(component, property) {
+            const { value, showError } = createValidatorDecorator.getValidationContext(component, property);
+            const typeIsArray = type === 'array';
+            const valueIsArray = Array.isArray(value);
+            const isValid = typeIsArray || valueIsArray ? valueIsArray === typeIsArray : typeof value === type;
+            if (!isValid) {
+                showError(`must be of type "${type}"`);
+                return false;
+            }
+            return true;
+        },
+    });
+}
+
+exports.Type = Type;

package/dist/cjs/url-DRUMqVBq.js

@@ -0,0 +1,34 @@
+'use strict';
+
+var createValidatorDecorator = require('./create-validator-decorator-Bnx17kwi.js');
+
+/**
+ * Property decorator that validates the property value is a valid URL.
+ *
+ * Validation runs on `componentDidLoad` and whenever the property value changes.
+ */
+function Url() {
+    return createValidatorDecorator.createValidatorDecorator({
+        priority: 1,
+        blocking: false,
+        run(component, property) {
+            const { value, showError } = createValidatorDecorator.getValidationContext(component, property);
+            let isValid = typeof value === 'string' || value instanceof URL;
+            if (isValid) {
+                try {
+                    new URL(value, 'https://www.post.ch');
+                }
+                catch {
+                    isValid = false;
+                }
+            }
+            if (!isValid) {
+                showError('must be a valid URL');
+                return false;
+            }
+            return true;
+        },
+    });
+}
+
+exports.Url = Url;

package/dist/collection/collection-manifest.json

@@ -33,6 +33,7 @@
     "components/post-popover/post-popover.js",
     "components/post-popover-trigger/post-popover-trigger.js",
     "components/post-popovercontainer/post-popovercontainer.js",
+    "components/post-progressbar/post-progressbar.js",
     "components/post-rating/post-rating.js",
     "components/post-stepper/post-stepper.js",
     "components/post-stepper-item/post-stepper-item.js",

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

@@ -8,10 +8,10 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
                 r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
-import { h, Host } from "@stencil/core";
-import { version } from "../../../../package";
 import { HEADING_LEVELS } from "../../types/index";
-import { checkRequiredAndOneOf, EventFrom } from "../../utils/index";
+import { EventFrom, OneOf, Required } from "../../utils/index";
+import { version } from "../../../../package";
+import { h, Host } from "@stencil/core";
 /**
  * @slot default - Slot for placing post-accordion-item components.
  */
@@ -23,8 +23,7 @@ export class PostAccordion {
          */
         this.multiple = false;
     }
-    validateHeadingLevel() {
-        checkRequiredAndOneOf(this, 'headingLevel', HEADING_LEVELS);
+    syncHeadingLevel() {
         this.accordionItems.forEach(item => {
             item.setAttribute('heading-level', String(this.headingLevel));
         });
@@ -33,7 +32,7 @@ export class PostAccordion {
         this.registerAccordionItems();
     }
     componentDidLoad() {
-        this.validateHeadingLevel();
+        this.syncHeadingLevel();
     }
     collapseToggleHandler(event) {
         const toggledAccordionItem = event.target;
@@ -97,7 +96,7 @@ export class PostAccordion {
         });
     }
     render() {
-        return (h(Host, { key: 'fa37ee5b4611a84d273229955bcf624e53120022', "data-version": version }, h("div", { key: '0884dc3582eb768c6dd4959168d7e9a9b4195c3c', class: "accordion" }, h("slot", { key: 'f6d81d89aca513094ac5c1d531ed9d63f7b93730', onSlotchange: () => this.registerAccordionItems() }))));
+        return (h(Host, { key: '27862337a90223900241d38a1b1d27cb5923acba', "data-version": version }, h("div", { key: 'e858da8742240aa57f72ac04a4253d5e88910295', class: "accordion" }, h("slot", { key: '004ab6089b44a2528ea56cffed3bef0791dae068', onSlotchange: () => this.registerAccordionItems() }))));
     }
     static get is() { return "post-accordion"; }
     static get encapsulation() { return "shadow"; }
@@ -224,7 +223,7 @@ export class PostAccordion {
     static get watchers() {
         return [{
                 "propName": "headingLevel",
-                "methodName": "validateHeadingLevel"
+                "methodName": "syncHeadingLevel"
             }];
     }
     static get listeners() {
@@ -237,6 +236,10 @@ export class PostAccordion {
             }];
     }
 }
+__decorate([
+    Required(),
+    OneOf(HEADING_LEVELS)
+], PostAccordion.prototype, "headingLevel", void 0);
 __decorate([
     EventFrom('post-accordion-item')
 ], PostAccordion.prototype, "collapseToggleHandler", null);

package/dist/collection/components/post-accordion-item/post-accordion-item.js

@@ -8,11 +8,9 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
                 r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
-import { h, Host } from "@stencil/core";
+import { EventFrom, nanoid } from "../../utils/index";
 import { version } from "../../../../package";
-import { HEADING_LEVELS } from "../../types/index";
-import { checkEmptyOrOneOf, EventFrom } from "../../utils/index";
-import { nanoid } from "nanoid";
+import { h, Host } from "@stencil/core";
 /**
  * @part post-accordion-button - The element that toggles the accordion item (header button).
  * @part post-accordion-body - The element that holds the accordion item's content.
@@ -27,15 +25,9 @@ export class PostAccordionItem {
          */
         this.collapsed = false;
     }
-    validateHeadingLevel() {
-        checkEmptyOrOneOf(this, 'headingLevel', HEADING_LEVELS);
-    }
     componentWillLoad() {
         this.id = this.host.id || `p${nanoid(6)}`;
     }
-    componentDidLoad() {
-        this.validateHeadingLevel();
-    }
     // Capture to make sure the "collapsed" property is updated before the event is consumed
     onCollapseToggle(event) {
         this.collapsed = !event.detail;
@@ -55,10 +47,10 @@ export class PostAccordionItem {
     render() {
         const headingLevel = this.host.closest('post-accordion')?.getAttribute('heading-level');
         const HeadingTag = `h${headingLevel ?? this.headingLevel ?? 2}`;
-        return (h(Host, { key: 'cd8271355068aecc392d4bcf588274376fed789f', id: this.id, "data-version": version }, h("post-collapsible-trigger", { key: '598a9f0df7f536ffba45c2c634b87840785e244f', for: `${this.id}--collapse` }, h(HeadingTag, { key: 'd04482b9310440102fb6ed454bec2247648b57f2', class: "accordion-header", id: `${this.id}--header` }, h("button", { key: '3982fe310732d13ac32e09791278f0748eb99477', type: "button", class: `accordion-button${this.collapsed ? ' collapsed' : ''}`, part: "post-accordion-button" }, h("span", { key: 'e2e44601a4a73cac5b665b65f6f93e4836ce4729', class: {
+        return (h(Host, { key: '67b3be2ea798d007c3c05fafaa95d447bd3245b4', id: this.id, "data-version": version }, h("post-collapsible-trigger", { key: '2c545ead0717cefef325576125b548db4c7d6e11', for: `${this.id}--collapse` }, h(HeadingTag, { key: '82840144efc0588a73f5aaa734e1492acccd498e', class: "accordion-header", id: `${this.id}--header` }, h("button", { key: 'bfd05c00e2df07800a20a9e0b69e6b918d80085d', type: "button", class: `accordion-button${this.collapsed ? ' collapsed' : ''}`, part: "post-accordion-button" }, h("span", { key: 'af2e574d4e521316f9d5e4da040d777e0384c783', class: {
                 'logo-container': true,
                 'has-image': !!this.slottedLogo,
-            } }, h("slot", { key: 'e716b961b7222d1ef9eeaf19217c72aad5b261be', name: "logo", onSlotchange: this.onSlotLogoChange.bind(this) })), h("slot", { key: 'd0c59213d1cbd8d1080bdcbf7fce875a0c02d8bc', name: "header" }), h("post-icon", { key: 'a9d06bcfccf25de71a450ffc23081a22ba11d5c7', name: "chevronup" })))), h("post-collapsible", { key: '3fb6fd19baedbbfb6327bb568a203c4c1ecb1bdc', id: `${this.id}--collapse`, collapsed: this.collapsed, ref: el => (this.collapsible = el) }, h("div", { key: '5f50dc6a48dbc4a74780ff7bd54132f7ddaeeabb', class: "accordion-body", part: "post-accordion-body" }, h("slot", { key: 'f548651ab3ff5133117cd612964f1426086b5349' })))));
+            } }, h("slot", { key: '178cf7d6e26f52d8fe2fc15ef026db4bd51ff70c', name: "logo", onSlotchange: this.onSlotLogoChange.bind(this) })), h("slot", { key: 'c160f107a8bc7be52a538f6f19ffaa25fa4a729d', name: "header" }), h("post-icon", { key: '19d621e055e1973d1a0e3e7cb750a88101f962d3', name: "chevronup" })))), h("post-collapsible", { key: 'f0ff63e67476cc05467db907e010cd1c026aa044', id: `${this.id}--collapse`, collapsed: this.collapsed, ref: el => (this.collapsible = el) }, h("div", { key: '73418485496fa27ecc98e068317e39cea6dd8f2b', class: "accordion-body", part: "post-accordion-body" }, h("slot", { key: '7a0e5d6c3b8da2e3170b5e47104d3ff4509b2040' })))));
     }
     static get is() { return "post-accordion-item"; }
     static get encapsulation() { return "shadow"; }
@@ -157,12 +149,6 @@ export class PostAccordionItem {
         };
     }
     static get elementRef() { return "host"; }
-    static get watchers() {
-        return [{
-                "propName": "headingLevel",
-                "methodName": "validateHeadingLevel"
-            }];
-    }
     static get listeners() {
         return [{
                 "name": "postToggle",

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

@@ -1,6 +1,16 @@
-import { h, Host } from "@stencil/core";
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function")
+        r = Reflect.decorate(decorators, target, key, desc);
+    else
+        for (var i = decorators.length - 1; i >= 0; i--)
+            if (d = decorators[i])
+                r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { debounce, Required, Type } from "../../utils/index";
 import { version } from "../../../../package";
-import { debounce, checkRequiredAndType } from "../../utils/index";
+import { h, Host } from "@stencil/core";
 /**
  * @slot default - Slot for placing post-autocomplete-item components.
  */
@@ -113,9 +123,6 @@ export class PostAutocomplete {
             }
         };
     }
-    validateTextAvailableSuggestions() {
-        checkRequiredAndType(this, 'textAvailableSuggestions', 'string');
-    }
     get inputElement() {
         return this.host.querySelector('input');
     }
@@ -128,7 +135,6 @@ export class PostAutocomplete {
         }
     }
     componentWillLoad() {
-        this.validateTextAvailableSuggestions();
         if (!this.inputElement)
             return;
         this.inputElement.role = 'combobox';
@@ -139,6 +145,12 @@ export class PostAutocomplete {
             this.listBoxElement.id = crypto.randomUUID();
         this.inputElement.setAttribute('aria-controls', this.listBoxElement.id);
         this.inputElement.setAttribute('aria-expanded', 'false');
+        const inputLabel = this.inputElement.labels?.[0];
+        if (inputLabel) {
+            if (!inputLabel.id)
+                inputLabel.id = crypto.randomUUID();
+            this.listBoxElement.setAttribute('aria-labelledby', inputLabel.id);
+        }
         // Because we're handling that and the browser would show a duplicate native autocomplete dropdown
         this.inputElement.autocomplete = 'off';
         this.attachInputListeners();
@@ -187,7 +199,7 @@ export class PostAutocomplete {
         this.outputElement.textContent = this.textAvailableSuggestions.replace('{count}', String(count));
     }
     render() {
-        return (h(Host, { key: 'f384c1ed106ad5764078f166bfc692a0f1360956', "data-version": version }, h("slot", { key: 'f7b2859a994888a93c19274d26b473aeae35d1b6' }), this.clearable && this.inputValue && (h("button", { key: 'd87eb95ec872bc4d1ec29cd04f88334541863cf1', type: "button", class: "autocomplete-clear", onClick: this.clearInput }, h("post-icon", { key: '48b4dc91762b8c15af9fc1aeb953e97e6cc81af0', "aria-hidden": "true", name: "closex" }))), h("post-icon", { key: '0a0330204698338da6ddd48b5cacfb51f80c1497', "aria-hidden": "true", class: "autocomplete-icon", name: "chevronDown" }), h("output", { key: '5e98430b55f4cf2f915061540e6e002749dd2501', class: "visually-hidden", ref: el => (this.outputElement = el) })));
+        return (h(Host, { key: 'd8f594b17240359b03d1e443d0f8ea28a1a5f687', "data-version": version }, h("slot", { key: 'b76771582cdfb4f84e6018551508daaa5e5c91c5' }), this.clearable && this.inputValue && (h("button", { key: 'ff6255a9b10df6609703bfa302d519b52931786e', type: "button", class: "autocomplete-clear", onClick: this.clearInput }, h("post-icon", { key: '3c7da3532ae720ab6f392a8de8b2ca21e4b092aa', "aria-hidden": "true", name: "closex" }))), h("post-icon", { key: 'd2a3c04b68a3b9b3303b80f37292578c5182157e', "aria-hidden": "true", class: "autocomplete-icon", name: "chevronDown" }), h("output", { key: '187a75fa1e1935a372521c57f75c6740f330f891', class: "visually-hidden", ref: el => (this.outputElement = el) })));
     }
     static get is() { return "post-autocomplete"; }
     static get encapsulation() { return "shadow"; }
@@ -307,10 +319,8 @@ export class PostAutocomplete {
             }];
     }
     static get elementRef() { return "host"; }
-    static get watchers() {
-        return [{
-                "propName": "textAvailableSuggestions",
-                "methodName": "validateTextAvailableSuggestions"
-            }];
-    }
 }
+__decorate([
+    Required(),
+    Type('string')
+], PostAutocomplete.prototype, "textAvailableSuggestions", void 0);

package/dist/collection/components/post-avatar/avatar-utils.js

@@ -2,8 +2,8 @@
 const GRAVATAR_DEFAULT = '404';
 const GRAVATAR_RATING = 'g';
 const GRAVATAR_SIZE = 80;
-export function getGravatarUrl(email) {
-    const hash = cryptify(email.trim().toLowerCase());
+export async function getGravatarUrl(email) {
+    const hash = await cryptify(email.trim().toLowerCase());
     return `https://www.gravatar.com/avatar/${hash}?s=${GRAVATAR_SIZE}&d=${GRAVATAR_DEFAULT}&r=${GRAVATAR_RATING}`;
 }
 export async function cryptify(key) {