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

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

@@ -1,7 +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 } from "../../utils/index";
-import { nanoid } from "nanoid";
+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.
  */
@@ -10,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,
@@ -33,7 +39,7 @@ export class PostTabItem {
         this.isNavigationMode = hasAnchor;
     }
     render() {
-        return (h(Host, { key: 'ad908beacdffc7d6ce2eb0cab7a7a2868e876a34', 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: 'd8208d5c9b78f31351ad6c32677b8c693ec449f6' })));
+        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"; }
@@ -77,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,21 +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 { nanoid } from "nanoid";
-import { checkRequiredAndType } 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: 'd80c058e686d94347bfcb266f35f73247fc6db5a', "data-version": version, id: this.panelId, role: "tabpanel", slot: "panels" }, h("slot", { key: 'dc226cf7fe57939fd53a8f1cc68c9eaf766d5c1e' })));
+        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"; }
@@ -58,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: '4eb78778cb1a98e78714b5b8d69d15eaa68170c6', "data-version": version }, h("div", { key: '203c1529d44e676d40dd4f87593bcce07901079f', class: "tabs-wrapper", part: "post-tabs" }, h(TabsContainer, { key: '70f132a96d11fdcc0f0e9bab5053cc3a188b5b04', class: "tabs", role: this.isNavigationMode ? undefined : 'tablist', "aria-label": this.isNavigationMode ? this.label : undefined }, h("slot", { key: '24e2b06bf1b884d83d6c915d4c54029856f2a0ec', 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: 'bd6530a08d31258fa028761f44f0db4dc12541ec', class: "tab-content", part: "post-tabs-content" }, h("slot", { key: 'df50010f2b6cfbd77bc435bedbff1677415869e5', 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: '9d5a1290041d0a1959efceb520423124e5a09270', "data-version": version, role: "button", tabindex: "0", "aria-pressed": this.toggled.toString() }, h("slot", { key: '9168b19b5ddd39dcf61139ff335db773d3da1a1a' })));
+        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: '4822f0831a0ce3e74e7eeb181f562b2e4624efc8', "data-version": version }, 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) }, h("slot", { key: '205a693e6e0c2ed41c7c8b5a2dd8ae214f20e199' }))));
+        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,13 +1,18 @@
-import { h, Host, Build } from "@stencil/core";
-import { checkEmptyOrType } from "../../utils/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 isFocusable from "ally.js/is/focusable";
+import { Build, h, Host } from "@stencil/core";
 const TRIGGER_EVENTS = ['pointerenter', 'pointerleave', 'focusin', 'focusout', 'long-press'];
-if (Build.isBrowser) {
-    (async () => {
-        await import('long-press-event');
-    })();
-}
+let isFocusable;
 /**
  * @slot default - Content to trigger the tooltip. Can contain any focusable element or will be made focusable automatically.
  */
@@ -28,15 +33,23 @@ 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;
         const ref = document.getElementById(this.for);
         return ref?.localName === 'post-tooltip' ? ref : null;
     }
+    componentWillLoad() {
+        if (Build.isBrowser) {
+            // Fire-and-forget: long-press-event registers a global event listener on import.
+            import('long-press-event');
+            // Load ally.js lazily; setupTrigger uses optional chaining to handle the
+            // case where it hasn't loaded yet (falls back to adding tabindex="0").
+            import('ally.js/is/focusable').then(m => {
+                isFocusable ?? (isFocusable = m.default);
+            });
+        }
+    }
     componentDidLoad() {
         this.setupTrigger();
         this.attachListeners();
@@ -76,7 +89,7 @@ export class PostTooltipTrigger {
     setupTrigger() {
         this.trigger = this.host.querySelector('*');
         if (this.trigger) {
-            if (!isFocusable(this.trigger)) {
+            if (!isFocusable?.(this.trigger)) {
                 this.trigger.setAttribute('tabindex', '0');
             }
             const describedBy = this.trigger.getAttribute('aria-describedby') || '';
@@ -169,7 +182,7 @@ export class PostTooltipTrigger {
         this.tooltip?.hide();
     }
     render() {
-        return (h(Host, { key: '7121e61cb791f41af5f41b5e2586b0a0399a4e05', "data-version": version }, h("slot", { key: '5de58a569a3bfedb44330c7b66150e58afdfea9b', 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"; }
@@ -227,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/hydrate-stub/index.stub.js

@@ -0,0 +1,5 @@
+/* eslint-disable unicorn/no-empty-file */
+/**
+ * This is a stub file for stencils hydrate app (helps generating declarative shadow DOM (DSD) during server-side rendering).
+ * Whenever the hydrate app is imported in a non-nodejs environment, this stub file will be returned instead.
+ */

package/dist/collection/test-setup.js

@@ -0,0 +1,7 @@
+jest.mock('@stencil/core', () => {
+    const actual = jest.requireActual('@stencil/core');
+    return {
+        ...actual,
+        getElement: (ref) => ref.host ?? document.createElement('post-test'),
+    };
+});

package/dist/collection/utils/index.js

@@ -1,4 +1,4 @@
-export * from './property-checkers';
+export * from './property-decorators';
 export * from './attribute-observer';
 export * from './breakpoints';
 export * from './component-on-ready';
@@ -7,10 +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';

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/locales.js

@@ -1,4 +1,3 @@
-import { check } from "language-tags";
 export const FALLBACK_LANGUAGE_CODE = 'en';
 export const FALLBACK_LOCALE_CODE = 'en-GB';
 export const BUDDHIST_CALENDAR_YEAR_OFFSET = 543;
@@ -13,5 +12,13 @@ export function getLocaleTextDirection(locale) {
     return new Date().toLocaleDateString(locale).includes(UNICODE_BIDI.rtl) ? 'rtl' : 'ltr';
 }
 export function isValidLocale(locale) {
-    return locale !== undefined && check(locale);
+    if (!locale)
+        return false;
+    try {
+        return Intl.DateTimeFormat.supportedLocalesOf(locale).length > 0;
+    }
+    catch (err) {
+        console.log(err);
+        return false;
+    }
 }

package/dist/collection/utils/nanoid.js

@@ -0,0 +1,16 @@
+/**
+ * Initially copy'n'pasted from https://github.com/ai/nanoid/blob/main/non-secure/index.js, then adopted to our needs.
+ *
+ * Our custom implementation generates unique IDs for DOM elements efficiently without requiring cryptographic security (as nanoid).
+ * It eliminates the nanoid package dependency (as well as the transistive `node:crypto` dependency in node environments), meeting all our requirements.
+ * This approach optimizes performance and minimizes the codebase footprint.
+ */
+const ALPHABET = 'useandom-26T198340PX75pxJACKVERYMINDBUSHWOLF_GQZbfghjklqvwyzrict';
+export function nanoid(size = 21) {
+    const bytes = crypto.getRandomValues(new Uint8Array(size));
+    let id = '';
+    for (let i = 0; i < size; i++) {
+        id += ALPHABET[bytes[i] & 63];
+    }
+    return id;
+}

package/dist/collection/utils/property-decorators/array-of.js

@@ -0,0 +1,22 @@
+import { createValidatorDecorator, getValidationContext } from "./create-validator-decorator";
+/**
+ * Property decorator that validates the property value is an array of the specified type.
+ *
+ * Validation runs on `componentDidLoad` and whenever the property value changes.
+ *
+ * @param type - The expected type of each array element ('boolean', 'number', 'string').
+ */
+export function ArrayOf(type) {
+    return createValidatorDecorator({
+        priority: 1,
+        blocking: false,
+        run(component, property) {
+            const { value, showError } = getValidationContext(component, property);
+            if (!Array.isArray(value) || value.some(val => typeof val !== type)) {
+                showError(`must be a "${type}" array`);
+                return false;
+            }
+            return true;
+        },
+    });
+}

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}"`,
+    });
+}