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

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

@@ -1,21 +1,17 @@
-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 { Required, Type } from "../../utils/index";
 import { version } from "../../../../package";
-import { checkRequiredAndType } from "../../utils/index";
+import { h, Host } from "@stencil/core";
 export class PostRating {
-    validateLabel() {
-        checkRequiredAndType(this, 'label', 'string');
-    }
-    validateStars() {
-        checkRequiredAndType(this, 'stars', 'number');
-    }
-    validateCurrentRating() {
-        checkRequiredAndType(this, 'currentRating', 'number');
-    }
-    componentWillLoad() {
-        this.validateLabel();
-        this.validateStars();
-        this.validateCurrentRating();
-    }
     constructor() {
         this.hasChanged = false;
         /**
@@ -87,7 +83,7 @@ export class PostRating {
         }
     }
     render() {
-        return (h(Host, { key: 'bd452616dc47e25ae0f97eb77869e558eb0e199c', "data-version": version }, h("div", { key: 'a2d59f6007b337d906af31f7ebc4cc57022b0e67', role: "slider", class: "rating", tabindex: "0", "aria-label": this.label, "aria-valuemin": "0", "aria-valuemax": this.stars, "aria-valuenow": this.currentRating, "aria-valuetext": `${this.currentRating} / ${this.stars}`, "aria-readonly": this.readonly ? 'true' : 'false', onKeyDown: this.keydownHandler, onBlur: this.blurHandler }, Array.from({ length: this.stars }).map((v, i) => (h("div", { key: `star-${v}`, "aria-hidden": "true", class: {
+        return (h(Host, { key: 'c037e21b074c9ebc433e325e49d17dbe06d8db43', "data-version": version }, h("div", { key: 'f661eac91003680598c38d54dbc5fa3f482b7ad8', role: "slider", class: "rating", tabindex: "0", "aria-label": this.label, "aria-valuemin": "0", "aria-valuemax": this.stars, "aria-valuenow": this.currentRating, "aria-valuetext": `${this.currentRating} / ${this.stars}`, "aria-readonly": this.readonly ? 'true' : 'false', onKeyDown: this.keydownHandler, onBlur: this.blurHandler }, Array.from({ length: this.stars }).map((v, i) => (h("div", { key: `star-${v}`, "aria-hidden": "true", class: {
                 'star': true,
                 'before-hover': i < this.hoveredIndex,
                 'active': i < Math.round(this.currentRating),
@@ -229,16 +225,16 @@ export class PostRating {
             }];
     }
     static get elementRef() { return "host"; }
-    static get watchers() {
-        return [{
-                "propName": "label",
-                "methodName": "validateLabel"
-            }, {
-                "propName": "stars",
-                "methodName": "validateStars"
-            }, {
-                "propName": "currentRating",
-                "methodName": "validateCurrentRating"
-            }];
-    }
 }
+__decorate([
+    Required(),
+    Type('string')
+], PostRating.prototype, "label", void 0);
+__decorate([
+    Required(),
+    Type('number')
+], PostRating.prototype, "stars", void 0);
+__decorate([
+    Required(),
+    Type('number')
+], PostRating.prototype, "currentRating", void 0);

package/dist/collection/components/post-stepper/post-stepper.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 { Pattern, Required, Type } from "../../utils/index";
 import { version } from "../../../../package";
-import { checkRequiredAndPattern, checkRequiredAndType } from "../../utils/index";
+import { h, Host } from "@stencil/core";
 export class PostStepper {
     constructor() {
         /**
@@ -8,18 +18,7 @@ export class PostStepper {
          */
         this.currentIndex = -1;
     }
-    validateTextCurrentStep() {
-        checkRequiredAndType(this, 'textCurrentStep', 'string');
-    }
-    validateTextCompletedStep() {
-        checkRequiredAndType(this, 'textCompletedStep', 'string');
-    }
-    validateTextStepNumber() {
-        checkRequiredAndPattern(this, 'textStepNumber', /\{number\}/);
-        this.updateActiveStepNumber();
-    }
     validateCurrentIndex() {
-        checkRequiredAndType(this, 'currentIndex', 'number');
         if (this.stepItems) {
             this.updateSteps();
             this.checkIndexes();
@@ -30,15 +29,20 @@ export class PostStepper {
             this.selectedIndex = this.currentIndex;
         }
         else {
-            checkRequiredAndType(this, 'selectedIndex', 'number');
             this.checkIndexes();
         }
         this.updateSteps();
     }
+    updateActiveStepNumber() {
+        if (this.textStepNumber) {
+            const labelTemplate = this.textStepNumber;
+            this.mobileActiveStepLabel = labelTemplate.replaceAll('{number}', `${this.selectedIndex + 1}`);
+            if (this.stepItems) {
+                this.updateMobileActiveStepVisibility();
+            }
+        }
+    }
     componentDidLoad() {
-        this.validateTextCompletedStep();
-        this.validateTextCurrentStep();
-        this.validateTextStepNumber();
         // Wait for slotchange
         setTimeout(() => {
             this.validateCurrentIndex();
@@ -50,15 +54,6 @@ export class PostStepper {
             console.error('The selected-index cannot be higher than the current-index, as only the current and completed steps can be selected.');
         }
     }
-    updateActiveStepNumber() {
-        if (this.textStepNumber) {
-            const labelTemplate = this.textStepNumber;
-            this.mobileActiveStepLabel = labelTemplate.replaceAll('{number}', `${this.selectedIndex + 1}`);
-            if (this.stepItems) {
-                this.updateMobileActiveStepVisibility();
-            }
-        }
-    }
     updateSteps() {
         this.stepItems = this.host.querySelectorAll('post-stepper-item');
         if (!this.stepItems || this.stepItems.length < 3) {
@@ -107,7 +102,7 @@ export class PostStepper {
         }
     }
     render() {
-        return (h(Host, { key: 'eb916a1b9169dc3a461e6307bce1d548d3e49890', "data-version": version }, h("ol", { key: '4e9460bdae8f3ab56789a60e925a3229cb0140ec' }, h("slot", { key: '6da9d8e162d901fdb5cb5edeaf7e394948cca663', onSlotchange: () => this.updateSteps() })), h("div", { key: '546c1da3029799c97fcd5d6146933ee1dd7f7ade', class: "active-step", "aria-hidden": "true" }, h("span", { key: '581c306bd6d7b840c7f74d96199e0197b550e9e0', class: "active-step-label" }, this.mobileActiveStepLabel), h("span", { key: 'c794108854a153e4005b8a3bb4a609fb6441f966', innerHTML: this.mobileActiveStepName }))));
+        return (h(Host, { key: '54ed38463a97b7141fdd5ce7576547cb709b377a', "data-version": version }, h("ol", { key: '7bed20f941c892da6c00f973bf6cf99780d4cec1' }, h("slot", { key: '36cd434ae62f7e6ffa742ddedbea2f2f5a870825', onSlotchange: () => this.updateSteps() })), h("div", { key: 'b523effd246fb447cf5511d973b9cef463e6d316', class: "active-step", "aria-hidden": "true" }, h("span", { key: '506617bee389d6b6ee2c477e06388ae13d0eef16', class: "active-step-label" }, this.mobileActiveStepLabel), h("span", { key: '0aebdb5c031c30bc732a73a6a38544038a9f48ef', innerHTML: this.mobileActiveStepName }))));
     }
     static get is() { return "post-stepper"; }
     static get encapsulation() { return "shadow"; }
@@ -230,20 +225,33 @@ export class PostStepper {
     static get elementRef() { return "host"; }
     static get watchers() {
         return [{
-                "propName": "textCurrentStep",
-                "methodName": "validateTextCurrentStep"
-            }, {
-                "propName": "textCompletedStep",
-                "methodName": "validateTextCompletedStep"
-            }, {
-                "propName": "textStepNumber",
-                "methodName": "validateTextStepNumber"
-            }, {
                 "propName": "currentIndex",
                 "methodName": "validateCurrentIndex"
             }, {
                 "propName": "selectedIndex",
                 "methodName": "validateSelectedIndex"
+            }, {
+                "propName": "textStepNumber",
+                "methodName": "updateActiveStepNumber"
             }];
     }
 }
+__decorate([
+    Required(),
+    Type('string')
+], PostStepper.prototype, "textCurrentStep", void 0);
+__decorate([
+    Required(),
+    Type('string')
+], PostStepper.prototype, "textCompletedStep", void 0);
+__decorate([
+    Required(),
+    Pattern(/\{number\}/)
+], PostStepper.prototype, "textStepNumber", void 0);
+__decorate([
+    Required(),
+    Type('number')
+], PostStepper.prototype, "currentIndex", void 0);
+__decorate([
+    Type('number')
+], PostStepper.prototype, "selectedIndex", void 0);

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

@@ -1,8 +1,8 @@
-import { h, Host } from "@stencil/core";
 import { version } from "../../../../package";
+import { h, Host } from "@stencil/core";
 export class PostStepperItem {
     render() {
-        return (h(Host, { key: '7f3df658eb7640f582e438f218e3ec62fbb4edee', "data-version": version, role: "listitem" }, h("span", { key: 'bb7b02a3cca04d16626f66c52eb08085a8e9cb26', class: "stepper-item-content" }, h("span", { key: '78ca87ae8956838bc7fffec8e6d9121aa4aa14da', class: "step-hidden-label visually-hidden" }), h("span", { key: '6beecc79f02ed51046e6b7cc5006c305c821f9bc', class: "label" }, h("slot", { key: '5701a12b73a29bd629fa361bcd838c9a7ec88869' })))));
+        return (h(Host, { key: '0919891d67f961e1ee2c8a7fb556d232ed34ed94', "data-version": version, role: "listitem" }, h("span", { key: '862705599a537267080fbf054e06353c65888bba', class: "stepper-item-content" }, h("span", { key: '96c62cc07fd460402d4e49a36fad70c80eb52f78', class: "step-hidden-label visually-hidden" }), h("span", { key: '6cce8bef3684d50f8dbb72f48b1ca3b0bbcd57ca', class: "label" }, h("slot", { key: '9ec06d2716870180309bbfde83a04953e7abb011' })))));
     }
     static get is() { return "post-stepper-item"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/post-tab-item/post-tab-item.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 { nanoid, Required, Type } from "../../utils/index";
 import { version } from "../../../../package";
-import { checkRequiredAndType, nanoid } from "../../utils/index";
+import { h, Host } from "@stencil/core";
 /**
  * @slot default - Slot for the content of the tab item. Can contain text or an <a> element for navigation mode.
  */
@@ -9,9 +19,6 @@ export class PostTabItem {
         this.mutationObserver = new MutationObserver(this.checkNavigationMode.bind(this));
         this.isNavigationMode = false;
     }
-    validateName() {
-        checkRequiredAndType(this, 'name', 'string');
-    }
     connectedCallback() {
         this.mutationObserver.observe(this.host, {
             childList: true,
@@ -32,7 +39,7 @@ export class PostTabItem {
         this.isNavigationMode = hasAnchor;
     }
     render() {
-        return (h(Host, { key: '9b37b37c161a3a67d30443c5115cc08b90322e34', id: this.tabId, role: !this.isNavigationMode ? 'tab' : undefined, "data-version": version, "data-navigation-mode": this.isNavigationMode.toString(), "aria-selected": !this.isNavigationMode ? 'false' : undefined, tabindex: !this.isNavigationMode ? '-1' : undefined, class: !this.isNavigationMode ? 'tab-title' : 'nav-item' }, h("slot", { key: '63472a86d5d0dfa8e6d1b39677244781205f0c70' })));
+        return (h(Host, { key: 'bd2713959afafd5dafa80c5f59e8249ffbb78b09', id: this.tabId, role: !this.isNavigationMode ? 'tab' : undefined, "data-version": version, "data-navigation-mode": this.isNavigationMode.toString(), "aria-selected": !this.isNavigationMode ? 'false' : undefined, tabindex: !this.isNavigationMode ? '-1' : undefined, class: !this.isNavigationMode ? 'tab-title' : 'nav-item' }, h("slot", { key: '87e22df81eae1ecef48a6ad443b959562d8a816b' })));
     }
     static get is() { return "post-tab-item"; }
     static get encapsulation() { return "shadow"; }
@@ -76,10 +83,8 @@ export class PostTabItem {
         };
     }
     static get elementRef() { return "host"; }
-    static get watchers() {
-        return [{
-                "propName": "name",
-                "methodName": "validateName"
-            }];
-    }
 }
+__decorate([
+    Required(),
+    Type('string')
+], PostTabItem.prototype, "name", void 0);

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

@@ -1,20 +1,26 @@
-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 { nanoid, Required, Type } from "../../utils/index";
 import { version } from "../../../../package";
-import { checkRequiredAndType, nanoid } from "../../utils/index";
+import { h, Host } from "@stencil/core";
 /**
  * @slot default - Slot for placing the content of the tab panel.
  */
 export class PostTabPanel {
-    validateFor() {
-        checkRequiredAndType(this, 'for', 'string');
-    }
     componentWillLoad() {
-        this.validateFor();
         // get the id set on the host element or use a random id by default
         this.panelId = `panel-${this.host.id || nanoid(6)}`;
     }
     render() {
-        return (h(Host, { key: 'f6e981cdce4b09ddc60c4fd2cf56af26db9ea7ee', "data-version": version, id: this.panelId, role: "tabpanel", slot: "panels" }, h("slot", { key: '79f2c065cb364b1c15717f349e57e832e06ef054' })));
+        return (h(Host, { key: 'a67cc32e99a26cafcdb39968252012d8b67810b1', "data-version": version, id: this.panelId, role: "tabpanel", slot: "panels" }, h("slot", { key: '2435e43fcecac9a863e4ba2fc215efa7b03c7c18' })));
     }
     static get is() { return "post-tab-panel"; }
     static get encapsulation() { return "shadow"; }
@@ -57,10 +63,8 @@ export class PostTabPanel {
         };
     }
     static get elementRef() { return "host"; }
-    static get watchers() {
-        return [{
-                "propName": "for",
-                "methodName": "validateFor"
-            }];
-    }
 }
+__decorate([
+    Required(),
+    Type('string')
+], PostTabPanel.prototype, "for", void 0);

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

@@ -1,7 +1,17 @@
-import { h, Host, } from "@stencil/core";
-import { version } from "../../../../package";
+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 { fade } from "../../animations/index";
-import { componentOnReady, checkRequiredAndType } from "../../utils/index";
+import { componentOnReady, Type } from "../../utils/index";
+import { version } from "../../../../package";
+import { h, Host, } from "@stencil/core";
 /**
  * @slot default - Slot for placing tab items. Each tab item should be a <post-tab-item> element.
  * @slot panels - Slot for placing tab panels. Each tab panel should be a <post-tab-panel> element.
@@ -26,8 +36,8 @@ export class PostTabs {
         return Array.from(this.host.querySelectorAll('post-tab-panel')).filter(panel => panel.closest('post-tabs') === this.host);
     }
     validateLabel() {
-        if (this.isNavigationMode) {
-            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() {
@@ -291,10 +301,10 @@ export class PostTabs {
     }
     render() {
         const TabsContainer = this.isNavigationMode ? 'nav' : 'div';
-        return (h(Host, { key: 'edb1e06b1b1cdd23db32e42ff77dbc64a44905f0', "data-version": version }, h("div", { key: 'd86eb9bb592aff23c38c92b12dfd72623d67f194', class: "tabs-wrapper", part: "post-tabs" }, h(TabsContainer, { key: '6646284be80e647c96065b3c791f34c4b64627f3', class: "tabs", role: this.isNavigationMode ? undefined : 'tablist', "aria-label": this.isNavigationMode ? this.label : undefined }, h("slot", { key: 'c71ddf4391144b7cb71671e8f564e723c408e723', onSlotchange: () => {
+        return (h(Host, { key: '3b674ed455e34a7efc1c1ffed14ac719a7ecb061', "data-version": version }, h("div", { key: '749f4695adc7c3125bfb678606249c48a4d7ea31', class: "tabs-wrapper", part: "post-tabs" }, h(TabsContainer, { key: 'c06c83dbcbdf9f3fd38f01db7beae181748b369d', class: "tabs", role: this.isNavigationMode ? undefined : 'tablist', "aria-label": this.isNavigationMode ? this.label : undefined }, h("slot", { key: 'b065d0200fb2d4b6a63e23141d3e625a4147a93d', onSlotchange: () => {
                 this.moveMisplacedTabs();
                 this.enableTabs();
-            } }))), !this.isNavigationMode && (h("div", { key: '625d5b7d8ab2e8cfacce0c2ac6fa94d6f6fc2953', class: "tab-content", part: "post-tabs-content" }, h("slot", { key: '1ddaf37e585d3e9fbb9722e09829956e28dc7fd6', name: "panels", onSlotchange: () => this.moveMisplacedPanels() })))));
+            } }))), !this.isNavigationMode && (h("div", { key: '8dc41274f8c9da24b2d65eebf213ea35c41368d0', class: "tab-content", part: "post-tabs-content" }, h("slot", { key: 'e859256ebcb60fc0457349ca991508406b3bc309', name: "panels", onSlotchange: () => this.moveMisplacedPanels() })))));
     }
     static get is() { return "post-tabs"; }
     static get encapsulation() { return "shadow"; }
@@ -430,3 +440,6 @@ export class PostTabs {
             }];
     }
 }
+__decorate([
+    Type('string')
+], PostTabs.prototype, "label", void 0);

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

@@ -1,5 +1,5 @@
-import { Host, h } from "@stencil/core";
 import { version } from "../../../../package";
+import { h, Host } from "@stencil/core";
 /**
  * @slot default - Slot for the content of the button.
  */
@@ -24,10 +24,12 @@ export class PostTogglebutton {
         // add event listener in capture phase so the toggle state is updated
         // before any parent bubble listeners react to the click.
         this.host.addEventListener('click', () => this.handleClick(), { capture: true });
-        this.host.addEventListener('keydown', (e) => this.handleKeydown(e), { capture: true });
+        this.host.addEventListener('keydown', (e) => this.handleKeydown(e), {
+            capture: true,
+        });
     }
     render() {
-        return (h(Host, { key: '828f375bfd28dd8f46c2c233cef90abe6c27c488', "data-version": version, role: "button", tabindex: "0", "aria-pressed": this.toggled.toString() }, h("slot", { key: '35325c8481638cf30593cda05a67ee74b38bb40c' })));
+        return (h(Host, { key: '6659870a07cf41d8808660906165797572f6a24d', "data-version": version, role: "button", tabindex: "0", "aria-pressed": this.toggled.toString() }, h("slot", { key: '08e6e5b43eeff5239eb40ec8ee960076058dede1' })));
     }
     static get is() { return "post-togglebutton"; }
     static get encapsulation() { return "shadow"; }

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

@@ -1,7 +1,17 @@
-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 { PLACEMENT_TYPES } from "../../types/placement";
+import { OneOf } from "../../utils/index";
 import { version } from "../../../../package";
-import { checkEmptyOrOneOf } from "../../utils/index";
-import { PLACEMENT_TYPES } from "../../types/index";
+import { h, Host } from "@stencil/core";
 export class PostTooltip {
     constructor() {
         /**
@@ -19,12 +29,6 @@ export class PostTooltip {
          */
         this.open = false;
     }
-    validatePlacement() {
-        checkEmptyOrOneOf(this, 'placement', PLACEMENT_TYPES);
-    }
-    componentWillLoad() {
-        this.validatePlacement();
-    }
     componentDidLoad() {
         if (!this.host.id) {
             console.error(
@@ -64,7 +68,7 @@ export class PostTooltip {
     }
     render() {
         const popoverClass = `${this.arrow ? 'has-arrow' : ''}`;
-        return (h(Host, { key: 'd2927c8847a39198bc0f8ecc62071534a35959d4', "data-version": version }, h("post-popovercontainer", { key: '691d408109cc976d8a46ffeafa6af7ce343fc9da', safeSpace: "trapezoid", class: popoverClass, role: "tooltip", arrow: this.arrow, placement: this.placement, onPostBeforeToggle: e => this.handleBeforeToggle(e), ref: (el) => (this.popoverRef = el) }, h("slot", { key: '85eb8a3ca3e0359044ddc4b24562f0a43d459dc9' }))));
+        return (h(Host, { key: '8186d5446993e1c21c107a496239e56af2493e87', "data-version": version }, 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) }, h("slot", { key: '0443322d0ef00792b14e69fd55abaf42f64c0838' }))));
     }
     static get is() { return "post-tooltip"; }
     static get encapsulation() { return "shadow"; }
@@ -234,10 +238,7 @@ export class PostTooltip {
         };
     }
     static get elementRef() { return "host"; }
-    static get watchers() {
-        return [{
-                "propName": "placement",
-                "methodName": "validatePlacement"
-            }];
-    }
 }
+__decorate([
+    OneOf(PLACEMENT_TYPES)
+], PostTooltip.prototype, "placement", void 0);

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

@@ -1,6 +1,16 @@
-import { h, Host, Build } from "@stencil/core";
-import { checkEmptyOrType } from "../../utils/property-checkers/index";
+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 { Required, Type } from "../../utils/index";
 import { version } from "../../../../package";
+import { Build, h, Host } from "@stencil/core";
 const TRIGGER_EVENTS = ['pointerenter', 'pointerleave', 'focusin', 'focusout', 'long-press'];
 let isFocusable;
 /**
@@ -23,9 +33,6 @@ export class PostTooltipTrigger {
         this.boundTriggerHandler = this.handleTriggerEvent.bind(this);
         this.boundTooltipHandler = this.handleTooltipEvent.bind(this);
     }
-    validateControlFor() {
-        checkEmptyOrType(this, 'for', 'string');
-    }
     get tooltip() {
         if (Build.isServer)
             return null;
@@ -175,7 +182,7 @@ export class PostTooltipTrigger {
         this.tooltip?.hide();
     }
     render() {
-        return (h(Host, { key: '33feebd0dace3160a539e4dc809b0b31e7d7d40b', "data-version": version }, h("slot", { key: '8994560a784d203ad40face20a60ac5bc631507f', onSlotchange: () => this.handleSlotChange() })));
+        return (h(Host, { key: 'a1f51fabc4417e30a2b3454f9faf239a3a1f8071', "data-version": version }, h("slot", { key: '0ee1caede699ad7bc0c529f6fd1dd85c63107136', onSlotchange: () => this.handleSlotChange() })));
     }
     static get is() { return "post-tooltip-trigger"; }
     static get encapsulation() { return "shadow"; }
@@ -233,10 +240,8 @@ export class PostTooltipTrigger {
         };
     }
     static get elementRef() { return "host"; }
-    static get watchers() {
-        return [{
-                "propName": "for",
-                "methodName": "validateControlFor"
-            }];
-    }
 }
+__decorate([
+    Required(),
+    Type('string')
+], PostTooltipTrigger.prototype, "for", void 0);

package/dist/collection/utils/index.js

@@ -1,4 +1,3 @@
-export * from './property-checkers';
 export * from './property-decorators';
 export * from './attribute-observer';
 export * from './breakpoints';
@@ -8,11 +7,11 @@ export * from './event-from';
 export * from './get-focusable-children';
 export * from './get-root';
 export * from './get-slotted-element';
+export * from './is-iso-date';
 export * from './is-motion-reduced';
 export * from './is-value-empty';
+export * from './locales';
+export * from './nanoid';
 export * from './repeat-on-long-press';
 export * from './sass-export';
 export * from './timeout';
-export * from './is-iso-date';
-export * from './locales';
-export * from './nanoid';

package/dist/collection/utils/is-value-empty.js

@@ -1,4 +1,4 @@
-import { EMPTY_VALUES } from "./property-checkers/constants";
+const EMPTY_VALUES = [undefined, null, '', Number.NaN];
 export function isValueEmpty(value) {
     return EMPTY_VALUES.some(v => Object.is(v, value));
 }

package/dist/collection/utils/property-decorators/bound.js

@@ -0,0 +1,75 @@
+import { createValidatorDecorator, getValidationContext, registerDependency, } from "./create-validator-decorator";
+function resolveBound(component, bound) {
+    const resolvedValue = typeof bound === 'string' ? component[bound] : bound;
+    return typeof resolvedValue === 'number' ? resolvedValue : null;
+}
+function createBoundValidatorDecorator(bound, options, config) {
+    const decorator = createValidatorDecorator({
+        priority: 1,
+        blocking: false,
+        run(component, property) {
+            const { value, showError } = getValidationContext(component, property);
+            if (typeof value !== 'number') {
+                return true;
+            }
+            const resolvedBound = resolveBound(component, bound);
+            if (resolvedBound === null) {
+                if (typeof bound === 'string') {
+                    const boundVal = component[bound];
+                    const boundType = typeof boundVal;
+                    if (boundType !== 'number') {
+                        showError(`references property "${bound}" which must be a number but got ${boundType}`);
+                        return false;
+                    }
+                }
+                return true;
+            }
+            const include = options.include ?? config.includeDefault;
+            if (!config.compare(value, resolvedBound, include)) {
+                const displayBound = typeof bound === 'string' ? String(resolvedBound) : String(bound);
+                const expectation = config.formatExpectation(displayBound, include);
+                showError(`must be ${expectation}`);
+                return false;
+            }
+            return true;
+        },
+    });
+    return function (target, property) {
+        if (typeof bound === 'string') {
+            registerDependency(target, bound, property);
+        }
+        decorator(target, property);
+    };
+}
+/**
+ * Property decorator that validates the property value is greater than the specified minimum.
+ *
+ * Validation runs on `componentDidLoad` and whenever the property value changes.
+ *
+ * @typeParam T - Component type used to constrain property-name bounds.
+ * @param minimum - The minimum allowed value (exclusive by default) or property name to read it from.
+ * @param options - Configuration object with `includeMin` flag (default: false for exclusive behavior).
+ */
+export function GreaterThan(minimum, options = {}) {
+    return createBoundValidatorDecorator(minimum, { include: options.includeMin }, {
+        includeDefault: false,
+        compare: (value, bound, include) => (include ? value >= bound : value > bound),
+        formatExpectation: (display, include) => include ? `greater than or equal to "${display}"` : `greater than "${display}"`,
+    });
+}
+/**
+ * Property decorator that validates the property value is less than the specified maximum.
+ *
+ * Validation runs on `componentDidLoad` and whenever the property value changes.
+ *
+ * @typeParam T - Component type used to constrain property-name bounds.
+ * @param maximum - The maximum allowed value (inclusive by default) or property name to read it from.
+ * @param options - Configuration object with `includeMax` flag (default: true for inclusive behavior).
+ */
+export function LessThan(maximum, options = {}) {
+    return createBoundValidatorDecorator(maximum, { include: options.includeMax }, {
+        includeDefault: true,
+        compare: (value, bound, include) => (include ? value <= bound : value < bound),
+        formatExpectation: (display, include) => include ? `less than or equal to "${display}"` : `less than "${display}"`,
+    });
+}

package/dist/collection/utils/property-decorators/create-validator-decorator.js

@@ -10,6 +10,8 @@ const validatorsByTarget = new WeakMap();
 const decoratedPropertiesByTarget = new WeakMap();
 /** Stores per-instance property values captured by dynamically created accessors. */
 const propertyValuesByInstance = new WeakMap();
+/** Stores dependency relationships per prototype: dependencyProp -> Set<dependentProp>. */
+const dependenciesByTarget = new WeakMap();
 /**
  * Returns the value for a key in a {@link WeakMap} and lazily creates it when missing.
  *
@@ -57,6 +59,17 @@ function getDecoratedProperties(target) {
 function getValuesByProperty(instance) {
     return getOrCreate(propertyValuesByInstance, instance, () => new Map());
 }
+/**
+ * Registers that `dependentProp` should be re-validated when `dependencyProp` changes.
+ * Ensures the dependency property has an accessor so its setter can trigger dependents.
+ */
+export function registerDependency(target, dependencyProp, dependentProp) {
+    // Ensure dependency has an accessor so its setter can run dependent validators
+    createPropertyAccessor(target, dependencyProp);
+    const depsByProp = getOrCreate(dependenciesByTarget, target, () => new Map());
+    const dependents = getOrCreate(depsByProp, dependencyProp, () => new Set());
+    dependents.add(dependentProp);
+}
 /**
  * Defines an accessor for a decorated property that stores values per instance and
  * triggers validation after the component first loads.
@@ -79,6 +92,17 @@ function createPropertyAccessor(target, property) {
             getValuesByProperty(this).set(property, newValue);
             if (loadedInstances.has(this)) {
                 runValidators(this, property);
+                // Run validators for any properties that depend on this property.
+                const proto = Object.getPrototypeOf(this);
+                const depsByProp = dependenciesByTarget.get(proto);
+                if (depsByProp) {
+                    const dependents = depsByProp.get(property);
+                    if (dependents) {
+                        for (const dependent of dependents) {
+                            runValidators(this, dependent);
+                        }
+                    }
+                }
             }
         },
         enumerable: true,