@momentum-design/components 0.129.43 → 0.129.44

package/dist/components/menuitem/menuitem.component.js

@@ -12,7 +12,7 @@ import { property } from 'lit/decorators.js';
 import { ROLE } from '../../utils/roles';
 import ListItem from '../listitem/listitem.component';
 import { LISTITEM_VARIANTS } from '../listitem/listitem.constants';
-import { KEYS } from '../../utils/keys';
+import { ACTIONS } from '../../utils/mixins/KeyToActionMixin';
 import { ARROW_ICONS, ARROW_DIRECTIONS, ARROW_POSITIONS } from './menuitem.constants';
 import styles from './menuitem.styles';
 /**
@@ -77,7 +77,7 @@ class MenuItem extends ListItem {
      * @param event - The keyboard event that triggered the action.
      */
     handleKeyDown(event) {
-        if (event.key === KEYS.ENTER) {
+        if (this.getActionForKeyEvent(event) === ACTIONS.ENTER) {
             this.triggerClickEvent(event);
             event.preventDefault();
         }
@@ -95,7 +95,7 @@ class MenuItem extends ListItem {
      * @param event - The keyboard event that triggered the action.
      */
     handleKeyUp(event) {
-        if (event.key === KEYS.SPACE) {
+        if (this.getActionForKeyEvent(event) === ACTIONS.SPACE) {
             this.triggerClickEvent(event);
             event.preventDefault();
         }

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

@@ -154,16 +154,6 @@ declare class MenuPopover extends Popover {
     private handleItemCreation;
     private handleItemChangeEvent;
     private resetMenuNavigation;
-    /**
-     * Resolves the key pressed by the user based on the direction of the layout.
-     * This method is used to handle keyboard navigation in a right-to-left (RTL) layout.
-     * It checks if the layout is RTL and adjusts the arrow keys accordingly.
-     * For example, in RTL, the left arrow key behaves like the right arrow key and vice versa.
-     * @param key - The key pressed by the user.
-     * @param isRtl - A boolean indicating if the layout is right-to-left (RTL).
-     * @returns - The resolved key based on the direction.
-     */
-    private resolveDirectionKey;
     /**
      * Handles keydown events for keyboard navigation within the menu popover.
      * This method allows users to navigate through the menu items using the keyboard.

package/dist/components/menupopover/menupopover.component.js

@@ -8,7 +8,6 @@ var __metadata = (this && this.__metadata) || function (k, v) {
     if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
 };
 import { property } from 'lit/decorators.js';
-import { KEYS } from '../../utils/keys';
 import { ROLE } from '../../utils/roles';
 import { TAG_NAME as MENUSECTION_TAGNAME } from '../menusection/menusection.constants';
 import { TAG_NAME as NAVMENUITEM_TAGNAME } from '../navmenuitem/navmenuitem.constants';
@@ -18,6 +17,7 @@ import { TAG_NAME as MENUITEMRADIO_TAGNAME } from '../menuitemradio/menuitemradi
 import Popover from '../popover/popover.component';
 import { COLOR } from '../popover/popover.constants';
 import { popoverStack } from '../popover/popover.stack';
+import { ACTIONS } from '../../utils/mixins/KeyToActionMixin';
 import { DEFAULTS, TAG_NAME as MENU_POPOVER } from './menupopover.constants';
 import styles from './menupopover.styles';
 import { isValidMenuItem, isValidMenuPopover } from './menupopover.utils';
@@ -173,36 +173,35 @@ class MenuPopover extends Popover {
             if (currentIndex === -1)
                 return;
             this.resetTabIndexes(currentIndex);
-            const isRtl = window.getComputedStyle(this).direction === 'rtl';
-            const targetKey = this.resolveDirectionKey(event.key, isRtl);
+            const targetKey = this.getActionForKeyEvent(event, true);
             switch (targetKey) {
-                case KEYS.HOME: {
+                case ACTIONS.HOME: {
                     // Move focus to the first menu item
                     this.resetTabIndexAndSetFocus(0, currentIndex);
                     isKeyHandled = true;
                     break;
                 }
-                case KEYS.END: {
+                case ACTIONS.END: {
                     // Move focus to the last menu item
                     this.resetTabIndexAndSetFocus(this.menuItems.length - 1, currentIndex);
                     isKeyHandled = true;
                     break;
                 }
-                case KEYS.ARROW_DOWN: {
+                case ACTIONS.DOWN: {
                     // Move focus to the next menu item
                     const newIndex = currentIndex + 1 === this.menuItems.length ? 0 : currentIndex + 1;
                     this.resetTabIndexAndSetFocus(newIndex, currentIndex);
                     isKeyHandled = true;
                     break;
                 }
-                case KEYS.ARROW_UP: {
+                case ACTIONS.UP: {
                     // Move focus to the prev menu item
                     const newIndex = currentIndex - 1 === -1 ? this.menuItems.length - 1 : currentIndex - 1;
                     this.resetTabIndexAndSetFocus(newIndex, currentIndex);
                     isKeyHandled = true;
                     break;
                 }
-                case KEYS.ARROW_RIGHT: {
+                case ACTIONS.RIGHT: {
                     // If there is a submenu, open it.
                     const subMenu = this.getSubMenuPopoverOfTarget(target);
                     if (subMenu) {
@@ -211,7 +210,7 @@ class MenuPopover extends Popover {
                     }
                     break;
                 }
-                case KEYS.ARROW_LEFT: {
+                case ACTIONS.LEFT: {
                     // If the current popover is a submenu then close this popover.
                     if (isValidMenuPopover(this.parentElement)) {
                         this.hide();
@@ -220,12 +219,12 @@ class MenuPopover extends Popover {
                     }
                     break;
                 }
-                case KEYS.ESCAPE: {
+                case ACTIONS.ESCAPE: {
                     this.resetTabIndexAndSetFocus(0, currentIndex);
                     isKeyHandled = true;
                     break;
                 }
-                case KEYS.ENTER: {
+                case ACTIONS.ENTER: {
                     if (!this.getSubMenuPopoverOfTarget(target) && !target.hasAttribute('soft-disabled')) {
                         this.closeAllMenuPopovers();
                         this.fireMenuItemAction(target);
@@ -233,7 +232,7 @@ class MenuPopover extends Popover {
                     }
                     break;
                 }
-                case KEYS.SPACE: {
+                case ACTIONS.SPACE: {
                     // Prevent page scroll when space is pressed down
                     isKeyHandled = true;
                     break;
@@ -264,10 +263,11 @@ class MenuPopover extends Popover {
         this.handleKeyUp = (event) => {
             let isKeyHandled = false;
             const target = event.target;
-            switch (event.key) {
-                case KEYS.SPACE: {
+            switch (this.getActionForKeyEvent(event)) {
+                case ACTIONS.SPACE: {
                     // If the target is a menu item, trigger its click event
-                    if (!target.matches(`${MENUITEMRADIO_TAGNAME}, ${MENUITEMCHECKBOX_TAGNAME}`) && !target.hasAttribute('soft-disabled')) {
+                    if (!target.matches(`${MENUITEMRADIO_TAGNAME}, ${MENUITEMCHECKBOX_TAGNAME}`) &&
+                        !target.hasAttribute('soft-disabled')) {
                         // only close all menu popovers if the target is not opening a menu popover
                         if (!this.getSubMenuPopoverOfTarget(target)) {
                             this.closeAllMenuPopovers();
@@ -483,27 +483,6 @@ class MenuPopover extends Popover {
         this.closeAllMenuPopovers();
         this.fireMenuItemAction(target);
     }
-    /**
-     * Resolves the key pressed by the user based on the direction of the layout.
-     * This method is used to handle keyboard navigation in a right-to-left (RTL) layout.
-     * It checks if the layout is RTL and adjusts the arrow keys accordingly.
-     * For example, in RTL, the left arrow key behaves like the right arrow key and vice versa.
-     * @param key - The key pressed by the user.
-     * @param isRtl - A boolean indicating if the layout is right-to-left (RTL).
-     * @returns - The resolved key based on the direction.
-     */
-    resolveDirectionKey(key, isRtl) {
-        if (!isRtl)
-            return key;
-        switch (key) {
-            case KEYS.ARROW_LEFT:
-                return KEYS.ARROW_RIGHT;
-            case KEYS.ARROW_RIGHT:
-                return KEYS.ARROW_LEFT;
-            default:
-                return key;
-        }
-    }
 }
 MenuPopover.styles = [...Popover.styles, ...styles];
 __decorate([

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

@@ -1,7 +1,7 @@
 import { CSSResult, PropertyValues } from 'lit';
 import { Component } from '../../models';
 import type { PopoverBoundaryRoot, PopoverColor, PopoverPlacement, PopoverStrategy, PopoverTrigger } from './popover.types';
-declare const Popover_base: import("../../utils/mixins/index.types").Constructor<Component & import("../../utils/mixins/BackdropMixin").BackdropMixinInterface> & import("../../utils/mixins/index.types").Constructor<Component & import("../../utils/mixins/PreventScrollMixin").PreventScrollMixinInterface> & import("../../utils/mixins/index.types").Constructor<Component & import("../../utils/mixins/FocusTrapMixin").FocusTrapClassInterface> & typeof Component;
+declare const Popover_base: import("../../utils/mixins/index.types").Constructor<import("../../utils/mixins/KeyToActionMixin").KeyToActionInterface> & import("../../utils/mixins/index.types").Constructor<Component & import("../../utils/mixins/BackdropMixin").BackdropMixinInterface> & import("../../utils/mixins/index.types").Constructor<Component & import("../../utils/mixins/PreventScrollMixin").PreventScrollMixinInterface> & import("../../utils/mixins/index.types").Constructor<Component & import("../../utils/mixins/FocusTrapMixin").FocusTrapClassInterface> & typeof Component;
 /**
  * Popover is generic overlay which can be triggered by any actionable element.
  *

package/dist/components/popover/popover.component.js

@@ -17,6 +17,7 @@ import { BackdropMixin } from '../../utils/mixins/BackdropMixin';
 import { FocusTrapMixin } from '../../utils/mixins/FocusTrapMixin';
 import { PreventScrollMixin } from '../../utils/mixins/PreventScrollMixin';
 import { Timers } from '../../utils/controllers/Timers';
+import { ACTIONS, KeyToActionMixin } from '../../utils/mixins/KeyToActionMixin';
 import { COLOR, DEFAULTS, POPOVER_PLACEMENT, TIMEOUTS, TRIGGER } from './popover.constants';
 import { PopoverEventManager } from './popover.events';
 import { popoverStack } from './popover.stack';
@@ -96,7 +97,7 @@ import { PopoverUtils } from './popover.utils';
  * @csspart popover-content - The content of the popover.
  * @csspart popover-hover-bridge - The hover bridge of the popover.
  */
-class Popover extends BackdropMixin(PreventScrollMixin(FocusTrapMixin(Component))) {
+class Popover extends KeyToActionMixin(BackdropMixin(PreventScrollMixin(FocusTrapMixin(Component)))) {
     /**
      * The effective z-index of the popover.
      *
@@ -496,7 +497,7 @@ class Popover extends BackdropMixin(PreventScrollMixin(FocusTrapMixin(Component)
          * @internal
          */
         this.onEscapeKeydown = (event) => {
-            if (!this.visible || event.code !== 'Escape') {
+            if (!this.visible || this.getActionForKeyEvent(event) !== ACTIONS.ESCAPE) {
                 return;
             }
             if (!this.propagateEventOnEscape) {

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

@@ -1,7 +1,7 @@
 import { CSSResult, PropertyValueMap, PropertyValues } from 'lit';
 import FormfieldWrapper from '../formfieldwrapper/formfieldwrapper.component';
 import { AssociatedFormControl } from '../../utils/mixins/FormInternalsMixin';
-declare const Radio_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 Radio_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 Radio component allows users to select a single option from a group of mutually exclusive choices.
  * Unlike checkboxes which allow multiple selections, radio buttons ensure only one option can be selected

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();
         }
     }