@aurodesignsystem/auro-formkit 2.0.0-beta.32 → 2.0.0-beta.34

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

@@ -68,6 +68,8 @@ export class AuroForm extends LitElement {
     // Bind listeners
     this.reset = this.reset.bind(this);
     this.submit = this.submit.bind(this);
+    this.sharedInputListener = this.sharedInputListener.bind(this);
+    this.sharedValidationListener = this.sharedValidationListener.bind(this);
   }
 
   // Note: button is NOT considered a form element in this context
@@ -77,7 +79,12 @@ export class AuroForm extends LitElement {
       'auro-input',
       'auro-select',
       'auro-datepicker',
+      'auro-combobox',
+      // checkbox and radio are grouped elements
       'auro-checkbox-group',
+      'auro-radio-group',
+      // while counter is groupable, the group is for min/max values and not for grouped values
+      'auro-counter-group'
     ];
   }
 
@@ -112,6 +119,18 @@ export class AuroForm extends LitElement {
     return this._isInElementCollection(AuroForm.formElementTags, element);
   }
 
+  /**
+   * Validates if an event is from a valid form element with a name.
+   * @param {Event} event - The event to validate.
+   * @returns {boolean} - True if event is valid for processing.
+   * @private
+   */
+  _eventIsValidFormEvent(event) {
+    const targetName = event.target.getAttribute("name");
+    return this.isFormElement(event.target) && targetName;
+  }
+
+
   static get buttonElementTags() {
     return [
       'button',
@@ -271,7 +290,7 @@ export class AuroForm extends LitElement {
     }
 
     this.formState[targetName] = {
-      value: element.getAttribute('value'),
+      value: element.value || element.getAttribute('value'),
       validity: element.validity || null,
       required: element.hasAttribute('required'),
       // element
@@ -379,48 +398,69 @@ export class AuroForm extends LitElement {
     AuroLibraryRuntimeUtils.prototype.registerComponent(name, AuroForm);
   }
 
-  firstUpdated(_changedProperties) {
-    super.firstUpdated(_changedProperties);
+  /**
+   * Shared input listener for all form elements.
+   * @param {Event} event - The event that is fired from the form element.
+   */
+  sharedInputListener(event) {
+    const targetName = event.target.getAttribute("name");
 
-    const slot = this.shadowRoot.querySelector('slot');
+    // This should only happen if some bubble-up event is fired from inside a form element.
+    if (!this._eventIsValidFormEvent(event)) {
+      return;
+    }
 
-    // Update the form state when a form element is detected
-    slot.addEventListener('input', (event) => {
-      const targetName = event.target.getAttribute("name");
-      if (!this.isFormElement(event.target) || !targetName) {
-        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);
+    }
 
-      // 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 {
+      this.formState[targetName].value = event.target.value;
+      this.requestUpdate('formState');
+    }
+  }
 
-      // 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 {
-        this.formState[targetName].value = event.target.value;
-        this.requestUpdate('formState');
-      }
-    });
+  /**
+   * Shared validation listener for all form elements.
+   * @param {Event} event - The event that is fired from the form element.
+   */
+  sharedValidationListener(event) {
+    const targetName = event.target.getAttribute("name");
+    if (!this._eventIsValidFormEvent(event)) {
+      return;
+    }
 
-    slot.addEventListener('auroFormElement-validated', (event) => {
-      const targetName = event.target.getAttribute("name");
-      if (!this.isFormElement(event.target) || !targetName) {
-        return;
-      }
+    if (!this.formState[targetName]) {
+      this._addElementToState(event.target);
+    }
 
-      if (!this.formState[targetName]) {
-        this._addElementToState(event.target);
-      }
+    this.formState[targetName].validity = event.detail.validity;
+    this._calculateValidity();
+  }
 
-      this.formState[targetName].validity = event.detail.validity;
-      this._calculateValidity();
+  _attachEventListeners() {
+    this.queryAuroElements().forEach((element) => {
+      // remove any existing event listeners (in case of re-initialization)
+      element.removeEventListener('input', this.sharedInputListener);
+      element.removeEventListener('auroFormElement-validated', this.sharedValidationListener);
+
+      // add new event listeners
+      element.addEventListener('input', this.sharedInputListener);
+      element.addEventListener('auroFormElement-validated', this.sharedValidationListener);
     });
   }
 
+  firstUpdated(_changedProperties) {
+    super.firstUpdated(_changedProperties);
+
+    this._attachEventListeners();
+  }
+
   updated(_changedProperties) {
     super.updated(_changedProperties);
 
@@ -438,6 +478,8 @@ export class AuroForm extends LitElement {
 
   onSlotChange() {
     this.initializeState();
+    // Safe to call as we remove and re-add event listeners
+    this._attachEventListeners();
   }
 
   // function that renders the HTML and CSS into the scope of the component

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

@@ -42,7 +42,7 @@ More info and automated migrator: https://sass-lang.com/d/import
 
 
 ./src/index.js → dist...
-created dist in 182ms
+created dist in 162ms
 
 > @aurodesignsystem/auro-helptext@1.0.0 types
 > tsc --project tsconfig.json

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

@@ -4,4 +4,4 @@
 
 
 ./src/index.js → dist...
-created dist in 778ms
+created dist in 224ms

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

@@ -206,13 +206,13 @@ More info and automated migrator: https://sass-lang.com/d/import
 
 
 ./src/index.js → dist...
-created dist in 1.5s
+created dist in 1.4s
 
 ./demo/index.js → ./demo/...
-created ./demo/ in 880ms
+created ./demo/ in 882ms
 
 ./demo/api.js → ./demo/...
-created ./demo/ in 927ms
+created ./demo/ in 774ms
 
 > @aurodesignsystem/auro-input@4.2.0 build:docs
 > wca analyze 'scripts/wca/*.js' --outFiles docs/api.md; node ../../packages/build-tools/src/docProcessor.mjs --component input

package/components/input/README.md

@@ -89,7 +89,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-input@2.0.0-beta.31/dist/auro-input__bundled.js" type="module"></script>
+<script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-formkit/auro-input@2.0.0-beta.33/dist/auro-input__bundled.js" type="module"></script>
 <!-- AURO-GENERATED-CONTENT:END -->
 
 ## auro-input use cases

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

@@ -101,13 +101,13 @@ More info and automated migrator: https://sass-lang.com/d/import
 
 
 ./src/index.js → dist...
-created dist in 478ms
+created dist in 401ms
 
 ./demo/index.js → ./demo/...
-created ./demo/ in 465ms
+created ./demo/ in 478ms
 
 ./demo/api.js → ./demo/...
-created ./demo/ in 284ms
+created ./demo/ in 267ms
 
 > @aurodesignsystem/auro-menu@4.1.4 build:docs
 > wca analyze 'scripts/wca/*.js' --outFiles docs/api.md; node ../../packages/build-tools/src/docProcessor.mjs --component menu

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

@@ -4,10 +4,10 @@
 
 
 ./src/index.js → dist...
-created dist in 567ms
+created dist in 413ms
 
 ./demo/index.js → ./demo/...
-created ./demo/ in 414ms
+created ./demo/ in 338ms
 
 ./demo/api.js → ./demo/...
-created ./demo/ in 262ms
+created ./demo/ in 231ms

package/components/menu/README.md

@@ -100,7 +100,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-menu@2.0.0-beta.31/dist/auro-menu__bundled.js" type="module"></script>
+<script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-formkit/auro-menu@2.0.0-beta.33/dist/auro-menu__bundled.js" type="module"></script>
 <!-- AURO-GENERATED-CONTENT:END -->
 
 ## auro-menu use cases

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

@@ -138,13 +138,13 @@ Run in verbose mode to see all warnings.
 
 
 ./src/index.js → dist...
-created dist in 712ms
+created dist in 840ms
 
 ./demo/index.js → ./demo/...
-created ./demo/ in 689ms
+created ./demo/ in 683ms
 
 ./demo/api.js → ./demo/...
-created ./demo/ in 613ms
+created ./demo/ in 645ms
 
 > @aurodesignsystem/auro-radio@4.1.1 build:docs
 > wca analyze 'scripts/wca/*.js' --outFiles docs/api.md; node ../../packages/build-tools/src/docProcessor.mjs --component radio

package/components/radio/README.md

@@ -90,7 +90,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.9.2/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-radio@2.0.0-beta.31/dist/auro-radio__bundled.js" type="module"></script>
+<script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-formkit/auro-radio@2.0.0-beta.33/dist/auro-radio__bundled.js" type="module"></script>
 <!-- AURO-GENERATED-CONTENT:END -->
 
 ## auro-radio use cases

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

@@ -137,13 +137,13 @@ More info and automated migrator: https://sass-lang.com/d/import
 
 
 ./src/index.js → dist...
-created dist in 1.1s
+created dist in 939ms
 
 ./demo/index.js → ./demo/...
-created ./demo/ in 1s
+created ./demo/ in 737ms
 
 ./demo/api.js → ./demo/...
-created ./demo/ in 781ms
+created ./demo/ in 786ms
 
 > @aurodesignsystem/auro-select@3.3.0 build:docs
 > wca analyze 'scripts/wca/*.js' --outFiles docs/api.md; node ../../packages/build-tools/src/docProcessor.mjs --component select

package/components/select/README.md

@@ -99,9 +99,9 @@ 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-dropdown@2.0.0-beta.31/dist/auro-dropdown__bundled.js" type="module"></script>
-<script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-formkit/auro-menu@2.0.0-beta.31/dist/auro-menu__bundled.js" type="module"></script>
-<script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-formkit/auro-select@2.0.0-beta.31/dist/auro-select__bundled.js" type="module"></script>
+<script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-formkit/auro-dropdown@2.0.0-beta.33/dist/auro-dropdown__bundled.js" type="module"></script>
+<script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-formkit/auro-menu@2.0.0-beta.33/dist/auro-menu__bundled.js" type="module"></script>
+<script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-formkit/auro-select@2.0.0-beta.33/dist/auro-select__bundled.js" type="module"></script>
 <!-- AURO-GENERATED-CONTENT:END -->
 
 ## auro-select use cases

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

@@ -3332,6 +3332,15 @@ class AuroDropdown extends r$4 {
     this.noHideOnThisFocusLoss = false;
 
     this.privateDefaults();
+
+    /**
+     * @private
+     * @property {boolean} delegatesFocus - Whether the shadow root delegates focus.
+     */
+    this.constructor.shadowRootOptions = {
+      ...r$4.shadowRootOptions,
+      delegatesFocus: true,
+    };
   }
 
   /**
@@ -3652,7 +3661,7 @@ class AuroDropdown extends r$4 {
    *
    * @private
    * @method handleTriggerContentSlotChange
-   * @param {Event} event - native slotchange event
+   * @param {Event} event - Native slotchange event.
    * @returns {void}
    */
   handleTriggerContentSlotChange(event) {

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

@@ -3228,6 +3228,15 @@ class AuroDropdown extends r$4 {
     this.noHideOnThisFocusLoss = false;
 
     this.privateDefaults();
+
+    /**
+     * @private
+     * @property {boolean} delegatesFocus - Whether the shadow root delegates focus.
+     */
+    this.constructor.shadowRootOptions = {
+      ...r$4.shadowRootOptions,
+      delegatesFocus: true,
+    };
   }
 
   /**
@@ -3548,7 +3557,7 @@ class AuroDropdown extends r$4 {
    *
    * @private
    * @method handleTriggerContentSlotChange
-   * @param {Event} event - native slotchange event
+   * @param {Event} event - Native slotchange event.
    * @returns {void}
    */
   handleTriggerContentSlotChange(event) {

package/components/select/dist/index.js

@@ -3228,6 +3228,15 @@ class AuroDropdown extends r$4 {
     this.noHideOnThisFocusLoss = false;
 
     this.privateDefaults();
+
+    /**
+     * @private
+     * @property {boolean} delegatesFocus - Whether the shadow root delegates focus.
+     */
+    this.constructor.shadowRootOptions = {
+      ...r$4.shadowRootOptions,
+      delegatesFocus: true,
+    };
   }
 
   /**
@@ -3548,7 +3557,7 @@ class AuroDropdown extends r$4 {
    *
    * @private
    * @method handleTriggerContentSlotChange
-   * @param {Event} event - native slotchange event
+   * @param {Event} event - Native slotchange event.
    * @returns {void}
    */
   handleTriggerContentSlotChange(event) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@aurodesignsystem/auro-formkit",
-  "version": "2.0.0-beta.32",
+  "version": "2.0.0-beta.34",
   "description": "A collection of web components used to build forms.",
   "type": "module",
   "license": "Apache-2.0",

package/.turbo/cache/02882630667e46f8-meta.json

@@ -1 +0,0 @@
-{"hash":"02882630667e46f8","duration":15398}

package/.turbo/cache/0899fc2ef909db30-meta.json

@@ -1 +0,0 @@
-{"hash":"0899fc2ef909db30","duration":13702}

package/.turbo/cache/1e3f844e58a3d4f2-meta.json

@@ -1 +0,0 @@
-{"hash":"1e3f844e58a3d4f2","duration":14752}

package/.turbo/cache/62214e9883afcc4d-meta.json

@@ -1 +0,0 @@
-{"hash":"62214e9883afcc4d","duration":2686}

package/.turbo/cache/62e73e98c9b176ea-meta.json

@@ -1 +0,0 @@
-{"hash":"62e73e98c9b176ea","duration":1623}

package/.turbo/cache/721262daa6b8164a-meta.json

@@ -1 +0,0 @@
-{"hash":"721262daa6b8164a","duration":16033}

package/.turbo/cache/7593109ea54e7505-meta.json

@@ -1 +0,0 @@
-{"hash":"7593109ea54e7505","duration":645}

package/.turbo/cache/7629bef0037115af-meta.json

@@ -1 +0,0 @@
-{"hash":"7629bef0037115af","duration":6786}

package/.turbo/cache/76667a5d27a45c7a-meta.json

@@ -1 +0,0 @@
-{"hash":"76667a5d27a45c7a","duration":2179}

package/.turbo/cache/91c75fdf2c775926-meta.json

@@ -1 +0,0 @@
-{"hash":"91c75fdf2c775926","duration":921}

package/.turbo/cache/92b4b6ba93458685-meta.json

@@ -1 +0,0 @@
-{"hash":"92b4b6ba93458685","duration":3786}

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

@@ -1 +0,0 @@
-{"hash":"9c15f2276d1905d6","duration":15116}

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

@@ -1 +0,0 @@
-{"hash":"a263932c5b42ec4f","duration":2313}

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

@@ -1 +0,0 @@
-{"hash":"b10915c26145587e","duration":14103}

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

@@ -1 +0,0 @@
-{"hash":"b1f20257439cbded","duration":5077}

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

@@ -1 +0,0 @@
-{"hash":"bed01678759af66e","duration":14740}

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

@@ -1 +0,0 @@
-{"hash":"bf154f26b6bb6f24","duration":25553}

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

@@ -1 +0,0 @@
-{"hash":"c103542625831d7c","duration":15839}

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

@@ -1 +0,0 @@
-{"hash":"c860cecd25be20af","duration":1568}

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

@@ -1 +0,0 @@
-{"hash":"e14312dd3d4148f7","duration":6538}

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

@@ -1 +0,0 @@
-{"hash":"ed455be2856be7ac","duration":6237}

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

@@ -1 +0,0 @@
-{"hash":"f473f3d9902768db","duration":916}