@momentum-design/components 0.91.2 → 0.92.1

package/dist/custom-elements.json

@@ -2190,6 +2190,77 @@
         }
       ]
     },
+    {
+      "kind": "javascript-module",
+      "path": "components/bullet/bullet.component.js",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "Bullet component, which is a visual marker\nand be used to organize and present items in a list format.",
+          "name": "Bullet",
+          "cssProperties": [
+            {
+              "description": "background color of the bullet",
+              "name": "--mdc-bullet-background-color"
+            },
+            {
+              "description": "small size value of the bullet",
+              "name": "--mdc-bullet-size-small"
+            },
+            {
+              "description": "medium size value of the bullet",
+              "name": "--mdc-bullet-size-medium"
+            },
+            {
+              "description": "large size value of the bullet",
+              "name": "--mdc-bullet-size-large"
+            }
+          ],
+          "members": [
+            {
+              "kind": "field",
+              "name": "size",
+              "type": {
+                "text": "Size"
+              },
+              "privacy": "public",
+              "description": "Size of the bullet\n\nPossible values: 'small', 'medium', 'large'",
+              "default": "small",
+              "attribute": "size",
+              "reflects": true
+            }
+          ],
+          "attributes": [
+            {
+              "name": "size",
+              "type": {
+                "text": "Size"
+              },
+              "description": "Size of the bullet\n\nPossible values: 'small', 'medium', 'large'",
+              "default": "small",
+              "fieldName": "size"
+            }
+          ],
+          "superclass": {
+            "name": "Component",
+            "module": "/src/models"
+          },
+          "tagName": "mdc-bullet",
+          "jsDoc": "/**\n * Bullet component, which is a visual marker\n * and be used to organize and present items in a list format.\n *\n * @tagname mdc-bullet\n *\n * @cssproperty --mdc-bullet-background-color - background color of the bullet\n * @cssproperty --mdc-bullet-size-small - small size value of the bullet\n * @cssproperty --mdc-bullet-size-medium - medium size value of the bullet\n * @cssproperty --mdc-bullet-size-large - large size value of the bullet\n */",
+          "customElement": true
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "default",
+          "declaration": {
+            "name": "Bullet",
+            "module": "components/bullet/bullet.component.js"
+          }
+        }
+      ]
+    },
     {
       "kind": "javascript-module",
       "path": "components/button/button.component.js",
@@ -2885,77 +2956,6 @@
         }
       ]
     },
-    {
-      "kind": "javascript-module",
-      "path": "components/bullet/bullet.component.js",
-      "declarations": [
-        {
-          "kind": "class",
-          "description": "Bullet component, which is a visual marker\nand be used to organize and present items in a list format.",
-          "name": "Bullet",
-          "cssProperties": [
-            {
-              "description": "background color of the bullet",
-              "name": "--mdc-bullet-background-color"
-            },
-            {
-              "description": "small size value of the bullet",
-              "name": "--mdc-bullet-size-small"
-            },
-            {
-              "description": "medium size value of the bullet",
-              "name": "--mdc-bullet-size-medium"
-            },
-            {
-              "description": "large size value of the bullet",
-              "name": "--mdc-bullet-size-large"
-            }
-          ],
-          "members": [
-            {
-              "kind": "field",
-              "name": "size",
-              "type": {
-                "text": "Size"
-              },
-              "privacy": "public",
-              "description": "Size of the bullet\n\nPossible values: 'small', 'medium', 'large'",
-              "default": "small",
-              "attribute": "size",
-              "reflects": true
-            }
-          ],
-          "attributes": [
-            {
-              "name": "size",
-              "type": {
-                "text": "Size"
-              },
-              "description": "Size of the bullet\n\nPossible values: 'small', 'medium', 'large'",
-              "default": "small",
-              "fieldName": "size"
-            }
-          ],
-          "superclass": {
-            "name": "Component",
-            "module": "/src/models"
-          },
-          "tagName": "mdc-bullet",
-          "jsDoc": "/**\n * Bullet component, which is a visual marker\n * and be used to organize and present items in a list format.\n *\n * @tagname mdc-bullet\n *\n * @cssproperty --mdc-bullet-background-color - background color of the bullet\n * @cssproperty --mdc-bullet-size-small - small size value of the bullet\n * @cssproperty --mdc-bullet-size-medium - medium size value of the bullet\n * @cssproperty --mdc-bullet-size-large - large size value of the bullet\n */",
-          "customElement": true
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "default",
-          "declaration": {
-            "name": "Bullet",
-            "module": "components/bullet/bullet.component.js"
-          }
-        }
-      ]
-    },
     {
       "kind": "javascript-module",
       "path": "components/buttongroup/buttongroup.component.js",
@@ -8554,6 +8554,21 @@
                 "module": "components/popover/popover.component.js"
               }
             },
+            {
+              "kind": "field",
+              "name": "boundaryPadding",
+              "type": {
+                "text": "number"
+              },
+              "description": "Virtual padding around the boundary to check for overflow.",
+              "default": "16",
+              "attribute": "boundary-padding",
+              "reflects": true,
+              "inheritedFrom": {
+                "name": "Popover",
+                "module": "components/popover/popover.component.js"
+              }
+            },
             {
               "kind": "field",
               "name": "interactive",
@@ -9235,6 +9250,19 @@
                 "module": "src/components/popover/popover.component.ts"
               }
             },
+            {
+              "name": "boundary-padding",
+              "type": {
+                "text": "number"
+              },
+              "description": "Virtual padding around the boundary to check for overflow.",
+              "default": "16",
+              "fieldName": "boundaryPadding",
+              "inheritedFrom": {
+                "name": "Popover",
+                "module": "src/components/popover/popover.component.ts"
+              }
+            },
             {
               "name": "focus-trap",
               "type": {
@@ -15800,7 +15828,7 @@
                   "description": "The keyboard event that triggered the action."
                 }
               ],
-              "description": "Handles the keydown event for the menu item.\nIf the Enter key is pressed, it triggers a click event on the menu item.\nThis allows keyboard users to activate the menu item using the Enter key.",
+              "description": "Handles the keydown event for the menu item.\nIf the Enter key is pressed, it triggers a click event on the menu item.\nThis allows keyboard users to activate the menu item using the Enter key.\n\nThis follows the native behaviour, actionable element can be triggered by Enter\nkey on the keydown event.\n\nNote: Action triggered by Space on the keyup event.",
               "inheritedFrom": {
                 "name": "ListItem",
                 "module": "components/listitem/listitem.component.js"
@@ -15824,7 +15852,7 @@
                   "description": "The keyboard event that triggered the action."
                 }
               ],
-              "description": "Handles the keyup event for the menu item.\nIf the Space key is released, it triggers a click event on the menu item.\nThis allows keyboard users to activate the menu item using the Space key.\nIt also prevents the default action of the Space key to avoid scrolling the page."
+              "description": "Handles the keyup event for the menu item.\nIf the Space key is released, it triggers a click event on the menu item.\nThis allows keyboard users to activate the menu item using the Space key.\nIt also prevents the default action of the Space key to avoid scrolling the page.\n\nThis follows the native behaviour, actionable element can be triggered by Space\nkey on the keyup event.\n\nNote: Action triggered by Enter on the keydown event."
             },
             {
               "kind": "method",
@@ -16660,7 +16688,7 @@
                   "description": "The keyboard event that triggered the action."
                 }
               ],
-              "description": "Handles the keydown event for the menu item.\nIf the Enter key is pressed, it triggers a click event on the menu item.\nThis allows keyboard users to activate the menu item using the Enter key.",
+              "description": "Handles the keydown event for the menu item.\nIf the Enter key is pressed, it triggers a click event on the menu item.\nThis allows keyboard users to activate the menu item using the Enter key.\n\nThis follows the native behaviour, actionable element can be triggered by Enter\nkey on the keydown event.\n\nNote: Action triggered by Space on the keyup event.",
               "inheritedFrom": {
                 "name": "ListItem",
                 "module": "components/listitem/listitem.component.js"
@@ -16684,7 +16712,7 @@
                   "description": "The keyboard event that triggered the action."
                 }
               ],
-              "description": "Handles the keyup event for the menu item.\nIf the Space key is released, it triggers a click event on the menu item.\nThis allows keyboard users to activate the menu item using the Space key.\nIt also prevents the default action of the Space key to avoid scrolling the page.",
+              "description": "Handles the keyup event for the menu item.\nIf the Space key is released, it triggers a click event on the menu item.\nThis allows keyboard users to activate the menu item using the Space key.\nIt also prevents the default action of the Space key to avoid scrolling the page.\n\nThis follows the native behaviour, actionable element can be triggered by Space\nkey on the keyup event.\n\nNote: Action triggered by Enter on the keydown event.",
               "inheritedFrom": {
                 "name": "MenuItem",
                 "module": "components/menuitem/menuitem.component.js"
@@ -17574,7 +17602,7 @@
                   "description": "The keyboard event that triggered the action."
                 }
               ],
-              "description": "Handles the keydown event for the menu item.\nIf the Enter key is pressed, it triggers a click event on the menu item.\nThis allows keyboard users to activate the menu item using the Enter key.",
+              "description": "Handles the keydown event for the menu item.\nIf the Enter key is pressed, it triggers a click event on the menu item.\nThis allows keyboard users to activate the menu item using the Enter key.\n\nThis follows the native behaviour, actionable element can be triggered by Enter\nkey on the keydown event.\n\nNote: Action triggered by Space on the keyup event.",
               "inheritedFrom": {
                 "name": "ListItem",
                 "module": "components/listitem/listitem.component.js"
@@ -17598,7 +17626,7 @@
                   "description": "The keyboard event that triggered the action."
                 }
               ],
-              "description": "Handles the keyup event for the menu item.\nIf the Space key is released, it triggers a click event on the menu item.\nThis allows keyboard users to activate the menu item using the Space key.\nIt also prevents the default action of the Space key to avoid scrolling the page.",
+              "description": "Handles the keyup event for the menu item.\nIf the Space key is released, it triggers a click event on the menu item.\nThis allows keyboard users to activate the menu item using the Space key.\nIt also prevents the default action of the Space key to avoid scrolling the page.\n\nThis follows the native behaviour, actionable element can be triggered by Space\nkey on the keyup event.\n\nNote: Action triggered by Enter on the keydown event.",
               "inheritedFrom": {
                 "name": "MenuItem",
                 "module": "components/menuitem/menuitem.component.js"
@@ -18279,7 +18307,7 @@
       "declarations": [
         {
           "kind": "class",
-          "description": "A popover menu component that displays a list of menu items in a floating container.\nIt's designed to work in conjunction with `mdc-menubar` and `mdc-menuitem` to create\naccessible, nested menu structures with the following features:\n- Appears adjacent to the triggering menu item\n- Supports keyboard navigation (arrow keys, Home, End)\n- Manages focus trapping when open\n- Closes on Escape key or outside click\n- Supports both mouse and keyboard interactions\n- Automatically handles ARIA attributes for accessibility\n\nThe component extends `mdc-popover` and adds menu-specific behaviors and styling.\nWhen nested within another `mdc-menupopover`, it automatically adjusts its behavior\nto work as a submenu (right-aligned, shows on hover).\n\nThe orientation of the menu popover is always set to `vertical`.",
+          "description": "A popover menu component that displays a list of menu items in a floating container.\nIt's designed to work in conjunction with `mdc-menubar` and `mdc-menuitem` to create\naccessible, nested menu structures with the following features:\n- Appears adjacent to the triggering menu item\n- Supports keyboard navigation (arrow keys, Home, End)\n- Manages focus trapping when open\n- Closes on Escape key or outside click\n- Supports both mouse and keyboard interactions\n- Automatically handles ARIA attributes for accessibility\n\nThe component extends `mdc-popover` and adds menu-specific behaviors and styling.\nWhen nested within another `mdc-menupopover`, it automatically adjusts its behavior\nto work as a submenu (right-aligned, shows on hover).\n\nThe orientation of the menu popover is always set to `vertical`.\n\nSubmenu opens when:\n- Clicked on a menu item with a submenu\n- Enter or Space key pressed on a menu item with a submenu\n\nMenu closes completely (with all sub menus) when:\n- A menu item is clicked that does not have a submenu\n- Enter key pressed on a menu item (not a submenu trigger), menu item radio or menu item checkbox\n- Click outside the menu popover (on the backdrop)\n\nClose submenus when:\n- Esc key pressed, only the current submenu closed\n- Arrow Left key pressed, only the current submenu closed\n- Open another submenu with Click, Enter or Space key,\n  closes recursively all submenus until the selected item's submenu\n\nMenu does not close when:\n- Space key pressed on a menu item radio or menu item checkbox",
           "name": "MenuPopover",
           "slots": [
             {
@@ -18311,6 +18339,15 @@
                 "module": "components/popover/popover.component.js"
               }
             },
+            {
+              "kind": "field",
+              "name": "menuItems",
+              "type": {
+                "text": "Array<HTMLElement>"
+              },
+              "privacy": "private",
+              "default": "[]"
+            },
             {
               "kind": "method",
               "name": "isOpenUpdated",
@@ -18340,6 +18377,21 @@
                 "module": "components/popover/popover.component.js"
               }
             },
+            {
+              "kind": "method",
+              "name": "resetTabIndexes",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "currentIndex",
+                  "type": {
+                    "text": "number"
+                  },
+                  "description": "The index of the currently focused menu item."
+                }
+              ],
+              "description": "Reset all tabindex to -1 and set the tabindex of the current menu item to 0"
+            },
             {
               "kind": "method",
               "name": "getCurrentIndex",
@@ -18454,6 +18506,21 @@
                 "module": "components/popover/popover.component.js"
               }
             },
+            {
+              "kind": "method",
+              "name": "closeMenu",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "target",
+                  "type": {
+                    "text": "HTMLElement"
+                  },
+                  "description": "The target element that was clicked."
+                }
+              ],
+              "description": "Determines whether to close the menu based on the clicked target."
+            },
             {
               "kind": "method",
               "name": "handleMouseClick",
@@ -18514,7 +18581,27 @@
                   "description": "The keyboard event that triggered the keydown action."
                 }
               ],
-              "description": "Handles keydown events for keyboard navigation within the menu popover.\nThis method allows users to navigate through the menu items using the keyboard.\nIt supports Home, End, Arrow Up, Arrow Down, Arrow Left, Arrow Right, and Escape keys.",
+              "description": "Handles keydown events for keyboard navigation within the menu popover.\nThis method allows users to navigate through the menu items using the keyboard.\nIt supports Home, End, Arrow Up, Arrow Down, Arrow Left, Arrow Right, and Escape keys.\n\nAlso, it handles Enter key to close the menu popover",
+              "return": {
+                "type": {
+                  "text": ""
+                }
+              }
+            },
+            {
+              "kind": "method",
+              "name": "handleKeyUp",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "event",
+                  "type": {
+                    "text": "KeyboardEvent"
+                  },
+                  "description": "The keyboard event that triggered the keydown action."
+                }
+              ],
+              "description": "Handles keyup events for keyboard navigation within the menu popover.\n\nSome keys must be handled with keyup event to prevent default action.\n\nSpace key closes the menu when the user presses it on a menu item,\nbut the same key will trigger a click on the menu opener button.\nThe button uses the keyup event so we have to handle it here as well\nto prevent the meu opener action which would re-open the menu.",
               "return": {
                 "type": {
                   "text": ""
@@ -19157,6 +19244,21 @@
                 "module": "components/popover/popover.component.js"
               }
             },
+            {
+              "kind": "field",
+              "name": "boundaryPadding",
+              "type": {
+                "text": "number"
+              },
+              "description": "Virtual padding around the boundary to check for overflow.",
+              "default": "16",
+              "attribute": "boundary-padding",
+              "reflects": true,
+              "inheritedFrom": {
+                "name": "Popover",
+                "module": "components/popover/popover.component.js"
+              }
+            },
             {
               "kind": "field",
               "name": "showArrow",
@@ -19802,6 +19904,19 @@
                 "module": "src/components/popover/popover.component.ts"
               }
             },
+            {
+              "name": "boundary-padding",
+              "type": {
+                "text": "number"
+              },
+              "description": "Virtual padding around the boundary to check for overflow.",
+              "default": "16",
+              "fieldName": "boundaryPadding",
+              "inheritedFrom": {
+                "name": "Popover",
+                "module": "src/components/popover/popover.component.ts"
+              }
+            },
             {
               "name": "focus-trap",
               "type": {
@@ -20094,7 +20209,7 @@
             "module": "/src/components/popover/popover.component"
           },
           "tagName": "mdc-menupopover",
-          "jsDoc": "/**\n * A popover menu component that displays a list of menu items in a floating container.\n * It's designed to work in conjunction with `mdc-menubar` and `mdc-menuitem` to create\n * accessible, nested menu structures with the following features:\n * - Appears adjacent to the triggering menu item\n * - Supports keyboard navigation (arrow keys, Home, End)\n * - Manages focus trapping when open\n * - Closes on Escape key or outside click\n * - Supports both mouse and keyboard interactions\n * - Automatically handles ARIA attributes for accessibility\n *\n * The component extends `mdc-popover` and adds menu-specific behaviors and styling.\n * When nested within another `mdc-menupopover`, it automatically adjusts its behavior\n * to work as a submenu (right-aligned, shows on hover).\n *\n * The orientation of the menu popover is always set to `vertical`.\n *\n * @tagname mdc-menupopover\n *\n * @slot - Default slot for the menu popover content\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 and the menu closes.\n *\n * @slot default - Contains the menu items to be displayed in the popover\n */",
+          "jsDoc": "/**\n * A popover menu component that displays a list of menu items in a floating container.\n * It's designed to work in conjunction with `mdc-menubar` and `mdc-menuitem` to create\n * accessible, nested menu structures with the following features:\n * - Appears adjacent to the triggering menu item\n * - Supports keyboard navigation (arrow keys, Home, End)\n * - Manages focus trapping when open\n * - Closes on Escape key or outside click\n * - Supports both mouse and keyboard interactions\n * - Automatically handles ARIA attributes for accessibility\n *\n * The component extends `mdc-popover` and adds menu-specific behaviors and styling.\n * When nested within another `mdc-menupopover`, it automatically adjusts its behavior\n * to work as a submenu (right-aligned, shows on hover).\n *\n * The orientation of the menu popover is always set to `vertical`.\n *\n * Submenu opens when:\n * - Clicked on a menu item with a submenu\n * - Enter or Space key pressed on a menu item with a submenu\n *\n * Menu closes completely (with all sub menus) when:\n * - A menu item is clicked that does not have a submenu\n * - Enter key pressed on a menu item (not a submenu trigger), menu item radio or menu item checkbox\n * - Click outside the menu popover (on the backdrop)\n *\n * Close submenus when:\n * - Esc key pressed, only the current submenu closed\n * - Arrow Left key pressed, only the current submenu closed\n * - Open another submenu with Click, Enter or Space key,\n *   closes recursively all submenus until the selected item's submenu\n *\n * Menu does not close when:\n * - Space key pressed on a menu item radio or menu item checkbox\n *\n * @tagname mdc-menupopover\n *\n * @slot - Default slot for the menu popover content\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 and the menu closes.\n *\n * @slot default - Contains the menu items to be displayed in the popover\n */",
           "customElement": true,
           "cssProperties": [
             {
@@ -20659,7 +20774,7 @@
                   "description": "The keyboard event that triggered the action."
                 }
               ],
-              "description": "Handles the keydown event for the menu item.\nIf the Enter key is pressed, it triggers a click event on the menu item.\nThis allows keyboard users to activate the menu item using the Enter key.",
+              "description": "Handles the keydown event for the menu item.\nIf the Enter key is pressed, it triggers a click event on the menu item.\nThis allows keyboard users to activate the menu item using the Enter key.\n\nThis follows the native behaviour, actionable element can be triggered by Enter\nkey on the keydown event.\n\nNote: Action triggered by Space on the keyup event.",
               "inheritedFrom": {
                 "name": "ListItem",
                 "module": "components/listitem/listitem.component.js"
@@ -20683,7 +20798,7 @@
                   "description": "The keyboard event that triggered the action."
                 }
               ],
-              "description": "Handles the keyup event for the menu item.\nIf the Space key is released, it triggers a click event on the menu item.\nThis allows keyboard users to activate the menu item using the Space key.\nIt also prevents the default action of the Space key to avoid scrolling the page.",
+              "description": "Handles the keyup event for the menu item.\nIf the Space key is released, it triggers a click event on the menu item.\nThis allows keyboard users to activate the menu item using the Space key.\nIt also prevents the default action of the Space key to avoid scrolling the page.\n\nThis follows the native behaviour, actionable element can be triggered by Space\nkey on the keyup event.\n\nNote: Action triggered by Enter on the keydown event.",
               "inheritedFrom": {
                 "name": "MenuItem",
                 "module": "components/menuitem/menuitem.component.js"
@@ -23856,6 +23971,17 @@
               "attribute": "offset",
               "reflects": true
             },
+            {
+              "kind": "field",
+              "name": "boundaryPadding",
+              "type": {
+                "text": "number"
+              },
+              "description": "Virtual padding around the boundary to check for overflow.",
+              "default": "16",
+              "attribute": "boundary-padding",
+              "reflects": true
+            },
             {
               "kind": "field",
               "name": "focusTrap",
@@ -24876,6 +25002,15 @@
               "default": "4",
               "fieldName": "offset"
             },
+            {
+              "name": "boundary-padding",
+              "type": {
+                "text": "number"
+              },
+              "description": "Virtual padding around the boundary to check for overflow.",
+              "default": "16",
+              "fieldName": "boundaryPadding"
+            },
             {
               "name": "focus-trap",
               "type": {
@@ -29953,6 +30088,193 @@
         }
       ]
     },
+    {
+      "kind": "javascript-module",
+      "path": "components/sidenavigation/sidenavigation.component.js",
+      "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",
+          "name": "SideNavigation",
+          "cssProperties": [
+            {
+              "description": "width of the sideNavigation when expanded",
+              "name": "--mdc-sidenavigation-expanded-width"
+            },
+            {
+              "description": "width of the sideNavigation when collpased",
+              "name": "--mdc-sidenavigation-collapsed-width"
+            }
+          ],
+          "slots": [
+            {
+              "description": "Slot for the scrollable content area of the side navigation.",
+              "name": "scrollable-section"
+            },
+            {
+              "description": "Slot for the fixed content area of the side navigation.",
+              "name": "fixed-section"
+            },
+            {
+              "description": "Slot for the brand logo (e.g., icon or img).",
+              "name": "brand-logo"
+            }
+          ],
+          "members": [
+            {
+              "kind": "field",
+              "name": "Context",
+              "privacy": "public",
+              "static": true,
+              "readonly": true
+            },
+            {
+              "kind": "field",
+              "name": "variant",
+              "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.",
+              "default": "flexible",
+              "attribute": "variant",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "footerText",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "description": "Displays footer text in the bottom section of the sidenavigation.",
+              "attribute": "footer-text",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "grabberBtnAriaLabel",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "Provides an accessible label for the grabber button.\nThis value is used to set the `aria-label` attribute for the button.",
+              "default": "''",
+              "attribute": "grabber-btn-aria-label",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "parentNavTooltipText",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "Tooltip text shown on parent nav items when a child is active.",
+              "attribute": "parent-nav-tooltip-text",
+              "reflects": true
+            },
+            {
+              "kind": "method",
+              "name": "updateContext",
+              "privacy": "protected",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "description": "Update all observing components of this\nprovider to update the values\n\nIs called on every re-render, see Provider class"
+            },
+            {
+              "kind": "field",
+              "name": "navMenuItems",
+              "type": {
+                "text": "NavMenuItem[]"
+              },
+              "privacy": "private",
+              "description": "Returns all nested, non-disabled mdc-navmenuitem elements inside this component.",
+              "readonly": true
+            },
+            {
+              "kind": "method",
+              "name": "preventScrollOnSpace",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "event",
+                  "type": {
+                    "text": "KeyboardEvent"
+                  }
+                }
+              ]
+            }
+          ],
+          "events": [
+            {
+              "description": "(React: onActiveChange) Dispatched when the active state of the navmenuitem changes.",
+              "name": "activechange",
+              "reactName": "onActiveChange"
+            }
+          ],
+          "attributes": [
+            {
+              "name": "variant",
+              "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.",
+              "default": "flexible",
+              "fieldName": "variant"
+            },
+            {
+              "name": "footer-text",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "description": "Displays footer text in the bottom section of the sidenavigation.",
+              "fieldName": "footerText"
+            },
+            {
+              "name": "grabber-btn-aria-label",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "Provides an accessible label for the grabber button.\nThis value is used to set the `aria-label` attribute for the button.",
+              "default": "''",
+              "fieldName": "grabberBtnAriaLabel"
+            },
+            {
+              "name": "parent-nav-tooltip-text",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "Tooltip text shown on parent nav items when a child is active.",
+              "fieldName": "parentNavTooltipText"
+            }
+          ],
+          "superclass": {
+            "name": "Provider",
+            "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 * @cssproperty --mdc-sidenavigation-expanded-width - width of the sideNavigation when expanded\n * @cssproperty --mdc-sidenavigation-collapsed-width - width of the sideNavigation when collpased\n */",
+          "customElement": true
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "default",
+          "declaration": {
+            "name": "SideNavigation",
+            "module": "components/sidenavigation/sidenavigation.component.js"
+          }
+        }
+      ]
+    },
     {
       "kind": "javascript-module",
       "path": "components/skeleton/skeleton.component.js",
@@ -30168,193 +30490,6 @@
         }
       ]
     },
-    {
-      "kind": "javascript-module",
-      "path": "components/sidenavigation/sidenavigation.component.js",
-      "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",
-          "name": "SideNavigation",
-          "cssProperties": [
-            {
-              "description": "width of the sideNavigation when expanded",
-              "name": "--mdc-sidenavigation-expanded-width"
-            },
-            {
-              "description": "width of the sideNavigation when collpased",
-              "name": "--mdc-sidenavigation-collapsed-width"
-            }
-          ],
-          "slots": [
-            {
-              "description": "Slot for the scrollable content area of the side navigation.",
-              "name": "scrollable-section"
-            },
-            {
-              "description": "Slot for the fixed content area of the side navigation.",
-              "name": "fixed-section"
-            },
-            {
-              "description": "Slot for the brand logo (e.g., icon or img).",
-              "name": "brand-logo"
-            }
-          ],
-          "members": [
-            {
-              "kind": "field",
-              "name": "Context",
-              "privacy": "public",
-              "static": true,
-              "readonly": true
-            },
-            {
-              "kind": "field",
-              "name": "variant",
-              "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.",
-              "default": "flexible",
-              "attribute": "variant",
-              "reflects": true
-            },
-            {
-              "kind": "field",
-              "name": "footerText",
-              "type": {
-                "text": "string"
-              },
-              "default": "''",
-              "description": "Displays footer text in the bottom section of the sidenavigation.",
-              "attribute": "footer-text",
-              "reflects": true
-            },
-            {
-              "kind": "field",
-              "name": "grabberBtnAriaLabel",
-              "type": {
-                "text": "string | undefined"
-              },
-              "description": "Provides an accessible label for the grabber button.\nThis value is used to set the `aria-label` attribute for the button.",
-              "default": "''",
-              "attribute": "grabber-btn-aria-label",
-              "reflects": true
-            },
-            {
-              "kind": "field",
-              "name": "parentNavTooltipText",
-              "type": {
-                "text": "string | undefined"
-              },
-              "description": "Tooltip text shown on parent nav items when a child is active.",
-              "attribute": "parent-nav-tooltip-text",
-              "reflects": true
-            },
-            {
-              "kind": "method",
-              "name": "updateContext",
-              "privacy": "protected",
-              "return": {
-                "type": {
-                  "text": "void"
-                }
-              },
-              "description": "Update all observing components of this\nprovider to update the values\n\nIs called on every re-render, see Provider class"
-            },
-            {
-              "kind": "field",
-              "name": "navMenuItems",
-              "type": {
-                "text": "NavMenuItem[]"
-              },
-              "privacy": "private",
-              "description": "Returns all nested, non-disabled mdc-navmenuitem elements inside this component.",
-              "readonly": true
-            },
-            {
-              "kind": "method",
-              "name": "preventScrollOnSpace",
-              "privacy": "private",
-              "return": {
-                "type": {
-                  "text": "void"
-                }
-              },
-              "parameters": [
-                {
-                  "name": "event",
-                  "type": {
-                    "text": "KeyboardEvent"
-                  }
-                }
-              ]
-            }
-          ],
-          "events": [
-            {
-              "description": "(React: onActiveChange) Dispatched when the active state of the navmenuitem changes.",
-              "name": "activechange",
-              "reactName": "onActiveChange"
-            }
-          ],
-          "attributes": [
-            {
-              "name": "variant",
-              "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.",
-              "default": "flexible",
-              "fieldName": "variant"
-            },
-            {
-              "name": "footer-text",
-              "type": {
-                "text": "string"
-              },
-              "default": "''",
-              "description": "Displays footer text in the bottom section of the sidenavigation.",
-              "fieldName": "footerText"
-            },
-            {
-              "name": "grabber-btn-aria-label",
-              "type": {
-                "text": "string | undefined"
-              },
-              "description": "Provides an accessible label for the grabber button.\nThis value is used to set the `aria-label` attribute for the button.",
-              "default": "''",
-              "fieldName": "grabberBtnAriaLabel"
-            },
-            {
-              "name": "parent-nav-tooltip-text",
-              "type": {
-                "text": "string | undefined"
-              },
-              "description": "Tooltip text shown on parent nav items when a child is active.",
-              "fieldName": "parentNavTooltipText"
-            }
-          ],
-          "superclass": {
-            "name": "Provider",
-            "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 * @cssproperty --mdc-sidenavigation-expanded-width - width of the sideNavigation when expanded\n * @cssproperty --mdc-sidenavigation-collapsed-width - width of the sideNavigation when collpased\n */",
-          "customElement": true
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "default",
-          "declaration": {
-            "name": "SideNavigation",
-            "module": "components/sidenavigation/sidenavigation.component.js"
-          }
-        }
-      ]
-    },
     {
       "kind": "javascript-module",
       "path": "components/staticcheckbox/staticcheckbox.component.js",
@@ -34370,6 +34505,21 @@
                 "module": "components/popover/popover.component.js"
               }
             },
+            {
+              "kind": "field",
+              "name": "boundaryPadding",
+              "type": {
+                "text": "number"
+              },
+              "description": "Virtual padding around the boundary to check for overflow.",
+              "default": "16",
+              "attribute": "boundary-padding",
+              "reflects": true,
+              "inheritedFrom": {
+                "name": "Popover",
+                "module": "components/popover/popover.component.js"
+              }
+            },
             {
               "kind": "field",
               "name": "showArrow",
@@ -35065,6 +35215,19 @@
                 "module": "src/components/popover/popover.component.ts"
               }
             },
+            {
+              "name": "boundary-padding",
+              "type": {
+                "text": "number"
+              },
+              "description": "Virtual padding around the boundary to check for overflow.",
+              "default": "16",
+              "fieldName": "boundaryPadding",
+              "inheritedFrom": {
+                "name": "Popover",
+                "module": "src/components/popover/popover.component.ts"
+              }
+            },
             {
               "name": "focus-trap",
               "type": {
@@ -36221,6 +36384,21 @@
                 "module": "components/popover/popover.component.js"
               }
             },
+            {
+              "kind": "field",
+              "name": "boundaryPadding",
+              "type": {
+                "text": "number"
+              },
+              "description": "Virtual padding around the boundary to check for overflow.",
+              "default": "16",
+              "attribute": "boundary-padding",
+              "reflects": true,
+              "inheritedFrom": {
+                "name": "Popover",
+                "module": "components/popover/popover.component.js"
+              }
+            },
             {
               "kind": "field",
               "name": "showArrow",
@@ -36917,6 +37095,19 @@
                 "module": "src/components/popover/popover.component.ts"
               }
             },
+            {
+              "name": "boundary-padding",
+              "type": {
+                "text": "number"
+              },
+              "description": "Virtual padding around the boundary to check for overflow.",
+              "default": "16",
+              "fieldName": "boundaryPadding",
+              "inheritedFrom": {
+                "name": "Popover",
+                "module": "src/components/popover/popover.component.ts"
+              }
+            },
             {
               "name": "focus-trap",
               "type": {