@aurodesignsystem/auro-formkit 2.0.0-beta.27 → 2.0.0-beta.29

package/components/dropdown/package.json

@@ -12,6 +12,7 @@
   "types": "dist/index.d.ts",
   "license": "Apache-2.0",
   "dependencies": {
+    "@aurodesignsystem/auro-helptext": "*",
     "@aurodesignsystem/auro-icon": "^6.1.2",
     "@floating-ui/dom": "^1.6.11",
     "@popperjs/core": "^2.11.8",

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

@@ -21,6 +21,7 @@ import styleCss from "./styles/style-css.js";
 import colorCss from "./styles/color-css.js";
 import tokensCss from "./styles/tokens-css.js";
 
+import '@aurodesignsystem/auro-helptext';
 import './auro-dropdownBib.js';
 
 /**
@@ -435,7 +436,7 @@ export class AuroDropdown extends LitElement {
             <div class="triggerContent">
               <slot
                 name="trigger"
-                @slotchange="${(event) => this.handleTriggerContentSlotChange(event)}"></slot>
+                @slotchange="${this.handleTriggerContentSlotChange}"></slot>
             </div>
           </div>
           ${this.chevron || this.common ? html`
@@ -452,11 +453,9 @@ export class AuroDropdown extends LitElement {
               </div>
             ` : undefined }
         </div>
-        <div
-          class="helpText"
-          part="helpText">
+        <auro-helptext part="helpText" ?error="${this.error}">
           <slot name="helpText"></slot>
-        </div>
+        </auro-helptext>
         <div class="slotContent">
           <slot @slotchange="${this.handleDefaultSlot}"></slot>
         </div>

package/components/dropdown/src/styles/color-css.js

@@ -1,2 +1,2 @@
 import { css } from 'lit';
-export default css`.label{color:var(--ds-auro-dropdown-label-text-color)}.trigger{border-color:var(--ds-auro-dropdown-trigger-border-color);background-color:var(--ds-auro-dropdown-trigger-container-color);color:var(--ds-auro-dropdown-trigger-text-color)}.trigger:focus-within,.trigger:active{--ds-auro-dropdown-trigger-border-color: var(--ds-color-border-active-default, #0074c8)}.trigger:focus-within:not(:active){--ds-auro-dropdown-trigger-border-color: var(--ds-color-border-ui-focus-default, #2c67b5);outline:1px solid var(--ds-color-border-ui-focus-default, #2c67b5)}.trigger:hover{--ds-auro-dropdown-trigger-container-color: var(--ds-color-container-ui-secondary-hover-default, rgba(0, 0, 0, 0.03))}.helpText{color:var(--ds-auro-dropdown-help-text-color)}:host([disabled]){--ds-auro-dropdown-trigger-text-color: var(--ds-color-text-ui-disabled-default, #adadad);--ds-auro-dropdown-label-text-color: var(--ds-color-text-ui-disabled-default, #adadad)}:host([common]),:host([bordered]){--ds-auro-dropdown-trigger-border-color: var(--ds-color-border-primary-default, #585e67)}:host([common]) .trigger:active,:host([common]) .trigger:focus-within,:host([bordered]) .trigger:active,:host([bordered]) .trigger:focus-within{--ds-auro-dropdown-trigger-border-color: var(--ds-color-border-ui-focus-default, #2c67b5)}:host([error]){--ds-auro-dropdown-help-text-color: var(--ds-color-text-error-default, #cc1816);--ds-auro-dropdown-trigger-border-color: var(--ds-color-border-error-default, #cc1816)}:host([error]) .trigger{outline:solid 1px var(--ds-auro-dropdown-trigger-border-color)}:host([error]) .trigger:focus-within,:host([error]) .trigger:active{--ds-auro-dropdown-trigger-border-color: var(--ds-color-border-active-default, #0074c8)}:host([error]) .trigger:active{box-shadow:none;outline:none}:host([disabled][common]),:host([disabled][bordered]){--ds-auro-dropdown-trigger-border-color: var(--ds-color-border-ui-disabled-default, #adadad)}`;
+export default css`.label{color:var(--ds-auro-dropdown-label-text-color)}.trigger{border-color:var(--ds-auro-dropdown-trigger-border-color);background-color:var(--ds-auro-dropdown-trigger-container-color);color:var(--ds-auro-dropdown-trigger-text-color)}.trigger:focus-within,.trigger:active{--ds-auro-dropdown-trigger-border-color: var(--ds-color-border-active-default, #0074c8)}.trigger:focus-within:not(:active){--ds-auro-dropdown-trigger-border-color: var(--ds-color-border-ui-focus-default, #2c67b5);outline:1px solid var(--ds-color-border-ui-focus-default, #2c67b5)}.trigger:hover{--ds-auro-dropdown-trigger-container-color: var(--ds-color-container-ui-secondary-hover-default, rgba(0, 0, 0, 0.03))}:host([disabled]){--ds-auro-dropdown-trigger-text-color: var(--ds-color-text-ui-disabled-default, #adadad);--ds-auro-dropdown-label-text-color: var(--ds-color-text-ui-disabled-default, #adadad)}:host([common]),:host([bordered]){--ds-auro-dropdown-trigger-border-color: var(--ds-color-border-primary-default, #585e67)}:host([common]) .trigger:active,:host([common]) .trigger:focus-within,:host([bordered]) .trigger:active,:host([bordered]) .trigger:focus-within{--ds-auro-dropdown-trigger-border-color: var(--ds-color-border-ui-focus-default, #2c67b5)}:host([error]){--ds-auro-dropdown-trigger-border-color: var(--ds-color-border-error-default, #cc1816)}:host([error]) .trigger{outline:solid 1px var(--ds-auro-dropdown-trigger-border-color)}:host([error]) .trigger:focus-within,:host([error]) .trigger:active{--ds-auro-dropdown-trigger-border-color: var(--ds-color-border-active-default, #0074c8)}:host([error]) .trigger:active{box-shadow:none;outline:none}:host([disabled][common]),:host([disabled][bordered]){--ds-auro-dropdown-trigger-border-color: var(--ds-color-border-ui-disabled-default, #adadad)}`;

package/components/dropdown/src/styles/color.css

@@ -19,10 +19,6 @@
   --ds-auro-dropdown-trigger-container-color: var(--ds-color-container-ui-secondary-hover-default, rgba(0, 0, 0, 0.03));
 }
 
-.helpText {
-  color: var(--ds-auro-dropdown-help-text-color);
-}
-
 :host([disabled]) {
   --ds-auro-dropdown-trigger-text-color: var(--ds-color-text-ui-disabled-default, #adadad);
   --ds-auro-dropdown-label-text-color: var(--ds-color-text-ui-disabled-default, #adadad);
@@ -39,7 +35,6 @@
 }
 
 :host([error]) {
-  --ds-auro-dropdown-help-text-color: var(--ds-color-text-error-default, #cc1816);
   --ds-auro-dropdown-trigger-border-color: var(--ds-color-border-error-default, #cc1816);
 }
 :host([error]) .trigger {

package/components/dropdown/src/styles/color.scss

@@ -33,10 +33,6 @@
   }
 }
 
-.helpText {
-  color: var(--ds-auro-dropdown-help-text-color);
-}
-
 :host([disabled]) {
   --ds-auro-dropdown-trigger-text-color: var(--ds-color-text-ui-disabled-default, #{$ds-color-text-ui-disabled-default});
   --ds-auro-dropdown-label-text-color: var(--ds-color-text-ui-disabled-default, #{$ds-color-text-ui-disabled-default});
@@ -55,7 +51,6 @@
 }
 
 :host([error]) {
-  --ds-auro-dropdown-help-text-color: var(--ds-color-text-error-default, #{$ds-color-text-error-default});
   --ds-auro-dropdown-trigger-border-color: var(--ds-color-border-error-default, #{$ds-color-border-error-default});
 
   .trigger {

package/components/dropdown/src/styles/style-css.js

@@ -1,2 +1,2 @@
 import { css } from 'lit';
-export default css`:host{position:relative;display:inline-block;max-width:100%}:host([fluid]){display:block}#bibSizer{position:absolute;z-index:-1;opacity:0;pointer-events:none}.label{font-size:var(--ds-text-body-size-xs, 0.75rem);line-height:var(--ds-text-body-size-default, 1rem);transition:font-size .3s cubic-bezier(0.215, 0.61, 0.355, 1);white-space:normal}.label[hasTrigger=false]{font-size:var(--ds-text-body-size-default, 1rem)}.trigger{position:relative;display:flex;align-items:center;border-width:1px;border-style:solid}@media(hover: hover){.trigger:hover{cursor:pointer}}.triggerContentWrapper{overflow:hidden;flex:1;text-overflow:ellipsis;white-space:nowrap}#showStateIcon{display:flex;overflow:hidden;height:100%;align-items:center;margin-left:var(--ds-size-100, 0.5rem)}#showStateIcon [auro-icon]{height:var(--ds-size-300, 1.5rem);line-height:var(--ds-size-300, 1.5rem)}#showStateIcon[data-expanded=true] [auro-icon]{transform:rotate(-180deg)}.helpText{margin-top:var(--ds-size-50, 0.25rem);font-size:var(--ds-text-body-size-xs, 0.75rem);line-height:var(--ds-text-body-size-default, 1rem)}:host([matchwidth]) #bibSizer{width:100%}:host([disabled]){pointer-events:none}:host([inset]) .trigger{padding:var(--ds-size-150, 0.75rem) var(--ds-size-200, 1rem)}:host([common]) .trigger,:host([inset][bordered]) .trigger{padding:var(--ds-size-200, 1rem) var(--ds-size-150, 0.75rem)}:host([common]) .trigger,:host([rounded]) .trigger{border-radius:var(--ds-border-radius, 0.375rem)}`;
+export default css`:host{position:relative;display:inline-block;max-width:100%}:host([fluid]){display:block}#bibSizer{position:absolute;z-index:-1;opacity:0;pointer-events:none}.label{font-size:var(--ds-text-body-size-xs, 0.75rem);line-height:var(--ds-text-body-size-default, 1rem);transition:font-size .3s cubic-bezier(0.215, 0.61, 0.355, 1);white-space:normal}.label[hasTrigger=false]{font-size:var(--ds-text-body-size-default, 1rem)}.trigger{position:relative;display:flex;align-items:center;border-width:1px;border-style:solid}@media(hover: hover){.trigger:hover{cursor:pointer}}.triggerContentWrapper{overflow:hidden;flex:1;text-overflow:ellipsis;white-space:nowrap}#showStateIcon{display:flex;overflow:hidden;height:100%;align-items:center;margin-left:var(--ds-size-100, 0.5rem)}#showStateIcon [auro-icon]{height:var(--ds-size-300, 1.5rem);line-height:var(--ds-size-300, 1.5rem)}#showStateIcon[data-expanded=true] [auro-icon]{transform:rotate(-180deg)}:host([matchwidth]) #bibSizer{width:100%}:host([disabled]){pointer-events:none}:host([inset]) .trigger{padding:var(--ds-size-150, 0.75rem) var(--ds-size-200, 1rem)}:host([common]) .trigger,:host([inset][bordered]) .trigger{padding:var(--ds-size-200, 1rem) var(--ds-size-150, 0.75rem)}:host([common]) .trigger,:host([rounded]) .trigger{border-radius:var(--ds-border-radius, 0.375rem)}`;

package/components/dropdown/src/styles/style.css

@@ -63,12 +63,6 @@
 }
 
 /* stylelint-enable selector-id-pattern */
-.helpText {
-  margin-top: var(--ds-size-50, 0.25rem);
-  font-size: var(--ds-text-body-size-xs, 0.75rem);
-  line-height: var(--ds-text-body-size-default, 1rem);
-}
-
 :host([matchwidth]) #bibSizer {
   width: 100%;
 }

package/components/dropdown/src/styles/style.scss

@@ -85,12 +85,6 @@
 }
 /* stylelint-enable selector-id-pattern */
 
-.helpText {
-  margin-top: var(--ds-size-50, $ds-size-50);
-  font-size: var(--ds-text-body-size-xs, $ds-text-body-size-xs);
-  line-height: var(--ds-text-body-size-default, $ds-text-body-size-default);
-}
-
 :host([matchwidth]) {
   #bibSizer {
     width: 100%;

package/components/dropdown/src/styles/tokens-css.js

@@ -1,2 +1,2 @@
 import { css } from 'lit';
-export default css`: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)}`;
+export default css`:host{--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)}`;

package/components/dropdown/src/styles/tokens.css

@@ -1,5 +1,4 @@
 :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;

package/components/dropdown/src/styles/tokens.scss

@@ -1,7 +1,6 @@
 @import '@aurodesignsystem/design-tokens/dist/tokens/SCSSVariables';
 
 :host {
-  --ds-auro-dropdown-help-text-color: var(--ds-color-text-secondary-default, #{$ds-color-text-secondary-default});
   --ds-auro-dropdown-label-text-color: var(--ds-color-text-secondary-default, #{$ds-color-text-secondary-default});
   --ds-auro-dropdown-popover-container-color: var(--ds-color-container-primary-default, #{$ds-color-container-primary-default});
   --ds-auro-dropdown-popover-border-color: transparent;

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

@@ -69,13 +69,13 @@ Run in verbose mode to see all warnings.
 
 
 ./src/index.js → dist...
-created dist in 156ms
+created dist in 146ms
 
 ./demo/index.js → ./demo/...
-created ./demo/ in 78ms
+created ./demo/ in 76ms
 
 ./demo/api.js → ./demo/...
-created ./demo/ in 71ms
+created ./demo/ in 66ms
 
 > @aurodesignsystem/auro-form@1.0.0 build:docs
 > wca analyze 'scripts/wca/*.js' --outFiles docs/api.md; node ../../packages/build-tools/src/docProcessor.mjs --component form

package/components/form/.turbo/turbo-bundler.log

@@ -4,10 +4,10 @@
 
 
 ./src/index.js → dist...
-created dist in 363ms
+created dist in 304ms
 
 ./demo/index.js → ./demo/...
-created ./demo/ in 376ms
+created ./demo/ in 175ms
 
 ./demo/api.js → ./demo/...
-created ./demo/ in 281ms
+created ./demo/ in 202ms

package/components/form/README.md

@@ -98,7 +98,7 @@ In cases where the project is not able to process JS assets, there are pre-proce
 <!-- The below content is automatically added from ../../docs/templates/componentBundleUseModBrowsers.md -->
 <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/design-tokens@4.12.1/dist/tokens/CSSCustomProperties.css" />
 <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/webcorestylesheets@5.1.2/dist/bundled/essentials.css" />
-<script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-formkit/auro-form@2.0.0-beta.26/dist/auro-form__bundled.js" type="module"></script>
+<script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-formkit/auro-form@2.0.0-beta.28/dist/auro-form__bundled.js" type="module"></script>
 <!-- AURO-GENERATED-CONTENT:END -->
 
 ## auro-form use cases

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

@@ -235,6 +235,22 @@ class AuroForm extends r {
     }, {});
   }
 
+  /**
+   * Getter for internal _submitElements.
+   * @returns {HTMLButtonElement[]}
+   */
+  get submitElements() {
+    return this._submitelements;
+  }
+
+  /**
+   * Getter for internal _resetElements.
+   * @returns {HTMLButtonElement[]}
+   */
+  get resetElements() {
+    return this._resetElements;
+  }
+
   /**
    * Infer validity status based on current formState.
    * @private
@@ -260,6 +276,9 @@ class AuroForm extends r {
    * @returns {"valid" | "invalid"}
    */
   get validity() {
+    // Force calculate, as sometimes validity won't reflect
+    // the latest value while in-between renders.
+    this._calculateValidity();
     return this._validity;
   }
 
@@ -327,6 +346,27 @@ class AuroForm extends r {
     ]) => tags.map((tag) => `${tag}${extraAttributes}, [${tag}]${extraAttributes}`)).join(', '));
   }
 
+  /**
+   * Store an element in state and on the _elements array.
+   * @param {HTMLElement} element - The element to add to our state.
+   * @private
+   */
+  _addElementToState(element) {
+    const targetName = element.getAttribute('name');
+    if (this.formState[targetName]) {
+      return;
+    }
+
+    this.formState[targetName] = {
+      value: element.getAttribute('value'),
+      validity: element.validity || null,
+      required: element.hasAttribute('required'),
+      // element
+    };
+
+    this._elements.push(element);
+  }
+
   /**
    * Initialize (or reinitialize) the form state.
    */
@@ -338,14 +378,7 @@ class AuroForm extends r {
 
     this.queryAuroElements().forEach((element) => {
       if (this.isFormElement(element)) {
-        this.formState[element.getAttribute('name')] = {
-          value: element.getAttribute('value'),
-          validity: element.getAttribute('validity'),
-          required: element.hasAttribute('required'),
-          // element
-        };
-
-        this._elements.push(element);
+        this._addElementToState(element);
       }
 
       if (this.isButtonElement(element) && element.getAttribute('type') === 'submit') {
@@ -369,7 +402,11 @@ class AuroForm extends r {
     this.setDisabledStateOnButtons();
   }
 
+  /**
+   * Reset fires an event called `reset` - just as you would expect from a normal form.
+   */
   reset() {
+    const previousValue = this.value;
     this._elements.forEach((element) => element.reset());
 
     this.updateComplete.then(() => {
@@ -381,16 +418,20 @@ class AuroForm extends r {
       // Wait for the above changes to run through, then disable submit/reset
       this.updateComplete.then(() => {
         this.setDisabledStateOnButtons();
+
+        this.dispatchEvent(new CustomEvent('reset', {
+          bubbles: true,
+          composed: true,
+          detail: {
+            previousValue
+          }
+        }));
       });
     });
   }
 
   /**
    * Submit fires an event called `submit` - just as you would expect from a normal form.
-   *
-   * @example ```
-   * const form = document.querySelector('auro-
-   * ```
    */
   submit() {
     // Steps required to get out of beta:
@@ -437,13 +478,16 @@ class AuroForm extends r {
         return;
       }
 
+      // Occasionally, a form element will emit their event before the form can read data about the form element.
+      if (!this.formState[targetName] && this.isFormElement(event.target)) {
+        this._addElementToState(event.target);
+      }
+
       // Check special input types and handle their edge cases
       if (this._isElementTag('auro-datepicker', event.target) && event.target.hasAttribute('range')) {
         this.formState[targetName].value = event.target.values;
-
         this.requestUpdate('formState');
       } else {
-        // "Normal" input value handling, just assign the value
         this.formState[targetName].value = event.target.value;
         this.requestUpdate('formState');
       }
@@ -455,6 +499,10 @@ class AuroForm extends r {
         return;
       }
 
+      if (!this.formState[targetName]) {
+        this._addElementToState(event.target);
+      }
+
       this.formState[targetName].validity = event.detail.validity;
       this._calculateValidity();
     });

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

@@ -235,6 +235,22 @@ class AuroForm extends r {
     }, {});
   }
 
+  /**
+   * Getter for internal _submitElements.
+   * @returns {HTMLButtonElement[]}
+   */
+  get submitElements() {
+    return this._submitelements;
+  }
+
+  /**
+   * Getter for internal _resetElements.
+   * @returns {HTMLButtonElement[]}
+   */
+  get resetElements() {
+    return this._resetElements;
+  }
+
   /**
    * Infer validity status based on current formState.
    * @private
@@ -260,6 +276,9 @@ class AuroForm extends r {
    * @returns {"valid" | "invalid"}
    */
   get validity() {
+    // Force calculate, as sometimes validity won't reflect
+    // the latest value while in-between renders.
+    this._calculateValidity();
     return this._validity;
   }
 
@@ -327,6 +346,27 @@ class AuroForm extends r {
     ]) => tags.map((tag) => `${tag}${extraAttributes}, [${tag}]${extraAttributes}`)).join(', '));
   }
 
+  /**
+   * Store an element in state and on the _elements array.
+   * @param {HTMLElement} element - The element to add to our state.
+   * @private
+   */
+  _addElementToState(element) {
+    const targetName = element.getAttribute('name');
+    if (this.formState[targetName]) {
+      return;
+    }
+
+    this.formState[targetName] = {
+      value: element.getAttribute('value'),
+      validity: element.validity || null,
+      required: element.hasAttribute('required'),
+      // element
+    };
+
+    this._elements.push(element);
+  }
+
   /**
    * Initialize (or reinitialize) the form state.
    */
@@ -338,14 +378,7 @@ class AuroForm extends r {
 
     this.queryAuroElements().forEach((element) => {
       if (this.isFormElement(element)) {
-        this.formState[element.getAttribute('name')] = {
-          value: element.getAttribute('value'),
-          validity: element.getAttribute('validity'),
-          required: element.hasAttribute('required'),
-          // element
-        };
-
-        this._elements.push(element);
+        this._addElementToState(element);
       }
 
       if (this.isButtonElement(element) && element.getAttribute('type') === 'submit') {
@@ -369,7 +402,11 @@ class AuroForm extends r {
     this.setDisabledStateOnButtons();
   }
 
+  /**
+   * Reset fires an event called `reset` - just as you would expect from a normal form.
+   */
   reset() {
+    const previousValue = this.value;
     this._elements.forEach((element) => element.reset());
 
     this.updateComplete.then(() => {
@@ -381,16 +418,20 @@ class AuroForm extends r {
       // Wait for the above changes to run through, then disable submit/reset
       this.updateComplete.then(() => {
         this.setDisabledStateOnButtons();
+
+        this.dispatchEvent(new CustomEvent('reset', {
+          bubbles: true,
+          composed: true,
+          detail: {
+            previousValue
+          }
+        }));
       });
     });
   }
 
   /**
    * Submit fires an event called `submit` - just as you would expect from a normal form.
-   *
-   * @example ```
-   * const form = document.querySelector('auro-
-   * ```
    */
   submit() {
     // Steps required to get out of beta:
@@ -437,13 +478,16 @@ class AuroForm extends r {
         return;
       }
 
+      // Occasionally, a form element will emit their event before the form can read data about the form element.
+      if (!this.formState[targetName] && this.isFormElement(event.target)) {
+        this._addElementToState(event.target);
+      }
+
       // Check special input types and handle their edge cases
       if (this._isElementTag('auro-datepicker', event.target) && event.target.hasAttribute('range')) {
         this.formState[targetName].value = event.target.values;
-
         this.requestUpdate('formState');
       } else {
-        // "Normal" input value handling, just assign the value
         this.formState[targetName].value = event.target.value;
         this.requestUpdate('formState');
       }
@@ -455,6 +499,10 @@ class AuroForm extends r {
         return;
       }
 
+      if (!this.formState[targetName]) {
+        this._addElementToState(event.target);
+      }
+
       this.formState[targetName].validity = event.detail.validity;
       this._calculateValidity();
     });

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

@@ -60,13 +60,12 @@ export class AuroForm extends LitElement {
     _submitelements: HTMLButtonElement[];
     /** @type {HTMLButtonElement[]} */
     _resetElements: HTMLButtonElement[];
+    /**
+     * Reset fires an event called `reset` - just as you would expect from a normal form.
+     */
     reset(): void;
     /**
      * Submit fires an event called `submit` - just as you would expect from a normal form.
-     *
-     * @example ```
-     * const form = document.querySelector('auro-
-     * ```
      */
     submit(): void;
     /**
@@ -107,6 +106,16 @@ export class AuroForm extends LitElement {
      * @returns {Record<string, string | number | boolean | string[] | null>} The form value.
      */
     get value(): Record<string, string | number | boolean | string[] | null>;
+    /**
+     * Getter for internal _submitElements.
+     * @returns {HTMLButtonElement[]}
+     */
+    get submitElements(): HTMLButtonElement[];
+    /**
+     * Getter for internal _resetElements.
+     * @returns {HTMLButtonElement[]}
+     */
+    get resetElements(): HTMLButtonElement[];
     /**
      * Infer validity status based on current formState.
      * @private
@@ -129,6 +138,12 @@ export class AuroForm extends LitElement {
      * @returns {NodeList}
      */
     queryAuroElements(): NodeList;
+    /**
+     * Store an element in state and on the _elements array.
+     * @param {HTMLElement} element - The element to add to our state.
+     * @private
+     */
+    private _addElementToState;
     /**
      * Initialize (or reinitialize) the form state.
      */

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

@@ -1 +1 @@
-{"version":3,"file":"auro-form.d.ts","sourceRoot":"","sources":["../src/auro-form.js"],"names":[],"mappings":"AAcA;;;;;;GAMG;AAEH;;GAEG;AAIH;;;;;GAKG;AAGH;IACE;;;;;;;;;;;;;;;;;;;MASC;IA4BD,uCAOC;IAiCD,yCAKC;IAWD,+CAEC;IAoMD;;;;;;;OAOG;IACH,uBANW,MAAM,QAQhB;IA/RC,wBAAwB;IACxB,WADW,SAAS,CACD;IAEnB,yCAAyC;IACzC,WADW,OAAO,GAAG,SAAS,GAAG,IAAI,CAChB;IACrB,yBAA2B;IAE3B,oDAAoD;IACpD,WADW,CAAC,WAAW,GAAG;QAAC,KAAK,EAAE,MAAM,IAAI,CAAA;KAAC,CAAC,EAAE,CAC7B;IAEnB,kCAAkC;IAClC,iBADW,iBAAiB,EAAE,CACL;IAEzB,kCAAkC;IAClC,gBADW,iBAAiB,EAAE,CACN;IA2N1B,cAcC;IAED;;;;;;OAMG;IACH,eAmBC;IAnPD;;;;;;OAMG;IACH,sBAEC;IAED;;;;;;OAMG;IACH,+BAEC;IAED;;;;OAIG;IACH,uBAHW,WAAW,GACT,OAAO,CAInB;IASD;;;;OAIG;IACH,yBAHW,WAAW,GACT,OAAO,CAInB;IAMD;;;;;;;;OAQG;IACH,aAFa,MAAM,CAAC,MAAM,EAAE,MAAM,GAAG,MAAM,GAAG,OAAO,GAAG,MAAM,EAAE,GAAG,IAAI,CAAC,CAOvE;IAED;;;OAGG;IACH,2BAcC;IAED;;;OAGG;IACH,gBAFa,OAAO,GAAG,SAAS,CAI/B;IAED,yBAUC;IAED;;;OAGG;IACH,sBAFa,OAAO,CAInB;IAED,kCAgBC;IAED;;;OAGG;IACH,qBAFa,QAAQ,CAsBpB;IAED;;OAEG;IACH,wBAqCC;IA0DD,4CAiCC;IAED,uCAaC;IAED,qBAEC;IAGD,+CAMC;CACF;;;;;;;;WAlYa,MAAM,GAAG,MAAM,GAAG,OAAO,GAAG,MAAM,EAAE,GAAG,IAAI;;;;cAC3C,aAAa;;;;cACb,OAAO;;;;aACP,WAAW;;;;;;;;2BAXQ,KAAK"}
+{"version":3,"file":"auro-form.d.ts","sourceRoot":"","sources":["../src/auro-form.js"],"names":[],"mappings":"AAcA;;;;;;GAMG;AAEH;;GAEG;AAIH;;;;;GAKG;AAGH;IACE;;;;;;;;;;;;;;;;;;;MASC;IA4BD,uCAOC;IAiCD,yCAKC;IAWD,+CAEC;IA6OD;;;;;;;OAOG;IACH,uBANW,MAAM,QAQhB;IAxUC,wBAAwB;IACxB,WADW,SAAS,CACD;IAEnB,yCAAyC;IACzC,WADW,OAAO,GAAG,SAAS,GAAG,IAAI,CAChB;IACrB,yBAA2B;IAE3B,oDAAoD;IACpD,WADW,CAAC,WAAW,GAAG;QAAC,KAAK,EAAE,MAAM,IAAI,CAAA;KAAC,CAAC,EAAE,CAC7B;IAEnB,kCAAkC;IAClC,iBADW,iBAAiB,EAAE,CACL;IAEzB,kCAAkC;IAClC,gBADW,iBAAiB,EAAE,CACN;IA4P1B;;OAEG;IACH,cAuBC;IAED;;OAEG;IACH,eAmBC;IA5RD;;;;;;OAMG;IACH,sBAEC;IAED;;;;;;OAMG;IACH,+BAEC;IAED;;;;OAIG;IACH,uBAHW,WAAW,GACT,OAAO,CAInB;IASD;;;;OAIG;IACH,yBAHW,WAAW,GACT,OAAO,CAInB;IAMD;;;;;;;;OAQG;IACH,aAFa,MAAM,CAAC,MAAM,EAAE,MAAM,GAAG,MAAM,GAAG,OAAO,GAAG,MAAM,EAAE,GAAG,IAAI,CAAC,CAOvE;IAED;;;OAGG;IACH,sBAFa,iBAAiB,EAAE,CAI/B;IAED;;;OAGG;IACH,qBAFa,iBAAiB,EAAE,CAI/B;IAED;;;OAGG;IACH,2BAcC;IAED;;;OAGG;IACH,gBAFa,OAAO,GAAG,SAAS,CAO/B;IAED,yBAUC;IAED;;;OAGG;IACH,sBAFa,OAAO,CAInB;IAED,kCAgBC;IAED;;;OAGG;IACH,qBAFa,QAAQ,CAsBpB;IAED;;;;OAIG;IACH,2BAcC;IAED;;OAEG;IACH,wBA8BC;IAkED,4CAwCC;IAED,uCAaC;IAED,qBAEC;IAGD,+CAMC;CACF;;;;;;;;WAlba,MAAM,GAAG,MAAM,GAAG,OAAO,GAAG,MAAM,EAAE,GAAG,IAAI;;;;cAC3C,aAAa;;;;cACb,OAAO;;;;aACP,WAAW;;;;;;;;2BAXQ,KAAK"}

package/components/form/dist/index.js

@@ -235,6 +235,22 @@ class AuroForm extends r {
     }, {});
   }
 
+  /**
+   * Getter for internal _submitElements.
+   * @returns {HTMLButtonElement[]}
+   */
+  get submitElements() {
+    return this._submitelements;
+  }
+
+  /**
+   * Getter for internal _resetElements.
+   * @returns {HTMLButtonElement[]}
+   */
+  get resetElements() {
+    return this._resetElements;
+  }
+
   /**
    * Infer validity status based on current formState.
    * @private
@@ -260,6 +276,9 @@ class AuroForm extends r {
    * @returns {"valid" | "invalid"}
    */
   get validity() {
+    // Force calculate, as sometimes validity won't reflect
+    // the latest value while in-between renders.
+    this._calculateValidity();
     return this._validity;
   }
 
@@ -327,6 +346,27 @@ class AuroForm extends r {
     ]) => tags.map((tag) => `${tag}${extraAttributes}, [${tag}]${extraAttributes}`)).join(', '));
   }
 
+  /**
+   * Store an element in state and on the _elements array.
+   * @param {HTMLElement} element - The element to add to our state.
+   * @private
+   */
+  _addElementToState(element) {
+    const targetName = element.getAttribute('name');
+    if (this.formState[targetName]) {
+      return;
+    }
+
+    this.formState[targetName] = {
+      value: element.getAttribute('value'),
+      validity: element.validity || null,
+      required: element.hasAttribute('required'),
+      // element
+    };
+
+    this._elements.push(element);
+  }
+
   /**
    * Initialize (or reinitialize) the form state.
    */
@@ -338,14 +378,7 @@ class AuroForm extends r {
 
     this.queryAuroElements().forEach((element) => {
       if (this.isFormElement(element)) {
-        this.formState[element.getAttribute('name')] = {
-          value: element.getAttribute('value'),
-          validity: element.getAttribute('validity'),
-          required: element.hasAttribute('required'),
-          // element
-        };
-
-        this._elements.push(element);
+        this._addElementToState(element);
       }
 
       if (this.isButtonElement(element) && element.getAttribute('type') === 'submit') {
@@ -369,7 +402,11 @@ class AuroForm extends r {
     this.setDisabledStateOnButtons();
   }
 
+  /**
+   * Reset fires an event called `reset` - just as you would expect from a normal form.
+   */
   reset() {
+    const previousValue = this.value;
     this._elements.forEach((element) => element.reset());
 
     this.updateComplete.then(() => {
@@ -381,16 +418,20 @@ class AuroForm extends r {
       // Wait for the above changes to run through, then disable submit/reset
       this.updateComplete.then(() => {
         this.setDisabledStateOnButtons();
+
+        this.dispatchEvent(new CustomEvent('reset', {
+          bubbles: true,
+          composed: true,
+          detail: {
+            previousValue
+          }
+        }));
       });
     });
   }
 
   /**
    * Submit fires an event called `submit` - just as you would expect from a normal form.
-   *
-   * @example ```
-   * const form = document.querySelector('auro-
-   * ```
    */
   submit() {
     // Steps required to get out of beta:
@@ -437,13 +478,16 @@ class AuroForm extends r {
         return;
       }
 
+      // Occasionally, a form element will emit their event before the form can read data about the form element.
+      if (!this.formState[targetName] && this.isFormElement(event.target)) {
+        this._addElementToState(event.target);
+      }
+
       // Check special input types and handle their edge cases
       if (this._isElementTag('auro-datepicker', event.target) && event.target.hasAttribute('range')) {
         this.formState[targetName].value = event.target.values;
-
         this.requestUpdate('formState');
       } else {
-        // "Normal" input value handling, just assign the value
         this.formState[targetName].value = event.target.value;
         this.requestUpdate('formState');
       }
@@ -455,6 +499,10 @@ class AuroForm extends r {
         return;
       }
 
+      if (!this.formState[targetName]) {
+        this._addElementToState(event.target);
+      }
+
       this.formState[targetName].validity = event.detail.validity;
       this._calculateValidity();
     });