@momentum-design/components 0.91.1 → 0.92.0

package/dist/index.d.ts

@@ -35,8 +35,7 @@ import MenuItemCheckbox from './components/menuitemcheckbox';
 import MenuItemRadio from './components/menuitemradio';
 import MenuPopover from './components/menupopover';
 import MenuSection from './components/menusection';
-import NavItem from './components/navitem';
-import NavItemList from './components/navitemlist';
+import NavMenuItem from './components/navmenuitem';
 import OptGroup from './components/optgroup';
 import Option from './components/option';
 import Password from './components/password';
@@ -76,6 +75,6 @@ import type { MenuSectionChangeEvent } from './components/menusection/menusectio
 import { inMemoryCache, webAPIIconsCache } from './utils/icon-cache';
 import { BUTTON_COLORS, BUTTON_VARIANTS, ICON_BUTTON_SIZES, PILL_BUTTON_SIZES } from './components/button/button.constants';
 import { SKELETON_VARIANTS } from './components/skeleton/skeleton.constants';
-export { AlertChip, Animation, Appheader, Avatar, AvatarButton, Badge, Brandvisual, Bullet, Button, ButtonGroup, ButtonLink, Card, CardButton, CardCheckbox, CardRadio, Checkbox, Chip, Coachmark, Dialog, Divider, FilterChip, FormfieldGroup, Icon, IconProvider, Input, InputChip, Link, Linksimple, List, ListItem, Marker, MenuBar, MenuItem, MenuItemCheckbox, MenuItemRadio, MenuPopover, MenuSection, NavItem, NavItemList, OptGroup, Option, Password, Popover, Presence, Progressbar, Progressspinner, Radio, RadioGroup, ScreenreaderAnnouncer, Searchfield, Select, SideNavigation, Skeleton, Spinner, StaticCheckbox, StaticRadio, StaticToggle, Tab, TabList, Text, Textarea, ThemeProvider, Toggle, ToggleTip, Tooltip, VirtualizedList, Listheader, };
+export { AlertChip, Animation, Appheader, Avatar, AvatarButton, Badge, Brandvisual, Bullet, Button, ButtonGroup, ButtonLink, Card, CardButton, CardCheckbox, CardRadio, Checkbox, Chip, Coachmark, Dialog, Divider, FilterChip, FormfieldGroup, Icon, IconProvider, Input, InputChip, Link, Linksimple, List, ListItem, Marker, MenuBar, MenuItem, MenuItemCheckbox, MenuItemRadio, MenuPopover, MenuSection, NavMenuItem, OptGroup, Option, Password, Popover, Presence, Progressbar, Progressspinner, Radio, RadioGroup, ScreenreaderAnnouncer, Searchfield, Select, SideNavigation, Skeleton, Spinner, StaticCheckbox, StaticRadio, StaticToggle, Tab, TabList, Text, Textarea, ThemeProvider, Toggle, ToggleTip, Tooltip, VirtualizedList, Listheader, };
 export type { BadgeType, ButtonColor, ButtonVariant, IconButtonSize, MenuPopoverActionEvent, MenuPopoverChangeEvent, MenuSectionChangeEvent, PillButtonSize, PopoverPlacement, SkeletonVariant, SpinnerSize, SpinnerVariant, TextType, };
 export { BUTTON_COLORS, BUTTON_VARIANTS, ICON_BUTTON_SIZES, inMemoryCache, PILL_BUTTON_SIZES, SKELETON_VARIANTS, webAPIIconsCache, };

package/dist/index.js

@@ -37,8 +37,7 @@ import MenuItemCheckbox from './components/menuitemcheckbox';
 import MenuItemRadio from './components/menuitemradio';
 import MenuPopover from './components/menupopover';
 import MenuSection from './components/menusection';
-import NavItem from './components/navitem';
-import NavItemList from './components/navitemlist';
+import NavMenuItem from './components/navmenuitem';
 import OptGroup from './components/optgroup';
 import Option from './components/option';
 import Password from './components/password';
@@ -72,6 +71,6 @@ import { inMemoryCache, webAPIIconsCache } from './utils/icon-cache';
 import { BUTTON_COLORS, BUTTON_VARIANTS, ICON_BUTTON_SIZES, PILL_BUTTON_SIZES, } from './components/button/button.constants';
 import { SKELETON_VARIANTS } from './components/skeleton/skeleton.constants';
 // Components Exports
-export { AlertChip, Animation, Appheader, Avatar, AvatarButton, Badge, Brandvisual, Bullet, Button, ButtonGroup, ButtonLink, Card, CardButton, CardCheckbox, CardRadio, Checkbox, Chip, Coachmark, Dialog, Divider, FilterChip, FormfieldGroup, Icon, IconProvider, Input, InputChip, Link, Linksimple, List, ListItem, Marker, MenuBar, MenuItem, MenuItemCheckbox, MenuItemRadio, MenuPopover, MenuSection, NavItem, NavItemList, OptGroup, Option, Password, Popover, Presence, Progressbar, Progressspinner, Radio, RadioGroup, ScreenreaderAnnouncer, Searchfield, Select, SideNavigation, Skeleton, Spinner, StaticCheckbox, StaticRadio, StaticToggle, Tab, TabList, Text, Textarea, ThemeProvider, Toggle, ToggleTip, Tooltip, VirtualizedList, Listheader, };
+export { AlertChip, Animation, Appheader, Avatar, AvatarButton, Badge, Brandvisual, Bullet, Button, ButtonGroup, ButtonLink, Card, CardButton, CardCheckbox, CardRadio, Checkbox, Chip, Coachmark, Dialog, Divider, FilterChip, FormfieldGroup, Icon, IconProvider, Input, InputChip, Link, Linksimple, List, ListItem, Marker, MenuBar, MenuItem, MenuItemCheckbox, MenuItemRadio, MenuPopover, MenuSection, NavMenuItem, OptGroup, Option, Password, Popover, Presence, Progressbar, Progressspinner, Radio, RadioGroup, ScreenreaderAnnouncer, Searchfield, Select, SideNavigation, Skeleton, Spinner, StaticCheckbox, StaticRadio, StaticToggle, Tab, TabList, Text, Textarea, ThemeProvider, Toggle, ToggleTip, Tooltip, VirtualizedList, Listheader, };
 // Constants / Utils Exports
 export { BUTTON_COLORS, BUTTON_VARIANTS, ICON_BUTTON_SIZES, inMemoryCache, PILL_BUTTON_SIZES, SKELETON_VARIANTS, webAPIIconsCache, };

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';
@@ -33,13 +33,12 @@ export { default as Listheader } from './listheader';
 export { default as ListItem } from './listitem';
 export { default as Marker } from './marker';
 export { default as MenuBar } from './menubar';
-export { default as MenuItemCheckbox } from './menuitemcheckbox';
 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 NavMenuItem } from './navmenuitem';
 export { default as OptGroup } from './optgroup';
 export { default as Option } from './option';
 export { default as Password } from './password';

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';
@@ -33,13 +33,12 @@ export { default as Listheader } from './listheader';
 export { default as ListItem } from './listitem';
 export { default as Marker } from './marker';
 export { default as MenuBar } from './menubar';
-export { default as MenuItemCheckbox } from './menuitemcheckbox';
 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 NavMenuItem } from './navmenuitem';
 export { default as OptGroup } from './optgroup';
 export { default as Option } from './option';
 export { default as Password } from './password';

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

@@ -0,0 +1,43 @@
+import { type EventName } from '@lit/react';
+import Component from '../../components/navmenuitem';
+/**
+ * `mdc-navmenuitem` is a menuitem styled to work as a navigation tab.
+ * It supports a leading icon, optional badge and dynamic text rendering.
+ *
+ * Note: `mdc-navmenuitem` is intended to be used inside `mdc-menubar` 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-navmenuitem
+ *
+ * @dependency mdc-icon
+ * @dependency mdc-text
+ * @dependency mdc-badge
+ * @dependency mdc-tooltip
+ *
+ * @event click - (React: onClick) This event is dispatched when the navmenuitem is clicked.
+ * @event keydown - (React: onKeyDown) This event is dispatched when a key is pressed down on the navmenuitem.
+ * @event keyup - (React: onKeyUp) This event is dispatched when a key is released on the navmenuitem.
+ * @event focus - (React: onFocus) This event is dispatched when the navmenuitem receives focus.
+ * @event activechange - (React: onActiveChange) Dispatched when the active state of the navmenuitem changes.
+ *
+ * @cssproperty --mdc-navmenuitem-color - Text color of the navmenuitem in its normal state.
+ * @cssproperty --mdc-navmenuitem-border-color - Border color of the navmenuitem in its normal state.
+ * @cssproperty --mdc-navmenuitem-disabled-color - Text color of the navmenuitem when disabled.
+ * @cssproperty --mdc-navmenuitem-expanded-width - Width of the navmenuitem when expanded.
+ * @cssproperty --mdc-navmenuitem-hover-background-color - Background color of the navmenuitem when hovered.
+ * @cssproperty --mdc-navmenuitem-hover-active-background-color - Background color of the active navmenuitem when hovered.
+ * @cssproperty --mdc-navmenuitem-pressed-background-color - Background color of the navmenuitem when pressed.
+ * @cssproperty --mdc-navmenuitem-pressed-active-background-color - Background color of the active navmenuitem when pressed.
+ * @cssproperty --mdc-navmenuitem-disabled-background-color - Background color of the navmenuitem when disabled.
+ * @cssproperty --mdc-navmenuitem-disabled-active-background-color - Background color of the active navmenuitem when disabled.
+ * @cssproperty --mdc-navmenuitem-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/navmenuitem/index.js

@@ -0,0 +1,51 @@
+import * as React from 'react';
+import { createComponent } from '@lit/react';
+import Component from '../../components/navmenuitem';
+import { TAG_NAME } from '../../components/navmenuitem/navmenuitem.constants';
+/**
+ * `mdc-navmenuitem` is a menuitem styled to work as a navigation tab.
+ * It supports a leading icon, optional badge and dynamic text rendering.
+ *
+ * Note: `mdc-navmenuitem` is intended to be used inside `mdc-menubar` 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-navmenuitem
+ *
+ * @dependency mdc-icon
+ * @dependency mdc-text
+ * @dependency mdc-badge
+ * @dependency mdc-tooltip
+ *
+ * @event click - (React: onClick) This event is dispatched when the navmenuitem is clicked.
+ * @event keydown - (React: onKeyDown) This event is dispatched when a key is pressed down on the navmenuitem.
+ * @event keyup - (React: onKeyUp) This event is dispatched when a key is released on the navmenuitem.
+ * @event focus - (React: onFocus) This event is dispatched when the navmenuitem receives focus.
+ * @event activechange - (React: onActiveChange) Dispatched when the active state of the navmenuitem changes.
+ *
+ * @cssproperty --mdc-navmenuitem-color - Text color of the navmenuitem in its normal state.
+ * @cssproperty --mdc-navmenuitem-border-color - Border color of the navmenuitem in its normal state.
+ * @cssproperty --mdc-navmenuitem-disabled-color - Text color of the navmenuitem when disabled.
+ * @cssproperty --mdc-navmenuitem-expanded-width - Width of the navmenuitem when expanded.
+ * @cssproperty --mdc-navmenuitem-hover-background-color - Background color of the navmenuitem when hovered.
+ * @cssproperty --mdc-navmenuitem-hover-active-background-color - Background color of the active navmenuitem when hovered.
+ * @cssproperty --mdc-navmenuitem-pressed-background-color - Background color of the navmenuitem when pressed.
+ * @cssproperty --mdc-navmenuitem-pressed-active-background-color - Background color of the active navmenuitem when pressed.
+ * @cssproperty --mdc-navmenuitem-disabled-background-color - Background color of the navmenuitem when disabled.
+ * @cssproperty --mdc-navmenuitem-disabled-active-background-color - Background color of the active navmenuitem when disabled.
+ * @cssproperty --mdc-navmenuitem-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: 'NavMenuItem',
+});
+export default reactWrapper;

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

@@ -8,20 +8,20 @@ import Component from '../../components/sidenavigation';
  * - 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`
+ * - Serves as a context provider for descendant components - `mdc-menubar` and `mdc-navmenuitem`
  *
  * ### Usage:
- * In a sidenavigation, navitems can be used in the following ways:
+ * In a sidenavigation, navmenuitems can be used in the following ways:
  *
- * 1. **Simple navitem** – No submenu or interaction beyond selection.
+ * 1. **Simple navmenuitem** – 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`
+ * 2. **NavMenuItem with submenu**:
+ *    - Provide an `id` on the `mdc-navmenuitem`
+ *    - Set the `triggerId` on the corresponding `mdc-menupopover` to match the navmenuitem'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)**:
+ * 3. **Actionable navmenuitem (no submenu)**:
  *    - Performs an action such as navigation or alert trigger
  *    - Set `disable-aria-current="true"` to maintain visual active state without navigation behavior
  *
@@ -31,15 +31,16 @@ import Component from '../../components/sidenavigation';
  * - 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`
+ * - Always provide meaningful `aria-label` attributes for both `mdc-navmenuitem` and `mdc-menubar`
  * 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
+ * @dependency mdc-menubar
  *
- * @event activechange - (React: onActiveChange) Dispatched when the active state of the navitem changes.
+ * @event activechange - (React: onActiveChange) Dispatched when the active state of the navmenuitem changes.
  *
  * @tagname mdc-sidenavigation
  *

package/dist/react/sidenavigation/index.js

@@ -10,20 +10,20 @@ import { TAG_NAME } from '../../components/sidenavigation/sidenavigation.constan
  * - 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`
+ * - Serves as a context provider for descendant components - `mdc-menubar` and `mdc-navmenuitem`
  *
  * ### Usage:
- * In a sidenavigation, navitems can be used in the following ways:
+ * In a sidenavigation, navmenuitems can be used in the following ways:
  *
- * 1. **Simple navitem** – No submenu or interaction beyond selection.
+ * 1. **Simple navmenuitem** – 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`
+ * 2. **NavMenuItem with submenu**:
+ *    - Provide an `id` on the `mdc-navmenuitem`
+ *    - Set the `triggerId` on the corresponding `mdc-menupopover` to match the navmenuitem'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)**:
+ * 3. **Actionable navmenuitem (no submenu)**:
  *    - Performs an action such as navigation or alert trigger
  *    - Set `disable-aria-current="true"` to maintain visual active state without navigation behavior
  *
@@ -33,15 +33,16 @@ import { TAG_NAME } from '../../components/sidenavigation/sidenavigation.constan
  * - 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`
+ * - Always provide meaningful `aria-label` attributes for both `mdc-navmenuitem` and `mdc-menubar`
  * 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
+ * @dependency mdc-menubar
  *
- * @event activechange - (React: onActiveChange) Dispatched when the active state of the navitem changes.
+ * @event activechange - (React: onActiveChange) Dispatched when the active state of the navmenuitem changes.
  *
  * @tagname mdc-sidenavigation
  *

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@momentum-design/components",
   "packageManager": "yarn@3.2.4",
-  "version": "0.91.1",
+  "version": "0.92.0",
   "engines": {
     "node": ">=20.0.0",
     "npm": ">=8.0.0"

package/dist/components/navitem/index.js

@@ -1,8 +0,0 @@
-import NavItem from './navitem.component';
-import { TAG_NAME } from './navitem.constants';
-import '../text';
-import '../badge';
-import '../icon';
-import '../tooltip';
-NavItem.register(TAG_NAME);
-export default NavItem;

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

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

package/dist/components/navitemlist/index.js

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

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

@@ -1,50 +0,0 @@
-import type { CSSResult } from 'lit';
-import MenuBar from '../menubar/menubar.component';
-/**
- * `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 class NavItemList extends MenuBar {
-    /**
-     * Determines whether the navItemList is expanded or not.
-     *
-     * @internal
-     */
-    showLabel?: boolean;
-    /**
-     * Aria-label attribute to be set for accessibility
-     */
-    ariaLabel: string | null;
-    /**
-     * @internal
-     */
-    private readonly sideNavigationContext;
-    connectedCallback(): void;
-    disconnectedCallback(): void;
-    protected updated(): void;
-    /**
-     * Handle the navItem active change event fired from the nested navItem.
-     * @internal
-     * @param event - Custom Event fired from the nested navItem.
-     */
-    private handleNestedNavItemActiveChange;
-    /**
-     * Matches new navItem with navId.
-     * @param NavItem - The new active navItem.
-     *
-     * @internal
-     */
-    private findNav;
-    /**
-     * Returns all nested, non-disabled mdc-navitem elements inside this component.
-     */
-    private get navItems();
-    static styles: Array<CSSResult>;
-}
-export default NavItemList;

package/dist/components/navitemlist/navitemlist.component.js

@@ -1,89 +0,0 @@
-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 MenuBar from '../menubar/menubar.component';
-import providerUtils from '../../utils/provider';
-import { TAG_NAME as NAVITEM_TAGNAME } from '../navitem/navitem.constants';
-import SideNavigation from '../sidenavigation/sidenavigation.component';
-import styles from './navitemlist.styles';
-/**
- * `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.
- */
-class NavItemList extends MenuBar {
-    constructor() {
-        super(...arguments);
-        /**
-         * Aria-label attribute to be set for accessibility
-         */
-        this.ariaLabel = null;
-        /**
-         * @internal
-         */
-        this.sideNavigationContext = providerUtils.consume({ host: this, context: SideNavigation.Context });
-        /**
-         * Handle the navItem active change event fired from the nested navItem.
-         * @internal
-         * @param event - Custom Event fired from the nested navItem.
-         */
-        this.handleNestedNavItemActiveChange = (event) => {
-            var _a;
-            const newNavItem = this.findNav(this.navItems || [], event.detail.navId);
-            if ((_a = this.sideNavigationContext) === null || _a === void 0 ? void 0 : _a.value) {
-                this.sideNavigationContext.value.setCurrentActiveNavItem(newNavItem);
-            }
-        };
-        /**
-         * Matches new navItem with navId.
-         * @param NavItem - The new active navItem.
-         *
-         * @internal
-         */
-        this.findNav = (navs, navId) => navs.find(nav => nav.navId === navId);
-    }
-    connectedCallback() {
-        super.connectedCallback();
-        this.addEventListener('activechange', this.handleNestedNavItemActiveChange);
-    }
-    disconnectedCallback() {
-        super.disconnectedCallback();
-        this.removeEventListener('activechange', this.handleNestedNavItemActiveChange);
-    }
-    updated() {
-        var _a;
-        const context = (_a = this.sideNavigationContext) === null || _a === void 0 ? void 0 : _a.value;
-        if (!context)
-            return;
-        const { expanded } = context;
-        this.showLabel = expanded;
-    }
-    /**
-     * Returns all nested, non-disabled mdc-navitem elements inside this component.
-     */
-    get navItems() {
-        return Array.from(this.querySelectorAll(`${NAVITEM_TAGNAME}:not([disabled])`));
-    }
-}
-NavItemList.styles = [...MenuBar.styles, ...styles];
-__decorate([
-    property({ type: Boolean, reflect: true, attribute: 'show-label' }),
-    __metadata("design:type", Boolean)
-], NavItemList.prototype, "showLabel", void 0);
-__decorate([
-    property({ type: String, attribute: 'aria-label' }),
-    __metadata("design:type", Object)
-], NavItemList.prototype, "ariaLabel", void 0);
-export default NavItemList;

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

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

package/dist/components/navitemlist/navitemlist.constants.js

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

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

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

package/dist/components/navitemlist/navitemlist.styles.js

@@ -1,23 +0,0 @@
-import { css } from 'lit';
-const styles = css `
-  :host {
-    gap: 0.25rem;
-  }
-
-  :host(:not([show-label])) ::slotted(mdc-text) {
-    display: none;
-  }
-
-  :host(:dir(ltr)) ::slotted(mdc-text) {
-    padding-left: 1.75rem;
-  }
-
-  :host(:dir(rtl)) ::slotted(mdc-text) {
-    padding-right: 1.75rem;
-  }
-
-  ::slotted(mdc-divider) {
-    margin: 0.75rem 0;
-  }
-`;
-export default [styles];

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

@@ -1,43 +0,0 @@
-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

@@ -1,51 +0,0 @@
-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

@@ -1,13 +0,0 @@
-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

@@ -1,22 +0,0 @@
-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;