@momentum-design/components 0.92.1 → 0.92.2

package/dist/custom-elements.json

@@ -8554,14 +8554,44 @@
                 "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": "number"
+                "text": "undefined | number"
               },
-              "description": "Virtual padding around the boundary to check for overflow.",
-              "default": "16",
+              "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": {
@@ -9250,13 +9280,39 @@
                 "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": "number"
+                "text": "undefined | number"
               },
-              "description": "Virtual padding around the boundary to check for overflow.",
-              "default": "16",
+              "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",
@@ -19244,14 +19300,44 @@
                 "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": "number"
+                "text": "undefined | number"
               },
-              "description": "Virtual padding around the boundary to check for overflow.",
-              "default": "16",
+              "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": {
@@ -19904,13 +19990,39 @@
                 "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": "number"
+                "text": "undefined | number"
               },
-              "description": "Virtual padding around the boundary to check for overflow.",
-              "default": "16",
+              "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",
@@ -23971,14 +24083,36 @@
               "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": "number"
+                "text": "undefined | number"
               },
-              "description": "Virtual padding around the boundary to check for overflow.",
-              "default": "16",
+              "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
             },
@@ -25002,13 +25136,31 @@
               "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": "number"
+                "text": "undefined | number"
               },
-              "description": "Virtual padding around the boundary to check for overflow.",
-              "default": "16",
+              "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"
             },
             {
@@ -30784,271 +30936,97 @@
     },
     {
       "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 for inactive glass tab in pressed state.",
+              "name": "--mdc-tab-glass-inactive-background-color-pressed"
             },
             {
-              "description": "Background color of the icon in normal state",
-              "name": "--mdc-statictoggle-icon-background-color-normal"
+              "description": "Text and icon color for inactive glass tab.",
+              "name": "--mdc-tab-glass-inactive-color"
             },
             {
-              "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": [
+              "description": "Text and icon color for inactive glass tab in disabled state.",
+              "name": "--mdc-tab-glass-inactive-color-disabled"
+            },
             {
-              "kind": "field",
-              "name": "checked",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "Determines whether the toggle is active or inactive.",
-              "attribute": "checked",
-              "reflects": true
+              "description": "Background color for active line tab in pressed state.",
+              "name": "--mdc-tab-line-active-background-color-pressed"
             },
             {
-              "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
+              "description": "Background color for active line tab in disabled state.",
+              "name": "--mdc-tab-line-active-background-color-disabled"
             },
             {
-              "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": [
+              "description": "Background color for active line tab in hover state.",
+              "name": "--mdc-tab-line-active-background-color-hover"
+            },
             {
-              "name": "checked",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "Determines whether the toggle is active or inactive.",
-              "fieldName": "checked"
+              "description": "Background color for active line tab in rest state.",
+              "name": "--mdc-tab-line-active-background-color-normal"
             },
             {
-              "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"
+              "description": "Text and icon color for active line tab.",
+              "name": "--mdc-tab-line-active-color"
             },
             {
-              "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": "Text and icon color for inactive glass tab.",
-              "name": "--mdc-tab-glass-inactive-color"
-            },
-            {
-              "description": "Text and icon color for inactive glass tab in disabled state.",
-              "name": "--mdc-tab-glass-inactive-color-disabled"
-            },
-            {
-              "description": "Background color for active line tab in pressed state.",
-              "name": "--mdc-tab-line-active-background-color-pressed"
-            },
-            {
-              "description": "Background color for active line tab in disabled state.",
-              "name": "--mdc-tab-line-active-background-color-disabled"
-            },
-            {
-              "description": "Background color for active line tab in hover state.",
-              "name": "--mdc-tab-line-active-background-color-hover"
-            },
-            {
-              "description": "Background color for active line tab in rest state.",
-              "name": "--mdc-tab-line-active-background-color-normal"
-            },
-            {
-              "description": "Text and icon color for active line tab.",
-              "name": "--mdc-tab-line-active-color"
-            },
-            {
-              "description": "Text and icon color for active line tab in disabled state.",
-              "name": "--mdc-tab-line-active-color-disabled"
-            },
+              "description": "Text and icon color for active line tab in disabled state.",
+              "name": "--mdc-tab-line-active-color-disabled"
+            },
             {
               "description": "color for indicator in active line tab.",
               "name": "--mdc-tab-line-active-indicator-color"
@@ -31765,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",
@@ -34505,14 +34657,44 @@
                 "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": "number"
+                "text": "undefined | number"
               },
-              "description": "Virtual padding around the boundary to check for overflow.",
-              "default": "16",
+              "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": {
@@ -35215,13 +35397,39 @@
                 "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": "number"
+                "text": "undefined | number"
               },
-              "description": "Virtual padding around the boundary to check for overflow.",
-              "default": "16",
+              "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",
@@ -36384,14 +36592,44 @@
                 "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": "number"
+                "text": "undefined | number"
               },
-              "description": "Virtual padding around the boundary to check for overflow.",
-              "default": "16",
+              "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": {
@@ -37095,13 +37333,39 @@
                 "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": "number"
+                "text": "undefined | number"
               },
-              "description": "Virtual padding around the boundary to check for overflow.",
-              "default": "16",
+              "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",