@momentum-design/components 0.129.42 → 0.129.44

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;

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 { 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;
+import type { PopoverBoundaryRoot, PopoverColor, PopoverPlacement, PopoverStrategy, PopoverTrigger } from './popover.types';
+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.
  *
@@ -156,7 +156,7 @@ declare class Popover extends Popover_base {
      *
      * @see [Floating UI - rootBoundary](https://floating-ui.com/docs/detectOverflow#rootboundary)
      */
-    boundaryRoot: 'viewport' | 'document';
+    boundaryRoot: PopoverBoundaryRoot;
     /**
      * Virtual padding around the boundary to check for overflow.
      * So the popover will not be placed on top of the edge of the boundary.
@@ -374,12 +374,12 @@ declare class Popover extends Popover_base {
     /**
      * Get trigger element on-demand
      * It is necessary because trigger might appear later in the DOM, or it could be replaced completely.
-     *
-     * @internal
      */
     get triggerElement(): HTMLElement | null;
+    /** @internal */
     private timers;
     constructor();
+    /** @internal */
     private parseTrigger;
     protected firstUpdated(changedProperties: PropertyValues): Promise<void>;
     connectedCallback(): void;
@@ -390,14 +390,17 @@ declare class Popover extends Popover_base {
      *
      * We are using capture phase for to make sure we capture trigger events even when they are not propagated during the
      * bubble phase (e.g.: buttons in list item)
+     * @internal
      */
     private setupTriggerListeners;
     /**
      * Removes the trigger related event listeners.
+     * @internal
      */
     private removeTriggerListeners;
     /**
      * Removes all event listeners related to the popover.
+     * @internal
      */
     private removeAllListeners;
     protected updated(changedProperties: PropertyValues): Promise<void>;
@@ -405,6 +408,7 @@ declare class Popover extends Popover_base {
      * Handles the outside click event to close the popover.
      *
      * @param event - The mouse event.
+     * @internal
      */
     protected onOutsidePopoverClick: (event: MouseEvent) => void;
     /**
@@ -413,12 +417,14 @@ declare class Popover extends Popover_base {
      * This method is attached to the document.
      *
      * @param event - The keyboard event.
+     * @internal
      */
     private onEscapeKeydown;
     /**
      * Handles the popover focus out event.
      *
      * @param event - The focus event.
+     * @internal
      */
     private onPopoverFocusOut;
     /**
@@ -430,37 +436,43 @@ declare class Popover extends Popover_base {
      */
     protected isOpenUpdated(oldValue: boolean, newValue: boolean): Promise<void>;
     /**
-     *  Handles mouse enter event on the trigger element.
-     *  This method sets the `isHovered` flag to true and shows the popover
+     * Handles mouse enter event on the trigger element.
+     * This method sets the `isHovered` flag to true and shows the popover
+     * @internal
      */
     private handleMouseEnter;
     /**
-     *  Handles mouse leave event on the trigger element.
-     *  This method sets the `isHovered` flag to false and starts the close delay
-     *  timer to hide the popover.
+     * Handles mouse leave event on the trigger element.
+     * This method sets the `isHovered` flag to false and starts the close delay
+     * timer to hide the popover.
+     * @internal
      */
     private handleMouseLeave;
     /**
-     * Handles focus out event on the trigger element.
      * Closes based on hideOnBlur property or hover state.
+     * @internal
      */
     private handleFocusOut;
     /**
-     *  Handles focus in event on the trigger element.
-     *  This method checks if the trigger element has visible focus or is being hovered.
+     * Handles focus in event on the trigger element.
+     * This method checks if the trigger element has visible focus or is being hovered.
+     * @internal
      */
     private handleFocusIn;
     /**
      * Cancels the open delay timer.
+     * @internal
      */
     private cancelOpenDelay;
     /**
      * Starts the close delay timer.
      * If the popover is not interactive, it will close the popover after the delay.
+     * @internal
      */
     private startCloseDelay;
     /**
      * Cancels the close delay timer.
+     * @internal
      */
     private cancelCloseDelay;
     /**
@@ -479,6 +491,7 @@ declare class Popover extends Popover_base {
      * Positions the popover based on the trigger element.
      * It also handles the flip, size and arrow placement.
      * It uses the floating-ui/dom library to calculate the position.
+     * @internal
      */
     private positionPopover;
     protected isEventFromTrigger(event: Event): boolean;

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.
      *
@@ -129,8 +130,6 @@ class Popover extends BackdropMixin(PreventScrollMixin(FocusTrapMixin(Component)
     /**
      * Get trigger element on-demand
      * It is necessary because trigger might appear later in the DOM, or it could be replaced completely.
-     *
-     * @internal
      */
     get triggerElement() {
         return this.getRootNode().querySelector(`[id="${this.triggerID}"]`);
@@ -384,7 +383,9 @@ class Popover extends BackdropMixin(PreventScrollMixin(FocusTrapMixin(Component)
          * @internal
          */
         this.popoverDepth = 0;
+        /** @internal */
         this.timers = new Timers(this);
+        /** @internal */
         this.parseTrigger = () => {
             var _a;
             const triggers = ((_a = this.trigger) === null || _a === void 0 ? void 0 : _a.split(' ')) || [];
@@ -411,6 +412,7 @@ class Popover extends BackdropMixin(PreventScrollMixin(FocusTrapMixin(Component)
          *
          * We are using capture phase for to make sure we capture trigger events even when they are not propagated during the
          * bubble phase (e.g.: buttons in list item)
+         * @internal
          */
         this.setupTriggerListeners = () => {
             if (this.trigger.includes('click')) {
@@ -436,6 +438,7 @@ class Popover extends BackdropMixin(PreventScrollMixin(FocusTrapMixin(Component)
         };
         /**
          * Removes the trigger related event listeners.
+         * @internal
          */
         this.removeTriggerListeners = () => {
             // click trigger
@@ -453,6 +456,7 @@ class Popover extends BackdropMixin(PreventScrollMixin(FocusTrapMixin(Component)
         };
         /**
          * Removes all event listeners related to the popover.
+         * @internal
          */
         this.removeAllListeners = () => {
             this.removeTriggerListeners();
@@ -471,6 +475,7 @@ class Popover extends BackdropMixin(PreventScrollMixin(FocusTrapMixin(Component)
          * Handles the outside click event to close the popover.
          *
          * @param event - The mouse event.
+         * @internal
          */
         this.onOutsidePopoverClick = (event) => {
             if (popoverStack.peek() !== this)
@@ -489,9 +494,10 @@ class Popover extends BackdropMixin(PreventScrollMixin(FocusTrapMixin(Component)
          * This method is attached to the document.
          *
          * @param event - The keyboard event.
+         * @internal
          */
         this.onEscapeKeydown = (event) => {
-            if (!this.visible || event.code !== 'Escape') {
+            if (!this.visible || this.getActionForKeyEvent(event) !== ACTIONS.ESCAPE) {
                 return;
             }
             if (!this.propagateEventOnEscape) {
@@ -506,6 +512,7 @@ class Popover extends BackdropMixin(PreventScrollMixin(FocusTrapMixin(Component)
          * Handles the popover focus out event.
          *
          * @param event - The focus event.
+         * @internal
          */
         this.onPopoverFocusOut = (event) => {
             if (!this.contains(event.relatedTarget)) {
@@ -513,8 +520,9 @@ class Popover extends BackdropMixin(PreventScrollMixin(FocusTrapMixin(Component)
             }
         };
         /**
-         *  Handles mouse enter event on the trigger element.
-         *  This method sets the `isHovered` flag to true and shows the popover
+         * Handles mouse enter event on the trigger element.
+         * This method sets the `isHovered` flag to true and shows the popover
+         * @internal
          */
         this.handleMouseEnter = (event) => {
             if (!this.isEventFromTrigger(event))
@@ -523,9 +531,10 @@ class Popover extends BackdropMixin(PreventScrollMixin(FocusTrapMixin(Component)
             this.show();
         };
         /**
-         *  Handles mouse leave event on the trigger element.
-         *  This method sets the `isHovered` flag to false and starts the close delay
-         *  timer to hide the popover.
+         * Handles mouse leave event on the trigger element.
+         * This method sets the `isHovered` flag to false and starts the close delay
+         * timer to hide the popover.
+         * @internal
          */
         this.handleMouseLeave = (event) => {
             if (!this.isEventFromTrigger(event))
@@ -534,8 +543,8 @@ class Popover extends BackdropMixin(PreventScrollMixin(FocusTrapMixin(Component)
             this.startCloseDelay();
         };
         /**
-         * Handles focus out event on the trigger element.
          * Closes based on hideOnBlur property or hover state.
+         * @internal
          */
         this.handleFocusOut = (event) => {
             if (!this.isEventFromTrigger(event))
@@ -553,8 +562,9 @@ class Popover extends BackdropMixin(PreventScrollMixin(FocusTrapMixin(Component)
             }
         };
         /**
-         *  Handles focus in event on the trigger element.
-         *  This method checks if the trigger element has visible focus or is being hovered.
+         * Handles focus in event on the trigger element.
+         * This method checks if the trigger element has visible focus or is being hovered.
+         * @internal
          */
         this.handleFocusIn = (event) => {
             var _a, _b, _c, _d;
@@ -568,6 +578,7 @@ class Popover extends BackdropMixin(PreventScrollMixin(FocusTrapMixin(Component)
         };
         /**
          * Cancels the open delay timer.
+         * @internal
          */
         this.cancelOpenDelay = () => {
             this.timers.clearTimeout(TIMEOUTS.OPEN);
@@ -575,6 +586,7 @@ class Popover extends BackdropMixin(PreventScrollMixin(FocusTrapMixin(Component)
         /**
          * Starts the close delay timer.
          * If the popover is not interactive, it will close the popover after the delay.
+         * @internal
          */
         this.startCloseDelay = () => {
             this.cancelOpenDelay();
@@ -596,6 +608,7 @@ class Popover extends BackdropMixin(PreventScrollMixin(FocusTrapMixin(Component)
         };
         /**
          * Cancels the close delay timer.
+         * @internal
          */
         this.cancelCloseDelay = () => {
             this.timers.clearTimeout(TIMEOUTS.HOVER);
@@ -656,6 +669,7 @@ class Popover extends BackdropMixin(PreventScrollMixin(FocusTrapMixin(Component)
          * Positions the popover based on the trigger element.
          * It also handles the flip, size and arrow placement.
          * It uses the floating-ui/dom library to calculate the position.
+         * @internal
          */
         this.positionPopover = () => {
             const { triggerElement } = this;

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

@@ -27,6 +27,10 @@ declare const STRATEGY: {
     readonly ABSOLUTE: "absolute";
     readonly FIXED: "fixed";
 };
+declare const BOUNDARY_ROOT: {
+    readonly VIEWPORT: "viewport";
+    readonly DOCUMENT: "document";
+};
 declare const DEFAULTS: {
     readonly PLACEMENT: "bottom";
     readonly TRIGGER: "click";
@@ -63,4 +67,4 @@ declare const TIMEOUTS: {
     readonly HOVER: "hover";
     readonly CLOSE: "close";
 };
-export { TAG_NAME, POPOVER_PLACEMENT, COLOR, STRATEGY, TRIGGER, DEFAULTS, TIMEOUTS };
+export { TAG_NAME, POPOVER_PLACEMENT, COLOR, STRATEGY, TRIGGER, BOUNDARY_ROOT, DEFAULTS, TIMEOUTS };

package/dist/components/popover/popover.constants.js

@@ -29,6 +29,10 @@ const STRATEGY = {
     ABSOLUTE: 'absolute',
     FIXED: 'fixed',
 };
+const BOUNDARY_ROOT = {
+    VIEWPORT: 'viewport',
+    DOCUMENT: 'document',
+};
 const DEFAULTS = {
     PLACEMENT: POPOVER_PLACEMENT.BOTTOM,
     TRIGGER: TRIGGER.CLICK,
@@ -36,7 +40,7 @@ const DEFAULTS = {
     STRATEGY: STRATEGY.ABSOLUTE,
     OFFSET: 4,
     BOUNDARY: 'clippingAncestors',
-    BOUNDARY_ROOT: 'viewport',
+    BOUNDARY_ROOT: BOUNDARY_ROOT.VIEWPORT,
     BOUNDARY_PADDING: 0,
     VISIBLE: false,
     ARROW: false,
@@ -65,4 +69,4 @@ const TIMEOUTS = {
     HOVER: 'hover',
     CLOSE: 'close',
 };
-export { TAG_NAME, POPOVER_PLACEMENT, COLOR, STRATEGY, TRIGGER, DEFAULTS, TIMEOUTS };
+export { TAG_NAME, POPOVER_PLACEMENT, COLOR, STRATEGY, TRIGGER, BOUNDARY_ROOT, DEFAULTS, TIMEOUTS };

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

@@ -1,9 +1,10 @@
 import type { ValueOf, TypedCustomEvent } from '../../utils/types';
 import type Popover from './popover.component';
-import { POPOVER_PLACEMENT, TRIGGER, COLOR, STRATEGY } from './popover.constants';
+import { POPOVER_PLACEMENT, TRIGGER, COLOR, STRATEGY, BOUNDARY_ROOT } from './popover.constants';
 type PopoverPlacement = ValueOf<typeof POPOVER_PLACEMENT>;
 type PopoverColor = ValueOf<typeof COLOR>;
 type PopoverStrategy = ValueOf<typeof STRATEGY>;
+type PopoverBoundaryRoot = ValueOf<typeof BOUNDARY_ROOT>;
 type PopoverTrigger = ValueOf<typeof TRIGGER> | `${ValueOf<typeof TRIGGER>} ${ValueOf<typeof TRIGGER>}`;
 type PopoverShownEvent = TypedCustomEvent<Popover, {
     show: boolean;
@@ -23,4 +24,4 @@ interface Events {
     onCreatedEvent: PopoverCreatedEvent;
     onDestroyedEvent: PopoverDestroyedEvent;
 }
-export type { PopoverPlacement, PopoverColor, PopoverStrategy, PopoverTrigger, Events, PopoverShownEvent, PopoverHiddenEvent, };
+export type { PopoverPlacement, PopoverColor, PopoverStrategy, PopoverBoundaryRoot, PopoverTrigger, Events, PopoverShownEvent, PopoverHiddenEvent, };

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