@aurodesignsystem-dev/auro-formkit 0.0.0-pr987.0 → 0.0.0-pr988.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.md

@@ -54,9 +54,9 @@
 | [focus](#focus)                       | `(focusInput?: string): void`          | Focuses the datepicker trigger input.<br /><br />**focusInput**: Pass in `endDate` to focus on the return input. No parameter is needed to focus on the depart input. |
 | [hideBib](#hideBib)                     | `(): void`                             | Hides the dropdown bib if its open.              |
 | [reset](#reset)                       | `(): void`                             | Resets component to initial state.               |
+| [resetInputs](#resetInputs)                 | `(): void`                             | Resets values without resetting validation.      |
 | [resetLayoutClasses](#resetLayoutClasses)          | `(): void`                             |                                                  |
 | [resetShapeClasses](#resetShapeClasses)           | `(): void`                             |                                                  |
-| [resetValues](#resetValues)                 | `(): void`                             | Resets values without resetting validation.      |
 | [showBib](#showBib)                     | `(): void`                             | Shows the dropdown bib if there are options to show. |
 | [updateComponentArchitecture](#updateComponentArchitecture) | `(): void`                             |                                                  |
 | [validate](#validate)                    | `(force?: boolean \| undefined): void` | Validates value.<br /><br />**force**: Whether to force validation. |

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();
       }
     });
 
@@ -28908,23 +28906,33 @@ class AuroDatePicker extends AuroElement$1 {
     const convertedDate = this.convertWcTimeToDate(time);
     const newDate = this.util.toCustomFormat(convertedDate, this.format);
 
+    let onEndValue = false;
     if (this.util.validDateStr(newDate, this.format)) {
-      if (this.inputList.length > 1) {
-        if (!this.value || !this.util.validDateStr(this.value, this.format)) {
-          this.value = newDate;
-        } else if (!this.valueEnd || !this.util.validDateStr(this.valueEnd, this.format)) {
+      if (this.range) {
+        const isValueValid = this.value && this.util.validDateStr(this.value, this.format);
+        const isValueEndValid = this.valueEnd && this.util.validDateStr(this.valueEnd, this.format);
+
+        if (isValueValid && !isValueEndValid) {
           // verify the date is after this.value to insure we are setting a proper range
           if (new Date(this.util.toNorthAmericanFormat(newDate, this.format)) >= new Date(this.formattedValue)) {
-            this.valueEnd = newDate;
-          } else {
-            this.value = newDate;
+            onEndValue = true;
           }
-        } else {
-          this.value = newDate;
+        } else if (isValueValid && isValueEndValid) {
+          // both dateTo and dateFrom are valid, then reset datTo
           this.valueEnd = '';
         }
+      }
+
+      if (onEndValue) {
+        this.valueEnd = newDate;
+        if (this.dropdown.isPopoverVisible && !this.dropdown.isBibFullscreen) {
+          this.focus('startDate');
+        }
       } else {
         this.value = newDate;
+        if (this.dropdown.isPopoverVisible && !this.dropdown.isBibFullscreen) {
+          this.focus('endDate');
+        }
       }
     }
   }
@@ -28945,7 +28953,7 @@ class AuroDatePicker extends AuroElement$1 {
    */
   handleKeydownReset(event) {
     if (event.key === 'Enter' || event.key === ' ') {
-      this.resetValues();
+      this.resetInputs();
       this.focus();
     }
   }
@@ -28953,9 +28961,9 @@ class AuroDatePicker extends AuroElement$1 {
   /**
    * Resets values without resetting validation.
    */
-  resetValues() {
+  resetInputs() {
     this.inputList.forEach((input) => {
-      input.clear();
+      input.reset();
     });
   }
 
@@ -28964,7 +28972,7 @@ class AuroDatePicker extends AuroElement$1 {
    * @returns {void}
    */
   reset() {
-    this.resetValues();
+    this.resetInputs();
     this.validation.reset(this);
   }
 
@@ -28973,7 +28981,7 @@ class AuroDatePicker extends AuroElement$1 {
    * @returns {void}
    */
   clear() {
-    this.resetValues();
+    this.resetInputs();
   }
 
   /**
@@ -28981,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);
   }
 
@@ -29553,7 +29566,7 @@ class AuroDatePicker extends AuroElement$1 {
     return u$3`
       <div class="${e$2(clearActionClassMap)}">
         <${this.buttonTag}
-          @click="${this.resetValues}"
+          @click="${this.resetInputs}"
           @keydown="${this.handleKeydownReset}"
           ?onDark="${this.onDark}"
           aria-label="${i18n(this.lang, 'clearInput')}"

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();
       }
     });
 
@@ -28649,23 +28647,33 @@ class AuroDatePicker extends AuroElement$1 {
     const convertedDate = this.convertWcTimeToDate(time);
     const newDate = this.util.toCustomFormat(convertedDate, this.format);
 
+    let onEndValue = false;
     if (this.util.validDateStr(newDate, this.format)) {
-      if (this.inputList.length > 1) {
-        if (!this.value || !this.util.validDateStr(this.value, this.format)) {
-          this.value = newDate;
-        } else if (!this.valueEnd || !this.util.validDateStr(this.valueEnd, this.format)) {
+      if (this.range) {
+        const isValueValid = this.value && this.util.validDateStr(this.value, this.format);
+        const isValueEndValid = this.valueEnd && this.util.validDateStr(this.valueEnd, this.format);
+
+        if (isValueValid && !isValueEndValid) {
           // verify the date is after this.value to insure we are setting a proper range
           if (new Date(this.util.toNorthAmericanFormat(newDate, this.format)) >= new Date(this.formattedValue)) {
-            this.valueEnd = newDate;
-          } else {
-            this.value = newDate;
+            onEndValue = true;
           }
-        } else {
-          this.value = newDate;
+        } else if (isValueValid && isValueEndValid) {
+          // both dateTo and dateFrom are valid, then reset datTo
           this.valueEnd = '';
         }
+      }
+
+      if (onEndValue) {
+        this.valueEnd = newDate;
+        if (this.dropdown.isPopoverVisible && !this.dropdown.isBibFullscreen) {
+          this.focus('startDate');
+        }
       } else {
         this.value = newDate;
+        if (this.dropdown.isPopoverVisible && !this.dropdown.isBibFullscreen) {
+          this.focus('endDate');
+        }
       }
     }
   }
@@ -28686,7 +28694,7 @@ class AuroDatePicker extends AuroElement$1 {
    */
   handleKeydownReset(event) {
     if (event.key === 'Enter' || event.key === ' ') {
-      this.resetValues();
+      this.resetInputs();
       this.focus();
     }
   }
@@ -28694,9 +28702,9 @@ class AuroDatePicker extends AuroElement$1 {
   /**
    * Resets values without resetting validation.
    */
-  resetValues() {
+  resetInputs() {
     this.inputList.forEach((input) => {
-      input.clear();
+      input.reset();
     });
   }
 
@@ -28705,7 +28713,7 @@ class AuroDatePicker extends AuroElement$1 {
    * @returns {void}
    */
   reset() {
-    this.resetValues();
+    this.resetInputs();
     this.validation.reset(this);
   }
 
@@ -28714,7 +28722,7 @@ class AuroDatePicker extends AuroElement$1 {
    * @returns {void}
    */
   clear() {
-    this.resetValues();
+    this.resetInputs();
   }
 
   /**
@@ -28722,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);
   }
 
@@ -29294,7 +29307,7 @@ class AuroDatePicker extends AuroElement$1 {
     return u$3`
       <div class="${e$2(clearActionClassMap)}">
         <${this.buttonTag}
-          @click="${this.resetValues}"
+          @click="${this.resetInputs}"
           @keydown="${this.handleKeydownReset}"
           ?onDark="${this.onDark}"
           aria-label="${i18n(this.lang, 'clearInput')}"

package/components/datepicker/dist/auro-datepicker.d.ts

@@ -503,7 +503,7 @@ export class AuroDatePicker extends AuroElement {
     /**
      * Resets values without resetting validation.
      */
-    resetValues(): void;
+    resetInputs(): void;
     /**
      * Resets component to initial state.
      * @returns {void}

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();
       }
     });
 
@@ -28585,23 +28583,33 @@ class AuroDatePicker extends AuroElement$1 {
     const convertedDate = this.convertWcTimeToDate(time);
     const newDate = this.util.toCustomFormat(convertedDate, this.format);
 
+    let onEndValue = false;
     if (this.util.validDateStr(newDate, this.format)) {
-      if (this.inputList.length > 1) {
-        if (!this.value || !this.util.validDateStr(this.value, this.format)) {
-          this.value = newDate;
-        } else if (!this.valueEnd || !this.util.validDateStr(this.valueEnd, this.format)) {
+      if (this.range) {
+        const isValueValid = this.value && this.util.validDateStr(this.value, this.format);
+        const isValueEndValid = this.valueEnd && this.util.validDateStr(this.valueEnd, this.format);
+
+        if (isValueValid && !isValueEndValid) {
           // verify the date is after this.value to insure we are setting a proper range
           if (new Date(this.util.toNorthAmericanFormat(newDate, this.format)) >= new Date(this.formattedValue)) {
-            this.valueEnd = newDate;
-          } else {
-            this.value = newDate;
+            onEndValue = true;
           }
-        } else {
-          this.value = newDate;
+        } else if (isValueValid && isValueEndValid) {
+          // both dateTo and dateFrom are valid, then reset datTo
           this.valueEnd = '';
         }
+      }
+
+      if (onEndValue) {
+        this.valueEnd = newDate;
+        if (this.dropdown.isPopoverVisible && !this.dropdown.isBibFullscreen) {
+          this.focus('startDate');
+        }
       } else {
         this.value = newDate;
+        if (this.dropdown.isPopoverVisible && !this.dropdown.isBibFullscreen) {
+          this.focus('endDate');
+        }
       }
     }
   }
@@ -28622,7 +28630,7 @@ class AuroDatePicker extends AuroElement$1 {
    */
   handleKeydownReset(event) {
     if (event.key === 'Enter' || event.key === ' ') {
-      this.resetValues();
+      this.resetInputs();
       this.focus();
     }
   }
@@ -28630,9 +28638,9 @@ class AuroDatePicker extends AuroElement$1 {
   /**
    * Resets values without resetting validation.
    */
-  resetValues() {
+  resetInputs() {
     this.inputList.forEach((input) => {
-      input.clear();
+      input.reset();
     });
   }
 
@@ -28641,7 +28649,7 @@ class AuroDatePicker extends AuroElement$1 {
    * @returns {void}
    */
   reset() {
-    this.resetValues();
+    this.resetInputs();
     this.validation.reset(this);
   }
 
@@ -28650,7 +28658,7 @@ class AuroDatePicker extends AuroElement$1 {
    * @returns {void}
    */
   clear() {
-    this.resetValues();
+    this.resetInputs();
   }
 
   /**
@@ -28658,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);
   }
 
@@ -29230,7 +29243,7 @@ class AuroDatePicker extends AuroElement$1 {
     return html$1`
       <div class="${classMap(clearActionClassMap)}">
         <${this.buttonTag}
-          @click="${this.resetValues}"
+          @click="${this.resetInputs}"
           @keydown="${this.handleKeydownReset}"
           ?onDark="${this.onDark}"
           aria-label="${i18n(this.lang, 'clearInput')}"

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();
       }
     });
 
@@ -28585,23 +28583,33 @@ class AuroDatePicker extends AuroElement$1 {
     const convertedDate = this.convertWcTimeToDate(time);
     const newDate = this.util.toCustomFormat(convertedDate, this.format);
 
+    let onEndValue = false;
     if (this.util.validDateStr(newDate, this.format)) {
-      if (this.inputList.length > 1) {
-        if (!this.value || !this.util.validDateStr(this.value, this.format)) {
-          this.value = newDate;
-        } else if (!this.valueEnd || !this.util.validDateStr(this.valueEnd, this.format)) {
+      if (this.range) {
+        const isValueValid = this.value && this.util.validDateStr(this.value, this.format);
+        const isValueEndValid = this.valueEnd && this.util.validDateStr(this.valueEnd, this.format);
+
+        if (isValueValid && !isValueEndValid) {
           // verify the date is after this.value to insure we are setting a proper range
           if (new Date(this.util.toNorthAmericanFormat(newDate, this.format)) >= new Date(this.formattedValue)) {
-            this.valueEnd = newDate;
-          } else {
-            this.value = newDate;
+            onEndValue = true;
           }
-        } else {
-          this.value = newDate;
+        } else if (isValueValid && isValueEndValid) {
+          // both dateTo and dateFrom are valid, then reset datTo
           this.valueEnd = '';
         }
+      }
+
+      if (onEndValue) {
+        this.valueEnd = newDate;
+        if (this.dropdown.isPopoverVisible && !this.dropdown.isBibFullscreen) {
+          this.focus('startDate');
+        }
       } else {
         this.value = newDate;
+        if (this.dropdown.isPopoverVisible && !this.dropdown.isBibFullscreen) {
+          this.focus('endDate');
+        }
       }
     }
   }
@@ -28622,7 +28630,7 @@ class AuroDatePicker extends AuroElement$1 {
    */
   handleKeydownReset(event) {
     if (event.key === 'Enter' || event.key === ' ') {
-      this.resetValues();
+      this.resetInputs();
       this.focus();
     }
   }
@@ -28630,9 +28638,9 @@ class AuroDatePicker extends AuroElement$1 {
   /**
    * Resets values without resetting validation.
    */
-  resetValues() {
+  resetInputs() {
     this.inputList.forEach((input) => {
-      input.clear();
+      input.reset();
     });
   }
 
@@ -28641,7 +28649,7 @@ class AuroDatePicker extends AuroElement$1 {
    * @returns {void}
    */
   reset() {
-    this.resetValues();
+    this.resetInputs();
     this.validation.reset(this);
   }
 
@@ -28650,7 +28658,7 @@ class AuroDatePicker extends AuroElement$1 {
    * @returns {void}
    */
   clear() {
-    this.resetValues();
+    this.resetInputs();
   }
 
   /**
@@ -28658,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);
   }
 
@@ -29230,7 +29243,7 @@ class AuroDatePicker extends AuroElement$1 {
     return html$1`
       <div class="${classMap(clearActionClassMap)}">
         <${this.buttonTag}
-          @click="${this.resetValues}"
+          @click="${this.resetInputs}"
           @keydown="${this.handleKeydownReset}"
           ?onDark="${this.onDark}"
           aria-label="${i18n(this.lang, 'clearInput')}"

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;
       }
@@ -8706,7 +8706,7 @@ class AuroSelect extends AuroElement$4 {
    */
   renderNativeSelect() {
     return u`
-      <div class="nativeSelectWrapper util_displayHidden">
+      <div class="nativeSelectWrapper util_displayHiddenVisually">
         <select
           tabindex="-1"
           id="${`native-select-${this.id || this.uniqueId}`}"

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;
       }
@@ -8614,7 +8614,7 @@ class AuroSelect extends AuroElement$4 {
    */
   renderNativeSelect() {
     return u`
-      <div class="nativeSelectWrapper util_displayHidden">
+      <div class="nativeSelectWrapper util_displayHiddenVisually">
         <select
           tabindex="-1"
           id="${`native-select-${this.id || this.uniqueId}`}"

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;
       }
@@ -8568,7 +8568,7 @@ class AuroSelect extends AuroElement$3 {
    */
   renderNativeSelect() {
     return html`
-      <div class="nativeSelectWrapper util_displayHidden">
+      <div class="nativeSelectWrapper util_displayHiddenVisually">
         <select
           tabindex="-1"
           id="${`native-select-${this.id || this.uniqueId}`}"

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;
       }
@@ -8568,7 +8568,7 @@ class AuroSelect extends AuroElement$3 {
    */
   renderNativeSelect() {
     return html`
-      <div class="nativeSelectWrapper util_displayHidden">
+      <div class="nativeSelectWrapper util_displayHiddenVisually">
         <select
           tabindex="-1"
           id="${`native-select-${this.id || this.uniqueId}`}"

package/package.json

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