@aurodesignsystem/auro-formkit 3.1.0 → 3.2.0

package/CHANGELOG.md

@@ -1,5 +1,12 @@
 # Semantic Release Automated Changelog
 
+# [3.2.0](https://github.com/AlaskaAirlines/auro-formkit/compare/v3.1.0...v3.2.0) (2025-04-30)
+
+
+### Features
+
+* added press-key-to-jump-to-selection functionality to auro-select component ([66fed78](https://github.com/AlaskaAirlines/auro-formkit/commit/66fed788ab07e431b42850da4167166eaa981473)), closes [#404](https://github.com/AlaskaAirlines/auro-formkit/issues/404)
+
 # [3.1.0](https://github.com/AlaskaAirlines/auro-formkit/compare/v3.0.1...v3.1.0) (2025-04-30)
 
 

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.0.1/auro-checkbox/+esm"></script>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-formkit@3.1.0/auro-checkbox/+esm"></script>
 ```
 <!-- AURO-GENERATED-CONTENT:END -->
 

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.0.1/auro-checkbox/+esm"></script>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-formkit@3.1.0/auro-checkbox/+esm"></script>
 ```
 <!-- AURO-GENERATED-CONTENT:END -->
 

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.0.1/auro-combobox/+esm"></script>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-formkit@3.1.0/auro-combobox/+esm"></script>
 ```
 <!-- AURO-GENERATED-CONTENT:END -->
 

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

@@ -14523,6 +14523,7 @@ class AuroMenu extends r$1 {
     this.items.forEach((item) => item.classList.remove('active'));
     this.items[index].classList.add('active');
     this.optionActive = this.items[index];
+    this.index = index;
 
     dispatchMenuEvent(this, 'auroMenu-activatedOption', this.items[index]);
   }

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

@@ -14381,6 +14381,7 @@ class AuroMenu extends r$1 {
     this.items.forEach((item) => item.classList.remove('active'));
     this.items[index].classList.add('active');
     this.optionActive = this.items[index];
+    this.index = index;
 
     dispatchMenuEvent(this, 'auroMenu-activatedOption', this.items[index]);
   }

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.0.1/auro-combobox/+esm"></script>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-formkit@3.1.0/auro-combobox/+esm"></script>
 ```
 <!-- AURO-GENERATED-CONTENT:END -->
 

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.0.1/auro-counter/+esm"></script>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-formkit@3.1.0/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.0.1/auro-counter/+esm"></script>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-formkit@3.1.0/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.0.1/auro-datepicker/+esm"></script>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-formkit@3.1.0/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.0.1/auro-datepicker/+esm"></script>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-formkit@3.1.0/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.0.1/auro-dropdown/+esm"></script>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-formkit@3.1.0/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.0.1/auro-dropdown/+esm"></script>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-formkit@3.1.0/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.0.1/auro-form/+esm"></script>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-formkit@3.1.0/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.0.1/auro-form/+esm"></script>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-formkit@3.1.0/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.0.1/auro-input/+esm"></script>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-formkit@3.1.0/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.0.1/auro-input/+esm"></script>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-formkit@3.1.0/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.0.1/auro-menu/+esm"></script>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-formkit@3.1.0/auro-menu/+esm"></script>
 ```
 <!-- AURO-GENERATED-CONTENT:END -->
 

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

@@ -918,6 +918,7 @@ class AuroMenu extends r {
     this.items.forEach((item) => item.classList.remove('active'));
     this.items[index].classList.add('active');
     this.optionActive = this.items[index];
+    this.index = index;
 
     dispatchMenuEvent(this, 'auroMenu-activatedOption', this.items[index]);
   }

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

@@ -878,6 +878,7 @@ class AuroMenu extends r {
     this.items.forEach((item) => item.classList.remove('active'));
     this.items[index].classList.add('active');
     this.optionActive = this.items[index];
+    this.index = index;
 
     dispatchMenuEvent(this, 'auroMenu-activatedOption', this.items[index]);
   }

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.0.1/auro-menu/+esm"></script>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-formkit@3.1.0/auro-menu/+esm"></script>
 ```
 <!-- AURO-GENERATED-CONTENT:END -->
 

package/components/menu/dist/index.js

@@ -857,6 +857,7 @@ class AuroMenu extends LitElement {
     this.items.forEach((item) => item.classList.remove('active'));
     this.items[index].classList.add('active');
     this.optionActive = this.items[index];
+    this.index = index;
 
     dispatchMenuEvent(this, 'auroMenu-activatedOption', this.items[index]);
   }

package/components/menu/dist/registered.js

@@ -857,6 +857,7 @@ class AuroMenu extends LitElement {
     this.items.forEach((item) => item.classList.remove('active'));
     this.items[index].classList.add('active');
     this.optionActive = this.items[index];
+    this.index = index;
 
     dispatchMenuEvent(this, 'auroMenu-activatedOption', this.items[index]);
   }

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.0.1/auro-radio/+esm"></script>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-formkit@3.1.0/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.0.1/auro-radio/+esm"></script>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-formkit@3.1.0/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.0.1/auro-select/+esm"></script>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-formkit@3.1.0/auro-select/+esm"></script>
 ```
 <!-- AURO-GENERATED-CONTENT:END -->
 

package/components/select/demo/api.md

@@ -39,10 +39,11 @@ The auro-select element is a wrapper for auro-dropdown and auro-menu to create a
 
 ## Methods
 
-| Method     | Type                                   | Description                                      |
-|------------|----------------------------------------|--------------------------------------------------|
-| [reset](#reset)    | `(): void`                             | Resets component to initial state.               |
-| [validate](#validate) | `(force?: boolean \| undefined): void` | Validates value.<br /><br />**force**: Whether to force validation. |
+| Method                         | Type                                   | Description                                      |
+|--------------------------------|----------------------------------------|--------------------------------------------------|
+| [reset](#reset)                        | `(): void`                             | Resets component to initial state.               |
+| [updateActiveOptionBasedOnKey](#updateActiveOptionBasedOnKey) | `(_key: any): void`                    |                                                  |
+| [validate](#validate)                     | `(force?: boolean \| undefined): void` | Validates value.<br /><br />**force**: Whether to force validation. |
 
 ## Events
 

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

@@ -6031,6 +6031,8 @@ class AuroSelect extends r {
         if (this.dropdown.isPopoverVisible) {
           this.menu.navigateOptions('up');
         }
+
+        return;
       }
 
       if (evt.key === 'ArrowDown') {
@@ -6041,6 +6043,8 @@ class AuroSelect extends r {
         if (this.dropdown.isPopoverVisible) {
           this.menu.navigateOptions('down');
         }
+
+        return;
       }
 
       if (evt.key === 'Enter') {
@@ -6048,6 +6052,8 @@ class AuroSelect extends r {
           evt.preventDefault();
           this.menu.makeSelection();
         }
+
+        return;
       }
 
       if (evt.key === 'Tab') {
@@ -6056,7 +6062,12 @@ class AuroSelect extends r {
         } else {
           this.dropdown.hide();
         }
+
+        return;
       }
+
+      // Handle all other key presses by updating the active option based on the key pressed
+      this.updateActiveOptionBasedOnKey(evt.key);
     });
 
     this.addEventListener('focusin', this.handleFocusin);
@@ -6066,6 +6077,45 @@ class AuroSelect extends r {
     });
   }
 
+  updateActiveOptionBasedOnKey(_key) {
+
+    // Get a lowercase version of the key pressed
+    const key = _key.toLowerCase();
+
+    // Calculate how many times the same letter has been pressed
+    this.sameLetterTimes = key === this.lastLetter ? this.sameLetterTimes + 1 : 0;
+
+    // Set last letter for tracking
+    this.lastLetter = key;
+
+    // Get all the options that start with the last letter pressed
+    const letterOptions = this.options.filter((option) => {
+      const optionText = option.value || '';
+      return optionText.toLowerCase().startsWith(this.lastLetter);
+    });
+
+    // If we have options that match the letter pressed
+    if (letterOptions.length) {
+
+      // Show the dropdown if it is not already visible
+      this.dropdown.show();
+
+      // Get the index we're after based on how many times the letter has been pressed and the length of the letterOptions array
+      const index = this.sameLetterTimes < letterOptions.length ? this.sameLetterTimes : this.sameLetterTimes % letterOptions.length;
+
+      // Select the new option in the menu
+      const newOption = letterOptions[index];
+      const newOptionIndex = this.options.indexOf(newOption);
+      this.menu.updateActiveOption(newOptionIndex);
+
+      newOption.scrollIntoView({
+        alignToTop: false,
+        block: "nearest",
+        behavior: "smooth"
+      });
+    }
+  }
+
   /**
    * Manages the visibility of the dropdown based on loading state changes.
    *
@@ -7103,6 +7153,7 @@ class AuroMenu extends r {
     this.items.forEach((item) => item.classList.remove('active'));
     this.items[index].classList.add('active');
     this.optionActive = this.items[index];
+    this.index = index;
 
     dispatchMenuEvent(this, 'auroMenu-activatedOption', this.items[index]);
   }

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

@@ -5939,6 +5939,8 @@ class AuroSelect extends r {
         if (this.dropdown.isPopoverVisible) {
           this.menu.navigateOptions('up');
         }
+
+        return;
       }
 
       if (evt.key === 'ArrowDown') {
@@ -5949,6 +5951,8 @@ class AuroSelect extends r {
         if (this.dropdown.isPopoverVisible) {
           this.menu.navigateOptions('down');
         }
+
+        return;
       }
 
       if (evt.key === 'Enter') {
@@ -5956,6 +5960,8 @@ class AuroSelect extends r {
           evt.preventDefault();
           this.menu.makeSelection();
         }
+
+        return;
       }
 
       if (evt.key === 'Tab') {
@@ -5964,7 +5970,12 @@ class AuroSelect extends r {
         } else {
           this.dropdown.hide();
         }
+
+        return;
       }
+
+      // Handle all other key presses by updating the active option based on the key pressed
+      this.updateActiveOptionBasedOnKey(evt.key);
     });
 
     this.addEventListener('focusin', this.handleFocusin);
@@ -5974,6 +5985,45 @@ class AuroSelect extends r {
     });
   }
 
+  updateActiveOptionBasedOnKey(_key) {
+
+    // Get a lowercase version of the key pressed
+    const key = _key.toLowerCase();
+
+    // Calculate how many times the same letter has been pressed
+    this.sameLetterTimes = key === this.lastLetter ? this.sameLetterTimes + 1 : 0;
+
+    // Set last letter for tracking
+    this.lastLetter = key;
+
+    // Get all the options that start with the last letter pressed
+    const letterOptions = this.options.filter((option) => {
+      const optionText = option.value || '';
+      return optionText.toLowerCase().startsWith(this.lastLetter);
+    });
+
+    // If we have options that match the letter pressed
+    if (letterOptions.length) {
+
+      // Show the dropdown if it is not already visible
+      this.dropdown.show();
+
+      // Get the index we're after based on how many times the letter has been pressed and the length of the letterOptions array
+      const index = this.sameLetterTimes < letterOptions.length ? this.sameLetterTimes : this.sameLetterTimes % letterOptions.length;
+
+      // Select the new option in the menu
+      const newOption = letterOptions[index];
+      const newOptionIndex = this.options.indexOf(newOption);
+      this.menu.updateActiveOption(newOptionIndex);
+
+      newOption.scrollIntoView({
+        alignToTop: false,
+        block: "nearest",
+        behavior: "smooth"
+      });
+    }
+  }
+
   /**
    * Manages the visibility of the dropdown based on loading state changes.
    *
@@ -7011,6 +7061,7 @@ class AuroMenu extends r {
     this.items.forEach((item) => item.classList.remove('active'));
     this.items[index].classList.add('active');
     this.optionActive = this.items[index];
+    this.index = index;
 
     dispatchMenuEvent(this, 'auroMenu-activatedOption', this.items[index]);
   }

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.0.1/auro-select/+esm"></script>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-formkit@3.1.0/auro-select/+esm"></script>
 ```
 <!-- AURO-GENERATED-CONTENT:END -->
 

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

@@ -254,6 +254,9 @@ export class AuroSelect extends LitElement {
      * @returns {void}
      */
     private configureSelect;
+    updateActiveOptionBasedOnKey(_key: any): void;
+    sameLetterTimes: any;
+    lastLetter: any;
     /**
      * Manages the visibility of the dropdown based on loading state changes.
      *

package/components/select/dist/index.js

@@ -5892,6 +5892,8 @@ class AuroSelect extends LitElement {
         if (this.dropdown.isPopoverVisible) {
           this.menu.navigateOptions('up');
         }
+
+        return;
       }
 
       if (evt.key === 'ArrowDown') {
@@ -5902,6 +5904,8 @@ class AuroSelect extends LitElement {
         if (this.dropdown.isPopoverVisible) {
           this.menu.navigateOptions('down');
         }
+
+        return;
       }
 
       if (evt.key === 'Enter') {
@@ -5909,6 +5913,8 @@ class AuroSelect extends LitElement {
           evt.preventDefault();
           this.menu.makeSelection();
         }
+
+        return;
       }
 
       if (evt.key === 'Tab') {
@@ -5917,7 +5923,12 @@ class AuroSelect extends LitElement {
         } else {
           this.dropdown.hide();
         }
+
+        return;
       }
+
+      // Handle all other key presses by updating the active option based on the key pressed
+      this.updateActiveOptionBasedOnKey(evt.key);
     });
 
     this.addEventListener('focusin', this.handleFocusin);
@@ -5927,6 +5938,45 @@ class AuroSelect extends LitElement {
     });
   }
 
+  updateActiveOptionBasedOnKey(_key) {
+
+    // Get a lowercase version of the key pressed
+    const key = _key.toLowerCase();
+
+    // Calculate how many times the same letter has been pressed
+    this.sameLetterTimes = key === this.lastLetter ? this.sameLetterTimes + 1 : 0;
+
+    // Set last letter for tracking
+    this.lastLetter = key;
+
+    // Get all the options that start with the last letter pressed
+    const letterOptions = this.options.filter((option) => {
+      const optionText = option.value || '';
+      return optionText.toLowerCase().startsWith(this.lastLetter);
+    });
+
+    // If we have options that match the letter pressed
+    if (letterOptions.length) {
+
+      // Show the dropdown if it is not already visible
+      this.dropdown.show();
+
+      // Get the index we're after based on how many times the letter has been pressed and the length of the letterOptions array
+      const index = this.sameLetterTimes < letterOptions.length ? this.sameLetterTimes : this.sameLetterTimes % letterOptions.length;
+
+      // Select the new option in the menu
+      const newOption = letterOptions[index];
+      const newOptionIndex = this.options.indexOf(newOption);
+      this.menu.updateActiveOption(newOptionIndex);
+
+      newOption.scrollIntoView({
+        alignToTop: false,
+        block: "nearest",
+        behavior: "smooth"
+      });
+    }
+  }
+
   /**
    * Manages the visibility of the dropdown based on loading state changes.
    *

package/components/select/dist/registered.js

@@ -5892,6 +5892,8 @@ class AuroSelect extends LitElement {
         if (this.dropdown.isPopoverVisible) {
           this.menu.navigateOptions('up');
         }
+
+        return;
       }
 
       if (evt.key === 'ArrowDown') {
@@ -5902,6 +5904,8 @@ class AuroSelect extends LitElement {
         if (this.dropdown.isPopoverVisible) {
           this.menu.navigateOptions('down');
         }
+
+        return;
       }
 
       if (evt.key === 'Enter') {
@@ -5909,6 +5913,8 @@ class AuroSelect extends LitElement {
           evt.preventDefault();
           this.menu.makeSelection();
         }
+
+        return;
       }
 
       if (evt.key === 'Tab') {
@@ -5917,7 +5923,12 @@ class AuroSelect extends LitElement {
         } else {
           this.dropdown.hide();
         }
+
+        return;
       }
+
+      // Handle all other key presses by updating the active option based on the key pressed
+      this.updateActiveOptionBasedOnKey(evt.key);
     });
 
     this.addEventListener('focusin', this.handleFocusin);
@@ -5927,6 +5938,45 @@ class AuroSelect extends LitElement {
     });
   }
 
+  updateActiveOptionBasedOnKey(_key) {
+
+    // Get a lowercase version of the key pressed
+    const key = _key.toLowerCase();
+
+    // Calculate how many times the same letter has been pressed
+    this.sameLetterTimes = key === this.lastLetter ? this.sameLetterTimes + 1 : 0;
+
+    // Set last letter for tracking
+    this.lastLetter = key;
+
+    // Get all the options that start with the last letter pressed
+    const letterOptions = this.options.filter((option) => {
+      const optionText = option.value || '';
+      return optionText.toLowerCase().startsWith(this.lastLetter);
+    });
+
+    // If we have options that match the letter pressed
+    if (letterOptions.length) {
+
+      // Show the dropdown if it is not already visible
+      this.dropdown.show();
+
+      // Get the index we're after based on how many times the letter has been pressed and the length of the letterOptions array
+      const index = this.sameLetterTimes < letterOptions.length ? this.sameLetterTimes : this.sameLetterTimes % letterOptions.length;
+
+      // Select the new option in the menu
+      const newOption = letterOptions[index];
+      const newOptionIndex = this.options.indexOf(newOption);
+      this.menu.updateActiveOption(newOptionIndex);
+
+      newOption.scrollIntoView({
+        alignToTop: false,
+        block: "nearest",
+        behavior: "smooth"
+      });
+    }
+  }
+
   /**
    * Manages the visibility of the dropdown based on loading state changes.
    *

package/package.json

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