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

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

@@ -1,3 +1,11 @@
+function resetStateExample() {
+  const elem = document.querySelector('#resetStateExample');
+
+  document.querySelector('#resetStateBtn').addEventListener('click', () => {
+    elem.reset();
+  });
+}
+
 /**
  * @license
  * Copyright 2019 Google LLC
@@ -240,6 +248,15 @@ class AuroCheckbox extends r {
     return this.svg;
   }
 
+  /**
+   * Resets component to initial state.
+   * @returns {void}
+   */
+  reset() {
+    this.checked = false;
+    this.error = false;
+  }
+
   firstUpdated() {
     // Add the tag name as an attribute if it is different than the component name
     this.runtimeUtils.handleComponentTagRename(this, 'auro-checkbox');
@@ -302,6 +319,30 @@ 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
@@ -316,10 +357,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 || '';
     }
@@ -345,7 +391,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') || '';
@@ -450,14 +496,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);
@@ -732,7 +774,7 @@ class AuroCheckboxGroup extends r {
   handlePreselectedItems() {
     let preSelectedValues = false;
 
-    this.items.forEach((item) => {
+    this.checkboxes.forEach((item) => {
       if (item.hasAttribute('checked') && this.value === undefined) {
         preSelectedValues = true;
       }
@@ -743,7 +785,7 @@ class AuroCheckboxGroup extends r {
         this.value = [];
       }
 
-      this.items.forEach((item) => {
+      this.checkboxes.forEach((item) => {
         this.handleValueUpdate(item.getAttribute('value'), Boolean(item.hasAttribute('checked')));
       });
     }
@@ -758,13 +800,25 @@ class AuroCheckboxGroup extends r {
     const groupTagName = this.tagName.toLowerCase();
     const checkboxTagName = groupTagName.substring(0, groupTagName.indexOf('-group'));
 
-    this.items = Array.from(this.querySelectorAll(checkboxTagName));
+    this.checkboxes = Array.from(this.querySelectorAll(checkboxTagName));
 
     this.handlePreselectedItems();
 
     this.validation.validate(this);
   }
 
+  /**
+   * Resets component to initial state.
+   * @returns {void}
+   */
+  reset() {
+    this.checkboxes.forEach((checkbox) => {
+      checkbox.reset();
+    });
+
+    this.validation.reset(this);
+  }
+
   /**
    * LitElement lifecycle method. Called after the DOM has been updated.
    * @param {Map<string, any>} changedProperties - Keys are the names of changed properties, values are the corresponding previous values.
@@ -772,7 +826,7 @@ class AuroCheckboxGroup extends r {
    */
   updated(changedProperties) {
     if (changedProperties.has('disabled')) {
-      this.items.forEach((el) => {
+      this.checkboxes.forEach((el) => {
         if (this.disabled) {
           el.setAttribute('disabled', true);
         } else {
@@ -782,7 +836,7 @@ class AuroCheckboxGroup extends r {
     }
 
     if (changedProperties.has('validity')) {
-      this.items.forEach((el) => {
+      this.checkboxes.forEach((el) => {
         if (this.validity && this.validity !== 'valid') {
           el.setAttribute('error', true);
         } else {
@@ -812,7 +866,7 @@ class AuroCheckboxGroup extends r {
 
   render() {
     const groupClasses = {
-      'displayFlex': this.horizontal && this.items.length <= this.maxNumber
+      'displayFlex': this.horizontal && this.checkboxes.length <= this.maxNumber
     };
 
     return x`
@@ -843,3 +897,20 @@ AuroCheckboxGroup.register(); // registering to `auro-checkbox-group`
 
 AuroCheckbox.register('custom-checkbox');
 AuroCheckboxGroup.register('custom-checkbox-group');
+
+function initExamples(initCount) {
+  initCount = initCount || 0;
+
+  try {
+    resetStateExample();
+  } catch (error) {
+    if (initCount <= 20) {
+      // setTimeout handles issue where content is sometimes loaded after the functions get called
+      setTimeout(() => {
+        initExamples(initCount + 1);
+      }, 100);
+    }
+  }
+}
+
+export { initExamples };

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

@@ -240,6 +240,15 @@ class AuroCheckbox extends r {
     return this.svg;
   }
 
+  /**
+   * Resets component to initial state.
+   * @returns {void}
+   */
+  reset() {
+    this.checked = false;
+    this.error = false;
+  }
+
   firstUpdated() {
     // Add the tag name as an attribute if it is different than the component name
     this.runtimeUtils.handleComponentTagRename(this, 'auro-checkbox');
@@ -302,6 +311,30 @@ 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
@@ -316,10 +349,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 || '';
     }
@@ -345,7 +383,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') || '';
@@ -450,14 +488,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);
@@ -732,7 +766,7 @@ class AuroCheckboxGroup extends r {
   handlePreselectedItems() {
     let preSelectedValues = false;
 
-    this.items.forEach((item) => {
+    this.checkboxes.forEach((item) => {
       if (item.hasAttribute('checked') && this.value === undefined) {
         preSelectedValues = true;
       }
@@ -743,7 +777,7 @@ class AuroCheckboxGroup extends r {
         this.value = [];
       }
 
-      this.items.forEach((item) => {
+      this.checkboxes.forEach((item) => {
         this.handleValueUpdate(item.getAttribute('value'), Boolean(item.hasAttribute('checked')));
       });
     }
@@ -758,13 +792,25 @@ class AuroCheckboxGroup extends r {
     const groupTagName = this.tagName.toLowerCase();
     const checkboxTagName = groupTagName.substring(0, groupTagName.indexOf('-group'));
 
-    this.items = Array.from(this.querySelectorAll(checkboxTagName));
+    this.checkboxes = Array.from(this.querySelectorAll(checkboxTagName));
 
     this.handlePreselectedItems();
 
     this.validation.validate(this);
   }
 
+  /**
+   * Resets component to initial state.
+   * @returns {void}
+   */
+  reset() {
+    this.checkboxes.forEach((checkbox) => {
+      checkbox.reset();
+    });
+
+    this.validation.reset(this);
+  }
+
   /**
    * LitElement lifecycle method. Called after the DOM has been updated.
    * @param {Map<string, any>} changedProperties - Keys are the names of changed properties, values are the corresponding previous values.
@@ -772,7 +818,7 @@ class AuroCheckboxGroup extends r {
    */
   updated(changedProperties) {
     if (changedProperties.has('disabled')) {
-      this.items.forEach((el) => {
+      this.checkboxes.forEach((el) => {
         if (this.disabled) {
           el.setAttribute('disabled', true);
         } else {
@@ -782,7 +828,7 @@ class AuroCheckboxGroup extends r {
     }
 
     if (changedProperties.has('validity')) {
-      this.items.forEach((el) => {
+      this.checkboxes.forEach((el) => {
         if (this.validity && this.validity !== 'valid') {
           el.setAttribute('error', true);
         } else {
@@ -812,7 +858,7 @@ class AuroCheckboxGroup extends r {
 
   render() {
     const groupClasses = {
-      'displayFlex': this.horizontal && this.items.length <= this.maxNumber
+      'displayFlex': this.horizontal && this.checkboxes.length <= this.maxNumber
     };
 
     return x`

package/components/checkbox/dist/auro-checkbox-group.d.ts

@@ -106,7 +106,12 @@ export class AuroCheckboxGroup extends LitElement {
      * @returns {void}
      */
     private handleItems;
-    items: Element[];
+    checkboxes: Element[];
+    /**
+     * Resets component to initial state.
+     * @returns {void}
+     */
+    reset(): void;
     /**
      * LitElement lifecycle method. Called after the DOM has been updated.
      * @param {Map<string, any>} changedProperties - Keys are the names of changed properties, values are the corresponding previous values.

package/components/checkbox/dist/auro-checkbox-group.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"auro-checkbox-group.d.ts","sourceRoot":"","sources":["../src/auro-checkbox-group.js"],"names":[],"mappings":"AAkBA;;;;;;;;;;;;;;;GAeG;AAEH;IA+BE,+CAMC;IAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;MAuCC;IAED;;;;;;;OAOG;IACH,uBANW,MAAM,QAQhB;IAtFC,cAAyB;IACzB,aAAsB;IACtB,cAAyB;IACzB,kBAAqB;IACrB,oBAAuB;IAEvB;;OAEG;IACH,cAAc;IAEd;;OAEG;IACH,kBAAkB;IAElB;;OAEG;IACH,mBAA0C;IAE1C;;OAEG;IACH,qBAAiD;IAqEnD;;;;;;OAMG;IACH,0BAoBC;IAED,qBA2CC;IAjBG,qBAAuB;IAmB3B;;;;OAIG;IACH,+BAkBC;IAED;;;;OAIG;IACH,oBASC;IALC,iBAA+D;IAOjE;;;;OAIG;IACH,2BAHW,GAAG,CAAC,MAAM,EAAE,GAAG,CAAC,GACd,IAAI,CAwChB;IAED,+CAyBC;CACF;2BAvTgC,KAAK"}
+{"version":3,"file":"auro-checkbox-group.d.ts","sourceRoot":"","sources":["../src/auro-checkbox-group.js"],"names":[],"mappings":"AAkBA;;;;;;;;;;;;;;;GAeG;AAEH;IA+BE,+CAMC;IAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;MAuCC;IAED;;;;;;;OAOG;IACH,uBANW,MAAM,QAQhB;IAtFC,cAAyB;IACzB,aAAsB;IACtB,cAAyB;IACzB,kBAAqB;IACrB,oBAAuB;IAEvB;;OAEG;IACH,cAAc;IAEd;;OAEG;IACH,kBAAkB;IAElB;;OAEG;IACH,mBAA0C;IAE1C;;OAEG;IACH,qBAAiD;IAqEnD;;;;;;OAMG;IACH,0BAoBC;IAED,qBA2CC;IAjBG,qBAAuB;IAmB3B;;;;OAIG;IACH,+BAkBC;IAED;;;;OAIG;IACH,oBASC;IALC,sBAAoE;IAOtE;;;OAGG;IACH,SAFa,IAAI,CAQhB;IAED;;;;OAIG;IACH,2BAHW,GAAG,CAAC,MAAM,EAAE,GAAG,CAAC,GACd,IAAI,CAwChB;IAED,+CAyBC;CACF;2BAnUgC,KAAK"}

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

@@ -68,6 +68,11 @@ export class AuroCheckbox extends LitElement {
     private generateIconHtml;
     dom: Document;
     svg: ChildNode;
+    /**
+     * Resets component to initial state.
+     * @returns {void}
+     */
+    reset(): void;
     firstUpdated(): void;
     render(): import("lit-html").TemplateResult<1>;
 }

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

@@ -1 +1 @@
-{"version":3,"file":"auro-checkbox.d.ts","sourceRoot":"","sources":["../src/auro-checkbox.js"],"names":[],"mappings":"AAiBA;;;;;;;;;;;;GAYG;AAGH;IAaE,+CAMC;IAGD;;;;;;;;;;;;;;;;;;;;;;MAkBC;IAED;;;;;;;OAOG;IACH,uBANW,MAAM,QAQhB;IAjDC,iBAAoB;IACpB,kBAAqB;IACrB,eAAkB;IAElB;;OAEG;IACH,qBAAiD;IA8CnD,+BAKC;IAED,8BAQC;IAED;;;;OAIG;IACH,sBAMC;IAED;;;;OAIG;IACH,yBAOC;IANC,cAAoE;IACpE,eAAmC;IAOrC,qBAmBC;IAGD,+CA4BC;CACF;2BAlLgC,KAAK"}
+{"version":3,"file":"auro-checkbox.d.ts","sourceRoot":"","sources":["../src/auro-checkbox.js"],"names":[],"mappings":"AAiBA;;;;;;;;;;;;GAYG;AAGH;IAaE,+CAMC;IAGD;;;;;;;;;;;;;;;;;;;;;;MAkBC;IAED;;;;;;;OAOG;IACH,uBANW,MAAM,QAQhB;IAjDC,iBAAoB;IACpB,kBAAqB;IACrB,eAAkB;IAElB;;OAEG;IACH,qBAAiD;IA8CnD,+BAKC;IAED,8BAQC;IAED;;;;OAIG;IACH,sBAMC;IAED;;;;OAIG;IACH,yBAOC;IANC,cAAoE;IACpE,eAAmC;IAOrC;;;OAGG;IACH,SAFa,IAAI,CAKhB;IAED,qBAmBC;IAGD,+CA4BC;CACF;2BA3LgC,KAAK"}

package/components/checkbox/dist/index.js

@@ -240,6 +240,15 @@ class AuroCheckbox extends r {
     return this.svg;
   }
 
+  /**
+   * Resets component to initial state.
+   * @returns {void}
+   */
+  reset() {
+    this.checked = false;
+    this.error = false;
+  }
+
   firstUpdated() {
     // Add the tag name as an attribute if it is different than the component name
     this.runtimeUtils.handleComponentTagRename(this, 'auro-checkbox');
@@ -302,6 +311,30 @@ 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
@@ -316,10 +349,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 || '';
     }
@@ -345,7 +383,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') || '';
@@ -450,14 +488,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);
@@ -732,7 +766,7 @@ class AuroCheckboxGroup extends r {
   handlePreselectedItems() {
     let preSelectedValues = false;
 
-    this.items.forEach((item) => {
+    this.checkboxes.forEach((item) => {
       if (item.hasAttribute('checked') && this.value === undefined) {
         preSelectedValues = true;
       }
@@ -743,7 +777,7 @@ class AuroCheckboxGroup extends r {
         this.value = [];
       }
 
-      this.items.forEach((item) => {
+      this.checkboxes.forEach((item) => {
         this.handleValueUpdate(item.getAttribute('value'), Boolean(item.hasAttribute('checked')));
       });
     }
@@ -758,13 +792,25 @@ class AuroCheckboxGroup extends r {
     const groupTagName = this.tagName.toLowerCase();
     const checkboxTagName = groupTagName.substring(0, groupTagName.indexOf('-group'));
 
-    this.items = Array.from(this.querySelectorAll(checkboxTagName));
+    this.checkboxes = Array.from(this.querySelectorAll(checkboxTagName));
 
     this.handlePreselectedItems();
 
     this.validation.validate(this);
   }
 
+  /**
+   * Resets component to initial state.
+   * @returns {void}
+   */
+  reset() {
+    this.checkboxes.forEach((checkbox) => {
+      checkbox.reset();
+    });
+
+    this.validation.reset(this);
+  }
+
   /**
    * LitElement lifecycle method. Called after the DOM has been updated.
    * @param {Map<string, any>} changedProperties - Keys are the names of changed properties, values are the corresponding previous values.
@@ -772,7 +818,7 @@ class AuroCheckboxGroup extends r {
    */
   updated(changedProperties) {
     if (changedProperties.has('disabled')) {
-      this.items.forEach((el) => {
+      this.checkboxes.forEach((el) => {
         if (this.disabled) {
           el.setAttribute('disabled', true);
         } else {
@@ -782,7 +828,7 @@ class AuroCheckboxGroup extends r {
     }
 
     if (changedProperties.has('validity')) {
-      this.items.forEach((el) => {
+      this.checkboxes.forEach((el) => {
         if (this.validity && this.validity !== 'valid') {
           el.setAttribute('error', true);
         } else {
@@ -812,7 +858,7 @@ class AuroCheckboxGroup extends r {
 
   render() {
     const groupClasses = {
-      'displayFlex': this.horizontal && this.items.length <= this.maxNumber
+      'displayFlex': this.horizontal && this.checkboxes.length <= this.maxNumber
     };
 
     return x`

package/components/checkbox/src/auro-checkbox-group.js

@@ -212,7 +212,7 @@ export class AuroCheckboxGroup extends LitElement {
   handlePreselectedItems() {
     let preSelectedValues = false;
 
-    this.items.forEach((item) => {
+    this.checkboxes.forEach((item) => {
       if (item.hasAttribute('checked') && this.value === undefined) {
         preSelectedValues = true;
       }
@@ -223,7 +223,7 @@ export class AuroCheckboxGroup extends LitElement {
         this.value = [];
       }
 
-      this.items.forEach((item) => {
+      this.checkboxes.forEach((item) => {
         this.handleValueUpdate(item.getAttribute('value'), Boolean(item.hasAttribute('checked')));
       });
     }
@@ -238,13 +238,25 @@ export class AuroCheckboxGroup extends LitElement {
     const groupTagName = this.tagName.toLowerCase();
     const checkboxTagName = groupTagName.substring(0, groupTagName.indexOf('-group'));
 
-    this.items = Array.from(this.querySelectorAll(checkboxTagName));
+    this.checkboxes = Array.from(this.querySelectorAll(checkboxTagName));
 
     this.handlePreselectedItems();
 
     this.validation.validate(this);
   }
 
+  /**
+   * Resets component to initial state.
+   * @returns {void}
+   */
+  reset() {
+    this.checkboxes.forEach((checkbox) => {
+      checkbox.reset();
+    });
+
+    this.validation.reset(this);
+  }
+
   /**
    * LitElement lifecycle method. Called after the DOM has been updated.
    * @param {Map<string, any>} changedProperties - Keys are the names of changed properties, values are the corresponding previous values.
@@ -252,7 +264,7 @@ export class AuroCheckboxGroup extends LitElement {
    */
   updated(changedProperties) {
     if (changedProperties.has('disabled')) {
-      this.items.forEach((el) => {
+      this.checkboxes.forEach((el) => {
         if (this.disabled) {
           el.setAttribute('disabled', true);
         } else {
@@ -262,7 +274,7 @@ export class AuroCheckboxGroup extends LitElement {
     }
 
     if (changedProperties.has('validity')) {
-      this.items.forEach((el) => {
+      this.checkboxes.forEach((el) => {
         if (this.validity && this.validity !== 'valid') {
           el.setAttribute('error', true);
         } else {
@@ -292,7 +304,7 @@ export class AuroCheckboxGroup extends LitElement {
 
   render() {
     const groupClasses = {
-      'displayFlex': this.horizontal && this.items.length <= this.maxNumber
+      'displayFlex': this.horizontal && this.checkboxes.length <= this.maxNumber
     };
 
     return html`

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

@@ -130,6 +130,15 @@ export class AuroCheckbox extends LitElement {
     return this.svg;
   }
 
+  /**
+   * Resets component to initial state.
+   * @returns {void}
+   */
+  reset() {
+    this.checked = false;
+    this.error = false;
+  }
+
   firstUpdated() {
     // Add the tag name as an attribute if it is different than the component name
     this.runtimeUtils.handleComponentTagRename(this, 'auro-checkbox');

package/components/combobox/.turbo/turbo-build.log

@@ -64,13 +64,13 @@ More info and automated migrator: https://sass-lang.com/d/import
 
 
 ./src/index.js → dist...
-created dist in 859ms
+created dist in 915ms
 
 ./demo/index.js → ./demo/...
-created ./demo/ in 670ms
+created ./demo/ in 682ms
 
 ./demo/api.js → ./demo/...
-created ./demo/ in 651ms
+created ./demo/ in 502ms
 
 > @auro-formkit/auro-combobox@2.1.4 build:docs
 > wca analyze 'scripts/wca/*.js' --outFiles docs/api.md; node ../../packages/build-tools/src/docProcessor.mjs --component combobox
@@ -130,6 +130,7 @@ Retrieving latest "/home/runner/work/auro-formkit/auro-formkit/components/combob
   ⁕ FILE:src=./../apiExamples/value.html 
   ⁕ FILE:src=./../apiExamples/typeMonthDayYear.html 
   ⁕ FILE:src=./../apiExamples/focus.html 
+  ⁕ FILE:src=./../apiExamples/resetState.html 
   ⁕ FILE:src=./../apiExamples/helpText.html 
   ⁕ FILE:src=./../apiExamples/loading.html 
   ⁕ FILE:src=./../apiExamples/inDialog.html 
@@ -147,6 +148,8 @@ Retrieving latest "/home/runner/work/auro-formkit/auro-formkit/components/combob
   ⁕ CODE:src=./../apiExamples/typeMonthDayYear.html 
   ⁕ CODE:src=./../apiExamples/focus.js 
   ⁕ CODE:src=./../apiExamples/focus.html 
+  ⁕ CODE:src=./../apiExamples/resetState.html 
+  ⁕ CODE:src=./../apiExamples/resetState.js 
   ⁕ CODE:src=./../apiExamples/helpText.html 
   ⁕ CODE:src=./../apiExamples/loading.js 
   ⁕ CODE:src=./../apiExamples/loading.html 

package/components/combobox/demo/api.js

@@ -3,8 +3,9 @@
 import { dynamicMenuExample } from '../apiExamples/dynamicMenu';
 import { valueExample } from '../apiExamples/value';
 import { focusExample } from '../apiExamples/focus';
-import { inDialogExample } from '../apiExamples/inDialog.js';
-import { auroMenuLoadingExample } from '../apiExamples/loading.js';
+import { inDialogExample } from '../apiExamples/inDialog';
+import { resetStateExample } from '../apiExamples/resetState';
+import { auroMenuLoadingExample } from '../apiExamples/loading';
 
 
 import { AuroCombobox } from '../src/auro-combobox.js';
@@ -21,6 +22,7 @@ export function initExamples(initCount) {
     valueExample();
     focusExample();
     inDialogExample();
+    resetStateExample();
     auroMenuLoadingExample();
   } catch (err) {
     if (initCount <= 20) {