@aurodesignsystem-dev/auro-formkit 0.0.0-pr860.0 → 0.0.0-pr866.0

package/components/checkbox/demo/api.min.js

@@ -1117,9 +1117,9 @@ class AuroFormValidation {
       elem.validity = this.auroInputElements[0].validity;
       elem.errorMessage = this.auroInputElements[0].errorMessage;
 
+      // multiple input in one components (datepicker)
       // combobox has 2 inputs but no need to check validity on the 2nd one which is in fullscreen bib. 
-      // combobox's 2nd input will have noValidate set true.
-      if (elem.validity === 'valid' && this.auroInputElements.length > 1 && !this.auroInputElements[1].noValidate) {
+      if (elem.validity === 'valid' && this.auroInputElements.length > 1 && !this.runtimeUtils.elementMatch(elem, 'auro-combobox')) {
         elem.validity = this.auroInputElements[1].validity;
         elem.errorMessage = this.auroInputElements[1].errorMessage;
       }

package/components/checkbox/demo/index.min.js

@@ -1109,9 +1109,9 @@ class AuroFormValidation {
       elem.validity = this.auroInputElements[0].validity;
       elem.errorMessage = this.auroInputElements[0].errorMessage;
 
+      // multiple input in one components (datepicker)
       // combobox has 2 inputs but no need to check validity on the 2nd one which is in fullscreen bib. 
-      // combobox's 2nd input will have noValidate set true.
-      if (elem.validity === 'valid' && this.auroInputElements.length > 1 && !this.auroInputElements[1].noValidate) {
+      if (elem.validity === 'valid' && this.auroInputElements.length > 1 && !this.runtimeUtils.elementMatch(elem, 'auro-combobox')) {
         elem.validity = this.auroInputElements[1].validity;
         elem.errorMessage = this.auroInputElements[1].errorMessage;
       }

package/components/checkbox/dist/index.js

@@ -1062,9 +1062,9 @@ class AuroFormValidation {
       elem.validity = this.auroInputElements[0].validity;
       elem.errorMessage = this.auroInputElements[0].errorMessage;
 
+      // multiple input in one components (datepicker)
       // combobox has 2 inputs but no need to check validity on the 2nd one which is in fullscreen bib. 
-      // combobox's 2nd input will have noValidate set true.
-      if (elem.validity === 'valid' && this.auroInputElements.length > 1 && !this.auroInputElements[1].noValidate) {
+      if (elem.validity === 'valid' && this.auroInputElements.length > 1 && !this.runtimeUtils.elementMatch(elem, 'auro-combobox')) {
         elem.validity = this.auroInputElements[1].validity;
         elem.errorMessage = this.auroInputElements[1].errorMessage;
       }

package/components/checkbox/dist/registered.js

@@ -1062,9 +1062,9 @@ class AuroFormValidation {
       elem.validity = this.auroInputElements[0].validity;
       elem.errorMessage = this.auroInputElements[0].errorMessage;
 
+      // multiple input in one components (datepicker)
       // combobox has 2 inputs but no need to check validity on the 2nd one which is in fullscreen bib. 
-      // combobox's 2nd input will have noValidate set true.
-      if (elem.validity === 'valid' && this.auroInputElements.length > 1 && !this.auroInputElements[1].noValidate) {
+      if (elem.validity === 'valid' && this.auroInputElements.length > 1 && !this.runtimeUtils.elementMatch(elem, 'auro-combobox')) {
         elem.validity = this.auroInputElements[1].validity;
         elem.errorMessage = this.auroInputElements[1].errorMessage;
       }

package/components/combobox/demo/api.min.js

@@ -1025,9 +1025,9 @@ let AuroFormValidation$1 = class AuroFormValidation {
       elem.validity = this.auroInputElements[0].validity;
       elem.errorMessage = this.auroInputElements[0].errorMessage;
 
+      // multiple input in one components (datepicker)
       // combobox has 2 inputs but no need to check validity on the 2nd one which is in fullscreen bib. 
-      // combobox's 2nd input will have noValidate set true.
-      if (elem.validity === 'valid' && this.auroInputElements.length > 1 && !this.auroInputElements[1].noValidate) {
+      if (elem.validity === 'valid' && this.auroInputElements.length > 1 && !this.runtimeUtils.elementMatch(elem, 'auro-combobox')) {
         elem.validity = this.auroInputElements[1].validity;
         elem.errorMessage = this.auroInputElements[1].errorMessage;
       }
@@ -10234,9 +10234,9 @@ class AuroFormValidation {
       elem.validity = this.auroInputElements[0].validity;
       elem.errorMessage = this.auroInputElements[0].errorMessage;
 
+      // multiple input in one components (datepicker)
       // combobox has 2 inputs but no need to check validity on the 2nd one which is in fullscreen bib. 
-      // combobox's 2nd input will have noValidate set true.
-      if (elem.validity === 'valid' && this.auroInputElements.length > 1 && !this.auroInputElements[1].noValidate) {
+      if (elem.validity === 'valid' && this.auroInputElements.length > 1 && !this.runtimeUtils.elementMatch(elem, 'auro-combobox')) {
         elem.validity = this.auroInputElements[1].validity;
         elem.errorMessage = this.auroInputElements[1].errorMessage;
       }
@@ -11245,6 +11245,7 @@ class BaseInput extends AuroElement$2$1 {
    * @returns {void}
    */
   reset() {
+    this.value = undefined;
     this.validation.reset(this);
   }
 

package/components/combobox/demo/index.min.js

@@ -883,9 +883,9 @@ let AuroFormValidation$1 = class AuroFormValidation {
       elem.validity = this.auroInputElements[0].validity;
       elem.errorMessage = this.auroInputElements[0].errorMessage;
 
+      // multiple input in one components (datepicker)
       // combobox has 2 inputs but no need to check validity on the 2nd one which is in fullscreen bib. 
-      // combobox's 2nd input will have noValidate set true.
-      if (elem.validity === 'valid' && this.auroInputElements.length > 1 && !this.auroInputElements[1].noValidate) {
+      if (elem.validity === 'valid' && this.auroInputElements.length > 1 && !this.runtimeUtils.elementMatch(elem, 'auro-combobox')) {
         elem.validity = this.auroInputElements[1].validity;
         elem.errorMessage = this.auroInputElements[1].errorMessage;
       }
@@ -10092,9 +10092,9 @@ class AuroFormValidation {
       elem.validity = this.auroInputElements[0].validity;
       elem.errorMessage = this.auroInputElements[0].errorMessage;
 
+      // multiple input in one components (datepicker)
       // combobox has 2 inputs but no need to check validity on the 2nd one which is in fullscreen bib. 
-      // combobox's 2nd input will have noValidate set true.
-      if (elem.validity === 'valid' && this.auroInputElements.length > 1 && !this.auroInputElements[1].noValidate) {
+      if (elem.validity === 'valid' && this.auroInputElements.length > 1 && !this.runtimeUtils.elementMatch(elem, 'auro-combobox')) {
         elem.validity = this.auroInputElements[1].validity;
         elem.errorMessage = this.auroInputElements[1].errorMessage;
       }
@@ -11103,6 +11103,7 @@ class BaseInput extends AuroElement$2$1 {
    * @returns {void}
    */
   reset() {
+    this.value = undefined;
     this.validation.reset(this);
   }
 

package/components/combobox/dist/index.js

@@ -820,9 +820,9 @@ let AuroFormValidation$1 = class AuroFormValidation {
       elem.validity = this.auroInputElements[0].validity;
       elem.errorMessage = this.auroInputElements[0].errorMessage;
 
+      // multiple input in one components (datepicker)
       // combobox has 2 inputs but no need to check validity on the 2nd one which is in fullscreen bib. 
-      // combobox's 2nd input will have noValidate set true.
-      if (elem.validity === 'valid' && this.auroInputElements.length > 1 && !this.auroInputElements[1].noValidate) {
+      if (elem.validity === 'valid' && this.auroInputElements.length > 1 && !this.runtimeUtils.elementMatch(elem, 'auro-combobox')) {
         elem.validity = this.auroInputElements[1].validity;
         elem.errorMessage = this.auroInputElements[1].errorMessage;
       }
@@ -10010,9 +10010,9 @@ class AuroFormValidation {
       elem.validity = this.auroInputElements[0].validity;
       elem.errorMessage = this.auroInputElements[0].errorMessage;
 
+      // multiple input in one components (datepicker)
       // combobox has 2 inputs but no need to check validity on the 2nd one which is in fullscreen bib. 
-      // combobox's 2nd input will have noValidate set true.
-      if (elem.validity === 'valid' && this.auroInputElements.length > 1 && !this.auroInputElements[1].noValidate) {
+      if (elem.validity === 'valid' && this.auroInputElements.length > 1 && !this.runtimeUtils.elementMatch(elem, 'auro-combobox')) {
         elem.validity = this.auroInputElements[1].validity;
         elem.errorMessage = this.auroInputElements[1].errorMessage;
       }
@@ -11021,6 +11021,7 @@ class BaseInput extends AuroElement$2$1 {
    * @returns {void}
    */
   reset() {
+    this.value = undefined;
     this.validation.reset(this);
   }
 

package/components/combobox/dist/registered.js

@@ -820,9 +820,9 @@ let AuroFormValidation$1 = class AuroFormValidation {
       elem.validity = this.auroInputElements[0].validity;
       elem.errorMessage = this.auroInputElements[0].errorMessage;
 
+      // multiple input in one components (datepicker)
       // combobox has 2 inputs but no need to check validity on the 2nd one which is in fullscreen bib. 
-      // combobox's 2nd input will have noValidate set true.
-      if (elem.validity === 'valid' && this.auroInputElements.length > 1 && !this.auroInputElements[1].noValidate) {
+      if (elem.validity === 'valid' && this.auroInputElements.length > 1 && !this.runtimeUtils.elementMatch(elem, 'auro-combobox')) {
         elem.validity = this.auroInputElements[1].validity;
         elem.errorMessage = this.auroInputElements[1].errorMessage;
       }
@@ -10010,9 +10010,9 @@ class AuroFormValidation {
       elem.validity = this.auroInputElements[0].validity;
       elem.errorMessage = this.auroInputElements[0].errorMessage;
 
+      // multiple input in one components (datepicker)
       // combobox has 2 inputs but no need to check validity on the 2nd one which is in fullscreen bib. 
-      // combobox's 2nd input will have noValidate set true.
-      if (elem.validity === 'valid' && this.auroInputElements.length > 1 && !this.auroInputElements[1].noValidate) {
+      if (elem.validity === 'valid' && this.auroInputElements.length > 1 && !this.runtimeUtils.elementMatch(elem, 'auro-combobox')) {
         elem.validity = this.auroInputElements[1].validity;
         elem.errorMessage = this.auroInputElements[1].errorMessage;
       }
@@ -11021,6 +11021,7 @@ class BaseInput extends AuroElement$2$1 {
    * @returns {void}
    */
   reset() {
+    this.value = undefined;
     this.validation.reset(this);
   }
 

package/components/counter/demo/api.min.js

@@ -2402,9 +2402,9 @@ class AuroFormValidation {
       elem.validity = this.auroInputElements[0].validity;
       elem.errorMessage = this.auroInputElements[0].errorMessage;
 
+      // multiple input in one components (datepicker)
       // combobox has 2 inputs but no need to check validity on the 2nd one which is in fullscreen bib. 
-      // combobox's 2nd input will have noValidate set true.
-      if (elem.validity === 'valid' && this.auroInputElements.length > 1 && !this.auroInputElements[1].noValidate) {
+      if (elem.validity === 'valid' && this.auroInputElements.length > 1 && !this.runtimeUtils.elementMatch(elem, 'auro-combobox')) {
         elem.validity = this.auroInputElements[1].validity;
         elem.errorMessage = this.auroInputElements[1].errorMessage;
       }

package/components/counter/demo/index.min.js

@@ -2402,9 +2402,9 @@ class AuroFormValidation {
       elem.validity = this.auroInputElements[0].validity;
       elem.errorMessage = this.auroInputElements[0].errorMessage;
 
+      // multiple input in one components (datepicker)
       // combobox has 2 inputs but no need to check validity on the 2nd one which is in fullscreen bib. 
-      // combobox's 2nd input will have noValidate set true.
-      if (elem.validity === 'valid' && this.auroInputElements.length > 1 && !this.auroInputElements[1].noValidate) {
+      if (elem.validity === 'valid' && this.auroInputElements.length > 1 && !this.runtimeUtils.elementMatch(elem, 'auro-combobox')) {
         elem.validity = this.auroInputElements[1].validity;
         elem.errorMessage = this.auroInputElements[1].errorMessage;
       }

package/components/counter/dist/index.js

@@ -2355,9 +2355,9 @@ class AuroFormValidation {
       elem.validity = this.auroInputElements[0].validity;
       elem.errorMessage = this.auroInputElements[0].errorMessage;
 
+      // multiple input in one components (datepicker)
       // combobox has 2 inputs but no need to check validity on the 2nd one which is in fullscreen bib. 
-      // combobox's 2nd input will have noValidate set true.
-      if (elem.validity === 'valid' && this.auroInputElements.length > 1 && !this.auroInputElements[1].noValidate) {
+      if (elem.validity === 'valid' && this.auroInputElements.length > 1 && !this.runtimeUtils.elementMatch(elem, 'auro-combobox')) {
         elem.validity = this.auroInputElements[1].validity;
         elem.errorMessage = this.auroInputElements[1].errorMessage;
       }

package/components/counter/dist/registered.js

@@ -2355,9 +2355,9 @@ class AuroFormValidation {
       elem.validity = this.auroInputElements[0].validity;
       elem.errorMessage = this.auroInputElements[0].errorMessage;
 
+      // multiple input in one components (datepicker)
       // combobox has 2 inputs but no need to check validity on the 2nd one which is in fullscreen bib. 
-      // combobox's 2nd input will have noValidate set true.
-      if (elem.validity === 'valid' && this.auroInputElements.length > 1 && !this.auroInputElements[1].noValidate) {
+      if (elem.validity === 'valid' && this.auroInputElements.length > 1 && !this.runtimeUtils.elementMatch(elem, 'auro-combobox')) {
         elem.validity = this.auroInputElements[1].validity;
         elem.errorMessage = this.auroInputElements[1].errorMessage;
       }

package/components/datepicker/demo/api.min.js

@@ -1060,9 +1060,9 @@ let AuroFormValidation$1 = class AuroFormValidation {
       elem.validity = this.auroInputElements[0].validity;
       elem.errorMessage = this.auroInputElements[0].errorMessage;
 
+      // multiple input in one components (datepicker)
       // combobox has 2 inputs but no need to check validity on the 2nd one which is in fullscreen bib. 
-      // combobox's 2nd input will have noValidate set true.
-      if (elem.validity === 'valid' && this.auroInputElements.length > 1 && !this.auroInputElements[1].noValidate) {
+      if (elem.validity === 'valid' && this.auroInputElements.length > 1 && !this.runtimeUtils.elementMatch(elem, 'auro-combobox')) {
         elem.validity = this.auroInputElements[1].validity;
         elem.errorMessage = this.auroInputElements[1].errorMessage;
       }
@@ -23670,9 +23670,9 @@ class AuroFormValidation {
       elem.validity = this.auroInputElements[0].validity;
       elem.errorMessage = this.auroInputElements[0].errorMessage;
 
+      // multiple input in one components (datepicker)
       // combobox has 2 inputs but no need to check validity on the 2nd one which is in fullscreen bib. 
-      // combobox's 2nd input will have noValidate set true.
-      if (elem.validity === 'valid' && this.auroInputElements.length > 1 && !this.auroInputElements[1].noValidate) {
+      if (elem.validity === 'valid' && this.auroInputElements.length > 1 && !this.runtimeUtils.elementMatch(elem, 'auro-combobox')) {
         elem.validity = this.auroInputElements[1].validity;
         elem.errorMessage = this.auroInputElements[1].errorMessage;
       }
@@ -24681,6 +24681,7 @@ class BaseInput extends AuroElement$2 {
    * @returns {void}
    */
   reset() {
+    this.value = undefined;
     this.validation.reset(this);
   }
 
@@ -28826,11 +28827,8 @@ class AuroDatePicker extends AuroElement$1 {
       }
 
       if (!this.contains(document.activeElement)) {
-        this.validation.validate(this.inputList[0]);
-
-        if (this.inputList[1]) {
-          this.validation.validate(this.inputList[1]);
-        }
+        this.validate();
+        this.dropdown.hide();
       }
     });
 
@@ -28965,7 +28963,7 @@ class AuroDatePicker extends AuroElement$1 {
    */
   resetValues() {
     this.inputList.forEach((input) => {
-      input.clear();
+      input.reset();
     });
   }
 
@@ -28991,6 +28989,11 @@ class AuroDatePicker extends AuroElement$1 {
    * @param {boolean} [force=false] - Whether to force validation.
    */
   validate(force = false) {
+    this.inputList[0].validate(force);
+    if (this.range) {
+      this.inputList[1].validate(force);
+    }
+
     this.validation.validate(this, force);
   }
 

package/components/datepicker/demo/index.min.js

@@ -801,9 +801,9 @@ let AuroFormValidation$1 = class AuroFormValidation {
       elem.validity = this.auroInputElements[0].validity;
       elem.errorMessage = this.auroInputElements[0].errorMessage;
 
+      // multiple input in one components (datepicker)
       // combobox has 2 inputs but no need to check validity on the 2nd one which is in fullscreen bib. 
-      // combobox's 2nd input will have noValidate set true.
-      if (elem.validity === 'valid' && this.auroInputElements.length > 1 && !this.auroInputElements[1].noValidate) {
+      if (elem.validity === 'valid' && this.auroInputElements.length > 1 && !this.runtimeUtils.elementMatch(elem, 'auro-combobox')) {
         elem.validity = this.auroInputElements[1].validity;
         elem.errorMessage = this.auroInputElements[1].errorMessage;
       }
@@ -23411,9 +23411,9 @@ class AuroFormValidation {
       elem.validity = this.auroInputElements[0].validity;
       elem.errorMessage = this.auroInputElements[0].errorMessage;
 
+      // multiple input in one components (datepicker)
       // combobox has 2 inputs but no need to check validity on the 2nd one which is in fullscreen bib. 
-      // combobox's 2nd input will have noValidate set true.
-      if (elem.validity === 'valid' && this.auroInputElements.length > 1 && !this.auroInputElements[1].noValidate) {
+      if (elem.validity === 'valid' && this.auroInputElements.length > 1 && !this.runtimeUtils.elementMatch(elem, 'auro-combobox')) {
         elem.validity = this.auroInputElements[1].validity;
         elem.errorMessage = this.auroInputElements[1].errorMessage;
       }
@@ -24422,6 +24422,7 @@ class BaseInput extends AuroElement$2 {
    * @returns {void}
    */
   reset() {
+    this.value = undefined;
     this.validation.reset(this);
   }
 
@@ -28567,11 +28568,8 @@ class AuroDatePicker extends AuroElement$1 {
       }
 
       if (!this.contains(document.activeElement)) {
-        this.validation.validate(this.inputList[0]);
-
-        if (this.inputList[1]) {
-          this.validation.validate(this.inputList[1]);
-        }
+        this.validate();
+        this.dropdown.hide();
       }
     });
 
@@ -28706,7 +28704,7 @@ class AuroDatePicker extends AuroElement$1 {
    */
   resetValues() {
     this.inputList.forEach((input) => {
-      input.clear();
+      input.reset();
     });
   }
 
@@ -28732,6 +28730,11 @@ class AuroDatePicker extends AuroElement$1 {
    * @param {boolean} [force=false] - Whether to force validation.
    */
   validate(force = false) {
+    this.inputList[0].validate(force);
+    if (this.range) {
+      this.inputList[1].validate(force);
+    }
+
     this.validation.validate(this, force);
   }
 

package/components/datepicker/dist/index.js

@@ -781,9 +781,9 @@ let AuroFormValidation$1 = class AuroFormValidation {
       elem.validity = this.auroInputElements[0].validity;
       elem.errorMessage = this.auroInputElements[0].errorMessage;
 
+      // multiple input in one components (datepicker)
       // combobox has 2 inputs but no need to check validity on the 2nd one which is in fullscreen bib. 
-      // combobox's 2nd input will have noValidate set true.
-      if (elem.validity === 'valid' && this.auroInputElements.length > 1 && !this.auroInputElements[1].noValidate) {
+      if (elem.validity === 'valid' && this.auroInputElements.length > 1 && !this.runtimeUtils.elementMatch(elem, 'auro-combobox')) {
         elem.validity = this.auroInputElements[1].validity;
         elem.errorMessage = this.auroInputElements[1].errorMessage;
       }
@@ -23347,9 +23347,9 @@ class AuroFormValidation {
       elem.validity = this.auroInputElements[0].validity;
       elem.errorMessage = this.auroInputElements[0].errorMessage;
 
+      // multiple input in one components (datepicker)
       // combobox has 2 inputs but no need to check validity on the 2nd one which is in fullscreen bib. 
-      // combobox's 2nd input will have noValidate set true.
-      if (elem.validity === 'valid' && this.auroInputElements.length > 1 && !this.auroInputElements[1].noValidate) {
+      if (elem.validity === 'valid' && this.auroInputElements.length > 1 && !this.runtimeUtils.elementMatch(elem, 'auro-combobox')) {
         elem.validity = this.auroInputElements[1].validity;
         elem.errorMessage = this.auroInputElements[1].errorMessage;
       }
@@ -24358,6 +24358,7 @@ class BaseInput extends AuroElement$2 {
    * @returns {void}
    */
   reset() {
+    this.value = undefined;
     this.validation.reset(this);
   }
 
@@ -28503,11 +28504,8 @@ class AuroDatePicker extends AuroElement$1 {
       }
 
       if (!this.contains(document.activeElement)) {
-        this.validation.validate(this.inputList[0]);
-
-        if (this.inputList[1]) {
-          this.validation.validate(this.inputList[1]);
-        }
+        this.validate();
+        this.dropdown.hide();
       }
     });
 
@@ -28642,7 +28640,7 @@ class AuroDatePicker extends AuroElement$1 {
    */
   resetValues() {
     this.inputList.forEach((input) => {
-      input.clear();
+      input.reset();
     });
   }
 
@@ -28668,6 +28666,11 @@ class AuroDatePicker extends AuroElement$1 {
    * @param {boolean} [force=false] - Whether to force validation.
    */
   validate(force = false) {
+    this.inputList[0].validate(force);
+    if (this.range) {
+      this.inputList[1].validate(force);
+    }
+
     this.validation.validate(this, force);
   }
 

package/components/datepicker/dist/registered.js

@@ -781,9 +781,9 @@ let AuroFormValidation$1 = class AuroFormValidation {
       elem.validity = this.auroInputElements[0].validity;
       elem.errorMessage = this.auroInputElements[0].errorMessage;
 
+      // multiple input in one components (datepicker)
       // combobox has 2 inputs but no need to check validity on the 2nd one which is in fullscreen bib. 
-      // combobox's 2nd input will have noValidate set true.
-      if (elem.validity === 'valid' && this.auroInputElements.length > 1 && !this.auroInputElements[1].noValidate) {
+      if (elem.validity === 'valid' && this.auroInputElements.length > 1 && !this.runtimeUtils.elementMatch(elem, 'auro-combobox')) {
         elem.validity = this.auroInputElements[1].validity;
         elem.errorMessage = this.auroInputElements[1].errorMessage;
       }
@@ -23347,9 +23347,9 @@ class AuroFormValidation {
       elem.validity = this.auroInputElements[0].validity;
       elem.errorMessage = this.auroInputElements[0].errorMessage;
 
+      // multiple input in one components (datepicker)
       // combobox has 2 inputs but no need to check validity on the 2nd one which is in fullscreen bib. 
-      // combobox's 2nd input will have noValidate set true.
-      if (elem.validity === 'valid' && this.auroInputElements.length > 1 && !this.auroInputElements[1].noValidate) {
+      if (elem.validity === 'valid' && this.auroInputElements.length > 1 && !this.runtimeUtils.elementMatch(elem, 'auro-combobox')) {
         elem.validity = this.auroInputElements[1].validity;
         elem.errorMessage = this.auroInputElements[1].errorMessage;
       }
@@ -24358,6 +24358,7 @@ class BaseInput extends AuroElement$2 {
    * @returns {void}
    */
   reset() {
+    this.value = undefined;
     this.validation.reset(this);
   }
 
@@ -28503,11 +28504,8 @@ class AuroDatePicker extends AuroElement$1 {
       }
 
       if (!this.contains(document.activeElement)) {
-        this.validation.validate(this.inputList[0]);
-
-        if (this.inputList[1]) {
-          this.validation.validate(this.inputList[1]);
-        }
+        this.validate();
+        this.dropdown.hide();
       }
     });
 
@@ -28642,7 +28640,7 @@ class AuroDatePicker extends AuroElement$1 {
    */
   resetValues() {
     this.inputList.forEach((input) => {
-      input.clear();
+      input.reset();
     });
   }
 
@@ -28668,6 +28666,11 @@ class AuroDatePicker extends AuroElement$1 {
    * @param {boolean} [force=false] - Whether to force validation.
    */
   validate(force = false) {
+    this.inputList[0].validate(force);
+    if (this.range) {
+      this.inputList[1].validate(force);
+    }
+
     this.validation.validate(this, force);
   }
 

package/components/input/demo/api.min.js

@@ -4918,9 +4918,9 @@ class AuroFormValidation {
       elem.validity = this.auroInputElements[0].validity;
       elem.errorMessage = this.auroInputElements[0].errorMessage;
 
+      // multiple input in one components (datepicker)
       // combobox has 2 inputs but no need to check validity on the 2nd one which is in fullscreen bib. 
-      // combobox's 2nd input will have noValidate set true.
-      if (elem.validity === 'valid' && this.auroInputElements.length > 1 && !this.auroInputElements[1].noValidate) {
+      if (elem.validity === 'valid' && this.auroInputElements.length > 1 && !this.runtimeUtils.elementMatch(elem, 'auro-combobox')) {
         elem.validity = this.auroInputElements[1].validity;
         elem.errorMessage = this.auroInputElements[1].errorMessage;
       }
@@ -5929,6 +5929,7 @@ class BaseInput extends AuroElement$2 {
    * @returns {void}
    */
   reset() {
+    this.value = undefined;
     this.validation.reset(this);
   }
 

package/components/input/demo/index.min.js

@@ -4843,9 +4843,9 @@ class AuroFormValidation {
       elem.validity = this.auroInputElements[0].validity;
       elem.errorMessage = this.auroInputElements[0].errorMessage;
 
+      // multiple input in one components (datepicker)
       // combobox has 2 inputs but no need to check validity on the 2nd one which is in fullscreen bib. 
-      // combobox's 2nd input will have noValidate set true.
-      if (elem.validity === 'valid' && this.auroInputElements.length > 1 && !this.auroInputElements[1].noValidate) {
+      if (elem.validity === 'valid' && this.auroInputElements.length > 1 && !this.runtimeUtils.elementMatch(elem, 'auro-combobox')) {
         elem.validity = this.auroInputElements[1].validity;
         elem.errorMessage = this.auroInputElements[1].errorMessage;
       }
@@ -5854,6 +5854,7 @@ class BaseInput extends AuroElement$2 {
    * @returns {void}
    */
   reset() {
+    this.value = undefined;
     this.validation.reset(this);
   }
 

package/components/input/dist/index.js

@@ -4767,9 +4767,9 @@ class AuroFormValidation {
       elem.validity = this.auroInputElements[0].validity;
       elem.errorMessage = this.auroInputElements[0].errorMessage;
 
+      // multiple input in one components (datepicker)
       // combobox has 2 inputs but no need to check validity on the 2nd one which is in fullscreen bib. 
-      // combobox's 2nd input will have noValidate set true.
-      if (elem.validity === 'valid' && this.auroInputElements.length > 1 && !this.auroInputElements[1].noValidate) {
+      if (elem.validity === 'valid' && this.auroInputElements.length > 1 && !this.runtimeUtils.elementMatch(elem, 'auro-combobox')) {
         elem.validity = this.auroInputElements[1].validity;
         elem.errorMessage = this.auroInputElements[1].errorMessage;
       }
@@ -5778,6 +5778,7 @@ class BaseInput extends AuroElement$2 {
    * @returns {void}
    */
   reset() {
+    this.value = undefined;
     this.validation.reset(this);
   }
 

package/components/input/dist/registered.js

@@ -4767,9 +4767,9 @@ class AuroFormValidation {
       elem.validity = this.auroInputElements[0].validity;
       elem.errorMessage = this.auroInputElements[0].errorMessage;
 
+      // multiple input in one components (datepicker)
       // combobox has 2 inputs but no need to check validity on the 2nd one which is in fullscreen bib. 
-      // combobox's 2nd input will have noValidate set true.
-      if (elem.validity === 'valid' && this.auroInputElements.length > 1 && !this.auroInputElements[1].noValidate) {
+      if (elem.validity === 'valid' && this.auroInputElements.length > 1 && !this.runtimeUtils.elementMatch(elem, 'auro-combobox')) {
         elem.validity = this.auroInputElements[1].validity;
         elem.errorMessage = this.auroInputElements[1].errorMessage;
       }
@@ -5778,6 +5778,7 @@ class BaseInput extends AuroElement$2 {
    * @returns {void}
    */
   reset() {
+    this.value = undefined;
     this.validation.reset(this);
   }
 

package/components/radio/demo/api.min.js

@@ -1155,9 +1155,9 @@ class AuroFormValidation {
       elem.validity = this.auroInputElements[0].validity;
       elem.errorMessage = this.auroInputElements[0].errorMessage;
 
+      // multiple input in one components (datepicker)
       // combobox has 2 inputs but no need to check validity on the 2nd one which is in fullscreen bib. 
-      // combobox's 2nd input will have noValidate set true.
-      if (elem.validity === 'valid' && this.auroInputElements.length > 1 && !this.auroInputElements[1].noValidate) {
+      if (elem.validity === 'valid' && this.auroInputElements.length > 1 && !this.runtimeUtils.elementMatch(elem, 'auro-combobox')) {
         elem.validity = this.auroInputElements[1].validity;
         elem.errorMessage = this.auroInputElements[1].errorMessage;
       }

package/components/radio/demo/index.min.js

@@ -1130,9 +1130,9 @@ class AuroFormValidation {
       elem.validity = this.auroInputElements[0].validity;
       elem.errorMessage = this.auroInputElements[0].errorMessage;
 
+      // multiple input in one components (datepicker)
       // combobox has 2 inputs but no need to check validity on the 2nd one which is in fullscreen bib. 
-      // combobox's 2nd input will have noValidate set true.
-      if (elem.validity === 'valid' && this.auroInputElements.length > 1 && !this.auroInputElements[1].noValidate) {
+      if (elem.validity === 'valid' && this.auroInputElements.length > 1 && !this.runtimeUtils.elementMatch(elem, 'auro-combobox')) {
         elem.validity = this.auroInputElements[1].validity;
         elem.errorMessage = this.auroInputElements[1].errorMessage;
       }

package/components/radio/dist/index.js

@@ -1083,9 +1083,9 @@ class AuroFormValidation {
       elem.validity = this.auroInputElements[0].validity;
       elem.errorMessage = this.auroInputElements[0].errorMessage;
 
+      // multiple input in one components (datepicker)
       // combobox has 2 inputs but no need to check validity on the 2nd one which is in fullscreen bib. 
-      // combobox's 2nd input will have noValidate set true.
-      if (elem.validity === 'valid' && this.auroInputElements.length > 1 && !this.auroInputElements[1].noValidate) {
+      if (elem.validity === 'valid' && this.auroInputElements.length > 1 && !this.runtimeUtils.elementMatch(elem, 'auro-combobox')) {
         elem.validity = this.auroInputElements[1].validity;
         elem.errorMessage = this.auroInputElements[1].errorMessage;
       }

package/components/radio/dist/registered.js

@@ -1083,9 +1083,9 @@ class AuroFormValidation {
       elem.validity = this.auroInputElements[0].validity;
       elem.errorMessage = this.auroInputElements[0].errorMessage;
 
+      // multiple input in one components (datepicker)
       // combobox has 2 inputs but no need to check validity on the 2nd one which is in fullscreen bib. 
-      // combobox's 2nd input will have noValidate set true.
-      if (elem.validity === 'valid' && this.auroInputElements.length > 1 && !this.auroInputElements[1].noValidate) {
+      if (elem.validity === 'valid' && this.auroInputElements.length > 1 && !this.runtimeUtils.elementMatch(elem, 'auro-combobox')) {
         elem.validity = this.auroInputElements[1].validity;
         elem.errorMessage = this.auroInputElements[1].errorMessage;
       }

package/components/select/demo/api.min.js

@@ -1011,9 +1011,9 @@ class AuroFormValidation {
       elem.validity = this.auroInputElements[0].validity;
       elem.errorMessage = this.auroInputElements[0].errorMessage;
 
+      // multiple input in one components (datepicker)
       // combobox has 2 inputs but no need to check validity on the 2nd one which is in fullscreen bib. 
-      // combobox's 2nd input will have noValidate set true.
-      if (elem.validity === 'valid' && this.auroInputElements.length > 1 && !this.auroInputElements[1].noValidate) {
+      if (elem.validity === 'valid' && this.auroInputElements.length > 1 && !this.runtimeUtils.elementMatch(elem, 'auro-combobox')) {
         elem.validity = this.auroInputElements[1].validity;
         elem.errorMessage = this.auroInputElements[1].errorMessage;
       }

package/components/select/demo/index.min.js

@@ -919,9 +919,9 @@ class AuroFormValidation {
       elem.validity = this.auroInputElements[0].validity;
       elem.errorMessage = this.auroInputElements[0].errorMessage;
 
+      // multiple input in one components (datepicker)
       // combobox has 2 inputs but no need to check validity on the 2nd one which is in fullscreen bib. 
-      // combobox's 2nd input will have noValidate set true.
-      if (elem.validity === 'valid' && this.auroInputElements.length > 1 && !this.auroInputElements[1].noValidate) {
+      if (elem.validity === 'valid' && this.auroInputElements.length > 1 && !this.runtimeUtils.elementMatch(elem, 'auro-combobox')) {
         elem.validity = this.auroInputElements[1].validity;
         elem.errorMessage = this.auroInputElements[1].errorMessage;
       }

package/components/select/dist/index.js

@@ -879,9 +879,9 @@ class AuroFormValidation {
       elem.validity = this.auroInputElements[0].validity;
       elem.errorMessage = this.auroInputElements[0].errorMessage;
 
+      // multiple input in one components (datepicker)
       // combobox has 2 inputs but no need to check validity on the 2nd one which is in fullscreen bib. 
-      // combobox's 2nd input will have noValidate set true.
-      if (elem.validity === 'valid' && this.auroInputElements.length > 1 && !this.auroInputElements[1].noValidate) {
+      if (elem.validity === 'valid' && this.auroInputElements.length > 1 && !this.runtimeUtils.elementMatch(elem, 'auro-combobox')) {
         elem.validity = this.auroInputElements[1].validity;
         elem.errorMessage = this.auroInputElements[1].errorMessage;
       }

package/components/select/dist/registered.js

@@ -879,9 +879,9 @@ class AuroFormValidation {
       elem.validity = this.auroInputElements[0].validity;
       elem.errorMessage = this.auroInputElements[0].errorMessage;
 
+      // multiple input in one components (datepicker)
       // combobox has 2 inputs but no need to check validity on the 2nd one which is in fullscreen bib. 
-      // combobox's 2nd input will have noValidate set true.
-      if (elem.validity === 'valid' && this.auroInputElements.length > 1 && !this.auroInputElements[1].noValidate) {
+      if (elem.validity === 'valid' && this.auroInputElements.length > 1 && !this.runtimeUtils.elementMatch(elem, 'auro-combobox')) {
         elem.validity = this.auroInputElements[1].validity;
         elem.errorMessage = this.auroInputElements[1].errorMessage;
       }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@aurodesignsystem-dev/auro-formkit",
-  "version": "0.0.0-pr860.0",
+  "version": "0.0.0-pr866.0",
   "description": "A collection of web components used to build forms.",
   "homepage": "https://github.com/AlaskaAirlines/auro-formkit#readme",
   "bugs": {