@aurodesignsystem/auro-formkit 1.6.0-beta.10 → 1.6.0-beta.12

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

@@ -57,6 +57,14 @@ function inDialogExample() {
   });
 }
 
+function resetStateExample() {
+  const elem = document.querySelector('#resetStateExample');
+
+  document.querySelector('#resetStateBtn').addEventListener('click', () => {
+    elem.reset();
+  });
+}
+
 function auroMenuLoadingExample() {
   const select = document.querySelector("#loadingExample");
   const menu = document.querySelector("#loadingExampleSelectMenu");
@@ -200,6 +208,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
@@ -214,10 +246,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 || '';
     }
@@ -243,7 +280,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') || '';
@@ -348,14 +385,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);
@@ -2876,7 +2909,7 @@ var colorCss$1$1 = i$3`.label{color:var(--ds-auro-dropdown-label-text-color)}.tr
 
 var tokensCss$3 = 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$4 = 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$4 = 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$4 = 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)}`;
 
@@ -3409,8 +3442,7 @@ class AuroSelect extends r$4 {
         type: Object
       },
       value: {
-        type: String,
-        reflect: true
+        type: String
       },
       noValidate: {
         type: Boolean,
@@ -3771,6 +3803,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
@@ -4873,8 +4913,7 @@ class AuroMenuOption extends r$4 {
         reflect: true
       },
       value: {
-        type: String,
-        reflect: true
+        type: String
       },
       tabIndex: {
         type: Number,
@@ -4966,6 +5005,7 @@ function initExamples(initCount) {
     valueExample();
     valueExtractionExample();
     inDialogExample();
+    resetStateExample();
     auroMenuLoadingExample();
   } catch (err) {
     if (initCount <= 20) {

package/components/select/demo/index.min.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);
@@ -2786,7 +2811,7 @@ var colorCss$1$1 = i$3`.label{color:var(--ds-auro-dropdown-label-text-color)}.tr
 
 var tokensCss$3 = 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$4 = 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$4 = 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$4 = 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)}`;
 
@@ -3319,8 +3344,7 @@ class AuroSelect extends r$4 {
         type: Object
       },
       value: {
-        type: String,
-        reflect: true
+        type: String
       },
       noValidate: {
         type: Boolean,
@@ -3681,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
@@ -4783,8 +4815,7 @@ class AuroMenuOption extends r$4 {
         reflect: true
       },
       value: {
-        type: String,
-        reflect: true
+        type: String
       },
       tabIndex: {
         type: Number,

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

@@ -28,7 +28,6 @@ export class AuroSelect extends LitElement {
         };
         value: {
             type: StringConstructor;
-            reflect: boolean;
         };
         noValidate: {
             type: BooleanConstructor;
@@ -181,6 +180,11 @@ export class AuroSelect extends LitElement {
     private generateOptionsArray;
     firstUpdated(): void;
     updated(changedProperties: any): void;
+    /**
+     * Resets component to initial state.
+     * @returns {void}
+     */
+    reset(): void;
     /**
      * Handles reading of auro-select by screen readers.
      * @private

package/components/select/dist/auro-select.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"auro-select.d.ts","sourceRoot":"","sources":["../src/auro-select.js"],"names":[],"mappings":"AAwBA;;;;;;;;;;;;;;;;;;;;;;GAsBG;AAGH;IAyDE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;QAiDI;;WAEG;;;;QAGH;;WAEG;;;;MAGN;IAED,+CAMC;IAmBD;;;;;;;OAOG;IACH,uBANW,MAAM,QAQhB;IArJC,oBAAyC;IACzC,oBAA+B;IAC/B,iBAAyB;IAMzB;;OAEG;IACH,iBAEuC;IAEvC;;OAEG;IACH,mBAA0C;IAE1C;;OAEG;IACH,qBAAiD;IAOjD;;OAEG;IACH,oBAAyF;IAEzF;;OAEG;IACH,6BAAiC;IAGnC;;;OAGG;IACH,wBAGC;IAFC,2BAAiB;IACjB,kBAAwB;IA2E1B;;;;OAIG;IACH,0BAUC;IATC,cAA4E;IAC5E,iBAA8D;IAsBhE;;;;;OAKG;IACH,6BAyBC;IAED;;;;OAIG;IACH,sBA2DC;IA1DC,cAAwD;IAoBtD,WAAsC;IAwC1C;;;;OAIG;IACH,wBA4CC;IAED;;;;;;;;;;;;;OAaG;IACH,gCAUC;IAED;;;;OAIG;IACH,sBAYC;IAED;;;;OAIG;IACH,6BAMC;IA4BD,qBAYC;IAED,sCAqBC;IAED;;;;OAIG;IACH,mBAkCC;IAMD,4CAgDC;CACF;2BAjjB0B,KAAK"}
+{"version":3,"file":"auro-select.d.ts","sourceRoot":"","sources":["../src/auro-select.js"],"names":[],"mappings":"AAwBA;;;;;;;;;;;;;;;;;;;;;;GAsBG;AAGH;IAyDE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;QAgDI;;WAEG;;;;QAGH;;WAEG;;;;MAGN;IAED,+CAMC;IAmBD;;;;;;;OAOG;IACH,uBANW,MAAM,QAQhB;IApJC,oBAAyC;IACzC,oBAA+B;IAC/B,iBAAyB;IAMzB;;OAEG;IACH,iBAEuC;IAEvC;;OAEG;IACH,mBAA0C;IAE1C;;OAEG;IACH,qBAAiD;IAOjD;;OAEG;IACH,oBAAyF;IAEzF;;OAEG;IACH,6BAAiC;IAGnC;;;OAGG;IACH,wBAGC;IAFC,2BAAiB;IACjB,kBAAwB;IA0E1B;;;;OAIG;IACH,0BAUC;IATC,cAA4E;IAC5E,iBAA8D;IAsBhE;;;;;OAKG;IACH,6BAyBC;IAED;;;;OAIG;IACH,sBA2DC;IA1DC,cAAwD;IAoBtD,WAAsC;IAwC1C;;;;OAIG;IACH,wBA4CC;IAED;;;;;;;;;;;;;OAaG;IACH,gCAUC;IAED;;;;OAIG;IACH,sBAYC;IAED;;;;OAIG;IACH,6BAMC;IA4BD,qBAYC;IAED,sCAqBC;IAED;;;OAGG;IACH,SAFa,IAAI,CAIhB;IAED;;;;OAIG;IACH,mBAkCC;IAMD,4CAgDC;CACF;2BAxjB0B,KAAK"}

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);
@@ -2786,7 +2811,7 @@ var colorCss$1 = i$3`.label{color:var(--ds-auro-dropdown-label-text-color)}.trig
 
 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)}`;
 
@@ -3319,8 +3344,7 @@ class AuroSelect extends r$4 {
         type: Object
       },
       value: {
-        type: String,
-        reflect: true
+        type: String
       },
       noValidate: {
         type: Boolean,
@@ -3681,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,
@@ -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.10",
+  "version": "1.6.0-beta.12",
   "description": "A collection of web components used to build forms.",
   "type": "module",
   "license": "Apache-2.0",

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/049b9083252d38be-meta.json

@@ -1 +0,0 @@
-{"hash":"049b9083252d38be","duration":9861}

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

@@ -1 +0,0 @@
-{"hash":"0a1dd4481355cb0b","duration":3090}

package/.turbo/cache/13cf37c850bd8cf4-meta.json

@@ -1 +0,0 @@
-{"hash":"13cf37c850bd8cf4","duration":1554}

package/.turbo/cache/3323eb841acb9c4e-meta.json

@@ -1 +0,0 @@
-{"hash":"3323eb841acb9c4e","duration":2974}

package/.turbo/cache/34ba23e2e2d652ad-meta.json

@@ -1 +0,0 @@
-{"hash":"34ba23e2e2d652ad","duration":19488}

package/.turbo/cache/368cd6fed7975ad2-meta.json

@@ -1 +0,0 @@
-{"hash":"368cd6fed7975ad2","duration":3003}

package/.turbo/cache/3924bce8e51f0ffa-meta.json

@@ -1 +0,0 @@
-{"hash":"3924bce8e51f0ffa","duration":1476}

package/.turbo/cache/4567487084a055b7-meta.json

@@ -1 +0,0 @@
-{"hash":"4567487084a055b7","duration":3312}

package/.turbo/cache/4763278a7d3dbc16-meta.json

@@ -1 +0,0 @@
-{"hash":"4763278a7d3dbc16","duration":3516}

package/.turbo/cache/549e6ef9f9ffd9a8-meta.json

@@ -1 +0,0 @@
-{"hash":"549e6ef9f9ffd9a8","duration":738}

package/.turbo/cache/59ccd8430174883c-meta.json

@@ -1 +0,0 @@
-{"hash":"59ccd8430174883c","duration":2673}

package/.turbo/cache/683d4c0e20c077a9-meta.json

@@ -1 +0,0 @@
-{"hash":"683d4c0e20c077a9","duration":10159}

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

@@ -1 +0,0 @@
-{"hash":"8f8ffe35cc79d1a9","duration":4504}

package/.turbo/cache/926d632729ca6536-meta.json

@@ -1 +0,0 @@
-{"hash":"926d632729ca6536","duration":6169}

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

@@ -1 +0,0 @@
-{"hash":"9e7be41cc3a7ef43","duration":1810}

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

@@ -1 +0,0 @@
-{"hash":"9ee793063ea89126","duration":5572}

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

@@ -1 +0,0 @@
-{"hash":"a1558cef51c034da","duration":1671}

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

@@ -1 +0,0 @@
-{"hash":"a24f2ff8e94e56e8","duration":18961}

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

@@ -1 +0,0 @@
-{"hash":"a2705cf095a2ceb0","duration":18976}

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

@@ -1 +0,0 @@
-{"hash":"a33c0749886a41b5","duration":6457}

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

@@ -1 +0,0 @@
-{"hash":"a66b465385a30a2b","duration":21344}

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

@@ -1 +0,0 @@
-{"hash":"c1b72a92dec4fe37","duration":6044}

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

@@ -1 +0,0 @@
-{"hash":"e25ac25a8a0ad126","duration":2500}

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

@@ -1 +0,0 @@
-{"hash":"e671573e4ef02c47","duration":18924}

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

@@ -1 +0,0 @@
-{"hash":"e86cee22dff5e281","duration":2379}

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

@@ -1 +0,0 @@
-{"hash":"f680556a8e954eac","duration":18230}