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

package/components/checkbox/demo/api.md

@@ -20,6 +20,12 @@ The auro-checkbox-group element is a wrapper for auro-checkbox element.
 | [validity](#validity)                      | `validity`                      | `String`  | "undefined" | Specifies the `validityState` this element is in. |
 | [value](#value)                         | `value`                         | `array`   | "undefined" |                                                  |
 
+## Methods
+
+| Method  | Type       | Description                        |
+|---------|------------|------------------------------------|
+| [reset](#reset) | `(): void` | Resets component to initial state. |
+
 ## Events
 
 | Event                       | Type               | Description                                      |
@@ -48,14 +54,15 @@ Custom element for the purpose of allowing users to select one or more options o
 | [error](#error)    | `error`    | `Boolean` | false   | If set to true, sets an error state on the checkbox. |
 | [id](#id)       | `id`       | `String`  |         | Sets the individual `id` per element.            |
 | [name](#name)     | `name`     | `String`  |         | Accepts any string, `DOMString` representing the value of the input. |
-| [value](#value)    | `value`    | `String`  |         | Sets the element's input value.                  |
+| [value](#value)    | `value`    | `String`  |         | Sets the element's input value. Must be unique within an auro-checkbox-group element. |
 
 ## Methods
 
-| Method         | Type                 |
-|----------------|----------------------|
-| [handleChange](#handleChange) | `(event: any): void` |
-| [handleInput](#handleInput)  | `(event: any): void` |
+| Method         | Type                 | Description                        |
+|----------------|----------------------|------------------------------------|
+| [handleChange](#handleChange) | `(event: any): void` |                                    |
+| [handleInput](#handleInput)  | `(event: any): void` |                                    |
+| [reset](#reset)        | `(): void`           | Resets component to initial state. |
 
 ## Events
 
@@ -83,10 +90,10 @@ Custom element for the purpose of allowing users to select one or more options o
   <!-- The below content is automatically added from ./../apiExamples/basic.html -->
   <auro-checkbox-group>
     <span slot="legend">Form label goes here</span>
-    <auro-checkbox value="checkbox option" name="example1" id="checkbox-basic1">Checkbox option</auro-checkbox>
-    <auro-checkbox value="checkbox option" name="example2" id="checkbox-basic2" checked>Checkbox option</auro-checkbox>
-    <auro-checkbox value="checkbox option" name="example3" id="checkbox-basic3">Checkbox option</auro-checkbox>
-    <auro-checkbox value="checkbox option" name="example4" id="checkbox-basic4">Checkbox option</auro-checkbox>
+    <auro-checkbox value="value1" name="example1" id="checkbox-basic1">Checkbox option</auro-checkbox>
+    <auro-checkbox value="value2" name="example2" id="checkbox-basic2" checked>Checkbox option</auro-checkbox>
+    <auro-checkbox value="value3" name="example3" id="checkbox-basic3">Checkbox option</auro-checkbox>
+    <auro-checkbox value="value4" name="example4" id="checkbox-basic4">Checkbox option</auro-checkbox>
   </auro-checkbox-group>
   <!-- AURO-GENERATED-CONTENT:END -->
 </div>
@@ -98,10 +105,10 @@ Custom element for the purpose of allowing users to select one or more options o
 ```html
 <auro-checkbox-group>
   <span slot="legend">Form label goes here</span>
-  <auro-checkbox value="checkbox option" name="example1" id="checkbox-basic1">Checkbox option</auro-checkbox>
-  <auro-checkbox value="checkbox option" name="example2" id="checkbox-basic2" checked>Checkbox option</auro-checkbox>
-  <auro-checkbox value="checkbox option" name="example3" id="checkbox-basic3">Checkbox option</auro-checkbox>
-  <auro-checkbox value="checkbox option" name="example4" id="checkbox-basic4">Checkbox option</auro-checkbox>
+  <auro-checkbox value="value1" name="example1" id="checkbox-basic1">Checkbox option</auro-checkbox>
+  <auro-checkbox value="value2" name="example2" id="checkbox-basic2" checked>Checkbox option</auro-checkbox>
+  <auro-checkbox value="value3" name="example3" id="checkbox-basic3">Checkbox option</auro-checkbox>
+  <auro-checkbox value="value4" name="example4" id="checkbox-basic4">Checkbox option</auro-checkbox>
 </auro-checkbox-group>
 ```
 <!-- AURO-GENERATED-CONTENT:END -->
@@ -120,10 +127,10 @@ The `disabled` attribute used to disable the entire `<auro-checkbox-group>`.
   <!-- The below content is automatically added from ./../apiExamples/disabledGroup.html -->
   <auro-checkbox-group disabled>
     <span slot="legend">Form label goes here</span>
-    <auro-checkbox value="disabled checkbox option" name="example1" id="checkbox-disabledGroup1">Disabled checkbox option</auro-checkbox>
-    <auro-checkbox value="disabled checkbox option" name="example2" id="checkbox-disabledGroup2" checked>Disabled checkbox option</auro-checkbox>
-    <auro-checkbox value="disabled checkbox option" name="example3" id="checkbox-disabledGroup3">Disabled checkbox option</auro-checkbox>
-    <auro-checkbox value="disabled checkbox option" name="example4" id="checkbox-disabledGroup4">Disabled checkbox option</auro-checkbox>
+    <auro-checkbox value="disabled-value1" name="example1" id="checkbox-disabledGroup1">Disabled checkbox option</auro-checkbox>
+    <auro-checkbox value="disabled-value2" name="example2" id="checkbox-disabledGroup2" checked>Disabled checkbox option</auro-checkbox>
+    <auro-checkbox value="disabled-value3" name="example3" id="checkbox-disabledGroup3">Disabled checkbox option</auro-checkbox>
+    <auro-checkbox value="disabled-value4" name="example4" id="checkbox-disabledGroup4">Disabled checkbox option</auro-checkbox>
   </auro-checkbox-group>
   <!-- AURO-GENERATED-CONTENT:END -->
 </div>
@@ -135,10 +142,10 @@ The `disabled` attribute used to disable the entire `<auro-checkbox-group>`.
 ```html
 <auro-checkbox-group disabled>
   <span slot="legend">Form label goes here</span>
-  <auro-checkbox value="disabled checkbox option" name="example1" id="checkbox-disabledGroup1">Disabled checkbox option</auro-checkbox>
-  <auro-checkbox value="disabled checkbox option" name="example2" id="checkbox-disabledGroup2" checked>Disabled checkbox option</auro-checkbox>
-  <auro-checkbox value="disabled checkbox option" name="example3" id="checkbox-disabledGroup3">Disabled checkbox option</auro-checkbox>
-  <auro-checkbox value="disabled checkbox option" name="example4" id="checkbox-disabledGroup4">Disabled checkbox option</auro-checkbox>
+  <auro-checkbox value="disabled-value1" name="example1" id="checkbox-disabledGroup1">Disabled checkbox option</auro-checkbox>
+  <auro-checkbox value="disabled-value2" name="example2" id="checkbox-disabledGroup2" checked>Disabled checkbox option</auro-checkbox>
+  <auro-checkbox value="disabled-value3" name="example3" id="checkbox-disabledGroup3">Disabled checkbox option</auro-checkbox>
+  <auro-checkbox value="disabled-value4" name="example4" id="checkbox-disabledGroup4">Disabled checkbox option</auro-checkbox>
 </auro-checkbox-group>
 ```
 <!-- AURO-GENERATED-CONTENT:END -->
@@ -153,10 +160,10 @@ The `disabled` attribute used to disable a single `<auro-checkbox>` element.
   <!-- The below content is automatically added from ./../apiExamples/disabled.html -->
   <auro-checkbox-group>
     <span slot="legend">Form label goes here</span>
-    <auro-checkbox value="disabled checkbox option" name="example1" id="checkbox-disabled1">Checkbox option</auro-checkbox>
-    <auro-checkbox value="disabled checkbox option" name="example2" id="checkbox-disabled2" checked disabled>Disabled checkbox option</auro-checkbox>
-    <auro-checkbox value="disabled checkbox option" name="example3" id="checkbox-disabled3" disabled>Disabled checkbox option</auro-checkbox>
-    <auro-checkbox value="disabled checkbox option" name="example4" id="checkbox-disabled4" checked>Checkbox option</auro-checkbox>
+    <auro-checkbox value="disabled-value1" name="example1" id="checkbox-disabled1">Checkbox option</auro-checkbox>
+    <auro-checkbox value="disabled-value2" name="example2" id="checkbox-disabled2" checked disabled>Disabled checkbox option</auro-checkbox>
+    <auro-checkbox value="disabled-value3" name="example3" id="checkbox-disabled3" disabled>Disabled checkbox option</auro-checkbox>
+    <auro-checkbox value="disabled-value4" name="example4" id="checkbox-disabled4" checked>Checkbox option</auro-checkbox>
   </auro-checkbox-group>
   <!-- AURO-GENERATED-CONTENT:END -->
 </div>
@@ -168,10 +175,10 @@ The `disabled` attribute used to disable a single `<auro-checkbox>` element.
 ```html
 <auro-checkbox-group>
   <span slot="legend">Form label goes here</span>
-  <auro-checkbox value="disabled checkbox option" name="example1" id="checkbox-disabled1">Checkbox option</auro-checkbox>
-  <auro-checkbox value="disabled checkbox option" name="example2" id="checkbox-disabled2" checked disabled>Disabled checkbox option</auro-checkbox>
-  <auro-checkbox value="disabled checkbox option" name="example3" id="checkbox-disabled3" disabled>Disabled checkbox option</auro-checkbox>
-  <auro-checkbox value="disabled checkbox option" name="example4" id="checkbox-disabled4" checked>Checkbox option</auro-checkbox>
+  <auro-checkbox value="disabled-value1" name="example1" id="checkbox-disabled1">Checkbox option</auro-checkbox>
+  <auro-checkbox value="disabled-value2" name="example2" id="checkbox-disabled2" checked disabled>Disabled checkbox option</auro-checkbox>
+  <auro-checkbox value="disabled-value3" name="example3" id="checkbox-disabled3" disabled>Disabled checkbox option</auro-checkbox>
+  <auro-checkbox value="disabled-value4" name="example4" id="checkbox-disabled4" checked>Checkbox option</auro-checkbox>
 </auro-checkbox-group>
 ```
 <!-- AURO-GENERATED-CONTENT:END -->
@@ -192,10 +199,10 @@ When present, the `required` attribute specifies that at least one or more `<aur
   <!-- The below content is automatically added from ./../apiExamples/required.html -->
   <auro-checkbox-group required setCustomValidityValueMissing="Please select an option">
     <span slot="legend">Form label goes here</span>
-    <auro-checkbox value="checked option" name="example1" id="checkbox-required1">Checkbox option</auro-checkbox>
-    <auro-checkbox value="checkbox Option" name="example2" id="checkbox-required2">Checkbox option</auro-checkbox>
-    <auro-checkbox value="checkbox Option" name="example3" id="checkbox-required3">Checkbox option</auro-checkbox>
-    <auro-checkbox value="checkbox Option" name="example4" id="checkbox-required4">Checkbox option</auro-checkbox>
+    <auro-checkbox value="value1" name="example1" id="checkbox-required1">Checkbox option</auro-checkbox>
+    <auro-checkbox value="value2" name="example2" id="checkbox-required2">Checkbox option</auro-checkbox>
+    <auro-checkbox value="value3" name="example3" id="checkbox-required3">Checkbox option</auro-checkbox>
+    <auro-checkbox value="value4" name="example4" id="checkbox-required4">Checkbox option</auro-checkbox>
   </auro-checkbox-group>
   <!-- AURO-GENERATED-CONTENT:END -->
 </div>
@@ -207,10 +214,10 @@ When present, the `required` attribute specifies that at least one or more `<aur
 ```html
 <auro-checkbox-group required setCustomValidityValueMissing="Please select an option">
   <span slot="legend">Form label goes here</span>
-  <auro-checkbox value="checked option" name="example1" id="checkbox-required1">Checkbox option</auro-checkbox>
-  <auro-checkbox value="checkbox Option" name="example2" id="checkbox-required2">Checkbox option</auro-checkbox>
-  <auro-checkbox value="checkbox Option" name="example3" id="checkbox-required3">Checkbox option</auro-checkbox>
-  <auro-checkbox value="checkbox Option" name="example4" id="checkbox-required4">Checkbox option</auro-checkbox>
+  <auro-checkbox value="value1" name="example1" id="checkbox-required1">Checkbox option</auro-checkbox>
+  <auro-checkbox value="value2" name="example2" id="checkbox-required2">Checkbox option</auro-checkbox>
+  <auro-checkbox value="value3" name="example3" id="checkbox-required3">Checkbox option</auro-checkbox>
+  <auro-checkbox value="value4" name="example4" id="checkbox-required4">Checkbox option</auro-checkbox>
 </auro-checkbox-group>
 ```
 <!-- AURO-GENERATED-CONTENT:END -->
@@ -225,10 +232,10 @@ The `error` attribute used to set error state on the entire `<auro-checkbox-grou
   <!-- The below content is automatically added from ./../apiExamples/errorGroup.html -->
   <auro-checkbox-group error="custom error">
     <span slot="legend">Form label goes here</span>
-    <auro-checkbox value="error checkbox option" name="example1" id="checkbox-errorGroup1">Error checkbox option</auro-checkbox>
-    <auro-checkbox value="error checkbox option" name="example2" id="checkbox-errorGroup2">Error checkbox option</auro-checkbox>
-    <auro-checkbox value="error checkbox option" name="example3" id="checkbox-errorGroup3">Error checkbox option</auro-checkbox>
-    <auro-checkbox value="error checkbox option" name="example4" id="checkbox-errorGroup4" checked>Error checkbox option</auro-checkbox>
+    <auro-checkbox value="error-value1" name="example1" id="checkbox-errorGroup1">Error checkbox option</auro-checkbox>
+    <auro-checkbox value="error-value2" name="example2" id="checkbox-errorGroup2">Error checkbox option</auro-checkbox>
+    <auro-checkbox value="error-value3" name="example3" id="checkbox-errorGroup3">Error checkbox option</auro-checkbox>
+    <auro-checkbox value="error-value4" name="example4" id="checkbox-errorGroup4" checked>Error checkbox option</auro-checkbox>
   </auro-checkbox-group>
   <!-- AURO-GENERATED-CONTENT:END -->
 </div>
@@ -240,13 +247,65 @@ The `error` attribute used to set error state on the entire `<auro-checkbox-grou
 ```html
 <auro-checkbox-group error="custom error">
   <span slot="legend">Form label goes here</span>
-  <auro-checkbox value="error checkbox option" name="example1" id="checkbox-errorGroup1">Error checkbox option</auro-checkbox>
-  <auro-checkbox value="error checkbox option" name="example2" id="checkbox-errorGroup2">Error checkbox option</auro-checkbox>
-  <auro-checkbox value="error checkbox option" name="example3" id="checkbox-errorGroup3">Error checkbox option</auro-checkbox>
-  <auro-checkbox value="error checkbox option" name="example4" id="checkbox-errorGroup4" checked>Error checkbox option</auro-checkbox>
+  <auro-checkbox value="error-value1" name="example1" id="checkbox-errorGroup1">Error checkbox option</auro-checkbox>
+  <auro-checkbox value="error-value2" name="example2" id="checkbox-errorGroup2">Error checkbox option</auro-checkbox>
+  <auro-checkbox value="error-value3" name="example3" id="checkbox-errorGroup3">Error checkbox option</auro-checkbox>
+  <auro-checkbox value="error-value4" name="example4" id="checkbox-errorGroup4" checked>Error checkbox option</auro-checkbox>
+</auro-checkbox-group>
+```
+<!-- AURO-GENERATED-CONTENT:END -->
+</auro-accordion>
+
+### Functional Examples
+
+#### Reset State
+
+Use the `reset()` method to reset the `<auro-checkbox-group>`'s `value` and `validity` state. Doing so will preserve all other attributes and properties.
+
+<div class="exampleWrapper">
+  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/resetState.html) -->
+  <!-- The below content is automatically added from ./../apiExamples/resetState.html -->
+  <auro-button id="resetStateBtn">Reset</auro-button>
+  <br/><br/>
+  <auro-checkbox-group id="resetStateExample" required setCustomValidityValueMissing="Please select an option">
+    <span slot="legend">Form label goes here</span>
+    <auro-checkbox value="value1" name="example1" id="checkbox-basic1">Checkbox option</auro-checkbox>
+    <auro-checkbox value="value2" name="example2" id="checkbox-basic2">Checkbox option</auro-checkbox>
+    <auro-checkbox value="value3" name="example3" id="checkbox-basic3">Checkbox option</auro-checkbox>
+    <auro-checkbox value="value4" name="example4" id="checkbox-basic4">Checkbox option</auro-checkbox>
+  </auro-checkbox-group>
+  <!-- AURO-GENERATED-CONTENT:END -->
+</div>
+<auro-accordion alignRight>
+  <span slot="trigger">See code</span>
+<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/resetState.html) -->
+<!-- The below code snippet is automatically added from ./../apiExamples/resetState.html -->
+
+```html
+<auro-button id="resetStateBtn">Reset</auro-button>
+<br/><br/>
+<auro-checkbox-group id="resetStateExample" required setCustomValidityValueMissing="Please select an option">
+  <span slot="legend">Form label goes here</span>
+  <auro-checkbox value="value1" name="example1" id="checkbox-basic1">Checkbox option</auro-checkbox>
+  <auro-checkbox value="value2" name="example2" id="checkbox-basic2">Checkbox option</auro-checkbox>
+  <auro-checkbox value="value3" name="example3" id="checkbox-basic3">Checkbox option</auro-checkbox>
+  <auro-checkbox value="value4" name="example4" id="checkbox-basic4">Checkbox option</auro-checkbox>
 </auro-checkbox-group>
 ```
 <!-- AURO-GENERATED-CONTENT:END -->
+<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/resetState.js) -->
+<!-- The below code snippet is automatically added from ./../apiExamples/resetState.js -->
+
+```js
+export function resetStateExample() {
+  const elem = document.querySelector('#resetStateExample');
+
+  document.querySelector('#resetStateBtn').addEventListener('click', () => {
+    elem.reset();
+  });
+}
+```
+<!-- AURO-GENERATED-CONTENT:END -->
 </auro-accordion>
 
 ### Theme Support

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
@@ -133,7 +141,7 @@ class AuroLibraryRuntimeUtils {
  * @attr {Boolean} error - If set to true, sets an error state on the checkbox.
  * @attr {String} id - Sets the individual `id` per element.
  * @attr {String} name - Accepts any string, `DOMString` representing the value of the input.
- * @attr {String} value - Sets the element's input value.
+ * @attr {String} value - Sets the element's input value. Must be unique within an auro-checkbox-group element.
  * @csspart checkbox - apply css to a specific checkbox.
  * @csspart checkbox-input - apply css to a specific checkbox's input.
  * @csspart checkbox-label - apply css to a specific checkbox's label.
@@ -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 };