@riverty/web-components 6.2.1 → 6.3.1

package/dist/collection/components/input-date/input-date.js

@@ -356,6 +356,11 @@ export class InputDate {
         this.format = this.initial['format'];
         this.valid = !this.invalid;
     }
+    /** Validates an element, displays provided message in case value is invalid. */
+    async setCustomValidity(message) {
+        this.customErrorMessage = message;
+        this.validateFormElement(this.nativeElement);
+    }
     /**
      * Validates the input date without triggering UI and returns a boolean indicating its validity.
      * @returns A boolean indicating whether the input date is valid.
@@ -451,14 +456,14 @@ export class InputDate {
             id: `${uniqueId}-label`,
             fieldIndicator
         } : {};
-        return (h(Host, { key: '1fe0cc5598857ca719ef334807da6e2540c4a399', onClick: this.onHostClick, "data-touched": `${this.touched}`, "data-dirty": `${this.dirty}` }, h("fieldset", Object.assign({ key: 'a7ad4075376fc3d08cc59be2f4340c9327e05f82', class: "r-input-date" }, groupAttrs), h("div", { key: 'ec18205fad6069d54715807529a145d03f8bdebb', class: "r-input-date--legend-container" }, h("legend", { key: '59c4384b37a3a845eb5cb0c2955b8a12777b2320', class: "r-input-date--legend" }, h("label", { key: '8b5502aeb26daa26d3f32d3669406b87e2eb29ca', htmlFor: uniqueId }, label ?
+        return (h(Host, { key: 'e8d5144a4cefeca243ea6e80840e4ff12b9344f0', onClick: this.onHostClick, "data-touched": `${this.touched}`, "data-dirty": `${this.dirty}` }, h("fieldset", Object.assign({ key: '417cac30b7b535e7367eef280732869cdd984ed1', class: "r-input-date" }, groupAttrs), h("div", { key: 'd7ef5eb79c96c0d8845399e536c356272ab7c03c', class: "r-input-date--legend-container" }, h("legend", { key: '14c195899fb789333bbd07a40ec1db746d004839', class: "r-input-date--legend" }, h("label", { key: 'f6ac0e10142bceefe404a385ac44534d81ae3f98', htmlFor: uniqueId }, label ?
             h("r-label", Object.assign({}, labelAttr), label)
             :
-                h("slot", { name: "label" }))), h("slot", { key: '7a5b5ad6401bb8199d94c36383e4219fd3556db5', name: "popover" })), hint &&
-            h("r-hint", { key: '1226c6002eb581811e419db7518e02d5fbc18b5b', id: `${uniqueId}-hint`, role: "note" }, hint), h("div", { key: '5581e3cbb731a4a23a243118f2840563352e6df1', class: "r-input-date--container" }, h("r-icon", { key: 'e8b52fc6fcb1d4f22fd24e7e26e55218a1b6ee80', name: "calendar", size: "s", class: "r-input-date--calendar-icon" }), h("div", { key: '4b97bab9a65f4a9d1958287f23940b7ee4d7143e', class: "r-input-date--inputs" }, this.inputOrder.map((input, i) => (h(Fragment, null, h("input", Object.assign({ class: "r-input-date--input" }, this.getInputAttrs(input), { key: input, value: this.getDateComponent(input), onInput: this.createInputHandler(input, i), onChange: this.createChangeHandler(input), onClick: this.onInputClick, onBlur: this.handleBlur, onKeyDown: this.createKeyDownHandler(i), onPaste: this.handlePaste })), i < this.inputOrder.length - 1 &&
-            h("span", { "aria-hidden": "true", class: "r-input-date--delimiter" }, this.delimiter)))), h("input", Object.assign({ key: 'fdebeb8a48fd0fc10233166db94e928fc4b424de', type: "hidden" }, dateInputAttrs, { value: this.value, ref: (el) => this.nativeElement = el }))), h("div", { key: '4324ae4593512d0bd16f843e60c2058859cc1ba1', class: "r-input-date--trailing" }, this.readonly &&
-            h("r-icon", { key: '673fb144899c62d9b5d9267b35ce1f197b1f6549', class: "r-input-date--readonly-icon", name: "pen-disabled", size: "s" }), valid &&
-            h("r-icon", { key: '26828285dad4ccae6ebc8d29a2f4e1e6a5d92a6d', name: "circled-check", size: "s", color: "var(--r-status-success-regular)" }), this.hasTrailingSlot && h("slot", { key: 'bda392fa837a8fba6917fed22ff356c4e6f15b85', name: "trailing" }))), h("div", { key: 'a6d891a2f2bf3456d5cbb3ec27c6cef0bce7d434', id: `${uniqueId}-message`, "aria-live": "polite", class: "r-input-date--message" }, this.hasMessage && h("r-hint", { key: '8a3316ce851bfa02b9ca1a1fad8fde6f48a7fab6', variant: "error" }, this.message)))));
+                h("slot", { name: "label" }))), h("slot", { key: 'b3bb261cb82002f7c41470bb9ca09110c6f7a345', name: "popover" })), hint &&
+            h("r-hint", { key: '606d8d0f83416914627b23f901838c55f65b6adc', id: `${uniqueId}-hint`, role: "note" }, hint), h("div", { key: '46ca5170c4eafd18464dd7575ab41263907e2116', class: "r-input-date--container" }, h("r-icon", { key: '488dc02a12c354dc9fdd5d814b2c63dbd080175f', name: "calendar", size: "s", class: "r-input-date--calendar-icon" }), h("div", { key: '69ef56323ea2c1d90121dc280cb2072701558064', class: "r-input-date--inputs" }, this.inputOrder.map((input, i) => (h(Fragment, null, h("input", Object.assign({ class: "r-input-date--input" }, this.getInputAttrs(input), { key: input, value: this.getDateComponent(input), onInput: this.createInputHandler(input, i), onChange: this.createChangeHandler(input), onClick: this.onInputClick, onBlur: this.handleBlur, onKeyDown: this.createKeyDownHandler(i), onPaste: this.handlePaste })), i < this.inputOrder.length - 1 &&
+            h("span", { "aria-hidden": "true", class: "r-input-date--delimiter" }, this.delimiter)))), h("input", Object.assign({ key: '918cf85992a45287c77df5f937f82d0f6f316bf1', type: "hidden" }, dateInputAttrs, { value: this.value, ref: (el) => this.nativeElement = el }))), h("div", { key: '57dbce64441410f59571417fce01213af7ee146f', class: "r-input-date--trailing" }, this.readonly &&
+            h("r-icon", { key: 'e60109ba459f42e391a972cd7fdbd9fba134244f', class: "r-input-date--readonly-icon", name: "pen-disabled", size: "s" }), valid &&
+            h("r-icon", { key: '0c5af571965830bffdb226d94e4d2a2f4a158553', name: "circled-check", size: "s", color: "var(--r-status-success-regular)" }), this.hasTrailingSlot && h("slot", { key: '2b3836138862a6b6538aa75ddc2929b63f85667e', name: "trailing" }))), h("div", { key: 'd07f45f25bd1c6ad19f7feacf24cab515c40aa01', id: `${uniqueId}-message`, "aria-live": "polite", class: "r-input-date--message" }, this.hasMessage && h("r-hint", { key: '7974223f426574a5b6a54bbf773007475dfb6450', variant: "error" }, this.message)))));
     }
     static get is() { return "r-input-date"; }
     static get encapsulation() { return "shadow"; }
@@ -1193,6 +1198,27 @@ export class InputDate {
                         }]
                 }
             },
+            "setCustomValidity": {
+                "complexType": {
+                    "signature": "(message: string) => Promise<void>",
+                    "parameters": [{
+                            "name": "message",
+                            "type": "string",
+                            "docs": ""
+                        }],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Validates an element, displays provided message in case value is invalid.",
+                    "tags": []
+                }
+            },
             "checkValidity": {
                 "complexType": {
                     "signature": "() => Promise<boolean>",

package/dist/collection/components/input-password/input-password.js

@@ -163,6 +163,11 @@ export class InputPassword {
         this.value = value;
         this.validateFormElement(this.nativeElement);
     }
+    /** Validates an element, displays provided message in case value is invalid. */
+    async setCustomValidity(message) {
+        this.customErrorMessage = message;
+        this.validateFormElement(this.nativeElement);
+    }
     /**
      * Validates the input password without triggering UI and returns a boolean indicating its validity.
      * @returns A boolean indicating whether the input password is valid.
@@ -191,7 +196,7 @@ export class InputPassword {
     }
     get hasValidationError() {
         var _a, _b;
-        return this.validityState !== 'valid' && (!!((_a = this.customErrorMessage) === null || _a === void 0 ? void 0 : _a.length) || !!((_b = this.validityMessage) === null || _b === void 0 ? void 0 : _b.length));
+        return this.validityState && this.validityState !== 'valid' && (!!((_a = this.customErrorMessage) === null || _a === void 0 ? void 0 : _a.length) || !!((_b = this.validityMessage) === null || _b === void 0 ? void 0 : _b.length));
     }
     get hasMessage() {
         return this.hasError || this.hasValidationError;
@@ -244,8 +249,8 @@ export class InputPassword {
             tooShortMessage,
             patternMismatchMessage
         };
-        return (h(Host, { key: 'c4f877854375e558677df5f33682e37e048382be' }, h("r-input", Object.assign({ key: '97941b514a5f4f48b7c043ea0641cc5f26ab2ced' }, inputAttrs, { ref: (el) => this.nativeElement = el, type: showed ? 'text' : 'password', onRInput: this.onInput, onRChange: this.onChange, onKeyUp: this.handleKeyup, onRBlur: this.handleBlur }), h("r-icon", { key: '6c59c76305a41bcd4c0bfc109f7e207a871118e5', name: "padlock-closed", size: "s", slot: "leading" }), h("slot", { key: '921c7c3309a362a0e1d273e382bc43fe9a627257', name: "popover", slot: "popover" }), h("r-icon-button", { key: 'cd258b86fec5b52818fe711b078514feee825866', slot: "trailing", name: showed ? 'eye-crossed-out' : 'eye', size: "s", disabled: disabled, label: showed ? hidePasswordAriaLabel : showPasswordAriaLabel, onClick: this.onShowClick }), this.hasMessage &&
-            h("r-hint", { key: '667984f03375ec43be01732309020c45c81d9306', slot: "message", variant: "error" }, this.hasError && this.error, this.hasValidationError && (this.customErrorMessage || this.validityMessage))), h("div", { key: '6d950d7eb59905342e328047f45f9b5ae3f6f8cb', class: "visually-hidden", ref: el => this.passwordVisibilityChangeAlertContainer = el, "aria-live": "polite" })));
+        return (h(Host, { key: '197cfacad4b600eb5c348d496b7a406daf664202' }, h("r-input", Object.assign({ key: 'f9f1fae507ed66bfb309e1765ae266d7c4e91962' }, inputAttrs, { ref: (el) => this.nativeElement = el, type: showed ? 'text' : 'password', onRInput: this.onInput, onRChange: this.onChange, onKeyUp: this.handleKeyup, onRBlur: this.handleBlur }), h("r-icon", { key: 'e8ddd11585c68f22b951cf2a7fce1c7e8b5da0d2', name: "padlock-closed", size: "s", slot: "leading" }), h("slot", { key: '39ecae0c2028d64e1afcf1e84b1dd27931e17227', name: "popover", slot: "popover" }), h("r-icon-button", { key: 'de56d2a8366b2687ea3d2be99f1c1ab49275e0e3', slot: "trailing", name: showed ? 'eye-crossed-out' : 'eye', size: "s", disabled: disabled, label: showed ? hidePasswordAriaLabel : showPasswordAriaLabel, onClick: this.onShowClick }), this.hasMessage &&
+            h("r-hint", { key: '91c2c93dd827ac3c0b233217dc0aa26fc3a55f18', slot: "message", variant: "error" }, this.hasError && this.error, this.hasValidationError && (this.customErrorMessage || this.validityMessage))), h("div", { key: 'faa2b8b1ff5af58e6524a9ea3c5fe08a446e6ff4', class: "visually-hidden", ref: el => this.passwordVisibilityChangeAlertContainer = el, "aria-live": "polite" })));
     }
     static get is() { return "r-input-password"; }
     static get encapsulation() { return "shadow"; }
@@ -1025,6 +1030,27 @@ export class InputPassword {
                     "tags": []
                 }
             },
+            "setCustomValidity": {
+                "complexType": {
+                    "signature": "(message: string) => Promise<void>",
+                    "parameters": [{
+                            "name": "message",
+                            "type": "string",
+                            "docs": ""
+                        }],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Validates an element, displays provided message in case value is invalid.",
+                    "tags": []
+                }
+            },
             "checkValidity": {
                 "complexType": {
                     "signature": "() => Promise<boolean>",

package/dist/collection/components/input-phone-number/input-phone-number.js

@@ -77,7 +77,7 @@ export class InputPhoneNumber {
             const isPhoneNumberValid = this.countryCode ? this.getPhoneValidationResult(this.phoneNumber, this.countryCode).isValid : false;
             if (!isPhoneNumberValid) {
                 validityState = 'invalid';
-                validityMessage = this.customErrorMessage;
+                validityMessage = this.invalidPhoneNumberMessage;
                 return { validityState, validityMessage };
             }
             validityState = 'valid';
@@ -183,8 +183,8 @@ export class InputPhoneNumber {
         return this.invalid && !!((_a = this.error) === null || _a === void 0 ? void 0 : _a.length);
     }
     get hasValidationError() {
-        var _a;
-        return this.validityState !== 'valid' && !!((_a = this.validityMessage) === null || _a === void 0 ? void 0 : _a.length);
+        var _a, _b;
+        return this.validityState && this.validityState !== 'valid' && (!!((_a = this.customErrorMessage) === null || _a === void 0 ? void 0 : _a.length) || !!((_b = this.validityMessage) === null || _b === void 0 ? void 0 : _b.length));
     }
     get hasMessage() {
         return this.hasError || this.hasValidationError;
@@ -284,9 +284,9 @@ export class InputPhoneNumber {
             disabled,
             'aria-describedby': this.ariaDescribedBy
         };
-        return (h(Host, { key: '609e5cd2c326c30866617a238f7c92bb8b2d5e8d' }, h("div", { key: '44eaa8f48fddbdc9dfe43700b4b68650345e1352', class: "r-input-phone-number--label-container" }, h("label", { key: 'fd55a14c4491ed6cad0885aaa5add8d827ae4215', id: `${uniqueId}-label` }, label &&
-            h("r-label", Object.assign({ key: 'bdeb1325cefaf4ac82628e497133c3eabfa685d3' }, labelAttr), label)), h("slot", { key: '38a4fd3c1f5ed0748ef9df0e2f6cd93ff8d1d39f', name: "popover" })), hint &&
-            h("r-hint", { key: '9fddd5b8053220e2339fe073cf1d897d0c34c23e', id: `${uniqueId}-hint`, role: "note" }, hint), h("div", { key: 'c493d4fe2f75cfa25fc404e985800175dfc75603', class: "r-input-phone-number", role: "group", "aria-labelledby": `${uniqueId}-label`, "aria-describedby": this.ariaDescribedBy }, h("slot", { key: 'ee98939143432df877ac2b7c2bbb7d87fd01f0a7' }), h("r-input", { key: '552c038f9225dd60b3b1957aaa1ceb3587c5f64d', label: inputLabel, value: phoneNumber, internal: true, valid: valid, invalid: invalid, required: required, readonly: this.readonly, novalidate: true, fullWidth: fullWidth, type: "tel", error: this.errorMessage || '', onRInput: this.handleOnInput, onRChange: this.handleInputOnChange, disabled: disabled })), h("input", Object.assign({ key: '11edb8cd2f8d6459ffbdef96263016ee25818fc0', type: "hidden" }, inputAttrs, { readonly: this.readonly, value: fullPhoneNumber, ref: el => this.nativeElement = el })), h("r-hint", { key: '809dbf93afc32271fd6d4930c0f547d8464b4db0', "aria-live": "polite", "aria-atomic": "true", id: `${uniqueId}-message`, class: !this.hasMessage && 'visually-hidden', variant: "error" }, this.hasMessage ? (this.hasError ? this.error : this.validityMessage) : '')));
+        return (h(Host, { key: 'e5170613c08f3927d2a65cb7649cd29d27954b99' }, h("div", { key: '42e8954e2140be50ea42290779af01522e0e39e7', class: "r-input-phone-number--label-container" }, h("label", { key: '0dbd4ad0d762f97d4a2242f1dc95ba8cd9039ce0', id: `${uniqueId}-label` }, label &&
+            h("r-label", Object.assign({ key: 'ec76421b8dad5b1ed58cb0302d7c8d32fed66735' }, labelAttr), label)), h("slot", { key: 'c9e8a6fb83822826f5a1f62cedb06169715dac52', name: "popover" })), hint &&
+            h("r-hint", { key: 'c0755d106d3d01f6f6c0ab1d939337d98e014652', id: `${uniqueId}-hint`, role: "note" }, hint), h("div", { key: 'e32fe35fed92c7a729231164705ef6437060775e', class: "r-input-phone-number", role: "group", "aria-labelledby": `${uniqueId}-label`, "aria-describedby": this.ariaDescribedBy }, h("slot", { key: 'cc2d797e9f9c5b5a21d6e8a7a7d6c7edb2d2b88a' }), h("r-input", { key: 'c3402afa0f6f30afb61b81c947272368dfabbbcf', label: inputLabel, value: phoneNumber, internal: true, valid: valid, invalid: invalid, required: required, readonly: this.readonly, novalidate: true, fullWidth: fullWidth, type: "tel", error: this.errorMessage || '', onRInput: this.handleOnInput, onRChange: this.handleInputOnChange, disabled: disabled })), h("input", Object.assign({ key: 'cd814c1b35708f56a911b4d93e907f9a2fac0f1c', type: "hidden" }, inputAttrs, { readonly: this.readonly, value: fullPhoneNumber, ref: el => this.nativeElement = el })), h("r-hint", { key: '211661682d51d22ffe93a6e993e03a3c89cc76e2', "aria-live": "polite", "aria-atomic": "true", id: `${uniqueId}-message`, class: !this.hasMessage && 'visually-hidden', variant: "error" }, this.hasMessage ? (this.hasError ? this.error : (this.customErrorMessage || this.validityMessage)) : '')));
     }
     static get is() { return "r-input-phone-number"; }
     static get encapsulation() { return "shadow"; }
@@ -628,6 +628,25 @@ export class InputPhoneNumber {
                 "setter": false,
                 "reflect": false
             },
+            "invalidPhoneNumberMessage": {
+                "type": "string",
+                "attribute": "invalid-phone-number-message",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Custom error message displayed when phone number is not valid."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false
+            },
             "fullWidth": {
                 "type": "boolean",
                 "attribute": "full-width",

package/dist/collection/components/label/label.js

@@ -6,8 +6,8 @@ import { Host, h } from "@stencil/core";
 export class RLabel {
     render() {
         const { fieldIndicator } = this;
-        return (h(Host, { key: '4a8c827bf39bac03424a1caefeb8795871b08276' }, h("div", { key: '212ea6fc9e2476361083610c6b8801ea3a4d79e9', class: "r-label" }, h("span", { key: '0bf0a1fc635553165fe02937626cba8a44854f3d', class: "r-label--slot" }, h("slot", { key: '16165450aeffd754cbcac5640297ab4efe94bf4c' }), fieldIndicator &&
-            h("span", { key: '34e19397cff4fa69839475ece1077c4271d9ceb4', class: "r-label--marker" }, fieldIndicator)))));
+        return (h(Host, { key: '41d52212a7098aa6ade47a1c102aff67548d2e63' }, h("div", { key: 'af64253a7cbdc37ea5e96fbc8d360a32944c001c', class: "r-label" }, h("span", { key: 'fa82843b9c0546f2cfd48ef53cd335a48fef4082', class: "r-label--slot" }, h("slot", { key: 'f430fb90c898f4d8695b9e9acba637de74faf49f' }), fieldIndicator &&
+            h("span", { key: '1e68a5cb6bb792553370048b96371a1af8a0a3ad', class: "r-label--marker" }, fieldIndicator)))));
     }
     static get is() { return "r-label"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/pagination/pagination.js

@@ -182,6 +182,9 @@ export class RPagination {
         }
         return isArrowButton ? buttonElement : (_e = this.el.shadowRoot) === null || _e === void 0 ? void 0 : _e.querySelector(`.r-pagination--item[data-index="${this.pageActive}"]`);
     }
+    handlePropsChange() {
+        this.setPaginationState();
+    }
     componentWillLoad() {
         this.setPaginationState();
     }
@@ -193,9 +196,6 @@ export class RPagination {
     componentDidRender() {
         this.syncHeaderWidth();
     }
-    componentDidUpdate() {
-        this.setPaginationState(); // Recalculate when props change
-    }
     render() {
         const { active, previous, next, first, itemsPerPage, itemsPerPageOptions, startText, middleText, endText, selectText, listBoxPosition } = this;
         const itemTemplate = (type, index) => {
@@ -796,4 +796,19 @@ export class RPagination {
             }];
     }
     static get elementRef() { return "el"; }
+    static get watchers() {
+        return [{
+                "propName": "totalResults",
+                "methodName": "handlePropsChange"
+            }, {
+                "propName": "itemsPerPage",
+                "methodName": "handlePropsChange"
+            }, {
+                "propName": "variant",
+                "methodName": "handlePropsChange"
+            }, {
+                "propName": "pageActive",
+                "methodName": "handlePropsChange"
+            }];
+    }
 }

package/dist/collection/components/panel/panel.js

@@ -161,10 +161,10 @@ export class Panel {
         }
     }
     render() {
-        return (h(Host, { key: '0404a2c3acbba8414d7baffc8c0f861e512fe7cb', role: "navigation", collapsed: this.isCollapsed }, h("div", { key: 'b93d1555f060793b7137fd6aac0de2a1a1f35436', class: "r-panel" }, h("div", { key: 'b7dd2dee4c145a21a5a963750e8b26ab2d8b9bbe', class: "r-panel--header" }, this.hasHeader && (h("a", { key: 'dbb02cd6271fba2a5d4a783a20d5e6d9e34ee734', class: "logo-wrapper", href: this.logoLink }, this.isCollapsed ?
+        return (h(Host, { key: '44996078c23da8ce9b5b48044d24d45778e688b4', role: "navigation", collapsed: this.isCollapsed }, h("div", { key: 'a217b08d3fda5e4f8761d971074e3de797363f32', class: "r-panel" }, h("div", { key: '8ff71b762feffd1cc9478014e011fc60875a5e3d', class: "r-panel--header" }, this.hasHeader && (h("a", { key: '9ad8475299e9f04341cc1c4b5b9e65551f2f6ca2', class: "logo-wrapper", href: this.logoLink }, this.isCollapsed ?
             h("slot", { name: "logo-collapsed" })
             :
-                h("slot", { name: "logo-expanded" }))), this.variant === 'modal' ? (h("r-button", { class: "r-panel--trigger", variant: "blank", icon: "cross", rAriaLabel: `${this.labelCollapse}`, onClick: this.handleFullyCollapsedButtonClick })) : this.variant === 'drawer' ? (h("r-button", { class: "r-panel--trigger", variant: "blank", icon: "angle-left", rAriaLabel: this.isCollapsed ? `${this.labelExpand}` : `${this.labelCollapse}`, onClick: this.handleSemiCollapsedButtonClick })) : this.variant === 'visible' ? (null) : null), h("div", { key: 'bb3d86b7a4b0890709d4a4637eca033ddaec24a6', class: "r-panel--body" }, h("slot", { key: '201aa3f616d3d239fc7b0edc23565a6618304ce5' })), this.hasFooter && !this.isCollapsed && (h("div", { key: 'a15f34fbb86ad8b16c6d036b885c7c8b13655fc6', class: "r-panel--footer" }, h("slot", { key: '41de73edf832d3a5ca93e4f9a79a62780fdcd68b', name: "footer" }))))));
+                h("slot", { name: "logo-expanded" }))), this.variant === 'modal' ? (h("r-button", { class: "r-panel--trigger", variant: "blank", icon: "cross", rAriaLabel: `${this.labelCollapse}`, onClick: this.handleFullyCollapsedButtonClick })) : this.variant === 'drawer' ? (h("r-button", { class: "r-panel--trigger", variant: "blank", icon: "angle-left", rAriaLabel: this.isCollapsed ? `${this.labelExpand}` : `${this.labelCollapse}`, onClick: this.handleSemiCollapsedButtonClick })) : this.variant === 'visible' ? (null) : null), h("div", { key: '14b5a3ee0e11eda6585a84e0f05aa682950fbce2', class: "r-panel--body" }, h("slot", { key: 'e008d4f4796415779cd8e3dbda696b966b4ac184' })), this.hasFooter && !this.isCollapsed && (h("div", { key: '702c5859f2a7aa60903ec1df29f8977cf46dd0b8', class: "r-panel--footer" }, h("slot", { key: '347796d3e0bbffed77ae9368270f6e27eb93e156', name: "footer" }))))));
     }
     static get is() { return "r-panel"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/popover/popover.js

@@ -321,8 +321,8 @@ export class Popover {
     }
     render() {
         const TAG = !this.activeElement ? 'button' : 'div';
-        return (h(Host, { key: 'f836d35a44519d273dc399d0ae6142f17e78888e', id: this.uniqueId, "data-position": this.positionState, "data-open": `${this.isOpen}`, open: this.isOpen }, h("div", { key: '88146350c8695487a18028a20bf1313052b35870', class: "r-popover" }, h(TAG, { key: 'de1a53f1f921acc223ebd0276b46e43832e5a82f', class: "r-popover--trigger", "aria-label": !this.activeElement ? this.triggerAriaLabel : null, ref: el => this.triggerElement = el, "aria-haspopup": "dialog", popoverTarget: !this.activeElement ? `${this.uniqueId}-board` : null, popoverTargetAction: !this.activeElement ? this.triggerAction : null }, h("slot", { key: '2946f68024273f6b7bbb250faca7794eb712cc58', name: "trigger" })), h("div", { key: 'cf44066fb1ec34178d73b812f5bcca3b1977575d', class: "r-popover--board", id: `${this.uniqueId}-board`, role: "dialog", "aria-label": this.headlineSlotContent, popover: this.dismissMode, ref: el => this.boardElement = el, onToggle: this.onToggle, onKeyDown: this.onKeyDown }, this.hasDismiss &&
-            h("r-icon-button", { key: '41e3e2bef98b88328984233271e7378a767eaf76', ref: el => this.dismissElement = el, class: "r-popover--dismiss", name: "cross", onClick: this.onClickDismiss, label: this.dismissAriaLabel }), h("div", { key: '9d47e8f5e2cb4d27118b64cfcf3eb83dd7d84ff0', class: "r-popover--board-content" }, h("slot", { key: '68f384a418a32a14b01adb7e3d407e4e46f8ca95', name: "headline" }), h("slot", { key: '3536f9f3aa738919115c1ad017cd0f66438fb044', name: "content" }), h("slot", { key: '4ecbf5d23cb23f9adaade04f3694a6d17f773365', name: "action" })), h("div", { key: '1c3acee058d689e106b9fca008d77229d52b2aea', class: "r-popover--board-pointer", "aria-hidden": "true" }, h("svg", { key: 'bb211b28714acc84753bbaaafee1ab1624d51b6c', width: "16", height: "8", viewBox: "0 0 16 8", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { key: '0ad29cb4ef8d2d7f62738af3b1749c5b5e007d87', d: "M8 8L0 0L16 0L8 8Z", fill: "currentColor" })))))));
+        return (h(Host, { key: '655880fb3d3f069e13bc7025f932abc192df8918', id: this.uniqueId, "data-position": this.positionState, "data-open": `${this.isOpen}`, open: this.isOpen }, h("div", { key: '6617392de14d78a1a53172fc689245749f01909a', class: "r-popover" }, h(TAG, { key: '87dc99d5ab380b7f288fa9fba0e861feacff6e20', class: "r-popover--trigger", "aria-label": !this.activeElement ? this.triggerAriaLabel : null, ref: el => this.triggerElement = el, "aria-haspopup": "dialog", popoverTarget: !this.activeElement ? `${this.uniqueId}-board` : null, popoverTargetAction: !this.activeElement ? this.triggerAction : null }, h("slot", { key: '51c875b84c1311e40292cf7fe80f7753fcd15abf', name: "trigger" })), h("div", { key: '24a2d6a90d0fe9167a08328e80ed6164c94170f0', class: "r-popover--board", id: `${this.uniqueId}-board`, role: "dialog", "aria-label": this.headlineSlotContent, popover: this.dismissMode, ref: el => this.boardElement = el, onToggle: this.onToggle, onKeyDown: this.onKeyDown }, this.hasDismiss &&
+            h("r-icon-button", { key: '51e2563b582c5300eff1a032829bfdfb4947bdb6', ref: el => this.dismissElement = el, class: "r-popover--dismiss", name: "cross", onClick: this.onClickDismiss, label: this.dismissAriaLabel }), h("div", { key: '6abf0772e1b45c1c6be7eeeb5a0b37469e17c4de', class: "r-popover--board-content" }, h("slot", { key: 'd4af6923192d72fb77e0591dbc9f163965fdb9b7', name: "headline" }), h("slot", { key: '469fb95a09ce36ad41b7a76e3f09c8834c4e7e14', name: "content" }), h("slot", { key: '17145240e43b06ae7186ad8d46a3d10b7996d3f2', name: "action" })), h("div", { key: '68e7ce9cdbe5c5b765d5866d9ea6c80d6b830630', class: "r-popover--board-pointer", "aria-hidden": "true" }, h("svg", { key: '55d0e368d2af54a082fc8323b9b1e40457a5a62b', width: "16", height: "8", viewBox: "0 0 16 8", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { key: '86db95e48bed58187dea614c81527f6bd7ef9f3e', d: "M8 8L0 0L16 0L8 8Z", fill: "currentColor" })))))));
     }
     static get is() { return "r-popover"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/popover-action/popover-action.js

@@ -64,7 +64,7 @@ export class PopoverAction {
         return focusableElements(this.host);
     }
     render() {
-        return (h(Host, { key: '8e0de158033b48c66aa49930911e1f383c2010ae', slot: "action" }, h("slot", { key: 'b9c762d2c1774600a29306559253125abc21cbcd', onSlotchange: this.handleSlotChange })));
+        return (h(Host, { key: 'a2e9f0482b6de85e54d5fb6c748113efbb76b887', slot: "action" }, h("slot", { key: '656f07644cd0d2e9a15263f644676a3e698d005d', onSlotchange: this.handleSlotChange })));
     }
     static get is() { return "r-popover-action"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/popover-content/popover-content.js

@@ -44,7 +44,7 @@ export class PopoverContent {
         return focusableElements(this.host);
     }
     render() {
-        return (h(Host, { key: 'f05a31b3948094f5f7ca657f4bd81474af2fcb6e', slot: "content", class: "r-typography" }, h("slot", { key: '0ecbe8de6c0ec200499aead61fc883804c4c4dd7' })));
+        return (h(Host, { key: '2384c04a8610e5d26bcd3e3fb4e70c99fca7d76a', slot: "content", class: "r-typography" }, h("slot", { key: '52ce40873c2e32725ee8ef8fc385d498ff8b973c' })));
     }
     static get is() { return "r-popover-content"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/popover-headline/popover-headline.js

@@ -10,7 +10,7 @@ export class PopoverHeadline {
         stopInverseThemeAwareness(this.host, themeContextElement);
     }
     render() {
-        return (h(Host, { key: '21f1656241f40201d5eb98cfb454d9c509f6cfe1', slot: "headline" }, h("slot", { key: 'fa9861bd13bcb23b420c5b5aa085ba6ceecb3df4' })));
+        return (h(Host, { key: 'bdbaecb36f49d54a1b33ef27d1c954834df68198', slot: "headline" }, h("slot", { key: '82eb6ae289211e5a23149e12125c1c30cf6b3ffd' })));
     }
     static get is() { return "r-popover-headline"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/popover-trigger/popover-trigger.js

@@ -53,7 +53,7 @@ export class PopoverTrigger {
         (_a = this.activeElement) === null || _a === void 0 ? void 0 : _a.blur();
     }
     render() {
-        return (h(Host, { key: '313cccef6d7f463a6088581b2efc3057a97d61b2', slot: "trigger", onMouseEnter: this.handleMouseEnter, onMouseLeave: this.handleMouseLeave }, h("slot", { key: '65ff3ba6c677c693445c0c82feae795a94768cf8' })));
+        return (h(Host, { key: '6c97f11b7263d0cf574fdafcef3d7a9733fe7925', slot: "trigger", onMouseEnter: this.handleMouseEnter, onMouseLeave: this.handleMouseLeave }, h("slot", { key: '7d434e3505eda793e8d1d50f9fb1aa608061fa50' })));
     }
     static get is() { return "r-popover-trigger"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/progress-bar/progress-bar.js

@@ -11,7 +11,7 @@ export class ProgressBar {
             max: '100',
             'aria-label': rAriaLabel
         };
-        return (h(Host, { key: '8d8307ebac0b8a231569bd86c35175d9f11e14ac' }, h("progress", Object.assign({ key: '631b8ecaaca4fde5c14ddabb74ff076610557832' }, progressBarAttrs, { class: "r-progress-bar" }))));
+        return (h(Host, { key: '832812688a18bea634c8ff2c5ea69599cdefdcff' }, h("progress", Object.assign({ key: 'd3384feada9ee1594e3ee331377d30ae1e8725f1' }, progressBarAttrs, { class: "r-progress-bar" }))));
     }
     static get is() { return "r-progress-bar"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/radio-button/radio-button.js

@@ -118,11 +118,11 @@ export class RadioButton {
             required,
             autofocus
         };
-        return (h(Host, { key: 'cf6b1b5db202773a2c6eea4df6a9303275054a73' }, h("label", { key: '4e203583a2b779e239c2893eadccc3514f84b0c4', class: "r-radio-button", onClick: this.onClick, onKeyDown: this.onKeydown }, h("input", Object.assign({ key: '14e89b050928abd51b66e8637c39bbd8da8e9856' }, inputAttrs, { id: `${uniqueId}-input`, class: "r-radio-button--input", ref: el => this.nativeEl = el, onFocus: this.onFocus, onBlur: this.onBlur })), h("span", { key: 'ee55afd60c5dbb947e9c12fffc401f7acfcefada', class: "r-radio-button--box" }), this.isLeading &&
-            h("div", { key: 'eabd27b399dee0bc2cef0fb7a92adad55095708b', class: "r-radio-button--leading" }, h("slot", { key: '5ec99653141268456cf9c8b2398f70c7b1afd36d', name: "leading" }, this.icon && h("r-icon", { key: '47662e84ad1aac02e867ddd040b5b7e1890ba986', name: this.icon, size: "m" }))), h("div", { key: 'bcaaf67c6cdf95a0bfa0dd5784d69c237e551a0e', class: "r-radio-button--text" }, h("slot", { key: 'a54f1823afe368d85f9bd4743ac0aa1df7298049', name: "title" }, h("div", { key: 'b531b659b920d7f064f10e622b83099d14270935', style: { display: 'contents' } }, h("slot", { key: 'b51f3e83234681804c49cb1043d90de70e4929db' }))), h("slot", { key: 'd217abfd3675898afd5b41a543200f7104019aed', name: "description" }, this.description)), this.isTrailing &&
-            h("div", { key: '664ddcc19dba3029343532caa13b05a6e3834977', class: "r-radio-button--trailing" }, h("slot", { key: 'b4ec626236a01c9c74b20ae09194ea414bc7699c', name: "trailing" }))), invalid && error &&
-            h("r-hint", { key: 'bd60d4337984662f410613b470b6e3be695343f5', role: "alert", variant: "error", id: `${uniqueId}-hint` }, this.error), hint &&
-            h("r-hint", { key: '31c5712fe6f2164219e28484a40ce5452a836743', role: "note", variant: "information", id: `${uniqueId}-hint` }, hint)));
+        return (h(Host, { key: 'ce9e98b6480c18675ac0dac4b118e574872f9af7' }, h("label", { key: 'adb23e0f9092e7c5bc2c0c70df71fa255f8a441b', class: "r-radio-button", onClick: this.onClick, onKeyDown: this.onKeydown }, h("input", Object.assign({ key: 'cdd35d3caebb8e7eb8162dcc97c73f85067a55bb' }, inputAttrs, { id: `${uniqueId}-input`, class: "r-radio-button--input", ref: el => this.nativeEl = el, onFocus: this.onFocus, onBlur: this.onBlur })), h("span", { key: '89e258e8d5b41a51ff48ad26f1e83bcdb447089a', class: "r-radio-button--box" }), this.isLeading &&
+            h("div", { key: '14e5cbd3fb54b86761f68f53f64081be3021bf9d', class: "r-radio-button--leading" }, h("slot", { key: '8350ee29002de443338179d8e926356fa080cb97', name: "leading" }, this.icon && h("r-icon", { key: 'ba1ad94e6eabd2aa113e46ddc4f5f7cdc8e39635', name: this.icon, size: "m" }))), h("div", { key: '75c735e748dc36c3c785cb048f920060f31c7c9a', class: "r-radio-button--text" }, h("slot", { key: 'b2f39d35860d6ed36bf1913836af065ed093a9b4', name: "title" }, h("div", { key: '4f6fdd992b61a01c13810fbee76f66d514f8e8e2', style: { display: 'contents' } }, h("slot", { key: 'b0d6d3eb4b9687751822fd6e026cc5eec2fe3d6b' }))), h("slot", { key: '66f2d4a0262d494b4c5c700e48abb7210e5fc8df', name: "description" }, this.description)), this.isTrailing &&
+            h("div", { key: '64bb5efd43a7e52461dff3e3416c968bbe44d1a4', class: "r-radio-button--trailing" }, h("slot", { key: '20798c2198cc1360f6b04fa0a94984bb697eda6c', name: "trailing" }))), invalid && error &&
+            h("r-hint", { key: '06bd4aa937a926612c428e9f9cfcde98e60c6ca7', role: "alert", variant: "error", id: `${uniqueId}-hint` }, this.error), hint &&
+            h("r-hint", { key: '5031e00344241c184fb8ef2aa8275274415b8a3e', role: "note", variant: "information", id: `${uniqueId}-hint` }, hint)));
     }
     static get is() { return "r-radio-button"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/radio-button-description/radio-button-description.js

@@ -4,7 +4,7 @@ import { Host, h } from "@stencil/core";
  */
 export class RadioButtonDescription {
     render() {
-        return (h(Host, { key: '0cc8dafb54d3b65f6c3af977bde4019ac413042d', slot: "description" }, h("div", { key: '7347ec0238fbf3c8471cdcf6fb3cf303a0f9c4e7', class: "r-radio-button-description", style: { display: 'contents' } }, h("slot", { key: '940714dd9b350c10b47486454139506d38fa0366' }))));
+        return (h(Host, { key: '30f29f811a727ba758a1e5b89fb86baf78076694', slot: "description" }, h("div", { key: '233da5297c2b1e47def8e92f0d8e9a5fba846dc8', class: "r-radio-button-description", style: { display: 'contents' } }, h("slot", { key: 'f00f06ec8f07b3995fb2249977cad70df930a4c9' }))));
     }
     static get is() { return "r-radio-button-description"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/radio-button-leading/radio-button-leading.js

@@ -4,7 +4,7 @@ import { Host, h } from "@stencil/core";
  */
 export class RadioButtonLeading {
     render() {
-        return (h(Host, { key: '2f4f3dae827959cebf6a5b5797d8942b6fbbeded', slot: "leading" }, h("div", { key: '6dfda6f9bf0c88056d3d46f095b1f30e615ac5d7', class: "r-radio-button-leading", style: { display: 'contents' } }, h("slot", { key: 'd909c93595d5f43ad3d8b93262134b52fbfde23c' }))));
+        return (h(Host, { key: 'fcfa2b1df999df8a168bd0255ad7855dce28485c', slot: "leading" }, h("div", { key: '2d0e091a66adb24576f5e4a2f0959b8c83dc2017', class: "r-radio-button-leading", style: { display: 'contents' } }, h("slot", { key: 'cebdf0262db3ce092efbe2e8e830aa54903aa59e' }))));
     }
     static get is() { return "r-radio-button-leading"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/radio-button-title/radio-button-title.js

@@ -4,7 +4,7 @@ import { Host, h } from "@stencil/core";
  */
 export class RadioButtonTitle {
     render() {
-        return (h(Host, { key: '2d2ae73f63409f55e0d5920c351cfed20d3b69d9', slot: "title" }, h("div", { key: '8f0ed8680798a41ddf827e74b245e43464f51eb0', class: "r-radio-button-title", style: { display: 'contents' } }, h("slot", { key: '336df52466bdad5baa93b1ed6abb192bee958e30' }))));
+        return (h(Host, { key: '12da195c66d902eba41e84b1ccaf3efbabbac144', slot: "title" }, h("div", { key: '84fc3a3e1d0b9b641a7fb859d03e904b5009cb44', class: "r-radio-button-title", style: { display: 'contents' } }, h("slot", { key: '6562965e5dfa79f4b9f80f22b4293e8ea600e4b2' }))));
     }
     static get is() { return "r-radio-button-title"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/radio-button-trailing/radio-button-trailing.js

@@ -4,7 +4,7 @@ import { Host, h } from "@stencil/core";
  */
 export class RadioButtonTrailing {
     render() {
-        return (h(Host, { key: '628b87d2952aad3e25f8fd6b0b61c6db06a15959', slot: "trailing" }, h("div", { key: '93d2888f3e10e6346fda143ba8d0757d2913a503', class: "r-radio-button-trailing", style: { display: 'contents' } }, h("slot", { key: '5929143a1c1b54e9e3f082dd54c2e1376a80dece' }))));
+        return (h(Host, { key: 'b9fc1731ecc2b522e341cfaceb5b703c8d74253f', slot: "trailing" }, h("div", { key: 'f1319664b1543a4a784cb2cd665567a4d561bdc3', class: "r-radio-button-trailing", style: { display: 'contents' } }, h("slot", { key: 'dbed8559c3b0a5ba2580fe9e8c297e7eb947e5a5' }))));
     }
     static get is() { return "r-radio-button-trailing"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/radio-group/radio-group.js

@@ -318,6 +318,9 @@ export class RadioGroup {
         var _a, _b;
         return ((_b = (_a = this.radioButtonElements[0]) === null || _a === void 0 ? void 0 : _a.shadowRoot) === null || _b === void 0 ? void 0 : _b.querySelector('.r-radio-button--input')) || null;
     }
+    get hasValidationError() {
+        return this.validityState && this.validityState !== 'valid' && !!(this.validityMessage || this.customErrorMessage);
+    }
     passPropsToGroupItems(props = {}) {
         Object.entries(props).forEach(([key, value]) => {
             this.radioButtonElements.forEach(el => {
@@ -403,11 +406,11 @@ export class RadioGroup {
             'aria-invalid': `${invalid || false}`,
             'aria-describedby': this.ariaDescribedBy
         };
-        return (h(Host, { key: 'bd1b1d42f3efab78cf0a2cce7b1a1e2568f21765' }, h("fieldset", Object.assign({ key: 'c449667b014cf8aeea4176b0d94c82573b661182', class: "r-radio-group" }, fieldsetAttrs, { onClick: this.onLabelClick }), label &&
-            h("legend", { key: '212e27fd8d20b31cf6d84078870ec59796bb59c6', class: "r-radio-group--label-container" }, h("r-label", { key: '69907b0e2bdb49bcdea00d1849bc0c5c4d3404ae', id: `${uniqueId}-label`, class: "r-radio-group--label", "field-indicator": fieldIndicator }, label), h("slot", { key: 'd208c147248154ba26ecc5b412233d2cf479bb68', name: "popover" })), hint &&
-            h("r-hint", { key: 'b409e053226d88ac3619524b2d63864b49972985', id: `${uniqueId}-hint`, class: "r-radio-group--hint", role: "note" }, hint), h("div", { key: 'c8e98214e9b14f6fdcf97677b392abd14d653a56', class: "r-radio-group--content" }, h("slot", { key: '5e4aa07801e8f1bd7ec3262511d28f553d8740a7' })), h("div", { key: 'a576e8c91d33877eb677d5551ac18d10924586fd', id: `${uniqueId}-message`, "aria-live": "polite", role: "alert", class: "r-radio-group--message" }, invalid && error &&
-            h("r-hint", { key: '98f7fa6855c0803ae5d31a3a248c146679204af9', variant: "error" }, error), this.validityState !== 'valid' && this.validityMessage &&
-            h("r-hint", { key: 'de1997af842a7e5fdb887a830fd0fe701e4fa5ce', variant: "error" }, this.customErrorMessage || this.validityMessage)))));
+        return (h(Host, { key: 'a542762b5523cd568341316eb9e1d3ba328662f3' }, h("fieldset", Object.assign({ key: 'cd6877a67816eff8a423a60ef1e9079cab4ea21a', class: "r-radio-group" }, fieldsetAttrs, { onClick: this.onLabelClick }), label &&
+            h("legend", { key: '00adcfa6fa8296f295b48f90d19b11928fb580d6', class: "r-radio-group--label-container" }, h("r-label", { key: 'f353298317ffe0043dd0dae0905499ef17fa90ba', id: `${uniqueId}-label`, class: "r-radio-group--label", "field-indicator": fieldIndicator }, label), h("slot", { key: '5e9ecf61a1a65f20ed3e48006f2a913723bdfb38', name: "popover" })), hint &&
+            h("r-hint", { key: '0e266db62c6bb2f8a770502ab64ca7f2edc54d39', id: `${uniqueId}-hint`, class: "r-radio-group--hint", role: "note" }, hint), h("div", { key: '2d951da223a892721db7e5d858e52b27eebfcf98', class: "r-radio-group--content" }, h("slot", { key: '341225a7be93a07fa9c3e4c96241f84c8008b182' })), h("div", { key: '255d3bbd8fd5b192e4dd2cca03bb7b0e2bdefd0e', id: `${uniqueId}-message`, "aria-live": "polite", role: "alert", class: "r-radio-group--message" }, invalid && error &&
+            h("r-hint", { key: '7c91e92235c2d4bd36baf327ce0bf7ed18982886', variant: "error" }, error), this.hasValidationError &&
+            h("r-hint", { key: '522a8a74f88356d42929f9e1fe4ab2a4326d25d7', "aria-live": "polite", id: `${uniqueId}-message`, role: "alert", variant: "error" }, this.customErrorMessage || this.validityMessage)))));
     }
     static get is() { return "r-radio-group"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/select/select.js

@@ -555,6 +555,11 @@ export class Select {
         this.touched = false;
         this.dirty = false;
     }
+    /** Validates an element, displays provided message in case value is invalid. */
+    async setCustomValidity(message) {
+        this.customErrorMessage = message;
+        this.validateFormElement(this.nativeElement);
+    }
     /**
      * Validates the textarea without triggering UI and returns a boolean indicating its validity.
      * @returns A boolean indicating whether the textarea is valid.
@@ -1013,8 +1018,9 @@ export class Select {
         return this.invalid && ((_a = this.error) === null || _a === void 0 ? void 0 : _a.length) > 0;
     }
     get hasValidationError() {
-        var _a;
-        return this.validityState !== 'valid' && ((_a = this.validityMessage) === null || _a === void 0 ? void 0 : _a.length) > 0;
+        if (!this.validityState)
+            return false;
+        return this.validityState !== 'valid' && !!(this.validityMessage || this.customErrorMessage);
     }
     get hasMessage() {
         return this.hasError || this.hasValidationError;
@@ -1082,8 +1088,8 @@ export class Select {
             disabled,
             required: isRequired
         };
-        return (h(Host, { key: 'f52fa96bdacace6070cd2baa15f8fab939d05916', "data-value": this.currentValue, expanded: !this.disabled && this.isExpanded, "data-listbox-position": this.listboxPositionState, "data-initial-value": this.initial['value'], "data-is-placeholder": `${!!this.isPlaceholder}`, "data-value-focused": `${!!this.isValueFocused}`, "data-option-focused": `${!!this.focusedOption}`, "data-validity-state": `${this.validityState || ''}`, "data-validity-message": `${this.validityMessage || ''}`, "data-readonly": `${!!this.isReadonly}`, "data-touched": `${this.touched}`, "data-dirty": `${this.dirty}` }, h("div", { key: '80326d43674f8caac11678ca4d5a6ca8178f9454', class: `r-select--label ${!internal ? 'r-select--label__margin-bottom' : ''}` }, h("div", { key: '25fa25960350a338c7c9156d38c974c0ad8a0861', class: internal ? 'visually-hidden' : 'r-select--label-container' }, h("label", { key: 'b52ac4d91e32df39459492bbeaf166d2a71d165c', id: `${uniqueId}-label`, onClick: this.isInteractive ? this.onValueClick : null }, h("r-label", Object.assign({ key: 'ac75955086f424e781baf66e6853cbc89ec20d56' }, labelAttr), label)), h("slot", { key: '4cd953da5c64a473070ce4b8a3e5721a36561685', name: "popover" })), hint &&
-            h("r-hint", { key: '2d6a2e9eae51d56f31886725274c637e76ab4d75', id: `${uniqueId}-hint`, class: "r-select--hint" }, hint)), h("div", { key: '8107a1d2475d11d6e827d7394ade84f9c4c85ea5', class: "r-select" }, h("select", Object.assign({ key: 'd7a60a4ff2f8f568da1ea90d859d5de78a1e73ef', class: "r-select--native", ref: el => this.nativeElement = el }, nativeAttrs)), h("div", { key: '9d49470c7e4cc179dfd93cb1233e2bbf86ac7641', class: "r-select--container" }, this.combobox ? this.renderCombobox(comboboxAttrs) : this.renderSelect(comboboxAttrs), h("div", Object.assign({ key: '9594f3439c7591a4e4ef359a205a55d1c56dbb80', role: "listbox", tabindex: "-1", id: `${uniqueId}-list`, class: "r-select--options", ref: el => this.listboxElement = el }, listboxAttrs), (this.isNoResultsFound || !((_a = this.optionElements) === null || _a === void 0 ? void 0 : _a.length)) && h("r-select-option", { key: 'ae0ef701ff3e7db4c17aba7d57265122c3bf6587', "data-no-results": "true", value: "no_results" }, this.noResultsFound), h("slot", { key: '012fcee55283c7bc5a3230ff23b692eca33d853b', onSlotchange: this.handleSlotChange })))), h("div", { key: '94fc769d8eeb0bd92f1d12d553b033a3de9ad8dc', id: `${uniqueId}-message`, "aria-live": "polite", "aria-atomic": "true", ref: (el) => this.messageContainer = el, class: this.hasMessage && !internal ? 'r-select--message' : 'visually-hidden' }, this.hasMessage && h("r-hint", { key: '881e60130bd3cbc9004aacbb027911357286a516', variant: this.invalid ? 'error' : 'success' }, this.hasError && this.error, this.hasValidationError && this.validityMessage))));
+        return (h(Host, { key: '760b35180f5c0e716387bf92b886aef11d33a433', "data-value": this.currentValue, expanded: !this.disabled && this.isExpanded, "data-listbox-position": this.listboxPositionState, "data-initial-value": this.initial['value'], "data-is-placeholder": `${!!this.isPlaceholder}`, "data-value-focused": `${!!this.isValueFocused}`, "data-option-focused": `${!!this.focusedOption}`, "data-validity-state": `${this.validityState || ''}`, "data-validity-message": `${this.validityMessage || ''}`, "data-readonly": `${!!this.isReadonly}`, "data-touched": `${this.touched}`, "data-dirty": `${this.dirty}` }, h("div", { key: 'ba9308fb7a9d91d0464a723ac00916832ceaef9d', class: `r-select--label ${!internal ? 'r-select--label__margin-bottom' : ''}` }, h("div", { key: '6de28553dd9a44fd3f0d8b73fffdbaabc2d724d1', class: internal ? 'visually-hidden' : 'r-select--label-container' }, h("label", { key: 'f4eb1fbe89376b3f3d886d0acfb33616a0df9e61', id: `${uniqueId}-label`, onClick: this.isInteractive ? this.onValueClick : null }, h("r-label", Object.assign({ key: 'fa2829ffca13fe5640e75650646aa0dafe44d31c' }, labelAttr), label)), h("slot", { key: '27dca50b5e65eedd73c40992734134f1e52b15d3', name: "popover" })), hint &&
+            h("r-hint", { key: '32ebd3a250e9917f51788347f8683095b701e694', id: `${uniqueId}-hint`, class: "r-select--hint" }, hint)), h("div", { key: '2e195fab570c59cd8e5c038ad2c395c08bc10592', class: "r-select" }, h("select", Object.assign({ key: '3ef7ca05510c50c2453f6c30e1faf3558c602a9c', class: "r-select--native", ref: el => this.nativeElement = el }, nativeAttrs)), h("div", { key: 'bf431b52523f3a810c60db6c20bae82f0bd12dc4', class: "r-select--container" }, this.combobox ? this.renderCombobox(comboboxAttrs) : this.renderSelect(comboboxAttrs), h("div", Object.assign({ key: 'e716d8ea4f124373a1f56f80e4c7f6b2399c6b09', role: "listbox", tabindex: "-1", id: `${uniqueId}-list`, class: "r-select--options", ref: el => this.listboxElement = el }, listboxAttrs), (this.isNoResultsFound || !((_a = this.optionElements) === null || _a === void 0 ? void 0 : _a.length)) && h("r-select-option", { key: '61e5bbcdff156c61f4f46c8fc2f8dddc30fe345a', "data-no-results": "true", value: "no_results" }, this.noResultsFound), h("slot", { key: '8b0949058681d8274aaac39d184a0e59ae91fec8', onSlotchange: this.handleSlotChange })))), h("div", { key: 'd007a8402ecea45df2d24b0169a30856a12c45a0', id: `${uniqueId}-message`, "aria-live": "polite", "aria-atomic": "true", ref: (el) => this.messageContainer = el, class: this.hasMessage && !internal ? 'r-select--message' : 'visually-hidden' }, this.hasMessage && h("r-hint", { key: '83ebfc3c344452d15213087284035853b54b1b3d', variant: this.invalid ? 'error' : 'success' }, this.hasError && this.error, this.hasValidationError && (this.customErrorMessage || this.validityMessage)))));
     }
     static get is() { return "r-select"; }
     static get encapsulation() { return "shadow"; }
@@ -1795,6 +1801,27 @@ export class Select {
                     "tags": []
                 }
             },
+            "setCustomValidity": {
+                "complexType": {
+                    "signature": "(message: string) => Promise<void>",
+                    "parameters": [{
+                            "name": "message",
+                            "type": "string",
+                            "docs": ""
+                        }],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Validates an element, displays provided message in case value is invalid.",
+                    "tags": []
+                }
+            },
             "checkValidity": {
                 "complexType": {
                     "signature": "() => Promise<boolean>",

package/dist/collection/components/select-option/select-option.js

@@ -128,7 +128,7 @@ export class SelectOption {
             size: iconSize,
             color: iconColor
         };
-        return (h(Host, { key: 'd75c7a753d325360d4bee79ef7b96fbedd2d9b96', id: uniqueId, role: "option", onClick: this.handleClick, onKeydown: this.handleKeydown, "aria-disabled": `${disabled}`, "aria-selected": `${this.isSelected}`, "data-value": this.definedValue, "data-focused": `${this.isFocused}` }, h("div", { key: '8d8d449a5352f90d7731df10ea011856537b02f4', class: "r-select-option" }, icon && h("span", { key: 'f74192805472c8023b921f0a2869772f4c007d78', class: "r-select-option--icon" }, h("r-icon", Object.assign({ key: '6ac112921c222e83df33b2cf0113f3b158a98407' }, iconAttributes))), !icon && hasIconSlot && h("span", { key: '8c5779ab3446a8d4b8880bf1f9958f02d32ca5e4', class: "r-select-option--icon" }, h("slot", { key: '05647b1a0f7fb6f3c996461a825d8d60bb966b50', name: "icon" })), h("span", { key: 'a4de330d788288995da81cd7cbe7a9f8e9ba44c0', class: "r-select-option--label" }, h("slot", { key: '2cb6ac3d005a3bf9b75b0c23d27cbf1930bc15cc' })))));
+        return (h(Host, { key: 'f55e1ac28062ff9c02ab76c3e1b9aede186743a2', id: uniqueId, role: "option", onClick: this.handleClick, onKeydown: this.handleKeydown, "aria-disabled": `${disabled}`, "aria-selected": `${this.isSelected}`, "data-value": this.definedValue, "data-focused": `${this.isFocused}` }, h("div", { key: '89a1ac5a1cf7e842eb2083469c802b41de0d24a2', class: "r-select-option" }, icon && h("span", { key: '97dfa1b0384b43175e42aab83d27afbca3ba954d', class: "r-select-option--icon" }, h("r-icon", Object.assign({ key: 'd22429de6f0f5e44e265a71626eb839129ab0792' }, iconAttributes))), !icon && hasIconSlot && h("span", { key: 'b660efa16353c5f0ad5953e576eb1dab6779da02', class: "r-select-option--icon" }, h("slot", { key: '99495694c323df2122e039414c1fdb1588b3e59f', name: "icon" })), h("span", { key: '0630026934eab56f02a309ae668667fbaf9ec1c9', class: "r-select-option--label" }, h("slot", { key: '2d4fb9319fc58ac4a838f1799046e4822f2bccf3' })))));
     }
     static get is() { return "r-select-option"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/skip-link/skip-link.js

@@ -5,7 +5,7 @@ export class SkipLink {
         this.position = 'center';
     }
     render() {
-        return (h(Host, { key: '08280b6003ccf78bf96eba9778fd3ddcaebc8947' }, h("slot", { key: '7808e8156601912e0192fe0b74bdedda2c359e1c' })));
+        return (h(Host, { key: '0a243668431f65138c3bf66e40013eb4be72a2be' }, h("slot", { key: '65749c9f436173b7497d11a8f71e5237317e4d3e' })));
     }
     static get is() { return "r-skip-link"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/stepper/stepper.js

@@ -81,7 +81,7 @@ export class Stepper {
     }
     render() {
         const completed = this.completed || this.completeSteps;
-        return (h(Host, { key: '9a8684fe78d610b90c824a8bd06371efc222b94a' }, h("ol", { key: '89c37db27cab79946f29e5302784f3a17c853cef', class: "r-stepper", "aria-label": this.label || null }, !this.hasSteps && Array.from({ length: this.total }, (_, index) => (h("r-stepper-item", { number: index + 1, complete: completed > index, active: completed === index, key: index }))), h("slot", { key: '92d043648fb9c12ca5222a569ec40a917798af5a', onSlotchange: this.handleSlotChange }))));
+        return (h(Host, { key: 'd4e3e3aca9a2c52e3549c686679ca6d110b715c0' }, h("ol", { key: '7cad36ede8507e3583f877ce3856df903f5ddd80', class: "r-stepper", "aria-label": this.label || null }, !this.hasSteps && Array.from({ length: this.total }, (_, index) => (h("r-stepper-item", { number: index + 1, complete: completed > index, active: completed === index, key: index }))), h("slot", { key: '4942b4293e607acc74afa59a49dd4b4ce0348f5e', onSlotchange: this.handleSlotChange }))));
     }
     static get is() { return "r-stepper"; }
     static get encapsulation() { return "shadow"; }

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

@@ -26,8 +26,8 @@ export class StepperItem {
     }
     render() {
         const number = this.number || this.stepNumber;
-        return (h(Host, { key: '4f55b5491ec5eee7cad6313fa85e7d6cc89b2178', role: "listitem", "aria-current": this.active ? 'step' : null }, h("div", { key: '2864f0e19f2f11af0f8674b9a701cd948024c085', class: "r-stepper-item" }, h("div", { key: 'de896ec98a13a4b20965a3ca58c5517a30de1f74', class: "r-stepper-item--indicator" }, this.complete ? (h("r-icon", { name: "check", size: "s" })) : this.icon ? (h("r-icon", { name: this.icon, iconAriaLabel: this.label, size: "s" })) : number !== undefined ? (h("span", { "aria-hidden": `${!this.hasOnlyVisuallyHiddenContent}`, class: "r-stepper-item--indicator--step-number" }, number)) : null), this.hasText &&
-            h("div", { key: 'cf3b6b5e3f4454830ecce06a6b6c16225aadd93e', "data-visually-hidden-only": `${this.hasOnlyVisuallyHiddenContent}`, class: "r-stepper-item--text" }, h("slot", { key: '65bd1f231c445f9681750c71ef156297edbf05fb' })))));
+        return (h(Host, { key: '2a3f15db4e1214ddb2b9b9ca61f7be4f7cc93cdf', role: "listitem", "aria-current": this.active ? 'step' : null }, h("div", { key: '98026269db0de698e020ac591d99cb4ac8ff296b', class: "r-stepper-item" }, h("div", { key: '87227beabbe2200e0ac4e99fa4246a72eaaebf55', class: "r-stepper-item--indicator" }, this.complete ? (h("r-icon", { name: "check", size: "s" })) : this.icon ? (h("r-icon", { name: this.icon, iconAriaLabel: this.label, size: "s" })) : number !== undefined ? (h("span", { "aria-hidden": `${!this.hasOnlyVisuallyHiddenContent}`, class: "r-stepper-item--indicator--step-number" }, number)) : null), this.hasText &&
+            h("div", { key: '447f86dfda0e76666e5d313f088e45e7a0a86787', "data-visually-hidden-only": `${this.hasOnlyVisuallyHiddenContent}`, class: "r-stepper-item--text" }, h("slot", { key: '039013569ab20d64f2e067325f341b2d720acc19' })))));
     }
     static get is() { return "r-stepper-item"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/tab/tab.js

@@ -43,9 +43,9 @@ export class RTab {
             'aria-selected': `${active}`,
             'aria-disabled': `${disabled}`
         };
-        return (h(Host, Object.assign({ key: '270a02c942f223ef5ac0f9f83d33c51bfd88c1c7', onClick: this.handleClick, onKeyUp: this.handleKeyup, onKeyDown: this.handleKeydown }, hostAttrs), h("span", { key: '60bbf17ad69478028579b61d03ca316a55ce52ea', class: "r-tab" }, disabled ?
+        return (h(Host, Object.assign({ key: 'b68ad2b51c624ef92886f791e2093951ec235042', onClick: this.handleClick, onKeyUp: this.handleKeyup, onKeyDown: this.handleKeydown }, hostAttrs), h("span", { key: '59898569007666db12270834489378d695b7b651', class: "r-tab" }, disabled ?
             h("r-icon", { class: "r-tab--disabled-icon", size: "s", name: "circle-slash" })
-            : h("slot", { name: "icon" }), h("slot", { key: '5b0582bebdf14a0de908d23d2a08d80cf1850b50' }))));
+            : h("slot", { name: "icon" }), h("slot", { key: '5e3b5ace265b9884bd659311d23955c084da995b' }))));
     }
     static get is() { return "r-tab"; }
     static get encapsulation() { return "shadow"; }

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

@@ -12,7 +12,7 @@ export class RTabPanel {
             active,
             'aria-labelledby': tabId
         };
-        return (h(Host, Object.assign({ key: 'f58718704b5625e82bfa531bcbf2b6c94c2e1ae3', class: "r-typography" }, hostAttrs), h("div", { key: '75dc2720b47da749a4d1e168e20338b94724a369', class: "r-tab-panel" }, h("slot", { key: '9710a7fc07751091c4ec0c97ae1d205ae540fdfd' }))));
+        return (h(Host, Object.assign({ key: '22e44ca7e5addc5d912e8005374cf0b01149eabe', class: "r-typography" }, hostAttrs), h("div", { key: '4b9498ba0f513636a5cfa0c29eb8158ab9ebca70', class: "r-tab-panel" }, h("slot", { key: 'e6d9d6538663c6a3b6c6772242bb8b7a107f26c0' }))));
     }
     static get is() { return "r-tab-panel"; }
     static get encapsulation() { return "shadow"; }