@momentum-design/components 0.123.5 → 0.124.0

package/dist/custom-elements.json

@@ -513,6 +513,157 @@
         }
       ]
     },
+    {
+      "kind": "javascript-module",
+      "path": "components/accordiongroup/accordiongroup.component.js",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "An accordion group is a vertically stacked set of interactive headings that each contain a header and body content.\nEach heading of the accordion acts as a control that enable users to expand or hide their associated body sections of content.\nAccordions are commonly used to reduce the need to scroll when presenting multiple sections of content on a single page.\n\n- Default Slot: The accordion group component only accepts, `accordion` and `accordionbutton` components as the children, rest are ignored.\n\nThere are three types of variants:\n- Stacked - Each accordion will have a gap of 1.5rem (24px).\n- Borderless - Each accordion will not have any border and the group will also not have any border.\n- Contained - Each accordion will have no gap in between them and the border of the entire accordiongroup will be continuous.\n\nThere are two types of sizes:\n- Small: Small size has a padding of 1rem (16px) for both heading and body sections.\n- Large: Large size has a padding of 1.5rem (24px) for both heading and body sections.\n\nThe variant and size will be applied to all accordions inside this accordion group.\nTo show/expand more than one accordion at any given time, then set `allow-multiple` to `true`. By default, it's `false`.\n\nIf you don't need any controls on your accordion heading, then it's advised to use `accordionbutton` component.\n\nIf the first accordion of the accordion group is expanded by default, then the screen reader might loose focus when toggling the visibilty of the first accordion.",
+          "name": "AccordionGroup",
+          "cssProperties": [
+            {
+              "description": "The border color of the entire accordiongroup",
+              "name": "--mdc-accordiongroup-border-color"
+            }
+          ],
+          "slots": [
+            {
+              "description": "The default slot can contain the `accordion` or `accordionbutton` components.",
+              "name": "default"
+            }
+          ],
+          "members": [
+            {
+              "kind": "field",
+              "name": "size",
+              "type": {
+                "text": "Size"
+              },
+              "description": "The size of the accordion item.",
+              "default": "'small'",
+              "attribute": "size",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "variant",
+              "type": {
+                "text": "Variant"
+              },
+              "description": "The variant of the accordion item. Based on the variant, the styling of the accordion gets changed.",
+              "default": "'stacked'",
+              "attribute": "variant",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "allowMultiple",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "If true, multiple accordion items can be visible at the same time.",
+              "attribute": "allow-multiple",
+              "reflects": true
+            },
+            {
+              "kind": "method",
+              "name": "handleAccordionExpanded",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "event",
+                  "type": {
+                    "text": "Event"
+                  },
+                  "description": "The event object from the 'shown' event."
+                }
+              ],
+              "description": "Handles the 'shown' event for accordion items.\nIf `allowMultiple` is false, ensures that only one accordion item\nremains expanded by collapsing all other expanded items when a new item is expanded."
+            },
+            {
+              "kind": "method",
+              "name": "setChildrenAccordionAttributes",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "attributeName",
+                  "type": {
+                    "text": "string"
+                  },
+                  "description": "The name of the attribute to set."
+                },
+                {
+                  "name": "attributeValue",
+                  "type": {
+                    "text": "string"
+                  },
+                  "description": "The value to set the attribute to."
+                }
+              ],
+              "description": "Sets the given attribute on all child accordion or accordionbutton components."
+            }
+          ],
+          "attributes": [
+            {
+              "name": "size",
+              "type": {
+                "text": "Size"
+              },
+              "description": "The size of the accordion item.",
+              "default": "'small'",
+              "fieldName": "size"
+            },
+            {
+              "name": "variant",
+              "type": {
+                "text": "Variant"
+              },
+              "description": "The variant of the accordion item. Based on the variant, the styling of the accordion gets changed.",
+              "default": "'stacked'",
+              "fieldName": "variant"
+            },
+            {
+              "name": "allow-multiple",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "If true, multiple accordion items can be visible at the same time.",
+              "fieldName": "allowMultiple"
+            }
+          ],
+          "superclass": {
+            "name": "Component",
+            "module": "/src/models"
+          },
+          "tagName": "mdc-accordiongroup",
+          "jsDoc": "/**\n * An accordion group is a vertically stacked set of interactive headings that each contain a header and body content.\n * Each heading of the accordion acts as a control that enable users to expand or hide their associated body sections of content.\n * Accordions are commonly used to reduce the need to scroll when presenting multiple sections of content on a single page.\n *\n * - Default Slot: The accordion group component only accepts, `accordion` and `accordionbutton` components as the children, rest are ignored.\n *\n * There are three types of variants:\n * - Stacked - Each accordion will have a gap of 1.5rem (24px).\n * - Borderless - Each accordion will not have any border and the group will also not have any border.\n * - Contained - Each accordion will have no gap in between them and the border of the entire accordiongroup will be continuous.\n *\n * There are two types of sizes:\n * - Small: Small size has a padding of 1rem (16px) for both heading and body sections.\n * - Large: Large size has a padding of 1.5rem (24px) for both heading and body sections.\n *\n * The variant and size will be applied to all accordions inside this accordion group.\n * To show/expand more than one accordion at any given time, then set `allow-multiple` to `true`. By default, it's `false`.\n *\n * If you don't need any controls on your accordion heading, then it's advised to use `accordionbutton` component.\n *\n * If the first accordion of the accordion group is expanded by default, then the screen reader might loose focus when toggling the visibilty of the first accordion.\n *\n * @tagname mdc-accordiongroup\n *\n * @slot default - The default slot can contain the `accordion` or `accordionbutton` components.\n *\n * @cssproperty --mdc-accordiongroup-border-color - The border color of the entire accordiongroup\n */",
+          "customElement": true
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "default",
+          "declaration": {
+            "name": "AccordionGroup",
+            "module": "components/accordiongroup/accordiongroup.component.js"
+          }
+        }
+      ]
+    },
     {
       "kind": "javascript-module",
       "path": "components/accordionbutton/accordionbutton.component.js",
@@ -853,157 +1004,6 @@
         }
       ]
     },
-    {
-      "kind": "javascript-module",
-      "path": "components/accordiongroup/accordiongroup.component.js",
-      "declarations": [
-        {
-          "kind": "class",
-          "description": "An accordion group is a vertically stacked set of interactive headings that each contain a header and body content.\nEach heading of the accordion acts as a control that enable users to expand or hide their associated body sections of content.\nAccordions are commonly used to reduce the need to scroll when presenting multiple sections of content on a single page.\n\n- Default Slot: The accordion group component only accepts, `accordion` and `accordionbutton` components as the children, rest are ignored.\n\nThere are three types of variants:\n- Stacked - Each accordion will have a gap of 1.5rem (24px).\n- Borderless - Each accordion will not have any border and the group will also not have any border.\n- Contained - Each accordion will have no gap in between them and the border of the entire accordiongroup will be continuous.\n\nThere are two types of sizes:\n- Small: Small size has a padding of 1rem (16px) for both heading and body sections.\n- Large: Large size has a padding of 1.5rem (24px) for both heading and body sections.\n\nThe variant and size will be applied to all accordions inside this accordion group.\nTo show/expand more than one accordion at any given time, then set `allow-multiple` to `true`. By default, it's `false`.\n\nIf you don't need any controls on your accordion heading, then it's advised to use `accordionbutton` component.\n\nIf the first accordion of the accordion group is expanded by default, then the screen reader might loose focus when toggling the visibilty of the first accordion.",
-          "name": "AccordionGroup",
-          "cssProperties": [
-            {
-              "description": "The border color of the entire accordiongroup",
-              "name": "--mdc-accordiongroup-border-color"
-            }
-          ],
-          "slots": [
-            {
-              "description": "The default slot can contain the `accordion` or `accordionbutton` components.",
-              "name": "default"
-            }
-          ],
-          "members": [
-            {
-              "kind": "field",
-              "name": "size",
-              "type": {
-                "text": "Size"
-              },
-              "description": "The size of the accordion item.",
-              "default": "'small'",
-              "attribute": "size",
-              "reflects": true
-            },
-            {
-              "kind": "field",
-              "name": "variant",
-              "type": {
-                "text": "Variant"
-              },
-              "description": "The variant of the accordion item. Based on the variant, the styling of the accordion gets changed.",
-              "default": "'stacked'",
-              "attribute": "variant",
-              "reflects": true
-            },
-            {
-              "kind": "field",
-              "name": "allowMultiple",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "If true, multiple accordion items can be visible at the same time.",
-              "attribute": "allow-multiple",
-              "reflects": true
-            },
-            {
-              "kind": "method",
-              "name": "handleAccordionExpanded",
-              "privacy": "private",
-              "return": {
-                "type": {
-                  "text": "void"
-                }
-              },
-              "parameters": [
-                {
-                  "name": "event",
-                  "type": {
-                    "text": "Event"
-                  },
-                  "description": "The event object from the 'shown' event."
-                }
-              ],
-              "description": "Handles the 'shown' event for accordion items.\nIf `allowMultiple` is false, ensures that only one accordion item\nremains expanded by collapsing all other expanded items when a new item is expanded."
-            },
-            {
-              "kind": "method",
-              "name": "setChildrenAccordionAttributes",
-              "privacy": "private",
-              "return": {
-                "type": {
-                  "text": "void"
-                }
-              },
-              "parameters": [
-                {
-                  "name": "attributeName",
-                  "type": {
-                    "text": "string"
-                  },
-                  "description": "The name of the attribute to set."
-                },
-                {
-                  "name": "attributeValue",
-                  "type": {
-                    "text": "string"
-                  },
-                  "description": "The value to set the attribute to."
-                }
-              ],
-              "description": "Sets the given attribute on all child accordion or accordionbutton components."
-            }
-          ],
-          "attributes": [
-            {
-              "name": "size",
-              "type": {
-                "text": "Size"
-              },
-              "description": "The size of the accordion item.",
-              "default": "'small'",
-              "fieldName": "size"
-            },
-            {
-              "name": "variant",
-              "type": {
-                "text": "Variant"
-              },
-              "description": "The variant of the accordion item. Based on the variant, the styling of the accordion gets changed.",
-              "default": "'stacked'",
-              "fieldName": "variant"
-            },
-            {
-              "name": "allow-multiple",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "If true, multiple accordion items can be visible at the same time.",
-              "fieldName": "allowMultiple"
-            }
-          ],
-          "superclass": {
-            "name": "Component",
-            "module": "/src/models"
-          },
-          "tagName": "mdc-accordiongroup",
-          "jsDoc": "/**\n * An accordion group is a vertically stacked set of interactive headings that each contain a header and body content.\n * Each heading of the accordion acts as a control that enable users to expand or hide their associated body sections of content.\n * Accordions are commonly used to reduce the need to scroll when presenting multiple sections of content on a single page.\n *\n * - Default Slot: The accordion group component only accepts, `accordion` and `accordionbutton` components as the children, rest are ignored.\n *\n * There are three types of variants:\n * - Stacked - Each accordion will have a gap of 1.5rem (24px).\n * - Borderless - Each accordion will not have any border and the group will also not have any border.\n * - Contained - Each accordion will have no gap in between them and the border of the entire accordiongroup will be continuous.\n *\n * There are two types of sizes:\n * - Small: Small size has a padding of 1rem (16px) for both heading and body sections.\n * - Large: Large size has a padding of 1.5rem (24px) for both heading and body sections.\n *\n * The variant and size will be applied to all accordions inside this accordion group.\n * To show/expand more than one accordion at any given time, then set `allow-multiple` to `true`. By default, it's `false`.\n *\n * If you don't need any controls on your accordion heading, then it's advised to use `accordionbutton` component.\n *\n * If the first accordion of the accordion group is expanded by default, then the screen reader might loose focus when toggling the visibilty of the first accordion.\n *\n * @tagname mdc-accordiongroup\n *\n * @slot default - The default slot can contain the `accordion` or `accordionbutton` components.\n *\n * @cssproperty --mdc-accordiongroup-border-color - The border color of the entire accordiongroup\n */",
-          "customElement": true
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "default",
-          "declaration": {
-            "name": "AccordionGroup",
-            "module": "components/accordiongroup/accordiongroup.component.js"
-          }
-        }
-      ]
-    },
     {
       "kind": "javascript-module",
       "path": "components/alertchip/alertchip.component.js",
@@ -29170,6 +29170,24 @@
           "kind": "class",
           "description": "`mdc-menusection` is a container element used to group a set of menu items.\n\nThis component supports a mix of `menuitem`, `menuitemcheckbox`, and `menuitemradio` components.\n\n- If multiple `menuitemradio` components are slotted into the section, the group enforces a single-selection rule:\n  only one radio item can be selected at a time.\n- If `menuitemcheckbox` components are included, their checked state can be toggled independently.",
           "name": "MenuSection",
+          "cssProperties": [
+            {
+              "description": "Sets the margin block of the divider.",
+              "name": "--mdc-menusection-divider-margin-block"
+            },
+            {
+              "description": "Sets the gap between items in the menusection.",
+              "name": "--mdc-menusection-gap"
+            },
+            {
+              "description": "Sets the width of the divider.",
+              "name": "--mdc-menusection-divider-width"
+            },
+            {
+              "description": "Sets the padding of the header, if present.",
+              "name": "--mdc-menusection-header-padding"
+            }
+          ],
           "cssParts": [
             {
               "description": "The header of the menusection.",
@@ -29311,7 +29329,7 @@
             "module": "/src/models"
           },
           "tagName": "mdc-menusection",
-          "jsDoc": "/**\n * `mdc-menusection` is a container element used to group a set of menu items.\n *\n * This component supports a mix of `menuitem`, `menuitemcheckbox`, and `menuitemradio` components.\n *\n * - If multiple `menuitemradio` components are slotted into the section, the group enforces a single-selection rule:\n *   only one radio item can be selected at a time.\n * - If `menuitemcheckbox` components are included, their checked state can be toggled independently.\n *\n * @tagname mdc-menusection\n *\n * @slot - Default slot for inserting `menuitem`, `menuitemcheckbox`, or `menuitemradio`\n *\n * @event change - (React: onChange) This event is dispatched when a `menuitemcheckbox`, or `menuitemradio` changes.\n * @event action - (React: onAction) This event is dispatched when a `menuitem` selected.\n *\n * @csspart header - The header of the menusection.\n * @csspart align-header - The header of the menusection when it is aligned to the start.\n * @csspart container - The container of the menusection.\n * @csspart divider - The divider of the menusection.\n */",
+          "jsDoc": "/**\n * `mdc-menusection` is a container element used to group a set of menu items.\n *\n * This component supports a mix of `menuitem`, `menuitemcheckbox`, and `menuitemradio` components.\n *\n * - If multiple `menuitemradio` components are slotted into the section, the group enforces a single-selection rule:\n *   only one radio item can be selected at a time.\n * - If `menuitemcheckbox` components are included, their checked state can be toggled independently.\n *\n * @tagname mdc-menusection\n *\n * @slot - Default slot for inserting `menuitem`, `menuitemcheckbox`, or `menuitemradio`\n *\n * @event change - (React: onChange) This event is dispatched when a `menuitemcheckbox`, or `menuitemradio` changes.\n * @event action - (React: onAction) This event is dispatched when a `menuitem` selected.\n *\n * @csspart header - The header of the menusection.\n * @csspart align-header - The header of the menusection when it is aligned to the start.\n * @csspart container - The container of the menusection.\n * @csspart divider - The divider of the menusection.\n *\n * @cssproperty --mdc-menusection-divider-margin-block - Sets the margin block of the divider.\n * @cssproperty --mdc-menusection-gap - Sets the gap between items in the menusection.\n * @cssproperty --mdc-menusection-divider-width - Sets the width of the divider.\n * @cssproperty --mdc-menusection-header-padding - Sets the padding of the header, if present.\n */",
           "customElement": true
         }
       ],
@@ -29332,24 +29350,44 @@
       "declarations": [
         {
           "kind": "class",
-          "description": "`mdc-navmenuitem` is a menuitem styled to work as a navigation tab.\nIt supports a leading icon, optional badge and dynamic text rendering.\n\nNote: `mdc-navmenuitem` is intended to be used inside `mdc-menubar` as part of the sideNavigation\ncomponent. Its structure, spacing, and interactions are designed to align with\nthe visual and functional requirements of side navigation layouts.\n\nBy providing the tooltip-text attribute, a tooltip will be displayed on hover of the navmenuitem. This tooltip is useful when an active navmenuitem is present within a submenu of the sidenavigation component.",
+          "description": "`mdc-navmenuitem` is a menuitem styled to work as a navigation tab.\nIt supports a leading icon, optional badge and dynamic text rendering.\n\nThe navmenuitem can be in an active or inactive state, indicating whether it is currently selected.\n\nNote: `mdc-navmenuitem` is intended to be used inside `mdc-menubar` as part of the sideNavigation\ncomponent. Its structure, spacing, and interactions are designed to align with\nthe visual and functional requirements of side navigation layouts.\n\nBy providing the tooltip-text attribute, a tooltip will be displayed on hover of the navmenuitem. This tooltip is useful when an active navmenuitem is present within a submenu of the sidenavigation component.",
           "name": "NavMenuItem",
           "cssProperties": [
             {
-              "description": "Text color of the navmenuitem in its normal state.",
-              "name": "--mdc-navmenuitem-color"
+              "description": "Width of the navmenuitem when expanded.",
+              "name": "--mdc-navmenuitem-in-sidenav-expanded-width"
+            },
+            {
+              "description": "Left margin of the navmenuitem, when expanded.",
+              "name": "--mdc-navmenuitem-in-sidenav-expanded-margin-left"
             },
             {
-              "description": "Border color of the navmenuitem in its normal state.",
-              "name": "--mdc-navmenuitem-border-color"
+              "description": "Right margin of the navmenuitem, when expanded.",
+              "name": "--mdc-navmenuitem-in-sidenav-expanded-margin-right"
+            },
+            {
+              "description": "Width of the navmenuitem when collapsed.",
+              "name": "--mdc-navmenuitem-in-sidenav-collapsed-width"
+            },
+            {
+              "description": "Left margin of the navmenuitem, when collapsed.",
+              "name": "--mdc-navmenuitem-in-sidenav-collapsed-margin-left"
+            },
+            {
+              "description": "Right margin of the navmenuitem, when collapsed.",
+              "name": "--mdc-navmenuitem-in-sidenav-collapsed-margin-right"
+            },
+            {
+              "description": "Text color of the navmenuitem in its normal state.",
+              "name": "--mdc-navmenuitem-color"
             },
             {
               "description": "Text color of the navmenuitem when disabled.",
               "name": "--mdc-navmenuitem-disabled-color"
             },
             {
-              "description": "Width of the navmenuitem when expanded.",
-              "name": "--mdc-navmenuitem-expanded-width"
+              "description": "Background color of the active nav item in its rest state.",
+              "name": "--mdc-navmenuitem-rest-active-background-color"
             },
             {
               "description": "Background color of the navmenuitem when hovered.",
@@ -29375,10 +29413,6 @@
               "description": "Background color of the active navmenuitem when disabled.",
               "name": "--mdc-navmenuitem-disabled-active-background-color"
             },
-            {
-              "description": "Background color of the active nav item in its rest state.",
-              "name": "--mdc-navmenuitem-rest-active-background-color"
-            },
             {
               "description": "Allows customization of the default background color.",
               "name": "--mdc-listitem-default-background-color",
@@ -29549,7 +29583,7 @@
               "type": {
                 "text": "boolean | undefined"
               },
-              "description": "The navmenuitem's active state indicates whether it is currently toggled on (active) or off (inactive).\nWhen the active state is true, the navmenuitem is considered to be in an active state, meaning it is toggled on.\nConversely, when the active state is false, the navmenuitem is in an inactive state, indicating it is toggled off.",
+              "description": "The navmenuitem's active state indicates whether it is currently toggled on (active) or off (inactive).\nIf cannotActivate is set to true, the surrounding SideNavigation will\nnot set this property when the navmenuitem is clicked.",
               "default": "undefined",
               "attribute": "active",
               "reflects": true,
@@ -29558,6 +29592,27 @@
                 "module": "components/listitem/listitem.component.js"
               }
             },
+            {
+              "kind": "field",
+              "name": "cannotActivate",
+              "type": {
+                "text": "boolean | undefined"
+              },
+              "description": "When set to true, prevents the navmenuitem from being activated.\nThis is useful for cases where the navmenuitem is used as a button\nor link, where not the content on the current page is changing.\nBy default this is set to false, making the navmenuitem activatable (= aria-current gets set when active).",
+              "default": "false",
+              "attribute": "cannot-activate",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "iconName",
+              "type": {
+                "text": "IconNames | undefined"
+              },
+              "description": "Name of the leading icon (= filename).\n\nIf no `icon-name` is provided, no icon will be rendered.",
+              "attribute": "icon-name",
+              "reflects": true
+            },
             {
               "kind": "field",
               "name": "badgeType",
@@ -29600,6 +29655,17 @@
               "attribute": "nav-id",
               "reflects": true
             },
+            {
+              "kind": "field",
+              "name": "showLabel",
+              "type": {
+                "text": "boolean | undefined"
+              },
+              "description": "Determines whether the nav item is expanded or not.\n\nIf used in SideNavigation, this property is automatically managed by the SideNavigation component.",
+              "default": "undefined",
+              "attribute": "show-label",
+              "reflects": true
+            },
             {
               "kind": "field",
               "name": "ariaLabel",
@@ -29616,7 +29682,8 @@
               "type": {
                 "text": "boolean | undefined"
               },
-              "description": "When set to true, prevents the automatic setting of the `aria-current` attribute on the navmenuitem\nwhen it becomes active. This is useful for cases where you want to maintain the visual active styling\nbut need to handle aria-current attribute differently or not at all.\nThe active button styling will still be applied regardless of this setting.",
+              "description": "When set to true, prevents the automatic setting of the `aria-current` attribute on the navmenuitem\nwhen it becomes active. This is useful for cases where you want to maintain the visual active styling\nbut need to handle aria-current attribute differently or not at all.\nThe active button styling will still be applied regardless of this setting.\n\nIf you also want to prevent activation, use the `cannot-activate` property instead.",
+              "default": "undefined",
               "attribute": "disable-aria-current",
               "reflects": true
             },
@@ -29626,14 +29693,52 @@
               "type": {
                 "text": "string | undefined"
               },
-              "description": "The tooltip text is displayed on hover of the list item.",
+              "description": "The tooltip text is displayed on hover of the nav item.\nWill only be shown when the `show-label` property is false\n(i.e., when the nav item is collapsed).",
               "attribute": "tooltip-text",
               "reflects": true
             },
             {
-              "kind": "method",
-              "name": "removeTooltip",
-              "privacy": "private"
+              "kind": "field",
+              "name": "tooltipPlacement",
+              "type": {
+                "text": "PopoverPlacement"
+              },
+              "default": "'right'",
+              "description": "The placement of the tooltip relative to the nav item.",
+              "attribute": "tooltip-placement",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "tooltipAppearance",
+              "type": {
+                "text": "'when-collapsed' | 'always'"
+              },
+              "default": "'when-collapsed'",
+              "description": "The appearance behavior of the tooltip.\nOptions are 'when-collapsed' (default) or 'always'.",
+              "attribute": "tooltip-appearance",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "tooltipBoundaryPadding",
+              "type": {
+                "text": "number | undefined"
+              },
+              "description": "The boundary padding for the tooltip.\nThis defines the minimum distance in pixels between the tooltip and the edges of the viewport.",
+              "default": "0",
+              "attribute": "tooltip-boundary-padding",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "isActiveParentTooltipText",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "Tooltip text shown when this parent NavItem has a active child navitem.\nThis is useful for nested navmenuitems within a sidenavigation.\n\nMake sure to include what was normally used as the `tooltip-text` in this property.\ni.e. `Messaging, contains active navmenuitem`",
+              "attribute": "is-active-parent-tooltip-text",
+              "reflects": true
             },
             {
               "kind": "method",
@@ -29645,6 +29750,11 @@
                 }
               }
             },
+            {
+              "kind": "method",
+              "name": "removeTooltip",
+              "privacy": "private"
+            },
             {
               "kind": "method",
               "name": "isNested",
@@ -29668,34 +29778,23 @@
             },
             {
               "kind": "method",
-              "name": "renderTextLabel",
+              "name": "getFilledIconName",
               "privacy": "private",
-              "parameters": [
-                {
-                  "name": "label",
-                  "type": {
-                    "text": "string | undefined"
-                  }
-                }
-              ]
-            },
-            {
-              "kind": "method",
-              "name": "renderArrowIcon",
-              "privacy": "private",
-              "parameters": [
-                {
-                  "name": "showLabel",
-                  "type": {
-                    "text": "boolean | undefined"
-                  }
+              "return": {
+                "type": {
+                  "text": "IconNames | undefined"
                 }
-              ]
+              }
             },
             {
               "kind": "method",
               "name": "renderBadge",
               "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "TemplateResult | typeof nothing"
+                }
+              },
               "parameters": [
                 {
                   "name": "showLabel",
@@ -29705,19 +29804,6 @@
                 }
               ]
             },
-            {
-              "kind": "field",
-              "name": "iconName",
-              "type": {
-                "text": "IconNames | undefined"
-              },
-              "description": "Name of the icon (= filename).\n\nIf no `icon-name` is provided, no icon will be rendered.",
-              "attribute": "icon-name",
-              "inheritedFrom": {
-                "name": "IconNameMixin",
-                "module": "utils/mixins/IconNameMixin.js"
-              }
-            },
             {
               "kind": "field",
               "name": "arrowPosition",
@@ -30219,7 +30305,7 @@
               "type": {
                 "text": "boolean | undefined"
               },
-              "description": "The navmenuitem's active state indicates whether it is currently toggled on (active) or off (inactive).\nWhen the active state is true, the navmenuitem is considered to be in an active state, meaning it is toggled on.\nConversely, when the active state is false, the navmenuitem is in an inactive state, indicating it is toggled off.",
+              "description": "The navmenuitem's active state indicates whether it is currently toggled on (active) or off (inactive).\nIf cannotActivate is set to true, the surrounding SideNavigation will\nnot set this property when the navmenuitem is clicked.",
               "default": "undefined",
               "fieldName": "active",
               "inheritedFrom": {
@@ -30227,6 +30313,23 @@
                 "module": "src/components/listitem/listitem.component.ts"
               }
             },
+            {
+              "name": "cannot-activate",
+              "type": {
+                "text": "boolean | undefined"
+              },
+              "description": "When set to true, prevents the navmenuitem from being activated.\nThis is useful for cases where the navmenuitem is used as a button\nor link, where not the content on the current page is changing.\nBy default this is set to false, making the navmenuitem activatable (= aria-current gets set when active).",
+              "default": "false",
+              "fieldName": "cannotActivate"
+            },
+            {
+              "name": "icon-name",
+              "type": {
+                "text": "IconNames | undefined"
+              },
+              "description": "Name of the leading icon (= filename).\n\nIf no `icon-name` is provided, no icon will be rendered.",
+              "fieldName": "iconName"
+            },
             {
               "name": "badge-type",
               "type": {
@@ -30261,6 +30364,15 @@
               "default": "undefined",
               "fieldName": "navId"
             },
+            {
+              "name": "show-label",
+              "type": {
+                "text": "boolean | undefined"
+              },
+              "description": "Determines whether the nav item is expanded or not.\n\nIf used in SideNavigation, this property is automatically managed by the SideNavigation component.",
+              "default": "undefined",
+              "fieldName": "showLabel"
+            },
             {
               "name": "aria-label",
               "type": {
@@ -30275,7 +30387,8 @@
               "type": {
                 "text": "boolean | undefined"
               },
-              "description": "When set to true, prevents the automatic setting of the `aria-current` attribute on the navmenuitem\nwhen it becomes active. This is useful for cases where you want to maintain the visual active styling\nbut need to handle aria-current attribute differently or not at all.\nThe active button styling will still be applied regardless of this setting.",
+              "description": "When set to true, prevents the automatic setting of the `aria-current` attribute on the navmenuitem\nwhen it becomes active. This is useful for cases where you want to maintain the visual active styling\nbut need to handle aria-current attribute differently or not at all.\nThe active button styling will still be applied regardless of this setting.\n\nIf you also want to prevent activation, use the `cannot-activate` property instead.",
+              "default": "undefined",
               "fieldName": "disableAriaCurrent"
             },
             {
@@ -30283,20 +30396,43 @@
               "type": {
                 "text": "string | undefined"
               },
-              "description": "The tooltip text is displayed on hover of the list item.",
+              "description": "The tooltip text is displayed on hover of the nav item.\nWill only be shown when the `show-label` property is false\n(i.e., when the nav item is collapsed).",
               "fieldName": "tooltipText"
             },
             {
-              "name": "icon-name",
+              "name": "tooltip-placement",
               "type": {
-                "text": "IconNames | undefined"
+                "text": "PopoverPlacement"
               },
-              "description": "Name of the icon (= filename).\n\nIf no `icon-name` is provided, no icon will be rendered.",
-              "fieldName": "iconName",
-              "inheritedFrom": {
-                "name": "IconNameMixin",
-                "module": "src/utils/mixins/IconNameMixin.ts"
-              }
+              "default": "'right'",
+              "description": "The placement of the tooltip relative to the nav item.",
+              "fieldName": "tooltipPlacement"
+            },
+            {
+              "name": "tooltip-appearance",
+              "type": {
+                "text": "'when-collapsed' | 'always'"
+              },
+              "default": "'when-collapsed'",
+              "description": "The appearance behavior of the tooltip.\nOptions are 'when-collapsed' (default) or 'always'.",
+              "fieldName": "tooltipAppearance"
+            },
+            {
+              "name": "tooltip-boundary-padding",
+              "type": {
+                "text": "number | undefined"
+              },
+              "description": "The boundary padding for the tooltip.\nThis defines the minimum distance in pixels between the tooltip and the edges of the viewport.",
+              "default": "0",
+              "fieldName": "tooltipBoundaryPadding"
+            },
+            {
+              "name": "is-active-parent-tooltip-text",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "Tooltip text shown when this parent NavItem has a active child navitem.\nThis is useful for nested navmenuitems within a sidenavigation.\n\nMake sure to include what was normally used as the `tooltip-text` in this property.\ni.e. `Messaging, contains active navmenuitem`",
+              "fieldName": "isActiveParentTooltipText"
             },
             {
               "name": "arrow-position",
@@ -30472,18 +30608,12 @@
               }
             }
           ],
-          "mixins": [
-            {
-              "name": "IconNameMixin",
-              "module": "/src/utils/mixins/IconNameMixin"
-            }
-          ],
           "superclass": {
             "name": "MenuItem",
             "module": "/src/components/menuitem/menuitem.component"
           },
           "tagName": "mdc-navmenuitem",
-          "jsDoc": "/**\n * `mdc-navmenuitem` is a menuitem styled to work as a navigation tab.\n * It supports a leading icon, optional badge and dynamic text rendering.\n *\n * Note: `mdc-navmenuitem` is intended to be used inside `mdc-menubar` as part of the sideNavigation\n * component. Its structure, spacing, and interactions are designed to align with\n * the visual and functional requirements of side navigation layouts.\n *\n * By providing the tooltip-text attribute, a tooltip will be displayed on hover of the navmenuitem. This tooltip is useful when an active navmenuitem is present within a submenu of the sidenavigation component.\n *\n * @tagname mdc-navmenuitem\n *\n * @dependency mdc-icon\n * @dependency mdc-text\n * @dependency mdc-badge\n * @dependency mdc-tooltip\n *\n * @event click - (React: onClick) This event is dispatched when the navmenuitem is clicked.\n * @event keydown - (React: onKeyDown) This event is dispatched when a key is pressed down on the navmenuitem.\n * @event keyup - (React: onKeyUp) This event is dispatched when a key is released on the navmenuitem.\n * @event focus - (React: onFocus) This event is dispatched when the navmenuitem receives focus.\n * @event activechange - (React: onActiveChange) Dispatched when the active state of the navmenuitem changes.\n *\n * @cssproperty --mdc-navmenuitem-color - Text color of the navmenuitem in its normal state.\n * @cssproperty --mdc-navmenuitem-border-color - Border color of the navmenuitem in its normal state.\n * @cssproperty --mdc-navmenuitem-disabled-color - Text color of the navmenuitem when disabled.\n * @cssproperty --mdc-navmenuitem-expanded-width - Width of the navmenuitem when expanded.\n * @cssproperty --mdc-navmenuitem-hover-background-color - Background color of the navmenuitem when hovered.\n * @cssproperty --mdc-navmenuitem-hover-active-background-color - Background color of the active navmenuitem when hovered.\n * @cssproperty --mdc-navmenuitem-pressed-background-color - Background color of the navmenuitem when pressed.\n * @cssproperty --mdc-navmenuitem-pressed-active-background-color - Background color of the active navmenuitem when pressed.\n * @cssproperty --mdc-navmenuitem-disabled-background-color - Background color of the navmenuitem when disabled.\n * @cssproperty --mdc-navmenuitem-disabled-active-background-color - Background color of the active navmenuitem when disabled.\n * @cssproperty --mdc-navmenuitem-rest-active-background-color - Background color of the active nav item in its rest state.\n *\n * @csspart arrow - The arrow of the navmenuitem.\n * @csspart badge - The badge of the navmenuitem.\n * @csspart icon-container - The container of the icon.\n * @csspart text-container - The container of the text.\n * @csspart trailing-arrow - The trailing arrow of the navmenuitem.\n */",
+          "jsDoc": "/**\n * `mdc-navmenuitem` is a menuitem styled to work as a navigation tab.\n * It supports a leading icon, optional badge and dynamic text rendering.\n *\n * The navmenuitem can be in an active or inactive state, indicating whether it is currently selected.\n *\n * Note: `mdc-navmenuitem` is intended to be used inside `mdc-menubar` as part of the sideNavigation\n * component. Its structure, spacing, and interactions are designed to align with\n * the visual and functional requirements of side navigation layouts.\n *\n * By providing the tooltip-text attribute, a tooltip will be displayed on hover of the navmenuitem. This tooltip is useful when an active navmenuitem is present within a submenu of the sidenavigation component.\n *\n * @tagname mdc-navmenuitem\n *\n * @dependency mdc-icon\n * @dependency mdc-text\n * @dependency mdc-badge\n * @dependency mdc-tooltip\n *\n * @event click - (React: onClick) This event is dispatched when the navmenuitem is clicked.\n * @event keydown - (React: onKeyDown) This event is dispatched when a key is pressed down on the navmenuitem.\n * @event keyup - (React: onKeyUp) This event is dispatched when a key is released on the navmenuitem.\n * @event focus - (React: onFocus) This event is dispatched when the navmenuitem receives focus.\n * @event activechange - (React: onActiveChange) Dispatched when the active state of the navmenuitem changes.\n *\n * @cssproperty --mdc-navmenuitem-in-sidenav-expanded-width - Width of the navmenuitem when expanded.\n * @cssproperty --mdc-navmenuitem-in-sidenav-expanded-margin-left - Left margin of the navmenuitem, when expanded.\n * @cssproperty --mdc-navmenuitem-in-sidenav-expanded-margin-right - Right margin of the navmenuitem, when expanded.\n * @cssproperty --mdc-navmenuitem-in-sidenav-collapsed-width - Width of the navmenuitem when collapsed.\n * @cssproperty --mdc-navmenuitem-in-sidenav-collapsed-margin-left - Left margin of the navmenuitem, when collapsed.\n * @cssproperty --mdc-navmenuitem-in-sidenav-collapsed-margin-right - Right margin of the navmenuitem, when collapsed.\n * @cssproperty --mdc-navmenuitem-color - Text color of the navmenuitem in its normal state.\n * @cssproperty --mdc-navmenuitem-disabled-color - Text color of the navmenuitem when disabled.\n * @cssproperty --mdc-navmenuitem-rest-active-background-color - Background color of the active nav item in its rest state.\n * @cssproperty --mdc-navmenuitem-hover-background-color - Background color of the navmenuitem when hovered.\n * @cssproperty --mdc-navmenuitem-hover-active-background-color - Background color of the active navmenuitem when hovered.\n * @cssproperty --mdc-navmenuitem-pressed-background-color - Background color of the navmenuitem when pressed.\n * @cssproperty --mdc-navmenuitem-pressed-active-background-color - Background color of the active navmenuitem when pressed.\n * @cssproperty --mdc-navmenuitem-disabled-background-color - Background color of the navmenuitem when disabled.\n * @cssproperty --mdc-navmenuitem-disabled-active-background-color - Background color of the active navmenuitem when disabled.\n *\n * @csspart arrow - The arrow of the navmenuitem.\n * @csspart badge - The badge of the navmenuitem.\n * @csspart icon-container - The container of the icon.\n * @csspart text-container - The container of the text.\n * @csspart trailing-arrow - The trailing arrow of the navmenuitem.\n */",
           "customElement": true,
           "slots": [
             {
@@ -42859,17 +42989,41 @@
       "declarations": [
         {
           "kind": "class",
-          "description": "The `mdc-sidenavigation` component provides a vertically stacked navigation experience,\ntypically used in layouts with persistent or collapsible sidebars.\n\n## Features:\n- Supports four layout variants: `fixed-collapsed`, `fixed-expanded`, `flexible`, and `hidden`\n- Toggleable expand/collapse behavior\n- Displays brand logo and customer name\n- Serves as a context provider for descendant components - `mdc-menubar` and `mdc-navmenuitem`\n\n### Usage:\nIn a sidenavigation, navmenuitems can be used in the following ways:\n\n1. **Simple navmenuitem** – No submenu or interaction beyond selection.\n\n2. **NavMenuItem with submenu**:\n   - Provide an `id` on the `mdc-navmenuitem`\n   - Set the `triggerId` on the corresponding `mdc-menupopover` to match the navmenuitem's `id`\n   - Set `parent-nav-tooltip-text` with appropriate text that will display when a child menu item\n     inside the nested menupopover is active, conveying which submenu item is currently selected\n\n3. **Actionable navmenuitem (no submenu)**:\n   - Performs an action such as navigation or alert trigger\n   - Set `disable-aria-current=\"true\"` to maintain visual active state without navigation behavior\n\n### Recommendations:\n- Use `mdc-text` for section headers\n- Use `mdc-divider` with the attribute `variant=\"gradient\"` for section dividers\n- For the brand logo, use an informative icon. Refer to `Momentum Informative Icons`\n\n#### Accessibility Notes:\n- Always provide meaningful `aria-label` attributes for both `mdc-navmenuitem` and `mdc-menubar`\nto ensure screen reader support\n- Set `grabber-btn-aria-label` to provide accessible labels for the expand/collapse grabber button",
+          "description": "The `mdc-sidenavigation` component provides a vertically stacked navigation experience,\ntypically used in layouts with persistent or collapsible sidebars.\n\n## Features:\n- Supports five layout variants: `fixed-collapsed`, `fixed-expanded`, `flexible`, `flexible-on-hover`, and `hidden`\n- Toggleable expand/collapse behavior\n- Displays brand logo and customer name\n- Serves as a context provider for descendant components - `mdc-menubar` and `mdc-navmenuitem`\n\n### Usage:\nIn a sidenavigation, navmenuitems can be used in the following ways:\n\n1. **Simple navmenuitem** – No submenu or interaction beyond selection.\n\n2. **NavMenuItem with submenu**:\n   - Provide an `id` on the `mdc-navmenuitem`\n   - Set the `triggerId` on the corresponding `mdc-menupopover` to match the navmenuitem's `id`\n   - Set `parent-nav-tooltip-text` with appropriate text that will display when a child menu item\n     inside the nested menupopover is active, conveying which submenu item is currently selected\n\n3. **Actionable navmenuitem (no submenu)**:\n   - Performs an action such as navigation or alert trigger\n   - Set `disable-aria-current=\"true\"` to maintain visual active state without navigation behavior\n\n### Recommendations:\n- Use `mdc-text` for section headers\n- Use `mdc-divider` with the attribute `variant=\"gradient\"` for section dividers\n- For the brand logo, use an informative icon. Refer to `Momentum Informative Icons`\n\n#### Accessibility Notes:\n- Always provide meaningful `aria-label` attributes for both `mdc-navmenuitem` and `mdc-menubar`\nto ensure screen reader support\n- Set `grabber-btn-aria-label` to provide accessible labels for the expand/collapse grabber button",
           "name": "SideNavigation",
           "cssProperties": [
             {
               "description": "width of the sideNavigation when expanded",
               "name": "--mdc-sidenavigation-expanded-width"
             },
+            {
+              "description": "padding for the left side of navmenuitems, when expanded",
+              "name": "--mdc-sidenavigation-expanded-left-padding"
+            },
+            {
+              "description": "padding for the right side of navmenuitems, when expanded",
+              "name": "--mdc-sidenavigation-expanded-right-padding"
+            },
             {
               "description": "width of the sideNavigation when collapsed",
               "name": "--mdc-sidenavigation-collapsed-width"
             },
+            {
+              "description": "padding for the left side of navmenuitems, when collapsed",
+              "name": "--mdc-sidenavigation-collapsed-left-padding"
+            },
+            {
+              "description": "padding for the right side of navmenuitems, when collapsed",
+              "name": "--mdc-sidenavigation-collapsed-right-padding"
+            },
+            {
+              "description": "padding for the top of the scrollable section - note: if setting to 0 focus ring might be cut off",
+              "name": "--mdc-sidenavigation-top-padding"
+            },
+            {
+              "description": "padding for the bottom of the scrollable section",
+              "name": "--mdc-sidenavigation-bottom-padding"
+            },
             {
               "description": "z-index of the vertical divider button",
               "name": "--mdc-sidenavigation-vertical-divider-button-z-index"
@@ -42885,13 +43039,21 @@
               "name": "scrollable-section"
             },
             {
-              "description": "The fixed section of the side navigation.",
-              "name": "fixed-section"
+              "description": "The menubar inside the scrollable section.",
+              "name": "scrollable-menubar"
             },
             {
               "description": "The divider between the scrollable and fixed sections.",
               "name": "separator"
             },
+            {
+              "description": "The fixed section of the side navigation.",
+              "name": "fixed-section"
+            },
+            {
+              "description": "The menubar inside the fixed section.",
+              "name": "fixed-menubar"
+            },
             {
               "description": "The container wrapping the brand logo and footer text.",
               "name": "brand-logo-container"
@@ -42914,10 +43076,18 @@
               "description": "Slot for the scrollable content area of the side navigation.",
               "name": "scrollable-section"
             },
+            {
+              "description": "Slot for the menubar inside the scrollable section.",
+              "name": "scrollable-menubar"
+            },
             {
               "description": "Slot for the fixed content area of the side navigation.",
               "name": "fixed-section"
             },
+            {
+              "description": "Slot for the menubar inside the fixed section.",
+              "name": "fixed-menubar"
+            },
             {
               "description": "Slot for the brand logo (e.g., icon or img).",
               "name": "brand-logo"
@@ -42930,7 +43100,7 @@
               "type": {
                 "text": "SideNavigationVariant"
               },
-              "description": "Four variants of the sideNavigation\n- **fixed-collapsed**: Shows icons without labels and has fixed width, 4.5rem.\n- **fixed-expanded**: Shows icons with labels and has fixed width, 15rem.\n- **flexible**: Toggles between collapsed/expanded states.\n- **hidden**: Removes the sidenavigation from the DOM.",
+              "description": "Five variants of the sideNavigation\n- **fixed-collapsed**: Shows icons without labels and has fixed width, 4.5rem.\n- **fixed-expanded**: Shows icons with labels and has fixed width, 15rem.\n- **flexible**: Toggles between collapsed/expanded states.\n- **flexible-on-hover**: Similar to flexible, but the grabber button is only visible on hover or focus.\n- **hidden**: Removes the sidenavigation from the DOM.",
               "default": "flexible",
               "attribute": "variant",
               "reflects": true
@@ -42942,10 +43112,21 @@
                 "text": "string"
               },
               "default": "''",
-              "description": "Displays footer text in the bottom section of the sidenavigation.",
+              "description": "Displays footer text in the bottom section of the sidenavigation.\n\nNote: if footerText is not provided, the bottom brand logo section will not be rendered.",
               "attribute": "footer-text",
               "reflects": true
             },
+            {
+              "kind": "field",
+              "name": "expanded",
+              "type": {
+                "text": "boolean | undefined"
+              },
+              "description": "Determines whether the sideNavigation is expanded or not.\n\nNOTE: For `fixed-collapsed` and `fixed-expanded` variants, this property is hard set to `false` and `true` respectively.\nFor `flexible` and `flexible-on-hover` variants, this property can be toggled / controlled from parent.",
+              "default": "true",
+              "attribute": "expanded",
+              "reflects": true
+            },
             {
               "kind": "field",
               "name": "grabberBtnAriaLabel",
@@ -42959,14 +43140,33 @@
             },
             {
               "kind": "field",
-              "name": "parentNavTooltipText",
+              "name": "hideFixedSectionDivider",
               "type": {
-                "text": "string | undefined"
+                "text": "boolean"
               },
-              "description": "Tooltip text shown on parent nav items when a child is active.",
-              "attribute": "parent-nav-tooltip-text",
+              "default": "false",
+              "description": "Hides the divider between the scrollable and fixed sections when set to true.",
+              "attribute": "hide-fixed-section-divider",
               "reflects": true
             },
+            {
+              "kind": "field",
+              "name": "isHovered",
+              "type": {
+                "text": "boolean"
+              },
+              "privacy": "private",
+              "default": "false"
+            },
+            {
+              "kind": "field",
+              "name": "isFocused",
+              "type": {
+                "text": "boolean"
+              },
+              "privacy": "private",
+              "default": "false"
+            },
             {
               "kind": "field",
               "name": "Context",
@@ -43025,7 +43225,7 @@
               "type": {
                 "text": "SideNavigationVariant"
               },
-              "description": "Four variants of the sideNavigation\n- **fixed-collapsed**: Shows icons without labels and has fixed width, 4.5rem.\n- **fixed-expanded**: Shows icons with labels and has fixed width, 15rem.\n- **flexible**: Toggles between collapsed/expanded states.\n- **hidden**: Removes the sidenavigation from the DOM.",
+              "description": "Five variants of the sideNavigation\n- **fixed-collapsed**: Shows icons without labels and has fixed width, 4.5rem.\n- **fixed-expanded**: Shows icons with labels and has fixed width, 15rem.\n- **flexible**: Toggles between collapsed/expanded states.\n- **flexible-on-hover**: Similar to flexible, but the grabber button is only visible on hover or focus.\n- **hidden**: Removes the sidenavigation from the DOM.",
               "default": "flexible",
               "fieldName": "variant"
             },
@@ -43035,9 +43235,18 @@
                 "text": "string"
               },
               "default": "''",
-              "description": "Displays footer text in the bottom section of the sidenavigation.",
+              "description": "Displays footer text in the bottom section of the sidenavigation.\n\nNote: if footerText is not provided, the bottom brand logo section will not be rendered.",
               "fieldName": "footerText"
             },
+            {
+              "name": "expanded",
+              "type": {
+                "text": "boolean | undefined"
+              },
+              "description": "Determines whether the sideNavigation is expanded or not.\n\nNOTE: For `fixed-collapsed` and `fixed-expanded` variants, this property is hard set to `false` and `true` respectively.\nFor `flexible` and `flexible-on-hover` variants, this property can be toggled / controlled from parent.",
+              "default": "true",
+              "fieldName": "expanded"
+            },
             {
               "name": "grabber-btn-aria-label",
               "type": {
@@ -43048,12 +43257,13 @@
               "fieldName": "grabberBtnAriaLabel"
             },
             {
-              "name": "parent-nav-tooltip-text",
+              "name": "hide-fixed-section-divider",
               "type": {
-                "text": "string | undefined"
+                "text": "boolean"
               },
-              "description": "Tooltip text shown on parent nav items when a child is active.",
-              "fieldName": "parentNavTooltipText"
+              "default": "false",
+              "description": "Hides the divider between the scrollable and fixed sections when set to true.",
+              "fieldName": "hideFixedSectionDivider"
             }
           ],
           "superclass": {
@@ -43061,7 +43271,7 @@
             "module": "/src/models"
           },
           "tagName": "mdc-sidenavigation",
-          "jsDoc": "/**\n * The `mdc-sidenavigation` component provides a vertically stacked navigation experience,\n * typically used in layouts with persistent or collapsible sidebars.\n *\n * ## Features:\n * - Supports four layout variants: `fixed-collapsed`, `fixed-expanded`, `flexible`, and `hidden`\n * - Toggleable expand/collapse behavior\n * - Displays brand logo and customer name\n * - Serves as a context provider for descendant components - `mdc-menubar` and `mdc-navmenuitem`\n *\n * ### Usage:\n * In a sidenavigation, navmenuitems can be used in the following ways:\n *\n * 1. **Simple navmenuitem** – No submenu or interaction beyond selection.\n *\n * 2. **NavMenuItem with submenu**:\n *    - Provide an `id` on the `mdc-navmenuitem`\n *    - Set the `triggerId` on the corresponding `mdc-menupopover` to match the navmenuitem's `id`\n *    - Set `parent-nav-tooltip-text` with appropriate text that will display when a child menu item\n *      inside the nested menupopover is active, conveying which submenu item is currently selected\n *\n * 3. **Actionable navmenuitem (no submenu)**:\n *    - Performs an action such as navigation or alert trigger\n *    - Set `disable-aria-current=\"true\"` to maintain visual active state without navigation behavior\n *\n * ### Recommendations:\n * - Use `mdc-text` for section headers\n * - Use `mdc-divider` with the attribute `variant=\"gradient\"` for section dividers\n * - For the brand logo, use an informative icon. Refer to `Momentum Informative Icons`\n *\n * #### Accessibility Notes:\n * - Always provide meaningful `aria-label` attributes for both `mdc-navmenuitem` and `mdc-menubar`\n * to ensure screen reader support\n * - Set `grabber-btn-aria-label` to provide accessible labels for the expand/collapse grabber button\n *\n * @dependency mdc-text\n * @dependency mdc-button\n * @dependency mdc-divider\n * @dependency mdc-menubar\n *\n * @event activechange - (React: onActiveChange) Dispatched when the active state of the navmenuitem changes.\n *\n * @tagname mdc-sidenavigation\n *\n * @slot scrollable-section - Slot for the scrollable content area of the side navigation.\n * @slot fixed-section - Slot for the fixed content area of the side navigation.\n * @slot brand-logo - Slot for the brand logo (e.g., icon or img).\n *\n * @csspart side-navigation-container - The main container wrapping the entire side navigation.\n * @csspart scrollable-section - The scrollable section of the side navigation.\n * @csspart fixed-section - The fixed section of the side navigation.\n * @csspart separator - The divider between the scrollable and fixed sections.\n * @csspart brand-logo-container - The container wrapping the brand logo and footer text.\n * @csspart footer-text - The footer text label in the fixed section.\n * @csspart vertical-divider - The vertical divider between the scrollable and fixed sections.\n * @csspart vertical-divider-button - The button inside the vertical divider used to toggle expand/collapse.\n *\n * @event toggle - (React: onToggle) Dispatched when the grabber button is clicked to expand/collapse the sidenavigation.\n * @event activechange - (React: onActiveChange) Dispatched when the active state of a nested navmenuitem changes.\n *\n * @cssproperty --mdc-sidenavigation-expanded-width - width of the sideNavigation when expanded\n * @cssproperty --mdc-sidenavigation-collapsed-width - width of the sideNavigation when collapsed\n * @cssproperty --mdc-sidenavigation-vertical-divider-button-z-index - z-index of the vertical divider button\n */",
+          "jsDoc": "/**\n * The `mdc-sidenavigation` component provides a vertically stacked navigation experience,\n * typically used in layouts with persistent or collapsible sidebars.\n *\n * ## Features:\n * - Supports five layout variants: `fixed-collapsed`, `fixed-expanded`, `flexible`, `flexible-on-hover`, and `hidden`\n * - Toggleable expand/collapse behavior\n * - Displays brand logo and customer name\n * - Serves as a context provider for descendant components - `mdc-menubar` and `mdc-navmenuitem`\n *\n * ### Usage:\n * In a sidenavigation, navmenuitems can be used in the following ways:\n *\n * 1. **Simple navmenuitem** – No submenu or interaction beyond selection.\n *\n * 2. **NavMenuItem with submenu**:\n *    - Provide an `id` on the `mdc-navmenuitem`\n *    - Set the `triggerId` on the corresponding `mdc-menupopover` to match the navmenuitem's `id`\n *    - Set `parent-nav-tooltip-text` with appropriate text that will display when a child menu item\n *      inside the nested menupopover is active, conveying which submenu item is currently selected\n *\n * 3. **Actionable navmenuitem (no submenu)**:\n *    - Performs an action such as navigation or alert trigger\n *    - Set `disable-aria-current=\"true\"` to maintain visual active state without navigation behavior\n *\n * ### Recommendations:\n * - Use `mdc-text` for section headers\n * - Use `mdc-divider` with the attribute `variant=\"gradient\"` for section dividers\n * - For the brand logo, use an informative icon. Refer to `Momentum Informative Icons`\n *\n * #### Accessibility Notes:\n * - Always provide meaningful `aria-label` attributes for both `mdc-navmenuitem` and `mdc-menubar`\n * to ensure screen reader support\n * - Set `grabber-btn-aria-label` to provide accessible labels for the expand/collapse grabber button\n *\n * @dependency mdc-text\n * @dependency mdc-button\n * @dependency mdc-divider\n * @dependency mdc-menubar\n *\n * @event activechange - (React: onActiveChange) Dispatched when the active state of the navmenuitem changes.\n *\n * @tagname mdc-sidenavigation\n *\n * @slot scrollable-section - Slot for the scrollable content area of the side navigation.\n * @slot scrollable-menubar - Slot for the menubar inside the scrollable section.\n * @slot fixed-section - Slot for the fixed content area of the side navigation.\n * @slot fixed-menubar - Slot for the menubar inside the fixed section.\n * @slot brand-logo - Slot for the brand logo (e.g., icon or img).\n *\n * @csspart side-navigation-container - The main container wrapping the entire side navigation.\n * @csspart scrollable-section - The scrollable section of the side navigation.\n * @csspart scrollable-menubar - The menubar inside the scrollable section.\n * @csspart separator - The divider between the scrollable and fixed sections.\n * @csspart fixed-section - The fixed section of the side navigation.\n * @csspart fixed-menubar - The menubar inside the fixed section.\n * @csspart brand-logo-container - The container wrapping the brand logo and footer text.\n * @csspart footer-text - The footer text label in the fixed section.\n * @csspart vertical-divider - The vertical divider between the scrollable and fixed sections.\n * @csspart vertical-divider-button - The button inside the vertical divider used to toggle expand/collapse.\n *\n * @event toggle - (React: onToggle) Dispatched when the grabber button is clicked to expand/collapse the sidenavigation.\n * @event activechange - (React: onActiveChange) Dispatched when the active state of a nested navmenuitem changes.\n *\n * @cssproperty --mdc-sidenavigation-expanded-width - width of the sideNavigation when expanded\n * @cssproperty --mdc-sidenavigation-expanded-left-padding - padding for the left side of navmenuitems, when expanded\n * @cssproperty --mdc-sidenavigation-expanded-right-padding - padding for the right side of navmenuitems, when expanded\n * @cssproperty --mdc-sidenavigation-collapsed-width - width of the sideNavigation when collapsed\n * @cssproperty --mdc-sidenavigation-collapsed-left-padding - padding for the left side of navmenuitems, when collapsed\n * @cssproperty --mdc-sidenavigation-collapsed-right-padding - padding for the right side of navmenuitems, when collapsed\n * @cssproperty --mdc-sidenavigation-top-padding - padding for the top of the scrollable section - note: if setting to 0 focus ring might be cut off\n * @cssproperty --mdc-sidenavigation-bottom-padding - padding for the bottom of the scrollable section\n * @cssproperty --mdc-sidenavigation-vertical-divider-button-z-index - z-index of the vertical divider button\n */",
           "customElement": true
         }
       ],