@aurodesignsystem-dev/auro-formkit 0.0.0-pr1619.0 → 0.0.0-pr1621.0

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

@@ -1127,7 +1127,7 @@ let AuroHelpText$1 = class AuroHelpText extends i$2 {
   }
 };
 
-var formkitVersion$1 = '202609231954';
+var formkitVersion$1 = '202609232032';
 
 // Copyright (c) 2026 Alaska Airlines. All rights reserved. Licensed under the Apache-2.0 license
 // See LICENSE in the project root for license information.
@@ -5487,7 +5487,7 @@ class AuroHelpText extends i$2 {
   }
 }
 
-var formkitVersion = '202609231954';
+var formkitVersion = '202609232032';
 
 /**
  * AuroElement is the shared base class for layout-aware Auro form components.
@@ -7883,6 +7883,7 @@ const counterGroupKeyboardStrategy = {
  * @csspart dropdown - The dropdown element rendered when `isDropdown` is true.
  * @csspart helpText - The help text and error message container.
  *
+ * @event auroFormElement-validated - Notifies that the `validity` and `errorMessage` values have changed.
  * @event input - Notifies that the counter group's value has changed.
  */
 class AuroCounterGroup extends AuroElement {
@@ -8233,21 +8234,6 @@ class AuroCounterGroup extends AuroElement {
     this.updateValidity();
   }
 
-  /**
-   * Renders help text error messages.
-   * @param {Array<string>} messages - The error messages to render.
-   * @returns {TemplateResult[]} - The rendered error messages rendered in a TemplateResult.
-   * @private
-   */
-  renderHelpTextErrors(messages) {
-
-    // Return empty template if no messages are provided
-    if (!messages || messages.length === 0) return u$5``;
-
-    // Return messages as a TemplateResult
-    return messages.map(message => u$5`<p>${message}</p>`);
-  }
-
   /**
    * Gets and returns an array of counters in an invalid state.
    * @returns {Array<HTMLElement>} - Returns an array of invalid counters.
@@ -8271,55 +8257,70 @@ class AuroCounterGroup extends AuroElement {
   };
 
   /**
-   * Updates the validity of the counter group based on the validity of its counters.
-   * This method checks all counters within the group, determines if any are invalid, and updates the group's validity state and error message accordingly.
-   * If any counter is invalid, it generates a combined error message from all invalid counters.
+   * Synchronously recomputes this.validity/this.errorMessage from the current
+   * validity of the child counters. Extracted from updateValidity() so that
+   * validate() can re-apply this aggregation immediately after the shared
+   * validation engine runs, instead of waiting on a deferred timer.
    * @returns {void}
    * @private
    */
-  updateValidity () {
+  computeValidityFromCounters() {
 
     // We don't need to do anything if there are no counters
     if (!this.counters) return;
 
-    // Wait for initial validation to complete before updating validity and error message
-    // This is necessary because we need the initial validation to know when to reset the validity and error message
-    setTimeout(() => {
+    // Get any invalid counters
+    const invalidCounters = this.getInvalidCounters(this.counters);
+
+    // Determine if we are in an invalid state based on the presence of invalid counters
+    const isInvalid = invalidCounters.length > 0;
 
-      // Get any invalid counters
-      const invalidCounters = this.getInvalidCounters(this.counters);
+    // If we are in an invalid state
+    if (isInvalid) {
 
-      // Determine if we are in an invalid state based on the presence of invalid counters
-      const isInvalid = invalidCounters.length > 0;
+      // Generate the error messages as plain text, joined with sentence-ending
+      // punctuation so multiple messages don't run together into one clause.
+      const errorMessages = this.getErrorMessages(invalidCounters);
+      const joinedMessage = errorMessages.join('. ');
 
-      // If we are in an invalid state
-      if (isInvalid) {
+      // Set the validity and error message
+      // This needs to allow for the initial validation to come through
+      this.validity =
+        invalidCounters[0].validity || // The first invalid counter's validity
+        this.validity || // incoming validity from validation
+        undefined; // fallback
 
-        // Generate the error messages
-        const errorMessages = this.getErrorMessages(invalidCounters);
+      // Always reflect the current invalid counters' messages, even when that
+      // means clearing to undefined -- falling back to the previous
+      // this.errorMessage here would let a stale message from a prior,
+      // different invalid cause survive a transition into a cause with no
+      // message of its own (e.g. customError -> rangeOverflow).
+      this.errorMessage = joinedMessage || undefined;
+    }
 
-        const errorMessage = isInvalid ? this.renderHelpTextErrors(errorMessages) : this.errorMessage;
+    if (!isInvalid && this.validity !== 'valid') {
 
-        // Set the validity and error message
-        // This needs to allow for the initial validation to come through
-        this.validity =
-          invalidCounters[0].validity || // The first invalid counter's validity
-          this.validity || // incoming validity from validation
-          undefined; // fallback
+      // If there are no invalid counters, reset validity and error message
+      this.validity = 'valid';
+      this.errorMessage = undefined;
+    }
+  }
 
-        this.errorMessage =
-          errorMessage || // our message
-          this.errorMessage || // incoming message from validation
-          undefined; // fallback
-      }
+  /**
+   * Updates the validity of the counter group based on the validity of its counters.
+   * This method checks all counters within the group, determines if any are invalid, and updates the group's validity state and error message accordingly.
+   * If any counter is invalid, it generates a combined error message from all invalid counters.
+   * @returns {void}
+   * @private
+   */
+  updateValidity () {
 
-      if (!isInvalid && this.validity !== 'valid') {
+    // We don't need to do anything if there are no counters
+    if (!this.counters) return;
 
-        // If there are no invalid counters, reset validity and error message
-        this.validity = 'valid';
-        this.errorMessage = undefined;
-      }
-    });
+    // Wait for initial validation to complete before updating validity and error message
+    // This is necessary because we need the initial validation to know when to reset the validity and error message
+    setTimeout(() => this.computeValidityFromCounters());
   }
 
   /**
@@ -8487,6 +8488,40 @@ class AuroCounterGroup extends AuroElement {
    */
   validate(force = false) {
     this.validation.validate(this, force);
+
+    // AuroFormValidation doesn't know how to derive validity from our object-valued
+    // `value`, so it always resolves an otherwise-error-free group to 'valid' -- even
+    // while a child counter is still invalid. Re-derive from the children's current
+    // state immediately afterward so that invalid state survives forced validation,
+    // and re-dispatch the validated event when the correction changes the outcome so
+    // listeners like auro-form's submit path see the corrected result.
+    //
+    // This intentionally also runs for unforced calls (every child value change),
+    // even though updateValidity()'s deferred, listener-driven aggregation computes
+    // the same result a tick later: that deferred path only updates this.validity/
+    // this.errorMessage, it never re-dispatches the event, so auro-form's formState
+    // (and therefore the submit button's disabled state) would otherwise only ever
+    // learn about a child-derived invalid state at the next forced validation --
+    // not at initial load or on ordinary interaction. See docs/post-mortem/1642340.md,
+    // "Iterations That Didn't Work", for the attempt to scope this to `force` and
+    // why it broke that behavior.
+    if (this.counters && !this.hasAttribute('error')) {
+      const previousValidity = this.validity;
+      const previousMessage = this.errorMessage;
+
+      this.computeValidityFromCounters();
+
+      if (this.validity !== previousValidity || this.errorMessage !== previousMessage) {
+        this.dispatchEvent(new CustomEvent('auroFormElement-validated', {
+          bubbles: true,
+          composed: true,
+          detail: {
+            validity: this.validity,
+            message: this.errorMessage
+          }
+        }));
+      }
+    }
   }
 
   /**

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

@@ -13,6 +13,7 @@
  * @csspart dropdown - The dropdown element rendered when `isDropdown` is true.
  * @csspart helpText - The help text and error message container.
  *
+ * @event auroFormElement-validated - Notifies that the `validity` and `errorMessage` values have changed.
  * @event input - Notifies that the counter group's value has changed.
  */
 export class AuroCounterGroup extends AuroElement {
@@ -277,13 +278,6 @@ export class AuroCounterGroup extends AuroElement {
      * @private
      */
     private configureCounters;
-    /**
-     * Renders help text error messages.
-     * @param {Array<string>} messages - The error messages to render.
-     * @returns {TemplateResult[]} - The rendered error messages rendered in a TemplateResult.
-     * @private
-     */
-    private renderHelpTextErrors;
     /**
      * Gets and returns an array of counters in an invalid state.
      * @returns {Array<HTMLElement>} - Returns an array of invalid counters.
@@ -298,7 +292,16 @@ export class AuroCounterGroup extends AuroElement {
      * @private
      */
     private getErrorMessages;
-    errorMessage: any;
+    /**
+     * Synchronously recomputes this.validity/this.errorMessage from the current
+     * validity of the child counters. Extracted from updateValidity() so that
+     * validate() can re-apply this aggregation immediately after the shared
+     * validation engine runs, instead of waiting on a deferred timer.
+     * @returns {void}
+     * @private
+     */
+    private computeValidityFromCounters;
+    errorMessage: string | undefined;
     /**
      * Hides the dropdown bib if its open.
      * @returns {void}

package/components/counter/dist/index.js

@@ -1077,7 +1077,7 @@ let AuroHelpText$1 = class AuroHelpText extends LitElement {
   }
 };
 
-var formkitVersion$1 = '202609231954';
+var formkitVersion$1 = '202609232032';
 
 // Copyright (c) 2026 Alaska Airlines. All rights reserved. Licensed under the Apache-2.0 license
 // See LICENSE in the project root for license information.
@@ -5419,7 +5419,7 @@ class AuroHelpText extends LitElement {
   }
 }
 
-var formkitVersion = '202609231954';
+var formkitVersion = '202609232032';
 
 /**
  * AuroElement is the shared base class for layout-aware Auro form components.
@@ -7815,6 +7815,7 @@ const counterGroupKeyboardStrategy = {
  * @csspart dropdown - The dropdown element rendered when `isDropdown` is true.
  * @csspart helpText - The help text and error message container.
  *
+ * @event auroFormElement-validated - Notifies that the `validity` and `errorMessage` values have changed.
  * @event input - Notifies that the counter group's value has changed.
  */
 class AuroCounterGroup extends AuroElement {
@@ -8165,21 +8166,6 @@ class AuroCounterGroup extends AuroElement {
     this.updateValidity();
   }
 
-  /**
-   * Renders help text error messages.
-   * @param {Array<string>} messages - The error messages to render.
-   * @returns {TemplateResult[]} - The rendered error messages rendered in a TemplateResult.
-   * @private
-   */
-  renderHelpTextErrors(messages) {
-
-    // Return empty template if no messages are provided
-    if (!messages || messages.length === 0) return html``;
-
-    // Return messages as a TemplateResult
-    return messages.map(message => html`<p>${message}</p>`);
-  }
-
   /**
    * Gets and returns an array of counters in an invalid state.
    * @returns {Array<HTMLElement>} - Returns an array of invalid counters.
@@ -8203,55 +8189,70 @@ class AuroCounterGroup extends AuroElement {
   };
 
   /**
-   * Updates the validity of the counter group based on the validity of its counters.
-   * This method checks all counters within the group, determines if any are invalid, and updates the group's validity state and error message accordingly.
-   * If any counter is invalid, it generates a combined error message from all invalid counters.
+   * Synchronously recomputes this.validity/this.errorMessage from the current
+   * validity of the child counters. Extracted from updateValidity() so that
+   * validate() can re-apply this aggregation immediately after the shared
+   * validation engine runs, instead of waiting on a deferred timer.
    * @returns {void}
    * @private
    */
-  updateValidity () {
+  computeValidityFromCounters() {
 
     // We don't need to do anything if there are no counters
     if (!this.counters) return;
 
-    // Wait for initial validation to complete before updating validity and error message
-    // This is necessary because we need the initial validation to know when to reset the validity and error message
-    setTimeout(() => {
+    // Get any invalid counters
+    const invalidCounters = this.getInvalidCounters(this.counters);
+
+    // Determine if we are in an invalid state based on the presence of invalid counters
+    const isInvalid = invalidCounters.length > 0;
 
-      // Get any invalid counters
-      const invalidCounters = this.getInvalidCounters(this.counters);
+    // If we are in an invalid state
+    if (isInvalid) {
 
-      // Determine if we are in an invalid state based on the presence of invalid counters
-      const isInvalid = invalidCounters.length > 0;
+      // Generate the error messages as plain text, joined with sentence-ending
+      // punctuation so multiple messages don't run together into one clause.
+      const errorMessages = this.getErrorMessages(invalidCounters);
+      const joinedMessage = errorMessages.join('. ');
 
-      // If we are in an invalid state
-      if (isInvalid) {
+      // Set the validity and error message
+      // This needs to allow for the initial validation to come through
+      this.validity =
+        invalidCounters[0].validity || // The first invalid counter's validity
+        this.validity || // incoming validity from validation
+        undefined; // fallback
 
-        // Generate the error messages
-        const errorMessages = this.getErrorMessages(invalidCounters);
+      // Always reflect the current invalid counters' messages, even when that
+      // means clearing to undefined -- falling back to the previous
+      // this.errorMessage here would let a stale message from a prior,
+      // different invalid cause survive a transition into a cause with no
+      // message of its own (e.g. customError -> rangeOverflow).
+      this.errorMessage = joinedMessage || undefined;
+    }
 
-        const errorMessage = isInvalid ? this.renderHelpTextErrors(errorMessages) : this.errorMessage;
+    if (!isInvalid && this.validity !== 'valid') {
 
-        // Set the validity and error message
-        // This needs to allow for the initial validation to come through
-        this.validity =
-          invalidCounters[0].validity || // The first invalid counter's validity
-          this.validity || // incoming validity from validation
-          undefined; // fallback
+      // If there are no invalid counters, reset validity and error message
+      this.validity = 'valid';
+      this.errorMessage = undefined;
+    }
+  }
 
-        this.errorMessage =
-          errorMessage || // our message
-          this.errorMessage || // incoming message from validation
-          undefined; // fallback
-      }
+  /**
+   * Updates the validity of the counter group based on the validity of its counters.
+   * This method checks all counters within the group, determines if any are invalid, and updates the group's validity state and error message accordingly.
+   * If any counter is invalid, it generates a combined error message from all invalid counters.
+   * @returns {void}
+   * @private
+   */
+  updateValidity () {
 
-      if (!isInvalid && this.validity !== 'valid') {
+    // We don't need to do anything if there are no counters
+    if (!this.counters) return;
 
-        // If there are no invalid counters, reset validity and error message
-        this.validity = 'valid';
-        this.errorMessage = undefined;
-      }
-    });
+    // Wait for initial validation to complete before updating validity and error message
+    // This is necessary because we need the initial validation to know when to reset the validity and error message
+    setTimeout(() => this.computeValidityFromCounters());
   }
 
   /**
@@ -8419,6 +8420,40 @@ class AuroCounterGroup extends AuroElement {
    */
   validate(force = false) {
     this.validation.validate(this, force);
+
+    // AuroFormValidation doesn't know how to derive validity from our object-valued
+    // `value`, so it always resolves an otherwise-error-free group to 'valid' -- even
+    // while a child counter is still invalid. Re-derive from the children's current
+    // state immediately afterward so that invalid state survives forced validation,
+    // and re-dispatch the validated event when the correction changes the outcome so
+    // listeners like auro-form's submit path see the corrected result.
+    //
+    // This intentionally also runs for unforced calls (every child value change),
+    // even though updateValidity()'s deferred, listener-driven aggregation computes
+    // the same result a tick later: that deferred path only updates this.validity/
+    // this.errorMessage, it never re-dispatches the event, so auro-form's formState
+    // (and therefore the submit button's disabled state) would otherwise only ever
+    // learn about a child-derived invalid state at the next forced validation --
+    // not at initial load or on ordinary interaction. See docs/post-mortem/1642340.md,
+    // "Iterations That Didn't Work", for the attempt to scope this to `force` and
+    // why it broke that behavior.
+    if (this.counters && !this.hasAttribute('error')) {
+      const previousValidity = this.validity;
+      const previousMessage = this.errorMessage;
+
+      this.computeValidityFromCounters();
+
+      if (this.validity !== previousValidity || this.errorMessage !== previousMessage) {
+        this.dispatchEvent(new CustomEvent('auroFormElement-validated', {
+          bubbles: true,
+          composed: true,
+          detail: {
+            validity: this.validity,
+            message: this.errorMessage
+          }
+        }));
+      }
+    }
   }
 
   /**

package/components/counter/dist/registered.js

@@ -1077,7 +1077,7 @@ let AuroHelpText$1 = class AuroHelpText extends LitElement {
   }
 };
 
-var formkitVersion$1 = '202609231954';
+var formkitVersion$1 = '202609232032';
 
 // Copyright (c) 2026 Alaska Airlines. All rights reserved. Licensed under the Apache-2.0 license
 // See LICENSE in the project root for license information.
@@ -5419,7 +5419,7 @@ class AuroHelpText extends LitElement {
   }
 }
 
-var formkitVersion = '202609231954';
+var formkitVersion = '202609232032';
 
 /**
  * AuroElement is the shared base class for layout-aware Auro form components.
@@ -7815,6 +7815,7 @@ const counterGroupKeyboardStrategy = {
  * @csspart dropdown - The dropdown element rendered when `isDropdown` is true.
  * @csspart helpText - The help text and error message container.
  *
+ * @event auroFormElement-validated - Notifies that the `validity` and `errorMessage` values have changed.
  * @event input - Notifies that the counter group's value has changed.
  */
 class AuroCounterGroup extends AuroElement {
@@ -8165,21 +8166,6 @@ class AuroCounterGroup extends AuroElement {
     this.updateValidity();
   }
 
-  /**
-   * Renders help text error messages.
-   * @param {Array<string>} messages - The error messages to render.
-   * @returns {TemplateResult[]} - The rendered error messages rendered in a TemplateResult.
-   * @private
-   */
-  renderHelpTextErrors(messages) {
-
-    // Return empty template if no messages are provided
-    if (!messages || messages.length === 0) return html``;
-
-    // Return messages as a TemplateResult
-    return messages.map(message => html`<p>${message}</p>`);
-  }
-
   /**
    * Gets and returns an array of counters in an invalid state.
    * @returns {Array<HTMLElement>} - Returns an array of invalid counters.
@@ -8203,55 +8189,70 @@ class AuroCounterGroup extends AuroElement {
   };
 
   /**
-   * Updates the validity of the counter group based on the validity of its counters.
-   * This method checks all counters within the group, determines if any are invalid, and updates the group's validity state and error message accordingly.
-   * If any counter is invalid, it generates a combined error message from all invalid counters.
+   * Synchronously recomputes this.validity/this.errorMessage from the current
+   * validity of the child counters. Extracted from updateValidity() so that
+   * validate() can re-apply this aggregation immediately after the shared
+   * validation engine runs, instead of waiting on a deferred timer.
    * @returns {void}
    * @private
    */
-  updateValidity () {
+  computeValidityFromCounters() {
 
     // We don't need to do anything if there are no counters
     if (!this.counters) return;
 
-    // Wait for initial validation to complete before updating validity and error message
-    // This is necessary because we need the initial validation to know when to reset the validity and error message
-    setTimeout(() => {
+    // Get any invalid counters
+    const invalidCounters = this.getInvalidCounters(this.counters);
+
+    // Determine if we are in an invalid state based on the presence of invalid counters
+    const isInvalid = invalidCounters.length > 0;
 
-      // Get any invalid counters
-      const invalidCounters = this.getInvalidCounters(this.counters);
+    // If we are in an invalid state
+    if (isInvalid) {
 
-      // Determine if we are in an invalid state based on the presence of invalid counters
-      const isInvalid = invalidCounters.length > 0;
+      // Generate the error messages as plain text, joined with sentence-ending
+      // punctuation so multiple messages don't run together into one clause.
+      const errorMessages = this.getErrorMessages(invalidCounters);
+      const joinedMessage = errorMessages.join('. ');
 
-      // If we are in an invalid state
-      if (isInvalid) {
+      // Set the validity and error message
+      // This needs to allow for the initial validation to come through
+      this.validity =
+        invalidCounters[0].validity || // The first invalid counter's validity
+        this.validity || // incoming validity from validation
+        undefined; // fallback
 
-        // Generate the error messages
-        const errorMessages = this.getErrorMessages(invalidCounters);
+      // Always reflect the current invalid counters' messages, even when that
+      // means clearing to undefined -- falling back to the previous
+      // this.errorMessage here would let a stale message from a prior,
+      // different invalid cause survive a transition into a cause with no
+      // message of its own (e.g. customError -> rangeOverflow).
+      this.errorMessage = joinedMessage || undefined;
+    }
 
-        const errorMessage = isInvalid ? this.renderHelpTextErrors(errorMessages) : this.errorMessage;
+    if (!isInvalid && this.validity !== 'valid') {
 
-        // Set the validity and error message
-        // This needs to allow for the initial validation to come through
-        this.validity =
-          invalidCounters[0].validity || // The first invalid counter's validity
-          this.validity || // incoming validity from validation
-          undefined; // fallback
+      // If there are no invalid counters, reset validity and error message
+      this.validity = 'valid';
+      this.errorMessage = undefined;
+    }
+  }
 
-        this.errorMessage =
-          errorMessage || // our message
-          this.errorMessage || // incoming message from validation
-          undefined; // fallback
-      }
+  /**
+   * Updates the validity of the counter group based on the validity of its counters.
+   * This method checks all counters within the group, determines if any are invalid, and updates the group's validity state and error message accordingly.
+   * If any counter is invalid, it generates a combined error message from all invalid counters.
+   * @returns {void}
+   * @private
+   */
+  updateValidity () {
 
-      if (!isInvalid && this.validity !== 'valid') {
+    // We don't need to do anything if there are no counters
+    if (!this.counters) return;
 
-        // If there are no invalid counters, reset validity and error message
-        this.validity = 'valid';
-        this.errorMessage = undefined;
-      }
-    });
+    // Wait for initial validation to complete before updating validity and error message
+    // This is necessary because we need the initial validation to know when to reset the validity and error message
+    setTimeout(() => this.computeValidityFromCounters());
   }
 
   /**
@@ -8419,6 +8420,40 @@ class AuroCounterGroup extends AuroElement {
    */
   validate(force = false) {
     this.validation.validate(this, force);
+
+    // AuroFormValidation doesn't know how to derive validity from our object-valued
+    // `value`, so it always resolves an otherwise-error-free group to 'valid' -- even
+    // while a child counter is still invalid. Re-derive from the children's current
+    // state immediately afterward so that invalid state survives forced validation,
+    // and re-dispatch the validated event when the correction changes the outcome so
+    // listeners like auro-form's submit path see the corrected result.
+    //
+    // This intentionally also runs for unforced calls (every child value change),
+    // even though updateValidity()'s deferred, listener-driven aggregation computes
+    // the same result a tick later: that deferred path only updates this.validity/
+    // this.errorMessage, it never re-dispatches the event, so auro-form's formState
+    // (and therefore the submit button's disabled state) would otherwise only ever
+    // learn about a child-derived invalid state at the next forced validation --
+    // not at initial load or on ordinary interaction. See docs/post-mortem/1642340.md,
+    // "Iterations That Didn't Work", for the attempt to scope this to `force` and
+    // why it broke that behavior.
+    if (this.counters && !this.hasAttribute('error')) {
+      const previousValidity = this.validity;
+      const previousMessage = this.errorMessage;
+
+      this.computeValidityFromCounters();
+
+      if (this.validity !== previousValidity || this.errorMessage !== previousMessage) {
+        this.dispatchEvent(new CustomEvent('auroFormElement-validated', {
+          bubbles: true,
+          composed: true,
+          detail: {
+            validity: this.validity,
+            message: this.errorMessage
+          }
+        }));
+      }
+    }
   }
 
   /**