@momentum-design/components 0.92.0 → 0.92.2

package/dist/custom-elements.json

@@ -8554,6 +8554,51 @@
                 "module": "components/popover/popover.component.js"
               }
             },
+            {
+              "kind": "field",
+              "name": "boundary",
+              "type": {
+                "text": "'clippingAncestors' | string"
+              },
+              "description": "This describes the clipping element(s) or area that overflow will be checked relative to.\nThe default is 'clippingAncestors', which are the overflow ancestors which will cause the\nelement to be clipped.\n\nPossible values:\n - 'clippingAncestors'\n - any css selector",
+              "default": "'clippingAncestors'",
+              "attribute": "boundary",
+              "reflects": true,
+              "inheritedFrom": {
+                "name": "Popover",
+                "module": "components/popover/popover.component.js"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "boundaryRoot",
+              "type": {
+                "text": "'viewport' | 'document'"
+              },
+              "description": "This describes the root boundary that the element will be checked for overflow relative to.\nThe default is 'viewport', which is the area of the page the user can see on the screen.\n\nThe other string option is 'document', which is the entire page outside the viewport.",
+              "default": "'viewport'",
+              "attribute": "boundary-root",
+              "reflects": true,
+              "inheritedFrom": {
+                "name": "Popover",
+                "module": "components/popover/popover.component.js"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "boundaryPadding",
+              "type": {
+                "text": "undefined | number"
+              },
+              "description": "Virtual padding around the boundary to check for overflow.\nSo the popover will not be placed on top of the edge of the boundary.\n\nDefault works well for most cases, but you can set this to customise it when necessary.",
+              "default": "undefined",
+              "attribute": "boundary-padding",
+              "reflects": true,
+              "inheritedFrom": {
+                "name": "Popover",
+                "module": "components/popover/popover.component.js"
+              }
+            },
             {
               "kind": "field",
               "name": "interactive",
@@ -9235,6 +9280,45 @@
                 "module": "src/components/popover/popover.component.ts"
               }
             },
+            {
+              "name": "boundary",
+              "type": {
+                "text": "'clippingAncestors' | string"
+              },
+              "description": "This describes the clipping element(s) or area that overflow will be checked relative to.\nThe default is 'clippingAncestors', which are the overflow ancestors which will cause the\nelement to be clipped.\n\nPossible values:\n - 'clippingAncestors'\n - any css selector",
+              "default": "'clippingAncestors'",
+              "fieldName": "boundary",
+              "inheritedFrom": {
+                "name": "Popover",
+                "module": "src/components/popover/popover.component.ts"
+              }
+            },
+            {
+              "name": "boundary-root",
+              "type": {
+                "text": "'viewport' | 'document'"
+              },
+              "description": "This describes the root boundary that the element will be checked for overflow relative to.\nThe default is 'viewport', which is the area of the page the user can see on the screen.\n\nThe other string option is 'document', which is the entire page outside the viewport.",
+              "default": "'viewport'",
+              "fieldName": "boundaryRoot",
+              "inheritedFrom": {
+                "name": "Popover",
+                "module": "src/components/popover/popover.component.ts"
+              }
+            },
+            {
+              "name": "boundary-padding",
+              "type": {
+                "text": "undefined | number"
+              },
+              "description": "Virtual padding around the boundary to check for overflow.\nSo the popover will not be placed on top of the edge of the boundary.\n\nDefault works well for most cases, but you can set this to customise it when necessary.",
+              "default": "undefined",
+              "fieldName": "boundaryPadding",
+              "inheritedFrom": {
+                "name": "Popover",
+                "module": "src/components/popover/popover.component.ts"
+              }
+            },
             {
               "name": "focus-trap",
               "type": {
@@ -15800,7 +15884,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 +15908,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 +16744,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 +16768,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 +17658,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 +17682,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 +18363,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 +18395,15 @@
                 "module": "components/popover/popover.component.js"
               }
             },
+            {
+              "kind": "field",
+              "name": "menuItems",
+              "type": {
+                "text": "Array<HTMLElement>"
+              },
+              "privacy": "private",
+              "default": "[]"
+            },
             {
               "kind": "method",
               "name": "isOpenUpdated",
@@ -18340,6 +18433,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 +18562,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 +18637,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 +19300,51 @@
                 "module": "components/popover/popover.component.js"
               }
             },
+            {
+              "kind": "field",
+              "name": "boundary",
+              "type": {
+                "text": "'clippingAncestors' | string"
+              },
+              "description": "This describes the clipping element(s) or area that overflow will be checked relative to.\nThe default is 'clippingAncestors', which are the overflow ancestors which will cause the\nelement to be clipped.\n\nPossible values:\n - 'clippingAncestors'\n - any css selector",
+              "default": "'clippingAncestors'",
+              "attribute": "boundary",
+              "reflects": true,
+              "inheritedFrom": {
+                "name": "Popover",
+                "module": "components/popover/popover.component.js"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "boundaryRoot",
+              "type": {
+                "text": "'viewport' | 'document'"
+              },
+              "description": "This describes the root boundary that the element will be checked for overflow relative to.\nThe default is 'viewport', which is the area of the page the user can see on the screen.\n\nThe other string option is 'document', which is the entire page outside the viewport.",
+              "default": "'viewport'",
+              "attribute": "boundary-root",
+              "reflects": true,
+              "inheritedFrom": {
+                "name": "Popover",
+                "module": "components/popover/popover.component.js"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "boundaryPadding",
+              "type": {
+                "text": "undefined | number"
+              },
+              "description": "Virtual padding around the boundary to check for overflow.\nSo the popover will not be placed on top of the edge of the boundary.\n\nDefault works well for most cases, but you can set this to customise it when necessary.",
+              "default": "undefined",
+              "attribute": "boundary-padding",
+              "reflects": true,
+              "inheritedFrom": {
+                "name": "Popover",
+                "module": "components/popover/popover.component.js"
+              }
+            },
             {
               "kind": "field",
               "name": "showArrow",
@@ -19802,6 +19990,45 @@
                 "module": "src/components/popover/popover.component.ts"
               }
             },
+            {
+              "name": "boundary",
+              "type": {
+                "text": "'clippingAncestors' | string"
+              },
+              "description": "This describes the clipping element(s) or area that overflow will be checked relative to.\nThe default is 'clippingAncestors', which are the overflow ancestors which will cause the\nelement to be clipped.\n\nPossible values:\n - 'clippingAncestors'\n - any css selector",
+              "default": "'clippingAncestors'",
+              "fieldName": "boundary",
+              "inheritedFrom": {
+                "name": "Popover",
+                "module": "src/components/popover/popover.component.ts"
+              }
+            },
+            {
+              "name": "boundary-root",
+              "type": {
+                "text": "'viewport' | 'document'"
+              },
+              "description": "This describes the root boundary that the element will be checked for overflow relative to.\nThe default is 'viewport', which is the area of the page the user can see on the screen.\n\nThe other string option is 'document', which is the entire page outside the viewport.",
+              "default": "'viewport'",
+              "fieldName": "boundaryRoot",
+              "inheritedFrom": {
+                "name": "Popover",
+                "module": "src/components/popover/popover.component.ts"
+              }
+            },
+            {
+              "name": "boundary-padding",
+              "type": {
+                "text": "undefined | number"
+              },
+              "description": "Virtual padding around the boundary to check for overflow.\nSo the popover will not be placed on top of the edge of the boundary.\n\nDefault works well for most cases, but you can set this to customise it when necessary.",
+              "default": "undefined",
+              "fieldName": "boundaryPadding",
+              "inheritedFrom": {
+                "name": "Popover",
+                "module": "src/components/popover/popover.component.ts"
+              }
+            },
             {
               "name": "focus-trap",
               "type": {
@@ -20094,7 +20321,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 +20886,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 +20910,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 +24083,39 @@
               "attribute": "offset",
               "reflects": true
             },
+            {
+              "kind": "field",
+              "name": "boundary",
+              "type": {
+                "text": "'clippingAncestors' | string"
+              },
+              "description": "This describes the clipping element(s) or area that overflow will be checked relative to.\nThe default is 'clippingAncestors', which are the overflow ancestors which will cause the\nelement to be clipped.\n\nPossible values:\n - 'clippingAncestors'\n - any css selector",
+              "default": "'clippingAncestors'",
+              "attribute": "boundary",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "boundaryRoot",
+              "type": {
+                "text": "'viewport' | 'document'"
+              },
+              "description": "This describes the root boundary that the element will be checked for overflow relative to.\nThe default is 'viewport', which is the area of the page the user can see on the screen.\n\nThe other string option is 'document', which is the entire page outside the viewport.",
+              "default": "'viewport'",
+              "attribute": "boundary-root",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "boundaryPadding",
+              "type": {
+                "text": "undefined | number"
+              },
+              "description": "Virtual padding around the boundary to check for overflow.\nSo the popover will not be placed on top of the edge of the boundary.\n\nDefault works well for most cases, but you can set this to customise it when necessary.",
+              "default": "undefined",
+              "attribute": "boundary-padding",
+              "reflects": true
+            },
             {
               "kind": "field",
               "name": "focusTrap",
@@ -24876,6 +25136,33 @@
               "default": "4",
               "fieldName": "offset"
             },
+            {
+              "name": "boundary",
+              "type": {
+                "text": "'clippingAncestors' | string"
+              },
+              "description": "This describes the clipping element(s) or area that overflow will be checked relative to.\nThe default is 'clippingAncestors', which are the overflow ancestors which will cause the\nelement to be clipped.\n\nPossible values:\n - 'clippingAncestors'\n - any css selector",
+              "default": "'clippingAncestors'",
+              "fieldName": "boundary"
+            },
+            {
+              "name": "boundary-root",
+              "type": {
+                "text": "'viewport' | 'document'"
+              },
+              "description": "This describes the root boundary that the element will be checked for overflow relative to.\nThe default is 'viewport', which is the area of the page the user can see on the screen.\n\nThe other string option is 'document', which is the entire page outside the viewport.",
+              "default": "'viewport'",
+              "fieldName": "boundaryRoot"
+            },
+            {
+              "name": "boundary-padding",
+              "type": {
+                "text": "undefined | number"
+              },
+              "description": "Virtual padding around the boundary to check for overflow.\nSo the popover will not be placed on top of the edge of the boundary.\n\nDefault works well for most cases, but you can set this to customise it when necessary.",
+              "default": "undefined",
+              "fieldName": "boundaryPadding"
+            },
             {
               "name": "focus-trap",
               "type": {
@@ -30649,238 +30936,64 @@
     },
     {
       "kind": "javascript-module",
-      "path": "components/statictoggle/statictoggle.component.js",
+      "path": "components/tab/tab.component.js",
       "declarations": [
         {
           "kind": "class",
-          "description": "This is a decorative component that is styled to look as a toggle. <br/>\nIt has 3 properties - checked, size and disabled. <br/>\nWe are using the same styling that has been created for the `mdc-toggle` component.",
-          "name": "StaticToggle",
+          "description": "`mdc-tab` is Tab component to be used within the Tabgroup.\n\nPassing in the attribute `text` to the tab component is changing the text displayed in the tab.\n\nPass attribute `tabid` when using inside of `tablist` component.\n\nThe `slot=\"badge\"` can be used to add a badge to the tab.\n\nThe `slot=\"chip\"` can be used to add a chip to the tab.\n\nFor `icon`, the `mdc-icon` component is used to render the icon.\n\nNote: Icons can be used in conjunction with badges or chips.\nBadges and chips should not be used at the same time.",
+          "name": "Tab",
           "cssProperties": [
             {
-              "description": "Width of the toggle",
-              "name": "--mdc-statictoggle-width"
+              "description": "Gap between the badge(if provided), icon and text.",
+              "name": "--mdc-tab-content-gap"
             },
             {
-              "description": "Height of the toggle",
-              "name": "--mdc-statictoggle-height"
+              "description": "Height of the tab.",
+              "name": "--mdc-tab-height"
             },
             {
-              "description": "Width of the toggle when it's size is compact",
-              "name": "--mdc-statictoggle-width-compact"
+              "description": "Background color for active glass tab in disabled state.",
+              "name": "--mdc-tab-glass-active-background-color-disabled"
             },
             {
-              "description": "Height of the toggle when it's size is compact",
-              "name": "--mdc-statictoggle-height-compact"
+              "description": "Background color for active glass tab in hover state.",
+              "name": "--mdc-tab-glass-active-background-color-hover"
             },
             {
-              "description": "Border radius of the toggle",
-              "name": "--mdc-statictoggle-border-radius"
+              "description": "Background color for active glass tab in rest state.",
+              "name": "--mdc-tab-glass-active-background-color-normal"
             },
             {
-              "description": "Border radius of the toggle when it's size is compact",
-              "name": "--mdc-statictoggle-border-radius-compact"
+              "description": "Background color for active glass tab in pressed state.",
+              "name": "--mdc-tab-glass-active-background-color-pressed"
             },
             {
-              "description": "Border of the toggle",
-              "name": "--mdc-statictoggle-border"
+              "description": "Text and icon color for active glass tab.",
+              "name": "--mdc-tab-glass-active-color"
             },
             {
-              "description": "Background color of the inactive toggle in rest state",
-              "name": "--mdc-statictoggle-inactive-rest-color"
+              "description": "Text and icon color for active glass tab in disabled state.",
+              "name": "--mdc-tab-glass-active-color-disabled"
             },
             {
-              "description": "Background color of the inactive toggle in disabled state",
-              "name": "--mdc-statictoggle-inactive-disabled-color"
+              "description": "Border radius for glass tab.",
+              "name": "--mdc-tab-glass-border-radius"
             },
             {
-              "description": "Background color of the active toggle in rest state",
-              "name": "--mdc-statictoggle-active-rest-color"
+              "description": "Background color for inactive glass tab in disabled state.",
+              "name": "--mdc-tab-glass-inactive-background-color-disabled"
             },
             {
-              "description": "Background color of the active toggle in disabled state",
-              "name": "--mdc-statictoggle-active-disabled-color"
+              "description": "Background color for inactive glass tab in hover state.",
+              "name": "--mdc-tab-glass-inactive-background-color-hover"
             },
             {
-              "description": "Color of the icon in normal state",
-              "name": "--mdc-statictoggle-icon-color-normal"
+              "description": "Background color for inactive glass tab in rest state.",
+              "name": "--mdc-tab-glass-inactive-background-color-normal"
             },
             {
-              "description": "Color of the icon in disabled state",
-              "name": "--mdc-statictoggle-icon-color-disabled"
-            },
-            {
-              "description": "Background color of the icon in normal state",
-              "name": "--mdc-statictoggle-icon-background-color-normal"
-            },
-            {
-              "description": "Background color of the icon in disabled state",
-              "name": "--mdc-statictoggle-icon-background-color-disabled"
-            }
-          ],
-          "slots": [
-            {
-              "description": "This is a default/unnamed slot",
-              "name": "default"
-            }
-          ],
-          "members": [
-            {
-              "kind": "field",
-              "name": "checked",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "Determines whether the toggle is active or inactive.",
-              "attribute": "checked",
-              "reflects": true
-            },
-            {
-              "kind": "field",
-              "name": "size",
-              "type": {
-                "text": "ToggleSize"
-              },
-              "description": "Determines toggle size in rem (height is specified here).\n- **Default**: 1.5\n- **Compact**: 1",
-              "default": "default",
-              "attribute": "size",
-              "reflects": true
-            },
-            {
-              "kind": "field",
-              "name": "disabled",
-              "type": {
-                "text": "boolean | undefined"
-              },
-              "description": "Indicates whether the component is disabled.\nWhen the component is disabled for user interaction; it is not focusable or clickable.",
-              "default": "undefined",
-              "attribute": "disabled",
-              "reflects": true,
-              "inheritedFrom": {
-                "name": "DisabledMixin",
-                "module": "utils/mixins/DisabledMixin.js"
-              }
-            }
-          ],
-          "attributes": [
-            {
-              "name": "checked",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "Determines whether the toggle is active or inactive.",
-              "fieldName": "checked"
-            },
-            {
-              "name": "size",
-              "type": {
-                "text": "ToggleSize"
-              },
-              "description": "Determines toggle size in rem (height is specified here).\n- **Default**: 1.5\n- **Compact**: 1",
-              "default": "default",
-              "fieldName": "size"
-            },
-            {
-              "name": "disabled",
-              "type": {
-                "text": "boolean | undefined"
-              },
-              "description": "Indicates whether the component is disabled.\nWhen the component is disabled for user interaction; it is not focusable or clickable.",
-              "default": "undefined",
-              "fieldName": "disabled",
-              "inheritedFrom": {
-                "name": "DisabledMixin",
-                "module": "src/utils/mixins/DisabledMixin.ts"
-              }
-            }
-          ],
-          "mixins": [
-            {
-              "name": "DisabledMixin",
-              "module": "/src/utils/mixins/DisabledMixin"
-            }
-          ],
-          "superclass": {
-            "name": "Component",
-            "module": "/src/models"
-          },
-          "tagName": "mdc-statictoggle",
-          "jsDoc": "/**\n * This is a decorative component that is styled to look as a toggle. <br/>\n * It has 3 properties - checked, size and disabled. <br/>\n * We are using the same styling that has been created for the `mdc-toggle` component.\n *\n * @dependency mdc-icon\n *\n * @tagname mdc-statictoggle\n *\n * @slot default - This is a default/unnamed slot\n *\n * @cssproperty --mdc-statictoggle-width - Width of the toggle\n * @cssproperty --mdc-statictoggle-height - Height of the toggle\n * @cssproperty --mdc-statictoggle-width-compact - Width of the toggle when it's size is compact\n * @cssproperty --mdc-statictoggle-height-compact - Height of the toggle when it's size is compact\n * @cssproperty --mdc-statictoggle-border-radius - Border radius of the toggle\n * @cssproperty --mdc-statictoggle-border-radius-compact - Border radius of the toggle when it's size is compact\n * @cssproperty --mdc-statictoggle-border - Border of the toggle\n * @cssproperty --mdc-statictoggle-inactive-rest-color - Background color of the inactive toggle in rest state\n * @cssproperty --mdc-statictoggle-inactive-disabled-color - Background color of the inactive toggle in disabled state\n * @cssproperty --mdc-statictoggle-active-rest-color - Background color of the active toggle in rest state\n * @cssproperty --mdc-statictoggle-active-disabled-color - Background color of the active toggle in disabled state\n * @cssproperty --mdc-statictoggle-icon-color-normal - Color of the icon in normal state\n * @cssproperty --mdc-statictoggle-icon-color-disabled - Color of the icon in disabled state\n * @cssproperty --mdc-statictoggle-icon-background-color-normal - Background color of the icon in normal state\n * @cssproperty --mdc-statictoggle-icon-background-color-disabled - Background color of the icon in disabled state\n */",
-          "customElement": true
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "default",
-          "declaration": {
-            "name": "StaticToggle",
-            "module": "components/statictoggle/statictoggle.component.js"
-          }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "components/tab/tab.component.js",
-      "declarations": [
-        {
-          "kind": "class",
-          "description": "`mdc-tab` is Tab component to be used within the Tabgroup.\n\nPassing in the attribute `text` to the tab component is changing the text displayed in the tab.\n\nPass attribute `tabid` when using inside of `tablist` component.\n\nThe `slot=\"badge\"` can be used to add a badge to the tab.\n\nThe `slot=\"chip\"` can be used to add a chip to the tab.\n\nFor `icon`, the `mdc-icon` component is used to render the icon.\n\nNote: Icons can be used in conjunction with badges or chips.\nBadges and chips should not be used at the same time.",
-          "name": "Tab",
-          "cssProperties": [
-            {
-              "description": "Gap between the badge(if provided), icon and text.",
-              "name": "--mdc-tab-content-gap"
-            },
-            {
-              "description": "Height of the tab.",
-              "name": "--mdc-tab-height"
-            },
-            {
-              "description": "Background color for active glass tab in disabled state.",
-              "name": "--mdc-tab-glass-active-background-color-disabled"
-            },
-            {
-              "description": "Background color for active glass tab in hover state.",
-              "name": "--mdc-tab-glass-active-background-color-hover"
-            },
-            {
-              "description": "Background color for active glass tab in rest state.",
-              "name": "--mdc-tab-glass-active-background-color-normal"
-            },
-            {
-              "description": "Background color for active glass tab in pressed state.",
-              "name": "--mdc-tab-glass-active-background-color-pressed"
-            },
-            {
-              "description": "Text and icon color for active glass tab.",
-              "name": "--mdc-tab-glass-active-color"
-            },
-            {
-              "description": "Text and icon color for active glass tab in disabled state.",
-              "name": "--mdc-tab-glass-active-color-disabled"
-            },
-            {
-              "description": "Border radius for glass tab.",
-              "name": "--mdc-tab-glass-border-radius"
-            },
-            {
-              "description": "Background color for inactive glass tab in disabled state.",
-              "name": "--mdc-tab-glass-inactive-background-color-disabled"
-            },
-            {
-              "description": "Background color for inactive glass tab in hover state.",
-              "name": "--mdc-tab-glass-inactive-background-color-hover"
-            },
-            {
-              "description": "Background color for inactive glass tab in rest state.",
-              "name": "--mdc-tab-glass-inactive-background-color-normal"
-            },
-            {
-              "description": "Background color for inactive glass tab in pressed state.",
-              "name": "--mdc-tab-glass-inactive-background-color-pressed"
+              "description": "Background color for inactive glass tab in pressed state.",
+              "name": "--mdc-tab-glass-inactive-background-color-pressed"
             },
             {
               "description": "Text and icon color for inactive glass tab.",
@@ -31630,6 +31743,180 @@
         }
       ]
     },
+    {
+      "kind": "javascript-module",
+      "path": "components/statictoggle/statictoggle.component.js",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "This is a decorative component that is styled to look as a toggle. <br/>\nIt has 3 properties - checked, size and disabled. <br/>\nWe are using the same styling that has been created for the `mdc-toggle` component.",
+          "name": "StaticToggle",
+          "cssProperties": [
+            {
+              "description": "Width of the toggle",
+              "name": "--mdc-statictoggle-width"
+            },
+            {
+              "description": "Height of the toggle",
+              "name": "--mdc-statictoggle-height"
+            },
+            {
+              "description": "Width of the toggle when it's size is compact",
+              "name": "--mdc-statictoggle-width-compact"
+            },
+            {
+              "description": "Height of the toggle when it's size is compact",
+              "name": "--mdc-statictoggle-height-compact"
+            },
+            {
+              "description": "Border radius of the toggle",
+              "name": "--mdc-statictoggle-border-radius"
+            },
+            {
+              "description": "Border radius of the toggle when it's size is compact",
+              "name": "--mdc-statictoggle-border-radius-compact"
+            },
+            {
+              "description": "Border of the toggle",
+              "name": "--mdc-statictoggle-border"
+            },
+            {
+              "description": "Background color of the inactive toggle in rest state",
+              "name": "--mdc-statictoggle-inactive-rest-color"
+            },
+            {
+              "description": "Background color of the inactive toggle in disabled state",
+              "name": "--mdc-statictoggle-inactive-disabled-color"
+            },
+            {
+              "description": "Background color of the active toggle in rest state",
+              "name": "--mdc-statictoggle-active-rest-color"
+            },
+            {
+              "description": "Background color of the active toggle in disabled state",
+              "name": "--mdc-statictoggle-active-disabled-color"
+            },
+            {
+              "description": "Color of the icon in normal state",
+              "name": "--mdc-statictoggle-icon-color-normal"
+            },
+            {
+              "description": "Color of the icon in disabled state",
+              "name": "--mdc-statictoggle-icon-color-disabled"
+            },
+            {
+              "description": "Background color of the icon in normal state",
+              "name": "--mdc-statictoggle-icon-background-color-normal"
+            },
+            {
+              "description": "Background color of the icon in disabled state",
+              "name": "--mdc-statictoggle-icon-background-color-disabled"
+            }
+          ],
+          "slots": [
+            {
+              "description": "This is a default/unnamed slot",
+              "name": "default"
+            }
+          ],
+          "members": [
+            {
+              "kind": "field",
+              "name": "checked",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Determines whether the toggle is active or inactive.",
+              "attribute": "checked",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "size",
+              "type": {
+                "text": "ToggleSize"
+              },
+              "description": "Determines toggle size in rem (height is specified here).\n- **Default**: 1.5\n- **Compact**: 1",
+              "default": "default",
+              "attribute": "size",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "disabled",
+              "type": {
+                "text": "boolean | undefined"
+              },
+              "description": "Indicates whether the component is disabled.\nWhen the component is disabled for user interaction; it is not focusable or clickable.",
+              "default": "undefined",
+              "attribute": "disabled",
+              "reflects": true,
+              "inheritedFrom": {
+                "name": "DisabledMixin",
+                "module": "utils/mixins/DisabledMixin.js"
+              }
+            }
+          ],
+          "attributes": [
+            {
+              "name": "checked",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Determines whether the toggle is active or inactive.",
+              "fieldName": "checked"
+            },
+            {
+              "name": "size",
+              "type": {
+                "text": "ToggleSize"
+              },
+              "description": "Determines toggle size in rem (height is specified here).\n- **Default**: 1.5\n- **Compact**: 1",
+              "default": "default",
+              "fieldName": "size"
+            },
+            {
+              "name": "disabled",
+              "type": {
+                "text": "boolean | undefined"
+              },
+              "description": "Indicates whether the component is disabled.\nWhen the component is disabled for user interaction; it is not focusable or clickable.",
+              "default": "undefined",
+              "fieldName": "disabled",
+              "inheritedFrom": {
+                "name": "DisabledMixin",
+                "module": "src/utils/mixins/DisabledMixin.ts"
+              }
+            }
+          ],
+          "mixins": [
+            {
+              "name": "DisabledMixin",
+              "module": "/src/utils/mixins/DisabledMixin"
+            }
+          ],
+          "superclass": {
+            "name": "Component",
+            "module": "/src/models"
+          },
+          "tagName": "mdc-statictoggle",
+          "jsDoc": "/**\n * This is a decorative component that is styled to look as a toggle. <br/>\n * It has 3 properties - checked, size and disabled. <br/>\n * We are using the same styling that has been created for the `mdc-toggle` component.\n *\n * @dependency mdc-icon\n *\n * @tagname mdc-statictoggle\n *\n * @slot default - This is a default/unnamed slot\n *\n * @cssproperty --mdc-statictoggle-width - Width of the toggle\n * @cssproperty --mdc-statictoggle-height - Height of the toggle\n * @cssproperty --mdc-statictoggle-width-compact - Width of the toggle when it's size is compact\n * @cssproperty --mdc-statictoggle-height-compact - Height of the toggle when it's size is compact\n * @cssproperty --mdc-statictoggle-border-radius - Border radius of the toggle\n * @cssproperty --mdc-statictoggle-border-radius-compact - Border radius of the toggle when it's size is compact\n * @cssproperty --mdc-statictoggle-border - Border of the toggle\n * @cssproperty --mdc-statictoggle-inactive-rest-color - Background color of the inactive toggle in rest state\n * @cssproperty --mdc-statictoggle-inactive-disabled-color - Background color of the inactive toggle in disabled state\n * @cssproperty --mdc-statictoggle-active-rest-color - Background color of the active toggle in rest state\n * @cssproperty --mdc-statictoggle-active-disabled-color - Background color of the active toggle in disabled state\n * @cssproperty --mdc-statictoggle-icon-color-normal - Color of the icon in normal state\n * @cssproperty --mdc-statictoggle-icon-color-disabled - Color of the icon in disabled state\n * @cssproperty --mdc-statictoggle-icon-background-color-normal - Background color of the icon in normal state\n * @cssproperty --mdc-statictoggle-icon-background-color-disabled - Background color of the icon in disabled state\n */",
+          "customElement": true
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "default",
+          "declaration": {
+            "name": "StaticToggle",
+            "module": "components/statictoggle/statictoggle.component.js"
+          }
+        }
+      ]
+    },
     {
       "kind": "javascript-module",
       "path": "components/tablist/tablist.component.js",
@@ -34370,6 +34657,51 @@
                 "module": "components/popover/popover.component.js"
               }
             },
+            {
+              "kind": "field",
+              "name": "boundary",
+              "type": {
+                "text": "'clippingAncestors' | string"
+              },
+              "description": "This describes the clipping element(s) or area that overflow will be checked relative to.\nThe default is 'clippingAncestors', which are the overflow ancestors which will cause the\nelement to be clipped.\n\nPossible values:\n - 'clippingAncestors'\n - any css selector",
+              "default": "'clippingAncestors'",
+              "attribute": "boundary",
+              "reflects": true,
+              "inheritedFrom": {
+                "name": "Popover",
+                "module": "components/popover/popover.component.js"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "boundaryRoot",
+              "type": {
+                "text": "'viewport' | 'document'"
+              },
+              "description": "This describes the root boundary that the element will be checked for overflow relative to.\nThe default is 'viewport', which is the area of the page the user can see on the screen.\n\nThe other string option is 'document', which is the entire page outside the viewport.",
+              "default": "'viewport'",
+              "attribute": "boundary-root",
+              "reflects": true,
+              "inheritedFrom": {
+                "name": "Popover",
+                "module": "components/popover/popover.component.js"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "boundaryPadding",
+              "type": {
+                "text": "undefined | number"
+              },
+              "description": "Virtual padding around the boundary to check for overflow.\nSo the popover will not be placed on top of the edge of the boundary.\n\nDefault works well for most cases, but you can set this to customise it when necessary.",
+              "default": "undefined",
+              "attribute": "boundary-padding",
+              "reflects": true,
+              "inheritedFrom": {
+                "name": "Popover",
+                "module": "components/popover/popover.component.js"
+              }
+            },
             {
               "kind": "field",
               "name": "showArrow",
@@ -35065,6 +35397,45 @@
                 "module": "src/components/popover/popover.component.ts"
               }
             },
+            {
+              "name": "boundary",
+              "type": {
+                "text": "'clippingAncestors' | string"
+              },
+              "description": "This describes the clipping element(s) or area that overflow will be checked relative to.\nThe default is 'clippingAncestors', which are the overflow ancestors which will cause the\nelement to be clipped.\n\nPossible values:\n - 'clippingAncestors'\n - any css selector",
+              "default": "'clippingAncestors'",
+              "fieldName": "boundary",
+              "inheritedFrom": {
+                "name": "Popover",
+                "module": "src/components/popover/popover.component.ts"
+              }
+            },
+            {
+              "name": "boundary-root",
+              "type": {
+                "text": "'viewport' | 'document'"
+              },
+              "description": "This describes the root boundary that the element will be checked for overflow relative to.\nThe default is 'viewport', which is the area of the page the user can see on the screen.\n\nThe other string option is 'document', which is the entire page outside the viewport.",
+              "default": "'viewport'",
+              "fieldName": "boundaryRoot",
+              "inheritedFrom": {
+                "name": "Popover",
+                "module": "src/components/popover/popover.component.ts"
+              }
+            },
+            {
+              "name": "boundary-padding",
+              "type": {
+                "text": "undefined | number"
+              },
+              "description": "Virtual padding around the boundary to check for overflow.\nSo the popover will not be placed on top of the edge of the boundary.\n\nDefault works well for most cases, but you can set this to customise it when necessary.",
+              "default": "undefined",
+              "fieldName": "boundaryPadding",
+              "inheritedFrom": {
+                "name": "Popover",
+                "module": "src/components/popover/popover.component.ts"
+              }
+            },
             {
               "name": "focus-trap",
               "type": {
@@ -36221,6 +36592,51 @@
                 "module": "components/popover/popover.component.js"
               }
             },
+            {
+              "kind": "field",
+              "name": "boundary",
+              "type": {
+                "text": "'clippingAncestors' | string"
+              },
+              "description": "This describes the clipping element(s) or area that overflow will be checked relative to.\nThe default is 'clippingAncestors', which are the overflow ancestors which will cause the\nelement to be clipped.\n\nPossible values:\n - 'clippingAncestors'\n - any css selector",
+              "default": "'clippingAncestors'",
+              "attribute": "boundary",
+              "reflects": true,
+              "inheritedFrom": {
+                "name": "Popover",
+                "module": "components/popover/popover.component.js"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "boundaryRoot",
+              "type": {
+                "text": "'viewport' | 'document'"
+              },
+              "description": "This describes the root boundary that the element will be checked for overflow relative to.\nThe default is 'viewport', which is the area of the page the user can see on the screen.\n\nThe other string option is 'document', which is the entire page outside the viewport.",
+              "default": "'viewport'",
+              "attribute": "boundary-root",
+              "reflects": true,
+              "inheritedFrom": {
+                "name": "Popover",
+                "module": "components/popover/popover.component.js"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "boundaryPadding",
+              "type": {
+                "text": "undefined | number"
+              },
+              "description": "Virtual padding around the boundary to check for overflow.\nSo the popover will not be placed on top of the edge of the boundary.\n\nDefault works well for most cases, but you can set this to customise it when necessary.",
+              "default": "undefined",
+              "attribute": "boundary-padding",
+              "reflects": true,
+              "inheritedFrom": {
+                "name": "Popover",
+                "module": "components/popover/popover.component.js"
+              }
+            },
             {
               "kind": "field",
               "name": "showArrow",
@@ -36917,6 +37333,45 @@
                 "module": "src/components/popover/popover.component.ts"
               }
             },
+            {
+              "name": "boundary",
+              "type": {
+                "text": "'clippingAncestors' | string"
+              },
+              "description": "This describes the clipping element(s) or area that overflow will be checked relative to.\nThe default is 'clippingAncestors', which are the overflow ancestors which will cause the\nelement to be clipped.\n\nPossible values:\n - 'clippingAncestors'\n - any css selector",
+              "default": "'clippingAncestors'",
+              "fieldName": "boundary",
+              "inheritedFrom": {
+                "name": "Popover",
+                "module": "src/components/popover/popover.component.ts"
+              }
+            },
+            {
+              "name": "boundary-root",
+              "type": {
+                "text": "'viewport' | 'document'"
+              },
+              "description": "This describes the root boundary that the element will be checked for overflow relative to.\nThe default is 'viewport', which is the area of the page the user can see on the screen.\n\nThe other string option is 'document', which is the entire page outside the viewport.",
+              "default": "'viewport'",
+              "fieldName": "boundaryRoot",
+              "inheritedFrom": {
+                "name": "Popover",
+                "module": "src/components/popover/popover.component.ts"
+              }
+            },
+            {
+              "name": "boundary-padding",
+              "type": {
+                "text": "undefined | number"
+              },
+              "description": "Virtual padding around the boundary to check for overflow.\nSo the popover will not be placed on top of the edge of the boundary.\n\nDefault works well for most cases, but you can set this to customise it when necessary.",
+              "default": "undefined",
+              "fieldName": "boundaryPadding",
+              "inheritedFrom": {
+                "name": "Popover",
+                "module": "src/components/popover/popover.component.ts"
+              }
+            },
             {
               "name": "focus-trap",
               "type": {