@riverty/web-components 5.6.0 → 5.8.0

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

@@ -1,7 +1,7 @@
 import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-Da7qOBFr.js';
 import { a as appendControlToFormData } from './formData-DvLT8-y3.js';
 
-const inputCodeCss = ":host{display:inline-flex;flex-direction:column;vertical-align:top;--r-label--margin-bottom:0}:host slot{display:contents}:host slot[name=trailing]{display:flex;margin-left:auto}:host([readonly]:not([readonly=false])){--r-input-code--container--background-color:var(--r-background-soft, #f3f1f0);--r-input-code--container--border-color:transparent transparent var(--r-border-soft, #686868) transparent;--r-input-code--container--cursor:text}:host(:hover:not([disabled]:not([disabled=false])):not([readonly]:not([readonly=false]))){--r-input-code--container--background-color:var(--r-background-interactive-hovered, rgba(40, 40, 40, 0.04))}:host(:focus-within:not([disabled]:not([disabled=false]))){--r-input-code--container--box-shadow:0 0 0 6px var(--r-border-focused-outlined);--r-input-code--container--outline:2px solid var(--r-border-focused);--r-input-code--container--outline-offset:2px}:host(:active:not([disabled]:not([disabled=false])):not([readonly]:not([readonly=false]))){--r-input-code--container--background-color:var(--r-background-interactive-pressed, rgba(40, 40, 40, 0.12))}:host([full-width]:not([full-width=false])){display:flex}:host([disabled]:not([disabled=false])){cursor:not-allowed;--r-input-code--container--opacity:0.4;--r-input-code--container--cursor:not-allowed;--r-input-code--container--pointer-events:none;--r-input-code--container--background-color:transparent}:host([invalid]:not([invalid=false])){--r-input-code--container--border-color:var(--r-status-error-regular, #da1e28);--r-input-code--container--background-color:var(--r-status-error-soft, #fef6f6)}.r-input-code--label-container{display:var(--r-input-code--label-container--display, flex);gap:var(--r-input-code--label-container--gap, var(--r-spacing-100, 1rem));align-items:var(--r-input-code--label-container--align-items, center);justify-content:var(--r-input-code--label-container--align-items, space-between)}.r-input-code--label-container ::slotted([slot=popover]){display:var(--r-input-code--popover--display, inline-flex);height:var(--r-input-code--popover--height, var(--r-spacing-150, 1.5));align-items:var(--r-input-code--popover--align-items, center);justify-content:var(--r-input-code--popover--justify-content, center);margin-right:var(--r-input-code--popover--margin-right, -0.25rem);--r-popover--trigger--min-width:var(--r-input-code--popover-trigger--min-width, var(--r-spacing-150, 1.5));--r-popover--trigger--min-height:var(--r-input-code--popover--trigger--min-height, var(--r-spacing-150, 1.5))}.r-input-code--container{position:var(--r-input-code--container--position, relative);display:var(--r-input-code--container--display, flex);align-items:var(--r-input-code--container--align-items, center);gap:var(--r-input-code--container--gap, 0.625em);height:var(--r-input-code--container--height, var(--r-spacing-275, 2.75rem));background-color:var(--r-input-code--container--background-color, var(--r-background-softest, #fff));border-width:var(--r-input-code--container--border-width, 1px);border-style:var(--r-input-code--container--border-style, solid);border-color:var(--r-input-code--container--border-color, var(--r-border-soft, #686868));box-sizing:var(--r-input-code--container--box-sizing, border-box);box-shadow:var(--r-input-code--container--box-shadow, none);outline:var(--r-input-code--container--outline, none);outline-offset:var(--r-input-code--container--outline-offset, 0);padding-top:var(--r-input-code--container--padding-top, 0.8em);padding-right:var(--r-input-code--container--padding-right, 0.7em);padding-bottom:var(--r-input-code--container--padding-bottom, 0.8em);padding-left:var(--r-input-code--container--padding-left, 0.7em);opacity:var(--r-input-code--container--opacity, 1);pointer-events:var(--r-input-code--container--pointer-events, auto);line-height:var(--r-input-code--container--line-height, 1);cursor:var(--r-input-code--container--cursor, inherit);margin-top:var(--r-input-code--container--margin-top, var(--r-spacing-025, 0.25rem));margin-bottom:var(--r-input-code--container--margin-bottom, var(--r-spacing-025, 0.25rem))}.r-input-code--input{width:var(--r-input-code--input--width, 0.725rem);outline:var(--r-input-code--input--outline, none);font-size:var(--r-input-code--input--font-size, 1rem);text-align:var(--r-input-code--input--text-align, center);background-color:var(--r-input-code--input--background-color, transparent);border-width:var(--r-input-code--input--border-width, 0 0 1px 0);border-style:var(--r-input-code--input--border-style, solid);border-color:var(--r-input-code--input--border-color, var(--r-text-soft))}.r-input-code--trailing{display:var(--r-input-code--trailing--display, flex);margin-left:var(--r-input-code--trailing--margin-left, auto);align-items:var(--r-input-code--trailing--align-items, center);gap:var(--r-input-code--trailing--gap, 0.625rem)}.r-input-code--readonly-icon{color:var(--r-input-code--readonly-icon--color, var(--r-icon-soft, #686868))}.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);border:0}";
+const inputCodeCss = ":host{display:inline-flex;flex-direction:column;vertical-align:top;--r-label--margin-bottom:0}:host slot{display:contents}:host slot[name=trailing]{display:flex;margin-left:auto}:host([readonly]:not([readonly=false])){--r-input-code--container--background-color:var(--r-background-soft, #f3f1f0);--r-input-code--container--border-color:transparent transparent var(--r-border-soft, #686868) transparent;--r-input-code--container--cursor:text}:host(:hover:not([disabled]:not([disabled=false])):not([readonly]:not([readonly=false]))){--r-input-code--container--background-color:var(--r-background-interactive-hovered, rgba(40, 40, 40, 0.04))}:host(:focus-within:not([disabled]:not([disabled=false]))){--r-input-code--container--box-shadow:0 0 0 6px var(--r-border-focused-outlined);--r-input-code--container--outline:2px solid var(--r-border-focused);--r-input-code--container--outline-offset:2px}:host(:active:not([disabled]:not([disabled=false])):not([readonly]:not([readonly=false]))){--r-input-code--container--background-color:var(--r-background-interactive-pressed, rgba(40, 40, 40, 0.12))}:host([full-width]:not([full-width=false])){display:flex}:host([disabled]:not([disabled=false])){cursor:not-allowed;--r-input-code--container--opacity:0.4;--r-input-code--container--cursor:not-allowed;--r-input-code--container--pointer-events:none;--r-input-code--container--background-color:transparent}:host([invalid]:not([invalid=false])){--r-input-code--container--border-color:var(--r-status-error-regular, #b00c15);--r-input-code--container--background-color:var(--r-status-error-soft, #fef6f6)}.r-input-code--label-container{display:var(--r-input-code--label-container--display, flex);gap:var(--r-input-code--label-container--gap, var(--r-spacing-100, 1rem));align-items:var(--r-input-code--label-container--align-items, center);justify-content:var(--r-input-code--label-container--align-items, space-between)}.r-input-code--label-container ::slotted([slot=popover]){display:var(--r-input-code--popover--display, inline-flex);height:var(--r-input-code--popover--height, var(--r-spacing-150, 1.5));align-items:var(--r-input-code--popover--align-items, center);justify-content:var(--r-input-code--popover--justify-content, center);margin-right:var(--r-input-code--popover--margin-right, -0.25rem);--r-popover--trigger--min-width:var(--r-input-code--popover-trigger--min-width, var(--r-spacing-150, 1.5));--r-popover--trigger--min-height:var(--r-input-code--popover--trigger--min-height, var(--r-spacing-150, 1.5))}.r-input-code--container{position:var(--r-input-code--container--position, relative);display:var(--r-input-code--container--display, flex);align-items:var(--r-input-code--container--align-items, center);gap:var(--r-input-code--container--gap, 0.625em);height:var(--r-input-code--container--height, var(--r-spacing-275, 2.75rem));background-color:var(--r-input-code--container--background-color, var(--r-background-softest, #fff));border-width:var(--r-input-code--container--border-width, 1px);border-style:var(--r-input-code--container--border-style, solid);border-color:var(--r-input-code--container--border-color, var(--r-border-soft, #686868));box-sizing:var(--r-input-code--container--box-sizing, border-box);box-shadow:var(--r-input-code--container--box-shadow, none);outline:var(--r-input-code--container--outline, none);outline-offset:var(--r-input-code--container--outline-offset, 0);padding-top:var(--r-input-code--container--padding-top, 0.8em);padding-right:var(--r-input-code--container--padding-right, 0.7em);padding-bottom:var(--r-input-code--container--padding-bottom, 0.8em);padding-left:var(--r-input-code--container--padding-left, 0.7em);opacity:var(--r-input-code--container--opacity, 1);pointer-events:var(--r-input-code--container--pointer-events, auto);line-height:var(--r-input-code--container--line-height, 1);cursor:var(--r-input-code--container--cursor, inherit);margin-top:var(--r-input-code--container--margin-top, var(--r-spacing-025, 0.25rem));margin-bottom:var(--r-input-code--container--margin-bottom, var(--r-spacing-025, 0.25rem))}.r-input-code--input{width:var(--r-input-code--input--width, 0.725rem);outline:var(--r-input-code--input--outline, none);font-size:var(--r-input-code--input--font-size, 1rem);text-align:var(--r-input-code--input--text-align, center);background-color:var(--r-input-code--input--background-color, transparent);border-width:var(--r-input-code--input--border-width, 0 0 1px 0);border-style:var(--r-input-code--input--border-style, solid);border-color:var(--r-input-code--input--border-color, var(--r-text-soft))}.r-input-code--trailing{display:var(--r-input-code--trailing--display, flex);margin-left:var(--r-input-code--trailing--margin-left, auto);align-items:var(--r-input-code--trailing--align-items, center);gap:var(--r-input-code--trailing--gap, 0.625rem)}.r-input-code--readonly-icon{color:var(--r-input-code--readonly-icon--color, var(--r-icon-soft, #686868))}.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);border:0}";
 
 const InputCode = class {
     constructor(hostRef) {
@@ -105,24 +105,29 @@ const InputCode = class {
         this.uniqueId = `r-input-code-${Date.now().toString(32)}${Math.random().toString(32)}`.replace(/\./g, '');
         this.nativeElement = null;
         this.getValidityStateData = (element) => {
-            if (element.value.length === 0) {
-                this.validityState = 'valueMissing';
-                this.validityMessage = this.valueMissingMessage;
-                return;
+            let validityState = '';
+            let validityMessage = '';
+            if (this.required && element.value.length === 0) {
+                validityState = 'valueMissing';
+                validityMessage = this.valueMissingMessage;
+                return { validityState, validityMessage };
             }
             if (element.value.length > 0 && element.value.length < this.length) {
-                this.validityState = 'tooShort';
-                this.validityMessage = this.tooShortMessage;
-                return;
+                validityState = 'tooShort';
+                validityMessage = this.tooShortMessage;
+                return { validityState, validityMessage };
             }
-            this.validityState = 'valid';
+            validityState = 'valid';
+            return { validityState, validityMessage };
         };
         this.validateFormElement = (element) => {
             if (element === null)
                 return;
             if (this.isNoValidate)
                 return;
-            this.getValidityStateData(element);
+            const { validityState, validityMessage } = this.getValidityStateData(element);
+            this.validityState = validityState;
+            this.validityMessage = validityMessage;
             const isValid = this.validityState === 'valid';
             this.valid = isValid;
             this.invalid = !isValid;
@@ -187,6 +192,14 @@ const InputCode = class {
         this.values = valueArray;
         this.rChange.emit({ value: this.values.join('') });
     }
+    /**
+     * Validates the input code without triggering UI and returns a boolean indicating its validity.
+     * @returns A boolean indicating whether the input code is valid.
+     */
+    async checkValidity() {
+        const { validityState } = this.getValidityStateData(this.nativeElement);
+        return validityState === 'valid';
+    }
     handleValuesChange() {
         this.value = this.values.join('');
     }
@@ -280,15 +293,15 @@ const InputCode = class {
             id: `${uniqueId}-label`,
             fieldIndicator
         } : {};
-        return (h(Host, { key: '7c77442f0a5b39e6baca0e0a19b07e5c28388267', value: this.value, onClick: this.onHostClick }, h("div", { key: 'e9d80a3cbb3f8afcbfce17da69bbe881112307c5', class: "r-input-code--label-container" }, h("label", { key: 'dfdc795d969466e71d82492dd142773fbad93f6b', htmlFor: uniqueId }, label ?
+        return (h(Host, { key: '2babfeef172a7d6b76c734f3170ede3a7a8d3392', value: this.value, onClick: this.onHostClick }, h("div", { key: '712d241caa9d80f982f831633009a8452c472a3c', class: "r-input-code--label-container" }, h("label", { key: '5a6be87bb1ab122cea9e2c7cefaf2781c39a9465', htmlFor: uniqueId }, label ?
             h("r-label", Object.assign({}, labelAttr), label)
             :
-                h("slot", { name: "label" })), h("slot", { key: 'f68f02578abd8be8fceea4bdaf1af657f07f5327', name: "popover" })), hint &&
-            h("r-hint", { key: '784b4a072ee504c99873d8e7744c1c055cbdd52a', id: `${uniqueId}-hint`, role: "note" }, hint), h("div", { key: 'b9b458b9b18859132145848135118aacf6c43ab2', class: "r-input-code--container", role: "group", "aria-labelledby": `${uniqueId}-label`, "aria-describedby": this.groupDescribedby }, h("slot", { key: '34d0391987a526d9672ff457fbfd34c153099dbc', name: "leading" }), Array.from({ length: this.length }).map((_, i) => (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, onInput: this.createInputHandler(i), onKeyDown: this.createKeyDownHandler(i), onPaste: this.handlePaste }))), h("input", Object.assign({ key: '029bcca9a6907090058ea65de36cc3aea106ad25', type: "hidden" }, inputAttrs, { value: this.values.join(''), ref: el => this.nativeElement = el })), h("div", { key: 'a91256c17340a75fe1e5a7942c9ede1089bd477c', class: "r-input-code--trailing" }, this.readonly &&
-            h("r-icon", { key: '28df1a0823e8b6c94a26fe8dac6838d663da26b7', class: "r-input-code--readonly-icon", name: "pen-disabled", size: "s" }), this.hasTrailingSlot &&
-            h("slot", { key: '13dee654a15b7104fbe66408ba6c0a8d4b839a2c', name: "trailing" }, valid &&
-                h("r-icon", { key: '85f0413d86b7366229fe07af87a7bdd5368f8a22', name: "circled-check", size: "s", color: "var(--r-status-success-regular)" })))), h("slot", { key: 'cf9e23001dec5216a2c35144b9282dee25d5fe50', name: "message" }, this.hasMessage &&
-            h("r-hint", { key: '0c642fbeef09ec9c5ce1e2a6272bb27160be05c0', "aria-live": "polite", id: `${uniqueId}-message`, variant: "error" }, this.message))));
+                h("slot", { name: "label" })), h("slot", { key: 'd7afacaedc1741fdf703f5263eda57dc3591b36d', name: "popover" })), hint &&
+            h("r-hint", { key: 'd49faa30ca4ebbefe7e88217392ef7f6a9487e7f', id: `${uniqueId}-hint`, role: "note" }, hint), h("div", { key: '89deb68a39134cdacc1009e83113c589aafc311e', class: "r-input-code--container", role: "group", "aria-labelledby": `${uniqueId}-label`, "aria-describedby": this.groupDescribedby }, h("slot", { key: '170f25027ccf4d3603474a77a92c5ff24579e46e', name: "leading" }), Array.from({ length: this.length }).map((_, i) => (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, onInput: this.createInputHandler(i), onKeyDown: this.createKeyDownHandler(i), onPaste: this.handlePaste }))), h("input", Object.assign({ key: '482c544b68d48b089f7177846cee7f5fc279bbd9', type: "hidden" }, inputAttrs, { value: this.values.join(''), ref: el => this.nativeElement = el })), h("div", { key: '73f393a98b3ca5e830e7b35c360cd9e242564d8e', class: "r-input-code--trailing" }, this.readonly &&
+            h("r-icon", { key: '751fb71619d0d0ea808332de4cc9e1b1f2dff59d', class: "r-input-code--readonly-icon", name: "pen-disabled", size: "s" }), this.hasTrailingSlot &&
+            h("slot", { key: '072e2f141e1ef3fbf931e9c0abf24d6c42f64ec5', name: "trailing" }, valid &&
+                h("r-icon", { key: '45b17f30472b9a5cc2e2101261f7884bd96d1d72', name: "circled-check", size: "s", color: "var(--r-status-success-regular)" })))), h("slot", { key: 'b8be9bc6d2c14fa04312313709a7911d8339c735', name: "message" }, this.hasMessage &&
+            h("r-hint", { key: 'f76a1e5aa6d542790bdc01c7e931eda9a986a14b', "aria-live": "polite", id: `${uniqueId}-message`, variant: "error" }, this.message))));
     }
     get host() { return getElement(this); }
     static get watchers() { return {

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

@@ -41,7 +41,7 @@ function requireCustomParseFormat () {
 var customParseFormatExports = requireCustomParseFormat();
 var customParseFormat = /*@__PURE__*/getDefaultExportFromCjs(customParseFormatExports);
 
-const inputDateCss = ":host{display:inline-flex;flex-direction:column;vertical-align:top;--r-label--margin-bottom:0}:host slot{display:contents}:host([readonly]:not([readonly=false])){--r-input-date--container--background-color:var(--r-background-soft, #f3f1f0);--r-input-date--container--border-color:transparent transparent var(--r-border-soft, #686868) transparent;--r-input-date--container--cursor:text}:host(:hover:not([disabled]:not([disabled=false])):not([readonly]:not([readonly=false]))){--r-input-date--container--background-color:var(--r-background-interactive-hovered, rgba(40, 40, 40, 0.04))}:host(:active:not([disabled]:not([disabled=false])):not([readonly]:not([readonly=false]))){--r-input-date--container--background-color:var(--r-background-interactive-pressed, rgba(40, 40, 40, 0.12))}:host([full-width]:not([full-width=false])){display:flex}:host([disabled]:not([disabled=false])){cursor:not-allowed;--r-input-date--container--opacity:0.4;--r-input-date--container--cursor:not-allowed;--r-input-date--container--pointer-events:none;--r-input-date--container--background-color:transparent}:host([invalid]:not([invalid=false])){--r-input-date--container--border-color:var(--r-status-error-regular, #da1e28);--r-input-date--container--background-color:var(--r-status-error-soft, #fef6f6)}.r-input-date{padding:var(--r-input-date--padding, 0);margin:var(--r-input-date--margin, 0);border:var(--r-input-date--border, none)}.r-input-date--legend-container{display:var(--r-input-date--legend-container--display, flex);gap:var(--r-input-date--legend-container--gap, var(--r-spacing-100, 1rem));align-items:var(--r-input-date--legend-container--align-items, center);justify-content:var(--r-input-date--label-container--align-items, space-between)}.r-input-date--legend-container ::slotted([slot=popover]){display:var(--r-input-date--popover--display, inline-flex);height:var(--r-input-date--popover--height, var(--r-spacing-150, 1.5));align-items:var(--r-input-date--popover--align-items, center);justify-content:var(--r-input-date--popover--justify-content, center);margin-right:var(--r-input-date--popover--margin-right, -0.25rem);--r-popover--trigger--min-width:var(--r-input-date--popover-trigger--min-width, var(--r-spacing-150, 1.5));--r-popover--trigger--min-height:var(--r-input-date--popover--trigger--min-height, var(--r-spacing-150, 1.5))}.r-input-date--legend{padding:var(--r-input-date--label--padding, 0)}.r-input-date--container{position:var(--r-input-date--container--position, relative);display:var(--r-input-date--container--display, flex);align-items:var(--r-input-date--container--align-items, center);height:var(--r-input-date--container--height, var(--r-spacing-275, 2.75rem));font-family:var(--r-input-date--container--font-family, var(--r-font-family-text, system-ui));background-color:var(--r-input-date--container--background-color, var(--r-background-softest, #fff));border-width:var(--r-input-date--container--border-width, 1px);border-style:var(--r-input-date--container--border-style, solid);border-color:var(--r-input-date--container--border-color, var(--r-border-soft, #686868));box-sizing:var(--r-input-date--container--box-sizing, border-box);box-shadow:var(--r-input-date--container--box-shadow, none);outline:var(--r-input-date--container--outline, none);outline-offset:var(--r-input-date--container--outline-offset, 0);padding-right:var(--r-input-date--container--padding-right, 0.7em);padding-left:var(--r-input-date--container--padding-left, 0.7em);opacity:var(--r-input-date--container--opacity, 1);pointer-events:var(--r-input-date--container--pointer-events, auto);cursor:var(--r-input-date--container--cursor, inherit);margin-top:var(--r-input-date--container--margin-top, var(--r-spacing-025, 0.25rem));gap:var(--r-input-date--leading--gap, 0.625rem)}.r-input-date--container:has(input:focus-within){--r-input-date--container--box-shadow:0 0 0 6px var(--r-border-focused-outlined);--r-input-date--container--outline:2px solid var(--r-border-focused);--r-input-date--container--outline-offset:2px}.r-input-date--calendar-icon{color:var(--r-input-date--leading--color, var(--r-icon-soft, #686868))}.r-input-date--inputs{display:var(--r-input-date--inputs--display, flex);align-items:var(--r-input-date--inputs--align-items, center)}.r-input-date--input{max-width:var(--r-input-date--input--max-width, 2.625rem);field-sizing:var(--r-input-date--input--field-sizing, content);outline:var(--r-input-date--input--outline, none);height:var(--r-input-date--input--height, 100%);font-family:var(--r-input-date--input--font-family, inherit);font-size:var(--r-input-date--input--font-size, var(--r-font-size-400, 1rem));background-color:var(--r-input-date--input--background-color, transparent);border:var(--r-input-date--input--border, none);padding:var(--r-input-date--input--padding, 0)}.r-input-date--input[data-date-type=DD]{--r-input-date--input--max-width:1.5rem}.r-input-date--input[data-date-type=MM]{--r-input-date--input--max-width:1.75rem}.r-input-date--delimiter{padding-inline:var(--r-input-date--delimiter--padding-inline, var(--r-spacing-025, 0.25rem));margin-top:var(--r-input-date--delimiter--margin-top, -0.25rem);color:var(--r-input-date--delimiter--color, var(--r-border-regular, #282828));font-size:var(--r-input-date--delimiter--font-size, var(--r-spacing-150, 1.5rem));font-weight:var(--r-input-date--delimiter--font-weight, 200)}.r-input-date--message{margin-top:var(--r-input-date--message--margin-top, var(--r-spacing-025, 0.25rem))}.r-input-date--message:empty{--r-input-date--message--margin-top:0}.r-input-date--trailing{display:var(--r-input-date--trailing--display, flex);margin-left:var(--r-input-date--trailing--margin-left, auto);align-items:var(--r-input-date--trailing--align-items, center);gap:var(--r-input-date--trailing--gap, 0.625rem)}.r-input-date--readonly-icon{color:var(--r-input-date--readonly-icon--color, var(--r-icon-soft, #686868))}.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);border:0}";
+const inputDateCss = ":host{display:inline-flex;flex-direction:column;vertical-align:top;--r-label--margin-bottom:0}:host slot{display:contents}:host([readonly]:not([readonly=false])){--r-input-date--container--background-color:var(--r-background-soft, #f3f1f0);--r-input-date--container--border-color:transparent transparent var(--r-border-soft, #686868) transparent;--r-input-date--container--cursor:text}:host(:hover:not([disabled]:not([disabled=false])):not([readonly]:not([readonly=false]))){--r-input-date--container--background-color:var(--r-background-interactive-hovered, rgba(40, 40, 40, 0.04))}:host(:active:not([disabled]:not([disabled=false])):not([readonly]:not([readonly=false]))){--r-input-date--container--background-color:var(--r-background-interactive-pressed, rgba(40, 40, 40, 0.12))}:host([full-width]:not([full-width=false])){display:flex}:host([disabled]:not([disabled=false])){cursor:not-allowed;--r-input-date--container--opacity:0.4;--r-input-date--container--cursor:not-allowed;--r-input-date--container--pointer-events:none;--r-input-date--container--background-color:transparent}:host([invalid]:not([invalid=false])){--r-input-date--container--border-color:var(--r-status-error-regular, #b00c15);--r-input-date--container--background-color:var(--r-status-error-soft, #fef6f6)}.r-input-date{padding:var(--r-input-date--padding, 0);margin:var(--r-input-date--margin, 0);border:var(--r-input-date--border, none)}.r-input-date--legend-container{display:var(--r-input-date--legend-container--display, flex);gap:var(--r-input-date--legend-container--gap, var(--r-spacing-100, 1rem));align-items:var(--r-input-date--legend-container--align-items, center);justify-content:var(--r-input-date--label-container--align-items, space-between)}.r-input-date--legend-container ::slotted([slot=popover]){display:var(--r-input-date--popover--display, inline-flex);height:var(--r-input-date--popover--height, var(--r-spacing-150, 1.5));align-items:var(--r-input-date--popover--align-items, center);justify-content:var(--r-input-date--popover--justify-content, center);margin-right:var(--r-input-date--popover--margin-right, -0.25rem);--r-popover--trigger--min-width:var(--r-input-date--popover-trigger--min-width, var(--r-spacing-150, 1.5));--r-popover--trigger--min-height:var(--r-input-date--popover--trigger--min-height, var(--r-spacing-150, 1.5))}.r-input-date--legend{padding:var(--r-input-date--label--padding, 0)}.r-input-date--container{position:var(--r-input-date--container--position, relative);display:var(--r-input-date--container--display, flex);align-items:var(--r-input-date--container--align-items, center);height:var(--r-input-date--container--height, var(--r-spacing-275, 2.75rem));font-family:var(--r-input-date--container--font-family, var(--r-font-family-text, system-ui));background-color:var(--r-input-date--container--background-color, var(--r-background-softest, #fff));border-width:var(--r-input-date--container--border-width, 1px);border-style:var(--r-input-date--container--border-style, solid);border-color:var(--r-input-date--container--border-color, var(--r-border-soft, #686868));box-sizing:var(--r-input-date--container--box-sizing, border-box);box-shadow:var(--r-input-date--container--box-shadow, none);outline:var(--r-input-date--container--outline, none);outline-offset:var(--r-input-date--container--outline-offset, 0);padding-right:var(--r-input-date--container--padding-right, 0.7em);padding-left:var(--r-input-date--container--padding-left, 0.7em);opacity:var(--r-input-date--container--opacity, 1);pointer-events:var(--r-input-date--container--pointer-events, auto);cursor:var(--r-input-date--container--cursor, inherit);margin-top:var(--r-input-date--container--margin-top, var(--r-spacing-025, 0.25rem));gap:var(--r-input-date--leading--gap, 0.625rem)}.r-input-date--container:has(input:focus-within){--r-input-date--container--box-shadow:0 0 0 6px var(--r-border-focused-outlined);--r-input-date--container--outline:2px solid var(--r-border-focused);--r-input-date--container--outline-offset:2px}.r-input-date--calendar-icon{color:var(--r-input-date--leading--color, var(--r-icon-soft, #686868))}.r-input-date--inputs{display:var(--r-input-date--inputs--display, flex);align-items:var(--r-input-date--inputs--align-items, center)}.r-input-date--input{max-width:var(--r-input-date--input--max-width, 2.625rem);field-sizing:var(--r-input-date--input--field-sizing, content);outline:var(--r-input-date--input--outline, none);height:var(--r-input-date--input--height, 100%);font-family:var(--r-input-date--input--font-family, inherit);font-size:var(--r-input-date--input--font-size, var(--r-font-size-400, 1rem));background-color:var(--r-input-date--input--background-color, transparent);border:var(--r-input-date--input--border, none);padding:var(--r-input-date--input--padding, 0)}.r-input-date--input[data-date-type=DD]{--r-input-date--input--max-width:1.5rem}.r-input-date--input[data-date-type=MM]{--r-input-date--input--max-width:1.75rem}.r-input-date--delimiter{padding-inline:var(--r-input-date--delimiter--padding-inline, var(--r-spacing-025, 0.25rem));margin-top:var(--r-input-date--delimiter--margin-top, -0.25rem);color:var(--r-input-date--delimiter--color, var(--r-border-regular, #282828));font-size:var(--r-input-date--delimiter--font-size, var(--r-spacing-150, 1.5rem));font-weight:var(--r-input-date--delimiter--font-weight, 200)}.r-input-date--message{margin-top:var(--r-input-date--message--margin-top, var(--r-spacing-025, 0.25rem))}.r-input-date--message:empty{--r-input-date--message--margin-top:0}.r-input-date--trailing{display:var(--r-input-date--trailing--display, flex);margin-left:var(--r-input-date--trailing--margin-left, auto);align-items:var(--r-input-date--trailing--align-items, center);gap:var(--r-input-date--trailing--gap, 0.625rem)}.r-input-date--readonly-icon{color:var(--r-input-date--readonly-icon--color, var(--r-icon-soft, #686868))}.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);border:0}";
 
 const InputDate = class {
     constructor(hostRef) {
@@ -68,6 +68,10 @@ const InputDate = class {
         this.validityState = '';
         /** Validity message passed from validateFormElement function after validation */
         this.validityMessage = '';
+        /** Defines if the component has been touched by user */
+        this.touched = false;
+        /** Defines if the value has been changed by user interaction */
+        this.dirty = false;
         /**
          * Initial attributes state
          * */
@@ -158,6 +162,7 @@ const InputDate = class {
             if (this.readonly)
                 return;
             if (event.code === 'Enter') {
+                this.touched = true;
                 this.validateFormElement(this.nativeElement);
                 if (this.invalid && !this.isNoValidate)
                     return;
@@ -208,6 +213,8 @@ const InputDate = class {
             if (this.readonly)
                 return;
             this.value = event.clipboardData.getData('text');
+            this.touched = true;
+            this.dirty = true;
             event.preventDefault();
         };
         this.createInputHandler = (input, index) => {
@@ -225,7 +232,10 @@ const InputDate = class {
                 index < this.inputOrder.length - 1) {
                 (_c = this.inputs[index + 1]) === null || _c === void 0 ? void 0 : _c.focus();
             }
+            this.touched = true;
+            this.dirty = true;
             this.rInput.emit({ element: this.host, value: this.value });
+            this.validateFormElement(this.nativeElement);
         };
         this.createChangeHandler = (input) => {
             return (e) => this.handleChange(input, e);
@@ -238,29 +248,64 @@ const InputDate = class {
             event.target.value = value;
             this.setDateComponent(input, value);
             this.value = this.inputOrder.map((el) => this.getDateComponent(el)).join(this.delimiter);
+            this.touched = true;
+            this.dirty = true;
             this.rChange.emit({ element: this.host, value: this.value });
             this.validateFormElement(this.nativeElement);
         };
+        this.handleBlur = () => {
+            this.touched = true;
+            this.validateFormElement(this.nativeElement);
+        };
         this.getValidityStateData = (element) => {
+            let validityState = '';
+            let validityMessage = '';
             if (this.required && element.value.length === 0) {
-                this.validityState = 'valueMissing';
-                this.validityMessage = this.valueMissingMessage;
-                return;
+                validityState = 'valueMissing';
+                validityMessage = this.valueMissingMessage;
+                return { validityState, validityMessage };
             }
-            const valid = dayjs(this.value, this.format, true).isValid();
+            const valid = this.value ? dayjs(this.value, this.format, true).isValid() : true;
             if (!valid) {
-                this.validityState = 'invalid';
-                this.validityMessage = this.invalidDateMessage;
-                return;
+                validityState = 'invalid';
+                validityMessage = this.invalidDateMessage;
+                return { validityState, validityMessage };
             }
-            this.validityState = 'valid';
+            // Check min/max constraints only if date is valid and has a value
+            // Note: min and max are expected to be in the same format as this.format
+            // If format changes, the developer should update min/max accordingly
+            if (this.value && valid) {
+                const currentDate = dayjs(this.value, this.format, true);
+                // Check minimum date constraint
+                if (this.min) {
+                    const minDate = dayjs(this.min, this.format, true);
+                    if (minDate.isValid() && currentDate.isBefore(minDate, 'day')) {
+                        validityState = 'rangeUnderflow';
+                        validityMessage = this.rangeUnderflowMessage;
+                        return { validityState, validityMessage };
+                    }
+                }
+                // Check maximum date constraint
+                if (this.max) {
+                    const maxDate = dayjs(this.max, this.format, true);
+                    if (maxDate.isValid() && currentDate.isAfter(maxDate, 'day')) {
+                        validityState = 'rangeOverflow';
+                        validityMessage = this.rangeOverflowMessage;
+                        return { validityState, validityMessage };
+                    }
+                }
+            }
+            validityState = 'valid';
+            return { validityState, validityMessage };
         };
         this.validateFormElement = (element) => {
             if (element === null)
                 return;
             if (this.isNoValidate)
                 return;
-            this.getValidityStateData(element);
+            const { validityState, validityMessage } = this.getValidityStateData(element);
+            this.validityState = validityState;
+            this.validityMessage = validityMessage;
             const isValid = this.validityState === 'valid';
             this.valid = isValid;
             this.invalid = !isValid;
@@ -309,6 +354,8 @@ const InputDate = class {
     }
     handleValueChange() {
         this.setCurrentValues();
+        if (this.touched)
+            this.validateFormElement(this.nativeElement);
     }
     /** Get the date value */
     async getValue() {
@@ -316,6 +363,7 @@ const InputDate = class {
     }
     /** Sets the date value */
     async setValue(value) {
+        this.nativeElement.value = value;
         this.value = value;
     }
     /** Gets the current date format */
@@ -326,6 +374,19 @@ const InputDate = class {
     async setFormat(format) {
         this.format = format;
     }
+    /** Gets the touched state (whether user has interacted with the input) */
+    async isTouched() {
+        return this.touched;
+    }
+    /** Gets the dirty state (whether value has been changed by user) */
+    async isDirty() {
+        return this.dirty;
+    }
+    /** Resets touched and dirty states to pristine (untouched/clean) */
+    async markAsPristine() {
+        this.touched = false;
+        this.dirty = false;
+    }
     /**
      * Resets the component by clearing all input values and focusing the first input.
      * @returns Promise that resolves when reset is complete
@@ -333,6 +394,7 @@ const InputDate = class {
     async reset() {
         if (this.readonly)
             return;
+        this.markAsPristine();
         this.validityState = null;
         this.validityMessage = null;
         this.value = this.initial['value'];
@@ -340,6 +402,14 @@ const InputDate = class {
         this.format = this.initial['format'];
         this.valid = !this.invalid;
     }
+    /**
+     * Validates the input date without triggering UI and returns a boolean indicating its validity.
+     * @returns A boolean indicating whether the input date is valid.
+     */
+    async checkValidity() {
+        const { validityState } = this.getValidityStateData(this.nativeElement);
+        return validityState === 'valid';
+    }
     get inputs() {
         return Array.from(this.host.shadowRoot.querySelectorAll('input[data-date-type]'));
     }
@@ -433,14 +503,14 @@ const InputDate = class {
             id: `${uniqueId}-label`,
             fieldIndicator
         } : {};
-        return (h(Host, { key: '8a1395ebe9606836eeca8c63958dd2c904901cc5', onClick: this.onHostClick }, h("fieldset", Object.assign({ key: '67eda3917e37c76e22dba41a3f168f25542b3e74', class: "r-input-date" }, groupAttrs), h("div", { key: '2e1c2fc3ff538cbaeb79cea6728a0fc01a3cfafe', class: "r-input-date--legend-container" }, h("legend", { key: '0f41209fd3934af15d17a60c366ae95cb7b0ffab', class: "r-input-date--legend" }, h("label", { key: '406ee340682dc64d75aacfe33456ed3d819b1a7d', htmlFor: uniqueId }, label ?
+        return (h(Host, { key: '00e6bbea2dcaf1e88b4587fa9df6165a2c28c134', onClick: this.onHostClick, "data-touched": `${this.touched}`, "data-dirty": `${this.dirty}` }, h("fieldset", Object.assign({ key: '94d107ad0f00608263df3f47b0c2240d93a01c4e', class: "r-input-date" }, groupAttrs), h("div", { key: '3ac5991c7b8754f2fa94c8053f60af17a99301e0', class: "r-input-date--legend-container" }, h("legend", { key: '62fc7c2b6af2f7911c11f135432323621dd278b8', class: "r-input-date--legend" }, h("label", { key: 'd161f2b149ca1295c6e96746520c6ef1cf2e23ba', htmlFor: uniqueId }, label ?
             h("r-label", Object.assign({}, labelAttr, tooltipAttrs), label)
             :
-                h("slot", { name: "label" }))), h("slot", { key: '825c6e93994dd54738f3168e782066787c48af5c', name: "popover" })), hint &&
-            h("r-hint", { key: '9cee9fa8904d8fc1a1968c4a2a12caed9a708cfb', id: `${uniqueId}-hint`, role: "note" }, hint), h("div", { key: '60db93b0f58918d1ab087455fc495b093175dca4', class: "r-input-date--container" }, h("r-icon", { key: '74a495cb61d248a3d10422c6e28bde310684a7e9', name: "calendar", size: "s", class: "r-input-date--calendar-icon" }), h("div", { key: '59d28137260f613ef9f404821e6dc2b6624fb455', 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, 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: '9723d0a2417bf427a5a1ff4690f8745cc40899a0', type: "hidden" }, dateInputAttrs, { value: this.value, ref: (el) => this.nativeElement = el }))), h("div", { key: '65997938c00455e81becba759dc3fdadeeecc1e4', class: "r-input-date--trailing" }, this.readonly &&
-            h("r-icon", { key: '750df4d848ef7d0e7a6b9a7b7853a3389da44232', class: "r-input-date--readonly-icon", name: "pen-disabled", size: "s" }), valid &&
-            h("r-icon", { key: 'b24b8ea8a53b423c0060ac6a34d75ea7ad192b94', name: "circled-check", size: "s", color: "var(--r-status-success-regular)" }), this.hasTrailingSlot && h("slot", { key: '147d79539620af0051addf49d7e237c2a3428ff4', name: "trailing" }))), h("div", { key: 'e6b2bccd8d97560940805a08f420f5fc9b165649', id: `${uniqueId}-message`, "aria-live": "polite", class: "r-input-date--message" }, this.hasMessage && h("r-hint", { key: 'd4807c998838bf7a6c748a4555901e66f2ef92d0', variant: "error" }, this.message)))));
+                h("slot", { name: "label" }))), h("slot", { key: '81c9e7753273c5e7d6db5d6a1f0fad8398a57c0a', name: "popover" })), hint &&
+            h("r-hint", { key: '0814c3ef100ed6a8512b2f15d5b59e01664bd811', id: `${uniqueId}-hint`, role: "note" }, hint), h("div", { key: '65247f18a297ef6a5751ab86e1123271ed8759f7', class: "r-input-date--container" }, h("r-icon", { key: 'fce4150b7c1b801752e1a67339b1a599728b0631', name: "calendar", size: "s", class: "r-input-date--calendar-icon" }), h("div", { key: '3b5e4776102b06acd9626477c702d2dc52ef681c', 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: '2c181871c97962a35988eb406c09a05c8f27181d', type: "hidden" }, dateInputAttrs, { value: this.value, ref: (el) => this.nativeElement = el }))), h("div", { key: '8c694c11cc7ea4ecc23484d3f014cc865e0c56ad', class: "r-input-date--trailing" }, this.readonly &&
+            h("r-icon", { key: '8ed65eaef19f280381b7c0fae206163f3adeb5f4', class: "r-input-date--readonly-icon", name: "pen-disabled", size: "s" }), valid &&
+            h("r-icon", { key: 'aef55123b4b001576b482e0be4eff0df6dc97930', name: "circled-check", size: "s", color: "var(--r-status-success-regular)" }), this.hasTrailingSlot && h("slot", { key: 'd92dcda80b7434af1f8ed781329ce8f2e6734225', name: "trailing" }))), h("div", { key: '139792ccc090b29f041e3a731f65e5916379b911', id: `${uniqueId}-message`, "aria-live": "polite", class: "r-input-date--message" }, this.hasMessage && h("r-hint", { key: '74d444c9748c032e844c0772b8758873bdaef391', variant: "error" }, this.message)))));
     }
     get host() { return getElement(this); }
     static get watchers() { return {

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

@@ -59,16 +59,19 @@ const InputPassword = class {
             this.rChange.emit({ element: host, value });
         };
         this.getValidityStateData = (element) => {
+            let validityState = '';
+            let validityMessage = '';
             for (const state in element.validity) {
                 if (element.validity[state]) {
-                    this.validityState = state;
+                    validityState = state;
                     if (this[state + 'Message']) {
-                        this.validityMessage = this[state + 'Message'];
-                        return;
+                        validityMessage = this[state + 'Message'];
+                        return { validityState, validityMessage };
                     }
-                    this.validityMessage = element.validationMessage;
+                    validityMessage = element.validationMessage;
                 }
             }
+            return { validityState, validityMessage };
         };
         this.validateFormElement = (element) => {
             if (element === null)
@@ -77,7 +80,9 @@ const InputPassword = class {
                 return;
             if (this.error)
                 return;
-            this.getValidityStateData(element.shadowRoot.querySelector('input'));
+            const { validityState, validityMessage } = this.getValidityStateData(element.shadowRoot.querySelector('input'));
+            this.validityState = validityState;
+            this.validityMessage = validityMessage;
             const isValid = this.validityState === 'valid';
             this.valid = isValid;
             this.invalid = !isValid;
@@ -155,11 +160,22 @@ const InputPassword = class {
     }
     /** Get the input value */
     async getValue() {
-        return this.nativeElement.getValue();
+        return this.value || '';
     }
     /** Set the input value */
     async setValue(value) {
-        this.nativeElement.value = value;
+        if (this.readonly)
+            return;
+        this.value = value;
+        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.
+     */
+    async checkValidity() {
+        const { validityState } = this.getValidityStateData(this.nativeElement.shadowRoot.querySelector('input'));
+        return validityState === 'valid';
     }
     /** Identify wrapping form element */
     get parentFormEl() {
@@ -229,8 +245,8 @@ const InputPassword = class {
             novalidate: true,
             readonly
         };
-        return (h(Host, { key: '7ab5b4c4eb280f906cbabcc0d1ffa823d7b67bd1' }, h("r-input", Object.assign({ key: '0b71f3034611c2ed0d82b91dd8b9d98649ebd63f' }, 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: '5cf30f89fead0941ebf8f388f4380e7be82222b9', name: "padlock-closed", size: "s", slot: "leading" }), h("slot", { key: '921d8abefcef0bb71b2a518db1cba0c263b8924a', name: "popover", slot: "popover" }), h("r-icon-button", { key: '3b005036b4110685e4abf54add5bbe2571f2cf1b', 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: 'b5c7af864da0a47d81b40c1aa53f6bed20bc8349', slot: "message", variant: "error" }, this.hasError && this.error, this.hasValidationError && (this.customErrorMessage || this.validityMessage))), h("div", { key: 'f3d2f7ad5811e716eb2184aad5ff25f5a282078d', class: "visually-hidden", ref: el => this.passwordVisibilityChangeAlertContainer = el, "aria-live": "polite" })));
+        return (h(Host, { key: '810ae74cdcdcd8a4289255e2b99b6cfc213330ac' }, h("r-input", Object.assign({ key: '55027ca5cd8b8ba4eade60067ac182e38eaf1bfa' }, 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: '935aa481c0eff444462e6be6d8e6975db8a24708', name: "padlock-closed", size: "s", slot: "leading" }), h("slot", { key: 'df29bd4fa96db1c1f5f70be9c44fab1b9c5f02be', name: "popover", slot: "popover" }), h("r-icon-button", { key: '95d5f3c5e64eb7b43364db7aff943d35fbdc4d2d', 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: '7390d667a69c4ae5c2c6ae480eaf5f879ad6ed78', slot: "message", variant: "error" }, this.hasError && this.error, this.hasValidationError && (this.customErrorMessage || this.validityMessage))), h("div", { key: 'c70c38f1249c80973bb2fe2a25ddf7d88835c686', class: "visually-hidden", ref: el => this.passwordVisibilityChangeAlertContainer = el, "aria-live": "polite" })));
     }
     get host() { return getElement(this); }
 };

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

@@ -2271,7 +2271,9 @@ const InputPhoneNumber = class {
                 return;
             if (this.error)
                 return;
-            this.getValidityStateData();
+            const { validityState, validityMessage } = this.getValidityStateData();
+            this.validityState = validityState;
+            this.validityMessage = validityMessage;
             const isValid = this.validityState === 'valid';
             this.valid = isValid;
             this.invalid = !isValid;
@@ -2282,22 +2284,25 @@ const InputPhoneNumber = class {
         };
         this.getValidityStateData = () => {
             var _a, _b;
+            let validityState = '';
+            let validityMessage = '';
             if (!this.required && !((_a = this.phoneNumber) === null || _a === void 0 ? void 0 : _a.length)) {
-                this.validityState = 'valid';
-                return;
+                validityState = 'valid';
+                return { validityState, validityMessage };
             }
             if (!((_b = this.phoneNumber) === null || _b === void 0 ? void 0 : _b.length)) {
-                this.validityState = 'valueMissing';
-                this.validityMessage = this.valueMissingMessage;
-                return;
+                validityState = 'valueMissing';
+                validityMessage = this.valueMissingMessage;
+                return { validityState, validityMessage };
             }
             const isPhoneNumberValid = this.countryCode ? this.getPhoneValidationResult(this.phoneNumber, this.countryCode).isValid : false;
             if (!isPhoneNumberValid) {
-                this.validityState = 'invalid';
-                this.validityMessage = this.customErrorMessage;
-                return;
+                validityState = 'invalid';
+                validityMessage = this.customErrorMessage;
+                return { validityState, validityMessage };
             }
-            this.validityState = 'valid';
+            validityState = 'valid';
+            return { validityState, validityMessage };
         };
         this.onSubmitForm = (event) => {
             if (this.isNoValidate)
@@ -2339,6 +2344,14 @@ const InputPhoneNumber = class {
         this.customErrorMessage = message;
         this.validateFormElement(this.nativeElement);
     }
+    /**
+     * Validates the input phone number without triggering UI and returns a boolean indicating its validity.
+     * @returns A boolean indicating whether the input phone number is valid.
+     */
+    async checkValidity() {
+        const { validityState } = this.getValidityStateData();
+        return validityState === 'valid';
+    }
     /** Check validity and reveal validation state. */
     async reportValidity() {
         this.validateFormElement(this.nativeElement);
@@ -2496,10 +2509,10 @@ const InputPhoneNumber = class {
             disabled,
             'aria-describedby': this.ariaDescribedBy
         };
-        return (h(Host, { key: '87f5720347e3627524f95f7110088b8eddef7f8f' }, h("div", { key: '091e2048f011ff4167b35434567149de061954bd', class: "r-input-phone-number--label-container" }, h("label", { key: '80994d1cfd1b6f2228fb231f64894e660bdb1a1c', id: `${uniqueId}-label` }, label &&
-            h("r-label", Object.assign({ key: '36fa07371ee2c9d37645060a29f2d6f4ffe66342' }, labelAttr), label)), h("slot", { key: '76034d24a4208a46ee92185221256b9b5e87f971', name: "popover" })), hint &&
-            h("r-hint", { key: '574a0ec6541310640594eed29e0c301f5f9a01f7', id: `${uniqueId}-hint`, role: "note" }, hint), h("div", { key: '63f37ce77a8e247091e0e6bf55632a834e19992d', class: "r-input-phone-number", role: "group", "aria-labelledby": `${uniqueId}-label`, "aria-describedby": this.ariaDescribedBy }, h("slot", { key: '36f3e834567d3ce77b6d89ae3e835eee630675b7' }), h("r-input", { key: '2f8dc7a95823b3107d8e24f90ae53791554c19af', 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 }, valid && phoneNumber &&
-            h("r-icon", { key: '4559b1d4c55e35b2ef9560554a62d4742bca875e', slot: "trailing", name: "circled-check", size: "s", color: "var(--r-status-success-regular)" }))), h("input", Object.assign({ key: 'c68a9255419c41e8b9fc02127d5f3b68cd14f40b', type: "hidden" }, inputAttrs, { readonly: this.readonly, value: fullPhoneNumber, ref: el => this.nativeElement = el })), h("r-hint", { key: '43712e3a6b916945b1a00d3c6d8ace5f7bdcc1d7', "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: '4551070926e1974ddf3fcb8cc435570ddde50276' }, h("div", { key: 'a076fb01b4e0563ec2d30a5680a6ccd48b2f6895', class: "r-input-phone-number--label-container" }, h("label", { key: 'a8ad943efeca2ac3b5a63857ea0a52b19c32f09c', id: `${uniqueId}-label` }, label &&
+            h("r-label", Object.assign({ key: 'ac0d2a1c12cb85ec03e6596b9bb2e28328026eac' }, labelAttr), label)), h("slot", { key: 'cadd98a33c32bfb60be0a3448772eac483630bdf', name: "popover" })), hint &&
+            h("r-hint", { key: '23874cabee60dc0a5e620066eed92de809cac1eb', id: `${uniqueId}-hint`, role: "note" }, hint), h("div", { key: '800b3a389ce815c5e137077dd5766177c317a05d', class: "r-input-phone-number", role: "group", "aria-labelledby": `${uniqueId}-label`, "aria-describedby": this.ariaDescribedBy }, h("slot", { key: '6106007980212ef05cd11304da2a4d0cc28ddf4f' }), h("r-input", { key: 'd65b4d9ca8761c7e6dd08359ff02f3c88c57aa66', 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 }, valid && phoneNumber &&
+            h("r-icon", { key: '09c721cb014d6d7ece724bcf7de9ec5928624dac', slot: "trailing", name: "circled-check", size: "s", color: "var(--r-status-success-regular)" }))), h("input", Object.assign({ key: 'e2eef2512f9125f0dd3d1b09120cbb77955350bd', type: "hidden" }, inputAttrs, { readonly: this.readonly, value: fullPhoneNumber, ref: el => this.nativeElement = el })), h("r-hint", { key: 'a12e9640bcf2df7b754de4e54b111e4ead2d023e', "aria-live": "polite", "aria-atomic": "true", id: `${uniqueId}-message`, class: !this.hasMessage && 'visually-hidden', variant: "error" }, this.hasMessage ? (this.hasError ? this.error : this.validityMessage) : '')));
     }
     get host() { return getElement(this); }
     static get watchers() { return {

package/dist/esm/r-input.entry.js

@@ -1,7 +1,7 @@
 import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-Da7qOBFr.js';
 import { a as appendControlToFormData } from './formData-DvLT8-y3.js';
 
-const inputCss = ":host{display:inline-flex;flex-direction:column;vertical-align:top;--r-label--margin-bottom:0}:host slot{display:contents}:host([readonly]:not([readonly=false])){--r-input--container--background-color:var(--r-background-soft, #f3f1f0);--r-input--container--border-color:transparent transparent var(--r-border-soft, #686868) transparent;--r-input--container--cursor:text}:host(:hover:not([disabled]:not([disabled=false])):not([readonly]:not([readonly=false]))){--r-input--container--background-color:var(--r-background-interactive-hovered, rgba(40, 40, 40, 0.04))}:host(.focused){--r-input--container--box-shadow:0 0 0 6px var(--r-border-focused-outlined);--r-input--container--outline:2px solid var(--r-border-focused);--r-input--container--outline-offset:2px}:host(:active:not([disabled]:not([disabled=false])):not([readonly]:not([readonly=false]))){--r-input--container--background-color:var(--r-background-interactive-pressed, rgba(40, 40, 40, 0.12))}:host([expanded]:not([expanded=false])),:host([full-width]:not([full-width=false])){display:block}:host([disabled]:not([disabled=false])){--r-input--container--opacity:0.4;--r-input--container--cursor:not-allowed;--r-input--container--pointer-events:none;--r-input--container--background-color:transparent}:host([invalid]:not([invalid=false])){--r-input--container--border-color:var(--r-status-error-regular, #da1e28);--r-input--container--background-color:var(--r-status-error-soft, #fef6f6)}.r-input{display:var(--r-input--display, flex);flex:var(--r-input--flex, 1);flex-direction:var(--r-input--flex-direction, column);width:var(--r-input--width, auto);font-family:var(--r-input--font-family, system-ui);position:var(--r-input--position, relative);border-radius:var(--r-input--border-radius, 0);cursor:var(--r-input--cursor, inherit)}.r-input--label-container{display:var(--r-input--label-container--display, flex);gap:var(--r-input--label-container--gap, var(--r-spacing-100, 1rem));align-items:var(--r-input--label-container--align-items, center);justify-content:var(--r-input--label-container--align-items, space-between)}.r-input--label-container ::slotted([slot=popover]){display:var(--r-input--popover--display, inline-flex);height:var(--r-input--popover--height, var(--r-spacing-150, 1.5));align-items:var(--r-input--popover--align-items, center);justify-content:var(--r-input--popover--justify-content, center);margin-right:var(--r-input--popover--margin-right, -0.25rem);--r-popover--trigger--min-width:var(--r-input--popover-trigger--min-width, var(--r-spacing-150, 1.5));--r-popover--trigger--min-height:var(--r-input--popover--trigger--min-height, var(--r-spacing-150, 1.5))}.r-input--label{cursor:var(--r-input--label--cursor, inherit)}.r-input--input{font-family:var(--r-input--input--font-family, system-ui);font-size:var(--r-input--input--font-size, 1em);width:var(--r-input--input--width, 100%);max-width:var(--r-input--input--max-width, 100%);height:var(--r-input--input--height, var(--r-spacing-275, 2.75rem));border-radius:var(--r-input--input--border-radius, 0);border:var(--r-input--input--border, none);color:var(--r-input--input--color, var(--r-text-regular, #282828));background-color:var(--r-input--input--background-color, none);appearance:var(--r-input--input--appearance, none);box-sizing:var(--r-input--input--box-sizing, border-box);outline:var(--r-input--input--outline, none);cursor:var(--r-input--input--cursor, inherit);pointer-events:var(--r-input--input--pointer-events, auto)}.r-input--input:autofill,.r-input--input:-webkit-autofill{-webkit-background-clip:text !important}.r-input--input::-ms-reveal{display:var(--r-input--input--ms-reveal--display, none)}.r-input--input::placeholder{color:var(--r-input--input--placeholder--color, var(--r-text-soft, #686868))}.r-input--input[type=search]::-webkit-search-cancel-button{cursor:var(--r-input--input-clear--cursor, pointer);display:var(--r-input--input-clear--display, block);height:var(--r-input--input-clear--height, 0.875rem);width:var(--r-input--input-clear--width, 0.875rem);appearance:var(--r-input--input-clear--appearance, none);background-repeat:var(--r-input--input-clear--background-repeat, no-repeat);background-image:var(--r-input--input-clear--background-image, url(\"data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20fill%3D%22none%22%20stroke-width%3D%221.5%22%20viewBox%3D%220.75%200.75%2022.5%2022.5%22%3E%3Cpath%20id%3D%22Vector%202269%22%20stroke%3D%22currentColor%22%20d%3D%22M1.5%201.5L22.5%2022.5%22%2F%3E%3Cpath%20id%3D%22Vector%202270%22%20stroke%3D%22currentColor%22%20d%3D%22M22.5%201.5L1.5%2022.5%22%2F%3E%3C%2Fsvg%3E\"));background-size:var(--r-input--input-clear--background-size, contain);margin-inline:var(--r-input--input-clear--margin-inline, 0);color:currentColor}.r-input--button{position:var(--r-input--icon-button--position, absolute);width:var(--r-input--icon-button--width, calc(1.125em + var(--r-input--icon--width)));height:var(--r-input--icon-button--height, 100%);top:var(--r-input--icon-button--top, 0);right:var(--r-input--icon-button--right, auto);bottom:var(--r-input--icon-button--bottom, auto);left:var(--r-input--icon-button--left, 0);cursor:var(--r-input--icon-button--cursor, inherit)}.r-input--container{position:var(--r-input--container--position, relative);display:var(--r-input--container--display, flex);align-items:var(--r-input--container--align-items, center);gap:var(--r-input--container--gap, 0.625rem);height:var(--r-input--container--height, var(--r-spacing-275, 2.75rem));background-color:var(--r-input--container--background-color, var(--r-background-softest, #fff));border-width:var(--r-input--container--border-width, 1px);border-style:var(--r-input--container--border-style, solid);border-color:var(--r-input--container--border-color, var(--r-border-soft, #686868));box-sizing:var(--r-input--container--box-sizing, border-box);box-shadow:var(--r-input--container--box-shadow, none);outline:var(--r-input--container--outline, none);outline-offset:var(--r-input--container--outline-offset, 0);padding-top:var(--r-input--container--padding-top, 0.6875rem);padding-right:var(--r-input--container--padding-right, var(--r-spacing-075, 0.75rem));padding-bottom:var(--r-input--container--padding-bottom, 0.6875rem);padding-left:var(--r-input--container--padding-left, var(--r-spacing-0275, 0.75rem));opacity:var(--r-input--container--opacity, 1);pointer-events:var(--r-input--container--pointer-events, auto);line-height:var(--r-input--container--line-height, 1);cursor:var(--r-input--container--cursor, inherit);margin-top:var(--r-input--container--margin-top, var(--r-spacing-025, 0.25rem))}.r-input--container slot[name=leading]{color:var(--r-input--container-leading--color, var(--r-icon-soft, #686868))}.r-input--message:has(r-hint),.r-input--message ::slotted([slot=message]){margin-top:var(--r-input--message--margin-top, var(--r-spacing-025, 0.25rem))}.r-input--trailing{display:var(--r-input--trailing--display, flex);margin-left:var(--r-input--trailing--margin-left, auto);align-items:var(--r-input--trailing--align-items, center);gap:var(--r-input--trailing--gap, 0.625rem)}.r-input--readonly-icon{color:var(--r-input--readonly-icon--color, var(--r-icon-soft, #686868))}.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);border:0}";
+const inputCss = ":host{display:inline-flex;flex-direction:column;vertical-align:top;--r-label--margin-bottom:0}:host slot{display:contents}:host([readonly]:not([readonly=false])){--r-input--container--background-color:var(--r-background-soft, #f3f1f0);--r-input--container--border-color:transparent transparent var(--r-border-soft, #686868) transparent;--r-input--container--cursor:text}:host(:hover:not([disabled]:not([disabled=false])):not([readonly]:not([readonly=false]))){--r-input--container--background-color:var(--r-background-interactive-hovered, rgba(40, 40, 40, 0.04))}:host(.focused){--r-input--container--box-shadow:0 0 0 6px var(--r-border-focused-outlined);--r-input--container--outline:2px solid var(--r-border-focused);--r-input--container--outline-offset:2px}:host(:active:not([disabled]:not([disabled=false])):not([readonly]:not([readonly=false]))){--r-input--container--background-color:var(--r-background-interactive-pressed, rgba(40, 40, 40, 0.12))}:host([expanded]:not([expanded=false])),:host([full-width]:not([full-width=false])){display:block}:host([disabled]:not([disabled=false])){--r-input--container--opacity:0.4;--r-input--container--cursor:not-allowed;--r-input--container--pointer-events:none;--r-input--container--background-color:transparent}:host([invalid]:not([invalid=false])){--r-input--container--border-color:var(--r-status-error-regular, #b00c15);--r-input--container--background-color:var(--r-status-error-soft, #fef6f6)}.r-input{display:var(--r-input--display, flex);flex:var(--r-input--flex, 1);flex-direction:var(--r-input--flex-direction, column);width:var(--r-input--width, auto);font-family:var(--r-input--font-family, system-ui);position:var(--r-input--position, relative);border-radius:var(--r-input--border-radius, 0);cursor:var(--r-input--cursor, inherit)}.r-input--label-container{display:var(--r-input--label-container--display, flex);gap:var(--r-input--label-container--gap, var(--r-spacing-100, 1rem));align-items:var(--r-input--label-container--align-items, center);justify-content:var(--r-input--label-container--align-items, space-between)}.r-input--label-container ::slotted([slot=popover]){display:var(--r-input--popover--display, inline-flex);height:var(--r-input--popover--height, var(--r-spacing-150, 1.5));align-items:var(--r-input--popover--align-items, center);justify-content:var(--r-input--popover--justify-content, center);margin-right:var(--r-input--popover--margin-right, -0.25rem);--r-popover--trigger--min-width:var(--r-input--popover-trigger--min-width, var(--r-spacing-150, 1.5));--r-popover--trigger--min-height:var(--r-input--popover--trigger--min-height, var(--r-spacing-150, 1.5))}.r-input--label{cursor:var(--r-input--label--cursor, inherit)}.r-input--input{font-family:var(--r-input--input--font-family, system-ui);font-size:var(--r-input--input--font-size, 1em);width:var(--r-input--input--width, 100%);max-width:var(--r-input--input--max-width, 100%);height:var(--r-input--input--height, var(--r-spacing-275, 2.75rem));border-radius:var(--r-input--input--border-radius, 0);border:var(--r-input--input--border, none);color:var(--r-input--input--color, var(--r-text-regular, #282828));background-color:var(--r-input--input--background-color, none);appearance:var(--r-input--input--appearance, none);box-sizing:var(--r-input--input--box-sizing, border-box);outline:var(--r-input--input--outline, none);cursor:var(--r-input--input--cursor, inherit);pointer-events:var(--r-input--input--pointer-events, auto)}.r-input--input:autofill,.r-input--input:-webkit-autofill{-webkit-background-clip:text !important}.r-input--input::-ms-reveal{display:var(--r-input--input--ms-reveal--display, none)}.r-input--input::placeholder{color:var(--r-input--input--placeholder--color, var(--r-text-soft, #686868))}.r-input--input[type=search]::-webkit-search-cancel-button{cursor:var(--r-input--input-clear--cursor, pointer);display:var(--r-input--input-clear--display, block);height:var(--r-input--input-clear--height, 0.875rem);width:var(--r-input--input-clear--width, 0.875rem);appearance:var(--r-input--input-clear--appearance, none);background-repeat:var(--r-input--input-clear--background-repeat, no-repeat);background-image:var(--r-input--input-clear--background-image, url(\"data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20fill%3D%22none%22%20stroke-width%3D%221.5%22%20viewBox%3D%220.75%200.75%2022.5%2022.5%22%3E%3Cpath%20id%3D%22Vector%202269%22%20stroke%3D%22currentColor%22%20d%3D%22M1.5%201.5L22.5%2022.5%22%2F%3E%3Cpath%20id%3D%22Vector%202270%22%20stroke%3D%22currentColor%22%20d%3D%22M22.5%201.5L1.5%2022.5%22%2F%3E%3C%2Fsvg%3E\"));background-size:var(--r-input--input-clear--background-size, contain);margin-inline:var(--r-input--input-clear--margin-inline, 0);color:currentColor}.r-input--button{position:var(--r-input--icon-button--position, absolute);width:var(--r-input--icon-button--width, calc(1.125em + var(--r-input--icon--width)));height:var(--r-input--icon-button--height, 100%);top:var(--r-input--icon-button--top, 0);right:var(--r-input--icon-button--right, auto);bottom:var(--r-input--icon-button--bottom, auto);left:var(--r-input--icon-button--left, 0);cursor:var(--r-input--icon-button--cursor, inherit)}.r-input--container{position:var(--r-input--container--position, relative);display:var(--r-input--container--display, flex);align-items:var(--r-input--container--align-items, center);gap:var(--r-input--container--gap, 0.625rem);height:var(--r-input--container--height, var(--r-spacing-275, 2.75rem));background-color:var(--r-input--container--background-color, var(--r-background-softest, #fff));border-width:var(--r-input--container--border-width, 1px);border-style:var(--r-input--container--border-style, solid);border-color:var(--r-input--container--border-color, var(--r-border-soft, #686868));box-sizing:var(--r-input--container--box-sizing, border-box);box-shadow:var(--r-input--container--box-shadow, none);outline:var(--r-input--container--outline, none);outline-offset:var(--r-input--container--outline-offset, 0);padding-top:var(--r-input--container--padding-top, 0.6875rem);padding-right:var(--r-input--container--padding-right, var(--r-spacing-075, 0.75rem));padding-bottom:var(--r-input--container--padding-bottom, 0.6875rem);padding-left:var(--r-input--container--padding-left, var(--r-spacing-0275, 0.75rem));opacity:var(--r-input--container--opacity, 1);pointer-events:var(--r-input--container--pointer-events, auto);line-height:var(--r-input--container--line-height, 1);cursor:var(--r-input--container--cursor, inherit);margin-top:var(--r-input--container--margin-top, var(--r-spacing-025, 0.25rem))}.r-input--container slot[name=leading]{color:var(--r-input--container-leading--color, var(--r-icon-soft, #686868))}.r-input--message:has(r-hint),.r-input--message ::slotted([slot=message]){margin-top:var(--r-input--message--margin-top, var(--r-spacing-025, 0.25rem))}.r-input--trailing{display:var(--r-input--trailing--display, flex);margin-left:var(--r-input--trailing--margin-left, auto);align-items:var(--r-input--trailing--align-items, center);gap:var(--r-input--trailing--gap, 0.625rem)}.r-input--readonly-icon{color:var(--r-input--readonly-icon--color, var(--r-icon-soft, #686868))}.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);border:0}";
 
 const RInput = class {
     constructor(hostRef) {
@@ -48,16 +48,25 @@ const RInput = class {
          * */
         this.initial = {};
         this.getValidityStateData = (element) => {
+            let validityState = '';
+            let validityMessage = '';
+            if (this.type === 'email' && this.pattern) {
+                element.setCustomValidity('');
+                validityState = this.validEmailPattern ? 'valid' : 'patternMismatch';
+                validityMessage = this.validEmailPattern ? '' : this.patternMismatchMessage;
+                return { validityState, validityMessage };
+            }
             for (const state in element.validity) {
                 if (element.validity[state]) {
-                    this.validityState = state;
+                    validityState = state;
                     if (this[state + 'Message']) {
-                        this.validityMessage = this[state + 'Message'];
-                        return;
+                        validityMessage = this[state + 'Message'];
+                        return { validityState, validityMessage };
                     }
-                    this.validityMessage = element.validationMessage;
+                    validityMessage = element.validationMessage;
                 }
             }
+            return { validityState, validityMessage };
         };
         this.validateFormElement = (element) => {
             if (element === null)
@@ -66,13 +75,9 @@ const RInput = class {
                 return;
             if (this.error)
                 return;
-            if (this.type === 'email' && this.pattern) {
-                element.setCustomValidity('');
-                this.validityState = this.validEmailPattern ? 'valid' : 'patternMismatch';
-                this.validityMessage = this.validEmailPattern ? '' : this.patternMismatchMessage;
-            }
-            else
-                this.getValidityStateData(element);
+            const { validityState, validityMessage } = this.getValidityStateData(element);
+            this.validityState = validityState;
+            this.validityMessage = validityMessage;
             const isValid = this.validityState === 'valid';
             this.valid = isValid;
             this.invalid = !isValid;
@@ -92,6 +97,8 @@ const RInput = class {
             if (this.readonly)
                 return;
             this.value = event.target.value;
+            const { host, value } = this;
+            this.rChange.emit({ element: host, value });
         };
         this.onBlur = () => {
             this.host.classList.remove('focused');
@@ -205,6 +212,14 @@ const RInput = class {
         this.nativeElement.value = value;
         this.validateFormElement(this.nativeElement);
     }
+    /**
+     * Validates the input without triggering UI and returns a boolean indicating its validity.
+     * @returns A boolean indicating whether the input is valid.
+     */
+    async checkValidity() {
+        const { validityState } = this.getValidityStateData(this.nativeElement);
+        return validityState === 'valid';
+    }
     /** Identify wrapping form element */
     get parentFormEl() {
         return this.host.closest('form') || document.querySelector(`#${this.form}`) || null;
@@ -269,8 +284,6 @@ const RInput = class {
     }
     handleValueChange() {
         this.validateFormElement(this.nativeElement);
-        const { host, value } = this;
-        this.rChange.emit({ element: host, value });
     }
     render() {
         const { name, placeholder, required, fieldIndicator, maxlength, minlength, min, max, value, disabled, form, pattern, invalid, valid, validMarker, hint, label, internal, tooltip, tooltipIcon, tooltipIconColor, uniqueId, autocomplete, readonly, autofocus } = this;