@momentum-design/components 0.129.42 → 0.129.44

package/dist/components/radio/radio.component.js

@@ -16,8 +16,8 @@ import { DataAriaLabelMixin } from '../../utils/mixins/DataAriaLabelMixin';
 import { FormInternalsMixin } from '../../utils/mixins/FormInternalsMixin';
 import { DEFAULTS as FORMFIELD_DEFAULTS } from '../formfieldwrapper/formfieldwrapper.constants';
 import { ROLE } from '../../utils/roles';
-import { KEYS } from '../../utils/keys';
 import { AutoFocusOnMountMixin } from '../../utils/mixins/AutoFocusOnMountMixin';
+import { ACTIONS, KeyToActionMixin } from '../../utils/mixins/KeyToActionMixin';
 import styles from './radio.styles';
 /**
  * The Radio component allows users to select a single option from a group of mutually exclusive choices.
@@ -67,7 +67,7 @@ import styles from './radio.styles';
  * @csspart text-container - The container for the label and helper text elements.
  * @csspart static-radio - The staticradio that provides the visual radio appearance.
  */
-class Radio extends AutoFocusOnMountMixin(FormInternalsMixin(DataAriaLabelMixin(FormfieldWrapper))) {
+class Radio extends KeyToActionMixin(AutoFocusOnMountMixin(FormInternalsMixin(DataAriaLabelMixin(FormfieldWrapper)))) {
     constructor() {
         super(...arguments);
         /**
@@ -243,27 +243,28 @@ class Radio extends AutoFocusOnMountMixin(FormInternalsMixin(DataAriaLabelMixin(
         var _a;
         if (this.disabled)
             return;
-        if ((this.readonly || this.softDisabled) && event.key === KEYS.SPACE) {
+        const action = this.getActionForKeyEvent(event);
+        if ((this.readonly || this.softDisabled) && action === ACTIONS.SPACE) {
             event.preventDefault();
         }
         const radios = this.getAllRadiosWithinSameGroup();
         const enabledRadios = radios.filter(radio => !radio.disabled);
         const currentIndex = enabledRadios.indexOf(this);
-        if (['ArrowDown', 'ArrowRight'].includes(event.key)) {
+        if (action === ACTIONS.DOWN || action === ACTIONS.RIGHT) {
             // Move focus to the next radio
             const nextIndex = (currentIndex + 1) % enabledRadios.length;
             this.updateRadio(enabledRadios, nextIndex);
         }
-        else if (['ArrowUp', 'ArrowLeft'].includes(event.key)) {
+        else if (action === ACTIONS.UP || action === ACTIONS.LEFT) {
             // Move focus to the previous radio
             const prevIndex = (currentIndex - 1 + enabledRadios.length) % enabledRadios.length;
             this.updateRadio(enabledRadios, prevIndex);
         }
-        else if (event.key === KEYS.SPACE) {
+        else if (action === ACTIONS.SPACE) {
             this.updateRadio(enabledRadios, currentIndex);
         }
         this.updateTabIndex();
-        if (event.key === KEYS.ENTER) {
+        if (action === ACTIONS.ENTER) {
             (_a = this.form) === null || _a === void 0 ? void 0 : _a.requestSubmit();
         }
     }

package/dist/components/searchfield/searchfield.component.d.ts

@@ -94,6 +94,9 @@ declare class Searchfield extends Input {
      */
     protected firstUpdated(_changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>): void;
     clearInputText(): void;
+    handleFilterContainerClick: () => void;
+    protected handleFilterContainerKeyDown: (e: KeyboardEvent) => void;
+    protected handleFilterContainerKeyUp: (e: KeyboardEvent) => void;
     render(): import("lit-html").TemplateResult<1>;
     static styles: Array<CSSResult>;
 }

package/dist/components/searchfield/searchfield.component.js

@@ -11,7 +11,7 @@ import { html } from 'lit';
 import { queryAssignedElements, state } from 'lit/decorators.js';
 import { classMap } from 'lit-html/directives/class-map.js';
 import Input from '../input/input.component';
-import { KEYS } from '../../utils/keys';
+import { ACTIONS } from '../../utils/mixins/KeyToActionMixin';
 import styles from './searchfield.styles';
 import { DEFAULTS } from './searchfield.constants';
 /**
@@ -88,6 +88,19 @@ class Searchfield extends Input {
          * @internal
          */
         this.hasInputChips = false;
+        this.handleFilterContainerClick = () => {
+            this.inputElement.focus();
+        };
+        this.handleFilterContainerKeyDown = (e) => {
+            if (this.getActionForKeyEvent(e) === ACTIONS.ENTER) {
+                this.handleFilterContainerClick();
+            }
+        };
+        this.handleFilterContainerKeyUp = (e) => {
+            if (this.getActionForKeyEvent(e) === ACTIONS.SPACE) {
+                this.handleFilterContainerClick();
+            }
+        };
     }
     /**
      * Handles the keydown event of the search field.
@@ -97,7 +110,7 @@ class Searchfield extends Input {
      */
     handleKeyDown(event) {
         super.handleKeyDown(event);
-        if (event.key === KEYS.ESCAPE) {
+        if (this.getActionForKeyEvent(event) === ACTIONS.ESCAPE) {
             this.clearInputText();
         }
     }
@@ -162,9 +175,9 @@ class Searchfield extends Input {
         <div part="scrollable-container" tabindex="-1">
           <div
             part="filters-container"
-            @click=${() => this.inputElement.focus()}
-            @keydown=${(e) => (e.key === KEYS.ENTER ? this.inputElement.focus() : null)}
-            @keyup=${(e) => (e.key === KEYS.SPACE ? this.inputElement.focus() : null)}
+            @click=${this.handleFilterContainerClick}
+            @keydown=${this.handleFilterContainerKeyDown}
+            @keyup=${this.handleFilterContainerKeyUp}
           >
             <slot name="filters" @slotchange=${this.renderInputChips}></slot>
           </div>

package/dist/components/searchpopover/searchpopover.component.js

@@ -13,7 +13,6 @@ import { property } from 'lit/decorators.js';
 import { ifDefined } from 'lit/directives/if-defined.js';
 import { live } from 'lit/directives/live.js';
 import Searchfield from '../searchfield/searchfield.component';
-import { KEYS } from '../../utils/keys';
 import { POPOVER_PLACEMENT, DEFAULTS as POPOVER_DEFAULTS } from '../popover/popover.constants';
 import { DEFAULTS as FORMFIELD_DEFAULTS } from '../formfieldwrapper/formfieldwrapper.constants';
 import { ROLE } from '../../utils/roles';
@@ -162,9 +161,9 @@ class Searchpopover extends Searchfield {
         <div part="scrollable-container" tabindex="-1">
           <div
             part="filters-container"
-            @click=${() => this.inputElement.focus()}
-            @keydown=${(e) => (e.key === KEYS.ENTER ? this.inputElement.focus() : null)}
-            @keyup=${(e) => (e.key === KEYS.SPACE ? this.inputElement.focus() : null)}
+            @click=${this.handleFilterContainerClick}
+            @keydown=${this.handleFilterContainerKeyDown}
+            @keyup=${this.handleFilterContainerKeyUp}
           >
             <slot name="filters" @slotchange=${this.renderInputChips}></slot>
           </div>

package/dist/components/select/select.component.d.ts

@@ -5,7 +5,7 @@ import FormfieldWrapper from '../formfieldwrapper/formfieldwrapper.component';
 import type Option from '../option/option.component';
 import type { PopoverStrategy } from '../popover/popover.types';
 import type { Placement } from './select.types';
-declare const Select_base: import("../../utils/mixins/index.types").Constructor<import("../../models").Component & import("../../utils/mixins/ListNavigationMixin").ListNavigationMixinInterface> & import("../../utils/mixins/index.types").Constructor<import("../../utils/mixins/lifecycle/CaptureDestroyEventForChildElement").CaptureDestroyEventForChildElementInterface> & import("../../utils/mixins/index.types").Constructor<import("../../models").Component & import("../../utils/mixins/AutoFocusOnMountMixin").AutoFocusOnMountMixinInterface> & import("../../utils/mixins/index.types").Constructor<import("../../utils/mixins/FormInternalsMixin").FormInternalsMixinInterface> & import("../../utils/mixins/index.types").Constructor<import("../../utils/mixins/DataAriaLabelMixin").DataAriaLabelMixinInterface> & typeof FormfieldWrapper;
+declare const Select_base: import("../../utils/mixins/index.types").Constructor<import("../../models").Component & import("../../utils/mixins/ListNavigationMixin").ListNavigationMixinInterface & import("../../utils/mixins/KeyToActionMixin").KeyToActionInterface> & import("../../utils/mixins/index.types").Constructor<import("../../utils/mixins/lifecycle/CaptureDestroyEventForChildElement").CaptureDestroyEventForChildElementInterface> & import("../../utils/mixins/index.types").Constructor<import("../../models").Component & import("../../utils/mixins/AutoFocusOnMountMixin").AutoFocusOnMountMixinInterface> & import("../../utils/mixins/index.types").Constructor<import("../../utils/mixins/FormInternalsMixin").FormInternalsMixinInterface> & import("../../utils/mixins/index.types").Constructor<import("../../utils/mixins/DataAriaLabelMixin").DataAriaLabelMixinInterface> & typeof FormfieldWrapper;
 /**
  * The mdc-select component is a dropdown selection control that allows users to pick an option from a predefined list.
  * It is designed to work with `mdc-option` for individual options and `mdc-optgroup` for grouping related options.

package/dist/components/select/select.component.js

@@ -11,7 +11,6 @@ import { html, nothing } from 'lit';
 import { property, query, state } from 'lit/decorators.js';
 import { ifDefined } from 'lit/directives/if-defined.js';
 import { ElementStore } from '../../utils/controllers/ElementStore';
-import { KEYS } from '../../utils/keys';
 import { AutoFocusOnMountMixin } from '../../utils/mixins/AutoFocusOnMountMixin';
 import { DataAriaLabelMixin } from '../../utils/mixins/DataAriaLabelMixin';
 import { FormInternalsMixin } from '../../utils/mixins/FormInternalsMixin';
@@ -25,6 +24,7 @@ import { TAG_NAME as OPTION_TAG_NAME } from '../option/option.constants';
 import { DEFAULTS as POPOVER_DEFAULTS, POPOVER_PLACEMENT, TRIGGER } from '../popover/popover.constants';
 import { TYPE, VALID_TEXT_TAGS } from '../text/text.constants';
 import { debounce } from '../../utils/debounce';
+import { ACTIONS } from '../../utils/mixins/KeyToActionMixin';
 import { ARROW_ICON, DEFAULTS, LISTBOX_ID, TRIGGER_ID } from './select.constants';
 import styles from './select.styles';
 /**
@@ -553,23 +553,24 @@ class Select extends ListNavigationMixin(CaptureDestroyEventForChildElement(Auto
         if (this.disabled || this.softDisabled || this.readonly) {
             return;
         }
-        switch (event.key) {
-            case KEYS.ARROW_DOWN:
-            case KEYS.ARROW_UP:
-            case KEYS.ENTER:
-            case KEYS.SPACE:
+        const action = this.getActionForKeyEvent(event);
+        switch (action) {
+            case ACTIONS.DOWN:
+            case ACTIONS.UP:
+            case ACTIONS.ENTER:
+            case ACTIONS.SPACE:
                 this.displayPopover = true;
                 event.preventDefault();
                 event.stopPropagation();
                 break;
-            case KEYS.HOME: {
+            case ACTIONS.HOME: {
                 this.displayPopover = true;
                 this.resetTabIndexAndSetFocusAfterUpdate(0);
                 event.preventDefault();
                 event.stopPropagation();
                 break;
             }
-            case KEYS.END: {
+            case ACTIONS.END: {
                 this.displayPopover = true;
                 this.resetTabIndexAndSetFocusAfterUpdate(this.navItems.length - 1);
                 event.preventDefault();

package/dist/components/slider/slider.component.d.ts

@@ -1,5 +1,6 @@
 import type { CSSResult, PropertyValueMap } from 'lit';
 import { Component } from '../../models';
+declare const Slider_base: import("../../utils/mixins/index.types").Constructor<import("../../utils/mixins/KeyToActionMixin").KeyToActionInterface> & typeof Component;
 /**
  * Slider component is used to select a value or range of values from within a defined range.
  * It provides a visual representation of the current value(s) and allows users to adjust the value(s) by dragging the thumb(s) along the track.
@@ -33,7 +34,7 @@ import { Component } from '../../models';
  * @cssproperty --mdc-slider-tooltip-left - The left position of the slider tooltip
  * @cssproperty --mdc-slider-tick-left - The left position of the slider tick marks
  */
-declare class Slider extends Component {
+declare class Slider extends Slider_base {
     /**
      * Internal state to track if the slider thumb is focused (single value)
      * @internal

package/dist/components/slider/slider.component.js

@@ -11,7 +11,7 @@ import { html, nothing } from 'lit';
 import { property, queryAll, state } from 'lit/decorators.js';
 import { repeat } from 'lit/directives/repeat.js';
 import { Component } from '../../models';
-import { KEYS } from '../../utils/keys';
+import { ACTIONS, KeyToActionMixin } from '../../utils/mixins/KeyToActionMixin';
 import { DEFAULTS } from './slider.constants';
 import styles from './slider.styles';
 /**
@@ -47,7 +47,7 @@ import styles from './slider.styles';
  * @cssproperty --mdc-slider-tooltip-left - The left position of the slider tooltip
  * @cssproperty --mdc-slider-tick-left - The left position of the slider tick marks
  */
-class Slider extends Component {
+class Slider extends KeyToActionMixin(Component) {
     constructor() {
         super();
         /**
@@ -109,7 +109,8 @@ class Slider extends Component {
      * @param e - The event to prevent.
      */
     preventChange(e) {
-        if (this.softDisabled && ((e instanceof KeyboardEvent && e.key !== KEYS.TAB) || !(e instanceof KeyboardEvent))) {
+        if (this.softDisabled &&
+            ((e instanceof KeyboardEvent && this.getActionForKeyEvent(e) !== ACTIONS.TAB) || !(e instanceof KeyboardEvent))) {
             e.preventDefault();
             e.stopPropagation();
         }

package/dist/components/stepperitem/stepperitem.component.d.ts

@@ -1,7 +1,7 @@
 import { CSSResult } from 'lit';
 import { Component } from '../../models';
 import type { StatusType, VariantType } from './stepperitem.types';
-declare const StepperItem_base: import("../../utils/mixins/index.types").Constructor<import("../../utils/mixins/TabIndexMixin").TabIndexMixinInterface> & typeof Component;
+declare const StepperItem_base: import("../../utils/mixins/index.types").Constructor<import("../../utils/mixins/KeyToActionMixin").KeyToActionInterface> & import("../../utils/mixins/index.types").Constructor<import("../../utils/mixins/TabIndexMixin").TabIndexMixinInterface> & typeof Component;
 /**
  * stepperitem component is used to represent a single step in a stepper component. It is used within a `mdc-stepper` component to indicate the current step in a process.
  * It can have different statuses such as `completed`, `current`, `incomplete`, `error-current`, and `error-incomplete`.

package/dist/components/stepperitem/stepperitem.component.js

@@ -13,9 +13,9 @@ import { Component } from '../../models';
 import { TYPE, VALID_TEXT_TAGS } from '../text/text.constants';
 import { TabIndexMixin } from '../../utils/mixins/TabIndexMixin';
 import { ROLE } from '../../utils/roles';
-import { KEYS } from '../../utils/keys';
 import providerUtils from '../../utils/provider';
 import Stepper from '../stepper/stepper.component';
+import { ACTIONS, KeyToActionMixin } from '../../utils/mixins/KeyToActionMixin';
 import styles from './stepperitem.styles';
 import { DEFAULT, STATUS, STATUS_ICON } from './stepperitem.constants';
 /**
@@ -52,7 +52,7 @@ import { DEFAULT, STATUS, STATUS_ICON } from './stepperitem.constants';
  * @cssproperty --mdc-stepperitem-help-text-color - The color of the optional label text.
  * @cssproperty --mdc-stepperitem-label-container-background - The background color of the label container.
  */
-class StepperItem extends TabIndexMixin(Component) {
+class StepperItem extends KeyToActionMixin(TabIndexMixin(Component)) {
     updated(changedProperties) {
         var _a;
         super.updated(changedProperties);
@@ -99,9 +99,10 @@ class StepperItem extends TabIndexMixin(Component) {
      * @param event - The keyboard event.
      */
     handleKeyDown(event) {
-        if ([KEYS.ENTER, KEYS.SPACE].includes(event.key)) {
+        const action = this.getActionForKeyEvent(event);
+        if (action === ACTIONS.ENTER || action === ACTIONS.SPACE) {
             this.classList.add('pressed');
-            if (event.key === KEYS.ENTER) {
+            if (action === ACTIONS.ENTER) {
                 this.triggerClickEvent();
             }
             // Prevent default event behavior to avoid scrolling or double-triggering
@@ -127,9 +128,10 @@ class StepperItem extends TabIndexMixin(Component) {
      * @param event - The keyboard event.
      */
     handleKeyUp(event) {
-        if ([KEYS.ENTER, KEYS.SPACE].includes(event.key)) {
+        const action = this.getActionForKeyEvent(event);
+        if (action === ACTIONS.ENTER || action === ACTIONS.SPACE) {
             this.classList.remove('pressed');
-            if (event.key === KEYS.SPACE) {
+            if (action === ACTIONS.SPACE) {
                 this.triggerClickEvent();
             }
         }

package/dist/components/textarea/textarea.component.d.ts

@@ -2,7 +2,7 @@ import { CSSResult, nothing, PropertyValueMap } from 'lit';
 import FormfieldWrapper from '../formfieldwrapper';
 import type { AutoCapitalizeType } from '../input/input.types';
 import type { WrapType, AutoCompleteType } from './textarea.types';
-declare const Textarea_base: import("../../utils/mixins/index.types").Constructor<import("../../models").Component & import("../../utils/mixins/AutoFocusOnMountMixin").AutoFocusOnMountMixinInterface> & import("../../utils/mixins/index.types").Constructor<import("../../utils/mixins/FormInternalsMixin").FormInternalsMixinInterface> & import("../../utils/mixins/index.types").Constructor<import("../../utils/mixins/DataAriaLabelMixin").DataAriaLabelMixinInterface> & typeof FormfieldWrapper;
+declare const Textarea_base: import("../../utils/mixins/index.types").Constructor<import("../../utils/mixins/KeyToActionMixin").KeyToActionInterface> & import("../../utils/mixins/index.types").Constructor<import("../../models").Component & import("../../utils/mixins/AutoFocusOnMountMixin").AutoFocusOnMountMixinInterface> & import("../../utils/mixins/index.types").Constructor<import("../../utils/mixins/FormInternalsMixin").FormInternalsMixinInterface> & import("../../utils/mixins/index.types").Constructor<import("../../utils/mixins/DataAriaLabelMixin").DataAriaLabelMixinInterface> & typeof FormfieldWrapper;
 /**
  * mdc-textarea component, which is used to get the multi-line text input from the user.
  * It contains:

package/dist/components/textarea/textarea.component.js

@@ -16,7 +16,7 @@ import { AUTO_CAPITALIZE } from '../input/input.constants';
 import { DataAriaLabelMixin } from '../../utils/mixins/DataAriaLabelMixin';
 import { FormInternalsMixin } from '../../utils/mixins/FormInternalsMixin';
 import { AutoFocusOnMountMixin } from '../../utils/mixins/AutoFocusOnMountMixin';
-import { KEYS } from '../../utils/keys';
+import { ACTIONS, KeyToActionMixin } from '../../utils/mixins/KeyToActionMixin';
 import { AUTO_COMPLETE, WRAP, DEFAULTS } from './textarea.constants';
 import styles from './textarea.styles';
 /**
@@ -104,7 +104,7 @@ import styles from './textarea.styles';
  * @cssproperty --mdc-textarea-text-line-height - Line height for the textarea field
  * @cssproperty --mdc-textarea-container-background-color - Background color for the textarea container
  */
-class Textarea extends AutoFocusOnMountMixin(FormInternalsMixin(DataAriaLabelMixin(FormfieldWrapper))) {
+class Textarea extends KeyToActionMixin(AutoFocusOnMountMixin(FormInternalsMixin(DataAriaLabelMixin(FormfieldWrapper)))) {
     constructor() {
         super(...arguments);
         /**
@@ -379,10 +379,11 @@ class Textarea extends AutoFocusOnMountMixin(FormInternalsMixin(DataAriaLabelMix
         }
         const currentRows = this.rows || DEFAULTS.ROWS;
         let newRows;
-        if (event.key === KEYS.ARROW_UP) {
+        const action = this.getActionForKeyEvent(event);
+        if (action === ACTIONS.UP) {
             newRows = Math.max(1, currentRows - 1);
         }
-        else if (event.key === KEYS.ARROW_DOWN) {
+        else if (action === ACTIONS.DOWN) {
             newRows = currentRows + 1;
         }
         if (newRows !== undefined) {

package/dist/components/toggle/toggle.component.d.ts

@@ -2,7 +2,7 @@ import { CSSResult, PropertyValueMap } from 'lit';
 import { AssociatedFormControl } from '../../utils/mixins/FormInternalsMixin';
 import FormfieldWrapper from '../formfieldwrapper';
 import type { ToggleSize } from './toggle.types';
-declare const Toggle_base: import("../../utils/mixins/index.types").Constructor<import("../../utils/mixins/ControlTypeMixin").ControlTypeMixinInterface> & import("../../utils/mixins/index.types").Constructor<import("../../models").Component & import("../../utils/mixins/AutoFocusOnMountMixin").AutoFocusOnMountMixinInterface> & import("../../utils/mixins/index.types").Constructor<import("../../utils/mixins/FormInternalsMixin").FormInternalsMixinInterface> & import("../../utils/mixins/index.types").Constructor<import("../../utils/mixins/DataAriaLabelMixin").DataAriaLabelMixinInterface> & typeof FormfieldWrapper;
+declare const Toggle_base: import("../../utils/mixins/index.types").Constructor<import("../../utils/mixins/KeyToActionMixin").KeyToActionInterface> & import("../../utils/mixins/index.types").Constructor<import("../../utils/mixins/ControlTypeMixin").ControlTypeMixinInterface> & import("../../utils/mixins/index.types").Constructor<import("../../models").Component & import("../../utils/mixins/AutoFocusOnMountMixin").AutoFocusOnMountMixinInterface> & import("../../utils/mixins/index.types").Constructor<import("../../utils/mixins/FormInternalsMixin").FormInternalsMixinInterface> & import("../../utils/mixins/index.types").Constructor<import("../../utils/mixins/DataAriaLabelMixin").DataAriaLabelMixinInterface> & typeof FormfieldWrapper;
 /**
  * The Toggle component is an interactive control used to switch between two mutually exclusive states,
  * such as On/Off or Active/Inactive. It is commonly used in settings panels, forms, and preference selections

package/dist/components/toggle/toggle.component.js

@@ -10,7 +10,6 @@ var __metadata = (this && this.__metadata) || function (k, v) {
 import { html, nothing } from 'lit';
 import { property } from 'lit/decorators.js';
 import { ifDefined } from 'lit/directives/if-defined.js';
-import { KEYS } from '../../utils/keys';
 import { AutoFocusOnMountMixin } from '../../utils/mixins/AutoFocusOnMountMixin';
 import { ControlTypeMixin } from '../../utils/mixins/ControlTypeMixin';
 import { DataAriaLabelMixin } from '../../utils/mixins/DataAriaLabelMixin';
@@ -18,6 +17,7 @@ import { FormInternalsMixin } from '../../utils/mixins/FormInternalsMixin';
 import { ROLE } from '../../utils/roles';
 import FormfieldWrapper from '../formfieldwrapper';
 import { DEFAULTS as FORMFIELD_DEFAULTS } from '../formfieldwrapper/formfieldwrapper.constants';
+import { ACTIONS, KeyToActionMixin } from '../../utils/mixins/KeyToActionMixin';
 import { DEFAULTS, TOGGLE_SIZE } from './toggle.constants';
 import styles from './toggle.styles';
 /**
@@ -64,7 +64,7 @@ import styles from './toggle.styles';
  * @csspart static-toggle - The statictoggle that provides the visual toggle switch appearance.
  * @csspart toggle-input - The native input element with switch role that provides the interactive functionality.
  */
-class Toggle extends ControlTypeMixin(AutoFocusOnMountMixin(FormInternalsMixin(DataAriaLabelMixin(FormfieldWrapper)))) {
+class Toggle extends KeyToActionMixin(ControlTypeMixin(AutoFocusOnMountMixin(FormInternalsMixin(DataAriaLabelMixin(FormfieldWrapper))))) {
     constructor() {
         super(...arguments);
         /**
@@ -173,10 +173,11 @@ class Toggle extends ControlTypeMixin(AutoFocusOnMountMixin(FormInternalsMixin(D
      */
     handleKeyDown(event) {
         var _a;
-        if ((this.readonly || this.softDisabled) && event.key === KEYS.SPACE) {
+        const action = this.getActionForKeyEvent(event);
+        if ((this.readonly || this.softDisabled) && action === ACTIONS.SPACE) {
             event.preventDefault();
         }
-        if (event.key === KEYS.ENTER) {
+        if (action === ACTIONS.ENTER) {
             (_a = this.form) === null || _a === void 0 ? void 0 : _a.requestSubmit();
         }
     }

package/dist/components/virtualizedlist/virtualizedlist.component.d.ts

@@ -4,7 +4,7 @@ import List from '../list/list.component';
 import type { ElementStoreChangeTypes } from '../../utils/controllers/ElementStore';
 import { type BaseArray } from '../../utils/virtualIndexArray';
 import { VirtualizerProps, Virtualizer } from './virtualizedlist.types';
-declare const VirtualizedList_base: import("../../utils/mixins/index.types").Constructor<import("../../utils/mixins/DataAriaLabelMixin").DataAriaLabelMixinInterface> & typeof List;
+declare const VirtualizedList_base: import("../../utils/mixins/index.types").Constructor<import("../../utils/mixins/KeyToActionMixin").KeyToActionInterface> & import("../../utils/mixins/index.types").Constructor<import("../../utils/mixins/DataAriaLabelMixin").DataAriaLabelMixinInterface> & typeof List;
 /**
  * `mdc-virtualizedlist` is an extension of the `mdc-list` component that adds virtualization capabilities using
  * the Tanstack Virtual library.

package/dist/components/virtualizedlist/virtualizedlist.component.js

@@ -15,8 +15,8 @@ import List from '../list/list.component';
 import { DataAriaLabelMixin } from '../../utils/mixins/DataAriaLabelMixin';
 import { Interval } from '../../utils/range';
 import { VirtualIndexArray } from '../../utils/virtualIndexArray';
-import { KEYS } from '../../utils/keys';
 import { LIFE_CYCLE_EVENTS } from '../../utils/mixins/lifecycle/lifecycle.contants';
+import { ACTIONS, KeyToActionMixin } from '../../utils/mixins/KeyToActionMixin';
 import styles from './virtualizedlist.styles';
 import { DEFAULTS } from './virtualizedlist.constants';
 /**
@@ -86,7 +86,7 @@ import { DEFAULTS } from './virtualizedlist.constants';
  * @csspart container - The container of the virtualized list.
  * @csspart scroll - The scrollable area of the virtualized list.
  */
-class VirtualizedList extends DataAriaLabelMixin(List) {
+class VirtualizedList extends KeyToActionMixin(DataAriaLabelMixin(List)) {
     /**
      * The current virtual items being rendered.
      */
@@ -548,21 +548,22 @@ class VirtualizedList extends DataAriaLabelMixin(List) {
     }
     handleNavigationKeyDown(event) {
         var _a, _b, _c, _d;
-        switch (event.key) {
-            case KEYS.HOME: {
+        const action = this.getActionForKeyEvent(event);
+        switch (action) {
+            case ACTIONS.HOME: {
                 // Move focus to the first item
                 (_b = (_a = this.virtualizer) === null || _a === void 0 ? void 0 : _a.scrollToIndex) === null || _b === void 0 ? void 0 : _b.call(_a, 0, { align: 'start' });
                 this.endOfScrollQueue.push(() => this.resetTabIndexes(0));
                 break;
             }
-            case KEYS.END: {
+            case ACTIONS.END: {
                 // Move focus to the last item
                 const selectedItem = this.virtualizerProps.count - 1;
                 (_d = (_c = this.virtualizer) === null || _c === void 0 ? void 0 : _c.scrollToIndex) === null || _d === void 0 ? void 0 : _d.call(_c, selectedItem, { align: 'end' });
                 this.endOfScrollQueue.push(() => this.resetTabIndexes(selectedItem));
                 break;
             }
-            case KEYS.ARROW_UP: {
+            case ACTIONS.UP: {
                 this.atBottom = 're-evaluate';
                 break;
             }