@momentum-design/components 0.80.3 → 0.80.5

package/dist/index.d.ts

@@ -35,6 +35,8 @@ import MenuItem from './components/menuitem';
 import MenuItemCheckbox from './components/menuitemcheckbox';
 import MenuItemRadio from './components/menuitemradio';
 import MenuPopover from './components/menupopover';
+import NavItem from './components/navitem';
+import NavItemList from './components/navitemlist';
 import MenuSection from './components/menusection';
 import OptGroup from './components/optgroup';
 import Option from './components/option';
@@ -47,6 +49,7 @@ import RadioGroup from './components/radiogroup';
 import ScreenreaderAnnouncer from './components/screenreaderannouncer';
 import Searchfield from './components/searchfield';
 import Select from './components/select';
+import SideNavigation from './components/sidenavigation';
 import Spinner from './components/spinner';
 import StaticCheckbox from './components/staticcheckbox';
 import StaticRadio from './components/staticradio';
@@ -67,6 +70,6 @@ import type { SpinnerSize, SpinnerVariant } from './components/spinner/spinner.t
 import type { TextType } from './components/text/text.types';
 import { inMemoryCache, webAPIIconsCache } from './utils/icon-cache';
 import { BUTTON_COLORS, BUTTON_VARIANTS, ICON_BUTTON_SIZES, PILL_BUTTON_SIZES } from './components/button/button.constants';
-export { AlertChip, Animation, Appheader, Avatar, AvatarButton, Badge, Brandvisual, Bullet, Button, ButtonLink, ButtonGroup, Card, CardButton, CardCheckbox, CardRadio, Checkbox, Chip, Coachmark, Dialog, Divider, FilterChip, FormfieldGroup, Icon, IconProvider, Input, InputChip, Link, Linksimple, List, ListItem, Marker, Menu, MenuBar, MenuItem, MenuItemCheckbox, MenuItemRadio, MenuPopover, OptGroup, Option, Popover, Presence, Progressbar, Progressspinner, Radio, RadioGroup, ScreenreaderAnnouncer, Searchfield, Select, Spinner, StaticCheckbox, StaticRadio, StaticToggle, Tab, TabList, Text, Textarea, ThemeProvider, Toggle, ToggleTip, Tooltip, MenuSection, VirtualizedList, };
+export { AlertChip, Animation, Appheader, Avatar, AvatarButton, Badge, Brandvisual, Bullet, Button, ButtonLink, ButtonGroup, Card, CardButton, CardCheckbox, CardRadio, Checkbox, Chip, Coachmark, Dialog, Divider, FilterChip, FormfieldGroup, Icon, IconProvider, Input, InputChip, Link, Linksimple, List, ListItem, Marker, Menu, MenuBar, MenuItem, MenuItemCheckbox, MenuItemRadio, MenuPopover, NavItem, NavItemList, OptGroup, Option, Popover, Presence, Progressbar, Progressspinner, Radio, RadioGroup, ScreenreaderAnnouncer, Searchfield, Select, SideNavigation, Spinner, StaticCheckbox, StaticRadio, StaticToggle, Tab, TabList, Text, Textarea, ThemeProvider, Toggle, ToggleTip, Tooltip, MenuSection, VirtualizedList, };
 export type { TextType, SpinnerSize, SpinnerVariant, PopoverPlacement, BadgeType, IconButtonSize, PillButtonSize, ButtonVariant, ButtonColor, };
 export { inMemoryCache, webAPIIconsCache, BUTTON_COLORS, BUTTON_VARIANTS, ICON_BUTTON_SIZES, PILL_BUTTON_SIZES };

package/dist/index.js

@@ -36,6 +36,8 @@ import MenuItem from './components/menuitem';
 import MenuItemCheckbox from './components/menuitemcheckbox';
 import MenuItemRadio from './components/menuitemradio';
 import MenuPopover from './components/menupopover';
+import NavItem from './components/navitem';
+import NavItemList from './components/navitemlist';
 import MenuSection from './components/menusection';
 import OptGroup from './components/optgroup';
 import Option from './components/option';
@@ -48,6 +50,7 @@ import RadioGroup from './components/radiogroup';
 import ScreenreaderAnnouncer from './components/screenreaderannouncer';
 import Searchfield from './components/searchfield';
 import Select from './components/select';
+import SideNavigation from './components/sidenavigation';
 import Spinner from './components/spinner';
 import StaticCheckbox from './components/staticcheckbox';
 import StaticRadio from './components/staticradio';
@@ -65,6 +68,6 @@ import { inMemoryCache, webAPIIconsCache } from './utils/icon-cache';
 // Constants / Utils Imports
 import { BUTTON_COLORS, BUTTON_VARIANTS, ICON_BUTTON_SIZES, PILL_BUTTON_SIZES, } from './components/button/button.constants';
 // Components Exports
-export { AlertChip, Animation, Appheader, Avatar, AvatarButton, Badge, Brandvisual, Bullet, Button, ButtonLink, ButtonGroup, Card, CardButton, CardCheckbox, CardRadio, Checkbox, Chip, Coachmark, Dialog, Divider, FilterChip, FormfieldGroup, Icon, IconProvider, Input, InputChip, Link, Linksimple, List, ListItem, Marker, Menu, MenuBar, MenuItem, MenuItemCheckbox, MenuItemRadio, MenuPopover, OptGroup, Option, Popover, Presence, Progressbar, Progressspinner, Radio, RadioGroup, ScreenreaderAnnouncer, Searchfield, Select, Spinner, StaticCheckbox, StaticRadio, StaticToggle, Tab, TabList, Text, Textarea, ThemeProvider, Toggle, ToggleTip, Tooltip, MenuSection, VirtualizedList, };
+export { AlertChip, Animation, Appheader, Avatar, AvatarButton, Badge, Brandvisual, Bullet, Button, ButtonLink, ButtonGroup, Card, CardButton, CardCheckbox, CardRadio, Checkbox, Chip, Coachmark, Dialog, Divider, FilterChip, FormfieldGroup, Icon, IconProvider, Input, InputChip, Link, Linksimple, List, ListItem, Marker, Menu, MenuBar, MenuItem, MenuItemCheckbox, MenuItemRadio, MenuPopover, NavItem, NavItemList, OptGroup, Option, Popover, Presence, Progressbar, Progressspinner, Radio, RadioGroup, ScreenreaderAnnouncer, Searchfield, Select, SideNavigation, Spinner, StaticCheckbox, StaticRadio, StaticToggle, Tab, TabList, Text, Textarea, ThemeProvider, Toggle, ToggleTip, Tooltip, MenuSection, VirtualizedList, };
 // Constants / Utils Exports
 export { inMemoryCache, webAPIIconsCache, BUTTON_COLORS, BUTTON_VARIANTS, ICON_BUTTON_SIZES, PILL_BUTTON_SIZES };

package/dist/react/index.d.ts

@@ -6,23 +6,23 @@ export { default as AvatarButton } from './avatarbutton';
 export { default as Badge } from './badge';
 export { default as Brandvisual } from './brandvisual';
 export { default as Bullet } from './bullet';
-export { default as ButtonGroup } from './buttongroup';
 export { default as Button } from './button';
+export { default as ButtonGroup } from './buttongroup';
 export { default as ButtonLink } from './buttonlink';
 export { default as Buttonsimple } from './buttonsimple';
+export { default as Card } from './card';
 export { default as CardButton } from './cardbutton';
 export { default as CardCheckbox } from './cardcheckbox';
 export { default as CardRadio } from './cardradio';
-export { default as Card } from './card';
 export { default as Checkbox } from './checkbox';
 export { default as Chip } from './chip';
 export { default as Coachmark } from './coachmark';
+export { default as Dialog } from './dialog';
 export { default as Divider } from './divider';
 export { default as FilterChip } from './filterchip';
 export { default as FormfieldGroup } from './formfieldgroup';
-export { default as Dialog } from './dialog';
-export { default as FormfieldWrapper } from './formfieldwrapper';
 export { default as Icon } from './icon';
+export { default as FormfieldWrapper } from './formfieldwrapper';
 export { default as IconProvider } from './iconprovider';
 export { default as Input } from './input';
 export { default as InputChip } from './inputchip';
@@ -31,13 +31,15 @@ export { default as Linksimple } from './linksimple';
 export { default as List } from './list';
 export { default as ListItem } from './listitem';
 export { default as Marker } from './marker';
-export { default as MenuBar } from './menubar';
 export { default as Menu } from './menu';
+export { default as MenuBar } from './menubar';
 export { default as MenuItem } from './menuitem';
 export { default as MenuItemCheckbox } from './menuitemcheckbox';
 export { default as MenuItemRadio } from './menuitemradio';
 export { default as MenuPopover } from './menupopover';
 export { default as MenuSection } from './menusection';
+export { default as NavItem } from './navitem';
+export { default as NavItemList } from './navitemlist';
 export { default as OptGroup } from './optgroup';
 export { default as Option } from './option';
 export { default as Popover } from './popover';
@@ -49,6 +51,7 @@ export { default as RadioGroup } from './radiogroup';
 export { default as ScreenreaderAnnouncer } from './screenreaderannouncer';
 export { default as Searchfield } from './searchfield';
 export { default as Select } from './select';
+export { default as SideNavigation } from './sidenavigation';
 export { default as Spinner } from './spinner';
 export { default as StaticCheckbox } from './staticcheckbox';
 export { default as StaticRadio } from './staticradio';

package/dist/react/index.js

@@ -6,23 +6,23 @@ export { default as AvatarButton } from './avatarbutton';
 export { default as Badge } from './badge';
 export { default as Brandvisual } from './brandvisual';
 export { default as Bullet } from './bullet';
-export { default as ButtonGroup } from './buttongroup';
 export { default as Button } from './button';
+export { default as ButtonGroup } from './buttongroup';
 export { default as ButtonLink } from './buttonlink';
 export { default as Buttonsimple } from './buttonsimple';
+export { default as Card } from './card';
 export { default as CardButton } from './cardbutton';
 export { default as CardCheckbox } from './cardcheckbox';
 export { default as CardRadio } from './cardradio';
-export { default as Card } from './card';
 export { default as Checkbox } from './checkbox';
 export { default as Chip } from './chip';
 export { default as Coachmark } from './coachmark';
+export { default as Dialog } from './dialog';
 export { default as Divider } from './divider';
 export { default as FilterChip } from './filterchip';
 export { default as FormfieldGroup } from './formfieldgroup';
-export { default as Dialog } from './dialog';
-export { default as FormfieldWrapper } from './formfieldwrapper';
 export { default as Icon } from './icon';
+export { default as FormfieldWrapper } from './formfieldwrapper';
 export { default as IconProvider } from './iconprovider';
 export { default as Input } from './input';
 export { default as InputChip } from './inputchip';
@@ -31,13 +31,15 @@ export { default as Linksimple } from './linksimple';
 export { default as List } from './list';
 export { default as ListItem } from './listitem';
 export { default as Marker } from './marker';
-export { default as MenuBar } from './menubar';
 export { default as Menu } from './menu';
+export { default as MenuBar } from './menubar';
 export { default as MenuItem } from './menuitem';
 export { default as MenuItemCheckbox } from './menuitemcheckbox';
 export { default as MenuItemRadio } from './menuitemradio';
 export { default as MenuPopover } from './menupopover';
 export { default as MenuSection } from './menusection';
+export { default as NavItem } from './navitem';
+export { default as NavItemList } from './navitemlist';
 export { default as OptGroup } from './optgroup';
 export { default as Option } from './option';
 export { default as Popover } from './popover';
@@ -49,6 +51,7 @@ export { default as RadioGroup } from './radiogroup';
 export { default as ScreenreaderAnnouncer } from './screenreaderannouncer';
 export { default as Searchfield } from './searchfield';
 export { default as Select } from './select';
+export { default as SideNavigation } from './sidenavigation';
 export { default as Spinner } from './spinner';
 export { default as StaticCheckbox } from './staticcheckbox';
 export { default as StaticRadio } from './staticradio';

package/dist/react/navitem/index.d.ts

@@ -0,0 +1,43 @@
+import { type EventName } from '@lit/react';
+import Component from '../../components/navitem';
+/**
+ * `mdc-navitem` is a menuitem styled to work as a navigation tab.
+ * It supports a leading icon, optional badge and dynamic text rendering.
+ *
+ * Note: `mdc-navitem` is intended to be used inside `mdc-navitemlist` as part of the sideNavigation
+ * component. Its structure, spacing, and interactions are designed to align with
+ * the visual and functional requirements of side navigation layouts.
+ *
+ * @tagname mdc-navitem
+ *
+ * @dependency mdc-icon
+ * @dependency mdc-text
+ * @dependency mdc-badge
+ * @dependency mdc-tooltip
+ *
+ * @event click - (React: onClick) This event is dispatched when the navitem is clicked.
+ * @event keydown - (React: onKeyDown) This event is dispatched when a key is pressed down on the navitem.
+ * @event keyup - (React: onKeyUp) This event is dispatched when a key is released on the navitem.
+ * @event focus - (React: onFocus) This event is dispatched when the navitem receives focus.
+ * @event activechange - (React: onActiveChange) Dispatched when the active state of the navitem changes.
+ *
+ * @cssproperty --mdc-navitem-color - Text color of the navitem in its normal state.
+ * @cssproperty --mdc-navitem-border-color - Border color of the navitem in its normal state.
+ * @cssproperty --mdc-navitem-disabled-color - Text color of the navitem when disabled.
+ * @cssproperty --mdc-navitem-expanded-width - Width of the navItem when expanded.
+ * @cssproperty --mdc-navitem-hover-background-color - Background color of the navitem when hovered.
+ * @cssproperty --mdc-navitem-hover-active-background-color - Background color of the active navitem when hovered.
+ * @cssproperty --mdc-navitem-pressed-background-color - Background color of the navitem when pressed.
+ * @cssproperty --mdc-navitem-pressed-active-background-color - Background color of the active navitem when pressed.
+ * @cssproperty --mdc-navitem-disabled-background-color - Background color of the navitem when disabled.
+ * @cssproperty --mdc-navitem-disabled-active-background-color - Background color of the active navitem when disabled.
+ * @cssproperty --mdc-navitem-rest-active-background-color - Background color of the active nav item in its rest state.
+ */
+declare const reactWrapper: import("@lit/react").ReactWebComponent<Component, {
+    onActiveChange: EventName<Event>;
+    onClick: EventName<MouseEvent>;
+    onKeyDown: EventName<KeyboardEvent>;
+    onKeyUp: EventName<KeyboardEvent>;
+    onFocus: EventName<FocusEvent>;
+}>;
+export default reactWrapper;

package/dist/react/navitem/index.js

@@ -0,0 +1,51 @@
+import * as React from 'react';
+import { createComponent } from '@lit/react';
+import Component from '../../components/navitem';
+import { TAG_NAME } from '../../components/navitem/navitem.constants';
+/**
+ * `mdc-navitem` is a menuitem styled to work as a navigation tab.
+ * It supports a leading icon, optional badge and dynamic text rendering.
+ *
+ * Note: `mdc-navitem` is intended to be used inside `mdc-navitemlist` as part of the sideNavigation
+ * component. Its structure, spacing, and interactions are designed to align with
+ * the visual and functional requirements of side navigation layouts.
+ *
+ * @tagname mdc-navitem
+ *
+ * @dependency mdc-icon
+ * @dependency mdc-text
+ * @dependency mdc-badge
+ * @dependency mdc-tooltip
+ *
+ * @event click - (React: onClick) This event is dispatched when the navitem is clicked.
+ * @event keydown - (React: onKeyDown) This event is dispatched when a key is pressed down on the navitem.
+ * @event keyup - (React: onKeyUp) This event is dispatched when a key is released on the navitem.
+ * @event focus - (React: onFocus) This event is dispatched when the navitem receives focus.
+ * @event activechange - (React: onActiveChange) Dispatched when the active state of the navitem changes.
+ *
+ * @cssproperty --mdc-navitem-color - Text color of the navitem in its normal state.
+ * @cssproperty --mdc-navitem-border-color - Border color of the navitem in its normal state.
+ * @cssproperty --mdc-navitem-disabled-color - Text color of the navitem when disabled.
+ * @cssproperty --mdc-navitem-expanded-width - Width of the navItem when expanded.
+ * @cssproperty --mdc-navitem-hover-background-color - Background color of the navitem when hovered.
+ * @cssproperty --mdc-navitem-hover-active-background-color - Background color of the active navitem when hovered.
+ * @cssproperty --mdc-navitem-pressed-background-color - Background color of the navitem when pressed.
+ * @cssproperty --mdc-navitem-pressed-active-background-color - Background color of the active navitem when pressed.
+ * @cssproperty --mdc-navitem-disabled-background-color - Background color of the navitem when disabled.
+ * @cssproperty --mdc-navitem-disabled-active-background-color - Background color of the active navitem when disabled.
+ * @cssproperty --mdc-navitem-rest-active-background-color - Background color of the active nav item in its rest state.
+ */
+const reactWrapper = createComponent({
+    tagName: TAG_NAME,
+    elementClass: Component,
+    react: React,
+    events: {
+        onActiveChange: 'activechange',
+        onClick: 'click',
+        onKeyDown: 'keydown',
+        onKeyUp: 'keyup',
+        onFocus: 'focus',
+    },
+    displayName: 'NavItem',
+});
+export default reactWrapper;

package/dist/react/navitemlist/index.d.ts

@@ -0,0 +1,13 @@
+import Component from '../../components/navitemlist';
+/**
+ * `mdc-navitemlist` is a container component used to group multiple mdc-navitem elements into a navigation list.
+ * It provides the structural foundation for organizing vertical nav items and
+ * ensures consistent behavior and layout within side navigation patterns.
+ *
+ * Note: mdc-navitemlist is typically used within the sidenavigation component.
+ * @tagname mdc-navitemlist
+ *
+ * @slot default - Slot for projecting one or more navigation items, optional section headers and dividers.
+ */
+declare const reactWrapper: import("@lit/react").ReactWebComponent<Component, {}>;
+export default reactWrapper;

package/dist/react/navitemlist/index.js

@@ -0,0 +1,22 @@
+import * as React from 'react';
+import { createComponent } from '@lit/react';
+import Component from '../../components/navitemlist';
+import { TAG_NAME } from '../../components/navitemlist/navitemlist.constants';
+/**
+ * `mdc-navitemlist` is a container component used to group multiple mdc-navitem elements into a navigation list.
+ * It provides the structural foundation for organizing vertical nav items and
+ * ensures consistent behavior and layout within side navigation patterns.
+ *
+ * Note: mdc-navitemlist is typically used within the sidenavigation component.
+ * @tagname mdc-navitemlist
+ *
+ * @slot default - Slot for projecting one or more navigation items, optional section headers and dividers.
+ */
+const reactWrapper = createComponent({
+    tagName: TAG_NAME,
+    elementClass: Component,
+    react: React,
+    events: {},
+    displayName: 'NavItemList',
+});
+export default reactWrapper;

package/dist/react/sidenavigation/index.d.ts

@@ -0,0 +1,56 @@
+import { type EventName } from '@lit/react';
+import Component from '../../components/sidenavigation';
+/**
+ * The `mdc-sidenavigation` component provides a vertically stacked navigation experience,
+ * typically used in layouts with persistent or collapsible sidebars.
+ *
+ * ## Features:
+ * - Supports four layout variants: `fixed-collapsed`, `fixed-expanded`, `flexible`, and `hidden`
+ * - Toggleable expand/collapse behavior
+ * - Displays brand logo and customer name
+ * - Serves as a context provider for descendant components - `mdc-navitemlist` and `mdc-navitem`
+ *
+ * ### Usage:
+ * In a sidenavigation, navitems can be used in the following ways:
+ *
+ * 1. **Simple navitem** – No submenu or interaction beyond selection.
+ *
+ * 2. **Navitem with submenu**:
+ *    - Provide an `id` on the `mdc-navitem`
+ *    - Set the `triggerId` on the corresponding `mdc-menupopover` to match the navitem's `id`
+ *    - Set `parent-nav-tooltip-text` with appropriate text that will display when a child menu item
+ *      inside the nested menupopover is active, conveying which submenu item is currently selected
+ *
+ * 3. **Actionable navitem (no submenu)**:
+ *    - Performs an action such as navigation or alert trigger
+ *    - Set `disable-aria-current="true"` to maintain visual active state without navigation behavior
+ *
+ * ### Recommendations:
+ * - Use `mdc-text` for section headers
+ * - Use `mdc-divider` with the attribute `variant="gradient"` for section dividers
+ * - For the brand logo, use an informative icon. Refer to `Momentum Informative Icons`
+ *
+ * #### Accessibility Notes:
+ * - Always provide meaningful `aria-label` attributes for both `mdc-navitem` and `mdc-navitemlist`
+ * to ensure screen reader support
+ * - Set `grabber-btn-aria-label` to provide accessible labels for the expand/collapse grabber button
+ *
+ * @dependency mdc-text
+ * @dependency mdc-button
+ * @dependency mdc-divider
+ *
+ * @event activechange - (React: onActiveChange) Dispatched when the active state of the navitem changes.
+ *
+ * @tagname mdc-sidenavigation
+ *
+ * @slot scrollable-section - Slot for the scrollable content area of the side navigation.
+ * @slot fixed-section - Slot for the fixed content area of the side navigation.
+ * @slot brand-logo - Slot for the brand logo (e.g., icon or img).
+ *
+ * @cssproperty --mdc-sidenavigation-expanded-width - width of the sideNavigation when expanded
+ * @cssproperty --mdc-sidenavigation-collapsed-width - width of the sideNavigation when collpased
+ */
+declare const reactWrapper: import("@lit/react").ReactWebComponent<Component, {
+    onActiveChange: EventName<Event>;
+}>;
+export default reactWrapper;

package/dist/react/sidenavigation/index.js

@@ -0,0 +1,64 @@
+import * as React from 'react';
+import { createComponent } from '@lit/react';
+import Component from '../../components/sidenavigation';
+import { TAG_NAME } from '../../components/sidenavigation/sidenavigation.constants';
+/**
+ * The `mdc-sidenavigation` component provides a vertically stacked navigation experience,
+ * typically used in layouts with persistent or collapsible sidebars.
+ *
+ * ## Features:
+ * - Supports four layout variants: `fixed-collapsed`, `fixed-expanded`, `flexible`, and `hidden`
+ * - Toggleable expand/collapse behavior
+ * - Displays brand logo and customer name
+ * - Serves as a context provider for descendant components - `mdc-navitemlist` and `mdc-navitem`
+ *
+ * ### Usage:
+ * In a sidenavigation, navitems can be used in the following ways:
+ *
+ * 1. **Simple navitem** – No submenu or interaction beyond selection.
+ *
+ * 2. **Navitem with submenu**:
+ *    - Provide an `id` on the `mdc-navitem`
+ *    - Set the `triggerId` on the corresponding `mdc-menupopover` to match the navitem's `id`
+ *    - Set `parent-nav-tooltip-text` with appropriate text that will display when a child menu item
+ *      inside the nested menupopover is active, conveying which submenu item is currently selected
+ *
+ * 3. **Actionable navitem (no submenu)**:
+ *    - Performs an action such as navigation or alert trigger
+ *    - Set `disable-aria-current="true"` to maintain visual active state without navigation behavior
+ *
+ * ### Recommendations:
+ * - Use `mdc-text` for section headers
+ * - Use `mdc-divider` with the attribute `variant="gradient"` for section dividers
+ * - For the brand logo, use an informative icon. Refer to `Momentum Informative Icons`
+ *
+ * #### Accessibility Notes:
+ * - Always provide meaningful `aria-label` attributes for both `mdc-navitem` and `mdc-navitemlist`
+ * to ensure screen reader support
+ * - Set `grabber-btn-aria-label` to provide accessible labels for the expand/collapse grabber button
+ *
+ * @dependency mdc-text
+ * @dependency mdc-button
+ * @dependency mdc-divider
+ *
+ * @event activechange - (React: onActiveChange) Dispatched when the active state of the navitem changes.
+ *
+ * @tagname mdc-sidenavigation
+ *
+ * @slot scrollable-section - Slot for the scrollable content area of the side navigation.
+ * @slot fixed-section - Slot for the fixed content area of the side navigation.
+ * @slot brand-logo - Slot for the brand logo (e.g., icon or img).
+ *
+ * @cssproperty --mdc-sidenavigation-expanded-width - width of the sideNavigation when expanded
+ * @cssproperty --mdc-sidenavigation-collapsed-width - width of the sideNavigation when collpased
+ */
+const reactWrapper = createComponent({
+    tagName: TAG_NAME,
+    elementClass: Component,
+    react: React,
+    events: {
+        onActiveChange: 'activechange',
+    },
+    displayName: 'SideNavigation',
+});
+export default reactWrapper;

package/dist/utils/mixins/MenuMixin.js

@@ -10,13 +10,12 @@ var __metadata = (this && this.__metadata) || function (k, v) {
 import { property, queryAssignedElements } from 'lit/decorators.js';
 import { TAG_NAME as MENU_TAGNAME } from '../../components/menu/menu.constants';
 import { ORIENTATION, TAG_NAME as MENUBAR_TAGNAME } from '../../components/menubar/menubar.constants';
-import { TAG_NAME as MENUITEM_TAGNAME } from '../../components/menuitem/menuitem.constants';
-import { TAG_NAME as MENUITEMCHECKBOX_TAGNAME } from '../../components/menuitemcheckbox/menuitemcheckbox.constants';
-import { TAG_NAME as MENUITEMRADIO_TAGNAME } from '../../components/menuitemradio/menuitemradio.constants';
 import { TAG_NAME as MENUPOPOVER_TAGNAME } from '../../components/menupopover/menupopover.constants';
 import { TAG_NAME as MENUSECTION_TAGNAME } from '../../components/menusection/menusection.constants';
+import { TAG_NAME as NAVITEMLIST_TAGNAME } from '../../components/navitemlist/navitemlist.constants';
 import { POPOVER_PLACEMENT } from '../../components/popover/popover.constants';
 import { KEYS } from '../keys';
+import { ROLE } from '../roles';
 export const MenuMixin = (superClass) => {
     class InnerMixinClass extends superClass {
         constructor() {
@@ -116,7 +115,15 @@ export const MenuMixin = (superClass) => {
          */
         isValidMenu(tagName) {
             return ((tagName === null || tagName === void 0 ? void 0 : tagName.toLowerCase()) === MENU_TAGNAME
-                || (tagName === null || tagName === void 0 ? void 0 : tagName.toLowerCase()) === MENUBAR_TAGNAME);
+                || (tagName === null || tagName === void 0 ? void 0 : tagName.toLowerCase()) === MENUBAR_TAGNAME || this.isValidNavItemList(tagName));
+        }
+        /**
+         * Checks if the given tag name is a valid navitemlist tag name.
+         * @param tagName - The tag name to check.
+         * @returns True if the tag name is a valid navitemlist, false otherwise.
+         */
+        isValidNavItemList(tagName) {
+            return (tagName === null || tagName === void 0 ? void 0 : tagName.toLowerCase()) === NAVITEMLIST_TAGNAME;
         }
         /**
          * Checks if the given tag name is a valid menu popover tag name.
@@ -187,6 +194,9 @@ export const MenuMixin = (superClass) => {
          */
         getParentMenuItemDetails(menuChildId, menu) {
             var _a, _b;
+            if (menu === null) {
+                return { menu: null, menuChildId };
+            }
             if (menu && this.isValidMenu(menu.tagName)) {
                 return { menu, menuChildId };
             }
@@ -227,9 +237,7 @@ export const MenuMixin = (superClass) => {
                 newIndex = parentMenuItemIndex - 1;
             }
             this.updateTabIndexAndFocusNewIndex(parentMenuItemsChildren, parentMenuItemIndex, newIndex);
-            if (key === KEYS.ARROW_LEFT) {
-                (_e = (_d = parentMenuItemsChildren[parentMenuItemIndex - 1]) === null || _d === void 0 ? void 0 : _d.nextElementSibling) === null || _e === void 0 ? void 0 : _e.toggleAttribute('visible');
-            }
+            (_e = (_d = parentMenuItemsChildren[parentMenuItemIndex - 1]) === null || _d === void 0 ? void 0 : _d.nextElementSibling) === null || _e === void 0 ? void 0 : _e.toggleAttribute('visible');
         }
         /**
          * Closes the current menu popover and navigates to the previous parent menu item.
@@ -254,21 +262,6 @@ export const MenuMixin = (superClass) => {
             const parentMenuItemsChildren = Array.from(((_a = parentMenuItemDetails.menu) === null || _a === void 0 ? void 0 : _a.children) || []).filter((node) => this.isValidMenuItem(node));
             return { parentMenuItemDetails, parentMenuItemsChildren };
         }
-        /**
-         * Sets focus to the parent menu item of the given current menu item.
-         * It retrieves the parent menu item details and its children, then focuses
-         * on the menu item that matches the parent menu child ID.
-         * @param currentMenuItem - The current menu item from which to find and focus the parent menu item.
-         */
-        setFocusToParentMenuItem(currentMenuItem) {
-            var _a;
-            const { parentMenuItemDetails, parentMenuItemsChildren, } = this.getParentMenuContents(currentMenuItem);
-            // Only proceed if menuChildId is non-empty
-            if (parentMenuItemDetails === null || parentMenuItemDetails === void 0 ? void 0 : parentMenuItemDetails.menuChildId) {
-                const menuBarMenuItem = parentMenuItemsChildren.filter((node) => node.getAttribute('id') === parentMenuItemDetails.menuChildId);
-                (_a = menuBarMenuItem[0]) === null || _a === void 0 ? void 0 : _a.focus();
-            }
-        }
         /**
          * Opens the popover of the next children menu item if there are children.
          * If there are no children, then it closes all popovers recursively and
@@ -284,6 +277,8 @@ export const MenuMixin = (superClass) => {
             // - If there are no popovers to the right, then we will close all popovers recursively,
             // and go the next menu item from the menu bar
             this.hideAllPopovers(this.menuItems[currentIndex]);
+            if (this.isValidMenu(this.tagName))
+                return;
             // - get the top parent menu items using recursion.
             const { parentMenuItemDetails, parentMenuItemsChildren, } = this.getParentMenuContents(this.menuItems[currentIndex]);
             if (parentMenuItemsChildren.length === 0 || (parentMenuItemDetails === null || parentMenuItemDetails === void 0 ? void 0 : parentMenuItemDetails.menuChildId) === '') {
@@ -301,9 +296,7 @@ export const MenuMixin = (superClass) => {
          * @returns True if the menu item is a valid menu item, false otherwise.
          */
         isValidMenuItem(menuItem) {
-            var _a;
-            return [MENUITEM_TAGNAME, MENUITEMCHECKBOX_TAGNAME, MENUITEMRADIO_TAGNAME]
-                .includes((_a = menuItem.tagName) === null || _a === void 0 ? void 0 : _a.toLowerCase());
+            return menuItem.getAttribute('role') === ROLE.MENUITEM;
         }
         /**
          * Resets all list items tabindex to -1 and sets the tabindex of the
@@ -318,6 +311,28 @@ export const MenuMixin = (superClass) => {
                 node === null || node === void 0 ? void 0 : node.setAttribute('tabindex', newTabindex);
             });
         }
+        /**
+         * Returns the key based on the direction of the document.
+         * If the document is in RTL mode and the key is ARROW_LEFT or ARROW_RIGHT,
+         * it will swap them to maintain the correct navigation direction.
+         * @param originalKey - The original key pressed.
+         * @returns The key based on the direction of the document.
+         */
+        getKeyBasedOnDirection(originalKey) {
+            var _a;
+            let key = originalKey;
+            const isRtl = ((_a = document.querySelector('html')) === null || _a === void 0 ? void 0 : _a.getAttribute('dir')) === 'rtl'
+                || window.getComputedStyle(this).direction === 'rtl';
+            if (isRtl && (key === KEYS.ARROW_LEFT || key === KEYS.ARROW_RIGHT)) {
+                if (key === KEYS.ARROW_LEFT) {
+                    key = KEYS.ARROW_RIGHT;
+                }
+                else {
+                    key = KEYS.ARROW_LEFT;
+                }
+            }
+            return key;
+        }
         /**
          * Handles the keydown event on the menu bar.
          * The keys are as follows:
@@ -355,7 +370,8 @@ export const MenuMixin = (superClass) => {
             const currentIndex = this.getCurrentIndex(event.target);
             if (currentIndex === -1)
                 return;
-            switch (event.key) {
+            const key = this.getKeyBasedOnDirection(event.key);
+            switch (key) {
                 case KEYS.HOME:
                     this.updateTabIndexAndFocusNewIndex(this.menuItems, currentIndex, firstMenuIndex);
                     break;
@@ -407,15 +423,11 @@ export const MenuMixin = (superClass) => {
                     }
                     else if (this.isValidMenuItem(event.target)) {
                         this.setMenuBarPopoverValue(false);
-                        this.setFocusToParentMenuItem(this.menuItems[currentIndex]);
                     }
                     break;
                 }
                 case KEYS.ESCAPE: {
                     this.setMenuBarPopoverValue(false);
-                    if (this.ariaOrientation === ORIENTATION.VERTICAL) {
-                        this.navigateToPrevParentMenuItem(currentIndex, event.key);
-                    }
                     break;
                 }
                 default:
@@ -439,17 +451,17 @@ export const MenuMixin = (superClass) => {
          * @param event - The mouse click event.
          */
         handleMouseClick(event) {
-            var _a, _b;
+            var _a;
             const target = event.target;
             const currentIndex = this.getCurrentIndex(target);
             if (currentIndex === -1)
                 return;
-            if (this.isValidPopover((_b = (_a = this.menuItems[currentIndex]) === null || _a === void 0 ? void 0 : _a.nextElementSibling) === null || _b === void 0 ? void 0 : _b.tagName)) {
+            if (this.isValidPopover((_a = target === null || target === void 0 ? void 0 : target.nextElementSibling) === null || _a === void 0 ? void 0 : _a.tagName)) {
                 this.closeAllPopoversExceptCurrent(currentIndex);
                 this.openPopoverAndNavigateToNextChildrenMenuItem(currentIndex);
             }
             else if (this.isValidMenuItem(target)) {
-                this.hideAllPopovers(this.menuItems[currentIndex]);
+                target.parentElement.hidePopover();
             }
         }
     }

package/dist/utils/roles.d.ts

@@ -10,6 +10,7 @@ declare const ROLE: {
     readonly MENUITEM: "menuitem";
     readonly MENUITEMCHECKBOX: "menuitemcheckbox";
     readonly MENUITEMRADIO: "menuitemradio";
+    readonly NAVIGATION: "navigation";
     readonly RADIO: "radio";
     readonly RADIOGROUP: "radiogroup";
     readonly TOOLTIP: "tooltip";

package/dist/utils/roles.js

@@ -10,6 +10,7 @@ const ROLE = {
     MENUITEM: 'menuitem',
     MENUITEMCHECKBOX: 'menuitemcheckbox',
     MENUITEMRADIO: 'menuitemradio',
+    NAVIGATION: 'navigation',
     RADIO: 'radio',
     RADIOGROUP: 'radiogroup',
     TOOLTIP: 'tooltip',

package/package.json

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