@aurodesignsystem/auro-formkit 3.2.6 → 3.2.8

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # Semantic Release Automated Changelog
 
+## [3.2.8](https://github.com/AlaskaAirlines/auro-formkit/compare/v3.2.7...v3.2.8) (2025-05-08)
+
+
+### Bug Fixes
+
+* scroll to the active menuoption of combobox, select ([a31675a](https://github.com/AlaskaAirlines/auro-formkit/commit/a31675ac7aa8d049c54b865da3589359e85ee9c2))
+
+## [3.2.7](https://github.com/AlaskaAirlines/auro-formkit/compare/v3.2.6...v3.2.7) (2025-05-05)
+
+
+### Bug Fixes
+
+* make `focus` function to focus `input` node ([f0bef6f](https://github.com/AlaskaAirlines/auro-formkit/commit/f0bef6f344bc354fffe4bba51e6eb5c6a5628486))
+
 ## [3.2.6](https://github.com/AlaskaAirlines/auro-formkit/compare/v3.2.5...v3.2.6) (2025-05-05)
 
 

package/components/checkbox/README.md

@@ -106,7 +106,7 @@ The use of any Auro custom element has a dependency on the [Auro Design Tokens](
 In cases where the project is not able to process JS assets, there are pre-processed assets available for use. Legacy browsers such as IE11 are no longer supported.
 
 ```html
-<script type="module" src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-formkit@3.2.5/auro-checkbox/+esm"></script>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-formkit@3.2.7/auro-checkbox/+esm"></script>
 ```
 <!-- AURO-GENERATED-CONTENT:END -->
 

package/components/checkbox/demo/api.md

@@ -60,11 +60,9 @@ Custom element for the purpose of allowing users to select one or more options o
 
 ## Methods
 
-| Method         | Type                 | Description                        |
-|----------------|----------------------|------------------------------------|
-| [handleChange](#handleChange) | `(event: any): void` |                                    |
-| [handleInput](#handleInput)  | `(event: any): void` |                                    |
-| [reset](#reset)        | `(): void`           | Resets component to initial state. |
+| Method  | Type       | Description                        |
+|---------|------------|------------------------------------|
+| [reset](#reset) | `(): void` | Resets component to initial state. |
 
 ## Events
 

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

@@ -154,6 +154,15 @@ class AuroCheckbox extends i$2 {
      * @private
      */
     this.runtimeUtils = new AuroLibraryRuntimeUtils$1();
+
+    /**
+     * @private
+     * @property {boolean} delegatesFocus - Whether the shadow root delegates focus.
+     */
+    this.constructor.shadowRootOptions = {
+      ...i$2.shadowRootOptions,
+      delegatesFocus: true,
+    };
   }
 
   static get styles() {
@@ -232,8 +241,14 @@ class AuroCheckbox extends i$2 {
     AuroLibraryRuntimeUtils$1.prototype.registerComponent(name, AuroCheckbox);
   }
 
-  // This custom event is only for the purpose of supporting IE
-  // .addEventListener('change', function() { })
+  /**
+   * Handles the change event for the checkbox input.
+   * Updates the checked state and dispatches a corresponding custom event.
+   * This custom event is only for the purpose of supporting IE
+   * @private
+   * @param {Event} event - The change event from the checkbox input.
+   * @returns {void}
+   */
   handleChange(event) {
     this.checked = event.target.checked;
     const customEvent = new CustomEvent(event.type, event);
@@ -241,6 +256,13 @@ class AuroCheckbox extends i$2 {
     this.dispatchEvent(customEvent);
   }
 
+  /**
+   * Handles the input event for the checkbox input.
+   * Updates the checked state and dispatches a custom 'auroCheckbox-input' event.
+   * @private
+   * @param {Event} event - The input event from the checkbox input.
+   * @returns {void}
+   */
   handleInput(event) {
     this.checked = event.target.checked;
 

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

@@ -146,6 +146,15 @@ class AuroCheckbox extends i$2 {
      * @private
      */
     this.runtimeUtils = new AuroLibraryRuntimeUtils$1();
+
+    /**
+     * @private
+     * @property {boolean} delegatesFocus - Whether the shadow root delegates focus.
+     */
+    this.constructor.shadowRootOptions = {
+      ...i$2.shadowRootOptions,
+      delegatesFocus: true,
+    };
   }
 
   static get styles() {
@@ -224,8 +233,14 @@ class AuroCheckbox extends i$2 {
     AuroLibraryRuntimeUtils$1.prototype.registerComponent(name, AuroCheckbox);
   }
 
-  // This custom event is only for the purpose of supporting IE
-  // .addEventListener('change', function() { })
+  /**
+   * Handles the change event for the checkbox input.
+   * Updates the checked state and dispatches a corresponding custom event.
+   * This custom event is only for the purpose of supporting IE
+   * @private
+   * @param {Event} event - The change event from the checkbox input.
+   * @returns {void}
+   */
   handleChange(event) {
     this.checked = event.target.checked;
     const customEvent = new CustomEvent(event.type, event);
@@ -233,6 +248,13 @@ class AuroCheckbox extends i$2 {
     this.dispatchEvent(customEvent);
   }
 
+  /**
+   * Handles the input event for the checkbox input.
+   * Updates the checked state and dispatches a custom 'auroCheckbox-input' event.
+   * @private
+   * @param {Event} event - The input event from the checkbox input.
+   * @returns {void}
+   */
   handleInput(event) {
     this.checked = event.target.checked;
 

package/components/checkbox/demo/readme.md

@@ -106,7 +106,7 @@ The use of any Auro custom element has a dependency on the [Auro Design Tokens](
 In cases where the project is not able to process JS assets, there are pre-processed assets available for use. Legacy browsers such as IE11 are no longer supported.
 
 ```html
-<script type="module" src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-formkit@3.2.5/auro-checkbox/+esm"></script>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-formkit@3.2.7/auro-checkbox/+esm"></script>
 ```
 <!-- AURO-GENERATED-CONTENT:END -->
 

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

@@ -73,8 +73,23 @@ export class AuroCheckbox extends LitElement {
      * @private
      */
     private runtimeUtils;
-    handleChange(event: any): void;
-    handleInput(event: any): void;
+    /**
+     * Handles the change event for the checkbox input.
+     * Updates the checked state and dispatches a corresponding custom event.
+     * This custom event is only for the purpose of supporting IE
+     * @private
+     * @param {Event} event - The change event from the checkbox input.
+     * @returns {void}
+     */
+    private handleChange;
+    /**
+     * Handles the input event for the checkbox input.
+     * Updates the checked state and dispatches a custom 'auroCheckbox-input' event.
+     * @private
+     * @param {Event} event - The input event from the checkbox input.
+     * @returns {void}
+     */
+    private handleInput;
     /**
      * Function to support @focusin event.
      * @private

package/components/checkbox/dist/index.js

@@ -106,6 +106,15 @@ class AuroCheckbox extends LitElement {
      * @private
      */
     this.runtimeUtils = new AuroLibraryRuntimeUtils$1();
+
+    /**
+     * @private
+     * @property {boolean} delegatesFocus - Whether the shadow root delegates focus.
+     */
+    this.constructor.shadowRootOptions = {
+      ...LitElement.shadowRootOptions,
+      delegatesFocus: true,
+    };
   }
 
   static get styles() {
@@ -184,8 +193,14 @@ class AuroCheckbox extends LitElement {
     AuroLibraryRuntimeUtils$1.prototype.registerComponent(name, AuroCheckbox);
   }
 
-  // This custom event is only for the purpose of supporting IE
-  // .addEventListener('change', function() { })
+  /**
+   * Handles the change event for the checkbox input.
+   * Updates the checked state and dispatches a corresponding custom event.
+   * This custom event is only for the purpose of supporting IE
+   * @private
+   * @param {Event} event - The change event from the checkbox input.
+   * @returns {void}
+   */
   handleChange(event) {
     this.checked = event.target.checked;
     const customEvent = new CustomEvent(event.type, event);
@@ -193,6 +208,13 @@ class AuroCheckbox extends LitElement {
     this.dispatchEvent(customEvent);
   }
 
+  /**
+   * Handles the input event for the checkbox input.
+   * Updates the checked state and dispatches a custom 'auroCheckbox-input' event.
+   * @private
+   * @param {Event} event - The input event from the checkbox input.
+   * @returns {void}
+   */
   handleInput(event) {
     this.checked = event.target.checked;
 

package/components/checkbox/dist/registered.js

@@ -106,6 +106,15 @@ class AuroCheckbox extends LitElement {
      * @private
      */
     this.runtimeUtils = new AuroLibraryRuntimeUtils$1();
+
+    /**
+     * @private
+     * @property {boolean} delegatesFocus - Whether the shadow root delegates focus.
+     */
+    this.constructor.shadowRootOptions = {
+      ...LitElement.shadowRootOptions,
+      delegatesFocus: true,
+    };
   }
 
   static get styles() {
@@ -184,8 +193,14 @@ class AuroCheckbox extends LitElement {
     AuroLibraryRuntimeUtils$1.prototype.registerComponent(name, AuroCheckbox);
   }
 
-  // This custom event is only for the purpose of supporting IE
-  // .addEventListener('change', function() { })
+  /**
+   * Handles the change event for the checkbox input.
+   * Updates the checked state and dispatches a corresponding custom event.
+   * This custom event is only for the purpose of supporting IE
+   * @private
+   * @param {Event} event - The change event from the checkbox input.
+   * @returns {void}
+   */
   handleChange(event) {
     this.checked = event.target.checked;
     const customEvent = new CustomEvent(event.type, event);
@@ -193,6 +208,13 @@ class AuroCheckbox extends LitElement {
     this.dispatchEvent(customEvent);
   }
 
+  /**
+   * Handles the input event for the checkbox input.
+   * Updates the checked state and dispatches a custom 'auroCheckbox-input' event.
+   * @private
+   * @param {Event} event - The input event from the checkbox input.
+   * @returns {void}
+   */
   handleInput(event) {
     this.checked = event.target.checked;
 

package/components/combobox/README.md

@@ -111,7 +111,7 @@ The use of any Auro custom element has a dependency on the [Auro Design Tokens](
 In cases where the project is not able to process JS assets, there are pre-processed assets available for use. Legacy browsers such as IE11 are no longer supported.
 
 ```html
-<script type="module" src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-formkit@3.2.5/auro-combobox/+esm"></script>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-formkit@3.2.7/auro-combobox/+esm"></script>
 ```
 <!-- AURO-GENERATED-CONTENT:END -->
 

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

@@ -13211,6 +13211,12 @@ class AuroCombobox extends i$2 {
 
     this.menu.addEventListener('auroMenu-activatedOption', (evt) => {
       this.optionActive = evt.detail;
+
+      this.optionActive.scrollIntoView({
+        alignToTop: false,
+        block: "nearest",
+        behavior: "smooth"
+      });
     });
 
     this.menu.addEventListener('auroMenu-selectValueFailure', () => {

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

@@ -13069,6 +13069,12 @@ class AuroCombobox extends i$2 {
 
     this.menu.addEventListener('auroMenu-activatedOption', (evt) => {
       this.optionActive = evt.detail;
+
+      this.optionActive.scrollIntoView({
+        alignToTop: false,
+        block: "nearest",
+        behavior: "smooth"
+      });
     });
 
     this.menu.addEventListener('auroMenu-selectValueFailure', () => {

package/components/combobox/demo/readme.md

@@ -111,7 +111,7 @@ The use of any Auro custom element has a dependency on the [Auro Design Tokens](
 In cases where the project is not able to process JS assets, there are pre-processed assets available for use. Legacy browsers such as IE11 are no longer supported.
 
 ```html
-<script type="module" src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-formkit@3.2.5/auro-combobox/+esm"></script>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-formkit@3.2.7/auro-combobox/+esm"></script>
 ```
 <!-- AURO-GENERATED-CONTENT:END -->
 

package/components/combobox/dist/index.js

@@ -12987,6 +12987,12 @@ class AuroCombobox extends LitElement {
 
     this.menu.addEventListener('auroMenu-activatedOption', (evt) => {
       this.optionActive = evt.detail;
+
+      this.optionActive.scrollIntoView({
+        alignToTop: false,
+        block: "nearest",
+        behavior: "smooth"
+      });
     });
 
     this.menu.addEventListener('auroMenu-selectValueFailure', () => {

package/components/combobox/dist/registered.js

@@ -12987,6 +12987,12 @@ class AuroCombobox extends LitElement {
 
     this.menu.addEventListener('auroMenu-activatedOption', (evt) => {
       this.optionActive = evt.detail;
+
+      this.optionActive.scrollIntoView({
+        alignToTop: false,
+        block: "nearest",
+        behavior: "smooth"
+      });
     });
 
     this.menu.addEventListener('auroMenu-selectValueFailure', () => {

package/components/counter/README.md

@@ -110,7 +110,7 @@ The use of any Auro custom element has a dependency on the [Auro Design Tokens](
 In cases where the project is not able to process JS assets, there are pre-processed assets available for use. Legacy browsers such as IE11 are no longer supported.
 
 ```html
-<script type="module" src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-formkit@3.2.5/auro-counter/+esm"></script>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-formkit@3.2.7/auro-counter/+esm"></script>
 ```
 <!-- AURO-GENERATED-CONTENT:END -->
 

package/components/counter/demo/readme.md

@@ -110,7 +110,7 @@ The use of any Auro custom element has a dependency on the [Auro Design Tokens](
 In cases where the project is not able to process JS assets, there are pre-processed assets available for use. Legacy browsers such as IE11 are no longer supported.
 
 ```html
-<script type="module" src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-formkit@3.2.5/auro-counter/+esm"></script>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-formkit@3.2.7/auro-counter/+esm"></script>
 ```
 <!-- AURO-GENERATED-CONTENT:END -->
 

package/components/datepicker/README.md

@@ -104,7 +104,7 @@ The use of any Auro custom element has a dependency on the [Auro Design Tokens](
 In cases where the project is not able to process JS assets, there are pre-processed assets available for use. Legacy browsers such as IE11 are no longer supported.
 
 ```html
-<script type="module" src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-formkit@3.2.5/auro-datepicker/+esm"></script>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-formkit@3.2.7/auro-datepicker/+esm"></script>
 ```
 <!-- AURO-GENERATED-CONTENT:END -->
 

package/components/datepicker/demo/readme.md

@@ -104,7 +104,7 @@ The use of any Auro custom element has a dependency on the [Auro Design Tokens](
 In cases where the project is not able to process JS assets, there are pre-processed assets available for use. Legacy browsers such as IE11 are no longer supported.
 
 ```html
-<script type="module" src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-formkit@3.2.5/auro-datepicker/+esm"></script>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-formkit@3.2.7/auro-datepicker/+esm"></script>
 ```
 <!-- AURO-GENERATED-CONTENT:END -->
 

package/components/dropdown/README.md

@@ -107,7 +107,7 @@ The use of any Auro custom element has a dependency on the [Auro Design Tokens](
 In cases where the project is not able to process JS assets, there are pre-processed assets available for use. Legacy browsers such as IE11 are no longer supported.
 
 ```html
-<script type="module" src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-formkit@3.2.5/auro-dropdown/+esm"></script>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-formkit@3.2.7/auro-dropdown/+esm"></script>
 ```
 <!-- AURO-GENERATED-CONTENT:END -->
 

package/components/dropdown/demo/readme.md

@@ -107,7 +107,7 @@ The use of any Auro custom element has a dependency on the [Auro Design Tokens](
 In cases where the project is not able to process JS assets, there are pre-processed assets available for use. Legacy browsers such as IE11 are no longer supported.
 
 ```html
-<script type="module" src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-formkit@3.2.5/auro-dropdown/+esm"></script>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-formkit@3.2.7/auro-dropdown/+esm"></script>
 ```
 <!-- AURO-GENERATED-CONTENT:END -->
 

package/components/form/README.md

@@ -109,7 +109,7 @@ The use of any Auro custom element has a dependency on the [Auro Design Tokens](
 In cases where the project is not able to process JS assets, there are pre-processed assets available for use. Legacy browsers such as IE11 are no longer supported.
 
 ```html
-<script type="module" src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-formkit@3.2.5/auro-form/+esm"></script>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-formkit@3.2.7/auro-form/+esm"></script>
 ```
 <!-- AURO-GENERATED-CONTENT:END -->
 

package/components/form/demo/readme.md

@@ -109,7 +109,7 @@ The use of any Auro custom element has a dependency on the [Auro Design Tokens](
 In cases where the project is not able to process JS assets, there are pre-processed assets available for use. Legacy browsers such as IE11 are no longer supported.
 
 ```html
-<script type="module" src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-formkit@3.2.5/auro-form/+esm"></script>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-formkit@3.2.7/auro-form/+esm"></script>
 ```
 <!-- AURO-GENERATED-CONTENT:END -->
 

package/components/input/README.md

@@ -99,7 +99,7 @@ The use of any Auro custom element has a dependency on the [Auro Design Tokens](
 In cases where the project is not able to process JS assets, there are pre-processed assets available for use. Legacy browsers such as IE11 are no longer supported.
 
 ```html
-<script type="module" src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-formkit@3.2.5/auro-input/+esm"></script>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-formkit@3.2.7/auro-input/+esm"></script>
 ```
 <!-- AURO-GENERATED-CONTENT:END -->
 

package/components/input/demo/readme.md

@@ -99,7 +99,7 @@ The use of any Auro custom element has a dependency on the [Auro Design Tokens](
 In cases where the project is not able to process JS assets, there are pre-processed assets available for use. Legacy browsers such as IE11 are no longer supported.
 
 ```html
-<script type="module" src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-formkit@3.2.5/auro-input/+esm"></script>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-formkit@3.2.7/auro-input/+esm"></script>
 ```
 <!-- AURO-GENERATED-CONTENT:END -->
 

package/components/menu/README.md

@@ -110,7 +110,7 @@ The use of any Auro custom element has a dependency on the [Auro Design Tokens](
 In cases where the project is not able to process JS assets, there are pre-processed assets available for use. Legacy browsers such as IE11 are no longer supported.
 
 ```html
-<script type="module" src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-formkit@3.2.5/auro-menu/+esm"></script>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-formkit@3.2.7/auro-menu/+esm"></script>
 ```
 <!-- AURO-GENERATED-CONTENT:END -->
 

package/components/menu/demo/readme.md

@@ -110,7 +110,7 @@ The use of any Auro custom element has a dependency on the [Auro Design Tokens](
 In cases where the project is not able to process JS assets, there are pre-processed assets available for use. Legacy browsers such as IE11 are no longer supported.
 
 ```html
-<script type="module" src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-formkit@3.2.5/auro-menu/+esm"></script>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-formkit@3.2.7/auro-menu/+esm"></script>
 ```
 <!-- AURO-GENERATED-CONTENT:END -->
 

package/components/radio/README.md

@@ -100,7 +100,7 @@ The use of any Auro custom element has a dependency on the [Auro Design Tokens](
 In cases where the project is not able to process JS assets, there are pre-processed assets available for use. Legacy browsers such as IE11 are no longer supported.
 
 ```html
-<script type="module" src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-formkit@3.2.5/auro-radio/+esm"></script>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-formkit@3.2.7/auro-radio/+esm"></script>
 ```
 <!-- AURO-GENERATED-CONTENT:END -->
 

package/components/radio/demo/readme.md

@@ -100,7 +100,7 @@ The use of any Auro custom element has a dependency on the [Auro Design Tokens](
 In cases where the project is not able to process JS assets, there are pre-processed assets available for use. Legacy browsers such as IE11 are no longer supported.
 
 ```html
-<script type="module" src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-formkit@3.2.5/auro-radio/+esm"></script>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-formkit@3.2.7/auro-radio/+esm"></script>
 ```
 <!-- AURO-GENERATED-CONTENT:END -->
 

package/components/select/README.md

@@ -111,7 +111,7 @@ The use of any Auro custom element has a dependency on the [Auro Design Tokens](
 In cases where the project is not able to process JS assets, there are pre-processed assets available for use. Legacy browsers such as IE11 are no longer supported.
 
 ```html
-<script type="module" src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-formkit@3.2.5/auro-select/+esm"></script>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-formkit@3.2.7/auro-select/+esm"></script>
 ```
 <!-- AURO-GENERATED-CONTENT:END -->
 

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

@@ -5943,6 +5943,16 @@ class AuroSelect extends i$2 {
       this.optionSelected = this.menu.optionSelected;
       this.validation.validate(this);
     });
+
+    this.menu.addEventListener('auroMenu-activatedOption', (evt) => {
+      if (evt.detail) {
+        evt.detail.scrollIntoView({
+          alignToTop: false,
+          block: "nearest",
+          behavior: "smooth"
+        });
+      }
+    });
   }
 
   /**
@@ -6045,12 +6055,6 @@ class AuroSelect extends i$2 {
       const newOption = letterOptions[index];
       const newOptionIndex = this.options.indexOf(newOption);
       this.menu.updateActiveOption(newOptionIndex);
-
-      newOption.scrollIntoView({
-        alignToTop: false,
-        block: "nearest",
-        behavior: "smooth"
-      });
     }
   }
 

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

@@ -5851,6 +5851,16 @@ class AuroSelect extends i$2 {
       this.optionSelected = this.menu.optionSelected;
       this.validation.validate(this);
     });
+
+    this.menu.addEventListener('auroMenu-activatedOption', (evt) => {
+      if (evt.detail) {
+        evt.detail.scrollIntoView({
+          alignToTop: false,
+          block: "nearest",
+          behavior: "smooth"
+        });
+      }
+    });
   }
 
   /**
@@ -5953,12 +5963,6 @@ class AuroSelect extends i$2 {
       const newOption = letterOptions[index];
       const newOptionIndex = this.options.indexOf(newOption);
       this.menu.updateActiveOption(newOptionIndex);
-
-      newOption.scrollIntoView({
-        alignToTop: false,
-        block: "nearest",
-        behavior: "smooth"
-      });
     }
   }
 

package/components/select/demo/readme.md

@@ -111,7 +111,7 @@ The use of any Auro custom element has a dependency on the [Auro Design Tokens](
 In cases where the project is not able to process JS assets, there are pre-processed assets available for use. Legacy browsers such as IE11 are no longer supported.
 
 ```html
-<script type="module" src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-formkit@3.2.5/auro-select/+esm"></script>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-formkit@3.2.7/auro-select/+esm"></script>
 ```
 <!-- AURO-GENERATED-CONTENT:END -->
 

package/components/select/dist/index.js

@@ -5804,6 +5804,16 @@ class AuroSelect extends LitElement {
       this.optionSelected = this.menu.optionSelected;
       this.validation.validate(this);
     });
+
+    this.menu.addEventListener('auroMenu-activatedOption', (evt) => {
+      if (evt.detail) {
+        evt.detail.scrollIntoView({
+          alignToTop: false,
+          block: "nearest",
+          behavior: "smooth"
+        });
+      }
+    });
   }
 
   /**
@@ -5906,12 +5916,6 @@ class AuroSelect extends LitElement {
       const newOption = letterOptions[index];
       const newOptionIndex = this.options.indexOf(newOption);
       this.menu.updateActiveOption(newOptionIndex);
-
-      newOption.scrollIntoView({
-        alignToTop: false,
-        block: "nearest",
-        behavior: "smooth"
-      });
     }
   }
 

package/components/select/dist/registered.js

@@ -5804,6 +5804,16 @@ class AuroSelect extends LitElement {
       this.optionSelected = this.menu.optionSelected;
       this.validation.validate(this);
     });
+
+    this.menu.addEventListener('auroMenu-activatedOption', (evt) => {
+      if (evt.detail) {
+        evt.detail.scrollIntoView({
+          alignToTop: false,
+          block: "nearest",
+          behavior: "smooth"
+        });
+      }
+    });
   }
 
   /**
@@ -5906,12 +5916,6 @@ class AuroSelect extends LitElement {
       const newOption = letterOptions[index];
       const newOptionIndex = this.options.indexOf(newOption);
       this.menu.updateActiveOption(newOptionIndex);
-
-      newOption.scrollIntoView({
-        alignToTop: false,
-        block: "nearest",
-        behavior: "smooth"
-      });
     }
   }
 

package/package.json

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