@aurodesignsystem/auro-formkit 3.4.1 → 3.5.0-rc-627.1.1

package/components/combobox/dist/index.js

@@ -9441,6 +9441,9 @@ class AuroFormValidation {
  * @attr {Boolean} bordered - Applies bordered UI variant.
  * @attr {Boolean} borderless - Applies borderless UI variant.
  *
+ * @prop {string} id - The id global attribute defines an identifier (ID) which must be unique in the whole document.
+ * @attr id
+ *
  * @slot helptext - Sets the help text displayed below the input.
  * @slot label - Sets the label text for the input.
  *
@@ -9631,13 +9634,6 @@ class BaseInput extends LitElement {
         reflect: true
       },
 
-      /**
-       * Sets the unique ID of the element.
-       */
-      id: {
-        type: String
-      },
-
       /** Exposes inputmode attribute for input.  */
       inputmode: {
         type: String,
@@ -9858,6 +9854,16 @@ class BaseInput extends LitElement {
         type: Boolean,
         reflect: true,
         attribute: false
+      },
+
+      /**
+       * @private
+       * id for input node
+       */
+      inputId: {
+        type: String,
+        reflect: false,
+        attribute: false
       }
     };
   }
@@ -9889,6 +9895,7 @@ class BaseInput extends LitElement {
     if (this.tagName.toLowerCase() !== 'auro-input') {
       this.setAttribute('auro-input', true);
     }
+    this.inputId = this.id ? `${this.id}-input` : window.crypto.randomUUID();
 
     this.inputElement = this.renderRoot.querySelector('input');
     this.labelElement = this.shadowRoot.querySelector('label');
@@ -11554,7 +11561,7 @@ class AuroInput extends BaseInput {
             : undefined
             }
           </div>
-          <label for=${this.id} class="${classMap(labelClasses)}" part="label">
+          <label for=${this.inputId} class="${classMap(labelClasses)}" part="label">
             <slot name="label">
               ${this.label}
             </slot>
@@ -11564,7 +11571,7 @@ class AuroInput extends BaseInput {
             @input="${this.handleInput}"
             @focusin="${this.handleFocusin}"
             @blur="${this.handleBlur}"
-            id="${this.id}"
+            id="${this.inputId}"
             name="${ifDefined(this.name)}"
             type="${this.type === 'password' && this.showPassword ? 'text' : this.getInputType(this.type)}"
             pattern="${ifDefined(this.definePattern())}"
@@ -11632,7 +11639,7 @@ class AuroInput extends BaseInput {
                   variant="flat"
                   ?onDark="${this.onDark}"
                   class="notificationBtn clearBtn"
-                  aria-label="${i18n(this.lang, 'clearInput')}"
+                  arialabel="${i18n(this.lang, 'clearInput')}"
                   @click="${this.handleClickClear}">
                   <${this.iconTag}
                     customColor
@@ -12757,6 +12764,7 @@ class AuroCombobox extends LitElement {
 
       /**
        * Value selected for the dropdown menu.
+       * @type {Array|String<Array>}
        */
       value: {
         converter: arrayConverter,
@@ -13138,6 +13146,7 @@ class AuroCombobox extends LitElement {
       }
     });
 
+    // Handle validation messages from auroFormElement-validated event
     this.input.addEventListener('auroFormElement-validated', (evt) => {
       this.errorMessage = evt.detail.message;
     });

package/components/combobox/dist/registered.js

@@ -9441,6 +9441,9 @@ class AuroFormValidation {
  * @attr {Boolean} bordered - Applies bordered UI variant.
  * @attr {Boolean} borderless - Applies borderless UI variant.
  *
+ * @prop {string} id - The id global attribute defines an identifier (ID) which must be unique in the whole document.
+ * @attr id
+ *
  * @slot helptext - Sets the help text displayed below the input.
  * @slot label - Sets the label text for the input.
  *
@@ -9631,13 +9634,6 @@ class BaseInput extends LitElement {
         reflect: true
       },
 
-      /**
-       * Sets the unique ID of the element.
-       */
-      id: {
-        type: String
-      },
-
       /** Exposes inputmode attribute for input.  */
       inputmode: {
         type: String,
@@ -9858,6 +9854,16 @@ class BaseInput extends LitElement {
         type: Boolean,
         reflect: true,
         attribute: false
+      },
+
+      /**
+       * @private
+       * id for input node
+       */
+      inputId: {
+        type: String,
+        reflect: false,
+        attribute: false
       }
     };
   }
@@ -9889,6 +9895,7 @@ class BaseInput extends LitElement {
     if (this.tagName.toLowerCase() !== 'auro-input') {
       this.setAttribute('auro-input', true);
     }
+    this.inputId = this.id ? `${this.id}-input` : window.crypto.randomUUID();
 
     this.inputElement = this.renderRoot.querySelector('input');
     this.labelElement = this.shadowRoot.querySelector('label');
@@ -11554,7 +11561,7 @@ class AuroInput extends BaseInput {
             : undefined
             }
           </div>
-          <label for=${this.id} class="${classMap(labelClasses)}" part="label">
+          <label for=${this.inputId} class="${classMap(labelClasses)}" part="label">
             <slot name="label">
               ${this.label}
             </slot>
@@ -11564,7 +11571,7 @@ class AuroInput extends BaseInput {
             @input="${this.handleInput}"
             @focusin="${this.handleFocusin}"
             @blur="${this.handleBlur}"
-            id="${this.id}"
+            id="${this.inputId}"
             name="${ifDefined(this.name)}"
             type="${this.type === 'password' && this.showPassword ? 'text' : this.getInputType(this.type)}"
             pattern="${ifDefined(this.definePattern())}"
@@ -11632,7 +11639,7 @@ class AuroInput extends BaseInput {
                   variant="flat"
                   ?onDark="${this.onDark}"
                   class="notificationBtn clearBtn"
-                  aria-label="${i18n(this.lang, 'clearInput')}"
+                  arialabel="${i18n(this.lang, 'clearInput')}"
                   @click="${this.handleClickClear}">
                   <${this.iconTag}
                     customColor
@@ -12757,6 +12764,7 @@ class AuroCombobox extends LitElement {
 
       /**
        * Value selected for the dropdown menu.
+       * @type {Array|String<Array>}
        */
       value: {
         converter: arrayConverter,
@@ -13138,6 +13146,7 @@ class AuroCombobox extends LitElement {
       }
     });
 
+    // Handle validation messages from auroFormElement-validated event
     this.input.addEventListener('auroFormElement-validated', (evt) => {
       this.errorMessage = evt.detail.message;
     });

package/components/counter/README.md

@@ -110,7 +110,7 @@ The use of any Auro custom element has a dependency on the [Auro Design Tokens](
 In cases where the project is not able to process JS assets, there are pre-processed assets available for use. Legacy browsers such as IE11 are no longer supported.
 
 ```html
-<script type="module" src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-formkit@3.4.0/auro-counter/+esm"></script>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-formkit@0.0.0/auro-counter/+esm"></script>
 ```
 <!-- AURO-GENERATED-CONTENT:END -->
 

package/components/counter/demo/readme.md

@@ -110,7 +110,7 @@ The use of any Auro custom element has a dependency on the [Auro Design Tokens](
 In cases where the project is not able to process JS assets, there are pre-processed assets available for use. Legacy browsers such as IE11 are no longer supported.
 
 ```html
-<script type="module" src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-formkit@3.4.0/auro-counter/+esm"></script>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-formkit@0.0.0/auro-counter/+esm"></script>
 ```
 <!-- AURO-GENERATED-CONTENT:END -->
 

package/components/datepicker/README.md

@@ -104,7 +104,7 @@ The use of any Auro custom element has a dependency on the [Auro Design Tokens](
 In cases where the project is not able to process JS assets, there are pre-processed assets available for use. Legacy browsers such as IE11 are no longer supported.
 
 ```html
-<script type="module" src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-formkit@3.4.0/auro-datepicker/+esm"></script>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-formkit@0.0.0/auro-datepicker/+esm"></script>
 ```
 <!-- AURO-GENERATED-CONTENT:END -->
 

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

@@ -21135,6 +21135,9 @@ class AuroFormValidation {
  * @attr {Boolean} bordered - Applies bordered UI variant.
  * @attr {Boolean} borderless - Applies borderless UI variant.
  *
+ * @prop {string} id - The id global attribute defines an identifier (ID) which must be unique in the whole document.
+ * @attr id
+ *
  * @slot helptext - Sets the help text displayed below the input.
  * @slot label - Sets the label text for the input.
  *
@@ -21325,13 +21328,6 @@ class BaseInput extends i$2 {
         reflect: true
       },
 
-      /**
-       * Sets the unique ID of the element.
-       */
-      id: {
-        type: String
-      },
-
       /** Exposes inputmode attribute for input.  */
       inputmode: {
         type: String,
@@ -21552,6 +21548,16 @@ class BaseInput extends i$2 {
         type: Boolean,
         reflect: true,
         attribute: false
+      },
+
+      /**
+       * @private
+       * id for input node
+       */
+      inputId: {
+        type: String,
+        reflect: false,
+        attribute: false
       }
     };
   }
@@ -21583,6 +21589,7 @@ class BaseInput extends i$2 {
     if (this.tagName.toLowerCase() !== 'auro-input') {
       this.setAttribute('auro-input', true);
     }
+    this.inputId = this.id ? `${this.id}-input` : window.crypto.randomUUID();
 
     this.inputElement = this.renderRoot.querySelector('input');
     this.labelElement = this.shadowRoot.querySelector('label');
@@ -23248,7 +23255,7 @@ class AuroInput extends BaseInput {
             : undefined
             }
           </div>
-          <label for=${this.id} class="${e(labelClasses)}" part="label">
+          <label for=${this.inputId} class="${e(labelClasses)}" part="label">
             <slot name="label">
               ${this.label}
             </slot>
@@ -23258,7 +23265,7 @@ class AuroInput extends BaseInput {
             @input="${this.handleInput}"
             @focusin="${this.handleFocusin}"
             @blur="${this.handleBlur}"
-            id="${this.id}"
+            id="${this.inputId}"
             name="${o(this.name)}"
             type="${this.type === 'password' && this.showPassword ? 'text' : this.getInputType(this.type)}"
             pattern="${o(this.definePattern())}"
@@ -23326,7 +23333,7 @@ class AuroInput extends BaseInput {
                   variant="flat"
                   ?onDark="${this.onDark}"
                   class="notificationBtn clearBtn"
-                  aria-label="${i18n(this.lang, 'clearInput')}"
+                  arialabel="${i18n(this.lang, 'clearInput')}"
                   @click="${this.handleClickClear}">
                   <${this.iconTag}
                     customColor

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

@@ -20876,6 +20876,9 @@ class AuroFormValidation {
  * @attr {Boolean} bordered - Applies bordered UI variant.
  * @attr {Boolean} borderless - Applies borderless UI variant.
  *
+ * @prop {string} id - The id global attribute defines an identifier (ID) which must be unique in the whole document.
+ * @attr id
+ *
  * @slot helptext - Sets the help text displayed below the input.
  * @slot label - Sets the label text for the input.
  *
@@ -21066,13 +21069,6 @@ class BaseInput extends i$2 {
         reflect: true
       },
 
-      /**
-       * Sets the unique ID of the element.
-       */
-      id: {
-        type: String
-      },
-
       /** Exposes inputmode attribute for input.  */
       inputmode: {
         type: String,
@@ -21293,6 +21289,16 @@ class BaseInput extends i$2 {
         type: Boolean,
         reflect: true,
         attribute: false
+      },
+
+      /**
+       * @private
+       * id for input node
+       */
+      inputId: {
+        type: String,
+        reflect: false,
+        attribute: false
       }
     };
   }
@@ -21324,6 +21330,7 @@ class BaseInput extends i$2 {
     if (this.tagName.toLowerCase() !== 'auro-input') {
       this.setAttribute('auro-input', true);
     }
+    this.inputId = this.id ? `${this.id}-input` : window.crypto.randomUUID();
 
     this.inputElement = this.renderRoot.querySelector('input');
     this.labelElement = this.shadowRoot.querySelector('label');
@@ -22989,7 +22996,7 @@ class AuroInput extends BaseInput {
             : undefined
             }
           </div>
-          <label for=${this.id} class="${e(labelClasses)}" part="label">
+          <label for=${this.inputId} class="${e(labelClasses)}" part="label">
             <slot name="label">
               ${this.label}
             </slot>
@@ -22999,7 +23006,7 @@ class AuroInput extends BaseInput {
             @input="${this.handleInput}"
             @focusin="${this.handleFocusin}"
             @blur="${this.handleBlur}"
-            id="${this.id}"
+            id="${this.inputId}"
             name="${o(this.name)}"
             type="${this.type === 'password' && this.showPassword ? 'text' : this.getInputType(this.type)}"
             pattern="${o(this.definePattern())}"
@@ -23067,7 +23074,7 @@ class AuroInput extends BaseInput {
                   variant="flat"
                   ?onDark="${this.onDark}"
                   class="notificationBtn clearBtn"
-                  aria-label="${i18n(this.lang, 'clearInput')}"
+                  arialabel="${i18n(this.lang, 'clearInput')}"
                   @click="${this.handleClickClear}">
                   <${this.iconTag}
                     customColor

package/components/datepicker/demo/readme.md

@@ -104,7 +104,7 @@ The use of any Auro custom element has a dependency on the [Auro Design Tokens](
 In cases where the project is not able to process JS assets, there are pre-processed assets available for use. Legacy browsers such as IE11 are no longer supported.
 
 ```html
-<script type="module" src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-formkit@3.4.0/auro-datepicker/+esm"></script>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-formkit@0.0.0/auro-datepicker/+esm"></script>
 ```
 <!-- AURO-GENERATED-CONTENT:END -->
 

package/components/datepicker/dist/index.js

@@ -20812,6 +20812,9 @@ class AuroFormValidation {
  * @attr {Boolean} bordered - Applies bordered UI variant.
  * @attr {Boolean} borderless - Applies borderless UI variant.
  *
+ * @prop {string} id - The id global attribute defines an identifier (ID) which must be unique in the whole document.
+ * @attr id
+ *
  * @slot helptext - Sets the help text displayed below the input.
  * @slot label - Sets the label text for the input.
  *
@@ -21002,13 +21005,6 @@ class BaseInput extends LitElement {
         reflect: true
       },
 
-      /**
-       * Sets the unique ID of the element.
-       */
-      id: {
-        type: String
-      },
-
       /** Exposes inputmode attribute for input.  */
       inputmode: {
         type: String,
@@ -21229,6 +21225,16 @@ class BaseInput extends LitElement {
         type: Boolean,
         reflect: true,
         attribute: false
+      },
+
+      /**
+       * @private
+       * id for input node
+       */
+      inputId: {
+        type: String,
+        reflect: false,
+        attribute: false
       }
     };
   }
@@ -21260,6 +21266,7 @@ class BaseInput extends LitElement {
     if (this.tagName.toLowerCase() !== 'auro-input') {
       this.setAttribute('auro-input', true);
     }
+    this.inputId = this.id ? `${this.id}-input` : window.crypto.randomUUID();
 
     this.inputElement = this.renderRoot.querySelector('input');
     this.labelElement = this.shadowRoot.querySelector('label');
@@ -22925,7 +22932,7 @@ class AuroInput extends BaseInput {
             : undefined
             }
           </div>
-          <label for=${this.id} class="${classMap(labelClasses)}" part="label">
+          <label for=${this.inputId} class="${classMap(labelClasses)}" part="label">
             <slot name="label">
               ${this.label}
             </slot>
@@ -22935,7 +22942,7 @@ class AuroInput extends BaseInput {
             @input="${this.handleInput}"
             @focusin="${this.handleFocusin}"
             @blur="${this.handleBlur}"
-            id="${this.id}"
+            id="${this.inputId}"
             name="${ifDefined(this.name)}"
             type="${this.type === 'password' && this.showPassword ? 'text' : this.getInputType(this.type)}"
             pattern="${ifDefined(this.definePattern())}"
@@ -23003,7 +23010,7 @@ class AuroInput extends BaseInput {
                   variant="flat"
                   ?onDark="${this.onDark}"
                   class="notificationBtn clearBtn"
-                  aria-label="${i18n(this.lang, 'clearInput')}"
+                  arialabel="${i18n(this.lang, 'clearInput')}"
                   @click="${this.handleClickClear}">
                   <${this.iconTag}
                     customColor

package/components/datepicker/dist/registered.js

@@ -20812,6 +20812,9 @@ class AuroFormValidation {
  * @attr {Boolean} bordered - Applies bordered UI variant.
  * @attr {Boolean} borderless - Applies borderless UI variant.
  *
+ * @prop {string} id - The id global attribute defines an identifier (ID) which must be unique in the whole document.
+ * @attr id
+ *
  * @slot helptext - Sets the help text displayed below the input.
  * @slot label - Sets the label text for the input.
  *
@@ -21002,13 +21005,6 @@ class BaseInput extends LitElement {
         reflect: true
       },
 
-      /**
-       * Sets the unique ID of the element.
-       */
-      id: {
-        type: String
-      },
-
       /** Exposes inputmode attribute for input.  */
       inputmode: {
         type: String,
@@ -21229,6 +21225,16 @@ class BaseInput extends LitElement {
         type: Boolean,
         reflect: true,
         attribute: false
+      },
+
+      /**
+       * @private
+       * id for input node
+       */
+      inputId: {
+        type: String,
+        reflect: false,
+        attribute: false
       }
     };
   }
@@ -21260,6 +21266,7 @@ class BaseInput extends LitElement {
     if (this.tagName.toLowerCase() !== 'auro-input') {
       this.setAttribute('auro-input', true);
     }
+    this.inputId = this.id ? `${this.id}-input` : window.crypto.randomUUID();
 
     this.inputElement = this.renderRoot.querySelector('input');
     this.labelElement = this.shadowRoot.querySelector('label');
@@ -22925,7 +22932,7 @@ class AuroInput extends BaseInput {
             : undefined
             }
           </div>
-          <label for=${this.id} class="${classMap(labelClasses)}" part="label">
+          <label for=${this.inputId} class="${classMap(labelClasses)}" part="label">
             <slot name="label">
               ${this.label}
             </slot>
@@ -22935,7 +22942,7 @@ class AuroInput extends BaseInput {
             @input="${this.handleInput}"
             @focusin="${this.handleFocusin}"
             @blur="${this.handleBlur}"
-            id="${this.id}"
+            id="${this.inputId}"
             name="${ifDefined(this.name)}"
             type="${this.type === 'password' && this.showPassword ? 'text' : this.getInputType(this.type)}"
             pattern="${ifDefined(this.definePattern())}"
@@ -23003,7 +23010,7 @@ class AuroInput extends BaseInput {
                   variant="flat"
                   ?onDark="${this.onDark}"
                   class="notificationBtn clearBtn"
-                  aria-label="${i18n(this.lang, 'clearInput')}"
+                  arialabel="${i18n(this.lang, 'clearInput')}"
                   @click="${this.handleClickClear}">
                   <${this.iconTag}
                     customColor

package/components/dropdown/README.md

@@ -107,7 +107,7 @@ The use of any Auro custom element has a dependency on the [Auro Design Tokens](
 In cases where the project is not able to process JS assets, there are pre-processed assets available for use. Legacy browsers such as IE11 are no longer supported.
 
 ```html
-<script type="module" src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-formkit@3.4.0/auro-dropdown/+esm"></script>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-formkit@0.0.0/auro-dropdown/+esm"></script>
 ```
 <!-- AURO-GENERATED-CONTENT:END -->
 

package/components/dropdown/demo/readme.md

@@ -107,7 +107,7 @@ The use of any Auro custom element has a dependency on the [Auro Design Tokens](
 In cases where the project is not able to process JS assets, there are pre-processed assets available for use. Legacy browsers such as IE11 are no longer supported.
 
 ```html
-<script type="module" src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-formkit@3.4.0/auro-dropdown/+esm"></script>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-formkit@0.0.0/auro-dropdown/+esm"></script>
 ```
 <!-- AURO-GENERATED-CONTENT:END -->
 

package/components/form/README.md

@@ -109,7 +109,7 @@ The use of any Auro custom element has a dependency on the [Auro Design Tokens](
 In cases where the project is not able to process JS assets, there are pre-processed assets available for use. Legacy browsers such as IE11 are no longer supported.
 
 ```html
-<script type="module" src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-formkit@3.4.0/auro-form/+esm"></script>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-formkit@0.0.0/auro-form/+esm"></script>
 ```
 <!-- AURO-GENERATED-CONTENT:END -->
 

package/components/form/demo/api.md

@@ -19,9 +19,8 @@ The auro-form element provides users a way to ... (it would be great if you fill
 | [formState](#formState)                |           | `FormState`                                      | {}      |                                                  |
 | [isInitialState](#isInitialState)           | readonly  | `boolean`                                        |         | Mostly internal way to determine if a form is in the initial state. |
 | [mutationEventListener](#mutationEventListener)    |           |                                                  |         |                                                  |
-| [mutationObservers](#mutationObservers)        |           | `MutationObserver[]`                             | []      |                                                  |
 | [reset](#reset)                    |           |                                                  |         |                                                  |
-| [resetElements](#resetElements)            | readonly  | `HTMLButtonElement[]`                            |         | Getter for internal _resetElements.              |
+| [resetElements](#resetElements)            | readonly  | `HTMLButtonElement[]`                            |         | Returns a collection of elements that will reset the form |
 | [sharedInputListener](#sharedInputListener)      |           |                                                  |         |                                                  |
 | [sharedValidationListener](#sharedValidationListener) |           |                                                  |         |                                                  |
 | [submit](#submit)                   |           |                                                  |         |                                                  |
@@ -36,13 +35,10 @@ The auro-form element provides users a way to ... (it would be great if you fill
 | [initializeState](#initializeState)           | `(): void`                        | Initialize (or reinitialize) the form state.     |
 | [isButtonElement](#isButtonElement)           | `(element: HTMLElement): boolean` | Check if the tag name is a button element.<br /><br />**element**: The element to check. |
 | [isFormElement](#isFormElement)             | `(element: HTMLElement): boolean` | Check if the tag name is a form element.<br /><br />**element**: The element to check (attr or tag name). |
-| [mutationEventListener](#mutationEventListener)     | `(): void`                        | Mutation observer for form elements. Slot change does not trigger unless<br />root-level elements are added/removed. This is a workaround to ensure<br />nested form elements are also observed. |
 | [onSlotChange](#onSlotChange)              | `(event: Event): void`            | Slot change event listener. This is the main entry point for the form element.<br /><br />**event**: The slot change event. |
 | [queryAuroElements](#queryAuroElements)         | `(): NodeList`                    | Construct the query strings from elements, append them together, execute, and return the NodeList. |
 | [reset](#reset)                     | `(): void`                        | Reset fires an event called `reset` - just as you would expect from a normal form. |
 | [setDisabledStateOnButtons](#setDisabledStateOnButtons) | `(): void`                        |                                                  |
-| [sharedInputListener](#sharedInputListener)       | `(event: Event): void`            | Shared input listener for all form elements.<br /><br />**event**: The event that is fired from the form element. |
-| [sharedValidationListener](#sharedValidationListener)  | `(event: Event): void`            | Shared validation listener for all form elements.<br /><br />**event**: The event that is fired from the form element. |
 | [submit](#submit)                    | `(): void`                        | Submit fires an event called `submit` - just as you would expect from a normal form. |
 
 ## Events

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

@@ -153,7 +153,10 @@ class AuroForm extends i {
     /** @type {HTMLButtonElement[]} */
     this._resetElements = [];
 
-    /** @type {MutationObserver[]} */
+    /**
+     * @private
+     * @type {MutationObserver[]}
+     */
     this.mutationObservers = [];
 
     // Bind listeners
@@ -268,7 +271,7 @@ class AuroForm extends i {
   }
 
   /**
-   * Getter for internal _resetElements.
+   * Returns a collection of elements that will reset the form
    * @returns {HTMLButtonElement[]}
    */
   get resetElements() {
@@ -498,6 +501,7 @@ class AuroForm extends i {
 
   /**
    * Shared input listener for all form elements.
+   * @private
    * @param {Event} event - The event that is fired from the form element.
    */
   sharedInputListener(event) {
@@ -530,6 +534,7 @@ class AuroForm extends i {
 
   /**
    * Shared validation listener for all form elements.
+   * @private
    * @param {Event} event - The event that is fired from the form element.
    */
   sharedValidationListener(event) {
@@ -585,6 +590,7 @@ class AuroForm extends i {
    * root-level elements are added/removed. This is a workaround to ensure
    * nested form elements are also observed.
    *
+   * @private
    * @returns {void}
    */
   mutationEventListener() {

package/components/form/demo/index.html

@@ -41,6 +41,7 @@
           Prism.highlightAll();
         });
     </script>
+    <script type="module" data-demo-script="true" src="./registerDemoDeps.js"></script>
     <script type="module" data-demo-script="true" src="./index.min.js"></script>
 
     <!-- If additional elements are needed for the demo, add them here. -->