@riverty/web-components 6.2.1 → 6.3.1

package/dist/cjs/r-icon-button_2.cjs.entry.js

@@ -65,11 +65,11 @@ const IconButton = class {
             name,
             size
         };
-        const buttonTemplate = () => (index.h("button", Object.assign({ key: '05fbf705a760c71c292bfd0e61b56a362c8b8a36', type: "button", tabindex: !this.disabled && this.rTabindex || null, class: "r-icon-button", "aria-label": this.host.getAttribute('aria-label') || null }, buttonAttrs, { onClick: this._handleClick, onFocus: this.onFocus, onBlur: this.onBlur, ref: (el) => (this.nativeElement = el) }), name ?
+        const buttonTemplate = () => (index.h("button", Object.assign({ key: 'df699957ba93858e755bfdf29de83a3ab9718fe3', type: "button", tabindex: !this.disabled && this.rTabindex || null, class: "r-icon-button", "aria-label": this.host.getAttribute('aria-label') || null }, buttonAttrs, { onClick: this._handleClick, onFocus: this.onFocus, onBlur: this.onBlur, ref: (el) => (this.nativeElement = el) }), name ?
             index.h("r-icon", Object.assign({}, iconAttrs))
             :
-                index.h("r-icon", { size: size, class: "r-icon-button--icon" }, index.h("slot", null)), index.h("span", { key: '9c6d1c80c1e8cc88345a5e45b0060cb0eb285904', class: "r-icon-button--label visually-hidden" }, this.label), index.h("span", { key: '4ea91afe81b472b5ce5c6a993574518ab1a40d2f', class: "r-icon-button--target-area" })));
-        return (index.h(index.Host, { key: '54574ad857a36fdb0f263a3abf224c3d24955f07' }, !disabled && tooltipText ?
+                index.h("r-icon", { size: size, class: "r-icon-button--icon" }, index.h("slot", null)), index.h("span", { key: '86e9640751a2e75f24ba6eb1d75850251f629579', class: "r-icon-button--label visually-hidden" }, this.label), index.h("span", { key: '509e3f6870a4da1e788082a8af5a50c93e8360b5', class: "r-icon-button--target-area" })));
+        return (index.h(index.Host, { key: 'e829d0c5038ebe4893b998b832bbff3c62335327' }, !disabled && tooltipText ?
             index.h("r-tooltip", { text: tooltipText, position: tooltipPosition }, buttonTemplate())
             :
                 buttonTemplate()));
@@ -78,7 +78,7 @@ const IconButton = class {
 };
 IconButton.style = iconButtonCss;
 
-const tooltipCss = ":host{display:inline-block;--r-tooltip--position:relative;--r-tooltip--content--position:fixed;--r-tooltip--content--display:none;--r-tooltip--content--color:var(--r-text-inverse);--r-tooltip--content--background-color:var(--r-background-inverse);--r-tooltip--content--font-family:var(--r-font-family-text);--r-tooltip--content--font-weight:var(--r-font-weight-regular);--r-tooltip--content--font-size:var(--r-font-size-200);--r-tooltip--content--line-height:var(--r-line-height-s);--r-tooltip--content--min-width:32px;--r-tooltip--content--max-width:300px;--r-tooltip--content--min-height:32px;--r-tooltip--content--padding:var(--r-spacing-050) var(--r-spacing-100);--r-tooltip--content--width:max-width;--r-tooltip--content--word-break:break-word;--r-tooltip--content--box-sizing:border-box;--r-tooltip--content--justify-content:center;--r-tooltip--content--align-items:center;--r-tooltip--content--z-index:0;--r-tooltip--arrow--display:none;--r-tooltip--arrow--position:fixed;--r-tooltip--arrow--width:12px;--r-tooltip--arrow--height:12px;--r-tooltip--arrow--transform:rotate(180deg);--r-tooltip--arrow--inner-content:\"\";--r-tooltip--arrow--inner--width:12px;--r-tooltip--arrow--inner--height:6px;--r-tooltip--arrow--inner--background-color:var(--r-tooltip--content--background-color);--r-tooltip--arrow--inner--clip-path:polygon(50% 0%, 0% 100%, 100% 100%);--r-tooltip--arrow--inner--border-radius:0;--r-tooltip--arrow--inner--align-self:flex-end}:host slot{display:contents}:host([data-position=bottom]){--r-tooltip--arrow--transform:rotate(0)}:host([data-position=right]){--r-tooltip--arrow--transform:rotate(270deg)}:host([data-position=left]){--r-tooltip--arrow--transform:rotate(90deg)}.r-tooltip{position:var(--r-tooltip--position)}.r-tooltip:has(.r-tooltip--content--visible){--r-tooltip--content--width:max-content;--r-tooltip--content--display:flex;--r-tooltip--content--z-index:1060;--r-tooltip--arrow--display:flex;--r-tooltip--arrow--inner--display:block}.r-tooltip--trigger{color:var(--r-tooltip--trigger--color, inherit);box-shadow:var(--r-tooltip--trigger--box-shadow, none);outline:var(--r-tooltip--trigger--outline, none);outline-offset:var(--r-tooltip--trigger--outline-offset, 0)}.r-tooltip--trigger:focus{--r-tooltip--trigger--box-shadow:0 0 0 6px var(--r-border-focused-outlined);--r-tooltip--trigger--outline:2px solid var(--r-border-focused);--r-tooltip--trigger--outline-offset:2px}.r-tooltip--content{position:var(--r-tooltip--content--position);display:var(--r-tooltip--content--display);color:var(--r-tooltip--content--color);background-color:var(--r-tooltip--content--background-color);font-family:var(--r-tooltip--content--font-family);font-weight:var(--r-tooltip--content--font-weight);font-size:var(--r-tooltip--content--font-size);line-height:var(--r-tooltip--content--line-height);min-width:var(--r-tooltip--content--min-width);max-width:var(--r-tooltip--content--max-width);min-height:var(--r-tooltip--content--min-height);padding:var(--r-tooltip--content--padding);width:var(--r-tooltip--content--width);word-break:var(--r-tooltip--content--word-break);box-sizing:var(--r-tooltip--content--box-sizing);z-index:var(--r-tooltip--content--z-index)}.r-tooltip--arrow{display:var(--r-tooltip--arrow--display);position:var(--r-tooltip--arrow--position);width:var(--r-tooltip--arrow--width);height:var(--r-tooltip--arrow--height);transform:var(--r-tooltip--arrow--transform)}.r-tooltip--arrow:after{content:var(--r-tooltip--arrow--inner-content);display:var(--r-tooltip--arrow--inner--display);width:var(--r-tooltip--arrow--inner--width);height:var(--r-tooltip--arrow--inner--height);background-color:var(--r-tooltip--arrow--inner--background-color);clip-path:var(--r-tooltip--arrow--inner--clip-path);border-radius:var(--r-tooltip--arrow--inner--border-radius);align-self:var(--r-tooltip--arrow--inner--align-self)}";
+const tooltipCss = ":host{display:inline-block}:host slot{display:contents}:host([data-position=bottom]){--r-tooltip--arrow--transform:rotate(0)}:host([data-position=right]){--r-tooltip--arrow--transform:rotate(270deg)}:host([data-position=left]){--r-tooltip--arrow--transform:rotate(90deg)}.r-tooltip{position:var(--r-tooltip--position, relative)}.r-tooltip:has(.r-tooltip--content--visible){--r-tooltip--content--display:flex;--r-tooltip--content--z-index:1060;--r-tooltip--arrow--display:flex}.r-tooltip--trigger{color:var(--r-tooltip--trigger--color, inherit);box-shadow:var(--r-tooltip--trigger--box-shadow, none);outline:var(--r-tooltip--trigger--outline, none);outline-offset:var(--r-tooltip--trigger--outline-offset, 0)}.r-tooltip--trigger:focus{--r-tooltip--trigger--box-shadow:0 0 0 6px var(--r-border-focused-outlined);--r-tooltip--trigger--outline:2px solid var(--r-border-focused);--r-tooltip--trigger--outline-offset:2px}.r-tooltip--content{position:var(--r-tooltip--content--position, fixed);display:var(--r-tooltip--content--display, none);justify-content:var(--r-tooltip--content--justify-content, center);align-items:var(--r-tooltip--content--align-items, center);color:var(--r-tooltip--content--color, var(--r-text-inverse));background-color:var(--r-tooltip--content--background-color, var(--r-background-inverse));font-family:var(--r-tooltip--content--font-family, var(--r-font-family-text));font-weight:var(--r-tooltip--content--font-weight, var(--r-font-weight-regular));font-size:var(--r-tooltip--content--font-size, var(--r-font-size-200));line-height:var(--r-tooltip--content--line-height, var(--r-line-height-s));min-width:var(--r-tooltip--content--min-width, 32px);max-width:var(--r-tooltip--content--max-width, 300px);min-height:var(--r-tooltip--content--min-height, 32px);padding:var(--r-tooltip--content--padding, var(--r-spacing-050) var(--r-spacing-100));width:var(--r-tooltip--content--width, max-content);word-break:var(--r-tooltip--content--word-break, break-word);box-sizing:var(--r-tooltip--content--box-sizing, border-box);z-index:var(--r-tooltip--content--z-index, 0);white-space:var(--r-tooltip--content--white-space, normal)}.r-tooltip--arrow{display:var(--r-tooltip--arrow--display, none);position:var(--r-tooltip--arrow--position, fixed);width:var(--r-tooltip--arrow--width, 12px);height:var(--r-tooltip--arrow--height, 12px);transform:var(--r-tooltip--arrow--transform, rotate(180deg));z-index:var(--r-tooltip--content--z-index)}.r-tooltip--arrow:after{content:var(--r-tooltip--arrow--inner-content, \"\");display:var(--r-tooltip--arrow--inner--display, block);width:var(--r-tooltip--arrow--inner--width, 12px);height:var(--r-tooltip--arrow--inner--height, 6px);background-color:var(--r-tooltip--arrow--inner--background-color, var(--r-background-inverse));clip-path:var(--r-tooltip--arrow--inner--clip-path, polygon(50% 0%, 0% 100%, 100% 100%));border-radius:var(--r-tooltip--arrow--inner--border-radius, 0);align-self:var(--r-tooltip--arrow--inner--align-self, flex-end)}";
 
 const OFFSET = 20;
 const Tooltip = class {
@@ -105,11 +105,11 @@ const Tooltip = class {
             }
         };
         this.alignTooltipPosition = () => {
-            var _a, _b, _c, _d, _e, _f, _g;
-            const offsetHeight = Math.abs(((_a = this.element) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect().height) - ((_c = (_b = this.tooltip) === null || _b === void 0 ? void 0 : _b.getBoundingClientRect()) === null || _c === void 0 ? void 0 : _c.height)) / 2;
+            var _a, _b;
+            const elementRect = (_a = this.element) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect();
+            const tooltipRect = (_b = this.tooltip) === null || _b === void 0 ? void 0 : _b.getBoundingClientRect();
             const offsetLeft = this.getOffsetLeft(this.arrowPositionState);
-            const hostHeight = ((_e = (_d = this.element) === null || _d === void 0 ? void 0 : _d.getBoundingClientRect()) === null || _e === void 0 ? void 0 : _e.height) + this.arrowHeight || 0;
-            const hostWidth = ((_g = (_f = this.element) === null || _f === void 0 ? void 0 : _f.getBoundingClientRect()) === null || _g === void 0 ? void 0 : _g.width) + this.arrowWidth || 0;
+            const hostHeight = (elementRect === null || elementRect === void 0 ? void 0 : elementRect.height) + this.arrowHeight || 0;
             switch (this.positionState) {
                 case 'top':
                     this.alignPosition(this.tooltip, -offsetLeft, -this.tooltipContainerHeight);
@@ -118,19 +118,22 @@ const Tooltip = class {
                     this.alignPosition(this.tooltip, -offsetLeft, hostHeight);
                     break;
                 case 'left':
-                    this.alignPosition(this.tooltip, -this.tooltipContainerWidth, -offsetHeight);
+                    this.tooltip.style.left = `${elementRect.left - tooltipRect.width - this.arrowWidth}px`;
+                    this.tooltip.style.top = `${elementRect.top + elementRect.height / 2 - tooltipRect.height / 2}px`;
                     break;
                 case 'right':
-                    this.alignPosition(this.tooltip, hostWidth, -offsetHeight);
+                    this.tooltip.style.left = `${elementRect.left + elementRect.width + this.arrowWidth}px`;
+                    this.tooltip.style.top = `${elementRect.top + elementRect.height / 2 - tooltipRect.height / 2}px`;
                     break;
             }
         };
         this.alignArrowPosition = () => {
-            var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
-            const offsetHeight = Math.abs(((_a = this.element) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect().height) - ((_c = (_b = this.arrow) === null || _b === void 0 ? void 0 : _b.getBoundingClientRect()) === null || _c === void 0 ? void 0 : _c.height)) / 2;
-            const offsetLeft = Math.abs(((_d = this.element) === null || _d === void 0 ? void 0 : _d.getBoundingClientRect().width) - ((_f = (_e = this.arrow) === null || _e === void 0 ? void 0 : _e.getBoundingClientRect()) === null || _f === void 0 ? void 0 : _f.width)) / 2;
-            const hostHeight = ((_h = (_g = this.element) === null || _g === void 0 ? void 0 : _g.getBoundingClientRect()) === null || _h === void 0 ? void 0 : _h.height) || 0;
-            const hostWidth = ((_k = (_j = this.element) === null || _j === void 0 ? void 0 : _j.getBoundingClientRect()) === null || _k === void 0 ? void 0 : _k.width) || 0;
+            var _a, _b, _c, _d;
+            const elementRect = (_a = this.element) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect();
+            const tooltipRect = (_b = this.tooltip) === null || _b === void 0 ? void 0 : _b.getBoundingClientRect();
+            const hostHeight = (elementRect === null || elementRect === void 0 ? void 0 : elementRect.height) || 0;
+            const offsetLeft = Math.abs((elementRect === null || elementRect === void 0 ? void 0 : elementRect.width) - ((_d = (_c = this.arrow) === null || _c === void 0 ? void 0 : _c.getBoundingClientRect()) === null || _d === void 0 ? void 0 : _d.width)) / 2;
+            const arrowCenterY = (elementRect === null || elementRect === void 0 ? void 0 : elementRect.top) + elementRect.height / 2 - this.arrowHeight / 2;
             switch (this.positionState) {
                 case 'top':
                     this.alignPosition(this.arrow, offsetLeft, -this.arrowHeight);
@@ -139,10 +142,12 @@ const Tooltip = class {
                     this.alignPosition(this.arrow, offsetLeft, hostHeight);
                     break;
                 case 'left':
-                    this.alignPosition(this.arrow, -this.arrowWidth, offsetHeight);
+                    this.arrow.style.left = `${tooltipRect.left + tooltipRect.width}px`;
+                    this.arrow.style.top = `${arrowCenterY}px`;
                     break;
                 case 'right':
-                    this.alignPosition(this.arrow, hostWidth, offsetHeight);
+                    this.arrow.style.left = `${tooltipRect.left - this.arrowWidth}px`;
+                    this.arrow.style.top = `${arrowCenterY}px`;
                     break;
             }
         };
@@ -176,12 +181,15 @@ const Tooltip = class {
             var _a;
             this.isShown = true;
             this.tooltip.classList.add('r-tooltip--content--visible');
+            this.updateZIndex();
             const interactiveElement = this.getInteractiveElement(this.activeElement);
             interactiveElement === null || interactiveElement === void 0 ? void 0 : interactiveElement.setAttribute('aria-description', (_a = this.tooltip) === null || _a === void 0 ? void 0 : _a.innerText);
         };
         this.removeTooltip = () => {
             this.isShown = false;
             this.tooltip.style.width = 'max-content';
+            this.tooltip.style.zIndex = '';
+            this.arrow.style.zIndex = '';
             this.tooltip.classList.remove('r-tooltip--content--visible');
             const interactiveElement = this.getInteractiveElement(this.activeElement);
             interactiveElement === null || interactiveElement === void 0 ? void 0 : interactiveElement.removeAttribute('aria-description');
@@ -438,6 +446,23 @@ const Tooltip = class {
             this.arrowPositionState = 'right';
         }
     }
+    updateZIndex() {
+        const dialogs = document.querySelectorAll('dialog[open]');
+        let highestZIndex = 0;
+        dialogs.forEach((dialog) => {
+            const htmlDialog = dialog;
+            if (htmlDialog.open) {
+                const style = getComputedStyle(htmlDialog);
+                const zIndex = parseInt(style.zIndex, 10);
+                if (!isNaN(zIndex) && zIndex > highestZIndex) {
+                    highestZIndex = zIndex;
+                }
+            }
+        });
+        const tooltipZIndex = highestZIndex > 0 ? highestZIndex + 10 : 1060;
+        this.tooltip.style.zIndex = `${tooltipZIndex}`;
+        this.arrow.style.zIndex = `${tooltipZIndex}`;
+    }
     render() {
         const { text, arrowPositionState, positionState, isShown, uniqueId } = this;
         const hostAttrs = {
@@ -454,7 +479,7 @@ const Tooltip = class {
             role: 'tooltip',
             'aria-hidden': `${!isShown}`
         };
-        return (index.h(index.Host, Object.assign({ key: '5d8a002a227895d5e633e8b1df95ba449a9e253a' }, hostAttrs, { onMouseenter: this.handleHover, onMouseleave: this.removeTooltip }), index.h("div", { key: '4e6340639dc27fc7d0e981ca7cf8a4046737527f', class: "r-tooltip" }, index.h("div", Object.assign({ key: 'bcf2d5c73b427b2941be8de56b9ce2f296ae07eb', class: "r-tooltip--trigger", onFocus: this.handleFocus, onBlur: this.removeTooltip }, triggerAttrs), index.h("slot", { key: 'be7037ba07bf11b4957910c52f4a3f329b514007' })), index.h("div", Object.assign({ key: '300a3ef08b7c73b6b07161c58860df518ae9a862', class: "r-tooltip--content", ref: (el) => this.tooltip = el }, contentAttrs), text), index.h("div", { key: '73912349289b0dc365552331197d94bd0896ff3c', ref: (el) => this.arrow = el, class: "r-tooltip--arrow" }))));
+        return (index.h(index.Host, Object.assign({ key: '19155344b057a413834706bf19dd5a1bc082549d' }, hostAttrs, { onMouseenter: this.handleHover, onMouseleave: this.removeTooltip }), index.h("div", { key: '298c77b5c9611aba36d3df450f2c4ebda728113a', class: "r-tooltip" }, index.h("div", Object.assign({ key: 'e97a5fb30b6b67cde30734b02acdd1f354d58219', class: "r-tooltip--trigger", onFocus: this.handleFocus, onBlur: this.removeTooltip }, triggerAttrs), index.h("slot", { key: '3ad175db2674badbe9e022f52794a6f16afee7f5' })), index.h("div", Object.assign({ key: '6ed4995a7765422ff604e8da0797f651c12b1e8a', class: "r-tooltip--content", ref: (el) => this.tooltip = el }, contentAttrs), text), index.h("div", { key: '98e5991e801b1e54138c2a5156061237cafa2459', ref: (el) => this.arrow = el, class: "r-tooltip--arrow" }))));
     }
     get element() { return index.getElement(this); }
     static get watchers() { return {

package/dist/cjs/r-input-code.cjs.entry.js

@@ -254,6 +254,11 @@ const InputCode = class {
         this.values = valueArray;
         this.rChange.emit({ value: this.values.join('') });
     }
+    /** Validates an element, displays provided message in case value is invalid. */
+    async setCustomValidity(message) {
+        this.customErrorMessage = message;
+        this.validateFormElement(this.nativeElement);
+    }
     /**
      * Validates the input code without triggering UI and returns a boolean indicating its validity.
      * @returns A boolean indicating whether the input code is valid.
@@ -412,14 +417,14 @@ const InputCode = class {
             id: `${uniqueId}-label`,
             fieldIndicator
         } : {};
-        return (index.h(index.Host, { key: 'c7e8e45bf54b060eaeec903857ec842f5f5909ff', value: this.value, onClick: this.onHostClick }, index.h("div", { key: '965e94721f83a4e0c2a21d6ead371085b5faefef', class: "r-input-code--label-container" }, index.h("label", { key: '4a24884c394cbdf28f98f71dd166c7f02fd6b240', htmlFor: uniqueId }, label ?
+        return (index.h(index.Host, { key: '800791debf1f1c64b666d8933dddfc9d308ef70e', value: this.value, onClick: this.onHostClick }, index.h("div", { key: 'b081be06e5e46fbce4764d59ee3de65091c39464', class: "r-input-code--label-container" }, index.h("label", { key: '4b98d9f9ea5e318943da440c1851887a9c540d50', htmlFor: uniqueId }, label ?
             index.h("r-label", Object.assign({}, labelAttr), label)
             :
-                index.h("slot", { name: "label" })), index.h("slot", { key: '471642b0c4c01243fb26eacec958418ef09af962', name: "popover" })), hint &&
-            index.h("r-hint", { key: 'efdb3d68d72666260bce9d6e9e6ba9853225a473', id: `${uniqueId}-hint`, role: "note" }, hint), index.h("div", { key: '2dc16569529ac0ec9e95cfef8f353efbf2f0e929', class: "r-form-field" }, index.h("slot", { key: '7e3d7abc1931537ce66f6bd1c716f4046f2ca06e', name: "prefix" }), index.h("div", { key: '0e29ba435fe9de7b87cad793be8dc11301bf552e', class: "r-input-code--container", role: "group", "aria-labelledby": `${uniqueId}-label`, "aria-describedby": this.groupDescribedby }, index.h("slot", { key: 'eef6bda22af5d2e21f442bb010d79a60a05b4d69', name: "leading" }), Array.from({ length: this.length }).map((_, i) => (index.h("input", { class: "r-input-code--input", key: i, id: `${uniqueId}-input-section-${i}`, "aria-label": `${this.ariaCharacterLabel || 'Character'}: ${i + 1}`, "aria-invalid": `${this.invalid || false}`, value: this.values[i], ref: el => this.inputs[i] = el, maxlength: 1, disabled: this.disabled, required: this.required, readonly: readonly, inputmode: this.inputmode, enterkeyhint: this.enterkeyhint, autocomplete: this.autocomplete, onInput: this.createInputHandler(i), onKeyDown: this.createKeyDownHandler(i), onPaste: this.handlePaste }))), index.h("input", Object.assign({ key: 'a2185f3e1b5f83e55fa5997662b55002bb251b4c', type: "hidden" }, inputAttrs, { value: this.values.join(''), ref: el => this.nativeElement = el })), index.h("div", { key: '7586c976c27a2c42e9d76c1cf6724ad93beac0ae', class: "r-input-code--trailing" }, this.readonly &&
-            index.h("r-icon", { key: 'b2829cc59cd037f62e33f980fa65887e80059984', class: "r-input-code--readonly-icon", name: "pen-disabled", size: "s" }), index.h("slot", { key: 'e7b996a710b4f2f5f867295518b96952d6d60444', name: "trailing" }, valid &&
-            index.h("r-icon", { key: '3064219d8e6846df86dc934027a561f265fcc82f', name: "circled-check", size: "s", color: "var(--r-status-success-regular)" })))), index.h("slot", { key: 'de7164a83a2d8c6b8bf97583d4407cc7be7e0db4', name: "suffix" })), index.h("slot", { key: 'e12c343b123421fec18546f60ccdb2e4d6ceab5b', name: "message" }, this.hasMessage &&
-            index.h("r-hint", { key: '7fcfab6c47d841a0b695805b61f4a12a164fca3c', "aria-live": "polite", id: `${uniqueId}-message`, variant: "error" }, this.message))));
+                index.h("slot", { name: "label" })), index.h("slot", { key: 'd7949be3b99b6774529948b22a4dc9544da2057d', name: "popover" })), hint &&
+            index.h("r-hint", { key: 'cd46c69b0f7ca4468219bc5d5698f95a8639864b', id: `${uniqueId}-hint`, role: "note" }, hint), index.h("div", { key: '3249a7836c7354a8ec8b9457d6dc0e81140710c9', class: "r-form-field" }, index.h("slot", { key: '9e1e2574802b9b650ba99bb971a5c0a165b0b197', name: "prefix" }), index.h("div", { key: '6ccba704319cc140d68a37b9bea922f62e4513b6', class: "r-input-code--container", role: "group", "aria-labelledby": `${uniqueId}-label`, "aria-describedby": this.groupDescribedby }, index.h("slot", { key: '06d57c63d11f5818f4cf2ccacca60aa64bd16a49', name: "leading" }), Array.from({ length: this.length }).map((_, i) => (index.h("input", { class: "r-input-code--input", key: i, id: `${uniqueId}-input-section-${i}`, "aria-label": `${this.ariaCharacterLabel || 'Character'}: ${i + 1}`, "aria-invalid": `${this.invalid || false}`, value: this.values[i], ref: el => this.inputs[i] = el, maxlength: 1, disabled: this.disabled, required: this.required, readonly: readonly, inputmode: this.inputmode, enterkeyhint: this.enterkeyhint, autocomplete: this.autocomplete, onInput: this.createInputHandler(i), onKeyDown: this.createKeyDownHandler(i), onPaste: this.handlePaste }))), index.h("input", Object.assign({ key: '56e629b9f9c4a7cbf83e0ba10d3338cccb27579f', type: "hidden" }, inputAttrs, { value: this.values.join(''), ref: el => this.nativeElement = el })), index.h("div", { key: '1388dab339130521becb1a0c2d0005ba8e1b8fde', class: "r-input-code--trailing" }, this.readonly &&
+            index.h("r-icon", { key: 'ea1cbf74635a3480ec03ea16f41d8133a156219d', class: "r-input-code--readonly-icon", name: "pen-disabled", size: "s" }), index.h("slot", { key: '90801524b96b72fdb21b49f6c15d00d4809faba6', name: "trailing" }, valid &&
+            index.h("r-icon", { key: '709294d96d12dfff3c902bbac8656d59d0e6064b', name: "circled-check", size: "s", color: "var(--r-status-success-regular)" })))), index.h("slot", { key: '67195193bd3d6a8c3e7aaa3ae0b5f35274971add', name: "suffix" })), index.h("slot", { key: '735676c16afee87dc1b121ec4eed689645e40f84', name: "message" }, this.hasMessage &&
+            index.h("r-hint", { key: 'f7733e7bdaa5037fa6244fb351551c9a6d7faf95', "aria-live": "polite", id: `${uniqueId}-message`, variant: "error" }, this.message))));
     }
     get host() { return index.getElement(this); }
     static get watchers() { return {

package/dist/cjs/r-input-date.cjs.entry.js

@@ -404,6 +404,11 @@ const InputDate = class {
         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.
@@ -499,14 +504,14 @@ const InputDate = class {
             id: `${uniqueId}-label`,
             fieldIndicator
         } : {};
-        return (index.h(index.Host, { key: '1fe0cc5598857ca719ef334807da6e2540c4a399', onClick: this.onHostClick, "data-touched": `${this.touched}`, "data-dirty": `${this.dirty}` }, index.h("fieldset", Object.assign({ key: 'a7ad4075376fc3d08cc59be2f4340c9327e05f82', class: "r-input-date" }, groupAttrs), index.h("div", { key: 'ec18205fad6069d54715807529a145d03f8bdebb', class: "r-input-date--legend-container" }, index.h("legend", { key: '59c4384b37a3a845eb5cb0c2955b8a12777b2320', class: "r-input-date--legend" }, index.h("label", { key: '8b5502aeb26daa26d3f32d3669406b87e2eb29ca', htmlFor: uniqueId }, label ?
+        return (index.h(index.Host, { key: 'e8d5144a4cefeca243ea6e80840e4ff12b9344f0', onClick: this.onHostClick, "data-touched": `${this.touched}`, "data-dirty": `${this.dirty}` }, index.h("fieldset", Object.assign({ key: '417cac30b7b535e7367eef280732869cdd984ed1', class: "r-input-date" }, groupAttrs), index.h("div", { key: 'd7ef5eb79c96c0d8845399e536c356272ab7c03c', class: "r-input-date--legend-container" }, index.h("legend", { key: '14c195899fb789333bbd07a40ec1db746d004839', class: "r-input-date--legend" }, index.h("label", { key: 'f6ac0e10142bceefe404a385ac44534d81ae3f98', htmlFor: uniqueId }, label ?
             index.h("r-label", Object.assign({}, labelAttr), label)
             :
-                index.h("slot", { name: "label" }))), index.h("slot", { key: '7a5b5ad6401bb8199d94c36383e4219fd3556db5', name: "popover" })), hint &&
-            index.h("r-hint", { key: '1226c6002eb581811e419db7518e02d5fbc18b5b', id: `${uniqueId}-hint`, role: "note" }, hint), index.h("div", { key: '5581e3cbb731a4a23a243118f2840563352e6df1', class: "r-input-date--container" }, index.h("r-icon", { key: 'e8b52fc6fcb1d4f22fd24e7e26e55218a1b6ee80', name: "calendar", size: "s", class: "r-input-date--calendar-icon" }), index.h("div", { key: '4b97bab9a65f4a9d1958287f23940b7ee4d7143e', class: "r-input-date--inputs" }, this.inputOrder.map((input, i) => (index.h(index.Fragment, null, index.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 &&
-            index.h("span", { "aria-hidden": "true", class: "r-input-date--delimiter" }, this.delimiter)))), index.h("input", Object.assign({ key: 'fdebeb8a48fd0fc10233166db94e928fc4b424de', type: "hidden" }, dateInputAttrs, { value: this.value, ref: (el) => this.nativeElement = el }))), index.h("div", { key: '4324ae4593512d0bd16f843e60c2058859cc1ba1', class: "r-input-date--trailing" }, this.readonly &&
-            index.h("r-icon", { key: '673fb144899c62d9b5d9267b35ce1f197b1f6549', class: "r-input-date--readonly-icon", name: "pen-disabled", size: "s" }), valid &&
-            index.h("r-icon", { key: '26828285dad4ccae6ebc8d29a2f4e1e6a5d92a6d', name: "circled-check", size: "s", color: "var(--r-status-success-regular)" }), this.hasTrailingSlot && index.h("slot", { key: 'bda392fa837a8fba6917fed22ff356c4e6f15b85', name: "trailing" }))), index.h("div", { key: 'a6d891a2f2bf3456d5cbb3ec27c6cef0bce7d434', id: `${uniqueId}-message`, "aria-live": "polite", class: "r-input-date--message" }, this.hasMessage && index.h("r-hint", { key: '8a3316ce851bfa02b9ca1a1fad8fde6f48a7fab6', variant: "error" }, this.message)))));
+                index.h("slot", { name: "label" }))), index.h("slot", { key: 'b3bb261cb82002f7c41470bb9ca09110c6f7a345', name: "popover" })), hint &&
+            index.h("r-hint", { key: '606d8d0f83416914627b23f901838c55f65b6adc', id: `${uniqueId}-hint`, role: "note" }, hint), index.h("div", { key: '46ca5170c4eafd18464dd7575ab41263907e2116', class: "r-input-date--container" }, index.h("r-icon", { key: '488dc02a12c354dc9fdd5d814b2c63dbd080175f', name: "calendar", size: "s", class: "r-input-date--calendar-icon" }), index.h("div", { key: '69ef56323ea2c1d90121dc280cb2072701558064', class: "r-input-date--inputs" }, this.inputOrder.map((input, i) => (index.h(index.Fragment, null, index.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 &&
+            index.h("span", { "aria-hidden": "true", class: "r-input-date--delimiter" }, this.delimiter)))), index.h("input", Object.assign({ key: '918cf85992a45287c77df5f937f82d0f6f316bf1', type: "hidden" }, dateInputAttrs, { value: this.value, ref: (el) => this.nativeElement = el }))), index.h("div", { key: '57dbce64441410f59571417fce01213af7ee146f', class: "r-input-date--trailing" }, this.readonly &&
+            index.h("r-icon", { key: 'e60109ba459f42e391a972cd7fdbd9fba134244f', class: "r-input-date--readonly-icon", name: "pen-disabled", size: "s" }), valid &&
+            index.h("r-icon", { key: '0c5af571965830bffdb226d94e4d2a2f4a158553', name: "circled-check", size: "s", color: "var(--r-status-success-regular)" }), this.hasTrailingSlot && index.h("slot", { key: '2b3836138862a6b6538aa75ddc2929b63f85667e', name: "trailing" }))), index.h("div", { key: 'd07f45f25bd1c6ad19f7feacf24cab515c40aa01', id: `${uniqueId}-message`, "aria-live": "polite", class: "r-input-date--message" }, this.hasMessage && index.h("r-hint", { key: '7974223f426574a5b6a54bbf773007475dfb6450', variant: "error" }, this.message)))));
     }
     get host() { return index.getElement(this); }
     static get watchers() { return {

package/dist/cjs/r-input-password.cjs.entry.js

@@ -174,6 +174,11 @@ const InputPassword = class {
         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.
@@ -202,7 +207,7 @@ const InputPassword = class {
     }
     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;
@@ -255,8 +260,8 @@ const InputPassword = class {
             tooShortMessage,
             patternMismatchMessage
         };
-        return (index.h(index.Host, { key: 'c4f877854375e558677df5f33682e37e048382be' }, index.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 }), index.h("r-icon", { key: '6c59c76305a41bcd4c0bfc109f7e207a871118e5', name: "padlock-closed", size: "s", slot: "leading" }), index.h("slot", { key: '921c7c3309a362a0e1d273e382bc43fe9a627257', name: "popover", slot: "popover" }), index.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 &&
-            index.h("r-hint", { key: '667984f03375ec43be01732309020c45c81d9306', slot: "message", variant: "error" }, this.hasError && this.error, this.hasValidationError && (this.customErrorMessage || this.validityMessage))), index.h("div", { key: '6d950d7eb59905342e328047f45f9b5ae3f6f8cb', class: "visually-hidden", ref: el => this.passwordVisibilityChangeAlertContainer = el, "aria-live": "polite" })));
+        return (index.h(index.Host, { key: '197cfacad4b600eb5c348d496b7a406daf664202' }, index.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 }), index.h("r-icon", { key: 'e8ddd11585c68f22b951cf2a7fce1c7e8b5da0d2', name: "padlock-closed", size: "s", slot: "leading" }), index.h("slot", { key: '39ecae0c2028d64e1afcf1e84b1dd27931e17227', name: "popover", slot: "popover" }), index.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 &&
+            index.h("r-hint", { key: '91c2c93dd827ac3c0b233217dc0aa26fc3a55f18', slot: "message", variant: "error" }, this.hasError && this.error, this.hasValidationError && (this.customErrorMessage || this.validityMessage))), index.h("div", { key: 'faa2b8b1ff5af58e6524a9ea3c5fe08a446e6ff4', class: "visually-hidden", ref: el => this.passwordVisibilityChangeAlertContainer = el, "aria-live": "polite" })));
     }
     get host() { return index.getElement(this); }
 };

package/dist/cjs/r-input-phone-number.cjs.entry.js

@@ -2300,7 +2300,7 @@ const InputPhoneNumber = class {
             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';
@@ -2406,8 +2406,8 @@ const InputPhoneNumber = class {
         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;
@@ -2507,9 +2507,9 @@ const InputPhoneNumber = class {
             disabled,
             'aria-describedby': this.ariaDescribedBy
         };
-        return (index.h(index.Host, { key: '609e5cd2c326c30866617a238f7c92bb8b2d5e8d' }, index.h("div", { key: '44eaa8f48fddbdc9dfe43700b4b68650345e1352', class: "r-input-phone-number--label-container" }, index.h("label", { key: 'fd55a14c4491ed6cad0885aaa5add8d827ae4215', id: `${uniqueId}-label` }, label &&
-            index.h("r-label", Object.assign({ key: 'bdeb1325cefaf4ac82628e497133c3eabfa685d3' }, labelAttr), label)), index.h("slot", { key: '38a4fd3c1f5ed0748ef9df0e2f6cd93ff8d1d39f', name: "popover" })), hint &&
-            index.h("r-hint", { key: '9fddd5b8053220e2339fe073cf1d897d0c34c23e', id: `${uniqueId}-hint`, role: "note" }, hint), index.h("div", { key: 'c493d4fe2f75cfa25fc404e985800175dfc75603', class: "r-input-phone-number", role: "group", "aria-labelledby": `${uniqueId}-label`, "aria-describedby": this.ariaDescribedBy }, index.h("slot", { key: 'ee98939143432df877ac2b7c2bbb7d87fd01f0a7' }), index.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 })), index.h("input", Object.assign({ key: '11edb8cd2f8d6459ffbdef96263016ee25818fc0', type: "hidden" }, inputAttrs, { readonly: this.readonly, value: fullPhoneNumber, ref: el => this.nativeElement = el })), index.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 (index.h(index.Host, { key: 'e5170613c08f3927d2a65cb7649cd29d27954b99' }, index.h("div", { key: '42e8954e2140be50ea42290779af01522e0e39e7', class: "r-input-phone-number--label-container" }, index.h("label", { key: '0dbd4ad0d762f97d4a2242f1dc95ba8cd9039ce0', id: `${uniqueId}-label` }, label &&
+            index.h("r-label", Object.assign({ key: 'ec76421b8dad5b1ed58cb0302d7c8d32fed66735' }, labelAttr), label)), index.h("slot", { key: 'c9e8a6fb83822826f5a1f62cedb06169715dac52', name: "popover" })), hint &&
+            index.h("r-hint", { key: 'c0755d106d3d01f6f6c0ab1d939337d98e014652', id: `${uniqueId}-hint`, role: "note" }, hint), index.h("div", { key: 'e32fe35fed92c7a729231164705ef6437060775e', class: "r-input-phone-number", role: "group", "aria-labelledby": `${uniqueId}-label`, "aria-describedby": this.ariaDescribedBy }, index.h("slot", { key: 'cc2d797e9f9c5b5a21d6e8a7a7d6c7edb2d2b88a' }), index.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 })), index.h("input", Object.assign({ key: 'cd814c1b35708f56a911b4d93e907f9a2fac0f1c', type: "hidden" }, inputAttrs, { readonly: this.readonly, value: fullPhoneNumber, ref: el => this.nativeElement = el })), index.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)) : '')));
     }
     get host() { return index.getElement(this); }
     static get watchers() { return {