@momentum-design/components 0.91.2 → 0.92.1

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

@@ -61,6 +61,12 @@ declare class MenuItem extends ListItem {
      * Handles the keydown event for the menu item.
      * If the Enter key is pressed, it triggers a click event on the menu item.
      * This allows keyboard users to activate the menu item using the Enter key.
+  
+     * This follows the native behaviour, actionable element can be triggered by Enter
+     * key on the keydown event.
+     *
+     * Note: Action triggered by Space on the keyup event.
+     *
      * @param event - The keyboard event that triggered the action.
      */
     handleKeyDown(event: KeyboardEvent): void;
@@ -69,6 +75,11 @@ declare class MenuItem extends ListItem {
      * If the Space key is released, it triggers a click event on the menu item.
      * This allows keyboard users to activate the menu item using the Space key.
      * It also prevents the default action of the Space key to avoid scrolling the page.
+     *
+     * This follows the native behaviour, actionable element can be triggered by Space
+     * key on the keyup event.
+     *
+     * Note: Action triggered by Enter on the keydown event.
      * @param event - The keyboard event that triggered the action.
      */
     private handleKeyUp;

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

@@ -64,6 +64,12 @@ class MenuItem extends ListItem {
      * Handles the keydown event for the menu item.
      * If the Enter key is pressed, it triggers a click event on the menu item.
      * This allows keyboard users to activate the menu item using the Enter key.
+  
+     * This follows the native behaviour, actionable element can be triggered by Enter
+     * key on the keydown event.
+     *
+     * Note: Action triggered by Space on the keyup event.
+     *
      * @param event - The keyboard event that triggered the action.
      */
     handleKeyDown(event) {
@@ -77,6 +83,11 @@ class MenuItem extends ListItem {
      * If the Space key is released, it triggers a click event on the menu item.
      * This allows keyboard users to activate the menu item using the Space key.
      * It also prevents the default action of the Space key to avoid scrolling the page.
+     *
+     * This follows the native behaviour, actionable element can be triggered by Space
+     * key on the keyup event.
+     *
+     * Note: Action triggered by Enter on the keydown event.
      * @param event - The keyboard event that triggered the action.
      */
     handleKeyUp(event) {

package/dist/components/menuitemcheckbox/menuitemcheckbox.component.js

@@ -9,6 +9,7 @@ var __metadata = (this && this.__metadata) || function (k, v) {
 };
 import { html, nothing } from 'lit';
 import { property } from 'lit/decorators.js';
+import { classMap } from 'lit-html/directives/class-map.js';
 import { ROLE } from '../../utils/roles';
 import MenuItem from '../menuitem/menuitem.component';
 import { TYPE } from '../text/text.constants';
@@ -76,8 +77,7 @@ class MenuItemCheckbox extends MenuItem {
          * If the menuitemcheckbox is disabled, it does nothing.
          * If the menuitemcheckbox is not disabled, it toggles the `checked` state between `true` and `false`.
          */
-        this.handleMouseClick = (event) => {
-            event.stopPropagation();
+        this.handleMouseClick = () => {
             if (this.disabled)
                 return;
             this.checked = !this.checked;
@@ -140,8 +140,15 @@ class MenuItemCheckbox extends MenuItem {
      * @returns TemplateResult | typeof nothing
      */
     getCheckmarkIcon() {
-        if (this.checked && this.indicator === INDICATOR.CHECKMARK) {
-            return html ` <mdc-icon slot="trailing-controls" name="check-bold" part="checkmark-icon"></mdc-icon> `;
+        if (this.indicator === INDICATOR.CHECKMARK) {
+            return html `
+        <mdc-icon
+          slot="trailing-controls"
+          name="check-bold"
+          part="checkmark-icon"
+          class=${classMap({ 'hidden-checkmark': !this.checked })}
+        ></mdc-icon>
+      `;
         }
         return nothing;
     }

package/dist/components/menuitemcheckbox/menuitemcheckbox.styles.js

@@ -3,5 +3,8 @@ const styles = css `
   :host::part(checkmark-icon) {
     --mdc-icon-fill-color: currentColor;
   }
+  :host .hidden-checkmark {
+    visibility: hidden;
+  }
 `;
 export default [styles];

package/dist/components/menuitemradio/menuitemradio.component.js

@@ -9,6 +9,7 @@ var __metadata = (this && this.__metadata) || function (k, v) {
 };
 import { html, nothing } from 'lit';
 import { property } from 'lit/decorators.js';
+import { classMap } from 'lit-html/directives/class-map.js';
 import { ROLE } from '../../utils/roles';
 import MenuItem from '../menuitem/menuitem.component';
 import { TYPE } from '../text/text.constants';
@@ -79,8 +80,7 @@ class MenuItemRadio extends MenuItem {
          * If the menuitemradio is not checked, it sets its checked state to `true`
          * and sets all other menuitemradio elements of the same group with checked state to `false`.
          */
-        this.handleMouseClick = (event) => {
-            event.stopPropagation();
+        this.handleMouseClick = () => {
             if (this.disabled || this.checked)
                 return;
             this.updateOtherRadiosCheckedState();
@@ -149,8 +149,15 @@ class MenuItemRadio extends MenuItem {
      * @returns TemplateResult | typeof nothing
      */
     renderCheckmarkIcon() {
-        if (this.checked && this.indicator === INDICATOR.CHECKMARK) {
-            return html ` <mdc-icon slot="trailing-controls" name="check-bold" part="checkmark-icon"></mdc-icon> `;
+        if (this.indicator === INDICATOR.CHECKMARK) {
+            return html `
+        <mdc-icon
+          slot="trailing-controls"
+          name="check-bold"
+          part="checkmark-icon"
+          class=${classMap({ 'hidden-checkmark': !this.checked })}
+        ></mdc-icon>
+      `;
         }
         return nothing;
     }

package/dist/components/menuitemradio/menuitemradio.styles.js

@@ -3,5 +3,8 @@ const styles = css `
   :host::part(checkmark-icon) {
     --mdc-icon-fill-color: currentColor;
   }
+  :host .hidden-checkmark {
+    visibility: hidden;
+  }
 `;
 export default [styles];

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

@@ -18,6 +18,24 @@ import { PopoverPlacement } from '../popover/popover.types';
  *
  * The orientation of the menu popover is always set to `vertical`.
  *
+ * Submenu opens when:
+ * - Clicked on a menu item with a submenu
+ * - Enter or Space key pressed on a menu item with a submenu
+ *
+ * Menu closes completely (with all sub menus) when:
+ * - A menu item is clicked that does not have a submenu
+ * - Enter key pressed on a menu item (not a submenu trigger), menu item radio or menu item checkbox
+ * - Click outside the menu popover (on the backdrop)
+ *
+ * Close submenus when:
+ * - Esc key pressed, only the current submenu closed
+ * - Arrow Left key pressed, only the current submenu closed
+ * - Open another submenu with Click, Enter or Space key,
+ *   closes recursively all submenus until the selected item's submenu
+ *
+ * Menu does not close when:
+ * - Space key pressed on a menu item radio or menu item checkbox
+ *
  * @tagname mdc-menupopover
  *
  * @slot - Default slot for the menu popover content
@@ -45,12 +63,19 @@ declare class MenuPopover extends Popover {
      * @default bottom
      */
     placement: PopoverPlacement;
+    private menuItems;
     constructor();
     /** @internal */
-    get menuItems(): Array<HTMLElement>;
+    collectMenuItems(): void;
     connectedCallback(): void;
     protected isOpenUpdated(oldValue: boolean, newValue: boolean): Promise<void>;
     firstUpdated(changedProperties: PropertyValues): Promise<void>;
+    /**
+     * Reset all tabindex to -1 and set the tabindex of the current menu item to 0
+     *
+     * @param currentIndex - The index of the currently focused menu item.
+     */
+    private resetTabIndexes;
     /**
      * Retrieves the current index of the menu item that triggered the event.
      * @param target - The target element that triggered the event.
@@ -91,6 +116,12 @@ declare class MenuPopover extends Popover {
      */
     private hasSubmenuWithTriggerId;
     togglePopoverVisible: () => void;
+    /**
+     * Determines whether to close the menu based on the clicked target.
+     *
+     * @param target - The target element that was clicked.
+     */
+    private closeMenu;
     /**
      * Handles mouse click events on the menu items.
      * This method checks if the clicked element is a valid menu item and not a submenu trigger.
@@ -112,10 +143,27 @@ declare class MenuPopover extends Popover {
      * Handles keydown events for keyboard navigation within the menu popover.
      * This method allows users to navigate through the menu items using the keyboard.
      * It supports Home, End, Arrow Up, Arrow Down, Arrow Left, Arrow Right, and Escape keys.
+     *
+     * Also, it handles Enter key to close the menu popover
+     *
      * @param event - The keyboard event that triggered the keydown action.
      * @returns - This method does not return anything.
      */
     private handleKeyDown;
+    /**
+     * Handles keyup events for keyboard navigation within the menu popover.
+     *
+     * Some keys must be handled with keyup event to prevent default action.
+     *
+     * Space key closes the menu when the user presses it on a menu item,
+     * but the same key will trigger a click on the menu opener button.
+     * The button uses the keyup event so we have to handle it here as well
+     * to prevent the meu opener action which would re-open the menu.
+     *
+     * @param event - The keyboard event that triggered the keydown action.
+     * @returns - This method does not return anything.
+     */
+    private handleKeyUp;
     static styles: Array<CSSResult>;
 }
 export default MenuPopover;

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

@@ -10,14 +10,16 @@ var __metadata = (this && this.__metadata) || function (k, v) {
 import { property } from 'lit/decorators.js';
 import { KEYS } from '../../utils/keys';
 import { ROLE } from '../../utils/roles';
-import { TAG_NAME as MENUITEM_TAGNAME } from '../menuitem/menuitem.constants';
 import { TAG_NAME as MENUSECTION_TAGNAME } from '../menusection/menusection.constants';
+import { TAG_NAME as MENUITEM_TAGNAME } from '../menuitem/menuitem.constants';
+import { TAG_NAME as MENUITEMCHECKBOX_TAGNAME } from '../menuitemcheckbox/menuitemcheckbox.constants';
+import { TAG_NAME as MENUITEMRADIO_TAGNAME } from '../menuitemradio/menuitemradio.constants';
 import Popover from '../popover/popover.component';
 import { COLOR } from '../popover/popover.constants';
 import { popoverStack } from '../popover/popover.stack';
 import { DEFAULTS, TAG_NAME as MENU_POPOVER } from './menupopover.constants';
 import styles from './menupopover.styles';
-import { isActiveMenuItem, isValidMenuItem, isValidPopover } from './menupopover.utils';
+import { isValidMenuItem, isValidPopover } from './menupopover.utils';
 /**
  * A popover menu component that displays a list of menu items in a floating container.
  * It's designed to work in conjunction with `mdc-menubar` and `mdc-menuitem` to create
@@ -35,6 +37,24 @@ import { isActiveMenuItem, isValidMenuItem, isValidPopover } from './menupopover
  *
  * The orientation of the menu popover is always set to `vertical`.
  *
+ * Submenu opens when:
+ * - Clicked on a menu item with a submenu
+ * - Enter or Space key pressed on a menu item with a submenu
+ *
+ * Menu closes completely (with all sub menus) when:
+ * - A menu item is clicked that does not have a submenu
+ * - Enter key pressed on a menu item (not a submenu trigger), menu item radio or menu item checkbox
+ * - Click outside the menu popover (on the backdrop)
+ *
+ * Close submenus when:
+ * - Esc key pressed, only the current submenu closed
+ * - Arrow Left key pressed, only the current submenu closed
+ * - Open another submenu with Click, Enter or Space key,
+ *   closes recursively all submenus until the selected item's submenu
+ *
+ * Menu does not close when:
+ * - Space key pressed on a menu item radio or menu item checkbox
+ *
  * @tagname mdc-menupopover
  *
  * @slot - Default slot for the menu popover content
@@ -64,6 +84,7 @@ class MenuPopover extends Popover {
          * @default bottom
          */
         this.placement = DEFAULTS.PLACEMENT;
+        this.menuItems = [];
         /**
          * Handles outside click events to close the popover.
          * This method checks if the click occurred outside the popover and its trigger element.
@@ -100,14 +121,15 @@ class MenuPopover extends Popover {
             }
         };
         this.addEventListener('keydown', this.handleKeyDown);
+        this.addEventListener('keyup', this.handleKeyUp);
         this.addEventListener('click', this.handleMouseClick);
     }
     /** @internal */
-    get menuItems() {
+    collectMenuItems() {
         var _a;
         const slot = (_a = this.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('slot');
         const allAssignedElements = ((slot === null || slot === void 0 ? void 0 : slot.assignedElements({ flatten: true })) || []);
-        return allAssignedElements
+        this.menuItems = allAssignedElements
             .map(node => {
             if (node.tagName.toLowerCase() === MENUSECTION_TAGNAME) {
                 return Array.from(node.children).filter(child => isValidMenuItem(child));
@@ -148,12 +170,20 @@ class MenuPopover extends Popover {
     async firstUpdated(changedProperties) {
         var _a;
         await super.firstUpdated(changedProperties);
-        // Reset all tabindex to -1 and set the tabindex of the first menu item to 0
+        this.collectMenuItems();
+        this.resetTabIndexes(0);
+        (_a = this.triggerElement) === null || _a === void 0 ? void 0 : _a.setAttribute('aria-haspopup', ROLE.MENU);
+    }
+    /**
+     * Reset all tabindex to -1 and set the tabindex of the current menu item to 0
+     *
+     * @param currentIndex - The index of the currently focused menu item.
+     */
+    resetTabIndexes(currentIndex) {
         if (this.menuItems.length > 0) {
             this.menuItems.forEach(menuitem => menuitem.setAttribute('tabindex', '-1'));
-            this.menuItems[0].setAttribute('tabindex', '0');
+            this.menuItems[currentIndex].setAttribute('tabindex', '0');
         }
-        (_a = this.triggerElement) === null || _a === void 0 ? void 0 : _a.setAttribute('aria-haspopup', ROLE.MENU);
     }
     /**
      * Retrieves the current index of the menu item that triggered the event.
@@ -204,8 +234,25 @@ class MenuPopover extends Popover {
      * @returns - A boolean indicating whether a submenu with the specified trigger ID exists.
      */
     hasSubmenuWithTriggerId(id) {
-        var _a;
-        return ((_a = this.parentElement) === null || _a === void 0 ? void 0 : _a.querySelector(`${MENU_POPOVER}[triggerid="${id}"]`)) !== null;
+        var _a, _b;
+        return !!id && ((_b = (_a = this.parentElement) === null || _a === void 0 ? void 0 : _a.querySelector) === null || _b === void 0 ? void 0 : _b.call(_a, `${MENU_POPOVER}[triggerid="${id}"]`)) !== null;
+    }
+    /**
+     * Determines whether to close the menu based on the clicked target.
+     *
+     * @param target - The target element that was clicked.
+     */
+    closeMenu(target) {
+        const triggerId = target.getAttribute('id');
+        if (isValidMenuItem(target) &&
+            !this.hasSubmenuWithTriggerId(triggerId) &&
+            this === target.closest(MENU_POPOVER) // Ensure close all popover called only once
+        ) {
+            this.closeAllMenuPopovers();
+            if (target.matches(MENUITEM_TAGNAME)) {
+                target.dispatchEvent(new Event('action', { bubbles: true, composed: true }));
+            }
+        }
     }
     /**
      * Handles mouse click events on the menu items.
@@ -215,13 +262,9 @@ class MenuPopover extends Popover {
      */
     handleMouseClick(event) {
         const target = event.target;
-        const triggerId = target.getAttribute('id');
-        if (isActiveMenuItem(target) && // menuitemcheckbox and menuitemradio are not supposed to close the popover
-            !this.hasSubmenuWithTriggerId(triggerId) &&
-            this === target.closest(MENU_POPOVER) // Ensure close all popover called only once
-        ) {
-            this.closeAllMenuPopovers();
-            target.dispatchEvent(new Event('action', { bubbles: true, composed: true }));
+        if (event.isTrusted) {
+            // skip manually dispatched clicks from listItem
+            this.closeMenu(target);
         }
     }
     /**
@@ -249,37 +292,48 @@ class MenuPopover extends Popover {
      * Handles keydown events for keyboard navigation within the menu popover.
      * This method allows users to navigate through the menu items using the keyboard.
      * It supports Home, End, Arrow Up, Arrow Down, Arrow Left, Arrow Right, and Escape keys.
+     *
+     * Also, it handles Enter key to close the menu popover
+     *
      * @param event - The keyboard event that triggered the keydown action.
      * @returns - This method does not return anything.
      */
     handleKeyDown(event) {
         var _a, _b;
-        const currentIndex = this.getCurrentIndex(event.target);
+        let isKeyHandled = false;
+        this.collectMenuItems();
+        const target = event.target;
+        const currentIndex = this.getCurrentIndex(target);
         if (currentIndex === -1)
             return;
+        this.resetTabIndexes(currentIndex);
         const isRtl = window.getComputedStyle(this).direction === 'rtl';
         const targetKey = this.resolveDirectionKey(event.key, isRtl);
         switch (targetKey) {
             case KEYS.HOME: {
                 // Move focus to the first menu item
                 this.resetTabIndexAndSetFocus(0, currentIndex);
+                isKeyHandled = true;
                 break;
             }
             case KEYS.END: {
                 // Move focus to the last menu item
                 this.resetTabIndexAndSetFocus(this.menuItems.length - 1, currentIndex);
+                isKeyHandled = true;
                 break;
             }
             case KEYS.ARROW_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: {
                 // 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: {
@@ -289,6 +343,7 @@ class MenuPopover extends Popover {
                     const submenu = (_b = this.parentElement) === null || _b === void 0 ? void 0 : _b.querySelector(`${MENU_POPOVER}[triggerid="${triggerId}"]`);
                     if (submenu) {
                         submenu.showPopover();
+                        isKeyHandled = true;
                     }
                 }
                 break;
@@ -298,16 +353,69 @@ class MenuPopover extends Popover {
                 if (isValidPopover(this.parentElement)) {
                     this.hidePopover();
                     this.resetTabIndexAndSetFocus(0, currentIndex);
+                    isKeyHandled = true;
                 }
                 break;
             }
             case KEYS.ESCAPE: {
                 this.resetTabIndexAndSetFocus(0, currentIndex);
+                isKeyHandled = true;
+                break;
+            }
+            case KEYS.ENTER: {
+                this.closeMenu(target);
+                isKeyHandled = true;
+                break;
+            }
+            case KEYS.SPACE: {
+                // Prevent page scroll when space is pressed down
+                isKeyHandled = true;
                 break;
             }
             default:
                 break;
         }
+        // When menu consume any of the pressed key, we need to stop propagation
+        // to prevent the event from bubbling up and being handled by parent components which might use the same key.
+        if (isKeyHandled) {
+            event.stopPropagation();
+            event.preventDefault();
+        }
+    }
+    /**
+     * Handles keyup events for keyboard navigation within the menu popover.
+     *
+     * Some keys must be handled with keyup event to prevent default action.
+     *
+     * Space key closes the menu when the user presses it on a menu item,
+     * but the same key will trigger a click on the menu opener button.
+     * The button uses the keyup event so we have to handle it here as well
+     * to prevent the meu opener action which would re-open the menu.
+     *
+     * @param event - The keyboard event that triggered the keydown action.
+     * @returns - This method does not return anything.
+     */
+    handleKeyUp(event) {
+        let isKeyHandled = false;
+        const target = event.target;
+        switch (event.key) {
+            case KEYS.SPACE: {
+                // If the target is a menu item, trigger its click event
+                if (!target.matches(`${MENUITEMRADIO_TAGNAME}, ${MENUITEMCHECKBOX_TAGNAME}`)) {
+                    this.closeMenu(target);
+                    isKeyHandled = true;
+                }
+                break;
+            }
+            default:
+                break;
+        }
+        // When menu consume any of the pressed key, we need to stop propagation
+        // to prevent the event from bubbling up and being handled by parent components which might use the same key.
+        if (isKeyHandled) {
+            event.stopPropagation();
+            event.preventDefault();
+        }
     }
 }
 MenuPopover.styles = [...Popover.styles, ...styles];

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

@@ -6,5 +6,4 @@ import type MenuPopover from './menupopover.component';
  */
 declare const isValidMenuItem: (menuItem: Element | null) => boolean;
 declare const isValidPopover: (el: Element | null) => el is MenuPopover;
-declare const isActiveMenuItem: (menuItem: Element | null) => boolean;
-export { isValidMenuItem, isValidPopover, isActiveMenuItem };
+export { isValidMenuItem, isValidPopover };

package/dist/components/menupopover/menupopover.utils.js

@@ -13,9 +13,4 @@ const isValidMenuItem = (menuItem) => {
     return role === ROLE.MENUITEM || role === ROLE.MENUITEMCHECKBOX || role === ROLE.MENUITEMRADIO;
 };
 const isValidPopover = (el) => { var _a; return ((_a = el === null || el === void 0 ? void 0 : el.tagName) === null || _a === void 0 ? void 0 : _a.toLowerCase()) === MENUPOPOVER_TAGNAME; };
-const isActiveMenuItem = (menuItem) => {
-    var _a;
-    const role = (_a = menuItem === null || menuItem === void 0 ? void 0 : menuItem.getAttribute('role')) === null || _a === void 0 ? void 0 : _a.toLowerCase();
-    return !!menuItem && role === ROLE.MENUITEM && !menuItem.hasAttribute('disabled');
-};
-export { isValidMenuItem, isValidPopover, isActiveMenuItem };
+export { isValidMenuItem, isValidPopover };

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

@@ -87,6 +87,11 @@ declare class Popover extends Popover_base {
      * @default 4
      */
     offset: number;
+    /**
+     *Virtual padding around the boundary to check for overflow.
+     * @default 16
+     */
+    boundaryPadding: number;
     /**
      * Determines whether the focus trap is enabled.
      * If true, focus will be restricted to the content within this component.

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

@@ -106,6 +106,11 @@ class Popover extends PreventScrollMixin(FocusTrapMixin(Component)) {
          * @default 4
          */
         this.offset = DEFAULTS.OFFSET;
+        /**
+         *Virtual padding around the boundary to check for overflow.
+         * @default 16
+         */
+        this.boundaryPadding = DEFAULTS.BOUNDARY_PADDING;
         /**
          * Determines whether the focus trap is enabled.
          * If true, focus will be restricted to the content within this component.
@@ -617,7 +622,7 @@ class Popover extends PreventScrollMixin(FocusTrapMixin(Component)) {
     positionPopover() {
         if (!this.triggerElement)
             return;
-        const middleware = [shift()];
+        const middleware = [shift({ padding: this.boundaryPadding })];
         let popoverOffset = this.offset;
         if (this.flip) {
             middleware.push(flip());
@@ -725,6 +730,10 @@ __decorate([
     property({ type: Number, reflect: true }),
     __metadata("design:type", Number)
 ], Popover.prototype, "offset", void 0);
+__decorate([
+    property({ type: Number, reflect: true, attribute: 'boundary-padding' }),
+    __metadata("design:type", Number)
+], Popover.prototype, "boundaryPadding", void 0);
 __decorate([
     property({ type: Boolean, reflect: true, attribute: 'focus-trap' }),
     __metadata("design:type", Boolean)

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

@@ -28,6 +28,7 @@ declare const DEFAULTS: {
     readonly TRIGGER: "click";
     readonly COLOR: "tonal";
     readonly OFFSET: 4;
+    readonly BOUNDARY_PADDING: 16;
     readonly VISIBLE: false;
     readonly ARROW: false;
     readonly CLOSE_BUTTON: false;

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

@@ -29,6 +29,7 @@ const DEFAULTS = {
     TRIGGER: TRIGGER.CLICK,
     COLOR: COLOR.TONAL,
     OFFSET: 4,
+    BOUNDARY_PADDING: 16,
     VISIBLE: false,
     ARROW: false,
     CLOSE_BUTTON: false,