@momentum-design/components 0.83.7 → 0.84.1

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

@@ -1,5 +1,6 @@
 import { CSSResult, PropertyValues } from 'lit';
 import Popover from '../popover/popover.component';
+import { PopoverPlacement } from '../popover/popover.types';
 /**
  * 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
@@ -21,10 +22,26 @@ import Popover from '../popover/popover.component';
  * @slot default - Contains the menu items to be displayed in the popover
  */
 declare class MenuPopover extends Popover {
+    /**
+     * The placement of the popover.
+     * - **top**
+     * - **top-start**
+     * - **top-end**
+     * - **bottom**
+     * - **bottom-start**
+     * - **bottom-end**
+     * - **left**
+     * - **left-start**
+     * - **left-end**
+     * - **right**
+     * - **right-start**
+     * - **right-end**
+     * @default bottom
+     */
+    placement: PopoverPlacement;
     constructor();
     /** @internal */
     get menuItems(): Array<HTMLElement>;
-    hidePopover: () => void;
     connectedCallback(): void;
     firstUpdated(changedProperties: PropertyValues): Promise<void>;
     /**

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

@@ -1,10 +1,20 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+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 { ORIENTATION } from '../menubar/menubar.constants';
 import Popover from '../popover/popover.component';
 import { COLOR } from '../popover/popover.constants';
-import { TAG_NAME as MENU_POPOVER } from './menupopover.constants';
+import { DEFAULTS, TAG_NAME as MENU_POPOVER } from './menupopover.constants';
 import styles from './menupopover.styles';
 import { isActiveMenuItem, isValidMenuItem, isValidPopover } from './menupopover.utils';
 import { popoverStack } from '../popover/popover.stack';
@@ -31,12 +41,23 @@ import { popoverStack } from '../popover/popover.stack';
 class MenuPopover extends Popover {
     constructor() {
         super();
-        this.hidePopover = () => {
-            setTimeout(() => {
-                this.visible = false;
-                this.isTriggerClicked = false;
-            }, this.closeDelay);
-        };
+        /**
+         * The placement of the popover.
+         * - **top**
+         * - **top-start**
+         * - **top-end**
+         * - **bottom**
+         * - **bottom-start**
+         * - **bottom-end**
+         * - **left**
+         * - **left-start**
+         * - **left-end**
+         * - **right**
+         * - **right-start**
+         * - **right-end**
+         * @default bottom
+         */
+        this.placement = DEFAULTS.PLACEMENT;
         /**
          * Handles outside click events to close the popover.
          * This method checks if the click occurred outside the popover and its trigger element.
@@ -247,4 +268,8 @@ class MenuPopover extends Popover {
     }
 }
 MenuPopover.styles = [...Popover.styles, ...styles];
+__decorate([
+    property({ type: String, reflect: true }),
+    __metadata("design:type", String)
+], MenuPopover.prototype, "placement", void 0);
 export default MenuPopover;

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

@@ -1,2 +1,5 @@
 declare const TAG_NAME: "mdc-menupopover";
-export { TAG_NAME };
+declare const DEFAULTS: {
+    PLACEMENT: "bottom-start";
+};
+export { TAG_NAME, DEFAULTS };

package/dist/components/menupopover/menupopover.constants.js

@@ -1,3 +1,7 @@
 import utils from '../../utils/tag-name';
+import { POPOVER_PLACEMENT } from '../popover/popover.constants';
 const TAG_NAME = utils.constructTagName('menupopover');
-export { TAG_NAME };
+const DEFAULTS = {
+    PLACEMENT: POPOVER_PLACEMENT.BOTTOM_START,
+};
+export { TAG_NAME, DEFAULTS };

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

@@ -318,12 +318,10 @@ class Popover extends PreventScrollMixin(FocusTrapMixin(Component)) {
          * Hides the popover.
          */
         this.hidePopover = () => {
-            if (popoverStack.peek() === this) {
-                setTimeout(() => {
-                    this.visible = false;
-                    this.isTriggerClicked = false;
-                }, this.closeDelay);
-            }
+            setTimeout(() => {
+                this.visible = false;
+                this.isTriggerClicked = false;
+            }, this.closeDelay);
         };
         /**
          * Toggles the popover visibility.

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

@@ -1,5 +1,6 @@
 import { CSSResult, PropertyValueMap } from 'lit';
 import Popover from '../popover/popover.component';
+import { PopoverPlacement } from '../popover/popover.types';
 /**
  * A toggletip is triggered by clicking a trigger element.
  *
@@ -48,6 +49,23 @@ declare class ToggleTip extends Popover {
       * Please refer to the `mdc-screenreaderannouncer` component for more details.
     */
     screenreaderAnnouncerIdentity?: string;
+    /**
+     * The placement of the popover.
+     * - **top**
+     * - **top-start**
+     * - **top-end**
+     * - **bottom**
+     * - **bottom-start**
+     * - **bottom-end**
+     * - **left**
+     * - **left-start**
+     * - **left-end**
+     * - **right**
+     * - **right-start**
+     * - **right-end**
+     * @default bottom
+     */
+    placement: PopoverPlacement;
     connectedCallback(): void;
     /**
      * @returns The text content of all the nodes in the default slot, joined by a space.

package/dist/components/toggletip/toggletip.component.js

@@ -54,13 +54,29 @@ class ToggleTip extends Popover {
         super(...arguments);
         /** @internal */
         this.currentAnnouncement = '';
+        /**
+         * The placement of the popover.
+         * - **top**
+         * - **top-start**
+         * - **top-end**
+         * - **bottom**
+         * - **bottom-start**
+         * - **bottom-end**
+         * - **left**
+         * - **left-start**
+         * - **left-end**
+         * - **right**
+         * - **right-start**
+         * - **right-end**
+         * @default bottom
+         */
+        this.placement = DEFAULTS.PLACEMENT;
     }
     connectedCallback() {
         var _a;
         super.connectedCallback();
         this.closeButton = (_a = this.closeButton) !== null && _a !== void 0 ? _a : DEFAULTS.CLOSE_BUTTON;
         this.closeButtonAriaLabel = DEFAULTS.CLOSE_BUTTON_ARIA_LABEL;
-        this.placement = DEFAULTS.PLACEMENT;
         this.trigger = DEFAULTS.CLICK;
         this.showArrow = DEFAULTS.SHOW_ARROW;
         this.interactive = true;
@@ -122,4 +138,8 @@ __decorate([
     property({ type: String, reflect: true, attribute: 'screenreader-announcer-identity' }),
     __metadata("design:type", String)
 ], ToggleTip.prototype, "screenreaderAnnouncerIdentity", void 0);
+__decorate([
+    property({ type: String, reflect: true }),
+    __metadata("design:type", String)
+], ToggleTip.prototype, "placement", void 0);
 export default ToggleTip;

package/dist/custom-elements.json

@@ -520,67 +520,6 @@
         }
       ]
     },
-    {
-      "kind": "javascript-module",
-      "path": "components/appheader/appheader.component.js",
-      "declarations": [
-        {
-          "kind": "class",
-          "description": "The `mdc-appheader` component provides a structured and accessible app header layout.\nIt consists of three primary sections: leading, center, and trailing.\n\n- The **leading section** typically holds a **brand logo**, **brand name** or **menu icon**.\n- The **center section** can contain a **search bar**, **icons** or action controls.\n- The **trailing section** generally includes a **profile avatar**, **additional icons** or **action controls**.",
-          "name": "Appheader",
-          "cssParts": [
-            {
-              "description": "The main container for styling the header.",
-              "name": "container"
-            },
-            {
-              "description": "The leading section of the header.",
-              "name": "leading-section"
-            },
-            {
-              "description": "The center section of the header.",
-              "name": "center-section"
-            },
-            {
-              "description": "The trailing section of the header.",
-              "name": "trailing-section"
-            }
-          ],
-          "slots": [
-            {
-              "description": "Slot for the leading section (e.g., brand logo, brand name).",
-              "name": "leading"
-            },
-            {
-              "description": "Slot for the center section (e.g., search bar, icons).",
-              "name": "center"
-            },
-            {
-              "description": "Slot for the trailing section (e.g., profile avatar, icons).",
-              "name": "trailing"
-            }
-          ],
-          "members": [],
-          "superclass": {
-            "name": "Component",
-            "module": "/src/models"
-          },
-          "tagName": "mdc-appheader",
-          "jsDoc": "/**\n * The `mdc-appheader` component provides a structured and accessible app header layout.\n * It consists of three primary sections: leading, center, and trailing.\n *\n * - The **leading section** typically holds a **brand logo**, **brand name** or **menu icon**.\n * - The **center section** can contain a **search bar**, **icons** or action controls.\n * - The **trailing section** generally includes a **profile avatar**, **additional icons** or **action controls**.\n *\n * @tagname mdc-appheader\n *\n * @slot leading - Slot for the leading section (e.g., brand logo, brand name).\n * @slot center - Slot for the center section (e.g., search bar, icons).\n * @slot trailing - Slot for the trailing section (e.g., profile avatar, icons).\n *\n * @csspart container - The main container for styling the header.\n * @csspart leading-section - The leading section of the header.\n * @csspart center-section - The center section of the header.\n * @csspart trailing-section - The trailing section of the header.\n */",
-          "customElement": true
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "default",
-          "declaration": {
-            "name": "Appheader",
-            "module": "components/appheader/appheader.component.js"
-          }
-        }
-      ]
-    },
     {
       "kind": "javascript-module",
       "path": "components/animation/animation.component.js",
@@ -793,6 +732,67 @@
         }
       ]
     },
+    {
+      "kind": "javascript-module",
+      "path": "components/appheader/appheader.component.js",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "The `mdc-appheader` component provides a structured and accessible app header layout.\nIt consists of three primary sections: leading, center, and trailing.\n\n- The **leading section** typically holds a **brand logo**, **brand name** or **menu icon**.\n- The **center section** can contain a **search bar**, **icons** or action controls.\n- The **trailing section** generally includes a **profile avatar**, **additional icons** or **action controls**.",
+          "name": "Appheader",
+          "cssParts": [
+            {
+              "description": "The main container for styling the header.",
+              "name": "container"
+            },
+            {
+              "description": "The leading section of the header.",
+              "name": "leading-section"
+            },
+            {
+              "description": "The center section of the header.",
+              "name": "center-section"
+            },
+            {
+              "description": "The trailing section of the header.",
+              "name": "trailing-section"
+            }
+          ],
+          "slots": [
+            {
+              "description": "Slot for the leading section (e.g., brand logo, brand name).",
+              "name": "leading"
+            },
+            {
+              "description": "Slot for the center section (e.g., search bar, icons).",
+              "name": "center"
+            },
+            {
+              "description": "Slot for the trailing section (e.g., profile avatar, icons).",
+              "name": "trailing"
+            }
+          ],
+          "members": [],
+          "superclass": {
+            "name": "Component",
+            "module": "/src/models"
+          },
+          "tagName": "mdc-appheader",
+          "jsDoc": "/**\n * The `mdc-appheader` component provides a structured and accessible app header layout.\n * It consists of three primary sections: leading, center, and trailing.\n *\n * - The **leading section** typically holds a **brand logo**, **brand name** or **menu icon**.\n * - The **center section** can contain a **search bar**, **icons** or action controls.\n * - The **trailing section** generally includes a **profile avatar**, **additional icons** or **action controls**.\n *\n * @tagname mdc-appheader\n *\n * @slot leading - Slot for the leading section (e.g., brand logo, brand name).\n * @slot center - Slot for the center section (e.g., search bar, icons).\n * @slot trailing - Slot for the trailing section (e.g., profile avatar, icons).\n *\n * @csspart container - The main container for styling the header.\n * @csspart leading-section - The leading section of the header.\n * @csspart center-section - The center section of the header.\n * @csspart trailing-section - The trailing section of the header.\n */",
+          "customElement": true
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "default",
+          "declaration": {
+            "name": "Appheader",
+            "module": "components/appheader/appheader.component.js"
+          }
+        }
+      ]
+    },
     {
       "kind": "javascript-module",
       "path": "components/avatar/avatar.component.js",
@@ -18096,9 +18096,14 @@
           "members": [
             {
               "kind": "field",
-              "name": "hidePopover",
-              "privacy": "public",
-              "description": "Hides the popover.",
+              "name": "placement",
+              "type": {
+                "text": "PopoverPlacement"
+              },
+              "description": "The placement of the popover.\n- **top**\n- **top-start**\n- **top-end**\n- **bottom**\n- **bottom-start**\n- **bottom-end**\n- **left**\n- **left-start**\n- **left-end**\n- **right**\n- **right-start**\n- **right-end**",
+              "default": "bottom",
+              "attribute": "placement",
+              "reflects": true,
               "inheritedFrom": {
                 "name": "Popover",
                 "module": "components/popover/popover.component.js"
@@ -18848,21 +18853,6 @@
                 "module": "components/popover/popover.component.js"
               }
             },
-            {
-              "kind": "field",
-              "name": "placement",
-              "type": {
-                "text": "PopoverPlacement"
-              },
-              "description": "The placement of the popover.\n- **top**\n- **top-start**\n- **top-end**\n- **bottom**\n- **bottom-start**\n- **bottom-end**\n- **left**\n- **left-start**\n- **left-end**\n- **right**\n- **right-start**\n- **right-end**",
-              "default": "bottom",
-              "attribute": "placement",
-              "reflects": true,
-              "inheritedFrom": {
-                "name": "Popover",
-                "module": "components/popover/popover.component.js"
-              }
-            },
             {
               "kind": "field",
               "name": "color",
@@ -19342,6 +19332,16 @@
                 "module": "components/popover/popover.component.js"
               }
             },
+            {
+              "kind": "field",
+              "name": "hidePopover",
+              "privacy": "public",
+              "description": "Hides the popover.",
+              "inheritedFrom": {
+                "name": "Popover",
+                "module": "components/popover/popover.component.js"
+              }
+            },
             {
               "kind": "field",
               "name": "togglePopoverVisible",
@@ -19372,14 +19372,20 @@
               }
             }
           ],
-          "superclass": {
-            "name": "Popover",
-            "module": "/src/components/popover/popover.component"
-          },
-          "tagName": "mdc-menupopover",
-          "jsDoc": "/**\n * A popover menu component that displays a list of menu items in a floating container.\n * It's designed to work in conjunction with `mdc-menubar` and `mdc-menuitem` to create\n * accessible, nested menu structures with the following features:\n * - Appears adjacent to the triggering menu item\n * - Supports keyboard navigation (arrow keys, Home, End)\n * - Manages focus trapping when open\n * - Closes on Escape key or outside click\n * - Supports both mouse and keyboard interactions\n * - Automatically handles ARIA attributes for accessibility\n *\n * The component extends `mdc-popover` and adds menu-specific behaviors and styling.\n * When nested within another `mdc-menupopover`, it automatically adjusts its behavior\n * to work as a submenu (right-aligned, shows on hover).\n *\n * The orientation of the menu popover is always set to `vertical`.\n *\n * @tagname mdc-menupopover\n * @slot default - Contains the menu items to be displayed in the popover\n */",
-          "customElement": true,
           "attributes": [
+            {
+              "name": "placement",
+              "type": {
+                "text": "PopoverPlacement"
+              },
+              "description": "The placement of the popover.\n- **top**\n- **top-start**\n- **top-end**\n- **bottom**\n- **bottom-start**\n- **bottom-end**\n- **left**\n- **left-start**\n- **left-end**\n- **right**\n- **right-start**\n- **right-end**",
+              "default": "bottom",
+              "fieldName": "placement",
+              "inheritedFrom": {
+                "name": "Popover",
+                "module": "src/components/popover/popover.component.ts"
+              }
+            },
             {
               "name": "should-focus-trap-wrap",
               "type": {
@@ -19432,19 +19438,6 @@
                 "module": "src/components/popover/popover.component.ts"
               }
             },
-            {
-              "name": "placement",
-              "type": {
-                "text": "PopoverPlacement"
-              },
-              "description": "The placement of the popover.\n- **top**\n- **top-start**\n- **top-end**\n- **bottom**\n- **bottom-start**\n- **bottom-end**\n- **left**\n- **left-start**\n- **left-end**\n- **right**\n- **right-start**\n- **right-end**",
-              "default": "bottom",
-              "fieldName": "placement",
-              "inheritedFrom": {
-                "name": "Popover",
-                "module": "src/components/popover/popover.component.ts"
-              }
-            },
             {
               "name": "color",
               "type": {
@@ -19771,6 +19764,13 @@
               }
             }
           ],
+          "superclass": {
+            "name": "Popover",
+            "module": "/src/components/popover/popover.component"
+          },
+          "tagName": "mdc-menupopover",
+          "jsDoc": "/**\n * A popover menu component that displays a list of menu items in a floating container.\n * It's designed to work in conjunction with `mdc-menubar` and `mdc-menuitem` to create\n * accessible, nested menu structures with the following features:\n * - Appears adjacent to the triggering menu item\n * - Supports keyboard navigation (arrow keys, Home, End)\n * - Manages focus trapping when open\n * - Closes on Escape key or outside click\n * - Supports both mouse and keyboard interactions\n * - Automatically handles ARIA attributes for accessibility\n *\n * The component extends `mdc-popover` and adds menu-specific behaviors and styling.\n * When nested within another `mdc-menupopover`, it automatically adjusts its behavior\n * to work as a submenu (right-aligned, shows on hover).\n *\n * The orientation of the menu popover is always set to `vertical`.\n *\n * @tagname mdc-menupopover\n * @slot default - Contains the menu items to be displayed in the popover\n */",
+          "customElement": true,
           "cssProperties": [
             {
               "description": "radius of the arrow border",
@@ -32556,6 +32556,21 @@
               "attribute": "screenreader-announcer-identity",
               "reflects": true
             },
+            {
+              "kind": "field",
+              "name": "placement",
+              "type": {
+                "text": "PopoverPlacement"
+              },
+              "description": "The placement of the popover.\n- **top**\n- **top-start**\n- **top-end**\n- **bottom**\n- **bottom-start**\n- **bottom-end**\n- **left**\n- **left-start**\n- **left-end**\n- **right**\n- **right-start**\n- **right-end**",
+              "default": "bottom",
+              "attribute": "placement",
+              "reflects": true,
+              "inheritedFrom": {
+                "name": "Popover",
+                "module": "components/popover/popover.component.js"
+              }
+            },
             {
               "kind": "method",
               "name": "getToggleTipText",
@@ -33165,21 +33180,6 @@
                 "module": "components/popover/popover.component.js"
               }
             },
-            {
-              "kind": "field",
-              "name": "placement",
-              "type": {
-                "text": "PopoverPlacement"
-              },
-              "description": "The placement of the popover.\n- **top**\n- **top-start**\n- **top-end**\n- **bottom**\n- **bottom-start**\n- **bottom-end**\n- **left**\n- **left-start**\n- **left-end**\n- **right**\n- **right-start**\n- **right-end**",
-              "default": "bottom",
-              "attribute": "placement",
-              "reflects": true,
-              "inheritedFrom": {
-                "name": "Popover",
-                "module": "components/popover/popover.component.js"
-              }
-            },
             {
               "kind": "field",
               "name": "color",
@@ -33762,6 +33762,19 @@
               "description": "Set this attribute with the id of the element in the DOM, to which announcement\nelements will be appended.\nIf an id is provided, the announcement elements will be appended to this element.\nIf id is not provided, a visually hidden div element will be created in the DOM.\n\nPlease refer to the `mdc-screenreaderannouncer` component for more details.",
               "fieldName": "screenreaderAnnouncerIdentity"
             },
+            {
+              "name": "placement",
+              "type": {
+                "text": "PopoverPlacement"
+              },
+              "description": "The placement of the popover.\n- **top**\n- **top-start**\n- **top-end**\n- **bottom**\n- **bottom-start**\n- **bottom-end**\n- **left**\n- **left-start**\n- **left-end**\n- **right**\n- **right-start**\n- **right-end**",
+              "default": "bottom",
+              "fieldName": "placement",
+              "inheritedFrom": {
+                "name": "Popover",
+                "module": "src/components/popover/popover.component.ts"
+              }
+            },
             {
               "name": "should-focus-trap-wrap",
               "type": {
@@ -33814,19 +33827,6 @@
                 "module": "src/components/popover/popover.component.ts"
               }
             },
-            {
-              "name": "placement",
-              "type": {
-                "text": "PopoverPlacement"
-              },
-              "description": "The placement of the popover.\n- **top**\n- **top-start**\n- **top-end**\n- **bottom**\n- **bottom-start**\n- **bottom-end**\n- **left**\n- **left-start**\n- **left-end**\n- **right**\n- **right-start**\n- **right-end**",
-              "default": "bottom",
-              "fieldName": "placement",
-              "inheritedFrom": {
-                "name": "Popover",
-                "module": "src/components/popover/popover.component.ts"
-              }
-            },
             {
               "name": "color",
               "type": {

package/dist/react/index.d.ts

@@ -1,6 +1,6 @@
 export { default as AlertChip } from './alertchip';
-export { default as Appheader } from './appheader';
 export { default as Animation } from './animation';
+export { default as Appheader } from './appheader';
 export { default as Avatar } from './avatar';
 export { default as AvatarButton } from './avatarbutton';
 export { default as Badge } from './badge';

package/dist/react/index.js

@@ -1,6 +1,6 @@
 export { default as AlertChip } from './alertchip';
-export { default as Appheader } from './appheader';
 export { default as Animation } from './animation';
+export { default as Appheader } from './appheader';
 export { default as Avatar } from './avatar';
 export { default as AvatarButton } from './avatarbutton';
 export { default as Badge } from './badge';

package/package.json

@@ -41,5 +41,5 @@
     "lottie-web": "^5.12.2",
     "uuid": "^11.0.5"
   },
-  "version": "0.83.7"
+  "version": "0.84.1"
 }