@momentum-design/components 0.91.1 → 0.91.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (54) hide show
  1. package/dist/browser/index.js +408 -404
  2. package/dist/browser/index.js.map +4 -4
  3. package/dist/components/listitem/listitem.component.js +16 -19
  4. package/dist/components/listitem/listitem.constants.d.ts +1 -3
  5. package/dist/components/listitem/listitem.constants.js +1 -4
  6. package/dist/components/listitem/listitem.utils.d.ts +3 -0
  7. package/dist/components/listitem/listitem.utils.js +4 -0
  8. package/dist/components/menubar/menubar.component.d.ts +6 -2
  9. package/dist/components/menubar/menubar.component.js +52 -23
  10. package/dist/components/menupopover/menupopover.utils.d.ts +1 -2
  11. package/dist/components/menupopover/menupopover.utils.js +9 -6
  12. package/dist/components/menusection/menusection.component.d.ts +15 -0
  13. package/dist/components/menusection/menusection.component.js +38 -2
  14. package/dist/components/menusection/menusection.styles.js +9 -1
  15. package/dist/components/{navitem → navmenuitem}/index.d.ts +3 -3
  16. package/dist/components/navmenuitem/index.js +8 -0
  17. package/dist/components/{navitem/navitem.component.d.ts → navmenuitem/navmenuitem.component.d.ts} +35 -35
  18. package/dist/components/{navitem/navitem.component.js → navmenuitem/navmenuitem.component.js} +43 -45
  19. package/dist/components/{navitem/navitem.constants.d.ts → navmenuitem/navmenuitem.constants.d.ts} +1 -1
  20. package/dist/components/{navitem/navitem.constants.js → navmenuitem/navmenuitem.constants.js} +1 -1
  21. package/dist/components/{navitem/navitem.styles.js → navmenuitem/navmenuitem.styles.js} +33 -29
  22. package/dist/components/{navitem/navitem.types.d.ts → navmenuitem/navmenuitem.types.d.ts} +1 -1
  23. package/dist/components/popover/popover.component.js +1 -1
  24. package/dist/components/sidenavigation/index.d.ts +1 -0
  25. package/dist/components/sidenavigation/index.js +1 -0
  26. package/dist/components/sidenavigation/sidenavigation.component.d.ts +30 -11
  27. package/dist/components/sidenavigation/sidenavigation.component.js +60 -17
  28. package/dist/components/sidenavigation/sidenavigation.context.d.ts +5 -5
  29. package/dist/components/sidenavigation/sidenavigation.context.js +26 -25
  30. package/dist/custom-elements.json +838 -1195
  31. package/dist/index.d.ts +2 -3
  32. package/dist/index.js +2 -3
  33. package/dist/react/index.d.ts +5 -6
  34. package/dist/react/index.js +5 -6
  35. package/dist/react/navmenuitem/index.d.ts +43 -0
  36. package/dist/react/navmenuitem/index.js +51 -0
  37. package/dist/react/sidenavigation/index.d.ts +10 -9
  38. package/dist/react/sidenavigation/index.js +10 -9
  39. package/package.json +1 -1
  40. package/dist/components/navitem/index.js +0 -8
  41. package/dist/components/navitemlist/index.d.ts +0 -7
  42. package/dist/components/navitemlist/index.js +0 -4
  43. package/dist/components/navitemlist/navitemlist.component.d.ts +0 -50
  44. package/dist/components/navitemlist/navitemlist.component.js +0 -89
  45. package/dist/components/navitemlist/navitemlist.constants.d.ts +0 -2
  46. package/dist/components/navitemlist/navitemlist.constants.js +0 -3
  47. package/dist/components/navitemlist/navitemlist.styles.d.ts +0 -2
  48. package/dist/components/navitemlist/navitemlist.styles.js +0 -23
  49. package/dist/react/navitem/index.d.ts +0 -43
  50. package/dist/react/navitem/index.js +0 -51
  51. package/dist/react/navitemlist/index.d.ts +0 -13
  52. package/dist/react/navitemlist/index.js +0 -22
  53. /package/dist/components/{navitem/navitem.styles.d.ts → navmenuitem/navmenuitem.styles.d.ts} +0 -0
  54. /package/dist/components/{navitem/navitem.types.js → navmenuitem/navmenuitem.types.js} +0 -0
package/dist/index.d.ts CHANGED
@@ -35,8 +35,7 @@ import MenuItemCheckbox from './components/menuitemcheckbox';
35
35
  import MenuItemRadio from './components/menuitemradio';
36
36
  import MenuPopover from './components/menupopover';
37
37
  import MenuSection from './components/menusection';
38
- import NavItem from './components/navitem';
39
- import NavItemList from './components/navitemlist';
38
+ import NavMenuItem from './components/navmenuitem';
40
39
  import OptGroup from './components/optgroup';
41
40
  import Option from './components/option';
42
41
  import Password from './components/password';
@@ -76,6 +75,6 @@ import type { MenuSectionChangeEvent } from './components/menusection/menusectio
76
75
  import { inMemoryCache, webAPIIconsCache } from './utils/icon-cache';
77
76
  import { BUTTON_COLORS, BUTTON_VARIANTS, ICON_BUTTON_SIZES, PILL_BUTTON_SIZES } from './components/button/button.constants';
78
77
  import { SKELETON_VARIANTS } from './components/skeleton/skeleton.constants';
79
- 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, };
78
+ 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, };
80
79
  export type { BadgeType, ButtonColor, ButtonVariant, IconButtonSize, MenuPopoverActionEvent, MenuPopoverChangeEvent, MenuSectionChangeEvent, PillButtonSize, PopoverPlacement, SkeletonVariant, SpinnerSize, SpinnerVariant, TextType, };
81
80
  export { BUTTON_COLORS, BUTTON_VARIANTS, ICON_BUTTON_SIZES, inMemoryCache, PILL_BUTTON_SIZES, SKELETON_VARIANTS, webAPIIconsCache, };
package/dist/index.js CHANGED
@@ -37,8 +37,7 @@ import MenuItemCheckbox from './components/menuitemcheckbox';
37
37
  import MenuItemRadio from './components/menuitemradio';
38
38
  import MenuPopover from './components/menupopover';
39
39
  import MenuSection from './components/menusection';
40
- import NavItem from './components/navitem';
41
- import NavItemList from './components/navitemlist';
40
+ import NavMenuItem from './components/navmenuitem';
42
41
  import OptGroup from './components/optgroup';
43
42
  import Option from './components/option';
44
43
  import Password from './components/password';
@@ -72,6 +71,6 @@ import { inMemoryCache, webAPIIconsCache } from './utils/icon-cache';
72
71
  import { BUTTON_COLORS, BUTTON_VARIANTS, ICON_BUTTON_SIZES, PILL_BUTTON_SIZES, } from './components/button/button.constants';
73
72
  import { SKELETON_VARIANTS } from './components/skeleton/skeleton.constants';
74
73
  // Components Exports
75
- 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, };
74
+ 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, };
76
75
  // Constants / Utils Exports
77
76
  export { BUTTON_COLORS, BUTTON_VARIANTS, ICON_BUTTON_SIZES, inMemoryCache, PILL_BUTTON_SIZES, SKELETON_VARIANTS, webAPIIconsCache, };
@@ -1,12 +1,12 @@
1
1
  export { default as AlertChip } from './alertchip';
2
- export { default as Appheader } from './appheader';
3
2
  export { default as Animation } from './animation';
3
+ export { default as Appheader } from './appheader';
4
4
  export { default as Avatar } from './avatar';
5
5
  export { default as AvatarButton } from './avatarbutton';
6
6
  export { default as Badge } from './badge';
7
7
  export { default as Brandvisual } from './brandvisual';
8
- export { default as Bullet } from './bullet';
9
8
  export { default as Button } from './button';
9
+ export { default as Bullet } from './bullet';
10
10
  export { default as ButtonGroup } from './buttongroup';
11
11
  export { default as ButtonLink } from './buttonlink';
12
12
  export { default as Buttonsimple } from './buttonsimple';
@@ -33,13 +33,12 @@ export { default as Listheader } from './listheader';
33
33
  export { default as ListItem } from './listitem';
34
34
  export { default as Marker } from './marker';
35
35
  export { default as MenuBar } from './menubar';
36
- export { default as MenuItemCheckbox } from './menuitemcheckbox';
37
36
  export { default as MenuItem } from './menuitem';
37
+ export { default as MenuItemCheckbox } from './menuitemcheckbox';
38
38
  export { default as MenuItemRadio } from './menuitemradio';
39
39
  export { default as MenuPopover } from './menupopover';
40
40
  export { default as MenuSection } from './menusection';
41
- export { default as NavItem } from './navitem';
42
- export { default as NavItemList } from './navitemlist';
41
+ export { default as NavMenuItem } from './navmenuitem';
43
42
  export { default as OptGroup } from './optgroup';
44
43
  export { default as Option } from './option';
45
44
  export { default as Password } from './password';
@@ -52,9 +51,9 @@ export { default as RadioGroup } from './radiogroup';
52
51
  export { default as ScreenreaderAnnouncer } from './screenreaderannouncer';
53
52
  export { default as Searchfield } from './searchfield';
54
53
  export { default as Select } from './select';
55
- export { default as SideNavigation } from './sidenavigation';
56
54
  export { default as Skeleton } from './skeleton';
57
55
  export { default as Spinner } from './spinner';
56
+ export { default as SideNavigation } from './sidenavigation';
58
57
  export { default as StaticCheckbox } from './staticcheckbox';
59
58
  export { default as StaticRadio } from './staticradio';
60
59
  export { default as StaticToggle } from './statictoggle';
@@ -1,12 +1,12 @@
1
1
  export { default as AlertChip } from './alertchip';
2
- export { default as Appheader } from './appheader';
3
2
  export { default as Animation } from './animation';
3
+ export { default as Appheader } from './appheader';
4
4
  export { default as Avatar } from './avatar';
5
5
  export { default as AvatarButton } from './avatarbutton';
6
6
  export { default as Badge } from './badge';
7
7
  export { default as Brandvisual } from './brandvisual';
8
- export { default as Bullet } from './bullet';
9
8
  export { default as Button } from './button';
9
+ export { default as Bullet } from './bullet';
10
10
  export { default as ButtonGroup } from './buttongroup';
11
11
  export { default as ButtonLink } from './buttonlink';
12
12
  export { default as Buttonsimple } from './buttonsimple';
@@ -33,13 +33,12 @@ export { default as Listheader } from './listheader';
33
33
  export { default as ListItem } from './listitem';
34
34
  export { default as Marker } from './marker';
35
35
  export { default as MenuBar } from './menubar';
36
- export { default as MenuItemCheckbox } from './menuitemcheckbox';
37
36
  export { default as MenuItem } from './menuitem';
37
+ export { default as MenuItemCheckbox } from './menuitemcheckbox';
38
38
  export { default as MenuItemRadio } from './menuitemradio';
39
39
  export { default as MenuPopover } from './menupopover';
40
40
  export { default as MenuSection } from './menusection';
41
- export { default as NavItem } from './navitem';
42
- export { default as NavItemList } from './navitemlist';
41
+ export { default as NavMenuItem } from './navmenuitem';
43
42
  export { default as OptGroup } from './optgroup';
44
43
  export { default as Option } from './option';
45
44
  export { default as Password } from './password';
@@ -52,9 +51,9 @@ export { default as RadioGroup } from './radiogroup';
52
51
  export { default as ScreenreaderAnnouncer } from './screenreaderannouncer';
53
52
  export { default as Searchfield } from './searchfield';
54
53
  export { default as Select } from './select';
55
- export { default as SideNavigation } from './sidenavigation';
56
54
  export { default as Skeleton } from './skeleton';
57
55
  export { default as Spinner } from './spinner';
56
+ export { default as SideNavigation } from './sidenavigation';
58
57
  export { default as StaticCheckbox } from './staticcheckbox';
59
58
  export { default as StaticRadio } from './staticradio';
60
59
  export { default as StaticToggle } from './statictoggle';
@@ -0,0 +1,43 @@
1
+ import { type EventName } from '@lit/react';
2
+ import Component from '../../components/navmenuitem';
3
+ /**
4
+ * `mdc-navmenuitem` is a menuitem styled to work as a navigation tab.
5
+ * It supports a leading icon, optional badge and dynamic text rendering.
6
+ *
7
+ * Note: `mdc-navmenuitem` is intended to be used inside `mdc-menubar` as part of the sideNavigation
8
+ * component. Its structure, spacing, and interactions are designed to align with
9
+ * the visual and functional requirements of side navigation layouts.
10
+ *
11
+ * @tagname mdc-navmenuitem
12
+ *
13
+ * @dependency mdc-icon
14
+ * @dependency mdc-text
15
+ * @dependency mdc-badge
16
+ * @dependency mdc-tooltip
17
+ *
18
+ * @event click - (React: onClick) This event is dispatched when the navmenuitem is clicked.
19
+ * @event keydown - (React: onKeyDown) This event is dispatched when a key is pressed down on the navmenuitem.
20
+ * @event keyup - (React: onKeyUp) This event is dispatched when a key is released on the navmenuitem.
21
+ * @event focus - (React: onFocus) This event is dispatched when the navmenuitem receives focus.
22
+ * @event activechange - (React: onActiveChange) Dispatched when the active state of the navmenuitem changes.
23
+ *
24
+ * @cssproperty --mdc-navmenuitem-color - Text color of the navmenuitem in its normal state.
25
+ * @cssproperty --mdc-navmenuitem-border-color - Border color of the navmenuitem in its normal state.
26
+ * @cssproperty --mdc-navmenuitem-disabled-color - Text color of the navmenuitem when disabled.
27
+ * @cssproperty --mdc-navmenuitem-expanded-width - Width of the navmenuitem when expanded.
28
+ * @cssproperty --mdc-navmenuitem-hover-background-color - Background color of the navmenuitem when hovered.
29
+ * @cssproperty --mdc-navmenuitem-hover-active-background-color - Background color of the active navmenuitem when hovered.
30
+ * @cssproperty --mdc-navmenuitem-pressed-background-color - Background color of the navmenuitem when pressed.
31
+ * @cssproperty --mdc-navmenuitem-pressed-active-background-color - Background color of the active navmenuitem when pressed.
32
+ * @cssproperty --mdc-navmenuitem-disabled-background-color - Background color of the navmenuitem when disabled.
33
+ * @cssproperty --mdc-navmenuitem-disabled-active-background-color - Background color of the active navmenuitem when disabled.
34
+ * @cssproperty --mdc-navmenuitem-rest-active-background-color - Background color of the active nav item in its rest state.
35
+ */
36
+ declare const reactWrapper: import("@lit/react").ReactWebComponent<Component, {
37
+ onActiveChange: EventName<Event>;
38
+ onClick: EventName<MouseEvent>;
39
+ onKeyDown: EventName<KeyboardEvent>;
40
+ onKeyUp: EventName<KeyboardEvent>;
41
+ onFocus: EventName<FocusEvent>;
42
+ }>;
43
+ export default reactWrapper;
@@ -0,0 +1,51 @@
1
+ import * as React from 'react';
2
+ import { createComponent } from '@lit/react';
3
+ import Component from '../../components/navmenuitem';
4
+ import { TAG_NAME } from '../../components/navmenuitem/navmenuitem.constants';
5
+ /**
6
+ * `mdc-navmenuitem` is a menuitem styled to work as a navigation tab.
7
+ * It supports a leading icon, optional badge and dynamic text rendering.
8
+ *
9
+ * Note: `mdc-navmenuitem` is intended to be used inside `mdc-menubar` as part of the sideNavigation
10
+ * component. Its structure, spacing, and interactions are designed to align with
11
+ * the visual and functional requirements of side navigation layouts.
12
+ *
13
+ * @tagname mdc-navmenuitem
14
+ *
15
+ * @dependency mdc-icon
16
+ * @dependency mdc-text
17
+ * @dependency mdc-badge
18
+ * @dependency mdc-tooltip
19
+ *
20
+ * @event click - (React: onClick) This event is dispatched when the navmenuitem is clicked.
21
+ * @event keydown - (React: onKeyDown) This event is dispatched when a key is pressed down on the navmenuitem.
22
+ * @event keyup - (React: onKeyUp) This event is dispatched when a key is released on the navmenuitem.
23
+ * @event focus - (React: onFocus) This event is dispatched when the navmenuitem receives focus.
24
+ * @event activechange - (React: onActiveChange) Dispatched when the active state of the navmenuitem changes.
25
+ *
26
+ * @cssproperty --mdc-navmenuitem-color - Text color of the navmenuitem in its normal state.
27
+ * @cssproperty --mdc-navmenuitem-border-color - Border color of the navmenuitem in its normal state.
28
+ * @cssproperty --mdc-navmenuitem-disabled-color - Text color of the navmenuitem when disabled.
29
+ * @cssproperty --mdc-navmenuitem-expanded-width - Width of the navmenuitem when expanded.
30
+ * @cssproperty --mdc-navmenuitem-hover-background-color - Background color of the navmenuitem when hovered.
31
+ * @cssproperty --mdc-navmenuitem-hover-active-background-color - Background color of the active navmenuitem when hovered.
32
+ * @cssproperty --mdc-navmenuitem-pressed-background-color - Background color of the navmenuitem when pressed.
33
+ * @cssproperty --mdc-navmenuitem-pressed-active-background-color - Background color of the active navmenuitem when pressed.
34
+ * @cssproperty --mdc-navmenuitem-disabled-background-color - Background color of the navmenuitem when disabled.
35
+ * @cssproperty --mdc-navmenuitem-disabled-active-background-color - Background color of the active navmenuitem when disabled.
36
+ * @cssproperty --mdc-navmenuitem-rest-active-background-color - Background color of the active nav item in its rest state.
37
+ */
38
+ const reactWrapper = createComponent({
39
+ tagName: TAG_NAME,
40
+ elementClass: Component,
41
+ react: React,
42
+ events: {
43
+ onActiveChange: 'activechange',
44
+ onClick: 'click',
45
+ onKeyDown: 'keydown',
46
+ onKeyUp: 'keyup',
47
+ onFocus: 'focus',
48
+ },
49
+ displayName: 'NavMenuItem',
50
+ });
51
+ export default reactWrapper;
@@ -8,20 +8,20 @@ import Component from '../../components/sidenavigation';
8
8
  * - Supports four layout variants: `fixed-collapsed`, `fixed-expanded`, `flexible`, and `hidden`
9
9
  * - Toggleable expand/collapse behavior
10
10
  * - Displays brand logo and customer name
11
- * - Serves as a context provider for descendant components - `mdc-navitemlist` and `mdc-navitem`
11
+ * - Serves as a context provider for descendant components - `mdc-menubar` and `mdc-navmenuitem`
12
12
  *
13
13
  * ### Usage:
14
- * In a sidenavigation, navitems can be used in the following ways:
14
+ * In a sidenavigation, navmenuitems can be used in the following ways:
15
15
  *
16
- * 1. **Simple navitem** – No submenu or interaction beyond selection.
16
+ * 1. **Simple navmenuitem** – No submenu or interaction beyond selection.
17
17
  *
18
- * 2. **Navitem with submenu**:
19
- * - Provide an `id` on the `mdc-navitem`
20
- * - Set the `triggerId` on the corresponding `mdc-menupopover` to match the navitem's `id`
18
+ * 2. **NavMenuItem with submenu**:
19
+ * - Provide an `id` on the `mdc-navmenuitem`
20
+ * - Set the `triggerId` on the corresponding `mdc-menupopover` to match the navmenuitem's `id`
21
21
  * - Set `parent-nav-tooltip-text` with appropriate text that will display when a child menu item
22
22
  * inside the nested menupopover is active, conveying which submenu item is currently selected
23
23
  *
24
- * 3. **Actionable navitem (no submenu)**:
24
+ * 3. **Actionable navmenuitem (no submenu)**:
25
25
  * - Performs an action such as navigation or alert trigger
26
26
  * - Set `disable-aria-current="true"` to maintain visual active state without navigation behavior
27
27
  *
@@ -31,15 +31,16 @@ import Component from '../../components/sidenavigation';
31
31
  * - For the brand logo, use an informative icon. Refer to `Momentum Informative Icons`
32
32
  *
33
33
  * #### Accessibility Notes:
34
- * - Always provide meaningful `aria-label` attributes for both `mdc-navitem` and `mdc-navitemlist`
34
+ * - Always provide meaningful `aria-label` attributes for both `mdc-navmenuitem` and `mdc-menubar`
35
35
  * to ensure screen reader support
36
36
  * - Set `grabber-btn-aria-label` to provide accessible labels for the expand/collapse grabber button
37
37
  *
38
38
  * @dependency mdc-text
39
39
  * @dependency mdc-button
40
40
  * @dependency mdc-divider
41
+ * @dependency mdc-menubar
41
42
  *
42
- * @event activechange - (React: onActiveChange) Dispatched when the active state of the navitem changes.
43
+ * @event activechange - (React: onActiveChange) Dispatched when the active state of the navmenuitem changes.
43
44
  *
44
45
  * @tagname mdc-sidenavigation
45
46
  *
@@ -10,20 +10,20 @@ import { TAG_NAME } from '../../components/sidenavigation/sidenavigation.constan
10
10
  * - Supports four layout variants: `fixed-collapsed`, `fixed-expanded`, `flexible`, and `hidden`
11
11
  * - Toggleable expand/collapse behavior
12
12
  * - Displays brand logo and customer name
13
- * - Serves as a context provider for descendant components - `mdc-navitemlist` and `mdc-navitem`
13
+ * - Serves as a context provider for descendant components - `mdc-menubar` and `mdc-navmenuitem`
14
14
  *
15
15
  * ### Usage:
16
- * In a sidenavigation, navitems can be used in the following ways:
16
+ * In a sidenavigation, navmenuitems can be used in the following ways:
17
17
  *
18
- * 1. **Simple navitem** – No submenu or interaction beyond selection.
18
+ * 1. **Simple navmenuitem** – No submenu or interaction beyond selection.
19
19
  *
20
- * 2. **Navitem with submenu**:
21
- * - Provide an `id` on the `mdc-navitem`
22
- * - Set the `triggerId` on the corresponding `mdc-menupopover` to match the navitem's `id`
20
+ * 2. **NavMenuItem with submenu**:
21
+ * - Provide an `id` on the `mdc-navmenuitem`
22
+ * - Set the `triggerId` on the corresponding `mdc-menupopover` to match the navmenuitem's `id`
23
23
  * - Set `parent-nav-tooltip-text` with appropriate text that will display when a child menu item
24
24
  * inside the nested menupopover is active, conveying which submenu item is currently selected
25
25
  *
26
- * 3. **Actionable navitem (no submenu)**:
26
+ * 3. **Actionable navmenuitem (no submenu)**:
27
27
  * - Performs an action such as navigation or alert trigger
28
28
  * - Set `disable-aria-current="true"` to maintain visual active state without navigation behavior
29
29
  *
@@ -33,15 +33,16 @@ import { TAG_NAME } from '../../components/sidenavigation/sidenavigation.constan
33
33
  * - For the brand logo, use an informative icon. Refer to `Momentum Informative Icons`
34
34
  *
35
35
  * #### Accessibility Notes:
36
- * - Always provide meaningful `aria-label` attributes for both `mdc-navitem` and `mdc-navitemlist`
36
+ * - Always provide meaningful `aria-label` attributes for both `mdc-navmenuitem` and `mdc-menubar`
37
37
  * to ensure screen reader support
38
38
  * - Set `grabber-btn-aria-label` to provide accessible labels for the expand/collapse grabber button
39
39
  *
40
40
  * @dependency mdc-text
41
41
  * @dependency mdc-button
42
42
  * @dependency mdc-divider
43
+ * @dependency mdc-menubar
43
44
  *
44
- * @event activechange - (React: onActiveChange) Dispatched when the active state of the navitem changes.
45
+ * @event activechange - (React: onActiveChange) Dispatched when the active state of the navmenuitem changes.
45
46
  *
46
47
  * @tagname mdc-sidenavigation
47
48
  *
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@momentum-design/components",
3
3
  "packageManager": "yarn@3.2.4",
4
- "version": "0.91.1",
4
+ "version": "0.91.2",
5
5
  "engines": {
6
6
  "node": ">=20.0.0",
7
7
  "npm": ">=8.0.0"
@@ -1,8 +0,0 @@
1
- import NavItem from './navitem.component';
2
- import { TAG_NAME } from './navitem.constants';
3
- import '../text';
4
- import '../badge';
5
- import '../icon';
6
- import '../tooltip';
7
- NavItem.register(TAG_NAME);
8
- export default NavItem;
@@ -1,7 +0,0 @@
1
- import NavItemList from './navitemlist.component';
2
- declare global {
3
- interface HTMLElementTagNameMap {
4
- ['mdc-navitemlist']: NavItemList;
5
- }
6
- }
7
- export default NavItemList;
@@ -1,4 +0,0 @@
1
- import NavItemList from './navitemlist.component';
2
- import { TAG_NAME } from './navitemlist.constants';
3
- NavItemList.register(TAG_NAME);
4
- export default NavItemList;
@@ -1,50 +0,0 @@
1
- import type { CSSResult } from 'lit';
2
- import MenuBar from '../menubar/menubar.component';
3
- /**
4
- * `mdc-navitemlist` is a container component used to group multiple mdc-navitem elements into a navigation list.
5
- * It provides the structural foundation for organizing vertical nav items and
6
- * ensures consistent behavior and layout within side navigation patterns.
7
- *
8
- * Note: mdc-navitemlist is typically used within the sidenavigation component.
9
- * @tagname mdc-navitemlist
10
- *
11
- * @slot default - Slot for projecting one or more navigation items, optional section headers and dividers.
12
- */
13
- declare class NavItemList extends MenuBar {
14
- /**
15
- * Determines whether the navItemList is expanded or not.
16
- *
17
- * @internal
18
- */
19
- showLabel?: boolean;
20
- /**
21
- * Aria-label attribute to be set for accessibility
22
- */
23
- ariaLabel: string | null;
24
- /**
25
- * @internal
26
- */
27
- private readonly sideNavigationContext;
28
- connectedCallback(): void;
29
- disconnectedCallback(): void;
30
- protected updated(): void;
31
- /**
32
- * Handle the navItem active change event fired from the nested navItem.
33
- * @internal
34
- * @param event - Custom Event fired from the nested navItem.
35
- */
36
- private handleNestedNavItemActiveChange;
37
- /**
38
- * Matches new navItem with navId.
39
- * @param NavItem - The new active navItem.
40
- *
41
- * @internal
42
- */
43
- private findNav;
44
- /**
45
- * Returns all nested, non-disabled mdc-navitem elements inside this component.
46
- */
47
- private get navItems();
48
- static styles: Array<CSSResult>;
49
- }
50
- export default NavItemList;
@@ -1,89 +0,0 @@
1
- var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
2
- var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
3
- if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
4
- 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;
5
- return c > 3 && r && Object.defineProperty(target, key, r), r;
6
- };
7
- var __metadata = (this && this.__metadata) || function (k, v) {
8
- if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
9
- };
10
- import { property } from 'lit/decorators.js';
11
- import MenuBar from '../menubar/menubar.component';
12
- import providerUtils from '../../utils/provider';
13
- import { TAG_NAME as NAVITEM_TAGNAME } from '../navitem/navitem.constants';
14
- import SideNavigation from '../sidenavigation/sidenavigation.component';
15
- import styles from './navitemlist.styles';
16
- /**
17
- * `mdc-navitemlist` is a container component used to group multiple mdc-navitem elements into a navigation list.
18
- * It provides the structural foundation for organizing vertical nav items and
19
- * ensures consistent behavior and layout within side navigation patterns.
20
- *
21
- * Note: mdc-navitemlist is typically used within the sidenavigation component.
22
- * @tagname mdc-navitemlist
23
- *
24
- * @slot default - Slot for projecting one or more navigation items, optional section headers and dividers.
25
- */
26
- class NavItemList extends MenuBar {
27
- constructor() {
28
- super(...arguments);
29
- /**
30
- * Aria-label attribute to be set for accessibility
31
- */
32
- this.ariaLabel = null;
33
- /**
34
- * @internal
35
- */
36
- this.sideNavigationContext = providerUtils.consume({ host: this, context: SideNavigation.Context });
37
- /**
38
- * Handle the navItem active change event fired from the nested navItem.
39
- * @internal
40
- * @param event - Custom Event fired from the nested navItem.
41
- */
42
- this.handleNestedNavItemActiveChange = (event) => {
43
- var _a;
44
- const newNavItem = this.findNav(this.navItems || [], event.detail.navId);
45
- if ((_a = this.sideNavigationContext) === null || _a === void 0 ? void 0 : _a.value) {
46
- this.sideNavigationContext.value.setCurrentActiveNavItem(newNavItem);
47
- }
48
- };
49
- /**
50
- * Matches new navItem with navId.
51
- * @param NavItem - The new active navItem.
52
- *
53
- * @internal
54
- */
55
- this.findNav = (navs, navId) => navs.find(nav => nav.navId === navId);
56
- }
57
- connectedCallback() {
58
- super.connectedCallback();
59
- this.addEventListener('activechange', this.handleNestedNavItemActiveChange);
60
- }
61
- disconnectedCallback() {
62
- super.disconnectedCallback();
63
- this.removeEventListener('activechange', this.handleNestedNavItemActiveChange);
64
- }
65
- updated() {
66
- var _a;
67
- const context = (_a = this.sideNavigationContext) === null || _a === void 0 ? void 0 : _a.value;
68
- if (!context)
69
- return;
70
- const { expanded } = context;
71
- this.showLabel = expanded;
72
- }
73
- /**
74
- * Returns all nested, non-disabled mdc-navitem elements inside this component.
75
- */
76
- get navItems() {
77
- return Array.from(this.querySelectorAll(`${NAVITEM_TAGNAME}:not([disabled])`));
78
- }
79
- }
80
- NavItemList.styles = [...MenuBar.styles, ...styles];
81
- __decorate([
82
- property({ type: Boolean, reflect: true, attribute: 'show-label' }),
83
- __metadata("design:type", Boolean)
84
- ], NavItemList.prototype, "showLabel", void 0);
85
- __decorate([
86
- property({ type: String, attribute: 'aria-label' }),
87
- __metadata("design:type", Object)
88
- ], NavItemList.prototype, "ariaLabel", void 0);
89
- export default NavItemList;
@@ -1,2 +0,0 @@
1
- declare const TAG_NAME: "mdc-navitemlist";
2
- export { TAG_NAME };
@@ -1,3 +0,0 @@
1
- import utils from '../../utils/tag-name';
2
- const TAG_NAME = utils.constructTagName('navitemlist');
3
- export { TAG_NAME };
@@ -1,2 +0,0 @@
1
- declare const _default: import("lit").CSSResult[];
2
- export default _default;
@@ -1,23 +0,0 @@
1
- import { css } from 'lit';
2
- const styles = css `
3
- :host {
4
- gap: 0.25rem;
5
- }
6
-
7
- :host(:not([show-label])) ::slotted(mdc-text) {
8
- display: none;
9
- }
10
-
11
- :host(:dir(ltr)) ::slotted(mdc-text) {
12
- padding-left: 1.75rem;
13
- }
14
-
15
- :host(:dir(rtl)) ::slotted(mdc-text) {
16
- padding-right: 1.75rem;
17
- }
18
-
19
- ::slotted(mdc-divider) {
20
- margin: 0.75rem 0;
21
- }
22
- `;
23
- export default [styles];
@@ -1,43 +0,0 @@
1
- import { type EventName } from '@lit/react';
2
- import Component from '../../components/navitem';
3
- /**
4
- * `mdc-navitem` is a menuitem styled to work as a navigation tab.
5
- * It supports a leading icon, optional badge and dynamic text rendering.
6
- *
7
- * Note: `mdc-navitem` is intended to be used inside `mdc-navitemlist` as part of the sideNavigation
8
- * component. Its structure, spacing, and interactions are designed to align with
9
- * the visual and functional requirements of side navigation layouts.
10
- *
11
- * @tagname mdc-navitem
12
- *
13
- * @dependency mdc-icon
14
- * @dependency mdc-text
15
- * @dependency mdc-badge
16
- * @dependency mdc-tooltip
17
- *
18
- * @event click - (React: onClick) This event is dispatched when the navitem is clicked.
19
- * @event keydown - (React: onKeyDown) This event is dispatched when a key is pressed down on the navitem.
20
- * @event keyup - (React: onKeyUp) This event is dispatched when a key is released on the navitem.
21
- * @event focus - (React: onFocus) This event is dispatched when the navitem receives focus.
22
- * @event activechange - (React: onActiveChange) Dispatched when the active state of the navitem changes.
23
- *
24
- * @cssproperty --mdc-navitem-color - Text color of the navitem in its normal state.
25
- * @cssproperty --mdc-navitem-border-color - Border color of the navitem in its normal state.
26
- * @cssproperty --mdc-navitem-disabled-color - Text color of the navitem when disabled.
27
- * @cssproperty --mdc-navitem-expanded-width - Width of the navItem when expanded.
28
- * @cssproperty --mdc-navitem-hover-background-color - Background color of the navitem when hovered.
29
- * @cssproperty --mdc-navitem-hover-active-background-color - Background color of the active navitem when hovered.
30
- * @cssproperty --mdc-navitem-pressed-background-color - Background color of the navitem when pressed.
31
- * @cssproperty --mdc-navitem-pressed-active-background-color - Background color of the active navitem when pressed.
32
- * @cssproperty --mdc-navitem-disabled-background-color - Background color of the navitem when disabled.
33
- * @cssproperty --mdc-navitem-disabled-active-background-color - Background color of the active navitem when disabled.
34
- * @cssproperty --mdc-navitem-rest-active-background-color - Background color of the active nav item in its rest state.
35
- */
36
- declare const reactWrapper: import("@lit/react").ReactWebComponent<Component, {
37
- onActiveChange: EventName<Event>;
38
- onClick: EventName<MouseEvent>;
39
- onKeyDown: EventName<KeyboardEvent>;
40
- onKeyUp: EventName<KeyboardEvent>;
41
- onFocus: EventName<FocusEvent>;
42
- }>;
43
- export default reactWrapper;
@@ -1,51 +0,0 @@
1
- import * as React from 'react';
2
- import { createComponent } from '@lit/react';
3
- import Component from '../../components/navitem';
4
- import { TAG_NAME } from '../../components/navitem/navitem.constants';
5
- /**
6
- * `mdc-navitem` is a menuitem styled to work as a navigation tab.
7
- * It supports a leading icon, optional badge and dynamic text rendering.
8
- *
9
- * Note: `mdc-navitem` is intended to be used inside `mdc-navitemlist` as part of the sideNavigation
10
- * component. Its structure, spacing, and interactions are designed to align with
11
- * the visual and functional requirements of side navigation layouts.
12
- *
13
- * @tagname mdc-navitem
14
- *
15
- * @dependency mdc-icon
16
- * @dependency mdc-text
17
- * @dependency mdc-badge
18
- * @dependency mdc-tooltip
19
- *
20
- * @event click - (React: onClick) This event is dispatched when the navitem is clicked.
21
- * @event keydown - (React: onKeyDown) This event is dispatched when a key is pressed down on the navitem.
22
- * @event keyup - (React: onKeyUp) This event is dispatched when a key is released on the navitem.
23
- * @event focus - (React: onFocus) This event is dispatched when the navitem receives focus.
24
- * @event activechange - (React: onActiveChange) Dispatched when the active state of the navitem changes.
25
- *
26
- * @cssproperty --mdc-navitem-color - Text color of the navitem in its normal state.
27
- * @cssproperty --mdc-navitem-border-color - Border color of the navitem in its normal state.
28
- * @cssproperty --mdc-navitem-disabled-color - Text color of the navitem when disabled.
29
- * @cssproperty --mdc-navitem-expanded-width - Width of the navItem when expanded.
30
- * @cssproperty --mdc-navitem-hover-background-color - Background color of the navitem when hovered.
31
- * @cssproperty --mdc-navitem-hover-active-background-color - Background color of the active navitem when hovered.
32
- * @cssproperty --mdc-navitem-pressed-background-color - Background color of the navitem when pressed.
33
- * @cssproperty --mdc-navitem-pressed-active-background-color - Background color of the active navitem when pressed.
34
- * @cssproperty --mdc-navitem-disabled-background-color - Background color of the navitem when disabled.
35
- * @cssproperty --mdc-navitem-disabled-active-background-color - Background color of the active navitem when disabled.
36
- * @cssproperty --mdc-navitem-rest-active-background-color - Background color of the active nav item in its rest state.
37
- */
38
- const reactWrapper = createComponent({
39
- tagName: TAG_NAME,
40
- elementClass: Component,
41
- react: React,
42
- events: {
43
- onActiveChange: 'activechange',
44
- onClick: 'click',
45
- onKeyDown: 'keydown',
46
- onKeyUp: 'keyup',
47
- onFocus: 'focus',
48
- },
49
- displayName: 'NavItem',
50
- });
51
- export default reactWrapper;
@@ -1,13 +0,0 @@
1
- import Component from '../../components/navitemlist';
2
- /**
3
- * `mdc-navitemlist` is a container component used to group multiple mdc-navitem elements into a navigation list.
4
- * It provides the structural foundation for organizing vertical nav items and
5
- * ensures consistent behavior and layout within side navigation patterns.
6
- *
7
- * Note: mdc-navitemlist is typically used within the sidenavigation component.
8
- * @tagname mdc-navitemlist
9
- *
10
- * @slot default - Slot for projecting one or more navigation items, optional section headers and dividers.
11
- */
12
- declare const reactWrapper: import("@lit/react").ReactWebComponent<Component, {}>;
13
- export default reactWrapper;