@aurodesignsystem-dev/auro-formkit 0.0.0-pr1130.0 → 0.0.0-pr1137.0

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

@@ -11093,6 +11093,8 @@ class BaseInput extends AuroElement$2$1 {
     this.inputElement = this.renderRoot.querySelector('input');
     this.labelElement = this.shadowRoot.querySelector('label');
 
+    this.patchInputEvent(this.inputElement);
+
     if (this.wrapperElement) {
       this.wrapperElement.addEventListener('click', this.handleClick);
     }
@@ -11117,6 +11119,52 @@ class BaseInput extends AuroElement$2$1 {
     this.configureAutoFormatting();
   }
 
+  /**
+   * Patches the input element to dispatch an 'input' event whenever its value is set programmatically.
+   * This ensures that changes to the input's value are consistently communicated, even if not triggered by user input.
+   *
+   * @param {HTMLInputElement} input - The input element to patch.
+   * @returns {void}
+   * @private
+   */
+  patchInputEvent(input) {
+    if (!input) return;
+    if (input && !input.valuePatched) {
+      const component = this; // eslint-disable-line
+      const nativeDescriptor = Object.getOwnPropertyDescriptor(HTMLInputElement.prototype, 'value');
+      Object.defineProperty(input, 'value', {
+        get() {
+          return nativeDescriptor.get.call(this);
+        },
+        set(val) {
+          // Call the native setter
+          nativeDescriptor.set.call(this, val);
+
+          // If the input is not connected to the DOM do not dispatch the event
+          if (!this.isConnected) return;
+
+          // If the input has focus, do not dispatch the event because it was not programmatic
+          if (this.matches(":focus")) return;
+
+          // If the component has flagged to skip the next programmatic input event, do not dispatch the event
+          if (component.skipNextProgrammaticInputEvent) {
+            component.skipNextProgrammaticInputEvent = false;
+            return;
+          }
+
+          // If all guard clauses are passed, dispatch the event
+          const inputEvent = new InputEvent('input', {
+            bubbles: true,
+            composed: true,
+          });
+          inputEvent.isProgrammatic = true;
+          this.dispatchEvent(inputEvent);
+        }
+      });
+      input.valuePatched = true;
+    }
+  }
+
   /**
    * @private
    * @returns {void} Sets the default help text for the input.
@@ -11191,6 +11239,7 @@ class BaseInput extends AuroElement$2$1 {
       }
 
       if (this.value !== this.inputElement.value) {
+        this.skipNextProgrammaticInputEvent = true;
         if (this.value) {
           this.inputElement.value = this.value;
         } else {
@@ -11333,15 +11382,20 @@ class BaseInput extends AuroElement$2$1 {
   }
 
   /**
+   * @param {Event} event - The input event
    * @private
-   * @return {void}
+   * @returns {void}
    */
-  handleInput() {
+  handleInput(event) {
     // Sets value property to value of element value (el.value).
     this.value = this.inputElement.value;
 
-    // Validation on blur or input.
-    if (this.validateOnInput) {
+    // Determine if the value change was programmatic, including autofill.
+    const inputWasProgrammatic = !this.matches(":focus") || event.isProgrammatic;
+
+    // Validation on input or programmatic value change (including autofill).
+    if (this.validateOnInput || inputWasProgrammatic) {
+      this.touched = true;
       this.validation.validate(this);
     }
 
@@ -15927,7 +15981,7 @@ class AuroBibtemplate extends i$2 {
 
 var bibTemplateVersion = '1.0.0';
 
-var styleCss$4 = i$5`.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 #inputInBib::part(accent-right){display:none}:host([layout*=classic]) [auro-input]{width:100%}:host([layout*=classic]) [auro-input]::part(helpText){display:none}:host([layout*=classic]) #slotHolder{display:none}`;
+var styleCss$4 = i$5`.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}`;
 
 var styleEmphasizedCss = i$5`:host([layout*=emphasized][shape*=pill]) [auro-input]{--ds-auro-input-background-color: var(--ds-advanced-color-dropdown-emphasized-background, rgba(0, 39, 74, 0.1019607843));--ds-auro-input-container-color: var(--ds-advanced-color-dropdown-emphasized-background, rgba(0, 39, 74, 0.1019607843));width:100%}:host([layout*=emphasized][shape*=pill]) [auro-input]:hover{--ds-auro-input-background-color: var(--ds-advanced-color-dropdown-emphasized-background, rgba(0, 39, 74, 0.1019607843));--ds-auro-input-container-color: var(--ds-advanced-color-dropdown-emphasized-background, rgba(0, 39, 74, 0.1019607843))}:host([layout*=emphasized][shape*=pill]) [auro-input]::part(inputHelpText){display:none}:host([layout=emphasized]) [auro-dropdown]{--ds-auro-dropdown-trigger-background-color: var(--ds-advanced-color-dropdown-emphasized-background, rgba(0, 39, 74, 0.1019607843))}:host([layout=emphasized]) [auro-dropdown]:hover{--ds-auro-dropdown-trigger-hover-background-color: var(--ds-advanced-color-dropdown-emphasized-background, rgba(0, 39, 74, 0.1019607843))}:host([layout=emphasized]) [auro-dropdown][layout*=emphasized]::part(wrapper){--ds-auro-dropdown-trigger-background-color: transparent}`;
 

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

@@ -10965,6 +10965,8 @@ class BaseInput extends AuroElement$2$1 {
     this.inputElement = this.renderRoot.querySelector('input');
     this.labelElement = this.shadowRoot.querySelector('label');
 
+    this.patchInputEvent(this.inputElement);
+
     if (this.wrapperElement) {
       this.wrapperElement.addEventListener('click', this.handleClick);
     }
@@ -10989,6 +10991,52 @@ class BaseInput extends AuroElement$2$1 {
     this.configureAutoFormatting();
   }
 
+  /**
+   * Patches the input element to dispatch an 'input' event whenever its value is set programmatically.
+   * This ensures that changes to the input's value are consistently communicated, even if not triggered by user input.
+   *
+   * @param {HTMLInputElement} input - The input element to patch.
+   * @returns {void}
+   * @private
+   */
+  patchInputEvent(input) {
+    if (!input) return;
+    if (input && !input.valuePatched) {
+      const component = this; // eslint-disable-line
+      const nativeDescriptor = Object.getOwnPropertyDescriptor(HTMLInputElement.prototype, 'value');
+      Object.defineProperty(input, 'value', {
+        get() {
+          return nativeDescriptor.get.call(this);
+        },
+        set(val) {
+          // Call the native setter
+          nativeDescriptor.set.call(this, val);
+
+          // If the input is not connected to the DOM do not dispatch the event
+          if (!this.isConnected) return;
+
+          // If the input has focus, do not dispatch the event because it was not programmatic
+          if (this.matches(":focus")) return;
+
+          // If the component has flagged to skip the next programmatic input event, do not dispatch the event
+          if (component.skipNextProgrammaticInputEvent) {
+            component.skipNextProgrammaticInputEvent = false;
+            return;
+          }
+
+          // If all guard clauses are passed, dispatch the event
+          const inputEvent = new InputEvent('input', {
+            bubbles: true,
+            composed: true,
+          });
+          inputEvent.isProgrammatic = true;
+          this.dispatchEvent(inputEvent);
+        }
+      });
+      input.valuePatched = true;
+    }
+  }
+
   /**
    * @private
    * @returns {void} Sets the default help text for the input.
@@ -11063,6 +11111,7 @@ class BaseInput extends AuroElement$2$1 {
       }
 
       if (this.value !== this.inputElement.value) {
+        this.skipNextProgrammaticInputEvent = true;
         if (this.value) {
           this.inputElement.value = this.value;
         } else {
@@ -11205,15 +11254,20 @@ class BaseInput extends AuroElement$2$1 {
   }
 
   /**
+   * @param {Event} event - The input event
    * @private
-   * @return {void}
+   * @returns {void}
    */
-  handleInput() {
+  handleInput(event) {
     // Sets value property to value of element value (el.value).
     this.value = this.inputElement.value;
 
-    // Validation on blur or input.
-    if (this.validateOnInput) {
+    // Determine if the value change was programmatic, including autofill.
+    const inputWasProgrammatic = !this.matches(":focus") || event.isProgrammatic;
+
+    // Validation on input or programmatic value change (including autofill).
+    if (this.validateOnInput || inputWasProgrammatic) {
+      this.touched = true;
       this.validation.validate(this);
     }
 
@@ -15799,7 +15853,7 @@ class AuroBibtemplate extends i$2 {
 
 var bibTemplateVersion = '1.0.0';
 
-var styleCss$4 = i$5`.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 #inputInBib::part(accent-right){display:none}:host([layout*=classic]) [auro-input]{width:100%}:host([layout*=classic]) [auro-input]::part(helpText){display:none}:host([layout*=classic]) #slotHolder{display:none}`;
+var styleCss$4 = i$5`.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}`;
 
 var styleEmphasizedCss = i$5`:host([layout*=emphasized][shape*=pill]) [auro-input]{--ds-auro-input-background-color: var(--ds-advanced-color-dropdown-emphasized-background, rgba(0, 39, 74, 0.1019607843));--ds-auro-input-container-color: var(--ds-advanced-color-dropdown-emphasized-background, rgba(0, 39, 74, 0.1019607843));width:100%}:host([layout*=emphasized][shape*=pill]) [auro-input]:hover{--ds-auro-input-background-color: var(--ds-advanced-color-dropdown-emphasized-background, rgba(0, 39, 74, 0.1019607843));--ds-auro-input-container-color: var(--ds-advanced-color-dropdown-emphasized-background, rgba(0, 39, 74, 0.1019607843))}:host([layout*=emphasized][shape*=pill]) [auro-input]::part(inputHelpText){display:none}:host([layout=emphasized]) [auro-dropdown]{--ds-auro-dropdown-trigger-background-color: var(--ds-advanced-color-dropdown-emphasized-background, rgba(0, 39, 74, 0.1019607843))}:host([layout=emphasized]) [auro-dropdown]:hover{--ds-auro-dropdown-trigger-hover-background-color: var(--ds-advanced-color-dropdown-emphasized-background, rgba(0, 39, 74, 0.1019607843))}:host([layout=emphasized]) [auro-dropdown][layout*=emphasized]::part(wrapper){--ds-auro-dropdown-trigger-background-color: transparent}`;
 

package/components/combobox/dist/index.js

@@ -10872,6 +10872,8 @@ class BaseInput extends AuroElement$2$1 {
     this.inputElement = this.renderRoot.querySelector('input');
     this.labelElement = this.shadowRoot.querySelector('label');
 
+    this.patchInputEvent(this.inputElement);
+
     if (this.wrapperElement) {
       this.wrapperElement.addEventListener('click', this.handleClick);
     }
@@ -10896,6 +10898,52 @@ class BaseInput extends AuroElement$2$1 {
     this.configureAutoFormatting();
   }
 
+  /**
+   * Patches the input element to dispatch an 'input' event whenever its value is set programmatically.
+   * This ensures that changes to the input's value are consistently communicated, even if not triggered by user input.
+   *
+   * @param {HTMLInputElement} input - The input element to patch.
+   * @returns {void}
+   * @private
+   */
+  patchInputEvent(input) {
+    if (!input) return;
+    if (input && !input.valuePatched) {
+      const component = this; // eslint-disable-line
+      const nativeDescriptor = Object.getOwnPropertyDescriptor(HTMLInputElement.prototype, 'value');
+      Object.defineProperty(input, 'value', {
+        get() {
+          return nativeDescriptor.get.call(this);
+        },
+        set(val) {
+          // Call the native setter
+          nativeDescriptor.set.call(this, val);
+
+          // If the input is not connected to the DOM do not dispatch the event
+          if (!this.isConnected) return;
+
+          // If the input has focus, do not dispatch the event because it was not programmatic
+          if (this.matches(":focus")) return;
+
+          // If the component has flagged to skip the next programmatic input event, do not dispatch the event
+          if (component.skipNextProgrammaticInputEvent) {
+            component.skipNextProgrammaticInputEvent = false;
+            return;
+          }
+
+          // If all guard clauses are passed, dispatch the event
+          const inputEvent = new InputEvent('input', {
+            bubbles: true,
+            composed: true,
+          });
+          inputEvent.isProgrammatic = true;
+          this.dispatchEvent(inputEvent);
+        }
+      });
+      input.valuePatched = true;
+    }
+  }
+
   /**
    * @private
    * @returns {void} Sets the default help text for the input.
@@ -10970,6 +11018,7 @@ class BaseInput extends AuroElement$2$1 {
       }
 
       if (this.value !== this.inputElement.value) {
+        this.skipNextProgrammaticInputEvent = true;
         if (this.value) {
           this.inputElement.value = this.value;
         } else {
@@ -11112,15 +11161,20 @@ class BaseInput extends AuroElement$2$1 {
   }
 
   /**
+   * @param {Event} event - The input event
    * @private
-   * @return {void}
+   * @returns {void}
    */
-  handleInput() {
+  handleInput(event) {
     // Sets value property to value of element value (el.value).
     this.value = this.inputElement.value;
 
-    // Validation on blur or input.
-    if (this.validateOnInput) {
+    // Determine if the value change was programmatic, including autofill.
+    const inputWasProgrammatic = !this.matches(":focus") || event.isProgrammatic;
+
+    // Validation on input or programmatic value change (including autofill).
+    if (this.validateOnInput || inputWasProgrammatic) {
+      this.touched = true;
       this.validation.validate(this);
     }
 
@@ -15706,7 +15760,7 @@ class AuroBibtemplate extends LitElement {
 
 var bibTemplateVersion = '1.0.0';
 
-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 #inputInBib::part(accent-right){display:none}:host([layout*=classic]) [auro-input]{width:100%}:host([layout*=classic]) [auro-input]::part(helpText){display:none}:host([layout*=classic]) #slotHolder{display:none}`;
+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}`;
 
 var styleEmphasizedCss = css`:host([layout*=emphasized][shape*=pill]) [auro-input]{--ds-auro-input-background-color: var(--ds-advanced-color-dropdown-emphasized-background, rgba(0, 39, 74, 0.1019607843));--ds-auro-input-container-color: var(--ds-advanced-color-dropdown-emphasized-background, rgba(0, 39, 74, 0.1019607843));width:100%}:host([layout*=emphasized][shape*=pill]) [auro-input]:hover{--ds-auro-input-background-color: var(--ds-advanced-color-dropdown-emphasized-background, rgba(0, 39, 74, 0.1019607843));--ds-auro-input-container-color: var(--ds-advanced-color-dropdown-emphasized-background, rgba(0, 39, 74, 0.1019607843))}:host([layout*=emphasized][shape*=pill]) [auro-input]::part(inputHelpText){display:none}:host([layout=emphasized]) [auro-dropdown]{--ds-auro-dropdown-trigger-background-color: var(--ds-advanced-color-dropdown-emphasized-background, rgba(0, 39, 74, 0.1019607843))}:host([layout=emphasized]) [auro-dropdown]:hover{--ds-auro-dropdown-trigger-hover-background-color: var(--ds-advanced-color-dropdown-emphasized-background, rgba(0, 39, 74, 0.1019607843))}:host([layout=emphasized]) [auro-dropdown][layout*=emphasized]::part(wrapper){--ds-auro-dropdown-trigger-background-color: transparent}`;
 

package/components/combobox/dist/registered.js

@@ -10872,6 +10872,8 @@ class BaseInput extends AuroElement$2$1 {
     this.inputElement = this.renderRoot.querySelector('input');
     this.labelElement = this.shadowRoot.querySelector('label');
 
+    this.patchInputEvent(this.inputElement);
+
     if (this.wrapperElement) {
       this.wrapperElement.addEventListener('click', this.handleClick);
     }
@@ -10896,6 +10898,52 @@ class BaseInput extends AuroElement$2$1 {
     this.configureAutoFormatting();
   }
 
+  /**
+   * Patches the input element to dispatch an 'input' event whenever its value is set programmatically.
+   * This ensures that changes to the input's value are consistently communicated, even if not triggered by user input.
+   *
+   * @param {HTMLInputElement} input - The input element to patch.
+   * @returns {void}
+   * @private
+   */
+  patchInputEvent(input) {
+    if (!input) return;
+    if (input && !input.valuePatched) {
+      const component = this; // eslint-disable-line
+      const nativeDescriptor = Object.getOwnPropertyDescriptor(HTMLInputElement.prototype, 'value');
+      Object.defineProperty(input, 'value', {
+        get() {
+          return nativeDescriptor.get.call(this);
+        },
+        set(val) {
+          // Call the native setter
+          nativeDescriptor.set.call(this, val);
+
+          // If the input is not connected to the DOM do not dispatch the event
+          if (!this.isConnected) return;
+
+          // If the input has focus, do not dispatch the event because it was not programmatic
+          if (this.matches(":focus")) return;
+
+          // If the component has flagged to skip the next programmatic input event, do not dispatch the event
+          if (component.skipNextProgrammaticInputEvent) {
+            component.skipNextProgrammaticInputEvent = false;
+            return;
+          }
+
+          // If all guard clauses are passed, dispatch the event
+          const inputEvent = new InputEvent('input', {
+            bubbles: true,
+            composed: true,
+          });
+          inputEvent.isProgrammatic = true;
+          this.dispatchEvent(inputEvent);
+        }
+      });
+      input.valuePatched = true;
+    }
+  }
+
   /**
    * @private
    * @returns {void} Sets the default help text for the input.
@@ -10970,6 +11018,7 @@ class BaseInput extends AuroElement$2$1 {
       }
 
       if (this.value !== this.inputElement.value) {
+        this.skipNextProgrammaticInputEvent = true;
         if (this.value) {
           this.inputElement.value = this.value;
         } else {
@@ -11112,15 +11161,20 @@ class BaseInput extends AuroElement$2$1 {
   }
 
   /**
+   * @param {Event} event - The input event
    * @private
-   * @return {void}
+   * @returns {void}
    */
-  handleInput() {
+  handleInput(event) {
     // Sets value property to value of element value (el.value).
     this.value = this.inputElement.value;
 
-    // Validation on blur or input.
-    if (this.validateOnInput) {
+    // Determine if the value change was programmatic, including autofill.
+    const inputWasProgrammatic = !this.matches(":focus") || event.isProgrammatic;
+
+    // Validation on input or programmatic value change (including autofill).
+    if (this.validateOnInput || inputWasProgrammatic) {
+      this.touched = true;
       this.validation.validate(this);
     }
 
@@ -15706,7 +15760,7 @@ class AuroBibtemplate extends LitElement {
 
 var bibTemplateVersion = '1.0.0';
 
-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 #inputInBib::part(accent-right){display:none}:host([layout*=classic]) [auro-input]{width:100%}:host([layout*=classic]) [auro-input]::part(helpText){display:none}:host([layout*=classic]) #slotHolder{display:none}`;
+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}`;
 
 var styleEmphasizedCss = css`:host([layout*=emphasized][shape*=pill]) [auro-input]{--ds-auro-input-background-color: var(--ds-advanced-color-dropdown-emphasized-background, rgba(0, 39, 74, 0.1019607843));--ds-auro-input-container-color: var(--ds-advanced-color-dropdown-emphasized-background, rgba(0, 39, 74, 0.1019607843));width:100%}:host([layout*=emphasized][shape*=pill]) [auro-input]:hover{--ds-auro-input-background-color: var(--ds-advanced-color-dropdown-emphasized-background, rgba(0, 39, 74, 0.1019607843));--ds-auro-input-container-color: var(--ds-advanced-color-dropdown-emphasized-background, rgba(0, 39, 74, 0.1019607843))}:host([layout*=emphasized][shape*=pill]) [auro-input]::part(inputHelpText){display:none}:host([layout=emphasized]) [auro-dropdown]{--ds-auro-dropdown-trigger-background-color: var(--ds-advanced-color-dropdown-emphasized-background, rgba(0, 39, 74, 0.1019607843))}:host([layout=emphasized]) [auro-dropdown]:hover{--ds-auro-dropdown-trigger-hover-background-color: var(--ds-advanced-color-dropdown-emphasized-background, rgba(0, 39, 74, 0.1019607843))}:host([layout=emphasized]) [auro-dropdown][layout*=emphasized]::part(wrapper){--ds-auro-dropdown-trigger-background-color: transparent}`;
 

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

@@ -24483,6 +24483,8 @@ class BaseInput extends AuroElement$2 {
     this.inputElement = this.renderRoot.querySelector('input');
     this.labelElement = this.shadowRoot.querySelector('label');
 
+    this.patchInputEvent(this.inputElement);
+
     if (this.wrapperElement) {
       this.wrapperElement.addEventListener('click', this.handleClick);
     }
@@ -24507,6 +24509,52 @@ class BaseInput extends AuroElement$2 {
     this.configureAutoFormatting();
   }
 
+  /**
+   * Patches the input element to dispatch an 'input' event whenever its value is set programmatically.
+   * This ensures that changes to the input's value are consistently communicated, even if not triggered by user input.
+   *
+   * @param {HTMLInputElement} input - The input element to patch.
+   * @returns {void}
+   * @private
+   */
+  patchInputEvent(input) {
+    if (!input) return;
+    if (input && !input.valuePatched) {
+      const component = this; // eslint-disable-line
+      const nativeDescriptor = Object.getOwnPropertyDescriptor(HTMLInputElement.prototype, 'value');
+      Object.defineProperty(input, 'value', {
+        get() {
+          return nativeDescriptor.get.call(this);
+        },
+        set(val) {
+          // Call the native setter
+          nativeDescriptor.set.call(this, val);
+
+          // If the input is not connected to the DOM do not dispatch the event
+          if (!this.isConnected) return;
+
+          // If the input has focus, do not dispatch the event because it was not programmatic
+          if (this.matches(":focus")) return;
+
+          // If the component has flagged to skip the next programmatic input event, do not dispatch the event
+          if (component.skipNextProgrammaticInputEvent) {
+            component.skipNextProgrammaticInputEvent = false;
+            return;
+          }
+
+          // If all guard clauses are passed, dispatch the event
+          const inputEvent = new InputEvent('input', {
+            bubbles: true,
+            composed: true,
+          });
+          inputEvent.isProgrammatic = true;
+          this.dispatchEvent(inputEvent);
+        }
+      });
+      input.valuePatched = true;
+    }
+  }
+
   /**
    * @private
    * @returns {void} Sets the default help text for the input.
@@ -24581,6 +24629,7 @@ class BaseInput extends AuroElement$2 {
       }
 
       if (this.value !== this.inputElement.value) {
+        this.skipNextProgrammaticInputEvent = true;
         if (this.value) {
           this.inputElement.value = this.value;
         } else {
@@ -24723,15 +24772,20 @@ class BaseInput extends AuroElement$2 {
   }
 
   /**
+   * @param {Event} event - The input event
    * @private
-   * @return {void}
+   * @returns {void}
    */
-  handleInput() {
+  handleInput(event) {
     // Sets value property to value of element value (el.value).
     this.value = this.inputElement.value;
 
-    // Validation on blur or input.
-    if (this.validateOnInput) {
+    // Determine if the value change was programmatic, including autofill.
+    const inputWasProgrammatic = !this.matches(":focus") || event.isProgrammatic;
+
+    // Validation on input or programmatic value change (including autofill).
+    if (this.validateOnInput || inputWasProgrammatic) {
+      this.touched = true;
       this.validation.validate(this);
     }
 
@@ -29349,6 +29403,7 @@ class AuroDatePicker extends AuroElement$1 {
     }
 
     if (changedProperties.has('value')) {
+
       this.formattedValue = this.util.toNorthAmericanFormat(this.value, this.format);
 
       // Change the calendar focus to the first valid date value only the first time the value is set
@@ -29397,6 +29452,7 @@ class AuroDatePicker extends AuroElement$1 {
     }
 
     if (changedProperties.has('valueEnd') && this.inputList[1]) {
+
       this.formattedValueEnd = this.util.toNorthAmericanFormat(this.valueEnd, this.format);
 
       // update the calendar

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

@@ -24224,6 +24224,8 @@ class BaseInput extends AuroElement$2 {
     this.inputElement = this.renderRoot.querySelector('input');
     this.labelElement = this.shadowRoot.querySelector('label');
 
+    this.patchInputEvent(this.inputElement);
+
     if (this.wrapperElement) {
       this.wrapperElement.addEventListener('click', this.handleClick);
     }
@@ -24248,6 +24250,52 @@ class BaseInput extends AuroElement$2 {
     this.configureAutoFormatting();
   }
 
+  /**
+   * Patches the input element to dispatch an 'input' event whenever its value is set programmatically.
+   * This ensures that changes to the input's value are consistently communicated, even if not triggered by user input.
+   *
+   * @param {HTMLInputElement} input - The input element to patch.
+   * @returns {void}
+   * @private
+   */
+  patchInputEvent(input) {
+    if (!input) return;
+    if (input && !input.valuePatched) {
+      const component = this; // eslint-disable-line
+      const nativeDescriptor = Object.getOwnPropertyDescriptor(HTMLInputElement.prototype, 'value');
+      Object.defineProperty(input, 'value', {
+        get() {
+          return nativeDescriptor.get.call(this);
+        },
+        set(val) {
+          // Call the native setter
+          nativeDescriptor.set.call(this, val);
+
+          // If the input is not connected to the DOM do not dispatch the event
+          if (!this.isConnected) return;
+
+          // If the input has focus, do not dispatch the event because it was not programmatic
+          if (this.matches(":focus")) return;
+
+          // If the component has flagged to skip the next programmatic input event, do not dispatch the event
+          if (component.skipNextProgrammaticInputEvent) {
+            component.skipNextProgrammaticInputEvent = false;
+            return;
+          }
+
+          // If all guard clauses are passed, dispatch the event
+          const inputEvent = new InputEvent('input', {
+            bubbles: true,
+            composed: true,
+          });
+          inputEvent.isProgrammatic = true;
+          this.dispatchEvent(inputEvent);
+        }
+      });
+      input.valuePatched = true;
+    }
+  }
+
   /**
    * @private
    * @returns {void} Sets the default help text for the input.
@@ -24322,6 +24370,7 @@ class BaseInput extends AuroElement$2 {
       }
 
       if (this.value !== this.inputElement.value) {
+        this.skipNextProgrammaticInputEvent = true;
         if (this.value) {
           this.inputElement.value = this.value;
         } else {
@@ -24464,15 +24513,20 @@ class BaseInput extends AuroElement$2 {
   }
 
   /**
+   * @param {Event} event - The input event
    * @private
-   * @return {void}
+   * @returns {void}
    */
-  handleInput() {
+  handleInput(event) {
     // Sets value property to value of element value (el.value).
     this.value = this.inputElement.value;
 
-    // Validation on blur or input.
-    if (this.validateOnInput) {
+    // Determine if the value change was programmatic, including autofill.
+    const inputWasProgrammatic = !this.matches(":focus") || event.isProgrammatic;
+
+    // Validation on input or programmatic value change (including autofill).
+    if (this.validateOnInput || inputWasProgrammatic) {
+      this.touched = true;
       this.validation.validate(this);
     }
 
@@ -29090,6 +29144,7 @@ class AuroDatePicker extends AuroElement$1 {
     }
 
     if (changedProperties.has('value')) {
+
       this.formattedValue = this.util.toNorthAmericanFormat(this.value, this.format);
 
       // Change the calendar focus to the first valid date value only the first time the value is set
@@ -29138,6 +29193,7 @@ class AuroDatePicker extends AuroElement$1 {
     }
 
     if (changedProperties.has('valueEnd') && this.inputList[1]) {
+
       this.formattedValueEnd = this.util.toNorthAmericanFormat(this.valueEnd, this.format);
 
       // update the calendar

package/components/datepicker/dist/index.js

@@ -24149,6 +24149,8 @@ class BaseInput extends AuroElement$2 {
     this.inputElement = this.renderRoot.querySelector('input');
     this.labelElement = this.shadowRoot.querySelector('label');
 
+    this.patchInputEvent(this.inputElement);
+
     if (this.wrapperElement) {
       this.wrapperElement.addEventListener('click', this.handleClick);
     }
@@ -24173,6 +24175,52 @@ class BaseInput extends AuroElement$2 {
     this.configureAutoFormatting();
   }
 
+  /**
+   * Patches the input element to dispatch an 'input' event whenever its value is set programmatically.
+   * This ensures that changes to the input's value are consistently communicated, even if not triggered by user input.
+   *
+   * @param {HTMLInputElement} input - The input element to patch.
+   * @returns {void}
+   * @private
+   */
+  patchInputEvent(input) {
+    if (!input) return;
+    if (input && !input.valuePatched) {
+      const component = this; // eslint-disable-line
+      const nativeDescriptor = Object.getOwnPropertyDescriptor(HTMLInputElement.prototype, 'value');
+      Object.defineProperty(input, 'value', {
+        get() {
+          return nativeDescriptor.get.call(this);
+        },
+        set(val) {
+          // Call the native setter
+          nativeDescriptor.set.call(this, val);
+
+          // If the input is not connected to the DOM do not dispatch the event
+          if (!this.isConnected) return;
+
+          // If the input has focus, do not dispatch the event because it was not programmatic
+          if (this.matches(":focus")) return;
+
+          // If the component has flagged to skip the next programmatic input event, do not dispatch the event
+          if (component.skipNextProgrammaticInputEvent) {
+            component.skipNextProgrammaticInputEvent = false;
+            return;
+          }
+
+          // If all guard clauses are passed, dispatch the event
+          const inputEvent = new InputEvent('input', {
+            bubbles: true,
+            composed: true,
+          });
+          inputEvent.isProgrammatic = true;
+          this.dispatchEvent(inputEvent);
+        }
+      });
+      input.valuePatched = true;
+    }
+  }
+
   /**
    * @private
    * @returns {void} Sets the default help text for the input.
@@ -24247,6 +24295,7 @@ class BaseInput extends AuroElement$2 {
       }
 
       if (this.value !== this.inputElement.value) {
+        this.skipNextProgrammaticInputEvent = true;
         if (this.value) {
           this.inputElement.value = this.value;
         } else {
@@ -24389,15 +24438,20 @@ class BaseInput extends AuroElement$2 {
   }
 
   /**
+   * @param {Event} event - The input event
    * @private
-   * @return {void}
+   * @returns {void}
    */
-  handleInput() {
+  handleInput(event) {
     // Sets value property to value of element value (el.value).
     this.value = this.inputElement.value;
 
-    // Validation on blur or input.
-    if (this.validateOnInput) {
+    // Determine if the value change was programmatic, including autofill.
+    const inputWasProgrammatic = !this.matches(":focus") || event.isProgrammatic;
+
+    // Validation on input or programmatic value change (including autofill).
+    if (this.validateOnInput || inputWasProgrammatic) {
+      this.touched = true;
       this.validation.validate(this);
     }
 
@@ -29015,6 +29069,7 @@ class AuroDatePicker extends AuroElement$1 {
     }
 
     if (changedProperties.has('value')) {
+
       this.formattedValue = this.util.toNorthAmericanFormat(this.value, this.format);
 
       // Change the calendar focus to the first valid date value only the first time the value is set
@@ -29063,6 +29118,7 @@ class AuroDatePicker extends AuroElement$1 {
     }
 
     if (changedProperties.has('valueEnd') && this.inputList[1]) {
+
       this.formattedValueEnd = this.util.toNorthAmericanFormat(this.valueEnd, this.format);
 
       // update the calendar

package/components/datepicker/dist/registered.js

@@ -24149,6 +24149,8 @@ class BaseInput extends AuroElement$2 {
     this.inputElement = this.renderRoot.querySelector('input');
     this.labelElement = this.shadowRoot.querySelector('label');
 
+    this.patchInputEvent(this.inputElement);
+
     if (this.wrapperElement) {
       this.wrapperElement.addEventListener('click', this.handleClick);
     }
@@ -24173,6 +24175,52 @@ class BaseInput extends AuroElement$2 {
     this.configureAutoFormatting();
   }
 
+  /**
+   * Patches the input element to dispatch an 'input' event whenever its value is set programmatically.
+   * This ensures that changes to the input's value are consistently communicated, even if not triggered by user input.
+   *
+   * @param {HTMLInputElement} input - The input element to patch.
+   * @returns {void}
+   * @private
+   */
+  patchInputEvent(input) {
+    if (!input) return;
+    if (input && !input.valuePatched) {
+      const component = this; // eslint-disable-line
+      const nativeDescriptor = Object.getOwnPropertyDescriptor(HTMLInputElement.prototype, 'value');
+      Object.defineProperty(input, 'value', {
+        get() {
+          return nativeDescriptor.get.call(this);
+        },
+        set(val) {
+          // Call the native setter
+          nativeDescriptor.set.call(this, val);
+
+          // If the input is not connected to the DOM do not dispatch the event
+          if (!this.isConnected) return;
+
+          // If the input has focus, do not dispatch the event because it was not programmatic
+          if (this.matches(":focus")) return;
+
+          // If the component has flagged to skip the next programmatic input event, do not dispatch the event
+          if (component.skipNextProgrammaticInputEvent) {
+            component.skipNextProgrammaticInputEvent = false;
+            return;
+          }
+
+          // If all guard clauses are passed, dispatch the event
+          const inputEvent = new InputEvent('input', {
+            bubbles: true,
+            composed: true,
+          });
+          inputEvent.isProgrammatic = true;
+          this.dispatchEvent(inputEvent);
+        }
+      });
+      input.valuePatched = true;
+    }
+  }
+
   /**
    * @private
    * @returns {void} Sets the default help text for the input.
@@ -24247,6 +24295,7 @@ class BaseInput extends AuroElement$2 {
       }
 
       if (this.value !== this.inputElement.value) {
+        this.skipNextProgrammaticInputEvent = true;
         if (this.value) {
           this.inputElement.value = this.value;
         } else {
@@ -24389,15 +24438,20 @@ class BaseInput extends AuroElement$2 {
   }
 
   /**
+   * @param {Event} event - The input event
    * @private
-   * @return {void}
+   * @returns {void}
    */
-  handleInput() {
+  handleInput(event) {
     // Sets value property to value of element value (el.value).
     this.value = this.inputElement.value;
 
-    // Validation on blur or input.
-    if (this.validateOnInput) {
+    // Determine if the value change was programmatic, including autofill.
+    const inputWasProgrammatic = !this.matches(":focus") || event.isProgrammatic;
+
+    // Validation on input or programmatic value change (including autofill).
+    if (this.validateOnInput || inputWasProgrammatic) {
+      this.touched = true;
       this.validation.validate(this);
     }
 
@@ -29015,6 +29069,7 @@ class AuroDatePicker extends AuroElement$1 {
     }
 
     if (changedProperties.has('value')) {
+
       this.formattedValue = this.util.toNorthAmericanFormat(this.value, this.format);
 
       // Change the calendar focus to the first valid date value only the first time the value is set
@@ -29063,6 +29118,7 @@ class AuroDatePicker extends AuroElement$1 {
     }
 
     if (changedProperties.has('valueEnd') && this.inputList[1]) {
+
       this.formattedValueEnd = this.util.toNorthAmericanFormat(this.valueEnd, this.format);
 
       // update the calendar

package/components/input/demo/api.md

@@ -70,7 +70,7 @@ Generate unique names for dependency components.
 |-----------------------------|--------------------|--------------------------------------------------|
 | `auroFormElement-validated` |                    | Notifies that the `validity` and `errorMessage` value has changed. |
 | `auroInput-validityChange`  | `CustomEvent<any>` |                                                  |
-| [input](#input)                     |                    | Event fires when the value of an `auro-input` has been changed. |
+| [input](#input)                     | `InputEvent`       | Event fires when the value of an `auro-input` has been changed. |
 
 ## Slots
 

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

@@ -5623,6 +5623,8 @@ class BaseInput extends AuroElement$2 {
     this.inputElement = this.renderRoot.querySelector('input');
     this.labelElement = this.shadowRoot.querySelector('label');
 
+    this.patchInputEvent(this.inputElement);
+
     if (this.wrapperElement) {
       this.wrapperElement.addEventListener('click', this.handleClick);
     }
@@ -5647,6 +5649,52 @@ class BaseInput extends AuroElement$2 {
     this.configureAutoFormatting();
   }
 
+  /**
+   * Patches the input element to dispatch an 'input' event whenever its value is set programmatically.
+   * This ensures that changes to the input's value are consistently communicated, even if not triggered by user input.
+   *
+   * @param {HTMLInputElement} input - The input element to patch.
+   * @returns {void}
+   * @private
+   */
+  patchInputEvent(input) {
+    if (!input) return;
+    if (input && !input.valuePatched) {
+      const component = this; // eslint-disable-line
+      const nativeDescriptor = Object.getOwnPropertyDescriptor(HTMLInputElement.prototype, 'value');
+      Object.defineProperty(input, 'value', {
+        get() {
+          return nativeDescriptor.get.call(this);
+        },
+        set(val) {
+          // Call the native setter
+          nativeDescriptor.set.call(this, val);
+
+          // If the input is not connected to the DOM do not dispatch the event
+          if (!this.isConnected) return;
+
+          // If the input has focus, do not dispatch the event because it was not programmatic
+          if (this.matches(":focus")) return;
+
+          // If the component has flagged to skip the next programmatic input event, do not dispatch the event
+          if (component.skipNextProgrammaticInputEvent) {
+            component.skipNextProgrammaticInputEvent = false;
+            return;
+          }
+
+          // If all guard clauses are passed, dispatch the event
+          const inputEvent = new InputEvent('input', {
+            bubbles: true,
+            composed: true,
+          });
+          inputEvent.isProgrammatic = true;
+          this.dispatchEvent(inputEvent);
+        }
+      });
+      input.valuePatched = true;
+    }
+  }
+
   /**
    * @private
    * @returns {void} Sets the default help text for the input.
@@ -5721,6 +5769,7 @@ class BaseInput extends AuroElement$2 {
       }
 
       if (this.value !== this.inputElement.value) {
+        this.skipNextProgrammaticInputEvent = true;
         if (this.value) {
           this.inputElement.value = this.value;
         } else {
@@ -5863,15 +5912,20 @@ class BaseInput extends AuroElement$2 {
   }
 
   /**
+   * @param {Event} event - The input event
    * @private
-   * @return {void}
+   * @returns {void}
    */
-  handleInput() {
+  handleInput(event) {
     // Sets value property to value of element value (el.value).
     this.value = this.inputElement.value;
 
-    // Validation on blur or input.
-    if (this.validateOnInput) {
+    // Determine if the value change was programmatic, including autofill.
+    const inputWasProgrammatic = !this.matches(":focus") || event.isProgrammatic;
+
+    // Validation on input or programmatic value change (including autofill).
+    if (this.validateOnInput || inputWasProgrammatic) {
+      this.touched = true;
       this.validation.validate(this);
     }
 

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

@@ -5548,6 +5548,8 @@ class BaseInput extends AuroElement$2 {
     this.inputElement = this.renderRoot.querySelector('input');
     this.labelElement = this.shadowRoot.querySelector('label');
 
+    this.patchInputEvent(this.inputElement);
+
     if (this.wrapperElement) {
       this.wrapperElement.addEventListener('click', this.handleClick);
     }
@@ -5572,6 +5574,52 @@ class BaseInput extends AuroElement$2 {
     this.configureAutoFormatting();
   }
 
+  /**
+   * Patches the input element to dispatch an 'input' event whenever its value is set programmatically.
+   * This ensures that changes to the input's value are consistently communicated, even if not triggered by user input.
+   *
+   * @param {HTMLInputElement} input - The input element to patch.
+   * @returns {void}
+   * @private
+   */
+  patchInputEvent(input) {
+    if (!input) return;
+    if (input && !input.valuePatched) {
+      const component = this; // eslint-disable-line
+      const nativeDescriptor = Object.getOwnPropertyDescriptor(HTMLInputElement.prototype, 'value');
+      Object.defineProperty(input, 'value', {
+        get() {
+          return nativeDescriptor.get.call(this);
+        },
+        set(val) {
+          // Call the native setter
+          nativeDescriptor.set.call(this, val);
+
+          // If the input is not connected to the DOM do not dispatch the event
+          if (!this.isConnected) return;
+
+          // If the input has focus, do not dispatch the event because it was not programmatic
+          if (this.matches(":focus")) return;
+
+          // If the component has flagged to skip the next programmatic input event, do not dispatch the event
+          if (component.skipNextProgrammaticInputEvent) {
+            component.skipNextProgrammaticInputEvent = false;
+            return;
+          }
+
+          // If all guard clauses are passed, dispatch the event
+          const inputEvent = new InputEvent('input', {
+            bubbles: true,
+            composed: true,
+          });
+          inputEvent.isProgrammatic = true;
+          this.dispatchEvent(inputEvent);
+        }
+      });
+      input.valuePatched = true;
+    }
+  }
+
   /**
    * @private
    * @returns {void} Sets the default help text for the input.
@@ -5646,6 +5694,7 @@ class BaseInput extends AuroElement$2 {
       }
 
       if (this.value !== this.inputElement.value) {
+        this.skipNextProgrammaticInputEvent = true;
         if (this.value) {
           this.inputElement.value = this.value;
         } else {
@@ -5788,15 +5837,20 @@ class BaseInput extends AuroElement$2 {
   }
 
   /**
+   * @param {Event} event - The input event
    * @private
-   * @return {void}
+   * @returns {void}
    */
-  handleInput() {
+  handleInput(event) {
     // Sets value property to value of element value (el.value).
     this.value = this.inputElement.value;
 
-    // Validation on blur or input.
-    if (this.validateOnInput) {
+    // Determine if the value change was programmatic, including autofill.
+    const inputWasProgrammatic = !this.matches(":focus") || event.isProgrammatic;
+
+    // Validation on input or programmatic value change (including autofill).
+    if (this.validateOnInput || inputWasProgrammatic) {
+      this.touched = true;
       this.validation.validate(this);
     }
 

package/components/input/dist/base-input.d.ts

@@ -403,6 +403,15 @@ export default class BaseInput extends AuroElement {
     inputId: string;
     format: any;
     ValidityMessageOverride: any;
+    /**
+     * Patches the input element to dispatch an 'input' event whenever its value is set programmatically.
+     * This ensures that changes to the input's value are consistently communicated, even if not triggered by user input.
+     *
+     * @param {HTMLInputElement} input - The input element to patch.
+     * @returns {void}
+     * @private
+     */
+    private patchInputEvent;
     /**
      * @private
      * @returns {void} Sets the default help text for the input.
@@ -414,6 +423,7 @@ export default class BaseInput extends AuroElement {
      * @returns {void}
      */
     updated(changedProperties: Map<string, any>): void;
+    skipNextProgrammaticInputEvent: boolean;
     /**
      * @private
      * @returns {void} Notify validity state changed via event.
@@ -465,8 +475,9 @@ export default class BaseInput extends AuroElement {
      */
     private handleClickClear;
     /**
+     * @param {Event} event - The input event
      * @private
-     * @return {void}
+     * @returns {void}
      */
     private handleInput;
     /**

package/components/input/dist/index.js

@@ -5472,6 +5472,8 @@ class BaseInput extends AuroElement$2 {
     this.inputElement = this.renderRoot.querySelector('input');
     this.labelElement = this.shadowRoot.querySelector('label');
 
+    this.patchInputEvent(this.inputElement);
+
     if (this.wrapperElement) {
       this.wrapperElement.addEventListener('click', this.handleClick);
     }
@@ -5496,6 +5498,52 @@ class BaseInput extends AuroElement$2 {
     this.configureAutoFormatting();
   }
 
+  /**
+   * Patches the input element to dispatch an 'input' event whenever its value is set programmatically.
+   * This ensures that changes to the input's value are consistently communicated, even if not triggered by user input.
+   *
+   * @param {HTMLInputElement} input - The input element to patch.
+   * @returns {void}
+   * @private
+   */
+  patchInputEvent(input) {
+    if (!input) return;
+    if (input && !input.valuePatched) {
+      const component = this; // eslint-disable-line
+      const nativeDescriptor = Object.getOwnPropertyDescriptor(HTMLInputElement.prototype, 'value');
+      Object.defineProperty(input, 'value', {
+        get() {
+          return nativeDescriptor.get.call(this);
+        },
+        set(val) {
+          // Call the native setter
+          nativeDescriptor.set.call(this, val);
+
+          // If the input is not connected to the DOM do not dispatch the event
+          if (!this.isConnected) return;
+
+          // If the input has focus, do not dispatch the event because it was not programmatic
+          if (this.matches(":focus")) return;
+
+          // If the component has flagged to skip the next programmatic input event, do not dispatch the event
+          if (component.skipNextProgrammaticInputEvent) {
+            component.skipNextProgrammaticInputEvent = false;
+            return;
+          }
+
+          // If all guard clauses are passed, dispatch the event
+          const inputEvent = new InputEvent('input', {
+            bubbles: true,
+            composed: true,
+          });
+          inputEvent.isProgrammatic = true;
+          this.dispatchEvent(inputEvent);
+        }
+      });
+      input.valuePatched = true;
+    }
+  }
+
   /**
    * @private
    * @returns {void} Sets the default help text for the input.
@@ -5570,6 +5618,7 @@ class BaseInput extends AuroElement$2 {
       }
 
       if (this.value !== this.inputElement.value) {
+        this.skipNextProgrammaticInputEvent = true;
         if (this.value) {
           this.inputElement.value = this.value;
         } else {
@@ -5712,15 +5761,20 @@ class BaseInput extends AuroElement$2 {
   }
 
   /**
+   * @param {Event} event - The input event
    * @private
-   * @return {void}
+   * @returns {void}
    */
-  handleInput() {
+  handleInput(event) {
     // Sets value property to value of element value (el.value).
     this.value = this.inputElement.value;
 
-    // Validation on blur or input.
-    if (this.validateOnInput) {
+    // Determine if the value change was programmatic, including autofill.
+    const inputWasProgrammatic = !this.matches(":focus") || event.isProgrammatic;
+
+    // Validation on input or programmatic value change (including autofill).
+    if (this.validateOnInput || inputWasProgrammatic) {
+      this.touched = true;
       this.validation.validate(this);
     }
 

package/components/input/dist/registered.js

@@ -5472,6 +5472,8 @@ class BaseInput extends AuroElement$2 {
     this.inputElement = this.renderRoot.querySelector('input');
     this.labelElement = this.shadowRoot.querySelector('label');
 
+    this.patchInputEvent(this.inputElement);
+
     if (this.wrapperElement) {
       this.wrapperElement.addEventListener('click', this.handleClick);
     }
@@ -5496,6 +5498,52 @@ class BaseInput extends AuroElement$2 {
     this.configureAutoFormatting();
   }
 
+  /**
+   * Patches the input element to dispatch an 'input' event whenever its value is set programmatically.
+   * This ensures that changes to the input's value are consistently communicated, even if not triggered by user input.
+   *
+   * @param {HTMLInputElement} input - The input element to patch.
+   * @returns {void}
+   * @private
+   */
+  patchInputEvent(input) {
+    if (!input) return;
+    if (input && !input.valuePatched) {
+      const component = this; // eslint-disable-line
+      const nativeDescriptor = Object.getOwnPropertyDescriptor(HTMLInputElement.prototype, 'value');
+      Object.defineProperty(input, 'value', {
+        get() {
+          return nativeDescriptor.get.call(this);
+        },
+        set(val) {
+          // Call the native setter
+          nativeDescriptor.set.call(this, val);
+
+          // If the input is not connected to the DOM do not dispatch the event
+          if (!this.isConnected) return;
+
+          // If the input has focus, do not dispatch the event because it was not programmatic
+          if (this.matches(":focus")) return;
+
+          // If the component has flagged to skip the next programmatic input event, do not dispatch the event
+          if (component.skipNextProgrammaticInputEvent) {
+            component.skipNextProgrammaticInputEvent = false;
+            return;
+          }
+
+          // If all guard clauses are passed, dispatch the event
+          const inputEvent = new InputEvent('input', {
+            bubbles: true,
+            composed: true,
+          });
+          inputEvent.isProgrammatic = true;
+          this.dispatchEvent(inputEvent);
+        }
+      });
+      input.valuePatched = true;
+    }
+  }
+
   /**
    * @private
    * @returns {void} Sets the default help text for the input.
@@ -5570,6 +5618,7 @@ class BaseInput extends AuroElement$2 {
       }
 
       if (this.value !== this.inputElement.value) {
+        this.skipNextProgrammaticInputEvent = true;
         if (this.value) {
           this.inputElement.value = this.value;
         } else {
@@ -5712,15 +5761,20 @@ class BaseInput extends AuroElement$2 {
   }
 
   /**
+   * @param {Event} event - The input event
    * @private
-   * @return {void}
+   * @returns {void}
    */
-  handleInput() {
+  handleInput(event) {
     // Sets value property to value of element value (el.value).
     this.value = this.inputElement.value;
 
-    // Validation on blur or input.
-    if (this.validateOnInput) {
+    // Determine if the value change was programmatic, including autofill.
+    const inputWasProgrammatic = !this.matches(":focus") || event.isProgrammatic;
+
+    // Validation on input or programmatic value change (including autofill).
+    if (this.validateOnInput || inputWasProgrammatic) {
+      this.touched = true;
       this.validation.validate(this);
     }
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@aurodesignsystem-dev/auro-formkit",
-  "version": "0.0.0-pr1130.0",
+  "version": "0.0.0-pr1137.0",
   "description": "A collection of web components used to build forms.",
   "homepage": "https://github.com/AlaskaAirlines/auro-formkit#readme",
   "bugs": {