@momentum-design/components 0.129.43 → 0.129.44

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

@@ -4,7 +4,7 @@ import { Component } from '../../models';
 import type { Size } from '../accordiongroup/accordiongroup.types';
 import type { IconNames } from '../icon/icon.types';
 import type { IconName, Variant } from './accordionbutton.types';
-declare const AccordionButton_base: import("../../utils/mixins/index.types").Constructor<import("../../utils/mixins/DisabledMixin").DisabledMixinInterface> & typeof Component;
+declare const AccordionButton_base: import("../../utils/mixins/index.types").Constructor<import("../../utils/mixins/KeyToActionMixin").KeyToActionInterface> & import("../../utils/mixins/index.types").Constructor<import("../../utils/mixins/DisabledMixin").DisabledMixinInterface> & typeof Component;
 /**
  * An accordion button is a vertically stacked component with a clickable header and expandable/collapsible body section.
  * The entire header is clickable to toggle the visibility of the body content.

package/dist/components/accordionbutton/accordionbutton.component.js

@@ -11,10 +11,10 @@ import { html, nothing } from 'lit';
 import { v4 as uuidv4 } from 'uuid';
 import { property } from 'lit/decorators.js';
 import { Component } from '../../models';
-import { KEYS } from '../../utils/keys';
 import { DisabledMixin } from '../../utils/mixins/DisabledMixin';
 import { ROLE } from '../../utils/roles';
 import { TYPE, VALID_TEXT_TAGS } from '../text/text.constants';
+import { KeyToActionMixin, ACTIONS } from '../../utils/mixins/KeyToActionMixin';
 import { DEFAULTS, ICON_NAME } from './accordionbutton.constants';
 import styles from './accordionbutton.styles';
 /**
@@ -63,7 +63,7 @@ import styles from './accordionbutton.styles';
  * @csspart trailing-header - The trailing header of the accordion button.
  * @csspart trailing-header__icon - The trailing header icon of the accordion button.
  */
-class AccordionButton extends DisabledMixin(Component) {
+class AccordionButton extends KeyToActionMixin(DisabledMixin(Component)) {
     constructor() {
         super(...arguments);
         /**
@@ -128,7 +128,8 @@ class AccordionButton extends DisabledMixin(Component) {
      * @param event - The KeyboardEvent fired.
      */
     handleKeyDown(event) {
-        if (event.key === KEYS.ENTER || event.key === KEYS.SPACE) {
+        const action = this.getActionForKeyEvent(event);
+        if (action === ACTIONS.ENTER || action === ACTIONS.SPACE) {
             this.handleHeaderClick();
         }
     }

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

@@ -3,7 +3,7 @@ import { CSSResult } from 'lit';
 import { Component } from '../../models';
 import type { RoleType } from '../../utils/roles';
 import type { ButtonSize, ButtonType } from './buttonsimple.types';
-declare const Buttonsimple_base: import("../../utils/mixins/index.types").Constructor<Component & import("../../utils/mixins/AutoFocusOnMountMixin").AutoFocusOnMountMixinInterface> & import("../../utils/mixins/index.types").Constructor<import("../../utils/mixins/TabIndexMixin").TabIndexMixinInterface> & import("../../utils/mixins/index.types").Constructor<import("../../utils/mixins/DisabledMixin").DisabledMixinInterface> & typeof Component;
+declare const Buttonsimple_base: import("../../utils/mixins/index.types").Constructor<import("../../utils/mixins/KeyToActionMixin").KeyToActionInterface> & import("../../utils/mixins/index.types").Constructor<Component & import("../../utils/mixins/AutoFocusOnMountMixin").AutoFocusOnMountMixinInterface> & import("../../utils/mixins/index.types").Constructor<import("../../utils/mixins/TabIndexMixin").TabIndexMixinInterface> & import("../../utils/mixins/index.types").Constructor<import("../../utils/mixins/DisabledMixin").DisabledMixinInterface> & typeof Component;
 /**
  * `mdc-buttonsimple` is a component that can be configured in various ways to suit different use cases.
  * It is used as an internal component and is not intended to be used directly by consumers.

package/dist/components/buttonsimple/buttonsimple.component.js

@@ -10,10 +10,10 @@ var __metadata = (this && this.__metadata) || function (k, v) {
 import { html } from 'lit';
 import { property } from 'lit/decorators.js';
 import { Component } from '../../models';
-import { KEYS } from '../../utils/keys';
 import { AutoFocusOnMountMixin } from '../../utils/mixins/AutoFocusOnMountMixin';
 import { DisabledMixin } from '../../utils/mixins/DisabledMixin';
 import { TabIndexMixin } from '../../utils/mixins/TabIndexMixin';
+import { KeyToActionMixin, ACTIONS } from '../../utils/mixins/KeyToActionMixin';
 import { BUTTON_TYPE, DEFAULTS } from './buttonsimple.constants';
 import styles from './buttonsimple.styles';
 /**
@@ -35,7 +35,7 @@ import styles from './buttonsimple.styles';
  * @cssproperty --mdc-button-border-color - Border color of the button
  * @cssproperty --mdc-button-text-color - Text color of the button
  */
-class Buttonsimple extends AutoFocusOnMountMixin(TabIndexMixin(DisabledMixin(Component))) {
+class Buttonsimple extends KeyToActionMixin(AutoFocusOnMountMixin(TabIndexMixin(DisabledMixin(Component)))) {
     /** @internal */
     get form() {
         return this.internals.form;
@@ -190,9 +190,10 @@ class Buttonsimple extends AutoFocusOnMountMixin(TabIndexMixin(DisabledMixin(Com
      * @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();
             }
             // preventing the default event behavior for space key
@@ -210,9 +211,10 @@ class Buttonsimple extends AutoFocusOnMountMixin(TabIndexMixin(DisabledMixin(Com
      * @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/cardcheckbox/cardcheckbox.component.d.ts

@@ -1,7 +1,7 @@
 import { CSSResult, nothing, PropertyValues } from 'lit';
 import Card from '../card/card.component';
 import type { SelectionType } from './cardcheckbox.types';
-declare const CardCheckbox_base: import("../../utils/mixins/index.types").Constructor<import("../../utils/mixins/DisabledMixin").DisabledMixinInterface> & import("../../utils/mixins/index.types").Constructor<import("../../utils/mixins/TabIndexMixin").TabIndexMixinInterface> & typeof Card;
+declare const CardCheckbox_base: import("../../utils/mixins/index.types").Constructor<import("../../utils/mixins/KeyToActionMixin").KeyToActionInterface> & import("../../utils/mixins/index.types").Constructor<import("../../utils/mixins/DisabledMixin").DisabledMixinInterface> & import("../../utils/mixins/index.types").Constructor<import("../../utils/mixins/TabIndexMixin").TabIndexMixinInterface> & typeof Card;
 /**
  * cardcheckbox component extends `mdc-card` and supports checkbox selection interaction.
  * Multiple cards can be checked simultaneously.

package/dist/components/cardcheckbox/cardcheckbox.component.js

@@ -13,7 +13,7 @@ import { DisabledMixin } from '../../utils/mixins/DisabledMixin';
 import { TabIndexMixin } from '../../utils/mixins/TabIndexMixin';
 import Card from '../card/card.component';
 import { ROLE } from '../../utils/roles';
-import { KEYS } from '../../utils/keys';
+import { KeyToActionMixin, ACTIONS } from '../../utils/mixins/KeyToActionMixin';
 import { CHECK_MARK, DEFAULTS, SELECTION_TYPE } from './cardcheckbox.constants';
 import styles from './cardcheckbox.styles';
 /**
@@ -67,7 +67,7 @@ import styles from './cardcheckbox.styles';
  *
  * @cssproperty --mdc-card-width - The width of the card
  */
-class CardCheckbox extends DisabledMixin(TabIndexMixin(Card)) {
+class CardCheckbox extends KeyToActionMixin(DisabledMixin(TabIndexMixin(Card))) {
     constructor() {
         super();
         /**
@@ -114,10 +114,12 @@ class CardCheckbox extends DisabledMixin(TabIndexMixin(Card)) {
      * @param event - The keyboard event
      */
     handleKeyDown(event) {
-        if (event.key === KEYS.ENTER) {
+        const action = this.getActionForKeyEvent(event);
+        if (action === ACTIONS.ENTER) {
             this.toggleChecked();
+            event.preventDefault();
         }
-        else if (event.key === KEYS.SPACE) {
+        if (action === ACTIONS.SPACE) {
             event.preventDefault();
         }
     }
@@ -126,7 +128,7 @@ class CardCheckbox extends DisabledMixin(TabIndexMixin(Card)) {
      * @param event - The keyboard event
      */
     toggleOnSpace(event) {
-        if (event.key === KEYS.SPACE) {
+        if (this.getActionForKeyEvent(event) === ACTIONS.SPACE) {
             event.preventDefault();
             this.toggleChecked();
         }

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

@@ -1,6 +1,6 @@
 import { CSSResult, nothing, PropertyValues } from 'lit';
 import Card from '../card/card.component';
-declare const CardRadio_base: import("../../utils/mixins/index.types").Constructor<import("../../utils/mixins/DisabledMixin").DisabledMixinInterface> & import("../../utils/mixins/index.types").Constructor<import("../../utils/mixins/TabIndexMixin").TabIndexMixinInterface> & typeof Card;
+declare const CardRadio_base: import("../../utils/mixins/index.types").Constructor<import("../../utils/mixins/KeyToActionMixin").KeyToActionInterface> & import("../../utils/mixins/index.types").Constructor<import("../../utils/mixins/DisabledMixin").DisabledMixinInterface> & import("../../utils/mixins/index.types").Constructor<import("../../utils/mixins/TabIndexMixin").TabIndexMixinInterface> & typeof Card;
 /**
  * cardradio component extends `mdc-card` and supports radio selection interaction.
  * Only one card can be selected at a time within the same group (defined by `name` attribute).

package/dist/components/cardradio/cardradio.component.js

@@ -14,7 +14,7 @@ import { DisabledMixin } from '../../utils/mixins/DisabledMixin';
 import { TabIndexMixin } from '../../utils/mixins/TabIndexMixin';
 import Card from '../card/card.component';
 import { ROLE } from '../../utils/roles';
-import { KEYS } from '../../utils/keys';
+import { KeyToActionMixin, ACTIONS } from '../../utils/mixins/KeyToActionMixin';
 import styles from './cardradio.styles';
 /**
  * cardradio component extends `mdc-card` and supports radio selection interaction.
@@ -68,7 +68,7 @@ import styles from './cardradio.styles';
  *
  * @cssproperty --mdc-card-width - The width of the card
  */
-class CardRadio extends DisabledMixin(TabIndexMixin(Card)) {
+class CardRadio extends KeyToActionMixin(DisabledMixin(TabIndexMixin(Card))) {
     constructor() {
         super();
         /**
@@ -136,7 +136,8 @@ class CardRadio extends DisabledMixin(TabIndexMixin(Card)) {
      * @param event - The keyboard event
      */
     handleKeyDown(event) {
-        if (event.key === KEYS.SPACE) {
+        const action = this.getActionForKeyEvent(event);
+        if (action === ACTIONS.SPACE) {
             event.preventDefault();
             return;
         }
@@ -145,17 +146,17 @@ class CardRadio extends DisabledMixin(TabIndexMixin(Card)) {
         const cards = this.getAllCardsWithinSameGroup();
         const enabledCards = cards.filter(card => !card.disabled);
         const currentIndex = enabledCards.indexOf(this);
-        if (['ArrowDown', 'ArrowRight'].includes(event.key)) {
+        if (action === ACTIONS.DOWN || ACTIONS.RIGHT === action) {
             // Move focus to the next radio
             const nextIndex = (currentIndex + 1) % enabledCards.length;
             this.updateCardRadio(enabledCards, nextIndex);
         }
-        else if (['ArrowUp', 'ArrowLeft'].includes(event.key)) {
+        else if (action === ACTIONS.UP || ACTIONS.LEFT === action) {
             // Move focus to the previous radio
             const prevIndex = (currentIndex - 1 + enabledCards.length) % enabledCards.length;
             this.updateCardRadio(enabledCards, prevIndex);
         }
-        if (event.key === KEYS.ENTER) {
+        if (action === ACTIONS.ENTER) {
             this.toggleChecked();
         }
     }
@@ -164,7 +165,7 @@ class CardRadio extends DisabledMixin(TabIndexMixin(Card)) {
      * @param event - The keyboard event
      */
     toggleOnSpace(event) {
-        if (event.key === KEYS.SPACE) {
+        if (this.getActionForKeyEvent(event) === ACTIONS.SPACE) {
             this.toggleChecked();
         }
     }

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

@@ -2,7 +2,7 @@ import { CSSResult, PropertyValueMap, PropertyValues } from 'lit';
 import { AssociatedFormControl } from '../../utils/mixins/FormInternalsMixin';
 import FormfieldWrapper from '../formfieldwrapper/formfieldwrapper.component';
 import type { CheckboxValidationType } from './checkbox.types';
-declare const Checkbox_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 Checkbox_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;
 /**
  * The Checkbox component allows users to select one or multiple options from a list, toggle features on/off,
  * or indicate agreement in forms and settings. These are commonly used in forms, lists, and settings panels
@@ -13,6 +13,7 @@ declare const Checkbox_base: import("../../utils/mixins/index.types").Constructo
  * **Note:** This component internally renders a native checkbox input element with custom styling.
  *
  * ## When to use
+ *
  * Use checkboxes when users can select multiple options from a list, or when a single checkbox represents a binary choice (e.g., agreeing to terms).
  *
  * ## Accessibility

package/dist/components/checkbox/checkbox.component.js

@@ -10,12 +10,12 @@ 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 { DataAriaLabelMixin } from '../../utils/mixins/DataAriaLabelMixin';
 import { FormInternalsMixin } from '../../utils/mixins/FormInternalsMixin';
 import FormfieldWrapper from '../formfieldwrapper/formfieldwrapper.component';
 import { DEFAULTS as FORMFIELD_DEFAULTS } from '../formfieldwrapper/formfieldwrapper.constants';
+import { KeyToActionMixin, ACTIONS } from '../../utils/mixins/KeyToActionMixin';
 import styles from './checkbox.styles';
 import { CHECKBOX_VALIDATION } from './checkbox.constants';
 /**
@@ -28,6 +28,7 @@ import { CHECKBOX_VALIDATION } from './checkbox.constants';
  * **Note:** This component internally renders a native checkbox input element with custom styling.
  *
  * ## When to use
+ *
  * Use checkboxes when users can select multiple options from a list, or when a single checkbox represents a binary choice (e.g., agreeing to terms).
  *
  * ## Accessibility
@@ -62,7 +63,7 @@ import { CHECKBOX_VALIDATION } from './checkbox.constants';
  * @csspart text-container - The container for the label and helper text elements.
  * @csspart static-checkbox - The staticcheckbox that provides the visual checkbox appearance.
  */
-class Checkbox extends AutoFocusOnMountMixin(FormInternalsMixin(DataAriaLabelMixin(FormfieldWrapper))) {
+class Checkbox extends KeyToActionMixin(KeyToActionMixin(AutoFocusOnMountMixin(FormInternalsMixin(DataAriaLabelMixin(FormfieldWrapper))))) {
     constructor() {
         super(...arguments);
         /**
@@ -177,11 +178,13 @@ class Checkbox extends AutoFocusOnMountMixin(FormInternalsMixin(DataAriaLabelMix
      */
     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();
+            event.preventDefault();
         }
     }
     /**

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

@@ -4,7 +4,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 './combobox.types';
-declare const Combobox_base: 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 Combobox_base: import("../../utils/mixins/index.types").Constructor<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 Combobox component is a text-based dropdown control that allows users to select an option from a predefined list.
  * Users can type text to filter the options and select their desired choice.

package/dist/components/combobox/combobox.component.js

@@ -12,7 +12,6 @@ import { property, query, queryAssignedElements, state } from 'lit/decorators.js
 import { ifDefined } from 'lit/directives/if-defined.js';
 import { live } from 'lit/directives/live.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';
@@ -28,6 +27,7 @@ import { TAG_NAME as OPTIONGROUP_TAG_NAME } from '../optgroup/optgroup.constants
 import { TAG_NAME as OPTION_TAG_NAME } from '../option/option.constants';
 import { DEFAULTS as POPOVER_DEFAULTS, POPOVER_PLACEMENT, TRIGGER } from '../popover/popover.constants';
 import { TAG_NAME as SELECTLISTBOX_TAG_NAME } from '../selectlistbox/selectlistbox.constants';
+import { KeyToActionMixin, ACTIONS } from '../../utils/mixins/KeyToActionMixin';
 import { AUTOCOMPLETE_LIST, ICON_NAME, TRIGGER_ID } from './combobox.constants';
 import { ComboboxEventManager } from './combobox.events';
 import styles from './combobox.styles';
@@ -105,7 +105,7 @@ import styles from './combobox.styles';
  * @csspart combobox__button - The button element of the combobox.
  * @csspart combobox__button-icon - The icon element of the button of the combobox.
  */
-class Combobox extends CaptureDestroyEventForChildElement(AutoFocusOnMountMixin(FormInternalsMixin(DataAriaLabelMixin(FormfieldWrapper)))) {
+class Combobox extends KeyToActionMixin(CaptureDestroyEventForChildElement(AutoFocusOnMountMixin(FormInternalsMixin(DataAriaLabelMixin(FormfieldWrapper))))) {
     /** @internal */
     get navItems() {
         return this.itemsStore.items;
@@ -440,31 +440,31 @@ class Combobox extends CaptureDestroyEventForChildElement(AutoFocusOnMountMixin(
     handleInputKeydown(event) {
         const options = this.getVisibleOptions(this.filteredValue);
         const activeIndex = options.findIndex(option => option.hasAttribute('data-focused'));
-        switch (event.key) {
-            case KEYS.ARROW_DOWN: {
+        switch (this.getActionForKeyEvent(event)) {
+            case ACTIONS.DOWN: {
                 this.openPopover();
                 const newIndex = options.length - 1 === activeIndex ? 0 : activeIndex + 1;
                 this.updateFocusAndScrollIntoView(options, activeIndex, newIndex);
                 event.preventDefault();
                 break;
             }
-            case KEYS.ARROW_UP: {
+            case ACTIONS.UP: {
                 this.openPopover();
                 const newIndex = activeIndex === -1 || activeIndex === 0 ? options.length - 1 : activeIndex - 1;
                 this.updateFocusAndScrollIntoView(options, activeIndex, newIndex);
                 event.preventDefault();
                 break;
             }
-            case KEYS.ENTER: {
+            case ACTIONS.ENTER: {
                 if (activeIndex === -1)
                     return;
                 this.setSelectedValue(options[activeIndex]);
-                if (this.isOpen === true) {
+                if (this.isOpen) {
                     this.closePopover();
                 }
                 break;
             }
-            case KEYS.ESCAPE: {
+            case ACTIONS.ESCAPE: {
                 if (activeIndex !== -1) {
                     this.updateOptionAttributes(options[activeIndex], false);
                 }
@@ -478,12 +478,12 @@ class Combobox extends CaptureDestroyEventForChildElement(AutoFocusOnMountMixin(
                 }
                 break;
             }
-            case KEYS.TAB: {
+            case ACTIONS.TAB: {
                 this.closePopover();
                 break;
             }
-            case KEYS.HOME:
-            case KEYS.END: {
+            case ACTIONS.HOME:
+            case ACTIONS.END: {
                 this.resetFocusedOption();
                 break;
             }

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

@@ -3,7 +3,7 @@ import FormfieldWrapper from '../formfieldwrapper';
 import type { IconNames } from '../icon/icon.types';
 import { AssociatedFormControl } from '../../utils/mixins/FormInternalsMixin';
 import type { AutoCapitalizeType, AutoCompleteType, InputType } from './input.types';
-declare const Input_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 Input_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-input is a component that allows users to input text.
  *  It contains:

package/dist/components/input/input.component.js

@@ -15,8 +15,8 @@ import FormfieldWrapper from '../formfieldwrapper';
 import { DEFAULTS as FORMFIELD_DEFAULTS } from '../formfieldwrapper/formfieldwrapper.constants';
 import { DataAriaLabelMixin } from '../../utils/mixins/DataAriaLabelMixin';
 import { FormInternalsMixin } from '../../utils/mixins/FormInternalsMixin';
-import { KEYS } from '../../utils/keys';
 import { AutoFocusOnMountMixin } from '../../utils/mixins/AutoFocusOnMountMixin';
+import { KeyToActionMixin, ACTIONS } from '../../utils/mixins/KeyToActionMixin';
 import { AUTO_CAPITALIZE, AUTO_COMPLETE, DEFAULTS, PREFIX_TEXT_OPTIONS } from './input.constants';
 import styles from './input.styles';
 /**
@@ -84,7 +84,7 @@ import styles from './input.styles';
  * @csspart input-text - The input field element.
  * @csspart trailing-button - The trailing button element that is displayed to clear the input field when the `trailingButton` property is set to true.
  */
-class Input extends AutoFocusOnMountMixin(FormInternalsMixin(DataAriaLabelMixin(FormfieldWrapper))) {
+class Input extends KeyToActionMixin(AutoFocusOnMountMixin(FormInternalsMixin(DataAriaLabelMixin(FormfieldWrapper)))) {
     constructor() {
         super(...arguments);
         /**
@@ -225,7 +225,7 @@ class Input extends AutoFocusOnMountMixin(FormInternalsMixin(DataAriaLabelMixin(
      */
     handleKeyDown(event) {
         var _a;
-        if (event.key === KEYS.ENTER) {
+        if (this.getActionForKeyEvent(event) === ACTIONS.ENTER) {
             (_a = this.form) === null || _a === void 0 ? void 0 : _a.requestSubmit();
         }
     }

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

@@ -3,7 +3,7 @@ import { Component } from '../../models';
 import { ElementStoreChangeTypes } from '../../utils/controllers/ElementStore';
 import type ListItem from '../listitem';
 import type { BaseArray } from '../../utils/virtualIndexArray';
-declare const List_base: import("../../utils/mixins/index.types").Constructor<Component & import("../../utils/mixins/ListNavigationMixin").ListNavigationMixinInterface> & import("../../utils/mixins/index.types").Constructor<import("../../utils/mixins/lifecycle/CaptureDestroyEventForChildElement").CaptureDestroyEventForChildElementInterface> & typeof Component;
+declare const List_base: import("../../utils/mixins/index.types").Constructor<Component & import("../../utils/mixins/ListNavigationMixin").ListNavigationMixinInterface & import("../../utils/mixins/KeyToActionMixin").KeyToActionInterface> & import("../../utils/mixins/index.types").Constructor<import("../../utils/mixins/lifecycle/CaptureDestroyEventForChildElement").CaptureDestroyEventForChildElementInterface> & typeof Component;
 /**
  * mdc-list component is used to display a group of list items. It is used as a container to wrap other list items.
  *

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

@@ -1,7 +1,7 @@
 import { CSSResult, PropertyValues } from 'lit';
 import type Option from '../option';
 import { Component } from '../../models';
-declare const ListBox_base: import("../../utils/mixins/index.types").Constructor<Component & import("../../utils/mixins/ListNavigationMixin").ListNavigationMixinInterface> & import("../../utils/mixins/index.types").Constructor<import("../../utils/mixins/lifecycle/CaptureDestroyEventForChildElement").CaptureDestroyEventForChildElementInterface> & typeof Component;
+declare const ListBox_base: import("../../utils/mixins/index.types").Constructor<Component & import("../../utils/mixins/ListNavigationMixin").ListNavigationMixinInterface & import("../../utils/mixins/KeyToActionMixin").KeyToActionInterface> & import("../../utils/mixins/index.types").Constructor<import("../../utils/mixins/lifecycle/CaptureDestroyEventForChildElement").CaptureDestroyEventForChildElementInterface> & typeof Component;
 /**
  * listbox component presents a list of options and allows a user to select one of them.
  *

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

@@ -2,7 +2,7 @@ import { CSSResult, PropertyValues, TemplateResult } from 'lit';
 import { Component } from '../../models';
 import type { TextType } from '../text/text.types';
 import { ListItemVariants } from './listitem.types';
-declare const ListItem_base: import("../../utils/mixins/index.types").Constructor<import("../../utils/mixins/DisabledMixin").DisabledMixinInterface> & import("../../utils/mixins/index.types").Constructor<import("../../utils/mixins/TabIndexMixin").TabIndexMixinInterface> & import("../../utils/mixins/index.types").Constructor<import("../../utils/mixins/lifecycle/LifeCycleMixin").LifeCycleMixinInterface> & typeof Component;
+declare const ListItem_base: import("../../utils/mixins/index.types").Constructor<import("../../utils/mixins/KeyToActionMixin").KeyToActionInterface> & import("../../utils/mixins/index.types").Constructor<import("../../utils/mixins/DisabledMixin").DisabledMixinInterface> & import("../../utils/mixins/index.types").Constructor<import("../../utils/mixins/TabIndexMixin").TabIndexMixinInterface> & import("../../utils/mixins/index.types").Constructor<import("../../utils/mixins/lifecycle/LifeCycleMixin").LifeCycleMixinInterface> & typeof Component;
 /**
  * mdc-listitem component is used to display a label with different types of controls.
  * There can be three types of controls, a radio button, a checkbox on the

package/dist/components/listitem/listitem.component.js

@@ -10,12 +10,12 @@ var __metadata = (this && this.__metadata) || function (k, v) {
 import { html, nothing } from 'lit';
 import { property, queryAssignedElements } from 'lit/decorators.js';
 import { Component } from '../../models';
-import { KEYS } from '../../utils/keys';
 import { DisabledMixin } from '../../utils/mixins/DisabledMixin';
 import { TabIndexMixin } from '../../utils/mixins/TabIndexMixin';
 import { ROLE } from '../../utils/roles';
 import { TYPE, VALID_TEXT_TAGS } from '../text/text.constants';
 import { LifeCycleMixin } from '../../utils/mixins/lifecycle/LifeCycleMixin';
+import { ACTIONS, KeyToActionMixin } from '../../utils/mixins/KeyToActionMixin';
 import { DEFAULTS } from './listitem.constants';
 import { ListItemEventManager } from './listitem.events';
 import styles from './listitem.styles';
@@ -76,7 +76,7 @@ import styles from './listitem.styles';
  * @event created - (React: onCreated) This event is dispatched after the listitem is created (added to the DOM)
  * @event destroyed - (React: onDestroyed) This event is dispatched after the listitem is destroyed (removed from the DOM)
  */
-class ListItem extends DisabledMixin(TabIndexMixin(LifeCycleMixin(Component))) {
+class ListItem extends KeyToActionMixin(DisabledMixin(TabIndexMixin(LifeCycleMixin(Component)))) {
     constructor() {
         super();
         /**
@@ -110,7 +110,8 @@ class ListItem extends DisabledMixin(TabIndexMixin(LifeCycleMixin(Component))) {
      * @param event - The keyboard event triggered when a key is pressed down.
      */
     handleKeyDown(event) {
-        if (event.key === KEYS.ENTER || event.key === KEYS.SPACE) {
+        const action = this.getActionForKeyEvent(event);
+        if (action === ACTIONS.ENTER || action === ACTIONS.SPACE) {
             const eventDispatched = this.triggerClickEvent(event);
             if (eventDispatched) {
                 event.preventDefault();
@@ -219,8 +220,13 @@ class ListItem extends DisabledMixin(TabIndexMixin(LifeCycleMixin(Component))) {
      * @param event - The mouse event triggered when a click occurs.
      */
     stopEventPropagation(event) {
-        if ((event instanceof KeyboardEvent && (event.key === KEYS.ENTER || event.key === KEYS.SPACE)) ||
-            event instanceof MouseEvent) {
+        if (event instanceof KeyboardEvent) {
+            const action = this.getActionForKeyEvent(event);
+            if (action === ACTIONS.ENTER || action === ACTIONS.SPACE) {
+                event.stopPropagation();
+            }
+        }
+        else if (event instanceof MouseEvent) {
             event.stopPropagation();
         }
     }

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

@@ -1,5 +1,6 @@
 import type { CSSResult, PropertyValues } from 'lit';
 import { Component } from '../../models';
+declare const MenuBar_base: import("../../utils/mixins/index.types").Constructor<import("../../utils/mixins/KeyToActionMixin").KeyToActionInterface> & typeof Component;
 /**
  * Menubar is a navigational menu component that provides a vertical fixed list of menu items,
  * with support for nested submenus and keyboard navigation. It serves as a container
@@ -23,7 +24,7 @@ import { Component } from '../../models';
  * @tagname mdc-menubar
  * @slot default - Contains the menu items and their associated popovers
  */
-declare class MenuBar extends Component {
+declare class MenuBar extends MenuBar_base {
     menusections: Array<HTMLElement>;
     constructor();
     connectedCallback(): Promise<void>;
@@ -60,7 +61,6 @@ declare class MenuBar extends Component {
     private updatePopoverPlacement;
     private updateTabIndexAndFocus;
     private navigateToMenuItem;
-    private getKeyWithDirectionFix;
     /**
      * Determines if a menuitem is a top-level menuitem (direct child of menubar or child of menusection whose parent is menubar)
      */

package/dist/components/menubar/menubar.component.js

@@ -15,8 +15,8 @@ import { POPOVER_PLACEMENT } from '../popover/popover.constants';
 import { TAG_NAME as MENUPOPOVER_TAGNAME } from '../menupopover/menupopover.constants';
 import { TAG_NAME as MENUSECTION_TAGNAME } from '../menusection/menusection.constants';
 import { TAG_NAME as SIDENAV_TAGNAME } from '../sidenavigation/sidenavigation.constants';
-import { KEYS } from '../../utils/keys';
 import { popoverStack } from '../popover/popover.stack';
+import { ACTIONS, KeyToActionMixin } from '../../utils/mixins/KeyToActionMixin';
 import { DEFAULTS, TAG_NAME as MENUBAR_TAGNAME } from './menubar.constants';
 import styles from './menubar.styles';
 /**
@@ -42,7 +42,7 @@ import styles from './menubar.styles';
  * @tagname mdc-menubar
  * @slot default - Contains the menu items and their associated popovers
  */
-class MenuBar extends Component {
+class MenuBar extends KeyToActionMixin(Component) {
     constructor() {
         super();
         this.addEventListener('click', this.handleClick.bind(this));
@@ -206,16 +206,6 @@ class MenuBar extends Component {
             }
         }
     }
-    getKeyWithDirectionFix(originalKey) {
-        const isRtl = window.getComputedStyle(this).direction === 'rtl';
-        if (!isRtl)
-            return originalKey;
-        if (originalKey === KEYS.ARROW_LEFT)
-            return KEYS.ARROW_RIGHT;
-        if (originalKey === KEYS.ARROW_RIGHT)
-            return KEYS.ARROW_LEFT;
-        return originalKey;
-    }
     /**
      * Determines if a menuitem is a top-level menuitem (direct child of menubar or child of menusection whose parent is menubar)
      */
@@ -294,30 +284,30 @@ class MenuBar extends Component {
     }
     async handleKeyDown(event) {
         const currentIndex = this.getCurrentIndex(event.target);
-        const key = this.getKeyWithDirectionFix(event.key);
-        switch (key) {
-            case KEYS.HOME:
+        const action = this.getActionForKeyEvent(event, true);
+        switch (action) {
+            case ACTIONS.HOME:
                 this.updateTabIndexAndFocus(this.menuItems, currentIndex, 0);
                 break;
-            case KEYS.END:
+            case ACTIONS.END:
                 this.updateTabIndexAndFocus(this.menuItems, currentIndex, this.menuItems.length - 1);
                 break;
-            case KEYS.ARROW_LEFT: {
+            case ACTIONS.LEFT: {
                 const element = currentIndex >= 0 ? this.menuItems[currentIndex] : event.target;
                 await this.crossMenubarNavigationOnLeft(element);
                 break;
             }
-            case KEYS.ARROW_RIGHT: {
+            case ACTIONS.RIGHT: {
                 const element = currentIndex >= 0 ? this.menuItems[currentIndex] : event.target;
                 await this.crossMenubarNavigationOnRight(element);
                 break;
             }
-            case KEYS.ARROW_UP: {
+            case ACTIONS.UP: {
                 this.navigateToMenuItem(currentIndex, 'prev');
                 event.preventDefault();
                 break;
             }
-            case KEYS.ARROW_DOWN: {
+            case ACTIONS.DOWN: {
                 this.navigateToMenuItem(currentIndex, 'next');
                 event.preventDefault();
                 break;