@aurodesignsystem/auro-formkit 1.6.0-beta.9 → 2.0.0-beta.2

package/components/select/dist/index.js

@@ -110,6 +110,30 @@ class AuroFormValidation {
     this.runtimeUtils = new AuroLibraryRuntimeUtils$1();
   }
 
+  /**
+   * Resets the element to its initial state.
+   * @private
+   * @param {object} elem - HTML element to reset.
+   * @returns {void}
+   */
+  reset(elem) {
+    elem.validity = undefined;
+    elem.value = undefined;
+
+    // Resets the second value of the datepicker in range state
+    if (elem.valueEnd) {
+      elem.valueEnd = undefined;
+    }
+
+    // Resets selected option of element
+    if (elem.optionSelected) {
+      elem.optionSelected = undefined;
+    }
+
+    // Runs validation to handle error attribute
+    this.validate(elem);
+  }
+
   /**
    * Determines the validity state of the element based on the common attribute restrictions (pattern).
    * @private
@@ -124,10 +148,15 @@ class AuroFormValidation {
         elem.validity = 'badInput';
         elem.setCustomValidity = elem.setCustomValidityBadInput || '';
       }
-    } else if (elem.value && elem.value.length > 0 && elem.value.length < elem.minLength) {
+    }
+
+    // Length > 0 is required to prevent the error message from showing when the input is empty
+    if (elem.value?.length > 0 && elem.value?.length < elem.minLength) {
       elem.validity = 'tooShort';
       elem.setCustomValidity = elem.setCustomValidityTooShort || '';
-    } else if (elem.value && elem.value.length > elem.maxLength) {
+    }
+    
+    if (elem.value?.length > elem.maxLength) {
       elem.validity = 'tooLong';
       elem.setCustomValidity = elem.setCustomValidityTooLong || '';
     }
@@ -153,7 +182,7 @@ class AuroFormValidation {
           elem.validity = 'tooShort';
           elem.setCustomValidity = elem.setCustomValidityForType || '';
         }
-      } else if (elem.type === 'number' || elem.type === 'numeric') { // 'numeric` is a deprecated alias for number'
+      } else if (elem.type === 'number') {
         if (elem.max !== undefined && Number(elem.max) < Number(elem.value)) {
           elem.validity = 'rangeOverflow';
           elem.setCustomValidity = elem.getAttribute('setCustomValidityRangeOverflow') || '';
@@ -258,14 +287,10 @@ class AuroFormValidation {
 
     if (validationShouldRun || elem.hasAttribute('error')) {
       if (elem.validity && elem.validity !== 'valid') {
-        elem.isValid = false;
-
         // Use the validity message override if it is declared
         if (elem.ValidityMessageOverride) {
           elem.setCustomValidity = elem.ValidityMessageOverride;
         }
-      } else {
-        elem.isValid = true;
       }
 
       this.getErrorMessage(elem);
@@ -1979,6 +2004,11 @@ class AuroFloatingUI {
     this.focusHandler = null;
     this.clickHandler = null;
     this.keyDownHandler = null;
+    
+    /**
+     * @private
+     */
+    this.eventPrefix = undefined;
   }
 
   /**
@@ -1995,22 +2025,24 @@ class AuroFloatingUI {
    */
   mirrorSize(fullscreen) {
     // mirror the boxsize from bibSizer
-    const sizerStyle = window.getComputedStyle(this.element.bibSizer);
-    const bibContent = this.element.bib.shadowRoot.querySelector(".container");
-    if (fullscreen) {
-      bibContent.style.width = '';
-      bibContent.style.height = '';
-      bibContent.style.maxWidth = '';
-      bibContent.style.maxHeight = '';
-    } else {
-      if (sizerStyle.width !== '0px') {
-        bibContent.style.width = sizerStyle.width;
-      }
-      if (sizerStyle.height !== '0px') {
-        bibContent.style.height = sizerStyle.height;
+    if (this.element.bibSizer) {
+      const sizerStyle = window.getComputedStyle(this.element.bibSizer);
+      const bibContent = this.element.bib.shadowRoot.querySelector(".container");
+      if (fullscreen) {
+        bibContent.style.width = '';
+        bibContent.style.height = '';
+        bibContent.style.maxWidth = '';
+        bibContent.style.maxHeight = '';
+      } else {
+        if (sizerStyle.width !== '0px') {
+          bibContent.style.width = sizerStyle.width;
+        }
+        if (sizerStyle.height !== '0px') {
+          bibContent.style.height = sizerStyle.height;
+        }
+        bibContent.style.maxWidth = sizerStyle.maxWidth;
+        bibContent.style.maxHeight = sizerStyle.maxHeight;
       }
-      bibContent.style.maxWidth = sizerStyle.maxWidth;
-      bibContent.style.maxHeight = sizerStyle.maxHeight;
     }
   }
 
@@ -2217,7 +2249,7 @@ class AuroFloatingUI {
    * @returns {void} Dispatches event with an object showing the state of the dropdown.
    */
   dispatchEventDropdownToggle() {
-    const event = new CustomEvent('auroDropdown-toggled', {
+    const event = new CustomEvent(this.eventPrefix ? `${this.eventPrefix}-toggled` : 'toggled', {
       detail: {
         expanded: this.isPopoverVisible,
       },
@@ -2234,7 +2266,7 @@ class AuroFloatingUI {
       this.showBib();
     }
 
-    const event = new CustomEvent('auroDropdown-triggerClick', {
+    const event = new CustomEvent(this.eventPrefix ? `${this.eventPrefix}-triggerClick` : "triggerClick", {
       composed: true,
       details: {
         expanded: this.element.isPopoverVisible
@@ -2278,6 +2310,9 @@ class AuroFloatingUI {
           this.handleFocusLoss();
           break;
         case 'click':
+          if (document.activeElement === document.body) {
+            event.currentTarget.focus();
+          }
           this.handleClick();
           break;
           // Do nothing
@@ -2315,7 +2350,8 @@ class AuroFloatingUI {
     });
   }
 
-  configure(elem) {
+  configure(elem, eventPrefix) {
+    this.eventPrefix = eventPrefix;
     this.element = elem;
     this.element.trigger = this.element.shadowRoot.querySelector('#trigger');
     this.element.bib = this.element.shadowRoot.querySelector('#bib');
@@ -2475,7 +2511,7 @@ const cacheFetch = (uri, options = {}) => {
   return _fetchMap.get(uri);
 };
 
-var styleCss$2 = i$3`*,*:before,*:after{box-sizing:border-box}@media(prefers-reduced-motion: reduce){*,*:before,*:after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important}}*:focus-visible{outline:0}*:focus-visible{outline:0}:focus:not(:focus-visible){outline:3px solid transparent}.util_displayInline{display:inline}.util_displayInlineBlock{display:inline-block}.util_displayBlock,:host{display:block}.util_displayFlex{display:flex}.util_displayHidden,:host([hidden]:not(:focus):not(:active)){display:none}.util_displayHiddenVisually,:host([hiddenVisually]:not(:focus):not(:active)){position:absolute;overflow:hidden;clip:rect(1px, 1px, 1px, 1px);width:1px;height:1px;padding:0;border:0}.ico_squareLarge{fill:currentColor;height:var(--auro-size-lg, var(--ds-size-300, 1.5rem))}.ico_squareSmall{fill:currentColor;height:.6rem}.ico_squareMed{fill:currentColor;height:var(--auro-size-md, var(--ds-size-200, 1rem))}.ico_squareSml{fill:currentColor;height:var(--auro-size-sm, var(--ds-size-150, 0.75rem))}:host{color:currentColor;vertical-align:middle;line-height:1;display:inline-block}:host .logo{color:var(--ds-color-brand-midnight-400, #01426a)}svg{min-width:var(--ds-auro-icon-size, 1.5rem) !important;width:var(--ds-auro-icon-size, 1.5rem) !important;height:var(--ds-auro-icon-size, 1.5rem) !important}.label{display:flex;align-items:flex-start}.label svg{margin:0 var(--ds-size-50, 0.25rem)}.labelContainer{line-height:1.8}`;
+var styleCss$2 = i$3`*,*:before,*:after{box-sizing:border-box}@media(prefers-reduced-motion: reduce){*,*:before,*:after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important}}*:focus-visible{outline:0}*:focus-visible{outline:0}:focus:not(:focus-visible){outline:3px solid transparent}.util_displayInline{display:inline}.util_displayInlineBlock{display:inline-block}.util_displayBlock,:host{display:block}.util_displayFlex{display:flex}.util_displayHidden,:host([hidden]:not(:focus):not(:active)){display:none}.util_displayHiddenVisually,:host([hiddenVisually]:not(:focus):not(:active)){position:absolute;overflow:hidden;clip:rect(1px, 1px, 1px, 1px);width:1px;height:1px;padding:0;border:0}.ico_squareLarge{fill:currentColor;height:var(--auro-size-lg, var(--ds-size-300, 1.5rem))}.ico_squareSmall{fill:currentColor;height:.6rem}.ico_squareMed{fill:currentColor;height:var(--auro-size-md, var(--ds-size-200, 1rem))}.ico_squareSml{fill:currentColor;height:var(--auro-size-sm, var(--ds-size-150, 0.75rem))}:host{color:currentColor;vertical-align:middle;line-height:1;display:inline-block}:host .logo{color:var(--ds-color-brand-midnight-400, #01426a)}svg{min-width:var(--ds-auro-icon-size, 1.5rem) !important;width:var(--ds-auro-icon-size, 1.5rem) !important;height:var(--ds-auro-icon-size, 1.5rem) !important}.label{display:flex;align-items:flex-start}.label svg{margin:0 var(--ds-size-50, 0.25rem)}.wrapper{height:var(--ds-auro-icon-size);width:var(--ds-auro-icon-size)}.labelContainer{line-height:1.8}`;
 
 // Copyright (c) 2020 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
 // See LICENSE in the project root for license information.
@@ -2742,7 +2778,8 @@ class AuroIcon extends BaseIcon {
     };
 
     const classes = {
-      'label': this.label
+      'label': this.label,
+      'wrapper': true,
     };
 
     return x`
@@ -2766,15 +2803,15 @@ class AuroIcon extends BaseIcon {
   }
 }
 
-var iconVersion = '6.1.1';
+var iconVersion = '6.1.2';
 
-var styleCss$1 = i$3`:host{position:relative;display:inline-block;max-width:100%}:host([fluid]){display:block}#bibSizer{position:absolute;z-index:-1;opacity:0;pointer-events:none}.label{font-size:var(--ds-text-body-size-xs, 0.75rem);line-height:var(--ds-text-body-size-default, 1rem);white-space:normal}.trigger{position:relative;display:flex;align-items:center;border-width:1px;border-style:solid}@media(hover: hover){.trigger:hover{cursor:pointer}}.triggerContentWrapper{overflow:hidden;flex:1;text-overflow:ellipsis;white-space:nowrap}#showStateIcon{display:flex;height:100%;align-items:center;margin-left:var(--ds-size-100, 0.5rem)}#showStateIcon [auro-icon]{height:var(--ds-size-300, 1.5rem);line-height:var(--ds-size-300, 1.5rem)}#showStateIcon[data-expanded=true] [auro-icon]{transform:rotate(-180deg)}.helpText{margin-top:var(--ds-size-50, 0.25rem);font-size:var(--ds-text-body-size-xs, 0.75rem);line-height:var(--ds-text-body-size-default, 1rem)}:host([matchwidth]) #bibSizer{width:100%}:host([disabled]){pointer-events:none}:host([inset]) .trigger{padding:var(--ds-size-150, 0.75rem) var(--ds-size-200, 1rem)}:host([common]) .trigger,:host([inset][bordered]) .trigger{padding:var(--ds-size-200, 1rem) var(--ds-size-150, 0.75rem)}:host([common]) .trigger,:host([rounded]) .trigger{border-radius:var(--ds-border-radius, 0.375rem)}`;
+var styleCss$1 = i$3`:host{position:relative;display:inline-block;max-width:100%}:host([fluid]){display:block}#bibSizer{position:absolute;z-index:-1;opacity:0;pointer-events:none}.label{font-size:var(--ds-text-body-size-xs, 0.75rem);line-height:var(--ds-text-body-size-default, 1rem);white-space:normal}.trigger{position:relative;display:flex;align-items:center;border-width:1px;border-style:solid}@media(hover: hover){.trigger:hover{cursor:pointer}}.triggerContentWrapper{overflow:hidden;flex:1;text-overflow:ellipsis;white-space:nowrap}#showStateIcon{display:flex;overflow:hidden;height:100%;align-items:center;margin-left:var(--ds-size-100, 0.5rem)}#showStateIcon [auro-icon]{height:var(--ds-size-300, 1.5rem);line-height:var(--ds-size-300, 1.5rem)}#showStateIcon[data-expanded=true] [auro-icon]{transform:rotate(-180deg)}.helpText{margin-top:var(--ds-size-50, 0.25rem);font-size:var(--ds-text-body-size-xs, 0.75rem);line-height:var(--ds-text-body-size-default, 1rem)}:host([matchwidth]) #bibSizer{width:100%}:host([disabled]){pointer-events:none}:host([inset]) .trigger{padding:var(--ds-size-150, 0.75rem) var(--ds-size-200, 1rem)}:host([common]) .trigger,:host([inset][bordered]) .trigger{padding:var(--ds-size-200, 1rem) var(--ds-size-150, 0.75rem)}:host([common]) .trigger,:host([rounded]) .trigger{border-radius:var(--ds-border-radius, 0.375rem)}`;
 
-var colorCss$1 = i$3`.label{color:var(--ds-auro-dropdown-label-text-color)}.trigger{border-color:var(--ds-auro-dropdown-trigger-border-color);background-color:var(--ds-auro-dropdown-trigger-container-color);color:var(--ds-auro-dropdown-trigger-text-color)}.trigger:focus-within,.trigger:active{--ds-auro-dropdown-trigger-border-color: var(--ds-color-border-active-default, #0074c8)}.trigger:focus-within:not(:active){--ds-auro-dropdown-trigger-border-color: var(--ds-color-border-ui-focus-default, #2c67b5);box-shadow:inset 0 0 0 1px var(--ds-color-border-ui-focus-default, #2c67b5)}.trigger:hover{--ds-auro-dropdown-trigger-container-color: var(--ds-color-container-ui-secondary-hover-default, rgba(0, 0, 0, 0.03))}.helpText{color:var(--ds-auro-dropdown-help-text-color)}:host([disabled]){--ds-auro-dropdown-trigger-text-color: var(--ds-color-text-ui-disabled-default, #adadad);--ds-auro-dropdown-label-text-color: var(--ds-color-text-ui-disabled-default, #adadad)}:host([common]),:host([bordered]){--ds-auro-dropdown-trigger-border-color: var(--ds-color-border-primary-default, #585e67)}:host([common]) .trigger:active,:host([common]) .trigger:focus-within,:host([bordered]) .trigger:active,:host([bordered]) .trigger:focus-within{--ds-auro-dropdown-trigger-border-color: var(--ds-color-border-ui-focus-default, #2c67b5)}:host([error]){--ds-auro-dropdown-help-text-color: var(--ds-color-text-error-default, #cc1816);--ds-auro-dropdown-trigger-border-color: var(--ds-color-border-error-default, #cc1816)}:host([error]) .trigger{box-shadow:inset 0 0 0 1px var(--ds-auro-dropdown-trigger-border-color)}:host([error]) .trigger:focus-within{--ds-auro-dropdown-trigger-border-color: var(--ds-color-border-ui-focus-default, #2c67b5);box-shadow:none}:host([error]) .trigger:active{--ds-auro-dropdown-trigger-border-color: var(--ds-color-border-ui-focus-default, #2c67b5);box-shadow:inset 0 0 0 1px var(--ds-auro-dropdown-trigger-border-color)}:host([disabled][common]),:host([disabled][bordered]){--ds-auro-dropdown-trigger-border-color: var(--ds-color-border-ui-disabled-default, #adadad)}`;
+var colorCss$1 = i$3`.label{color:var(--ds-auro-dropdown-label-text-color)}.trigger{border-color:var(--ds-auro-dropdown-trigger-border-color);background-color:var(--ds-auro-dropdown-trigger-container-color);color:var(--ds-auro-dropdown-trigger-text-color)}.trigger:focus-within,.trigger:active{--ds-auro-dropdown-trigger-border-color: var(--ds-color-border-active-default, #0074c8)}.trigger:focus-within:not(:active){--ds-auro-dropdown-trigger-border-color: var(--ds-color-border-ui-focus-default, #2c67b5);outline:1px solid var(--ds-color-border-ui-focus-default, #2c67b5)}.trigger:hover{--ds-auro-dropdown-trigger-container-color: var(--ds-color-container-ui-secondary-hover-default, rgba(0, 0, 0, 0.03))}.helpText{color:var(--ds-auro-dropdown-help-text-color)}:host([disabled]){--ds-auro-dropdown-trigger-text-color: var(--ds-color-text-ui-disabled-default, #adadad);--ds-auro-dropdown-label-text-color: var(--ds-color-text-ui-disabled-default, #adadad)}:host([common]),:host([bordered]){--ds-auro-dropdown-trigger-border-color: var(--ds-color-border-primary-default, #585e67)}:host([common]) .trigger:active,:host([common]) .trigger:focus-within,:host([bordered]) .trigger:active,:host([bordered]) .trigger:focus-within{--ds-auro-dropdown-trigger-border-color: var(--ds-color-border-ui-focus-default, #2c67b5)}:host([error]){--ds-auro-dropdown-help-text-color: var(--ds-color-text-error-default, #cc1816);--ds-auro-dropdown-trigger-border-color: var(--ds-color-border-error-default, #cc1816)}:host([error]) .trigger{outline:solid 1px var(--ds-auro-dropdown-trigger-border-color)}:host([error]) .trigger:focus-within,:host([error]) .trigger:active{--ds-auro-dropdown-trigger-border-color: var(--ds-color-border-active-default, #0074c8)}:host([error]) .trigger:active{box-shadow:none;outline:none}:host([disabled][common]),:host([disabled][bordered]){--ds-auro-dropdown-trigger-border-color: var(--ds-color-border-ui-disabled-default, #adadad)}`;
 
 var tokensCss$2 = i$3`:host{--ds-auro-dropdown-help-text-color: var(--ds-color-text-secondary-default, #525252);--ds-auro-dropdown-label-text-color: var(--ds-color-text-secondary-default, #525252);--ds-auro-dropdown-popover-container-color: var(--ds-color-container-primary-default, #ffffff);--ds-auro-dropdown-popover-border-color: transparent;--ds-auro-dropdown-popover-text-color: var(--ds-color-text-primary-default, #2a2a2a);--ds-auro-dropdown-trigger-container-color: var(--ds-color-container-primary-default, #ffffff);--ds-auro-dropdown-trigger-border-color: transparent;--ds-auro-dropdown-trigger-text-color: var(--ds-color-text-primary-default, #2a2a2a);--ds-auro-dropdownbib-boxshadow-color: var(--ds-elevation-200, 0px 0px 10px rgba(0, 0, 0, 0.15));--ds-auro-dropdownbib-container-color: var(--ds-color-container-primary-default, #ffffff);--ds-auro-dropdownbib-text-color: var(--ds-color-text-primary-default, #2a2a2a)}`;
 
-var styleCss$3 = i$3`:host{position:absolute;z-index:var(--depth-tooltip, 400);display:none}.container{display:inline-block;overflow:auto;box-sizing:border-box;margin:var(--ds-size-50, 0.25rem) 0}:host([isfullscreen]){position:fixed;top:0;left:0}:host([isfullscreen]) .container{width:100dvw;max-width:none;height:100dvh;max-height:none;border-radius:unset;margin-top:0;box-shadow:unset}:host([data-show]){display:flex}:host([common]:not([isfullscreen])) .container,:host([rounded]:not([isfullscreen])) .container{border-radius:var(--ds-border-radius, 0.375rem)}:host([common]) .container,:host([inset]) .container{padding:var(--ds-size-50, 0.25rem) var(--ds-size-100, 0.5rem)}:host([common][isfullscreen]) .container,:host([rounded][isfullscreen]) .container{border-radius:unset;box-shadow:unset}`;
+var styleCss$3 = i$3`:host{position:absolute;z-index:var(--depth-tooltip, 400);display:none}.container{display:inline-block;overflow:auto;box-sizing:border-box;margin:var(--ds-size-50, 0.25rem) 0}:host([isfullscreen]){position:fixed;top:0;left:0}:host([isfullscreen]) .container{width:100dvw;max-width:none;height:100dvh;max-height:none;border-radius:unset;margin-top:0;box-shadow:unset}:host([data-show]){display:flex}:host([common]:not([isfullscreen])) .container,:host([rounded]:not([isfullscreen])) .container{border-radius:var(--ds-border-radius, 0.375rem)}:host([common][isfullscreen]) .container,:host([rounded][isfullscreen]) .container{border-radius:unset;box-shadow:unset}`;
 
 var colorCss$3 = i$3`.container{background-color:var(--ds-auro-dropdownbib-container-color);box-shadow:var(--ds-auro-dropdownbib-boxshadow-color);color:var(--ds-auro-dropdownbib-text-color)}`;
 
@@ -3086,7 +3123,7 @@ class AuroDropdown extends r {
   }
 
   firstUpdated() {
-    this.floater.configure(this);
+    this.floater.configure(this, 'auroDropdown');
     this.bibContent = this.floater.element.bib;
 
     // Add the tag name as an attribute if it is different than the component name
@@ -3307,8 +3344,7 @@ class AuroSelect extends r$4 {
         type: Object
       },
       value: {
-        type: String,
-        reflect: true
+        type: String
       },
       noValidate: {
         type: Boolean,
@@ -3451,11 +3487,11 @@ class AuroSelect extends r$4 {
 
     this.generateOptionsArray();
 
-    this.addEventListener('auroMenu-activatedOption', (evt) => {
+    this.menu.addEventListener('auroMenu-activatedOption', (evt) => {
       this.optionActive = evt.detail;
     });
 
-    this.menu.addEventListener('selectedOption', () => {
+    this.menu.addEventListener('auroMenu-selectedOption', () => {
       this.optionSelected = this.menu.optionSelected;
       this.value = this.optionSelected.value;
 
@@ -3669,6 +3705,14 @@ class AuroSelect extends r$4 {
     }
   }
 
+  /**
+   * Resets component to initial state.
+   * @returns {void}
+   */
+  reset() {
+    this.validation.reset(this);
+  }
+
   /**
    * Handles reading of auro-select by screen readers.
    * @private

package/components/select/src/auro-select.js

@@ -111,8 +111,7 @@ export class AuroSelect extends LitElement {
         type: Object
       },
       value: {
-        type: String,
-        reflect: true
+        type: String
       },
       noValidate: {
         type: Boolean,
@@ -255,11 +254,11 @@ export class AuroSelect extends LitElement {
 
     this.generateOptionsArray();
 
-    this.addEventListener('auroMenu-activatedOption', (evt) => {
+    this.menu.addEventListener('auroMenu-activatedOption', (evt) => {
       this.optionActive = evt.detail;
     });
 
-    this.menu.addEventListener('selectedOption', () => {
+    this.menu.addEventListener('auroMenu-selectedOption', () => {
       this.optionSelected = this.menu.optionSelected;
       this.value = this.optionSelected.value;
 
@@ -473,6 +472,14 @@ export class AuroSelect extends LitElement {
     }
   }
 
+  /**
+   * Resets component to initial state.
+   * @returns {void}
+   */
+  reset() {
+    this.validation.reset(this);
+  }
+
   /**
    * Handles reading of auro-select by screen readers.
    * @private

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@aurodesignsystem/auro-formkit",
-  "version": "1.6.0-beta.9",
+  "version": "2.0.0-beta.2",
   "description": "A collection of web components used to build forms.",
   "type": "module",
   "license": "Apache-2.0",
@@ -40,7 +40,7 @@
     "prepare": "husky"
   },
   "dependencies": {
-    "@aurodesignsystem/auro-library": "^3.0.3"
+    "@aurodesignsystem/auro-library": "^3.0.5"
   },
   "devDependencies": {
     "@aurodesignsystem/eslint-config": "^1.3.3",

package/packages/form-validation/src/validation.js

@@ -12,6 +12,30 @@ export default class AuroFormValidation {
     this.runtimeUtils = new AuroLibraryRuntimeUtils();
   }
 
+  /**
+   * Resets the element to its initial state.
+   * @private
+   * @param {object} elem - HTML element to reset.
+   * @returns {void}
+   */
+  reset(elem) {
+    elem.validity = undefined;
+    elem.value = undefined;
+
+    // Resets the second value of the datepicker in range state
+    if (elem.valueEnd) {
+      elem.valueEnd = undefined;
+    }
+
+    // Resets selected option of element
+    if (elem.optionSelected) {
+      elem.optionSelected = undefined;
+    }
+
+    // Runs validation to handle error attribute
+    this.validate(elem);
+  }
+
   /**
    * Determines the validity state of the element based on the common attribute restrictions (pattern).
    * @private
@@ -26,10 +50,15 @@ export default class AuroFormValidation {
         elem.validity = 'badInput';
         elem.setCustomValidity = elem.setCustomValidityBadInput || '';
       }
-    } else if (elem.value && elem.value.length > 0 && elem.value.length < elem.minLength) {
+    }
+
+    // Length > 0 is required to prevent the error message from showing when the input is empty
+    if (elem.value?.length > 0 && elem.value?.length < elem.minLength) {
       elem.validity = 'tooShort';
       elem.setCustomValidity = elem.setCustomValidityTooShort || '';
-    } else if (elem.value && elem.value.length > elem.maxLength) {
+    }
+    
+    if (elem.value?.length > elem.maxLength) {
       elem.validity = 'tooLong';
       elem.setCustomValidity = elem.setCustomValidityTooLong || '';
     }
@@ -55,7 +84,7 @@ export default class AuroFormValidation {
           elem.validity = 'tooShort';
           elem.setCustomValidity = elem.setCustomValidityForType || '';
         }
-      } else if (elem.type === 'number' || elem.type === 'numeric') { // 'numeric` is a deprecated alias for number'
+      } else if (elem.type === 'number') {
         if (elem.max !== undefined && Number(elem.max) < Number(elem.value)) {
           elem.validity = 'rangeOverflow';
           elem.setCustomValidity = elem.getAttribute('setCustomValidityRangeOverflow') || '';
@@ -160,14 +189,10 @@ export default class AuroFormValidation {
 
     if (validationShouldRun || elem.hasAttribute('error')) {
       if (elem.validity && elem.validity !== 'valid') {
-        elem.isValid = false;
-
         // Use the validity message override if it is declared
         if (elem.ValidityMessageOverride) {
           elem.setCustomValidity = elem.ValidityMessageOverride;
         }
-      } else {
-        elem.isValid = true;
       }
 
       this.getErrorMessage(elem);

package/.turbo/cache/0008b92c8752bf75-meta.json

@@ -1 +0,0 @@
-{"hash":"0008b92c8752bf75","duration":18139}

package/.turbo/cache/00cb38bef1105dac-meta.json

@@ -1 +0,0 @@
-{"hash":"00cb38bef1105dac","duration":1831}

package/.turbo/cache/0157ec8abdaf2a9c-meta.json

@@ -1 +0,0 @@
-{"hash":"0157ec8abdaf2a9c","duration":2013}

package/.turbo/cache/0636e9cedc83238b-meta.json

@@ -1 +0,0 @@
-{"hash":"0636e9cedc83238b","duration":2465}

package/.turbo/cache/06f476671015e973-meta.json

@@ -1 +0,0 @@
-{"hash":"06f476671015e973","duration":8189}

package/.turbo/cache/09df74d672102662-meta.json

@@ -1 +0,0 @@
-{"hash":"09df74d672102662","duration":1766}

package/.turbo/cache/0cd109fb3183c2e6-meta.json

@@ -1 +0,0 @@
-{"hash":"0cd109fb3183c2e6","duration":1493}

package/.turbo/cache/17c429ade621ffcb-meta.json

@@ -1 +0,0 @@
-{"hash":"17c429ade621ffcb","duration":1931}

package/.turbo/cache/1c47128a0e12fcfa-meta.json

@@ -1 +0,0 @@
-{"hash":"1c47128a0e12fcfa","duration":2772}

package/.turbo/cache/1db02f756ce85784-meta.json

@@ -1 +0,0 @@
-{"hash":"1db02f756ce85784","duration":3524}

package/.turbo/cache/21705fa179d5f820-meta.json

@@ -1 +0,0 @@
-{"hash":"21705fa179d5f820","duration":3243}

package/.turbo/cache/249d9ba3ee6aa1cb-meta.json

@@ -1 +0,0 @@
-{"hash":"249d9ba3ee6aa1cb","duration":1888}

package/.turbo/cache/2666b96bfcf4e9cd-meta.json

@@ -1 +0,0 @@
-{"hash":"2666b96bfcf4e9cd","duration":2733}

package/.turbo/cache/2778d5e895240cd1-meta.json

@@ -1 +0,0 @@
-{"hash":"2778d5e895240cd1","duration":2515}

package/.turbo/cache/300b59df2de12b46-meta.json

@@ -1 +0,0 @@
-{"hash":"300b59df2de12b46","duration":5431}

package/.turbo/cache/31729e74fccaafb0-meta.json

@@ -1 +0,0 @@
-{"hash":"31729e74fccaafb0","duration":2332}

package/.turbo/cache/32702694d62a08ac-meta.json

@@ -1 +0,0 @@
-{"hash":"32702694d62a08ac","duration":2660}

package/.turbo/cache/3482a3cba9a51c2d-meta.json

@@ -1 +0,0 @@
-{"hash":"3482a3cba9a51c2d","duration":19666}

package/.turbo/cache/3a9d73752f23a40a-meta.json

@@ -1 +0,0 @@
-{"hash":"3a9d73752f23a40a","duration":2503}

package/.turbo/cache/3afe2e6f714a4fcb-meta.json

@@ -1 +0,0 @@
-{"hash":"3afe2e6f714a4fcb","duration":721}

package/.turbo/cache/408ea1754276298c-meta.json

@@ -1 +0,0 @@
-{"hash":"408ea1754276298c","duration":3431}

package/.turbo/cache/42066c793c3816f3-meta.json

@@ -1 +0,0 @@
-{"hash":"42066c793c3816f3","duration":897}

package/.turbo/cache/4bec46ffff6fd2e8-meta.json

@@ -1 +0,0 @@
-{"hash":"4bec46ffff6fd2e8","duration":2274}

package/.turbo/cache/50b275350abe14dd-meta.json

@@ -1 +0,0 @@
-{"hash":"50b275350abe14dd","duration":6026}

package/.turbo/cache/51078a087b52c65e-meta.json

@@ -1 +0,0 @@
-{"hash":"51078a087b52c65e","duration":1948}

package/.turbo/cache/593ddf689673e305-meta.json

@@ -1 +0,0 @@
-{"hash":"593ddf689673e305","duration":9065}

package/.turbo/cache/64e4f18395bd4461-meta.json

@@ -1 +0,0 @@
-{"hash":"64e4f18395bd4461","duration":3767}

package/.turbo/cache/68843ecab6e09320-meta.json

@@ -1 +0,0 @@
-{"hash":"68843ecab6e09320","duration":20169}

package/.turbo/cache/7419ef01dc18b433-meta.json

@@ -1 +0,0 @@
-{"hash":"7419ef01dc18b433","duration":2882}

package/.turbo/cache/748faca09d14fea7-meta.json

@@ -1 +0,0 @@
-{"hash":"748faca09d14fea7","duration":4333}

package/.turbo/cache/75495b0bbd6c06a7-meta.json

@@ -1 +0,0 @@
-{"hash":"75495b0bbd6c06a7","duration":1015}

package/.turbo/cache/7a6a8af4392c4b05-meta.json

@@ -1 +0,0 @@
-{"hash":"7a6a8af4392c4b05","duration":18735}

package/.turbo/cache/7e81141e0140dd3a-meta.json

@@ -1 +0,0 @@
-{"hash":"7e81141e0140dd3a","duration":2361}

package/.turbo/cache/7eb50d96639e6dd4-meta.json

@@ -1 +0,0 @@
-{"hash":"7eb50d96639e6dd4","duration":5483}

package/.turbo/cache/83bb78fec13808d0-meta.json

@@ -1 +0,0 @@
-{"hash":"83bb78fec13808d0","duration":2508}

package/.turbo/cache/8605f60efb7d3957-meta.json

@@ -1 +0,0 @@
-{"hash":"8605f60efb7d3957","duration":2494}

package/.turbo/cache/892a90b62716ded5-meta.json

@@ -1 +0,0 @@
-{"hash":"892a90b62716ded5","duration":2561}

package/.turbo/cache/8cac06ca809bd2b1-meta.json

@@ -1 +0,0 @@
-{"hash":"8cac06ca809bd2b1","duration":4276}

package/.turbo/cache/9a908bf8f82c84a6-meta.json

@@ -1 +0,0 @@
-{"hash":"9a908bf8f82c84a6","duration":2546}

package/.turbo/cache/9ed3089ffd7d0c00-meta.json

@@ -1 +0,0 @@
-{"hash":"9ed3089ffd7d0c00","duration":1765}

package/.turbo/cache/a3a879aea25debf8-meta.json

@@ -1 +0,0 @@
-{"hash":"a3a879aea25debf8","duration":1703}

package/.turbo/cache/a8dbafaf6177f677-meta.json

@@ -1 +0,0 @@
-{"hash":"a8dbafaf6177f677","duration":9626}

package/.turbo/cache/a8f6418b830ef0ba-meta.json

@@ -1 +0,0 @@
-{"hash":"a8f6418b830ef0ba","duration":1419}

package/.turbo/cache/b37b0eb5597e160f-meta.json

@@ -1 +0,0 @@
-{"hash":"b37b0eb5597e160f","duration":2239}

package/.turbo/cache/b7e7a8c425673f7c-meta.json

@@ -1 +0,0 @@
-{"hash":"b7e7a8c425673f7c","duration":6057}

package/.turbo/cache/bc8eed3d7216f5b7-meta.json

@@ -1 +0,0 @@
-{"hash":"bc8eed3d7216f5b7","duration":821}

package/.turbo/cache/bde11c3029373459-meta.json

@@ -1 +0,0 @@
-{"hash":"bde11c3029373459","duration":3771}

package/.turbo/cache/c8e5fe6aec4479f5-meta.json

@@ -1 +0,0 @@
-{"hash":"c8e5fe6aec4479f5","duration":18124}

package/.turbo/cache/d0e874a9a71c9468-meta.json

@@ -1 +0,0 @@
-{"hash":"d0e874a9a71c9468","duration":3048}