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

package/components/checkbox/demo/customize.min.js

@@ -1326,7 +1326,7 @@ class AuroHelpText extends i$2 {
   }
 }
 
-var formkitVersion = '202609231954';
+var formkitVersion = '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.

package/components/checkbox/demo/getting-started.min.js

@@ -1326,7 +1326,7 @@ class AuroHelpText extends i$2 {
   }
 }
 
-var formkitVersion = '202609231954';
+var formkitVersion = '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.

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

@@ -1326,7 +1326,7 @@ class AuroHelpText extends i$2 {
   }
 }
 
-var formkitVersion = '202609231954';
+var formkitVersion = '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.

package/components/checkbox/dist/index.js

@@ -1279,7 +1279,7 @@ class AuroHelpText extends LitElement {
   }
 }
 
-var formkitVersion = '202609231954';
+var formkitVersion = '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.

package/components/checkbox/dist/registered.js

@@ -1279,7 +1279,7 @@ class AuroHelpText extends LitElement {
   }
 }
 
-var formkitVersion = '202609231954';
+var formkitVersion = '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.

package/components/combobox/demo/customize.min.js

@@ -5108,7 +5108,7 @@ let AuroHelpText$2 = class AuroHelpText extends i$3 {
   }
 };
 
-var formkitVersion$2 = '202609231954';
+var formkitVersion$2 = '202609232032';
 
 /**
  * AuroElement is the shared base class for layout-aware Auro form components.
@@ -18977,7 +18977,7 @@ let AuroHelpText$1 = class AuroHelpText extends i$3 {
   }
 };
 
-var formkitVersion$1 = '202609231954';
+var formkitVersion$1 = '202609232032';
 
 // Copyright (c) 2025 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
 // See LICENSE in the project root for license information.
@@ -20169,7 +20169,7 @@ class AuroBibtemplate extends i$3 {
   }
 }
 
-var formkitVersion = '202609231954';
+var formkitVersion = '202609232032';
 
 var styleCss$3 = i$6`.util_displayInline{display:inline}.util_displayInlineBlock{display:inline-block}.util_displayBlock{display:block}.util_displayFlex{display:flex}.util_displayHidden{display:none}.util_displayHiddenVisually{position:absolute;overflow:hidden;clip:rect(1px, 1px, 1px, 1px);width:1px;height:1px;padding:0;border:0}:host{display:block;text-align:left}:host [auro-dropdown]{--ds-auro-dropdown-trigger-background-color: transparent}:host #inputInBib::part(wrapper){box-shadow:none}:host #inputInBib::part(accent-left){display:none}:host([layout*=classic]) [auro-input]{width:100%}:host([layout*=classic]) [auro-input]::part(helpText){display:none}:host([layout*=classic]) #slotHolder{display:none}`;
 

package/components/combobox/demo/getting-started.min.js

@@ -5108,7 +5108,7 @@ let AuroHelpText$2 = class AuroHelpText extends i$3 {
   }
 };
 
-var formkitVersion$2 = '202609231954';
+var formkitVersion$2 = '202609232032';
 
 /**
  * AuroElement is the shared base class for layout-aware Auro form components.
@@ -18977,7 +18977,7 @@ let AuroHelpText$1 = class AuroHelpText extends i$3 {
   }
 };
 
-var formkitVersion$1 = '202609231954';
+var formkitVersion$1 = '202609232032';
 
 // Copyright (c) 2025 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
 // See LICENSE in the project root for license information.
@@ -20169,7 +20169,7 @@ class AuroBibtemplate extends i$3 {
   }
 }
 
-var formkitVersion = '202609231954';
+var formkitVersion = '202609232032';
 
 var styleCss$3 = i$6`.util_displayInline{display:inline}.util_displayInlineBlock{display:inline-block}.util_displayBlock{display:block}.util_displayFlex{display:flex}.util_displayHidden{display:none}.util_displayHiddenVisually{position:absolute;overflow:hidden;clip:rect(1px, 1px, 1px, 1px);width:1px;height:1px;padding:0;border:0}:host{display:block;text-align:left}:host [auro-dropdown]{--ds-auro-dropdown-trigger-background-color: transparent}:host #inputInBib::part(wrapper){box-shadow:none}:host #inputInBib::part(accent-left){display:none}:host([layout*=classic]) [auro-input]{width:100%}:host([layout*=classic]) [auro-input]::part(helpText){display:none}:host([layout*=classic]) #slotHolder{display:none}`;
 

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

@@ -5123,7 +5123,7 @@ let AuroHelpText$2 = class AuroHelpText extends i$3 {
   }
 };
 
-var formkitVersion$2 = '202609231954';
+var formkitVersion$2 = '202609232032';
 
 /**
  * AuroElement is the shared base class for layout-aware Auro form components.
@@ -18992,7 +18992,7 @@ let AuroHelpText$1 = class AuroHelpText extends i$3 {
   }
 };
 
-var formkitVersion$1 = '202609231954';
+var formkitVersion$1 = '202609232032';
 
 // Copyright (c) 2025 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
 // See LICENSE in the project root for license information.
@@ -20184,7 +20184,7 @@ class AuroBibtemplate extends i$3 {
   }
 }
 
-var formkitVersion = '202609231954';
+var formkitVersion = '202609232032';
 
 var styleCss$3 = i$6`.util_displayInline{display:inline}.util_displayInlineBlock{display:inline-block}.util_displayBlock{display:block}.util_displayFlex{display:flex}.util_displayHidden{display:none}.util_displayHiddenVisually{position:absolute;overflow:hidden;clip:rect(1px, 1px, 1px, 1px);width:1px;height:1px;padding:0;border:0}:host{display:block;text-align:left}:host [auro-dropdown]{--ds-auro-dropdown-trigger-background-color: transparent}:host #inputInBib::part(wrapper){box-shadow:none}:host #inputInBib::part(accent-left){display:none}:host([layout*=classic]) [auro-input]{width:100%}:host([layout*=classic]) [auro-input]::part(helpText){display:none}:host([layout*=classic]) #slotHolder{display:none}`;
 

package/components/combobox/dist/index.js

@@ -5041,7 +5041,7 @@ let AuroHelpText$2 = class AuroHelpText extends LitElement {
   }
 };
 
-var formkitVersion$2 = '202609231954';
+var formkitVersion$2 = '202609232032';
 
 /**
  * AuroElement is the shared base class for layout-aware Auro form components.
@@ -18903,7 +18903,7 @@ let AuroHelpText$1 = class AuroHelpText extends LitElement {
   }
 };
 
-var formkitVersion$1 = '202609231954';
+var formkitVersion$1 = '202609232032';
 
 // Copyright (c) 2025 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
 // See LICENSE in the project root for license information.
@@ -20095,7 +20095,7 @@ class AuroBibtemplate extends LitElement {
   }
 }
 
-var formkitVersion = '202609231954';
+var formkitVersion = '202609232032';
 
 var styleCss$1 = css`.util_displayInline{display:inline}.util_displayInlineBlock{display:inline-block}.util_displayBlock{display:block}.util_displayFlex{display:flex}.util_displayHidden{display:none}.util_displayHiddenVisually{position:absolute;overflow:hidden;clip:rect(1px, 1px, 1px, 1px);width:1px;height:1px;padding:0;border:0}:host{display:block;text-align:left}:host [auro-dropdown]{--ds-auro-dropdown-trigger-background-color: transparent}:host #inputInBib::part(wrapper){box-shadow:none}:host #inputInBib::part(accent-left){display:none}:host([layout*=classic]) [auro-input]{width:100%}:host([layout*=classic]) [auro-input]::part(helpText){display:none}:host([layout*=classic]) #slotHolder{display:none}`;
 

package/components/combobox/dist/registered.js

@@ -5041,7 +5041,7 @@ let AuroHelpText$2 = class AuroHelpText extends LitElement {
   }
 };
 
-var formkitVersion$2 = '202609231954';
+var formkitVersion$2 = '202609232032';
 
 /**
  * AuroElement is the shared base class for layout-aware Auro form components.
@@ -18903,7 +18903,7 @@ let AuroHelpText$1 = class AuroHelpText extends LitElement {
   }
 };
 
-var formkitVersion$1 = '202609231954';
+var formkitVersion$1 = '202609232032';
 
 // Copyright (c) 2025 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
 // See LICENSE in the project root for license information.
@@ -20095,7 +20095,7 @@ class AuroBibtemplate extends LitElement {
   }
 }
 
-var formkitVersion = '202609231954';
+var formkitVersion = '202609232032';
 
 var styleCss$1 = css`.util_displayInline{display:inline}.util_displayInlineBlock{display:inline-block}.util_displayBlock{display:block}.util_displayFlex{display:flex}.util_displayHidden{display:none}.util_displayHiddenVisually{position:absolute;overflow:hidden;clip:rect(1px, 1px, 1px, 1px);width:1px;height:1px;padding:0;border:0}:host{display:block;text-align:left}:host [auro-dropdown]{--ds-auro-dropdown-trigger-background-color: transparent}:host #inputInBib::part(wrapper){box-shadow:none}:host #inputInBib::part(accent-left){display:none}:host([layout*=classic]) [auro-input]{width:100%}:host([layout*=classic]) [auro-input]::part(helpText){display:none}:host([layout*=classic]) #slotHolder{display:none}`;
 

package/components/counter/demo/api.md

@@ -41,9 +41,10 @@ The `auro-counter-group` element provides a flexible interface for grouping mult
 
 ## Events
 
-| Event   | Type                                             | Description                                      |
-|---------|--------------------------------------------------|--------------------------------------------------|
-| `input` | `CustomEvent<{ total: number \| undefined; value: {} \| undefined; }>` | Notifies that the counter group's value has changed. |
+| Event                       | Type                                             | Description                                      |
+|-----------------------------|--------------------------------------------------|--------------------------------------------------|
+| `auroFormElement-validated` | `CustomEvent<{ validity: any; message: string \| undefined; }>` | Notifies that the `validity` and `errorMessage` values have changed. |
+| `input`                     | `CustomEvent<{ total: number \| undefined; value: {} \| undefined; }>` | Notifies that the counter group's value has changed. |
 
 ## Slots
 

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

@@ -1129,7 +1129,7 @@ let AuroHelpText$1 = class AuroHelpText extends i$1 {
   }
 };
 
-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.
@@ -5489,7 +5489,7 @@ class AuroHelpText extends i$1 {
   }
 }
 
-var formkitVersion = '202609231954';
+var formkitVersion = '202609232032';
 
 /**
  * AuroElement is the shared base class for layout-aware Auro form components.
@@ -7885,6 +7885,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 {
@@ -8235,21 +8236,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$6``;
-
-    // Return messages as a TemplateResult
-    return messages.map(message => u$6`<p>${message}</p>`);
-  }
-
   /**
    * Gets and returns an array of counters in an invalid state.
    * @returns {Array<HTMLElement>} - Returns an array of invalid counters.
@@ -8273,55 +8259,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());
   }
 
   /**
@@ -8489,6 +8490,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/demo/getting-started.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
+          }
+        }));
+      }
+    }
   }
 
   /**