@momentum-design/components 0.74.2 → 0.74.3

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

@@ -24,6 +24,7 @@ declare const ListItem_base: import("../../utils/mixins/index.types").Constructo
  * @tagname mdc-listitem
  *
  * @dependency mdc-text
+ * @dependency mdc-tooltip
  *
  * @slot leading-controls - slot for list item controls to appear of leading end.
  * @slot leading-text-primary-label - slot for list item primary label.
@@ -96,6 +97,8 @@ declare class ListItem extends ListItem_base {
     tooltipPlacement: PopoverPlacement;
     constructor();
     connectedCallback(): void;
+    private handleKeyDown;
+    private triggerClickEvent;
     private handleClick;
     /**
      * Display a tooltip for the listitem.
@@ -123,6 +126,8 @@ declare class ListItem extends ListItem_base {
      */
     private disableSlottedChildren;
     update(changedProperties: PropertyValues): void;
+    protected renderTrailingControls(): TemplateResult<1>;
+    protected renderLeadingControls(): TemplateResult<1>;
     render(): TemplateResult<1>;
     static styles: Array<CSSResult>;
 }

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

@@ -10,6 +10,7 @@ var __metadata = (this && this.__metadata) || function (k, v) {
 import { html, nothing } from 'lit';
 import { property, queryAssignedElements } from 'lit/decorators.js';
 import { Component } from '../../models';
+import { KEYS } from '../../utils/keys';
 import { DisabledMixin } from '../../utils/mixins/DisabledMixin';
 import { TabIndexMixin } from '../../utils/mixins/TabIndexMixin';
 import { ROLE } from '../../utils/roles';
@@ -36,6 +37,7 @@ import styles from './listitem.styles';
  * @tagname mdc-listitem
  *
  * @dependency mdc-text
+ * @dependency mdc-tooltip
  *
  * @slot leading-controls - slot for list item controls to appear of leading end.
  * @slot leading-text-primary-label - slot for list item primary label.
@@ -75,6 +77,7 @@ class ListItem extends DisabledMixin(TabIndexMixin(Component)) {
          * @default 'top'
          */
         this.tooltipPlacement = DEFAULTS.TOOLTIP_PLACEMENT;
+        this.addEventListener('keydown', this.handleKeyDown);
         this.addEventListener('focusin', this.displayTooltipForLongText);
         this.addEventListener('mouseover', this.displayTooltipForLongText);
         this.addEventListener('focusout', this.hideTooltipOnLeave);
@@ -85,6 +88,20 @@ class ListItem extends DisabledMixin(TabIndexMixin(Component)) {
         super.connectedCallback();
         this.role = this.role || ROLE.LISTITEM;
     }
+    handleKeyDown(event) {
+        if (event.key === KEYS.ENTER || event.key === KEYS.SPACE) {
+            this.triggerClickEvent();
+            event.preventDefault();
+        }
+    }
+    triggerClickEvent() {
+        const clickEvent = new MouseEvent('click', {
+            bubbles: true,
+            cancelable: true,
+            view: window,
+        });
+        this.dispatchEvent(clickEvent);
+    }
     handleClick() {
         // If the tooltip is open, it has to be closed first.
         this.hideTooltipOnLeave();
@@ -161,10 +178,16 @@ class ListItem extends DisabledMixin(TabIndexMixin(Component)) {
             this.setAttribute('aria-disabled', `${this.disabled}`);
         }
     }
+    renderTrailingControls() {
+        return html `<slot name="trailing-controls"></slot>`;
+    }
+    renderLeadingControls() {
+        return html `<slot name="leading-controls"></slot>`;
+    }
     render() {
         return html `
       <div part="leading">
-        <slot name="leading-controls"></slot>
+        ${this.renderLeadingControls()}
         <div part="leading-text">
           ${this.getText('leading-text-primary-label', TYPE.BODY_MIDSIZE_REGULAR, this.label)}
           ${this.getText('leading-text-secondary-label', TYPE.BODY_SMALL_REGULAR, this.secondaryLabel)}
@@ -176,7 +199,7 @@ class ListItem extends DisabledMixin(TabIndexMixin(Component)) {
           ${this.getText('trailing-text-side-header', TYPE.BODY_MIDSIZE_REGULAR, this.sideHeaderText)}
           ${this.getText('trailing-text-subline', TYPE.BODY_SMALL_REGULAR, this.sublineText)}
         </div>
-        <slot name="trailing-controls"></slot>
+        ${this.renderTrailingControls()}
       </div>
     `;
     }

package/dist/components/menu/index.d.ts

@@ -0,0 +1,8 @@
+import '../text';
+import Menu from './menu.component';
+declare global {
+    interface HTMLElementTagNameMap {
+        ['mdc-menu']: Menu;
+    }
+}
+export default Menu;

package/dist/components/menu/index.js

@@ -0,0 +1,5 @@
+import '../text';
+import Menu from './menu.component';
+import { TAG_NAME } from './menu.constants';
+Menu.register(TAG_NAME);
+export default Menu;

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

@@ -0,0 +1,19 @@
+import { CSSResult } from 'lit';
+import List from '../list/list.component';
+/**
+ * mdc-menu component is used to display a group of menu items. It is used as a container to wrap menu items.
+ * It contains the menu header component.
+ *
+ * @dependency mdc-text
+ *
+ * @tagname mdc-menu
+ *
+ * @slot default - This is a default/unnamed slot
+ */
+declare class Menu extends List {
+    /** @internal */
+    listItems: Array<HTMLElement>;
+    connectedCallback(): void;
+    static styles: Array<CSSResult>;
+}
+export default Menu;

package/dist/components/menu/menu.component.js

@@ -0,0 +1,35 @@
+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 { queryAssignedElements } from 'lit/decorators.js';
+import { ROLE } from '../../utils/roles';
+import List from '../list/list.component';
+import { TAG_NAME as MENUITEM_TAGNAME } from '../menuitem/menuitem.constants';
+/**
+ * mdc-menu component is used to display a group of menu items. It is used as a container to wrap menu items.
+ * It contains the menu header component.
+ *
+ * @dependency mdc-text
+ *
+ * @tagname mdc-menu
+ *
+ * @slot default - This is a default/unnamed slot
+ */
+class Menu extends List {
+    connectedCallback() {
+        super.connectedCallback();
+        this.dataRole = ROLE.MENU;
+    }
+}
+Menu.styles = [...List.styles];
+__decorate([
+    queryAssignedElements({ selector: `${MENUITEM_TAGNAME}:not([disabled])` }),
+    __metadata("design:type", Array)
+], Menu.prototype, "listItems", void 0);
+export default Menu;

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

@@ -0,0 +1,2 @@
+declare const TAG_NAME: "mdc-menu";
+export { TAG_NAME };

package/dist/components/menu/menu.constants.js

@@ -0,0 +1,3 @@
+import utils from '../../utils/tag-name';
+const TAG_NAME = utils.constructTagName('menu');
+export { TAG_NAME };

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

@@ -0,0 +1,7 @@
+import MenuBar from './menubar.component';
+declare global {
+    interface HTMLElementTagNameMap {
+        ['mdc-menubar']: MenuBar;
+    }
+}
+export default MenuBar;

package/dist/components/menubar/index.js

@@ -0,0 +1,4 @@
+import MenuBar from './menubar.component';
+import { TAG_NAME } from './menubar.constants';
+MenuBar.register(TAG_NAME);
+export default MenuBar;

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

@@ -0,0 +1,32 @@
+import type { CSSResult, PropertyValues } from 'lit';
+import { Component } from '../../models';
+declare const MenuBar_base: import("../../utils/mixins/index.types").Constructor<import("../../utils/mixins/MenuMixin").MenuMixinInterface> & typeof Component;
+/**
+  * Menubar is a navigational menu component that provides a horizontal (default) or vertical fixed list of menu items,
+  * with support for nested submenus and keyboard navigation. It serves as a container
+  * for menu items and manages their interaction patterns, including:
+  * - Keyboard navigation (arrow keys, Home, End)
+  * - Menu item activation (Enter/Space)
+  * - Submenu toggling (Right/Left arrow keys)
+  * - Focus management
+  * - Support for both horizontal and vertical orientations
+  * - Integration with MenuPopover for nested menus
+  *
+  * A menubar will contain a set of menu items and their associated popovers.
+  * Each menu item can have a popover for nested menus.
+  *
+  * The component automatically handles ARIA attributes and follows WAI-ARIA menu design patterns.
+  * It works in conjunction with `mdc-menuitem` and `mdc-menupopover` to create accessible menu structures.
+  *
+  * @tagname mdc-menubar
+  * @slot default - Contains the menu items and their associated popovers
+  */
+declare class MenuBar extends MenuBar_base {
+    constructor();
+    connectedCallback(): void;
+    firstUpdated(): void;
+    update(changedProperties: PropertyValues): void;
+    render(): import("lit-html").TemplateResult<1>;
+    static styles: Array<CSSResult>;
+}
+export default MenuBar;

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

@@ -0,0 +1,51 @@
+import { html } from 'lit';
+import { Component } from '../../models';
+import { MenuMixin } from '../../utils/mixins/MenuMixin';
+import { ROLE } from '../../utils/roles';
+import styles from './menubar.styles';
+/**
+  * Menubar is a navigational menu component that provides a horizontal (default) or vertical fixed list of menu items,
+  * with support for nested submenus and keyboard navigation. It serves as a container
+  * for menu items and manages their interaction patterns, including:
+  * - Keyboard navigation (arrow keys, Home, End)
+  * - Menu item activation (Enter/Space)
+  * - Submenu toggling (Right/Left arrow keys)
+  * - Focus management
+  * - Support for both horizontal and vertical orientations
+  * - Integration with MenuPopover for nested menus
+  *
+  * A menubar will contain a set of menu items and their associated popovers.
+  * Each menu item can have a popover for nested menus.
+  *
+  * The component automatically handles ARIA attributes and follows WAI-ARIA menu design patterns.
+  * It works in conjunction with `mdc-menuitem` and `mdc-menupopover` to create accessible menu structures.
+  *
+  * @tagname mdc-menubar
+  * @slot default - Contains the menu items and their associated popovers
+  */
+class MenuBar extends MenuMixin(Component) {
+    constructor() {
+        super();
+        this.addEventListener('keydown', this.handleKeyDown);
+        this.addEventListener('click', this.handleMouseClick);
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this.role = ROLE.MENUBAR;
+    }
+    firstUpdated() {
+        // For the first, we set the first element only as active.
+        this.resetTabIndexAndSetActiveTabIndex(0);
+    }
+    update(changedProperties) {
+        super.update(changedProperties);
+        if (changedProperties.has('ariaOrientation')) {
+            this.updatePopoverPlacementBasedOnOrientation();
+        }
+    }
+    render() {
+        return html `<slot></slot>`;
+    }
+}
+MenuBar.styles = [...Component.styles, ...styles];
+export default MenuBar;

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

@@ -0,0 +1,6 @@
+declare const TAG_NAME: "mdc-menubar";
+declare const ORIENTATION: {
+    readonly HORIZONTAL: "horizontal";
+    readonly VERTICAL: "vertical";
+};
+export { TAG_NAME, ORIENTATION };

package/dist/components/menubar/menubar.constants.js

@@ -0,0 +1,7 @@
+import utils from '../../utils/tag-name';
+const TAG_NAME = utils.constructTagName('menubar');
+const ORIENTATION = {
+    HORIZONTAL: 'horizontal',
+    VERTICAL: 'vertical',
+};
+export { TAG_NAME, ORIENTATION };

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

@@ -0,0 +1,2 @@
+declare const _default: import("lit").CSSResult[];
+export default _default;

package/dist/components/menubar/menubar.styles.js

@@ -0,0 +1,15 @@
+import { css } from 'lit';
+const styles = css `
+  :host {
+    display: flex;
+  }
+
+  :host([aria-orientation='horizontal']) {
+    flex-direction: row;
+  }
+
+  :host([aria-orientation='vertical']) {
+    flex-direction: column;
+  }
+`;
+export default [styles];

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

@@ -0,0 +1,4 @@
+import type { ValueOf } from '../../utils/types';
+import { ORIENTATION } from './menubar.constants';
+type Orientation = ValueOf<typeof ORIENTATION>;
+export type { Orientation };

package/dist/components/menubar/menubar.types.js

@@ -0,0 +1 @@
+export {};

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

@@ -1,3 +1,4 @@
+import '../icon';
 import '../text';
 import '../tooltip';
 import MenuItem from './menuitem.component';

package/dist/components/menuitem/index.js

@@ -1,3 +1,4 @@
+import '../icon';
 import '../text';
 import '../tooltip';
 import MenuItem from './menuitem.component';

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

@@ -1,5 +1,6 @@
 import type { CSSResult } from 'lit';
 import ListItem from '../listitem/listitem.component';
+import type { ArrowPositions, ArrowDirections } from './menuitem.types';
 /**
  * menuitem component is inherited by listitem component with the role set `menuitem`.<br/>
  * A menu item can contain an icon on the leading or trailing side.
@@ -10,6 +11,8 @@ import ListItem from '../listitem/listitem.component';
  * Please use mdc-menu as a parent element even when there is only menuitem for a11y purpose.
  *
  * @dependency mdc-text
+ * @dependency mdc-icon
+ * @dependency mdc-tooltip
  *
  * @tagname mdc-menuitem
  *
@@ -19,7 +22,31 @@ import ListItem from '../listitem/listitem.component';
  * @event focus - (React: onFocus) This event is dispatched when the menuitem receives focus.
  */
 declare class MenuItem extends ListItem {
+    /**
+     * Defines where the arrow icon will appear.
+     * - `'leading'`: Icon appears on the leading edge (start).
+     * - `'trailing'`: Icon appears on the trailing edge (end).
+     *
+     * If not set, no arrow is displayed.
+     */
+    arrowPosition?: ArrowPositions;
+    /**
+     * Defines the direction the arrow icon points.
+     * - `'positive'`: Arrow points toward the trailing side.
+     * - `'negative'`: Arrow points toward the leading side.
+     */
+    arrowDirection?: ArrowDirections;
     connectedCallback(): void;
+    /**
+     * Renders the trailing controls slot and optionally the trailing arrow icon,
+     * based on `arrowPosition` and `arrowDirection`.
+     */
+    protected renderTrailingControls(): import("lit-html").TemplateResult<1>;
+    /**
+     * Renders the leading controls slot and optionally the leading arrow icon,
+     * based on `arrowPosition` and `arrowDirection`.
+     */
+    protected renderLeadingControls(): import("lit-html").TemplateResult<1>;
     static styles: Array<CSSResult>;
 }
 export default MenuItem;

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

@@ -1,6 +1,19 @@
+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 { html, nothing } from 'lit';
+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 { ARROW_ICONS, ARROW_DIRECTIONS, ARROW_POSITIONS } from './menuitem.constants';
+import styles from './menuitem.styles';
 /**
  * menuitem component is inherited by listitem component with the role set `menuitem`.<br/>
  * A menu item can contain an icon on the leading or trailing side.
@@ -11,6 +24,8 @@ import { LISTITEM_VARIANTS } from '../listitem/listitem.constants';
  * Please use mdc-menu as a parent element even when there is only menuitem for a11y purpose.
  *
  * @dependency mdc-text
+ * @dependency mdc-icon
+ * @dependency mdc-tooltip
  *
  * @tagname mdc-menuitem
  *
@@ -25,6 +40,44 @@ class MenuItem extends ListItem {
         this.role = ROLE.MENUITEM;
         this.variant = LISTITEM_VARIANTS.INSET_RECTANGLE;
     }
+    /**
+     * Renders the trailing controls slot and optionally the trailing arrow icon,
+     * based on `arrowPosition` and `arrowDirection`.
+     */
+    renderTrailingControls() {
+        const arrowIcon = this.arrowDirection === ARROW_DIRECTIONS.NEGATIVE
+            ? ARROW_ICONS.LEFT
+            : ARROW_ICONS.RIGHT;
+        return html `
+      <slot name="trailing-controls"></slot>
+      ${this.arrowPosition === ARROW_POSITIONS.TRAILING
+            ? html `<mdc-icon name="${arrowIcon}" length-unit="rem" part="trailing-arrow"></mdc-icon>`
+            : nothing}
+    `;
+    }
+    /**
+     * Renders the leading controls slot and optionally the leading arrow icon,
+     * based on `arrowPosition` and `arrowDirection`.
+     */
+    renderLeadingControls() {
+        const arrowIcon = this.arrowDirection === ARROW_DIRECTIONS.POSITIVE
+            ? ARROW_ICONS.RIGHT
+            : ARROW_ICONS.LEFT;
+        return html `
+      <slot name="leading-controls"></slot>
+      ${this.arrowPosition === ARROW_POSITIONS.LEADING
+            ? html `<mdc-icon name="${arrowIcon}" length-unit="rem" part="leading-arrow"></mdc-icon>`
+            : nothing}
+    `;
+    }
 }
-MenuItem.styles = [...ListItem.styles];
+MenuItem.styles = [...ListItem.styles, ...styles];
+__decorate([
+    property({ type: String, reflect: true, attribute: 'arrow-position' }),
+    __metadata("design:type", String)
+], MenuItem.prototype, "arrowPosition", void 0);
+__decorate([
+    property({ type: String, reflect: true, attribute: 'arrow-direction' }),
+    __metadata("design:type", String)
+], MenuItem.prototype, "arrowDirection", void 0);
 export default MenuItem;

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

@@ -1,2 +1,14 @@
 declare const TAG_NAME: "mdc-menuitem";
-export { TAG_NAME };
+declare const ARROW_ICONS: {
+    readonly LEFT: "arrow-left-bold";
+    readonly RIGHT: "arrow-right-bold";
+};
+declare const ARROW_DIRECTIONS: {
+    readonly POSITIVE: "positive";
+    readonly NEGATIVE: "negative";
+};
+declare const ARROW_POSITIONS: {
+    readonly LEADING: "leading";
+    readonly TRAILING: "trailing";
+};
+export { TAG_NAME, ARROW_ICONS, ARROW_DIRECTIONS, ARROW_POSITIONS };

package/dist/components/menuitem/menuitem.constants.js

@@ -1,3 +1,15 @@
 import utils from '../../utils/tag-name';
 const TAG_NAME = utils.constructTagName('menuitem');
-export { TAG_NAME };
+const ARROW_ICONS = {
+    LEFT: 'arrow-left-bold',
+    RIGHT: 'arrow-right-bold',
+};
+const ARROW_DIRECTIONS = {
+    POSITIVE: 'positive',
+    NEGATIVE: 'negative',
+};
+const ARROW_POSITIONS = {
+    LEADING: 'leading',
+    TRAILING: 'trailing',
+};
+export { TAG_NAME, ARROW_ICONS, ARROW_DIRECTIONS, ARROW_POSITIONS };

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

@@ -0,0 +1,2 @@
+declare const _default: import("lit").CSSResult[];
+export default _default;

package/dist/components/menuitem/menuitem.styles.js

@@ -0,0 +1,11 @@
+import { css } from 'lit';
+const styles = css `
+  :host(:dir(rtl))::part(trailing-arrow),
+  :host(:dir(rtl))::part(leading-arrow) {
+      transform: rotate(180deg);
+  }
+  :host::part(trailing-arrow), :host::part(leading-arrow) {
+    --mdc-icon-size: 1.25rem;
+  }
+`;
+export default [styles];

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

@@ -1,6 +1,10 @@
+import type { ValueOf } from '../../utils/types';
+import { ARROW_POSITIONS, ARROW_DIRECTIONS } from './menuitem.constants';
 interface Events {
     onChangeEvent: Event;
     onClickEvent: MouseEvent;
     onFocusEvent: FocusEvent;
 }
-export type { Events };
+type ArrowPositions = ValueOf<typeof ARROW_POSITIONS>;
+type ArrowDirections = ValueOf<typeof ARROW_DIRECTIONS>;
+export type { Events, ArrowPositions, ArrowDirections };

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

@@ -0,0 +1,7 @@
+import MenuPopover from './menupopover.component';
+declare global {
+    interface HTMLElementTagNameMap {
+        ['mdc-menupopover']: MenuPopover;
+    }
+}
+export default MenuPopover;

package/dist/components/menupopover/index.js

@@ -0,0 +1,4 @@
+import MenuPopover from './menupopover.component';
+import { TAG_NAME } from './menupopover.constants';
+MenuPopover.register(TAG_NAME);
+export default MenuPopover;

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

@@ -0,0 +1,30 @@
+import { CSSResult, PropertyValues } from 'lit';
+import Popover from '../popover/popover.component';
+declare const MenuPopover_base: import("../../utils/mixins/index.types").Constructor<import("../../utils/mixins/MenuMixin").MenuMixinInterface> & typeof Popover;
+/**
+ * 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
+ * accessible, nested menu structures with the following features:
+ * - Appears adjacent to the triggering menu item
+ * - Supports keyboard navigation (arrow keys, Home, End)
+ * - Manages focus trapping when open
+ * - Closes on Escape key or outside click
+ * - Supports both mouse and keyboard interactions
+ * - Automatically handles ARIA attributes for accessibility
+ *
+ * The component extends `mdc-popover` and adds menu-specific behaviors and styling.
+ * When nested within another `mdc-menupopover`, it automatically adjusts its behavior
+ * to work as a submenu (right-aligned, shows on hover).
+ *
+ * The orientation of the menu popover is always set to `vertical`.
+ *
+ * @tagname mdc-menupopover
+ * @slot default - Contains the menu items to be displayed in the popover
+ */
+declare class MenuPopover extends MenuPopover_base {
+    constructor();
+    connectedCallback(): void;
+    firstUpdated(changedProperties: PropertyValues): Promise<void>;
+    static styles: Array<CSSResult>;
+}
+export default MenuPopover;

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

@@ -0,0 +1,56 @@
+import { MenuMixin } from '../../utils/mixins/MenuMixin';
+import { ROLE } from '../../utils/roles';
+import { ORIENTATION } from '../menubar/menubar.constants';
+import Popover from '../popover/popover.component';
+import { POPOVER_PLACEMENT, TRIGGER } from '../popover/popover.constants';
+import { TAG_NAME as MENU_POPOVER } from './menupopover.constants';
+import styles from './menupopover.styles';
+/**
+ * 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
+ * accessible, nested menu structures with the following features:
+ * - Appears adjacent to the triggering menu item
+ * - Supports keyboard navigation (arrow keys, Home, End)
+ * - Manages focus trapping when open
+ * - Closes on Escape key or outside click
+ * - Supports both mouse and keyboard interactions
+ * - Automatically handles ARIA attributes for accessibility
+ *
+ * The component extends `mdc-popover` and adds menu-specific behaviors and styling.
+ * When nested within another `mdc-menupopover`, it automatically adjusts its behavior
+ * to work as a submenu (right-aligned, shows on hover).
+ *
+ * The orientation of the menu popover is always set to `vertical`.
+ *
+ * @tagname mdc-menupopover
+ * @slot default - Contains the menu items to be displayed in the popover
+ */
+class MenuPopover extends MenuMixin(Popover) {
+    constructor() {
+        super();
+        this.addEventListener('keydown', this.handleKeyDown);
+        this.addEventListener('click', this.handleMouseClick);
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this.role = ROLE.MENU;
+        this.focusTrap = true;
+        this.hideOnEscape = true;
+        this.hideOnOutsideClick = true;
+        this.placement = POPOVER_PLACEMENT.BOTTOM_START;
+        this.showArrow = false;
+        this.interactive = true;
+        this.ariaOrientation = ORIENTATION.VERTICAL;
+    }
+    async firstUpdated(changedProperties) {
+        var _a, _b;
+        await super.firstUpdated(changedProperties);
+        if (((_b = (_a = this.parentElement) === null || _a === void 0 ? void 0 : _a.tagName) === null || _b === void 0 ? void 0 : _b.toLowerCase()) === MENU_POPOVER) {
+            this.interactive = true;
+            this.placement = POPOVER_PLACEMENT.RIGHT_START;
+            this.trigger = TRIGGER.MOUSEENTER;
+        }
+    }
+}
+MenuPopover.styles = [...Popover.styles, ...styles];
+export default MenuPopover;

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

@@ -0,0 +1,2 @@
+declare const TAG_NAME: "mdc-menupopover";
+export { TAG_NAME };

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

@@ -0,0 +1,3 @@
+import utils from '../../utils/tag-name';
+const TAG_NAME = utils.constructTagName('menupopover');
+export { TAG_NAME };

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

@@ -0,0 +1,2 @@
+declare const _default: import("lit").CSSResult[];
+export default _default;

package/dist/components/menupopover/menupopover.styles.js

@@ -0,0 +1,7 @@
+import { css } from 'lit';
+const styles = css `
+  :host::part(popover-content) {
+    padding: 0.75rem 0.5rem;
+  }
+`;
+export default [styles];