@momentum-design/components 0.104.4 → 0.104.5

package/dist/custom-elements.json

@@ -9239,6 +9239,21 @@
                 "module": "components/popover/popover.component.js"
               }
             },
+            {
+              "kind": "field",
+              "name": "zIndex",
+              "type": {
+                "text": "number"
+              },
+              "description": "IMPLEMENT THIS IN YOUR COMPONENT.\n\nThe z-index of the component where the backdrop will be attached to.\nThe backdrop itself will have a z-index of `zIndex - 1`.",
+              "default": "1000",
+              "attribute": "z-index",
+              "reflects": true,
+              "inheritedFrom": {
+                "name": "Popover",
+                "module": "components/popover/popover.component.js"
+              }
+            },
             {
               "kind": "field",
               "name": "preventScroll",
@@ -10042,13 +10057,13 @@
             },
             {
               "kind": "field",
-              "name": "flip",
+              "name": "backdropAppendTo",
               "type": {
-                "text": "boolean"
+                "text": "string | undefined"
               },
-              "description": "Changes the placement of popover to keep it in view when scrolling.",
-              "default": "true",
-              "attribute": "flip",
+              "description": "Element ID the backdrop will be a append to (if `backdrop` is true).",
+              "default": "''",
+              "attribute": "backdrop-append-to",
               "reflects": true,
               "inheritedFrom": {
                 "name": "Popover",
@@ -10057,13 +10072,13 @@
             },
             {
               "kind": "field",
-              "name": "size",
+              "name": "isBackdropInvisible",
               "type": {
-                "text": "boolean"
+                "text": "boolean | undefined"
               },
-              "description": "Changes the size of popover to keep it in view when scrolling.",
+              "description": "Set this property to true to make the backdrop invisible (if `backdrop` is true).\nThis is useful for components that do want a backdrop which stops interaction,\nbut do not want the backdrop to be visible as a overlay.",
               "default": "false",
-              "attribute": "size",
+              "attribute": "is-backdrop-invisible",
               "reflects": true,
               "inheritedFrom": {
                 "name": "Popover",
@@ -10072,13 +10087,28 @@
             },
             {
               "kind": "field",
-              "name": "zIndex",
+              "name": "flip",
               "type": {
-                "text": "number"
+                "text": "boolean"
               },
-              "description": "The z-index of the popover.",
-              "default": "1000",
-              "attribute": "z-index",
+              "description": "Changes the placement of popover to keep it in view when scrolling.",
+              "default": "true",
+              "attribute": "flip",
+              "reflects": true,
+              "inheritedFrom": {
+                "name": "Popover",
+                "module": "components/popover/popover.component.js"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "size",
+              "type": {
+                "text": "boolean"
+              },
+              "description": "Changes the size of popover to keep it in view when scrolling.",
+              "default": "false",
+              "attribute": "size",
               "reflects": true,
               "inheritedFrom": {
                 "name": "Popover",
@@ -10838,6 +10868,32 @@
                 "module": "src/components/popover/popover.component.ts"
               }
             },
+            {
+              "name": "backdrop-append-to",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "Element ID the backdrop will be a append to (if `backdrop` is true).",
+              "default": "''",
+              "fieldName": "backdropAppendTo",
+              "inheritedFrom": {
+                "name": "Popover",
+                "module": "src/components/popover/popover.component.ts"
+              }
+            },
+            {
+              "name": "is-backdrop-invisible",
+              "type": {
+                "text": "boolean | undefined"
+              },
+              "description": "Set this property to true to make the backdrop invisible (if `backdrop` is true).\nThis is useful for components that do want a backdrop which stops interaction,\nbut do not want the backdrop to be visible as a overlay.",
+              "default": "false",
+              "fieldName": "isBackdropInvisible",
+              "inheritedFrom": {
+                "name": "Popover",
+                "module": "src/components/popover/popover.component.ts"
+              }
+            },
             {
               "name": "flip",
               "type": {
@@ -11104,7 +11160,11 @@
               "description": "The z-index of the dialog\n\nThe backdrop will have z-index of `zIndex - 1`",
               "default": "1000",
               "attribute": "z-index",
-              "reflects": true
+              "reflects": true,
+              "inheritedFrom": {
+                "name": "BackdropMixin",
+                "module": "utils/mixins/BackdropMixin.js"
+              }
             },
             {
               "kind": "field",
@@ -12032,6 +12092,10 @@
             }
           ],
           "mixins": [
+            {
+              "name": "BackdropMixin",
+              "module": "/src/utils/mixins/BackdropMixin"
+            },
             {
               "name": "PreventScrollMixin",
               "module": "/src/utils/mixins/PreventScrollMixin"
@@ -21036,6 +21100,21 @@
                 }
               }
             },
+            {
+              "kind": "field",
+              "name": "zIndex",
+              "type": {
+                "text": "number"
+              },
+              "description": "IMPLEMENT THIS IN YOUR COMPONENT.\n\nThe z-index of the component where the backdrop will be attached to.\nThe backdrop itself will have a z-index of `zIndex - 1`.",
+              "default": "1000",
+              "attribute": "z-index",
+              "reflects": true,
+              "inheritedFrom": {
+                "name": "Popover",
+                "module": "components/popover/popover.component.js"
+              }
+            },
             {
               "kind": "field",
               "name": "preventScroll",
@@ -21869,13 +21948,13 @@
             },
             {
               "kind": "field",
-              "name": "flip",
+              "name": "backdropAppendTo",
               "type": {
-                "text": "boolean"
+                "text": "string | undefined"
               },
-              "description": "Changes the placement of popover to keep it in view when scrolling.",
-              "default": "true",
-              "attribute": "flip",
+              "description": "Element ID the backdrop will be a append to (if `backdrop` is true).",
+              "default": "''",
+              "attribute": "backdrop-append-to",
               "reflects": true,
               "inheritedFrom": {
                 "name": "Popover",
@@ -21884,13 +21963,13 @@
             },
             {
               "kind": "field",
-              "name": "size",
+              "name": "isBackdropInvisible",
               "type": {
-                "text": "boolean"
+                "text": "boolean | undefined"
               },
-              "description": "Changes the size of popover to keep it in view when scrolling.",
+              "description": "Set this property to true to make the backdrop invisible (if `backdrop` is true).\nThis is useful for components that do want a backdrop which stops interaction,\nbut do not want the backdrop to be visible as a overlay.",
               "default": "false",
-              "attribute": "size",
+              "attribute": "is-backdrop-invisible",
               "reflects": true,
               "inheritedFrom": {
                 "name": "Popover",
@@ -21899,13 +21978,28 @@
             },
             {
               "kind": "field",
-              "name": "zIndex",
+              "name": "flip",
               "type": {
-                "text": "number"
+                "text": "boolean"
               },
-              "description": "The z-index of the popover.",
-              "default": "1000",
-              "attribute": "z-index",
+              "description": "Changes the placement of popover to keep it in view when scrolling.",
+              "default": "true",
+              "attribute": "flip",
+              "reflects": true,
+              "inheritedFrom": {
+                "name": "Popover",
+                "module": "components/popover/popover.component.js"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "size",
+              "type": {
+                "text": "boolean"
+              },
+              "description": "Changes the size of popover to keep it in view when scrolling.",
+              "default": "false",
+              "attribute": "size",
               "reflects": true,
               "inheritedFrom": {
                 "name": "Popover",
@@ -22625,6 +22719,32 @@
                 "module": "src/components/popover/popover.component.ts"
               }
             },
+            {
+              "name": "backdrop-append-to",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "Element ID the backdrop will be a append to (if `backdrop` is true).",
+              "default": "''",
+              "fieldName": "backdropAppendTo",
+              "inheritedFrom": {
+                "name": "Popover",
+                "module": "src/components/popover/popover.component.ts"
+              }
+            },
+            {
+              "name": "is-backdrop-invisible",
+              "type": {
+                "text": "boolean | undefined"
+              },
+              "description": "Set this property to true to make the backdrop invisible (if `backdrop` is true).\nThis is useful for components that do want a backdrop which stops interaction,\nbut do not want the backdrop to be visible as a overlay.",
+              "default": "false",
+              "fieldName": "isBackdropInvisible",
+              "inheritedFrom": {
+                "name": "Popover",
+                "module": "src/components/popover/popover.component.ts"
+              }
+            },
             {
               "name": "flip",
               "type": {
@@ -26907,6 +27027,28 @@
               "attribute": "backdrop",
               "reflects": true
             },
+            {
+              "kind": "field",
+              "name": "backdropAppendTo",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "Element ID the backdrop will be a append to (if `backdrop` is true).",
+              "default": "''",
+              "attribute": "backdrop-append-to",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "isBackdropInvisible",
+              "type": {
+                "text": "boolean | undefined"
+              },
+              "description": "Set this property to true to make the backdrop invisible (if `backdrop` is true).\nThis is useful for components that do want a backdrop which stops interaction,\nbut do not want the backdrop to be visible as a overlay.",
+              "default": "false",
+              "attribute": "is-backdrop-invisible",
+              "reflects": true
+            },
             {
               "kind": "field",
               "name": "flip",
@@ -26938,7 +27080,11 @@
               "description": "The z-index of the popover.",
               "default": "1000",
               "attribute": "z-index",
-              "reflects": true
+              "reflects": true,
+              "inheritedFrom": {
+                "name": "BackdropMixin",
+                "module": "utils/mixins/BackdropMixin.js"
+              }
             },
             {
               "kind": "field",
@@ -27960,6 +28106,24 @@
               "default": "false",
               "fieldName": "backdrop"
             },
+            {
+              "name": "backdrop-append-to",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "Element ID the backdrop will be a append to (if `backdrop` is true).",
+              "default": "''",
+              "fieldName": "backdropAppendTo"
+            },
+            {
+              "name": "is-backdrop-invisible",
+              "type": {
+                "text": "boolean | undefined"
+              },
+              "description": "Set this property to true to make the backdrop invisible (if `backdrop` is true).\nThis is useful for components that do want a backdrop which stops interaction,\nbut do not want the backdrop to be visible as a overlay.",
+              "default": "false",
+              "fieldName": "isBackdropInvisible"
+            },
             {
               "name": "flip",
               "type": {
@@ -28082,6 +28246,10 @@
             }
           ],
           "mixins": [
+            {
+              "name": "BackdropMixin",
+              "module": "/src/utils/mixins/BackdropMixin"
+            },
             {
               "name": "PreventScrollMixin",
               "module": "/src/utils/mixins/PreventScrollMixin"
@@ -31987,6 +32155,46 @@
         }
       ]
     },
+    {
+      "kind": "javascript-module",
+      "path": "components/selectlistbox/selectlistbox.component.js",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "Selectlistbox component as Light DOM component to act as a simple wrapper\nfor mdc-option components to ensure accessibility and proper role assignment.\n\nOnce [ariaOwnsElements](https://developer.mozilla.org/en-US/docs/Web/API/ElementInternals/ariaOwnsElements) is supported in browsers, this component can be removed\nand mdc-option can be used directly in the select component with a listbox in a different\nshadow root and aria-owns attribute to connect them.",
+          "name": "Selectlistbox",
+          "slots": [
+            {
+              "description": "This is a default/unnamed slot, which can be used to insert mdc-option components.",
+              "name": "default"
+            }
+          ],
+          "members": [
+            {
+              "kind": "field",
+              "name": "role"
+            }
+          ],
+          "superclass": {
+            "name": "Component",
+            "module": "/src/models"
+          },
+          "tagName": "mdc-selectlistbox",
+          "jsDoc": "/**\n * Selectlistbox component as Light DOM component to act as a simple wrapper\n * for mdc-option components to ensure accessibility and proper role assignment.\n *\n * Once [ariaOwnsElements](https://developer.mozilla.org/en-US/docs/Web/API/ElementInternals/ariaOwnsElements) is supported in browsers, this component can be removed\n * and mdc-option can be used directly in the select component with a listbox in a different\n * shadow root and aria-owns attribute to connect them.\n *\n * @tagname mdc-selectlistbox\n *\n * @slot default - This is a default/unnamed slot, which can be used to insert mdc-option components.\n */",
+          "customElement": true
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "default",
+          "declaration": {
+            "name": "Selectlistbox",
+            "module": "components/selectlistbox/selectlistbox.component.js"
+          }
+        }
+      ]
+    },
     {
       "kind": "javascript-module",
       "path": "components/select/select.component.js",
@@ -32126,6 +32334,27 @@
               "attribute": "strategy",
               "reflects": true
             },
+            {
+              "kind": "field",
+              "name": "popoverZIndex",
+              "type": {
+                "text": "number"
+              },
+              "description": "The z-index of the popover within Select.\n\nOverride this to make sure this stays on top of other components.",
+              "default": "1000",
+              "attribute": "popover-z-index",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "backdropAppendTo",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "ID of the element where the backdrop will be appended to.\nThis is useful to ensure that the backdrop is appended to the correct element in the DOM.\nIf not set, the backdrop will be appended to the parent element of the select.",
+              "attribute": "backdrop-append-to",
+              "reflects": true
+            },
             {
               "kind": "method",
               "name": "getAllValidOptions",
@@ -32777,6 +33006,23 @@
               "default": "absolute",
               "fieldName": "strategy"
             },
+            {
+              "name": "popover-z-index",
+              "type": {
+                "text": "number"
+              },
+              "description": "The z-index of the popover within Select.\n\nOverride this to make sure this stays on top of other components.",
+              "default": "1000",
+              "fieldName": "popoverZIndex"
+            },
+            {
+              "name": "backdrop-append-to",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "ID of the element where the backdrop will be appended to.\nThis is useful to ensure that the backdrop is appended to the correct element in the DOM.\nIf not set, the backdrop will be appended to the parent element of the select.",
+              "fieldName": "backdropAppendTo"
+            },
             {
               "name": "name",
               "type": {
@@ -32973,30 +33219,72 @@
     },
     {
       "kind": "javascript-module",
-      "path": "components/selectlistbox/selectlistbox.component.js",
+      "path": "components/skeleton/skeleton.component.js",
       "declarations": [
         {
           "kind": "class",
-          "description": "Selectlistbox component as Light DOM component to act as a simple wrapper\nfor mdc-option components to ensure accessibility and proper role assignment.\n\nOnce [ariaOwnsElements](https://developer.mozilla.org/en-US/docs/Web/API/ElementInternals/ariaOwnsElements) is supported in browsers, this component can be removed\nand mdc-option can be used directly in the select component with a listbox in a different\nshadow root and aria-owns attribute to connect them.",
-          "name": "Selectlistbox",
+          "description": "`mdc-skeleton` is a component that shows a grey placeholder area.\nIt provides visual feedback to users that content is being loaded.\n\n**Skeleton Variants:**\n- **rectangular**: Default variant with 0.25rem border radius\n- **rounded**: Has 0.5rem border radius\n- **circular**: Has 50% border radius for circular shapes\n- **button**: Optimized for button placeholders with 1.25rem border radius\n\n**Sizing Behavior:**\n1. If wrapping content, takes dimensions of wrapped content\n2. Otherwise grows to fill parent container",
+          "name": "Skeleton",
+          "cssProperties": [
+            {
+              "description": "background color of the skeleton",
+              "name": "--mdc-skeleton-background-color"
+            },
+            {
+              "description": "height of the skeleton",
+              "name": "--mdc-skeleton-height"
+            },
+            {
+              "description": "width of the skeleton",
+              "name": "--mdc-skeleton-width"
+            }
+          ],
           "slots": [
             {
-              "description": "This is a default/unnamed slot, which can be used to insert mdc-option components.",
-              "name": "default"
+              "description": "Content to wrap (optional). When provided, skeleton takes dimensions of this content.",
+              "name": ""
             }
           ],
           "members": [
             {
               "kind": "field",
-              "name": "role"
+              "name": "variant",
+              "type": {
+                "text": "SkeletonVariant"
+              },
+              "description": "The variant of skeleton to display\n- **rectangular**: Default rectangular shape with 0.25rem border radius\n- **rounded**: Rounded rectangle with 0.5rem border radius\n- **circular**: Circular shape with 50% border radius\n- **button**: Button placeholder with 1.25rem border radius",
+              "default": "rectangular",
+              "attribute": "variant",
+              "reflects": true
+            },
+            {
+              "kind": "method",
+              "name": "checkSlotContent",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              }
+            }
+          ],
+          "attributes": [
+            {
+              "name": "variant",
+              "type": {
+                "text": "SkeletonVariant"
+              },
+              "description": "The variant of skeleton to display\n- **rectangular**: Default rectangular shape with 0.25rem border radius\n- **rounded**: Rounded rectangle with 0.5rem border radius\n- **circular**: Circular shape with 50% border radius\n- **button**: Button placeholder with 1.25rem border radius",
+              "default": "rectangular",
+              "fieldName": "variant"
             }
           ],
           "superclass": {
             "name": "Component",
             "module": "/src/models"
           },
-          "tagName": "mdc-selectlistbox",
-          "jsDoc": "/**\n * Selectlistbox component as Light DOM component to act as a simple wrapper\n * for mdc-option components to ensure accessibility and proper role assignment.\n *\n * Once [ariaOwnsElements](https://developer.mozilla.org/en-US/docs/Web/API/ElementInternals/ariaOwnsElements) is supported in browsers, this component can be removed\n * and mdc-option can be used directly in the select component with a listbox in a different\n * shadow root and aria-owns attribute to connect them.\n *\n * @tagname mdc-selectlistbox\n *\n * @slot default - This is a default/unnamed slot, which can be used to insert mdc-option components.\n */",
+          "tagName": "mdc-skeleton",
+          "jsDoc": "/**\n * `mdc-skeleton` is a component that shows a grey placeholder area.\n * It provides visual feedback to users that content is being loaded.\n *\n * **Skeleton Variants:**\n * - **rectangular**: Default variant with 0.25rem border radius\n * - **rounded**: Has 0.5rem border radius\n * - **circular**: Has 50% border radius for circular shapes\n * - **button**: Optimized for button placeholders with 1.25rem border radius\n *\n * **Sizing Behavior:**\n * 1. If wrapping content, takes dimensions of wrapped content\n * 2. Otherwise grows to fill parent container\n *\n * @tagname mdc-skeleton\n *\n * @slot - Content to wrap (optional). When provided, skeleton takes dimensions of this content.\n *\n * @cssproperty --mdc-skeleton-background-color - background color of the skeleton\n * @cssproperty --mdc-skeleton-height - height of the skeleton\n * @cssproperty --mdc-skeleton-width - width of the skeleton\n */",
           "customElement": true
         }
       ],
@@ -33005,8 +33293,8 @@
           "kind": "js",
           "name": "default",
           "declaration": {
-            "name": "Selectlistbox",
-            "module": "components/selectlistbox/selectlistbox.component.js"
+            "name": "Skeleton",
+            "module": "components/skeleton/skeleton.component.js"
           }
         }
       ]
@@ -33198,88 +33486,6 @@
         }
       ]
     },
-    {
-      "kind": "javascript-module",
-      "path": "components/skeleton/skeleton.component.js",
-      "declarations": [
-        {
-          "kind": "class",
-          "description": "`mdc-skeleton` is a component that shows a grey placeholder area.\nIt provides visual feedback to users that content is being loaded.\n\n**Skeleton Variants:**\n- **rectangular**: Default variant with 0.25rem border radius\n- **rounded**: Has 0.5rem border radius\n- **circular**: Has 50% border radius for circular shapes\n- **button**: Optimized for button placeholders with 1.25rem border radius\n\n**Sizing Behavior:**\n1. If wrapping content, takes dimensions of wrapped content\n2. Otherwise grows to fill parent container",
-          "name": "Skeleton",
-          "cssProperties": [
-            {
-              "description": "background color of the skeleton",
-              "name": "--mdc-skeleton-background-color"
-            },
-            {
-              "description": "height of the skeleton",
-              "name": "--mdc-skeleton-height"
-            },
-            {
-              "description": "width of the skeleton",
-              "name": "--mdc-skeleton-width"
-            }
-          ],
-          "slots": [
-            {
-              "description": "Content to wrap (optional). When provided, skeleton takes dimensions of this content.",
-              "name": ""
-            }
-          ],
-          "members": [
-            {
-              "kind": "field",
-              "name": "variant",
-              "type": {
-                "text": "SkeletonVariant"
-              },
-              "description": "The variant of skeleton to display\n- **rectangular**: Default rectangular shape with 0.25rem border radius\n- **rounded**: Rounded rectangle with 0.5rem border radius\n- **circular**: Circular shape with 50% border radius\n- **button**: Button placeholder with 1.25rem border radius",
-              "default": "rectangular",
-              "attribute": "variant",
-              "reflects": true
-            },
-            {
-              "kind": "method",
-              "name": "checkSlotContent",
-              "privacy": "private",
-              "return": {
-                "type": {
-                  "text": "void"
-                }
-              }
-            }
-          ],
-          "attributes": [
-            {
-              "name": "variant",
-              "type": {
-                "text": "SkeletonVariant"
-              },
-              "description": "The variant of skeleton to display\n- **rectangular**: Default rectangular shape with 0.25rem border radius\n- **rounded**: Rounded rectangle with 0.5rem border radius\n- **circular**: Circular shape with 50% border radius\n- **button**: Button placeholder with 1.25rem border radius",
-              "default": "rectangular",
-              "fieldName": "variant"
-            }
-          ],
-          "superclass": {
-            "name": "Component",
-            "module": "/src/models"
-          },
-          "tagName": "mdc-skeleton",
-          "jsDoc": "/**\n * `mdc-skeleton` is a component that shows a grey placeholder area.\n * It provides visual feedback to users that content is being loaded.\n *\n * **Skeleton Variants:**\n * - **rectangular**: Default variant with 0.25rem border radius\n * - **rounded**: Has 0.5rem border radius\n * - **circular**: Has 50% border radius for circular shapes\n * - **button**: Optimized for button placeholders with 1.25rem border radius\n *\n * **Sizing Behavior:**\n * 1. If wrapping content, takes dimensions of wrapped content\n * 2. Otherwise grows to fill parent container\n *\n * @tagname mdc-skeleton\n *\n * @slot - Content to wrap (optional). When provided, skeleton takes dimensions of this content.\n *\n * @cssproperty --mdc-skeleton-background-color - background color of the skeleton\n * @cssproperty --mdc-skeleton-height - height of the skeleton\n * @cssproperty --mdc-skeleton-width - width of the skeleton\n */",
-          "customElement": true
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "default",
-          "declaration": {
-            "name": "Skeleton",
-            "module": "components/skeleton/skeleton.component.js"
-          }
-        }
-      ]
-    },
     {
       "kind": "javascript-module",
       "path": "components/spinner/spinner.component.js",
@@ -37676,6 +37882,21 @@
               },
               "description": "Updates the placement attribute if it is not a valid placement.\nDefault placement for toggle tip is top."
             },
+            {
+              "kind": "field",
+              "name": "zIndex",
+              "type": {
+                "text": "number"
+              },
+              "description": "IMPLEMENT THIS IN YOUR COMPONENT.\n\nThe z-index of the component where the backdrop will be attached to.\nThe backdrop itself will have a z-index of `zIndex - 1`.",
+              "default": "1000",
+              "attribute": "z-index",
+              "reflects": true,
+              "inheritedFrom": {
+                "name": "Popover",
+                "module": "components/popover/popover.component.js"
+              }
+            },
             {
               "kind": "field",
               "name": "preventScroll",
@@ -38509,13 +38730,13 @@
             },
             {
               "kind": "field",
-              "name": "flip",
+              "name": "backdropAppendTo",
               "type": {
-                "text": "boolean"
+                "text": "string | undefined"
               },
-              "description": "Changes the placement of popover to keep it in view when scrolling.",
-              "default": "true",
-              "attribute": "flip",
+              "description": "Element ID the backdrop will be a append to (if `backdrop` is true).",
+              "default": "''",
+              "attribute": "backdrop-append-to",
               "reflects": true,
               "inheritedFrom": {
                 "name": "Popover",
@@ -38524,13 +38745,13 @@
             },
             {
               "kind": "field",
-              "name": "size",
+              "name": "isBackdropInvisible",
               "type": {
-                "text": "boolean"
+                "text": "boolean | undefined"
               },
-              "description": "Changes the size of popover to keep it in view when scrolling.",
+              "description": "Set this property to true to make the backdrop invisible (if `backdrop` is true).\nThis is useful for components that do want a backdrop which stops interaction,\nbut do not want the backdrop to be visible as a overlay.",
               "default": "false",
-              "attribute": "size",
+              "attribute": "is-backdrop-invisible",
               "reflects": true,
               "inheritedFrom": {
                 "name": "Popover",
@@ -38539,13 +38760,28 @@
             },
             {
               "kind": "field",
-              "name": "zIndex",
+              "name": "flip",
               "type": {
-                "text": "number"
+                "text": "boolean"
               },
-              "description": "The z-index of the popover.",
-              "default": "1000",
-              "attribute": "z-index",
+              "description": "Changes the placement of popover to keep it in view when scrolling.",
+              "default": "true",
+              "attribute": "flip",
+              "reflects": true,
+              "inheritedFrom": {
+                "name": "Popover",
+                "module": "components/popover/popover.component.js"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "size",
+              "type": {
+                "text": "boolean"
+              },
+              "description": "Changes the size of popover to keep it in view when scrolling.",
+              "default": "false",
+              "attribute": "size",
               "reflects": true,
               "inheritedFrom": {
                 "name": "Popover",
@@ -39315,6 +39551,32 @@
                 "module": "src/components/popover/popover.component.ts"
               }
             },
+            {
+              "name": "backdrop-append-to",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "Element ID the backdrop will be a append to (if `backdrop` is true).",
+              "default": "''",
+              "fieldName": "backdropAppendTo",
+              "inheritedFrom": {
+                "name": "Popover",
+                "module": "src/components/popover/popover.component.ts"
+              }
+            },
+            {
+              "name": "is-backdrop-invisible",
+              "type": {
+                "text": "boolean | undefined"
+              },
+              "description": "Set this property to true to make the backdrop invisible (if `backdrop` is true).\nThis is useful for components that do want a backdrop which stops interaction,\nbut do not want the backdrop to be visible as a overlay.",
+              "default": "false",
+              "fieldName": "isBackdropInvisible",
+              "inheritedFrom": {
+                "name": "Popover",
+                "module": "src/components/popover/popover.component.ts"
+              }
+            },
             {
               "name": "flip",
               "type": {
@@ -39689,6 +39951,21 @@
               ],
               "description": "Updates the tooltip type attribute and sets the appropriate aria props on the trigger component."
             },
+            {
+              "kind": "field",
+              "name": "zIndex",
+              "type": {
+                "text": "number"
+              },
+              "description": "IMPLEMENT THIS IN YOUR COMPONENT.\n\nThe z-index of the component where the backdrop will be attached to.\nThe backdrop itself will have a z-index of `zIndex - 1`.",
+              "default": "1000",
+              "attribute": "z-index",
+              "reflects": true,
+              "inheritedFrom": {
+                "name": "Popover",
+                "module": "components/popover/popover.component.js"
+              }
+            },
             {
               "kind": "field",
               "name": "preventScroll",
@@ -40537,13 +40814,13 @@
             },
             {
               "kind": "field",
-              "name": "flip",
+              "name": "backdropAppendTo",
               "type": {
-                "text": "boolean"
+                "text": "string | undefined"
               },
-              "description": "Changes the placement of popover to keep it in view when scrolling.",
-              "default": "true",
-              "attribute": "flip",
+              "description": "Element ID the backdrop will be a append to (if `backdrop` is true).",
+              "default": "''",
+              "attribute": "backdrop-append-to",
               "reflects": true,
               "inheritedFrom": {
                 "name": "Popover",
@@ -40552,13 +40829,13 @@
             },
             {
               "kind": "field",
-              "name": "size",
+              "name": "isBackdropInvisible",
               "type": {
-                "text": "boolean"
+                "text": "boolean | undefined"
               },
-              "description": "Changes the size of popover to keep it in view when scrolling.",
+              "description": "Set this property to true to make the backdrop invisible (if `backdrop` is true).\nThis is useful for components that do want a backdrop which stops interaction,\nbut do not want the backdrop to be visible as a overlay.",
               "default": "false",
-              "attribute": "size",
+              "attribute": "is-backdrop-invisible",
               "reflects": true,
               "inheritedFrom": {
                 "name": "Popover",
@@ -40567,13 +40844,28 @@
             },
             {
               "kind": "field",
-              "name": "zIndex",
+              "name": "flip",
               "type": {
-                "text": "number"
+                "text": "boolean"
               },
-              "description": "The z-index of the popover.",
-              "default": "1000",
-              "attribute": "z-index",
+              "description": "Changes the placement of popover to keep it in view when scrolling.",
+              "default": "true",
+              "attribute": "flip",
+              "reflects": true,
+              "inheritedFrom": {
+                "name": "Popover",
+                "module": "components/popover/popover.component.js"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "size",
+              "type": {
+                "text": "boolean"
+              },
+              "description": "Changes the size of popover to keep it in view when scrolling.",
+              "default": "false",
+              "attribute": "size",
               "reflects": true,
               "inheritedFrom": {
                 "name": "Popover",
@@ -41344,6 +41636,32 @@
                 "module": "src/components/popover/popover.component.ts"
               }
             },
+            {
+              "name": "backdrop-append-to",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "Element ID the backdrop will be a append to (if `backdrop` is true).",
+              "default": "''",
+              "fieldName": "backdropAppendTo",
+              "inheritedFrom": {
+                "name": "Popover",
+                "module": "src/components/popover/popover.component.ts"
+              }
+            },
+            {
+              "name": "is-backdrop-invisible",
+              "type": {
+                "text": "boolean | undefined"
+              },
+              "description": "Set this property to true to make the backdrop invisible (if `backdrop` is true).\nThis is useful for components that do want a backdrop which stops interaction,\nbut do not want the backdrop to be visible as a overlay.",
+              "default": "false",
+              "fieldName": "isBackdropInvisible",
+              "inheritedFrom": {
+                "name": "Popover",
+                "module": "src/components/popover/popover.component.ts"
+              }
+            },
             {
               "name": "flip",
               "type": {
@@ -42193,6 +42511,157 @@
         }
       ]
     },
+    {
+      "kind": "javascript-module",
+      "path": "utils/mixins/BackdropMixin.js",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "",
+          "name": "BackdropMixinInterface",
+          "members": [
+            {
+              "kind": "field",
+              "name": "zIndex",
+              "type": {
+                "text": "number"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "backdropElement",
+              "type": {
+                "text": "HTMLElement | null"
+              },
+              "privacy": "protected"
+            },
+            {
+              "kind": "field",
+              "name": "isBackdropInvisible",
+              "type": {
+                "text": "boolean | undefined"
+              },
+              "privacy": "protected"
+            },
+            {
+              "kind": "field",
+              "name": "backdropAppendTo",
+              "type": {
+                "text": "string | undefined"
+              },
+              "privacy": "protected"
+            },
+            {
+              "kind": "method",
+              "name": "createBackdrop",
+              "privacy": "protected",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "classNamePrefix",
+                  "type": {
+                    "text": "string"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "removeBackdrop",
+              "privacy": "protected",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              }
+            },
+            {
+              "kind": "method",
+              "name": "keepElementAboveBackdrop",
+              "privacy": "protected",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "element",
+                  "optional": true,
+                  "type": {
+                    "text": "HTMLElement | null"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "moveElementBackAfterBackdropRemoval",
+              "privacy": "protected",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "element",
+                  "optional": true,
+                  "type": {
+                    "text": "HTMLElement | null"
+                  }
+                }
+              ]
+            }
+          ]
+        },
+        {
+          "kind": "mixin",
+          "description": "",
+          "name": "BackdropMixin",
+          "members": [
+            {
+              "kind": "field",
+              "name": "zIndex",
+              "type": {
+                "text": "number"
+              },
+              "description": "IMPLEMENT THIS IN YOUR COMPONENT.\n\nThe z-index of the component where the backdrop will be attached to.\nThe backdrop itself will have a z-index of `zIndex - 1`."
+            }
+          ],
+          "parameters": [
+            {
+              "name": "superClass",
+              "type": {
+                "text": "T"
+              }
+            }
+          ]
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "BackdropMixinInterface",
+          "declaration": {
+            "name": "BackdropMixinInterface",
+            "module": "utils/mixins/BackdropMixin.js"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "BackdropMixin",
+          "declaration": {
+            "name": "BackdropMixin",
+            "module": "utils/mixins/BackdropMixin.js"
+          }
+        }
+      ]
+    },
     {
       "kind": "javascript-module",
       "path": "utils/mixins/ButtonComponentMixin.js",