npm - @momentum-design/components - Versions diffs - 0.96.0 → 0.96.1 - Mend

@momentum-design/components 0.96.0 → 0.96.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (4) hide show

package/dist/custom-elements.json +1804 -1804
package/dist/react/index.d.ts +1 -1
package/dist/react/index.js +1 -1
package/package.json +1 -1

package/dist/custom-elements.json CHANGED Viewed

@@ -7759,336 +7759,229 @@
     },
     {
       "kind": "javascript-module",
-      "path": "components/dialog/dialog.component.js",
+      "path": "components/coachmark/coachmark.component.js",
       "declarations": [
         {
           "kind": "class",
-          "description": "Dialog component is a modal dialog that can be used to display information or prompt the user for input.\nIt can be used to create custom dialogs where content for the body and footer actions is provided by the consumer.\nThe dialog is available in 5 sizes: small, medium, large, xlarge and fullscreen. It may also receive custom styling/sizing.\nThe dialog interrupts the user and will block interaction with the rest of the application until it is closed.\n\nThe dialog can be controlled solely through the `visible` property, no trigger element is required.\nIf a `triggerId` is provided, the dialog will manage focus with that element, otherwise it will\nremember the previously focused element before the dialog was opened.\n\nThe dialog is a controlled component, meaning it does not have its own state management for visibility.\nUse the `visible` property to control the visibility of the dialog.\nUse the `onClose` event to handle the close action of the dialog (fired when Close button is clicked\nor Escape is pressed).\n\nDialog component have 2 variants: default and promotional.\n\n**Accessibility notes for consuming (have to be explicitly set when you consume the component)**\n\n- The dialog should have an aria-label or aria-labelledby attribute to provide a label for screen readers.\n- Use aria-labelledby to reference the ID of the element that labels the dialog when there is no visible title.\n\n**Note: Programmatic show/hide requires the ? prefix on the visible attribute**\n- Use `?visible=true/false` as an attribute instead of `visible=true/false`\n- Reference docs for more info: https://lit.dev/docs/templates/expressions/#boolean-attribute-expressions",
-          "name": "Dialog",
+          "description": "Coachmark component based on top of the popover component,\nwith the default value of certain properties changed.",
+          "name": "Coachmark",
           "cssProperties": [
             {
-              "description": "primary background color of the dialog",
-              "name": "--mdc-dialog-primary-background-color"
+              "description": "radius of the arrow border",
+              "name": "--mdc-popover-arrow-border-radius",
+              "inheritedFrom": {
+                "name": "Popover",
+                "module": "src/components/popover/popover.component.ts"
+              }
             },
             {
-              "description": "border color of the dialog",
-              "name": "--mdc-dialog-border-color"
+              "description": "border of the arrow",
+              "name": "--mdc-popover-arrow-border",
+              "inheritedFrom": {
+                "name": "Popover",
+                "module": "src/components/popover/popover.component.ts"
+              }
             },
             {
-              "description": "text color of the header/title of the dialog",
-              "name": "--mdc-dialog-header-text-color"
+              "description": "primary background color of the popover",
+              "name": "--mdc-popover-primary-background-color",
+              "inheritedFrom": {
+                "name": "Popover",
+                "module": "src/components/popover/popover.component.ts"
+              }
             },
             {
-              "description": "text color of the below header description of the dialog",
-              "name": "--mdc-dialog-description-text-color"
+              "description": "border color of the popover",
+              "name": "--mdc-popover-border-color",
+              "inheritedFrom": {
+                "name": "Popover",
+                "module": "src/components/popover/popover.component.ts"
+              }
             },
             {
-              "description": "elevation of the dialog",
-              "name": "--mdc-dialog-elevation-3"
+              "description": "inverted background color of the popover",
+              "name": "--mdc-popover-inverted-background-color",
+              "inheritedFrom": {
+                "name": "Popover",
+                "module": "src/components/popover/popover.component.ts"
+              }
             },
             {
-              "description": "width of the dialog",
-              "name": "--mdc-dialog-width"
-            }
-          ],
-          "slots": [
-            {
-              "description": "Slot for the dialog header content. This can be used to pass custom header content.",
-              "name": "header-prefix"
+              "description": "inverted border color of the popover",
+              "name": "--mdc-popover-inverted-border-color",
+              "inheritedFrom": {
+                "name": "Popover",
+                "module": "src/components/popover/popover.component.ts"
+              }
             },
             {
-              "description": "Slot for the dialog body content",
-              "name": "dialog-body"
+              "description": "inverted text color of the popover",
+              "name": "--mdc-popover-inverted-text-color",
+              "inheritedFrom": {
+                "name": "Popover",
+                "module": "src/components/popover/popover.component.ts"
+              }
             },
             {
-              "description": "This slot is for passing `mdc-link` component within the footer section.",
-              "name": "footer-link"
+              "description": "elevation of the popover",
+              "name": "--mdc-popover-elevation-3",
+              "inheritedFrom": {
+                "name": "Popover",
+                "module": "src/components/popover/popover.component.ts"
+              }
             },
             {
-              "description": "This slot is for passing secondary variant of `mdc-button` component within the footer section.",
-              "name": "footer-button-secondary"
+              "description": "max width of the popover",
+              "name": "--mdc-popover-max-width",
+              "inheritedFrom": {
+                "name": "Popover",
+                "module": "src/components/popover/popover.component.ts"
+              }
             },
             {
-              "description": "This slot is for passing primary variant of `mdc-button` component within the footer section.",
-              "name": "footer-button-primary"
-            },
+              "description": "max height of the popover",
+              "name": "--mdc-popover-max-height",
+              "inheritedFrom": {
+                "name": "Popover",
+                "module": "src/components/popover/popover.component.ts"
+              }
+            }
+          ],
+          "slots": [
             {
-              "description": " This slot is for passing custom footer content. Only use this if really needed, using the footer-link and footer-button slots is preferred",
-              "name": "footer"
+              "description": "Default slot for modal container",
+              "name": "",
+              "inheritedFrom": {
+                "name": "Popover",
+                "module": "src/components/popover/popover.component.ts"
+              }
             }
           ],
           "members": [
             {
               "kind": "field",
-              "name": "id",
+              "name": "trigger",
               "type": {
-                "text": "string"
+                "text": "PopoverTrigger"
               },
-              "default": "''",
-              "description": "The unique ID of the dialog",
-              "attribute": "id",
-              "reflects": true
+              "description": "Determines the events that cause the Coachmark to show.\nMultiple event names should be separated by spaces.\nFor example to allow both click and hover, use 'click mouseenter' as the trigger.\n- **click**\n- **mouseenter**\n- **focusin**\n- **manual**",
+              "default": "manual",
+              "attribute": "trigger",
+              "reflects": true,
+              "inheritedFrom": {
+                "name": "Popover",
+                "module": "components/popover/popover.component.js"
+              }
             },
             {
               "kind": "field",
-              "name": "triggerId",
+              "name": "showArrow",
               "type": {
-                "text": "string | undefined"
+                "text": "boolean"
               },
-              "description": "The ID of the element that triggers the dialog",
-              "default": "undefined",
-              "attribute": "triggerId",
-              "reflects": true
+              "description": "The arrow visibility of the Coachmark.",
+              "default": "true",
+              "attribute": "show-arrow",
+              "reflects": true,
+              "inheritedFrom": {
+                "name": "Popover",
+                "module": "components/popover/popover.component.js"
+              }
             },
             {
               "kind": "field",
-              "name": "visible",
+              "name": "closeButton",
               "type": {
                 "text": "boolean"
               },
-              "description": "The visibility of the dialog\n\nDialog is a controlled component, visible is the only property that controls the visibility of the dialog.",
-              "default": "false",
-              "attribute": "visible",
-              "reflects": true
+              "description": "The close button visibility of the Coachmark.",
+              "default": "true",
+              "attribute": "close-button",
+              "reflects": true,
+              "inheritedFrom": {
+                "name": "Popover",
+                "module": "components/popover/popover.component.js"
+              }
             },
             {
               "kind": "field",
-              "name": "zIndex",
+              "name": "disableAriaExpanded",
               "type": {
-                "text": "number"
+                "text": "boolean"
               },
-              "description": "The z-index of the dialog\n\nThe backdrop will have z-index of `zIndex - 1`",
-              "default": "1000",
-              "attribute": "z-index",
-              "reflects": true
+              "description": "Disable aria-expanded attribute on trigger element.",
+              "default": "true",
+              "attribute": "disable-aria-expanded",
+              "reflects": true,
+              "inheritedFrom": {
+                "name": "Popover",
+                "module": "components/popover/popover.component.js"
+              }
             },
             {
               "kind": "field",
-              "name": "size",
+              "name": "preventScroll",
               "type": {
-                "text": "DialogSize"
+                "text": "boolean"
               },
-              "description": "The size of the dialog, can be 'small' (432px width), 'medium' (656px width), 'large' (992px width), 'xlarge' (90% width) or 'fullscreen' (100% width).",
-              "default": "small",
-              "attribute": "size",
-              "reflects": true
+              "description": "Prevent outside scrolling when element is shown.\n\nIMPLEMENT THIS IN YOUR COMPONENT.",
+              "default": "false",
+              "attribute": "prevent-scroll",
+              "reflects": true,
+              "privacy": "protected",
+              "inheritedFrom": {
+                "name": "Popover",
+                "module": "components/popover/popover.component.js"
+              }
             },
             {
-              "kind": "field",
-              "name": "variant",
-              "type": {
-                "text": "DialogVariant"
-              },
-              "description": "The variant of the dialog, can be 'default' or 'promotional'",
-              "default": "default",
-              "attribute": "variant",
-              "reflects": true
+              "kind": "method",
+              "name": "activatePreventScroll",
+              "privacy": "protected",
+              "inheritedFrom": {
+                "name": "PreventScrollMixin",
+                "module": "utils/mixins/PreventScrollMixin.js"
+              }
             },
             {
-              "kind": "field",
-              "name": "closeButtonAriaLabel",
-              "type": {
-                "text": "string | null"
-              },
-              "default": "null",
-              "description": "Defines a string value for the aria-label attribute for close button accessibility",
-              "attribute": "close-button-aria-label"
+              "kind": "method",
+              "name": "deactivatePreventScroll",
+              "privacy": "protected",
+              "inheritedFrom": {
+                "name": "PreventScrollMixin",
+                "module": "utils/mixins/PreventScrollMixin.js"
+              }
             },
             {
               "kind": "field",
-              "name": "ariaLabel",
+              "name": "focusTrap",
               "type": {
-                "text": "string | null"
+                "text": "boolean"
               },
-              "default": "null",
-              "description": "Defines a string value for the aria-label attribute when header is not used",
-              "attribute": "aria-label",
-              "reflects": true
+              "description": "Determines whether the focus trap is enabled.\nIf true, focus will be restricted to the content within this component.\n\nIMPLEMENT THIS IN YOUR COMPONENT.",
+              "default": "false",
+              "attribute": "focus-trap",
+              "reflects": true,
+              "privacy": "protected",
+              "inheritedFrom": {
+                "name": "Popover",
+                "module": "components/popover/popover.component.js"
+              }
             },
             {
               "kind": "field",
-              "name": "ariaLabelledby",
+              "name": "shouldFocusTrapWrap",
               "type": {
-                "text": "string | null"
+                "text": "boolean"
               },
-              "default": "null",
-              "description": "Defines a string value for the aria-labelledby attribute that refers to the element\nlabeling the dialog for accessibility",
-              "attribute": "aria-labelledby",
-              "reflects": true
-            },
-            {
-              "kind": "field",
-              "name": "ariaDescribedBy",
-              "type": {
-                "text": "string | null"
-              },
-              "default": "null",
-              "description": "Defines a string value for the aria-describedby attribute that refers to the element\ndescribing the dialog for accessibility",
-              "attribute": "aria-describedby",
-              "reflects": true
-            },
-            {
-              "kind": "field",
-              "name": "ariaDescription",
-              "type": {
-                "text": "string | null"
-              },
-              "default": "null",
-              "description": "Defines a string value for the aria-description attribute that refers to the element\ndescribing the dialog for accessibility",
-              "attribute": "aria-description",
-              "reflects": true
-            },
-            {
-              "kind": "field",
-              "name": "headerText",
-              "type": {
-                "text": "string | undefined"
-              },
-              "description": "Defines a string value to display as the title of the dialog",
-              "attribute": "header-text",
-              "reflects": true
-            },
-            {
-              "kind": "field",
-              "name": "descriptionText",
-              "type": {
-                "text": "string | undefined"
-              },
-              "description": "Defines a string value to display as the under-header description of the dialog",
-              "attribute": "description-text",
-              "reflects": true
-            },
-            {
-              "kind": "field",
-              "name": "headerTagName",
-              "type": {
-                "text": "string"
-              },
-              "description": "The html tag to be used for the header text",
-              "attribute": "header-tag-name",
-              "reflects": true
-            },
-            {
-              "kind": "field",
-              "name": "descriptionTagName",
-              "type": {
-                "text": "string"
-              },
-              "description": "The html tag to be used for the below-header description text",
-              "attribute": "description-tag-name",
-              "reflects": true
-            },
-            {
-              "kind": "field",
-              "name": "role",
-              "type": {
-                "text": "DialogRole"
-              },
-              "description": "Role of the dialog",
-              "default": "dialog",
-              "attribute": "role",
-              "reflects": true
-            },
-            {
-              "kind": "field",
-              "name": "disableAriaHasPopup",
-              "type": {
-                "text": "boolean"
-              },
-              "description": "Disable setting the aria-haspopup attribute on trigger element.\nMake sure to set this to true when the popover is extended and its role\nis not 'dialog' or 'alertdialog' i.e. listbox, menu, etc.",
-              "default": "false",
-              "attribute": "disable-aria-haspopup",
-              "reflects": true
-            },
-            {
-              "kind": "field",
-              "name": "focusTrap",
-              "type": {
-                "text": "boolean"
-              },
-              "privacy": "protected",
-              "description": "Determines whether the focus trap is enabled.\nIf true, focus will be restricted to the content within this component.\n\nNOTE: this should only be disabled in rare cases! By default a Modal Dialog\nshould trap focus always.",
-              "default": "true",
-              "attribute": "focus-trap",
-              "reflects": true,
-              "inheritedFrom": {
-                "name": "FocusTrapMixin",
-                "module": "utils/mixins/FocusTrapMixin.js"
-              }
-            },
-            {
-              "kind": "method",
-              "name": "closeDialog",
-              "privacy": "private",
-              "description": "Fired when Close Button is clicked or Escape key is pressed.\nThis method dispatches the close event. Setting visible to false\nhas to be done by the consumer of the component."
-            },
-            {
-              "kind": "method",
-              "name": "isOpenUpdated",
-              "privacy": "private",
-              "parameters": [
-                {
-                  "name": "oldValue",
-                  "type": {
-                    "text": "boolean | undefined"
-                  },
-                  "description": "The old value of the visible property."
-                },
-                {
-                  "name": "newValue",
-                  "type": {
-                    "text": "boolean"
-                  },
-                  "description": "The new value of the visible property."
-                }
-              ],
-              "description": "Handles the dialog visibility change.\nHandles the exit event to close the dialog."
-            },
-            {
-              "kind": "field",
-              "name": "preventScroll",
-              "type": {
-                "text": "boolean"
-              },
-              "privacy": "protected",
-              "description": "Prevent outside scrolling when element is shown.\n\nIMPLEMENT THIS IN YOUR COMPONENT.",
-              "inheritedFrom": {
-                "name": "PreventScrollMixin",
-                "module": "utils/mixins/PreventScrollMixin.js"
-              }
-            },
-            {
-              "kind": "method",
-              "name": "activatePreventScroll",
-              "privacy": "protected",
-              "inheritedFrom": {
-                "name": "PreventScrollMixin",
-                "module": "utils/mixins/PreventScrollMixin.js"
-              }
-            },
-            {
-              "kind": "method",
-              "name": "deactivatePreventScroll",
-              "privacy": "protected",
-              "inheritedFrom": {
-                "name": "PreventScrollMixin",
-                "module": "utils/mixins/PreventScrollMixin.js"
-              }
-            },
-            {
-              "kind": "field",
-              "name": "shouldFocusTrapWrap",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "true",
-              "description": "Determines whether focus should wrap around when reaching the first or last focusable element.\nIf true, focus will cycle from end to start and vice versa.\n\nThis only applies when `focusTrap` is true.",
-              "attribute": "should-focus-trap-wrap",
-              "reflects": true,
-              "inheritedFrom": {
-                "name": "FocusTrapMixin",
-                "module": "utils/mixins/FocusTrapMixin.js"
-              }
+              "default": "true",
+              "description": "Determines whether focus should wrap around when reaching the first or last focusable element.\nIf true, focus will cycle from end to start and vice versa.\n\nThis only applies when `focusTrap` is true.",
+              "attribute": "should-focus-trap-wrap",
+              "reflects": true,
+              "inheritedFrom": {
+                "name": "FocusTrapMixin",
+                "module": "utils/mixins/FocusTrapMixin.js"
+              }
             },
             {
               "kind": "method",
@@ -8572,1208 +8465,1189 @@
               }
             },
             {
-              "kind": "method",
-              "name": "renderFooter",
-              "privacy": "protected",
-              "description": "Renders the footer of the card if footer-link,\nfooter-button-primary, or footer-button-secondary slots are provided",
-              "return": {
-                "type": {
-                  "text": ""
-                }
-              },
-              "inheritedFrom": {
-                "name": "FooterMixin",
-                "module": "utils/mixins/FooterMixin.js"
-              }
-            }
-          ],
-          "events": [
-            {
-              "description": "(React: onShown) Dispatched when the dialog is shown",
-              "name": "shown",
-              "reactName": "onShown"
-            },
-            {
-              "description": "(React: onHidden) Dispatched when the dialog is hidden",
-              "name": "hidden",
-              "reactName": "onHidden"
-            },
-            {
-              "description": "(React: onCreated) Dispatched when the dialog is created (added to the DOM)",
-              "name": "created",
-              "reactName": "onCreated"
-            },
-            {
-              "description": "(React: onDestroyed) Dispatched when the dialog is destroyed (removed from the DOM)",
-              "name": "destroyed",
-              "reactName": "onDestroyed"
-            },
-            {
-              "description": "(React: onClose) Dispatched when the Close Button is clicked or Escape key is pressed (this does not hide the dialog)",
-              "name": "close",
-              "reactName": "onClose"
-            }
-          ],
-          "attributes": [
-            {
+              "kind": "field",
               "name": "id",
               "type": {
                 "text": "string"
               },
               "default": "''",
-              "description": "The unique ID of the dialog",
-              "fieldName": "id"
+              "description": "The unique ID of the popover.",
+              "attribute": "id",
+              "reflects": true,
+              "inheritedFrom": {
+                "name": "Popover",
+                "module": "components/popover/popover.component.js"
+              }
             },
             {
-              "name": "triggerId",
+              "kind": "field",
+              "name": "triggerID",
               "type": {
-                "text": "string | undefined"
+                "text": "string"
               },
-              "description": "The ID of the element that triggers the dialog",
-              "default": "undefined",
-              "fieldName": "triggerId"
+              "default": "''",
+              "description": "The ID of the element that triggers the popover.\nThis attribute is required for the popover to work.",
+              "attribute": "triggerID",
+              "reflects": true,
+              "inheritedFrom": {
+                "name": "Popover",
+                "module": "components/popover/popover.component.js"
+              }
             },
             {
-              "name": "visible",
+              "kind": "field",
+              "name": "placement",
               "type": {
-                "text": "boolean"
+                "text": "PopoverPlacement"
               },
-              "description": "The visibility of the dialog\n\nDialog is a controlled component, visible is the only property that controls the visibility of the dialog.",
-              "default": "false",
-              "fieldName": "visible"
+              "description": "The placement of the popover.\n- **top**\n- **top-start**\n- **top-end**\n- **bottom**\n- **bottom-start**\n- **bottom-end**\n- **left**\n- **left-start**\n- **left-end**\n- **right**\n- **right-start**\n- **right-end**",
+              "default": "bottom",
+              "attribute": "placement",
+              "reflects": true,
+              "inheritedFrom": {
+                "name": "Popover",
+                "module": "components/popover/popover.component.js"
+              }
             },
             {
-              "name": "z-index",
+              "kind": "field",
+              "name": "color",
               "type": {
-                "text": "number"
+                "text": "PopoverColor"
               },
-              "description": "The z-index of the dialog\n\nThe backdrop will have z-index of `zIndex - 1`",
-              "default": "1000",
-              "fieldName": "zIndex"
+              "description": "Color of the popover\n- **tonal**\n- **contrast**",
+              "default": "tonal",
+              "attribute": "color",
+              "reflects": true,
+              "inheritedFrom": {
+                "name": "Popover",
+                "module": "components/popover/popover.component.js"
+              }
             },
             {
-              "name": "size",
+              "kind": "field",
+              "name": "visible",
               "type": {
-                "text": "DialogSize"
+                "text": "boolean"
               },
-              "description": "The size of the dialog, can be 'small' (432px width), 'medium' (656px width), 'large' (992px width), 'xlarge' (90% width) or 'fullscreen' (100% width).",
-              "default": "small",
-              "fieldName": "size"
+              "description": "The visibility of the popover.",
+              "default": "false",
+              "attribute": "visible",
+              "reflects": true,
+              "inheritedFrom": {
+                "name": "Popover",
+                "module": "components/popover/popover.component.js"
+              }
             },
             {
-              "name": "variant",
+              "kind": "field",
+              "name": "offset",
               "type": {
-                "text": "DialogVariant"
+                "text": "number"
               },
-              "description": "The variant of the dialog, can be 'default' or 'promotional'",
-              "default": "default",
-              "fieldName": "variant"
+              "description": "The offset of the popover.",
+              "default": "4",
+              "attribute": "offset",
+              "reflects": true,
+              "inheritedFrom": {
+                "name": "Popover",
+                "module": "components/popover/popover.component.js"
+              }
             },
             {
-              "name": "close-button-aria-label",
+              "kind": "field",
+              "name": "boundary",
               "type": {
-                "text": "string | null"
+                "text": "'clippingAncestors' | string"
               },
-              "default": "null",
-              "description": "Defines a string value for the aria-label attribute for close button accessibility",
-              "fieldName": "closeButtonAriaLabel"
+              "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"
+              }
             },
             {
-              "name": "aria-label",
+              "kind": "field",
+              "name": "boundaryRoot",
               "type": {
-                "text": "string | null"
+                "text": "'viewport' | 'document'"
               },
-              "default": "null",
-              "description": "Defines a string value for the aria-label attribute when header is not used",
-              "fieldName": "ariaLabel"
+              "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"
+              }
             },
             {
-              "name": "aria-labelledby",
+              "kind": "field",
+              "name": "boundaryPadding",
               "type": {
-                "text": "string | null"
+                "text": "undefined | number"
               },
-              "default": "null",
-              "description": "Defines a string value for the aria-labelledby attribute that refers to the element\nlabeling the dialog for accessibility",
-              "fieldName": "ariaLabelledby"
+              "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"
+              }
             },
             {
-              "name": "aria-describedby",
+              "kind": "field",
+              "name": "interactive",
               "type": {
-                "text": "string | null"
+                "text": "boolean"
               },
-              "default": "null",
-              "description": "Defines a string value for the aria-describedby attribute that refers to the element\ndescribing the dialog for accessibility",
-              "fieldName": "ariaDescribedBy"
+              "description": "Determines whether the popover is interactive.\nMake sure to set focusTrap to true to keep the focus inside the popover in case necessary.\nSetting interactive to true will not automatically set focusTrap!",
+              "default": "false",
+              "attribute": "interactive",
+              "reflects": true,
+              "inheritedFrom": {
+                "name": "Popover",
+                "module": "components/popover/popover.component.js"
+              }
             },
             {
-              "name": "aria-description",
+              "kind": "field",
+              "name": "delay",
               "type": {
-                "text": "string | null"
+                "text": "string"
               },
-              "default": "null",
-              "description": "Defines a string value for the aria-description attribute that refers to the element\ndescribing the dialog for accessibility",
-              "fieldName": "ariaDescription"
+              "description": "The delay of the show/hide popover.",
+              "default": "0,0",
+              "attribute": "delay",
+              "reflects": true,
+              "inheritedFrom": {
+                "name": "Popover",
+                "module": "components/popover/popover.component.js"
+              }
             },
             {
-              "name": "header-text",
+              "kind": "field",
+              "name": "hideOnEscape",
               "type": {
-                "text": "string | undefined"
+                "text": "boolean"
               },
-              "description": "Defines a string value to display as the title of the dialog",
-              "fieldName": "headerText"
+              "description": "Hide popover on escape key press.",
+              "default": "false",
+              "attribute": "hide-on-escape",
+              "reflects": true,
+              "inheritedFrom": {
+                "name": "Popover",
+                "module": "components/popover/popover.component.js"
+              }
             },
             {
-              "name": "description-text",
+              "kind": "field",
+              "name": "propagateEventOnEscape",
               "type": {
-                "text": "string | undefined"
+                "text": "boolean"
               },
-              "description": "Defines a string value to display as the under-header description of the dialog",
-              "fieldName": "descriptionText"
+              "description": "Propagates the event, when the escape key is pressed (only when pressed inside the popover)\nIf true, the escape key press close the popover and will propagate the keydown event.\nIf false, the escape key press will close the popover but will not propagate the keydown event.\n(set to false to prevent the event from bubbling up to the document).\n\nThis only works when `hideOnEscape` is true.",
+              "default": "false",
+              "attribute": "propagate-event-on-escape",
+              "reflects": true,
+              "inheritedFrom": {
+                "name": "Popover",
+                "module": "components/popover/popover.component.js"
+              }
             },
             {
-              "name": "header-tag-name",
+              "kind": "field",
+              "name": "hideOnBlur",
               "type": {
-                "text": "string"
+                "text": "boolean"
               },
-              "description": "The html tag to be used for the header text",
-              "fieldName": "headerTagName"
+              "description": "Hide popover on blur.",
+              "default": "false",
+              "attribute": "hide-on-blur",
+              "reflects": true,
+              "inheritedFrom": {
+                "name": "Popover",
+                "module": "components/popover/popover.component.js"
+              }
             },
             {
-              "name": "description-tag-name",
+              "kind": "field",
+              "name": "hideOnOutsideClick",
               "type": {
-                "text": "string"
+                "text": "boolean"
               },
-              "description": "The html tag to be used for the below-header description text",
-              "fieldName": "descriptionTagName"
+              "description": "Hide on outside click of the popover.",
+              "default": "false",
+              "attribute": "hide-on-outside-click",
+              "reflects": true,
+              "inheritedFrom": {
+                "name": "Popover",
+                "module": "components/popover/popover.component.js"
+              }
             },
             {
-              "name": "role",
+              "kind": "field",
+              "name": "focusBackToTrigger",
               "type": {
-                "text": "DialogRole"
+                "text": "boolean"
               },
-              "description": "Role of the dialog",
-              "default": "dialog",
-              "fieldName": "role"
+              "description": "The focus back to trigger after the popover hide.",
+              "default": "false",
+              "attribute": "focus-back-to-trigger",
+              "reflects": true,
+              "inheritedFrom": {
+                "name": "Popover",
+                "module": "components/popover/popover.component.js"
+              }
             },
             {
-              "name": "disable-aria-haspopup",
+              "kind": "field",
+              "name": "backdrop",
               "type": {
                 "text": "boolean"
               },
-              "description": "Disable setting the aria-haspopup attribute on trigger element.\nMake sure to set this to true when the popover is extended and its role\nis not 'dialog' or 'alertdialog' i.e. listbox, menu, etc.",
+              "description": "Determines whether the popover with backdrop.\nOther than popover and trigger element, the rest of the screen will be covered with a backdrop.",
               "default": "false",
-              "fieldName": "disableAriaHasPopup"
+              "attribute": "backdrop",
+              "reflects": true,
+              "inheritedFrom": {
+                "name": "Popover",
+                "module": "components/popover/popover.component.js"
+              }
             },
             {
-              "name": "focus-trap",
+              "kind": "field",
+              "name": "flip",
               "type": {
                 "text": "boolean"
               },
-              "description": "Determines whether the focus trap is enabled.\nIf true, focus will be restricted to the content within this component.\n\nNOTE: this should only be disabled in rare cases! By default a Modal Dialog\nshould trap focus always.",
+              "description": "Changes the placement of popover to keep it in view when scrolling.",
               "default": "true",
-              "fieldName": "focusTrap"
+              "attribute": "flip",
+              "reflects": true,
+              "inheritedFrom": {
+                "name": "Popover",
+                "module": "components/popover/popover.component.js"
+              }
             },
             {
-              "name": "should-focus-trap-wrap",
+              "kind": "field",
+              "name": "size",
               "type": {
                 "text": "boolean"
               },
-              "default": "true",
-              "description": "Determines whether focus should wrap around when reaching the first or last focusable element.\nIf true, focus will cycle from end to start and vice versa.\n\nThis only applies when `focusTrap` is true.",
-              "fieldName": "shouldFocusTrapWrap",
+              "description": "Changes the size of popover to keep it in view when scrolling.",
+              "default": "false",
+              "attribute": "size",
+              "reflects": true,
               "inheritedFrom": {
-                "name": "FocusTrapMixin",
-                "module": "src/utils/mixins/FocusTrapMixin.ts"
+                "name": "Popover",
+                "module": "components/popover/popover.component.js"
               }
-            }
-          ],
-          "mixins": [
+            },
             {
-              "name": "PreventScrollMixin",
-              "module": "/src/utils/mixins/PreventScrollMixin"
+              "kind": "field",
+              "name": "zIndex",
+              "type": {
+                "text": "number"
+              },
+              "description": "The z-index of the popover.",
+              "default": "1000",
+              "attribute": "z-index",
+              "reflects": true,
+              "inheritedFrom": {
+                "name": "Popover",
+                "module": "components/popover/popover.component.js"
+              }
             },
             {
-              "name": "FocusTrapMixin",
-              "module": "/src/utils/mixins/FocusTrapMixin"
-            },
-            {
-              "name": "FooterMixin",
-              "module": "/src/utils/mixins/FooterMixin"
-            }
-          ],
-          "superclass": {
-            "name": "Component",
-            "module": "/src/models"
-          },
-          "tagName": "mdc-dialog",
-          "jsDoc": "/**\n * Dialog component is a modal dialog that can be used to display information or prompt the user for input.\n * It can be used to create custom dialogs where content for the body and footer actions is provided by the consumer.\n * The dialog is available in 5 sizes: small, medium, large, xlarge and fullscreen. It may also receive custom styling/sizing.\n * The dialog interrupts the user and will block interaction with the rest of the application until it is closed.\n *\n * The dialog can be controlled solely through the `visible` property, no trigger element is required.\n * If a `triggerId` is provided, the dialog will manage focus with that element, otherwise it will\n * remember the previously focused element before the dialog was opened.\n *\n * The dialog is a controlled component, meaning it does not have its own state management for visibility.\n * Use the `visible` property to control the visibility of the dialog.\n * Use the `onClose` event to handle the close action of the dialog (fired when Close button is clicked\n * or Escape is pressed).\n *\n * Dialog component have 2 variants: default and promotional.\n *\n * **Accessibility notes for consuming (have to be explicitly set when you consume the component)**\n *\n * - The dialog should have an aria-label or aria-labelledby attribute to provide a label for screen readers.\n * - Use aria-labelledby to reference the ID of the element that labels the dialog when there is no visible title.\n *\n * **Note: Programmatic show/hide requires the ? prefix on the visible attribute**\n * - Use `?visible=true/false` as an attribute instead of `visible=true/false`\n * - Reference docs for more info: https://lit.dev/docs/templates/expressions/#boolean-attribute-expressions\n *\n * @dependency mdc-button\n * @dependency mdc-text\n *\n * @tagname mdc-dialog\n *\n * @event shown - (React: onShown) Dispatched when the dialog is shown\n * @event hidden - (React: onHidden) Dispatched when the dialog is hidden\n * @event created - (React: onCreated) Dispatched when the dialog is created (added to the DOM)\n * @event destroyed - (React: onDestroyed) Dispatched when the dialog is destroyed (removed from the DOM)\n * @event close - (React: onClose) Dispatched when the Close Button is clicked or Escape key is pressed\n * (this does not hide the dialog)\n *\n * @cssproperty --mdc-dialog-primary-background-color - primary background color of the dialog\n * @cssproperty --mdc-dialog-border-color - border color of the dialog\n * @cssproperty --mdc-dialog-header-text-color - text color of the header/title of the dialog\n * @cssproperty --mdc-dialog-description-text-color - text color of the below header description of the dialog\n * @cssproperty --mdc-dialog-elevation-3 - elevation of the dialog\n * @cssproperty --mdc-dialog-width - width of the dialog\n *\n * @slot header-prefix - Slot for the dialog header content. This can be used to pass custom header content.\n * @slot dialog-body - Slot for the dialog body content\n * @slot footer-link - This slot is for passing `mdc-link` component within the footer section.\n * @slot footer-button-secondary - This slot is for passing secondary variant of `mdc-button` component\n * within the footer section.\n * @slot footer-button-primary - This slot is for passing primary variant of\n * `mdc-button` component within the footer section.\n * @slot footer -  This slot is for passing custom footer content. Only use this if really needed,\n * using the footer-link and footer-button slots is preferred\n */",
-          "customElement": true
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "default",
-          "declaration": {
-            "name": "Dialog",
-            "module": "components/dialog/dialog.component.js"
-          }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "components/divider/divider.component.js",
-      "declarations": [
-        {
-          "kind": "class",
-          "description": "`mdc-divider` is a component that provides a line to separate and organize content.\nIt can also include a button or text positioned centrally, allowing users to interact with the layout.\n\n**Divider Orientation:**\n- **Horizontal**: A thin, horizontal line.\n- **Vertical**: A thin, vertical line.\n\n**Divider Variants:**\n- **solid**: Solid line.\n- **gradient**: Gradient Line.\n\n**Divider Types:**\n- The type of divider is inferred based on the kind of slot present.\n - **Primary**: A simple horizontal or vertical divider.\n - **Text**: A horizontal divider with a text label in the center.\n - **Grabber Button**: A horizontal or vertical divider with a styled button in the center.\n\n**Accessibility:**\n- When the slot is replaced by an `mdc-button`:\n  - `aria-label` should be passed to the `mdc-button`.\n  - `aria-expanded` should be passed to the `mdc-button`.\n\n**Notes:**\n- If the slot is replaced by an invalid tag name or contains multiple elements,\n  the divider defaults to the **Primary** type.\n- To override the styles of the divider, use the provided CSS custom properties.",
-          "name": "Divider",
-          "cssProperties": [
-            {
-              "description": "background color of the divider",
-              "name": "--mdc-divider-background-color"
-            },
-            {
-              "description": "width of the divider",
-              "name": "--mdc-divider-width"
-            },
-            {
-              "description": "gradient of the horizontal divider",
-              "name": "--mdc-divider-horizontal-gradient"
-            },
-            {
-              "description": "gradient of the vertical divider",
-              "name": "--mdc-divider-vertical-gradient"
-            },
-            {
-              "description": "font size of label in the text divider",
-              "name": "--mdc-divider-text-size"
-            },
-            {
-              "description": "font color of label in the text divider",
-              "name": "--mdc-divider-text-color"
-            },
-            {
-              "description": "left and right margin of label in the text divider",
-              "name": "--mdc-divider-text-margin"
-            },
-            {
-              "description": "line height of label in the text divider",
-              "name": "--mdc-divider-text-line-height"
-            },
-            {
-              "description": "background color of the grabber button in rest state",
-              "name": "--mdc-divider-grabber-button-background-color-normal"
+              "kind": "field",
+              "name": "appendTo",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "Element ID that the popover append to.",
+              "default": "''",
+              "attribute": "append-to",
+              "reflects": true,
+              "inheritedFrom": {
+                "name": "Popover",
+                "module": "components/popover/popover.component.js"
+              }
             },
             {
-              "description": "background color of the grabber button in hover state",
-              "name": "--mdc-divider-grabber-button-background-color-hover"
+              "kind": "field",
+              "name": "closeButtonAriaLabel",
+              "type": {
+                "text": "string | null"
+              },
+              "default": "null",
+              "description": "aria-label attribute to be set for close button accessibility.",
+              "attribute": "close-button-aria-label",
+              "reflects": true,
+              "inheritedFrom": {
+                "name": "Popover",
+                "module": "components/popover/popover.component.js"
+              }
             },
             {
-              "description": "background color of the grabber button in pressed state",
-              "name": "--mdc-divider-grabber-button-background-color-pressed"
+              "kind": "field",
+              "name": "role",
+              "type": {
+                "text": "HTMLElement['role']"
+              },
+              "description": "Role of the popover",
+              "default": "dialog",
+              "attribute": "role",
+              "reflects": true,
+              "inheritedFrom": {
+                "name": "Popover",
+                "module": "components/popover/popover.component.js"
+              }
             },
             {
-              "description": "border color of the grabber button",
-              "name": "--mdc-divider-grabber-button-border-color"
+              "kind": "field",
+              "name": "ariaLabelledby",
+              "type": {
+                "text": "string | null"
+              },
+              "default": "null",
+              "description": "aria-labelledby for an interactive popover only, defaults to the trigger component id.\nUsed in nested cases where the triggerComponent isn't the actual button.",
+              "attribute": "aria-labelledby",
+              "reflects": true,
+              "inheritedFrom": {
+                "name": "Popover",
+                "module": "components/popover/popover.component.js"
+              }
             },
-            {
-              "description": "border radius of the grabber button",
-              "name": "--mdc-divider-grabber-button-border-radius"
-            }
-          ],
-          "members": [
             {
               "kind": "field",
-              "name": "orientation",
+              "name": "ariaDescribedby",
               "type": {
-                "text": "DividerOrientation"
+                "text": "string | null"
               },
-              "description": "Two orientations of divider\n- **horizontal**: A thin, horizontal line with 0.0625rem width.\n- **vertical**: A thin, vertical line with 0.0625rem width.\n\nNote: We do not support \"Vertical Text Divider\" as of now.",
-              "default": "horizontal",
-              "attribute": "orientation",
-              "reflects": true
+              "default": "null",
+              "description": "aria-describedby of the popover.",
+              "attribute": "aria-describedby",
+              "reflects": true,
+              "inheritedFrom": {
+                "name": "Popover",
+                "module": "components/popover/popover.component.js"
+              }
             },
             {
               "kind": "field",
-              "name": "variant",
+              "name": "disableAriaHasPopup",
               "type": {
-                "text": "DividerVariant"
+                "text": "boolean"
               },
-              "description": "Two variants of divider\n- **solid**: Solid line.\n- **gradient**: Gradient Line that fades on either sides of the divider.",
-              "default": "solid",
-              "attribute": "variant",
-              "reflects": true
+              "description": "Disable setting the aria-haspopup attribute on trigger element.\nMake sure to set this to true when the popover is extended and its role\nis not 'dialog' or 'alertdialog' i.e. listbox, menu, etc.",
+              "default": "false",
+              "attribute": "disable-aria-haspopup",
+              "reflects": true,
+              "inheritedFrom": {
+                "name": "Popover",
+                "module": "components/popover/popover.component.js"
+              }
             },
             {
               "kind": "field",
-              "name": "arrowDirection",
+              "name": "arrowElement",
               "type": {
-                "text": "Directions"
+                "text": "HTMLElement | null"
               },
-              "description": "Direction of the arrow icon, if applicable.\n- **positive**\n- **negative**\n\nNote: Positive and Negative directions are defined based on Cartesian plane.",
-              "default": "'negative'",
-              "attribute": "arrow-direction",
-              "reflects": true
+              "privacy": "public",
+              "default": "null",
+              "inheritedFrom": {
+                "name": "Popover",
+                "module": "components/popover/popover.component.js"
+              }
             },
             {
               "kind": "field",
-              "name": "buttonPosition",
+              "name": "triggerElement",
               "type": {
-                "text": "Directions"
+                "text": "HTMLElement | null"
               },
-              "description": "Position of the button, if applicable.\n- **positive**\n- **negative**\n\nNote: Positive and Negative directions are defined based on Cartesian plane.",
-              "default": "'negative'",
-              "attribute": "button-position",
-              "reflects": true
+              "privacy": "public",
+              "default": "null",
+              "inheritedFrom": {
+                "name": "Popover",
+                "module": "components/popover/popover.component.js"
+              }
             },
             {
               "kind": "method",
-              "name": "setVariant",
+              "name": "setupTriggerListener",
+              "privacy": "private",
+              "description": "Sets up the trigger event listeners based on the trigger type.",
+              "inheritedFrom": {
+                "name": "Popover",
+                "module": "components/popover/popover.component.js"
+              }
+            },
+            {
+              "kind": "method",
+              "name": "removeEventListeners",
               "privacy": "private",
+              "description": "Removes the trigger event listeners.",
+              "inheritedFrom": {
+                "name": "Popover",
+                "module": "components/popover/popover.component.js"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "onOutsidePopoverClick",
+              "privacy": "protected",
+              "description": "Handles the outside click event to close the popover.",
               "parameters": [
                 {
-                  "name": "variant",
-                  "type": {
-                    "text": "DividerVariant"
-                  },
-                  "description": "The variant to set."
+                  "description": "The mouse event.",
+                  "name": "event"
                 }
               ],
-              "description": "Sets the variant attribute for the divider component.\nIf the provided variant is not included in the DIVIDER_VARIANT,\nit defaults to the value specified in DEFAULTS.VARIANT."
+              "inheritedFrom": {
+                "name": "Popover",
+                "module": "components/popover/popover.component.js"
+              }
             },
             {
-              "kind": "method",
-              "name": "setOrientation",
+              "kind": "field",
+              "name": "onEscapeKeydown",
               "privacy": "private",
+              "description": "Handles the escape keydown event to close the popover.\n\nThis method is attached to the document.",
               "parameters": [
                 {
-                  "name": "orientation",
-                  "type": {
-                    "text": "DividerOrientation"
-                  },
-                  "description": "The orientation to set."
+                  "description": "The keyboard event.",
+                  "name": "event"
                 }
               ],
-              "description": "Sets the orientation attribute for the divider component.\nIf the provided orientation is not included in the DIVIDER_ORIENTATION,\nit defaults to the value specified in DEFAULTS.ORIENTATION."
+              "inheritedFrom": {
+                "name": "Popover",
+                "module": "components/popover/popover.component.js"
+              }
             },
             {
-              "kind": "method",
-              "name": "ensureValidDirections",
+              "kind": "field",
+              "name": "onPopoverFocusOut",
               "privacy": "private",
-              "description": "Sets the buttonPosition and arrowDirection attribute for the divider component.\nIf the provided buttonPosition and arrowDirection are not included in the DIRECTIONS,\nit defaults to the value specified in DIRECTIONS based on the ORIENTATION.",
+              "description": "Handles the popover focus out event.",
               "parameters": [
                 {
-                  "description": "The buttonPosition to set.",
-                  "name": "buttonPosition"
-                },
-                {
-                  "description": "The arrowDirection to set.",
-                  "name": "arrowDirection"
+                  "description": "The focus event.",
+                  "name": "event"
                 }
-              ]
+              ],
+              "inheritedFrom": {
+                "name": "Popover",
+                "module": "components/popover/popover.component.js"
+              }
             },
             {
               "kind": "method",
-              "name": "setGrabberButton",
-              "privacy": "private",
-              "return": {
-                "type": {
-                  "text": "void"
+              "name": "isOpenUpdated",
+              "privacy": "protected",
+              "parameters": [
+                {
+                  "name": "oldValue",
+                  "type": {
+                    "text": "boolean"
+                  },
+                  "description": "The old value of the visible property."
+                },
+                {
+                  "name": "newValue",
+                  "type": {
+                    "text": "boolean"
+                  },
+                  "description": "The new value of the visible property."
                 }
-              },
-              "description": "Configures the grabber button within the divider.\n\n- Sets the `prefix-icon` attribute for the grabber button based\non the `arrow-direction` and `orientation` properties.\n\nThis method updates the DOM element dynamically if a grabber button is present."
+              ],
+              "description": "Handles the popover visibility change and position the popover.\nHandles the exit event to close the popover.",
+              "inheritedFrom": {
+                "name": "Popover",
+                "module": "components/popover/popover.component.js"
+              }
             },
             {
-              "kind": "method",
-              "name": "getArrowIcon",
+              "kind": "field",
+              "name": "handleMouseEnter",
               "privacy": "private",
-              "return": {
-                "type": {
-                  "text": ""
-                }
-              },
-              "description": "Determines the arrow icon based on the consumer-defined `arrowDirection`."
+              "description": "Handles mouse enter event on the trigger element.\nThis method sets the `isHovered` flag to true and shows the popover",
+              "inheritedFrom": {
+                "name": "Popover",
+                "module": "components/popover/popover.component.js"
+              }
             },
             {
-              "kind": "method",
-              "name": "inferDividerType",
+              "kind": "field",
+              "name": "handleMouseLeave",
               "privacy": "private",
-              "description": "Infers the type of divider based on the kind of slot present.",
-              "parameters": [
-                {
-                  "description": "default slot of divider",
-                  "name": "slot"
-                }
-              ]
-            }
-          ],
-          "attributes": [
-            {
-              "name": "orientation",
-              "type": {
-                "text": "DividerOrientation"
-              },
-              "description": "Two orientations of divider\n- **horizontal**: A thin, horizontal line with 0.0625rem width.\n- **vertical**: A thin, vertical line with 0.0625rem width.\n\nNote: We do not support \"Vertical Text Divider\" as of now.",
-              "default": "horizontal",
-              "fieldName": "orientation"
+              "description": "Handles mouse leave event on the trigger element.\nThis method sets the `isHovered` flag to false and starts the close delay\ntimer to hide the popover.",
+              "inheritedFrom": {
+                "name": "Popover",
+                "module": "components/popover/popover.component.js"
+              }
             },
             {
-              "name": "variant",
-              "type": {
-                "text": "DividerVariant"
-              },
-              "description": "Two variants of divider\n- **solid**: Solid line.\n- **gradient**: Gradient Line that fades on either sides of the divider.",
-              "default": "solid",
-              "fieldName": "variant"
+              "kind": "field",
+              "name": "handleFocusOut",
+              "privacy": "private",
+              "description": "Handles focus out event on the trigger element.\nThis method checks if the popover is not hovered and hides the popover.\nIf the popover is hovered, it will not hide the popover.",
+              "inheritedFrom": {
+                "name": "Popover",
+                "module": "components/popover/popover.component.js"
+              }
             },
             {
-              "name": "arrow-direction",
-              "type": {
-                "text": "Directions"
-              },
-              "description": "Direction of the arrow icon, if applicable.\n- **positive**\n- **negative**\n\nNote: Positive and Negative directions are defined based on Cartesian plane.",
-              "default": "'negative'",
-              "fieldName": "arrowDirection"
+              "kind": "field",
+              "name": "startCloseDelay",
+              "privacy": "private",
+              "description": "Starts the close delay timer.\nIf the popover is not interactive, it will close the popover after the delay.",
+              "inheritedFrom": {
+                "name": "Popover",
+                "module": "components/popover/popover.component.js"
+              }
             },
             {
-              "name": "button-position",
-              "type": {
-                "text": "Directions"
-              },
-              "description": "Position of the button, if applicable.\n- **positive**\n- **negative**\n\nNote: Positive and Negative directions are defined based on Cartesian plane.",
-              "default": "'negative'",
-              "fieldName": "buttonPosition"
-            }
-          ],
-          "superclass": {
-            "name": "Component",
-            "module": "/src/models"
-          },
-          "tagName": "mdc-divider",
-          "jsDoc": "/**\n * `mdc-divider` is a component that provides a line to separate and organize content.\n * It can also include a button or text positioned centrally, allowing users to interact with the layout.\n *\n * **Divider Orientation:**\n * - **Horizontal**: A thin, horizontal line.\n * - **Vertical**: A thin, vertical line.\n *\n * **Divider Variants:**\n * - **solid**: Solid line.\n * - **gradient**: Gradient Line.\n *\n * **Divider Types:**\n * - The type of divider is inferred based on the kind of slot present.\n *  - **Primary**: A simple horizontal or vertical divider.\n *  - **Text**: A horizontal divider with a text label in the center.\n *  - **Grabber Button**: A horizontal or vertical divider with a styled button in the center.\n *\n * **Accessibility:**\n * - When the slot is replaced by an `mdc-button`:\n *   - `aria-label` should be passed to the `mdc-button`.\n *   - `aria-expanded` should be passed to the `mdc-button`.\n *\n * **Notes:**\n * - If the slot is replaced by an invalid tag name or contains multiple elements,\n *   the divider defaults to the **Primary** type.\n * - To override the styles of the divider, use the provided CSS custom properties.\n *\n * @tagname mdc-divider\n *\n * @cssproperty --mdc-divider-background-color - background color of the divider\n * @cssproperty --mdc-divider-width - width of the divider\n * @cssproperty --mdc-divider-horizontal-gradient - gradient of the horizontal divider\n * @cssproperty --mdc-divider-vertical-gradient - gradient of the vertical divider\n * @cssproperty --mdc-divider-text-size - font size of label in the text divider\n * @cssproperty --mdc-divider-text-color - font color of label in the text divider\n * @cssproperty --mdc-divider-text-margin - left and right margin of label in the text divider\n * @cssproperty --mdc-divider-text-line-height - line height of label in the text divider\n * @cssproperty --mdc-divider-grabber-button-background-color-normal - background color of the grabber button\n *  in rest state\n * @cssproperty --mdc-divider-grabber-button-background-color-hover - background color of the grabber button\n *  in hover state\n * @cssproperty --mdc-divider-grabber-button-background-color-pressed - background color of the grabber button\n *  in pressed state\n * @cssproperty --mdc-divider-grabber-button-border-color - border color of the grabber button\n * @cssproperty --mdc-divider-grabber-button-border-radius - border radius of the grabber button\n */",
-          "customElement": true
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "default",
-          "declaration": {
-            "name": "Divider",
-            "module": "components/divider/divider.component.js"
-          }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "components/coachmark/coachmark.component.js",
-      "declarations": [
-        {
-          "kind": "class",
-          "description": "Coachmark component based on top of the popover component,\nwith the default value of certain properties changed.",
-          "name": "Coachmark",
-          "cssProperties": [
-            {
-              "description": "radius of the arrow border",
-              "name": "--mdc-popover-arrow-border-radius",
+              "kind": "field",
+              "name": "cancelCloseDelay",
+              "privacy": "private",
+              "description": "Cancels the close delay timer.",
               "inheritedFrom": {
                 "name": "Popover",
-                "module": "src/components/popover/popover.component.ts"
+                "module": "components/popover/popover.component.js"
               }
             },
             {
-              "description": "border of the arrow",
-              "name": "--mdc-popover-arrow-border",
+              "kind": "field",
+              "name": "showPopover",
+              "privacy": "public",
+              "description": "Shows the popover.",
               "inheritedFrom": {
                 "name": "Popover",
-                "module": "src/components/popover/popover.component.ts"
+                "module": "components/popover/popover.component.js"
               }
             },
             {
-              "description": "primary background color of the popover",
-              "name": "--mdc-popover-primary-background-color",
+              "kind": "field",
+              "name": "hidePopover",
+              "privacy": "public",
+              "description": "Hides the popover.",
               "inheritedFrom": {
                 "name": "Popover",
-                "module": "src/components/popover/popover.component.ts"
+                "module": "components/popover/popover.component.js"
               }
             },
             {
-              "description": "border color of the popover",
-              "name": "--mdc-popover-border-color",
+              "kind": "field",
+              "name": "togglePopoverVisible",
+              "privacy": "public",
+              "description": "Toggles the popover visibility.",
               "inheritedFrom": {
                 "name": "Popover",
-                "module": "src/components/popover/popover.component.ts"
+                "module": "components/popover/popover.component.js"
               }
             },
             {
-              "description": "inverted background color of the popover",
-              "name": "--mdc-popover-inverted-background-color",
+              "kind": "method",
+              "name": "positionPopover",
+              "privacy": "private",
+              "description": "Positions the popover based on the trigger element.\nIt also handles the flip, size and arrow placement.\nIt uses the floating-ui/dom library to calculate the position.",
               "inheritedFrom": {
                 "name": "Popover",
-                "module": "src/components/popover/popover.component.ts"
+                "module": "components/popover/popover.component.js"
               }
             },
             {
-              "description": "inverted border color of the popover",
-              "name": "--mdc-popover-inverted-border-color",
+              "kind": "method",
+              "name": "findClosestPopover",
+              "privacy": "protected",
+              "return": {
+                "type": {
+                  "text": "Popover | null"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "element",
+                  "type": {
+                    "text": "Element"
+                  },
+                  "description": "The element to start searching from."
+                }
+              ],
+              "description": "Finds the closest popover to the passed element in the DOM tree.\n\nUseful when need to find the parent popover in a nested popover scenario.",
               "inheritedFrom": {
                 "name": "Popover",
-                "module": "src/components/popover/popover.component.ts"
+                "module": "components/popover/popover.component.js"
               }
             },
             {
-              "description": "inverted text color of the popover",
-              "name": "--mdc-popover-inverted-text-color",
+              "kind": "field",
+              "name": "utils",
+              "default": "new PopoverUtils(this)",
               "inheritedFrom": {
                 "name": "Popover",
-                "module": "src/components/popover/popover.component.ts"
+                "module": "components/popover/popover.component.js"
               }
-            },
+            }
+          ],
+          "events": [
             {
-              "description": "elevation of the popover",
-              "name": "--mdc-popover-elevation-3",
+              "description": "(React: onShown) This event is dispatched when the coachmark is shown",
+              "name": "shown",
+              "reactName": "onShown",
               "inheritedFrom": {
                 "name": "Popover",
                 "module": "src/components/popover/popover.component.ts"
               }
             },
             {
-              "description": "max width of the popover",
-              "name": "--mdc-popover-max-width",
+              "description": "(React: onHidden) This event is dispatched when the coachmark is hidden",
+              "name": "hidden",
+              "reactName": "onHidden",
               "inheritedFrom": {
                 "name": "Popover",
                 "module": "src/components/popover/popover.component.ts"
               }
             },
             {
-              "description": "max height of the popover",
-              "name": "--mdc-popover-max-height",
+              "description": "(React: onCreated) This event is dispatched when the coachmark is created (added to the DOM)",
+              "name": "created",
+              "reactName": "onCreated",
               "inheritedFrom": {
                 "name": "Popover",
                 "module": "src/components/popover/popover.component.ts"
               }
-            }
-          ],
-          "slots": [
+            },
             {
-              "description": "Default slot for modal container",
-              "name": "",
+              "description": "(React: onDestroyed) This event is dispatched when the coachmark is destroyed (removed from the DOM)",
+              "name": "destroyed",
+              "reactName": "onDestroyed",
               "inheritedFrom": {
                 "name": "Popover",
                 "module": "src/components/popover/popover.component.ts"
               }
             }
           ],
-          "members": [
+          "attributes": [
             {
-              "kind": "field",
               "name": "trigger",
               "type": {
                 "text": "PopoverTrigger"
               },
               "description": "Determines the events that cause the Coachmark to show.\nMultiple event names should be separated by spaces.\nFor example to allow both click and hover, use 'click mouseenter' as the trigger.\n- **click**\n- **mouseenter**\n- **focusin**\n- **manual**",
               "default": "manual",
-              "attribute": "trigger",
-              "reflects": true,
+              "fieldName": "trigger",
               "inheritedFrom": {
                 "name": "Popover",
-                "module": "components/popover/popover.component.js"
+                "module": "src/components/popover/popover.component.ts"
               }
             },
             {
-              "kind": "field",
-              "name": "showArrow",
+              "name": "show-arrow",
               "type": {
                 "text": "boolean"
               },
               "description": "The arrow visibility of the Coachmark.",
               "default": "true",
-              "attribute": "show-arrow",
-              "reflects": true,
+              "fieldName": "showArrow",
               "inheritedFrom": {
                 "name": "Popover",
-                "module": "components/popover/popover.component.js"
+                "module": "src/components/popover/popover.component.ts"
               }
             },
             {
-              "kind": "field",
-              "name": "closeButton",
+              "name": "close-button",
               "type": {
                 "text": "boolean"
               },
               "description": "The close button visibility of the Coachmark.",
               "default": "true",
-              "attribute": "close-button",
-              "reflects": true,
+              "fieldName": "closeButton",
               "inheritedFrom": {
                 "name": "Popover",
-                "module": "components/popover/popover.component.js"
+                "module": "src/components/popover/popover.component.ts"
               }
             },
             {
-              "kind": "field",
-              "name": "disableAriaExpanded",
+              "name": "disable-aria-expanded",
               "type": {
                 "text": "boolean"
               },
               "description": "Disable aria-expanded attribute on trigger element.",
               "default": "true",
-              "attribute": "disable-aria-expanded",
-              "reflects": true,
+              "fieldName": "disableAriaExpanded",
               "inheritedFrom": {
                 "name": "Popover",
-                "module": "components/popover/popover.component.js"
+                "module": "src/components/popover/popover.component.ts"
               }
             },
             {
-              "kind": "field",
-              "name": "preventScroll",
+              "name": "should-focus-trap-wrap",
               "type": {
                 "text": "boolean"
               },
-              "description": "Prevent outside scrolling when element is shown.\n\nIMPLEMENT THIS IN YOUR COMPONENT.",
-              "default": "false",
-              "attribute": "prevent-scroll",
-              "reflects": true,
-              "privacy": "protected",
+              "default": "true",
+              "description": "Determines whether focus should wrap around when reaching the first or last focusable element.\nIf true, focus will cycle from end to start and vice versa.\n\nThis only applies when `focusTrap` is true.",
+              "fieldName": "shouldFocusTrapWrap",
+              "inheritedFrom": {
+                "name": "FocusTrapMixin",
+                "module": "src/utils/mixins/FocusTrapMixin.ts"
+              }
+            },
+            {
+              "name": "id",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "description": "The unique ID of the popover.",
+              "fieldName": "id",
               "inheritedFrom": {
                 "name": "Popover",
-                "module": "components/popover/popover.component.js"
+                "module": "src/components/popover/popover.component.ts"
               }
             },
             {
-              "kind": "method",
-              "name": "activatePreventScroll",
-              "privacy": "protected",
+              "name": "triggerID",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "description": "The ID of the element that triggers the popover.\nThis attribute is required for the popover to work.",
+              "fieldName": "triggerID",
               "inheritedFrom": {
-                "name": "PreventScrollMixin",
-                "module": "utils/mixins/PreventScrollMixin.js"
+                "name": "Popover",
+                "module": "src/components/popover/popover.component.ts"
               }
             },
             {
-              "kind": "method",
-              "name": "deactivatePreventScroll",
-              "privacy": "protected",
+              "name": "placement",
+              "type": {
+                "text": "PopoverPlacement"
+              },
+              "description": "The placement of the popover.\n- **top**\n- **top-start**\n- **top-end**\n- **bottom**\n- **bottom-start**\n- **bottom-end**\n- **left**\n- **left-start**\n- **left-end**\n- **right**\n- **right-start**\n- **right-end**",
+              "default": "bottom",
+              "fieldName": "placement",
               "inheritedFrom": {
-                "name": "PreventScrollMixin",
-                "module": "utils/mixins/PreventScrollMixin.js"
+                "name": "Popover",
+                "module": "src/components/popover/popover.component.ts"
               }
             },
             {
-              "kind": "field",
-              "name": "focusTrap",
+              "name": "color",
+              "type": {
+                "text": "PopoverColor"
+              },
+              "description": "Color of the popover\n- **tonal**\n- **contrast**",
+              "default": "tonal",
+              "fieldName": "color",
+              "inheritedFrom": {
+                "name": "Popover",
+                "module": "src/components/popover/popover.component.ts"
+              }
+            },
+            {
+              "name": "visible",
               "type": {
                 "text": "boolean"
               },
-              "description": "Determines whether the focus trap is enabled.\nIf true, focus will be restricted to the content within this component.\n\nIMPLEMENT THIS IN YOUR COMPONENT.",
+              "description": "The visibility of the popover.",
               "default": "false",
-              "attribute": "focus-trap",
-              "reflects": true,
-              "privacy": "protected",
+              "fieldName": "visible",
               "inheritedFrom": {
                 "name": "Popover",
-                "module": "components/popover/popover.component.js"
+                "module": "src/components/popover/popover.component.ts"
               }
             },
             {
-              "kind": "field",
-              "name": "shouldFocusTrapWrap",
+              "name": "offset",
               "type": {
-                "text": "boolean"
+                "text": "number"
               },
-              "default": "true",
-              "description": "Determines whether focus should wrap around when reaching the first or last focusable element.\nIf true, focus will cycle from end to start and vice versa.\n\nThis only applies when `focusTrap` is true.",
-              "attribute": "should-focus-trap-wrap",
-              "reflects": true,
+              "description": "The offset of the popover.",
+              "default": "4",
+              "fieldName": "offset",
               "inheritedFrom": {
-                "name": "FocusTrapMixin",
-                "module": "utils/mixins/FocusTrapMixin.js"
+                "name": "Popover",
+                "module": "src/components/popover/popover.component.ts"
               }
             },
             {
-              "kind": "method",
-              "name": "setIsFocusTrapActivated",
-              "privacy": "private",
-              "parameters": [
-                {
-                  "name": "isActivated",
-                  "type": {
-                    "text": "boolean"
-                  }
-                }
-              ],
+              "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": "FocusTrapMixin",
-                "module": "utils/mixins/FocusTrapMixin.js"
+                "name": "Popover",
+                "module": "src/components/popover/popover.component.ts"
               }
             },
             {
-              "kind": "method",
-              "name": "activateFocusTrap",
-              "privacy": "public",
-              "description": "Activate the focus trap",
+              "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": "FocusTrapMixin",
-                "module": "utils/mixins/FocusTrapMixin.js"
+                "name": "Popover",
+                "module": "src/components/popover/popover.component.ts"
               }
             },
             {
-              "kind": "method",
-              "name": "deactivateFocusTrap",
-              "privacy": "public",
-              "description": "Deactivate the focus trap.",
+              "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": "FocusTrapMixin",
-                "module": "utils/mixins/FocusTrapMixin.js"
+                "name": "Popover",
+                "module": "src/components/popover/popover.component.ts"
               }
             },
             {
-              "kind": "method",
-              "name": "hasNoClientRects",
-              "privacy": "private",
-              "parameters": [
-                {
-                  "name": "element",
-                  "type": {
-                    "text": "HTMLElement"
-                  },
-                  "description": "The element to check."
-                }
-              ],
-              "description": "Checks if the element has no client rectangles (not visible in the viewport).",
-              "return": {
-                "type": {
-                  "text": ""
-                }
+              "name": "focus-trap",
+              "type": {
+                "text": "boolean"
               },
+              "description": "Determines whether the focus trap is enabled.\nIf true, focus will be restricted to the content within this component.",
+              "default": "false",
+              "fieldName": "focusTrap",
               "inheritedFrom": {
-                "name": "FocusTrapMixin",
-                "module": "utils/mixins/FocusTrapMixin.js"
+                "name": "Popover",
+                "module": "src/components/popover/popover.component.ts"
               }
             },
             {
-              "kind": "method",
-              "name": "hasZeroDimensions",
-              "privacy": "private",
-              "parameters": [
-                {
-                  "name": "element",
-                  "type": {
-                    "text": "HTMLElement"
-                  },
-                  "description": "The element to check."
-                }
-              ],
-              "description": "Checks if the element has zero dimensions (width and height are both 0).",
-              "return": {
-                "type": {
-                  "text": ""
-                }
+              "name": "prevent-scroll",
+              "type": {
+                "text": "boolean"
               },
+              "description": "Prevent outside scrolling when popover is shown.",
+              "default": "false",
+              "fieldName": "preventScroll",
               "inheritedFrom": {
-                "name": "FocusTrapMixin",
-                "module": "utils/mixins/FocusTrapMixin.js"
+                "name": "Popover",
+                "module": "src/components/popover/popover.component.ts"
               }
             },
             {
-              "kind": "method",
-              "name": "isNotVisible",
-              "privacy": "private",
-              "parameters": [
-                {
-                  "name": "element",
-                  "type": {
-                    "text": "HTMLElement"
-                  },
-                  "description": "The element to check."
-                }
-              ],
-              "description": "Determines if the element is not visible in the DOM.",
-              "return": {
-                "type": {
-                  "text": ""
-                }
+              "name": "interactive",
+              "type": {
+                "text": "boolean"
               },
+              "description": "Determines whether the popover is interactive.\nMake sure to set focusTrap to true to keep the focus inside the popover in case necessary.\nSetting interactive to true will not automatically set focusTrap!",
+              "default": "false",
+              "fieldName": "interactive",
               "inheritedFrom": {
-                "name": "FocusTrapMixin",
-                "module": "utils/mixins/FocusTrapMixin.js"
+                "name": "Popover",
+                "module": "src/components/popover/popover.component.ts"
               }
             },
             {
-              "kind": "method",
-              "name": "hasHiddenStyle",
-              "privacy": "private",
-              "parameters": [
-                {
-                  "name": "element",
-                  "type": {
-                    "text": "HTMLElement"
-                  },
-                  "description": "The element to check."
-                }
-              ],
-              "description": "Checks if the element has inline styles that make it hidden.",
-              "return": {
-                "type": {
-                  "text": ""
-                }
+              "name": "delay",
+              "type": {
+                "text": "string"
               },
+              "description": "The delay of the show/hide popover.",
+              "default": "0,0",
+              "fieldName": "delay",
               "inheritedFrom": {
-                "name": "FocusTrapMixin",
-                "module": "utils/mixins/FocusTrapMixin.js"
+                "name": "Popover",
+                "module": "src/components/popover/popover.component.ts"
               }
             },
             {
-              "kind": "method",
-              "name": "hasComputedHidden",
-              "privacy": "private",
-              "parameters": [
-                {
-                  "name": "element",
-                  "type": {
-                    "text": "HTMLElement"
-                  },
-                  "description": "The element to check."
-                }
-              ],
-              "description": "Checks if the element is hidden by a computed style.",
-              "return": {
-                "type": {
-                  "text": ""
-                }
+              "name": "hide-on-escape",
+              "type": {
+                "text": "boolean"
               },
+              "description": "Hide popover on escape key press.",
+              "default": "false",
+              "fieldName": "hideOnEscape",
               "inheritedFrom": {
-                "name": "FocusTrapMixin",
-                "module": "utils/mixins/FocusTrapMixin.js"
+                "name": "Popover",
+                "module": "src/components/popover/popover.component.ts"
               }
             },
             {
-              "kind": "method",
-              "name": "isHidden",
-              "privacy": "private",
-              "parameters": [
-                {
-                  "name": "element",
-                  "type": {
-                    "text": "HTMLElement"
-                  },
-                  "description": "The element to check."
-                }
-              ],
-              "description": "Checks if the element is hidden from the user.",
-              "return": {
-                "type": {
-                  "text": ""
-                }
+              "name": "propagate-event-on-escape",
+              "type": {
+                "text": "boolean"
               },
+              "description": "Propagates the event, when the escape key is pressed (only when pressed inside the popover)\nIf true, the escape key press close the popover and will propagate the keydown event.\nIf false, the escape key press will close the popover but will not propagate the keydown event.\n(set to false to prevent the event from bubbling up to the document).\n\nThis only works when `hideOnEscape` is true.",
+              "default": "false",
+              "fieldName": "propagateEventOnEscape",
               "inheritedFrom": {
-                "name": "FocusTrapMixin",
-                "module": "utils/mixins/FocusTrapMixin.js"
+                "name": "Popover",
+                "module": "src/components/popover/popover.component.ts"
               }
             },
             {
-              "kind": "method",
-              "name": "isDisabled",
-              "privacy": "private",
-              "parameters": [
-                {
-                  "name": "element",
-                  "type": {
-                    "text": "any"
-                  },
-                  "description": "The element to check."
-                }
-              ],
-              "description": "Checks if the element is disabled.",
-              "return": {
-                "type": {
-                  "text": ""
-                }
+              "name": "hide-on-blur",
+              "type": {
+                "text": "boolean"
               },
+              "description": "Hide popover on blur.",
+              "default": "false",
+              "fieldName": "hideOnBlur",
               "inheritedFrom": {
-                "name": "FocusTrapMixin",
-                "module": "utils/mixins/FocusTrapMixin.js"
+                "name": "Popover",
+                "module": "src/components/popover/popover.component.ts"
               }
             },
             {
-              "kind": "method",
-              "name": "isNotTabbable",
-              "privacy": "private",
-              "parameters": [
-                {
-                  "name": "element",
-                  "type": {
-                    "text": "HTMLElement"
-                  },
-                  "description": "The element to check."
-                }
-              ],
-              "description": "Checks if the element is not tabbable.",
-              "return": {
-                "type": {
-                  "text": ""
-                }
+              "name": "hide-on-outside-click",
+              "type": {
+                "text": "boolean"
               },
+              "description": "Hide on outside click of the popover.",
+              "default": "false",
+              "fieldName": "hideOnOutsideClick",
               "inheritedFrom": {
-                "name": "FocusTrapMixin",
-                "module": "utils/mixins/FocusTrapMixin.js"
+                "name": "Popover",
+                "module": "src/components/popover/popover.component.ts"
               }
             },
             {
-              "kind": "method",
-              "name": "isInteractiveElement",
-              "privacy": "private",
-              "return": {
-                "type": {
-                  "text": ""
-                }
+              "name": "focus-back-to-trigger",
+              "type": {
+                "text": "boolean"
               },
-              "parameters": [
-                {
-                  "name": "element",
-                  "type": {
-                    "text": "HTMLElement"
-                  },
-                  "description": "The element to check."
-                }
-              ],
-              "description": "Checks if the element is interactive.",
+              "description": "The focus back to trigger after the popover hide.",
+              "default": "false",
+              "fieldName": "focusBackToTrigger",
               "inheritedFrom": {
-                "name": "FocusTrapMixin",
-                "module": "utils/mixins/FocusTrapMixin.js"
+                "name": "Popover",
+                "module": "src/components/popover/popover.component.ts"
               }
             },
             {
-              "kind": "method",
-              "name": "isFocusable",
-              "privacy": "private",
-              "parameters": [
-                {
-                  "name": "element",
-                  "type": {
-                    "text": "HTMLElement"
-                  },
-                  "description": "The element to check."
-                }
-              ],
-              "description": "Checks if the element is focusable.",
-              "return": {
-                "type": {
-                  "text": ""
-                }
+              "name": "backdrop",
+              "type": {
+                "text": "boolean"
               },
+              "description": "Determines whether the popover with backdrop.\nOther than popover and trigger element, the rest of the screen will be covered with a backdrop.",
+              "default": "false",
+              "fieldName": "backdrop",
               "inheritedFrom": {
-                "name": "FocusTrapMixin",
-                "module": "utils/mixins/FocusTrapMixin.js"
+                "name": "Popover",
+                "module": "src/components/popover/popover.component.ts"
               }
             },
             {
-              "kind": "method",
-              "name": "findFocusable",
-              "privacy": "private",
-              "return": {
-                "type": {
-                  "text": ""
-                }
+              "name": "flip",
+              "type": {
+                "text": "boolean"
               },
-              "parameters": [
-                {
-                  "name": "root",
-                  "type": {
-                    "text": "ShadowRoot | HTMLElement"
-                  },
-                  "description": "The root element to search for focusable elements."
-                },
-                {
-                  "name": "matches",
-                  "default": "new Set()",
-                  "type": {
-                    "text": "Set<HTMLElement>"
-                  },
-                  "description": "The set of focusable elements."
-                }
-              ],
-              "description": "Recursively finds all focusable elements within the given root and its descendants.\n\nMake sure this is performant, as it will be called multiple times.",
+              "description": "Changes the placement of popover to keep it in view when scrolling.",
+              "default": "true",
+              "fieldName": "flip",
               "inheritedFrom": {
-                "name": "FocusTrapMixin",
-                "module": "utils/mixins/FocusTrapMixin.js"
+                "name": "Popover",
+                "module": "src/components/popover/popover.component.ts"
               }
             },
             {
-              "kind": "method",
-              "name": "setFocusableElements",
-              "privacy": "private",
-              "description": "Updates the list of focusable elements within the component's shadow root.",
+              "name": "size",
+              "type": {
+                "text": "boolean"
+              },
+              "description": "Changes the size of popover to keep it in view when scrolling.",
+              "default": "false",
+              "fieldName": "size",
               "inheritedFrom": {
-                "name": "FocusTrapMixin",
-                "module": "utils/mixins/FocusTrapMixin.js"
+                "name": "Popover",
+                "module": "src/components/popover/popover.component.ts"
               }
             },
             {
-              "kind": "method",
-              "name": "setInitialFocus",
-              "privacy": "public",
-              "parameters": [
-                {
-                  "name": "elementIndexToReceiveFocus",
-                  "default": "0",
-                  "type": {
-                    "text": "number"
-                  },
-                  "description": "The index of the preferable element to focus."
-                }
-              ],
-              "description": "Sets the initial focus within the container.",
+              "name": "z-index",
+              "type": {
+                "text": "number"
+              },
+              "description": "The z-index of the popover.",
+              "default": "1000",
+              "fieldName": "zIndex",
               "inheritedFrom": {
-                "name": "FocusTrapMixin",
-                "module": "utils/mixins/FocusTrapMixin.js"
+                "name": "Popover",
+                "module": "src/components/popover/popover.component.ts"
               }
             },
             {
-              "kind": "method",
-              "name": "calculateNextIndex",
-              "privacy": "private",
-              "parameters": [
-                {
-                  "name": "currentIndex",
-                  "type": {
-                    "text": "number"
-                  },
-                  "description": "The current index."
-                },
-                {
-                  "name": "step",
-                  "type": {
-                    "text": "number"
-                  },
-                  "description": "The step to calculate the next index."
-                }
-              ],
-              "description": "Calculates the next index for the focus trap.",
-              "return": {
-                "type": {
-                  "text": ""
-                }
+              "name": "append-to",
+              "type": {
+                "text": "string | undefined"
               },
+              "description": "Element ID that the popover append to.",
+              "default": "''",
+              "fieldName": "appendTo",
               "inheritedFrom": {
-                "name": "FocusTrapMixin",
-                "module": "utils/mixins/FocusTrapMixin.js"
+                "name": "Popover",
+                "module": "src/components/popover/popover.component.ts"
               }
             },
             {
-              "kind": "method",
-              "name": "getDeepActiveElement",
-              "privacy": "private",
-              "description": "Returns the deepest active element in the shadow DOM.",
-              "return": {
-                "type": {
-                  "text": ""
-                }
+              "name": "close-button-aria-label",
+              "type": {
+                "text": "string | null"
               },
+              "default": "null",
+              "description": "aria-label attribute to be set for close button accessibility.",
+              "fieldName": "closeButtonAriaLabel",
               "inheritedFrom": {
-                "name": "FocusTrapMixin",
-                "module": "utils/mixins/FocusTrapMixin.js"
+                "name": "Popover",
+                "module": "src/components/popover/popover.component.ts"
               }
             },
             {
-              "kind": "method",
-              "name": "findElement",
-              "privacy": "private",
-              "parameters": [
-                {
-                  "name": "activeElement",
-                  "type": {
-                    "text": "HTMLElement"
-                  },
-                  "description": "The active element."
-                }
-              ],
-              "description": "Finds the index of the active element within the focusable elements.",
-              "return": {
-                "type": {
-                  "text": ""
-                }
+              "name": "role",
+              "type": {
+                "text": "HTMLElement['role']"
               },
+              "description": "Role of the popover",
+              "default": "dialog",
+              "fieldName": "role",
               "inheritedFrom": {
-                "name": "FocusTrapMixin",
-                "module": "utils/mixins/FocusTrapMixin.js"
+                "name": "Popover",
+                "module": "src/components/popover/popover.component.ts"
               }
             },
             {
-              "kind": "method",
-              "name": "isEqualFocusNode",
-              "privacy": "private",
-              "parameters": [
-                {
-                  "name": "activeElement",
-                  "type": {
-                    "text": "HTMLElement"
-                  },
-                  "description": "The active element."
-                },
-                {
-                  "name": "element",
-                  "type": {
-                    "text": "HTMLElement"
-                  },
-                  "description": "The element to compare."
-                }
-              ],
-              "description": "Checks if the active element is equal to the given element.",
-              "return": {
-                "type": {
-                  "text": ""
-                }
+              "name": "aria-labelledby",
+              "type": {
+                "text": "string | null"
               },
+              "default": "null",
+              "description": "aria-labelledby for an interactive popover only, defaults to the trigger component id.\nUsed in nested cases where the triggerComponent isn't the actual button.",
+              "fieldName": "ariaLabelledby",
               "inheritedFrom": {
-                "name": "FocusTrapMixin",
-                "module": "utils/mixins/FocusTrapMixin.js"
+                "name": "Popover",
+                "module": "src/components/popover/popover.component.ts"
               }
             },
             {
-              "kind": "method",
-              "name": "trapFocus",
-              "privacy": "private",
-              "parameters": [
-                {
-                  "name": "event",
-                  "type": {
-                    "text": "KeyboardEvent"
-                  }
-                },
-                {
-                  "description": "The direction of the focus trap.\nIf true, the focus will be trapped in the previous element.",
-                  "name": "direction"
-                }
-              ],
-              "description": "Traps focus within the container.",
+              "name": "aria-describedby",
+              "type": {
+                "text": "string | null"
+              },
+              "default": "null",
+              "description": "aria-describedby of the popover.",
+              "fieldName": "ariaDescribedby",
               "inheritedFrom": {
-                "name": "FocusTrapMixin",
-                "module": "utils/mixins/FocusTrapMixin.js"
+                "name": "Popover",
+                "module": "src/components/popover/popover.component.ts"
               }
             },
             {
-              "kind": "method",
-              "name": "handleTabKeydown",
-              "privacy": "private",
-              "parameters": [
-                {
-                  "name": "event",
-                  "type": {
-                    "text": "KeyboardEvent"
-                  },
-                  "description": "The keyboard event."
-                }
-              ],
-              "description": "Traps focus within the container.",
+              "name": "disable-aria-haspopup",
+              "type": {
+                "text": "boolean"
+              },
+              "description": "Disable setting the aria-haspopup attribute on trigger element.\nMake sure to set this to true when the popover is extended and its role\nis not 'dialog' or 'alertdialog' i.e. listbox, menu, etc.",
+              "default": "false",
+              "fieldName": "disableAriaHasPopup",
               "inheritedFrom": {
-                "name": "FocusTrapMixin",
-                "module": "utils/mixins/FocusTrapMixin.js"
+                "name": "Popover",
+                "module": "src/components/popover/popover.component.ts"
               }
+            }
+          ],
+          "superclass": {
+            "name": "Popover",
+            "module": "/src/components/popover/popover.component"
+          },
+          "tagName": "mdc-coachmark",
+          "jsDoc": "/**\n * Coachmark component based on top of the popover component,\n * with the default value of certain properties changed.\n *\n * @dependency mdc-popover\n *\n * @tagname mdc-coachmark\n *\n * @event shown - (React: onShown) This event is dispatched when the coachmark is shown\n * @event hidden - (React: onHidden) This event is dispatched when the coachmark is hidden\n * @event created - (React: onCreated) This event is dispatched when the coachmark is created (added to the DOM)\n * @event destroyed - (React: onDestroyed) This event is dispatched when the coachmark is\n * destroyed (removed from the DOM)\n *\n * @cssproperty --mdc-popover-arrow-border-radius - radius of the arrow border\n * @cssproperty --mdc-popover-arrow-border - border of the arrow\n * @cssproperty --mdc-popover-primary-background-color - primary background color of the popover\n * @cssproperty --mdc-popover-border-color - border color of the popover\n * @cssproperty --mdc-popover-inverted-background-color - inverted background color of the popover\n * @cssproperty --mdc-popover-inverted-border-color - inverted border color of the popover\n * @cssproperty --mdc-popover-inverted-text-color - inverted text color of the popover\n * @cssproperty --mdc-popover-elevation-3 - elevation of the popover\n *\n * @slot - Default slot for modal container\n *\n */",
+          "customElement": true
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "default",
+          "declaration": {
+            "name": "Coachmark",
+            "module": "components/coachmark/coachmark.component.js"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "components/dialog/dialog.component.js",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "Dialog component is a modal dialog that can be used to display information or prompt the user for input.\nIt can be used to create custom dialogs where content for the body and footer actions is provided by the consumer.\nThe dialog is available in 5 sizes: small, medium, large, xlarge and fullscreen. It may also receive custom styling/sizing.\nThe dialog interrupts the user and will block interaction with the rest of the application until it is closed.\n\nThe dialog can be controlled solely through the `visible` property, no trigger element is required.\nIf a `triggerId` is provided, the dialog will manage focus with that element, otherwise it will\nremember the previously focused element before the dialog was opened.\n\nThe dialog is a controlled component, meaning it does not have its own state management for visibility.\nUse the `visible` property to control the visibility of the dialog.\nUse the `onClose` event to handle the close action of the dialog (fired when Close button is clicked\nor Escape is pressed).\n\nDialog component have 2 variants: default and promotional.\n\n**Accessibility notes for consuming (have to be explicitly set when you consume the component)**\n\n- The dialog should have an aria-label or aria-labelledby attribute to provide a label for screen readers.\n- Use aria-labelledby to reference the ID of the element that labels the dialog when there is no visible title.\n\n**Note: Programmatic show/hide requires the ? prefix on the visible attribute**\n- Use `?visible=true/false` as an attribute instead of `visible=true/false`\n- Reference docs for more info: https://lit.dev/docs/templates/expressions/#boolean-attribute-expressions",
+          "name": "Dialog",
+          "cssProperties": [
+            {
+              "description": "primary background color of the dialog",
+              "name": "--mdc-dialog-primary-background-color"
+            },
+            {
+              "description": "border color of the dialog",
+              "name": "--mdc-dialog-border-color"
+            },
+            {
+              "description": "text color of the header/title of the dialog",
+              "name": "--mdc-dialog-header-text-color"
             },
+            {
+              "description": "text color of the below header description of the dialog",
+              "name": "--mdc-dialog-description-text-color"
+            },
+            {
+              "description": "elevation of the dialog",
+              "name": "--mdc-dialog-elevation-3"
+            },
+            {
+              "description": "width of the dialog",
+              "name": "--mdc-dialog-width"
+            }
+          ],
+          "slots": [
+            {
+              "description": "Slot for the dialog header content. This can be used to pass custom header content.",
+              "name": "header-prefix"
+            },
+            {
+              "description": "Slot for the dialog body content",
+              "name": "dialog-body"
+            },
+            {
+              "description": "This slot is for passing `mdc-link` component within the footer section.",
+              "name": "footer-link"
+            },
+            {
+              "description": "This slot is for passing secondary variant of `mdc-button` component within the footer section.",
+              "name": "footer-button-secondary"
+            },
+            {
+              "description": "This slot is for passing primary variant of `mdc-button` component within the footer section.",
+              "name": "footer-button-primary"
+            },
+            {
+              "description": " This slot is for passing custom footer content. Only use this if really needed, using the footer-link and footer-button slots is preferred",
+              "name": "footer"
+            }
+          ],
+          "members": [
             {
               "kind": "field",
               "name": "id",
@@ -9781,1108 +9655,1234 @@
                 "text": "string"
               },
               "default": "''",
-              "description": "The unique ID of the popover.",
+              "description": "The unique ID of the dialog",
               "attribute": "id",
-              "reflects": true,
-              "inheritedFrom": {
-                "name": "Popover",
-                "module": "components/popover/popover.component.js"
-              }
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "triggerId",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "The ID of the element that triggers the dialog",
+              "default": "undefined",
+              "attribute": "triggerId",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "visible",
+              "type": {
+                "text": "boolean"
+              },
+              "description": "The visibility of the dialog\n\nDialog is a controlled component, visible is the only property that controls the visibility of the dialog.",
+              "default": "false",
+              "attribute": "visible",
+              "reflects": true
             },
             {
               "kind": "field",
-              "name": "triggerID",
+              "name": "zIndex",
               "type": {
-                "text": "string"
+                "text": "number"
               },
-              "default": "''",
-              "description": "The ID of the element that triggers the popover.\nThis attribute is required for the popover to work.",
-              "attribute": "triggerID",
-              "reflects": true,
-              "inheritedFrom": {
-                "name": "Popover",
-                "module": "components/popover/popover.component.js"
-              }
+              "description": "The z-index of the dialog\n\nThe backdrop will have z-index of `zIndex - 1`",
+              "default": "1000",
+              "attribute": "z-index",
+              "reflects": true
             },
             {
               "kind": "field",
-              "name": "placement",
+              "name": "size",
               "type": {
-                "text": "PopoverPlacement"
+                "text": "DialogSize"
               },
-              "description": "The placement of the popover.\n- **top**\n- **top-start**\n- **top-end**\n- **bottom**\n- **bottom-start**\n- **bottom-end**\n- **left**\n- **left-start**\n- **left-end**\n- **right**\n- **right-start**\n- **right-end**",
-              "default": "bottom",
-              "attribute": "placement",
-              "reflects": true,
-              "inheritedFrom": {
-                "name": "Popover",
-                "module": "components/popover/popover.component.js"
-              }
+              "description": "The size of the dialog, can be 'small' (432px width), 'medium' (656px width), 'large' (992px width), 'xlarge' (90% width) or 'fullscreen' (100% width).",
+              "default": "small",
+              "attribute": "size",
+              "reflects": true
             },
             {
               "kind": "field",
-              "name": "color",
+              "name": "variant",
               "type": {
-                "text": "PopoverColor"
+                "text": "DialogVariant"
               },
-              "description": "Color of the popover\n- **tonal**\n- **contrast**",
-              "default": "tonal",
-              "attribute": "color",
-              "reflects": true,
-              "inheritedFrom": {
-                "name": "Popover",
-                "module": "components/popover/popover.component.js"
-              }
+              "description": "The variant of the dialog, can be 'default' or 'promotional'",
+              "default": "default",
+              "attribute": "variant",
+              "reflects": true
             },
             {
               "kind": "field",
-              "name": "visible",
+              "name": "closeButtonAriaLabel",
               "type": {
-                "text": "boolean"
+                "text": "string | null"
               },
-              "description": "The visibility of the popover.",
-              "default": "false",
-              "attribute": "visible",
-              "reflects": true,
-              "inheritedFrom": {
-                "name": "Popover",
-                "module": "components/popover/popover.component.js"
-              }
+              "default": "null",
+              "description": "Defines a string value for the aria-label attribute for close button accessibility",
+              "attribute": "close-button-aria-label"
             },
             {
               "kind": "field",
-              "name": "offset",
+              "name": "ariaLabel",
               "type": {
-                "text": "number"
+                "text": "string | null"
               },
-              "description": "The offset of the popover.",
-              "default": "4",
-              "attribute": "offset",
-              "reflects": true,
-              "inheritedFrom": {
-                "name": "Popover",
-                "module": "components/popover/popover.component.js"
-              }
+              "default": "null",
+              "description": "Defines a string value for the aria-label attribute when header is not used",
+              "attribute": "aria-label",
+              "reflects": true
             },
             {
               "kind": "field",
-              "name": "boundary",
+              "name": "ariaLabelledby",
               "type": {
-                "text": "'clippingAncestors' | string"
+                "text": "string | null"
               },
-              "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"
-              }
+              "default": "null",
+              "description": "Defines a string value for the aria-labelledby attribute that refers to the element\nlabeling the dialog for accessibility",
+              "attribute": "aria-labelledby",
+              "reflects": true
             },
             {
               "kind": "field",
-              "name": "boundaryRoot",
+              "name": "ariaDescribedBy",
               "type": {
-                "text": "'viewport' | 'document'"
+                "text": "string | null"
               },
-              "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"
-              }
+              "default": "null",
+              "description": "Defines a string value for the aria-describedby attribute that refers to the element\ndescribing the dialog for accessibility",
+              "attribute": "aria-describedby",
+              "reflects": true
             },
             {
               "kind": "field",
-              "name": "boundaryPadding",
+              "name": "ariaDescription",
               "type": {
-                "text": "undefined | number"
+                "text": "string | null"
               },
-              "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"
-              }
+              "default": "null",
+              "description": "Defines a string value for the aria-description attribute that refers to the element\ndescribing the dialog for accessibility",
+              "attribute": "aria-description",
+              "reflects": true
             },
             {
               "kind": "field",
-              "name": "interactive",
+              "name": "headerText",
               "type": {
-                "text": "boolean"
+                "text": "string | undefined"
               },
-              "description": "Determines whether the popover is interactive.\nMake sure to set focusTrap to true to keep the focus inside the popover in case necessary.\nSetting interactive to true will not automatically set focusTrap!",
-              "default": "false",
-              "attribute": "interactive",
-              "reflects": true,
-              "inheritedFrom": {
-                "name": "Popover",
-                "module": "components/popover/popover.component.js"
-              }
+              "description": "Defines a string value to display as the title of the dialog",
+              "attribute": "header-text",
+              "reflects": true
             },
             {
               "kind": "field",
-              "name": "delay",
+              "name": "descriptionText",
               "type": {
-                "text": "string"
+                "text": "string | undefined"
               },
-              "description": "The delay of the show/hide popover.",
-              "default": "0,0",
-              "attribute": "delay",
-              "reflects": true,
-              "inheritedFrom": {
-                "name": "Popover",
-                "module": "components/popover/popover.component.js"
-              }
+              "description": "Defines a string value to display as the under-header description of the dialog",
+              "attribute": "description-text",
+              "reflects": true
             },
             {
               "kind": "field",
-              "name": "hideOnEscape",
+              "name": "headerTagName",
               "type": {
-                "text": "boolean"
+                "text": "string"
               },
-              "description": "Hide popover on escape key press.",
-              "default": "false",
-              "attribute": "hide-on-escape",
-              "reflects": true,
-              "inheritedFrom": {
-                "name": "Popover",
-                "module": "components/popover/popover.component.js"
-              }
+              "description": "The html tag to be used for the header text",
+              "attribute": "header-tag-name",
+              "reflects": true
             },
             {
               "kind": "field",
-              "name": "propagateEventOnEscape",
+              "name": "descriptionTagName",
               "type": {
-                "text": "boolean"
+                "text": "string"
               },
-              "description": "Propagates the event, when the escape key is pressed (only when pressed inside the popover)\nIf true, the escape key press close the popover and will propagate the keydown event.\nIf false, the escape key press will close the popover but will not propagate the keydown event.\n(set to false to prevent the event from bubbling up to the document).\n\nThis only works when `hideOnEscape` is true.",
-              "default": "false",
-              "attribute": "propagate-event-on-escape",
-              "reflects": true,
-              "inheritedFrom": {
-                "name": "Popover",
-                "module": "components/popover/popover.component.js"
-              }
+              "description": "The html tag to be used for the below-header description text",
+              "attribute": "description-tag-name",
+              "reflects": true
             },
             {
               "kind": "field",
-              "name": "hideOnBlur",
+              "name": "role",
               "type": {
-                "text": "boolean"
+                "text": "DialogRole"
               },
-              "description": "Hide popover on blur.",
-              "default": "false",
-              "attribute": "hide-on-blur",
-              "reflects": true,
-              "inheritedFrom": {
-                "name": "Popover",
-                "module": "components/popover/popover.component.js"
-              }
+              "description": "Role of the dialog",
+              "default": "dialog",
+              "attribute": "role",
+              "reflects": true
             },
             {
               "kind": "field",
-              "name": "hideOnOutsideClick",
+              "name": "disableAriaHasPopup",
               "type": {
                 "text": "boolean"
               },
-              "description": "Hide on outside click of the popover.",
+              "description": "Disable setting the aria-haspopup attribute on trigger element.\nMake sure to set this to true when the popover is extended and its role\nis not 'dialog' or 'alertdialog' i.e. listbox, menu, etc.",
               "default": "false",
-              "attribute": "hide-on-outside-click",
-              "reflects": true,
-              "inheritedFrom": {
-                "name": "Popover",
-                "module": "components/popover/popover.component.js"
-              }
+              "attribute": "disable-aria-haspopup",
+              "reflects": true
             },
             {
               "kind": "field",
-              "name": "focusBackToTrigger",
+              "name": "focusTrap",
               "type": {
                 "text": "boolean"
               },
-              "description": "The focus back to trigger after the popover hide.",
-              "default": "false",
-              "attribute": "focus-back-to-trigger",
+              "privacy": "protected",
+              "description": "Determines whether the focus trap is enabled.\nIf true, focus will be restricted to the content within this component.\n\nNOTE: this should only be disabled in rare cases! By default a Modal Dialog\nshould trap focus always.",
+              "default": "true",
+              "attribute": "focus-trap",
               "reflects": true,
               "inheritedFrom": {
-                "name": "Popover",
-                "module": "components/popover/popover.component.js"
+                "name": "FocusTrapMixin",
+                "module": "utils/mixins/FocusTrapMixin.js"
               }
             },
+            {
+              "kind": "method",
+              "name": "closeDialog",
+              "privacy": "private",
+              "description": "Fired when Close Button is clicked or Escape key is pressed.\nThis method dispatches the close event. Setting visible to false\nhas to be done by the consumer of the component."
+            },
+            {
+              "kind": "method",
+              "name": "isOpenUpdated",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "oldValue",
+                  "type": {
+                    "text": "boolean | undefined"
+                  },
+                  "description": "The old value of the visible property."
+                },
+                {
+                  "name": "newValue",
+                  "type": {
+                    "text": "boolean"
+                  },
+                  "description": "The new value of the visible property."
+                }
+              ],
+              "description": "Handles the dialog visibility change.\nHandles the exit event to close the dialog."
+            },
             {
               "kind": "field",
-              "name": "backdrop",
+              "name": "preventScroll",
               "type": {
                 "text": "boolean"
               },
-              "description": "Determines whether the popover with backdrop.\nOther than popover and trigger element, the rest of the screen will be covered with a backdrop.",
-              "default": "false",
-              "attribute": "backdrop",
-              "reflects": true,
+              "privacy": "protected",
+              "description": "Prevent outside scrolling when element is shown.\n\nIMPLEMENT THIS IN YOUR COMPONENT.",
               "inheritedFrom": {
-                "name": "Popover",
-                "module": "components/popover/popover.component.js"
+                "name": "PreventScrollMixin",
+                "module": "utils/mixins/PreventScrollMixin.js"
               }
             },
             {
-              "kind": "field",
-              "name": "flip",
-              "type": {
-                "text": "boolean"
-              },
-              "description": "Changes the placement of popover to keep it in view when scrolling.",
-              "default": "true",
-              "attribute": "flip",
-              "reflects": true,
+              "kind": "method",
+              "name": "activatePreventScroll",
+              "privacy": "protected",
               "inheritedFrom": {
-                "name": "Popover",
-                "module": "components/popover/popover.component.js"
+                "name": "PreventScrollMixin",
+                "module": "utils/mixins/PreventScrollMixin.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,
+              "kind": "method",
+              "name": "deactivatePreventScroll",
+              "privacy": "protected",
               "inheritedFrom": {
-                "name": "Popover",
-                "module": "components/popover/popover.component.js"
+                "name": "PreventScrollMixin",
+                "module": "utils/mixins/PreventScrollMixin.js"
               }
             },
             {
               "kind": "field",
-              "name": "zIndex",
+              "name": "shouldFocusTrapWrap",
               "type": {
-                "text": "number"
+                "text": "boolean"
               },
-              "description": "The z-index of the popover.",
-              "default": "1000",
-              "attribute": "z-index",
+              "default": "true",
+              "description": "Determines whether focus should wrap around when reaching the first or last focusable element.\nIf true, focus will cycle from end to start and vice versa.\n\nThis only applies when `focusTrap` is true.",
+              "attribute": "should-focus-trap-wrap",
               "reflects": true,
               "inheritedFrom": {
-                "name": "Popover",
-                "module": "components/popover/popover.component.js"
+                "name": "FocusTrapMixin",
+                "module": "utils/mixins/FocusTrapMixin.js"
               }
             },
             {
-              "kind": "field",
-              "name": "appendTo",
-              "type": {
-                "text": "string | undefined"
-              },
-              "description": "Element ID that the popover append to.",
-              "default": "''",
-              "attribute": "append-to",
-              "reflects": true,
+              "kind": "method",
+              "name": "setIsFocusTrapActivated",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "isActivated",
+                  "type": {
+                    "text": "boolean"
+                  }
+                }
+              ],
               "inheritedFrom": {
-                "name": "Popover",
-                "module": "components/popover/popover.component.js"
+                "name": "FocusTrapMixin",
+                "module": "utils/mixins/FocusTrapMixin.js"
               }
             },
             {
-              "kind": "field",
-              "name": "closeButtonAriaLabel",
-              "type": {
-                "text": "string | null"
-              },
-              "default": "null",
-              "description": "aria-label attribute to be set for close button accessibility.",
-              "attribute": "close-button-aria-label",
-              "reflects": true,
+              "kind": "method",
+              "name": "activateFocusTrap",
+              "privacy": "public",
+              "description": "Activate the focus trap",
               "inheritedFrom": {
-                "name": "Popover",
-                "module": "components/popover/popover.component.js"
+                "name": "FocusTrapMixin",
+                "module": "utils/mixins/FocusTrapMixin.js"
               }
             },
             {
-              "kind": "field",
-              "name": "role",
-              "type": {
-                "text": "HTMLElement['role']"
-              },
-              "description": "Role of the popover",
-              "default": "dialog",
-              "attribute": "role",
-              "reflects": true,
+              "kind": "method",
+              "name": "deactivateFocusTrap",
+              "privacy": "public",
+              "description": "Deactivate the focus trap.",
               "inheritedFrom": {
-                "name": "Popover",
-                "module": "components/popover/popover.component.js"
+                "name": "FocusTrapMixin",
+                "module": "utils/mixins/FocusTrapMixin.js"
               }
             },
             {
-              "kind": "field",
-              "name": "ariaLabelledby",
-              "type": {
-                "text": "string | null"
+              "kind": "method",
+              "name": "hasNoClientRects",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "element",
+                  "type": {
+                    "text": "HTMLElement"
+                  },
+                  "description": "The element to check."
+                }
+              ],
+              "description": "Checks if the element has no client rectangles (not visible in the viewport).",
+              "return": {
+                "type": {
+                  "text": ""
+                }
               },
-              "default": "null",
-              "description": "aria-labelledby for an interactive popover only, defaults to the trigger component id.\nUsed in nested cases where the triggerComponent isn't the actual button.",
-              "attribute": "aria-labelledby",
-              "reflects": true,
               "inheritedFrom": {
-                "name": "Popover",
-                "module": "components/popover/popover.component.js"
+                "name": "FocusTrapMixin",
+                "module": "utils/mixins/FocusTrapMixin.js"
               }
             },
             {
-              "kind": "field",
-              "name": "ariaDescribedby",
-              "type": {
-                "text": "string | null"
+              "kind": "method",
+              "name": "hasZeroDimensions",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "element",
+                  "type": {
+                    "text": "HTMLElement"
+                  },
+                  "description": "The element to check."
+                }
+              ],
+              "description": "Checks if the element has zero dimensions (width and height are both 0).",
+              "return": {
+                "type": {
+                  "text": ""
+                }
               },
-              "default": "null",
-              "description": "aria-describedby of the popover.",
-              "attribute": "aria-describedby",
-              "reflects": true,
               "inheritedFrom": {
-                "name": "Popover",
-                "module": "components/popover/popover.component.js"
+                "name": "FocusTrapMixin",
+                "module": "utils/mixins/FocusTrapMixin.js"
               }
             },
             {
-              "kind": "field",
-              "name": "disableAriaHasPopup",
-              "type": {
-                "text": "boolean"
+              "kind": "method",
+              "name": "isNotVisible",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "element",
+                  "type": {
+                    "text": "HTMLElement"
+                  },
+                  "description": "The element to check."
+                }
+              ],
+              "description": "Determines if the element is not visible in the DOM.",
+              "return": {
+                "type": {
+                  "text": ""
+                }
               },
-              "description": "Disable setting the aria-haspopup attribute on trigger element.\nMake sure to set this to true when the popover is extended and its role\nis not 'dialog' or 'alertdialog' i.e. listbox, menu, etc.",
-              "default": "false",
-              "attribute": "disable-aria-haspopup",
-              "reflects": true,
               "inheritedFrom": {
-                "name": "Popover",
-                "module": "components/popover/popover.component.js"
+                "name": "FocusTrapMixin",
+                "module": "utils/mixins/FocusTrapMixin.js"
               }
             },
             {
-              "kind": "field",
-              "name": "arrowElement",
-              "type": {
-                "text": "HTMLElement | null"
+              "kind": "method",
+              "name": "hasHiddenStyle",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "element",
+                  "type": {
+                    "text": "HTMLElement"
+                  },
+                  "description": "The element to check."
+                }
+              ],
+              "description": "Checks if the element has inline styles that make it hidden.",
+              "return": {
+                "type": {
+                  "text": ""
+                }
               },
-              "privacy": "public",
-              "default": "null",
               "inheritedFrom": {
-                "name": "Popover",
-                "module": "components/popover/popover.component.js"
+                "name": "FocusTrapMixin",
+                "module": "utils/mixins/FocusTrapMixin.js"
               }
             },
             {
-              "kind": "field",
-              "name": "triggerElement",
-              "type": {
-                "text": "HTMLElement | null"
+              "kind": "method",
+              "name": "hasComputedHidden",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "element",
+                  "type": {
+                    "text": "HTMLElement"
+                  },
+                  "description": "The element to check."
+                }
+              ],
+              "description": "Checks if the element is hidden by a computed style.",
+              "return": {
+                "type": {
+                  "text": ""
+                }
               },
-              "privacy": "public",
-              "default": "null",
-              "inheritedFrom": {
-                "name": "Popover",
-                "module": "components/popover/popover.component.js"
+              "inheritedFrom": {
+                "name": "FocusTrapMixin",
+                "module": "utils/mixins/FocusTrapMixin.js"
               }
             },
             {
               "kind": "method",
-              "name": "setupTriggerListener",
+              "name": "isHidden",
               "privacy": "private",
-              "description": "Sets up the trigger event listeners based on the trigger type.",
+              "parameters": [
+                {
+                  "name": "element",
+                  "type": {
+                    "text": "HTMLElement"
+                  },
+                  "description": "The element to check."
+                }
+              ],
+              "description": "Checks if the element is hidden from the user.",
+              "return": {
+                "type": {
+                  "text": ""
+                }
+              },
               "inheritedFrom": {
-                "name": "Popover",
-                "module": "components/popover/popover.component.js"
+                "name": "FocusTrapMixin",
+                "module": "utils/mixins/FocusTrapMixin.js"
               }
             },
             {
               "kind": "method",
-              "name": "removeEventListeners",
+              "name": "isDisabled",
               "privacy": "private",
-              "description": "Removes the trigger event listeners.",
+              "parameters": [
+                {
+                  "name": "element",
+                  "type": {
+                    "text": "any"
+                  },
+                  "description": "The element to check."
+                }
+              ],
+              "description": "Checks if the element is disabled.",
+              "return": {
+                "type": {
+                  "text": ""
+                }
+              },
               "inheritedFrom": {
-                "name": "Popover",
-                "module": "components/popover/popover.component.js"
+                "name": "FocusTrapMixin",
+                "module": "utils/mixins/FocusTrapMixin.js"
               }
             },
             {
-              "kind": "field",
-              "name": "onOutsidePopoverClick",
-              "privacy": "protected",
-              "description": "Handles the outside click event to close the popover.",
+              "kind": "method",
+              "name": "isNotTabbable",
+              "privacy": "private",
               "parameters": [
                 {
-                  "description": "The mouse event.",
-                  "name": "event"
+                  "name": "element",
+                  "type": {
+                    "text": "HTMLElement"
+                  },
+                  "description": "The element to check."
                 }
               ],
+              "description": "Checks if the element is not tabbable.",
+              "return": {
+                "type": {
+                  "text": ""
+                }
+              },
               "inheritedFrom": {
-                "name": "Popover",
-                "module": "components/popover/popover.component.js"
+                "name": "FocusTrapMixin",
+                "module": "utils/mixins/FocusTrapMixin.js"
               }
             },
             {
-              "kind": "field",
-              "name": "onEscapeKeydown",
+              "kind": "method",
+              "name": "isInteractiveElement",
               "privacy": "private",
-              "description": "Handles the escape keydown event to close the popover.\n\nThis method is attached to the document.",
+              "return": {
+                "type": {
+                  "text": ""
+                }
+              },
               "parameters": [
                 {
-                  "description": "The keyboard event.",
-                  "name": "event"
+                  "name": "element",
+                  "type": {
+                    "text": "HTMLElement"
+                  },
+                  "description": "The element to check."
                 }
               ],
+              "description": "Checks if the element is interactive.",
               "inheritedFrom": {
-                "name": "Popover",
-                "module": "components/popover/popover.component.js"
+                "name": "FocusTrapMixin",
+                "module": "utils/mixins/FocusTrapMixin.js"
               }
             },
             {
-              "kind": "field",
-              "name": "onPopoverFocusOut",
+              "kind": "method",
+              "name": "isFocusable",
               "privacy": "private",
-              "description": "Handles the popover focus out event.",
               "parameters": [
                 {
-                  "description": "The focus event.",
-                  "name": "event"
+                  "name": "element",
+                  "type": {
+                    "text": "HTMLElement"
+                  },
+                  "description": "The element to check."
                 }
               ],
+              "description": "Checks if the element is focusable.",
+              "return": {
+                "type": {
+                  "text": ""
+                }
+              },
               "inheritedFrom": {
-                "name": "Popover",
-                "module": "components/popover/popover.component.js"
+                "name": "FocusTrapMixin",
+                "module": "utils/mixins/FocusTrapMixin.js"
               }
             },
             {
               "kind": "method",
-              "name": "isOpenUpdated",
-              "privacy": "protected",
+              "name": "findFocusable",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": ""
+                }
+              },
               "parameters": [
                 {
-                  "name": "oldValue",
+                  "name": "root",
                   "type": {
-                    "text": "boolean"
+                    "text": "ShadowRoot | HTMLElement"
                   },
-                  "description": "The old value of the visible property."
+                  "description": "The root element to search for focusable elements."
                 },
                 {
-                  "name": "newValue",
+                  "name": "matches",
+                  "default": "new Set()",
                   "type": {
-                    "text": "boolean"
+                    "text": "Set<HTMLElement>"
                   },
-                  "description": "The new value of the visible property."
+                  "description": "The set of focusable elements."
                 }
               ],
-              "description": "Handles the popover visibility change and position the popover.\nHandles the exit event to close the popover.",
-              "inheritedFrom": {
-                "name": "Popover",
-                "module": "components/popover/popover.component.js"
-              }
-            },
-            {
-              "kind": "field",
-              "name": "handleMouseEnter",
-              "privacy": "private",
-              "description": "Handles mouse enter event on the trigger element.\nThis method sets the `isHovered` flag to true and shows the popover",
+              "description": "Recursively finds all focusable elements within the given root and its descendants.\n\nMake sure this is performant, as it will be called multiple times.",
               "inheritedFrom": {
-                "name": "Popover",
-                "module": "components/popover/popover.component.js"
+                "name": "FocusTrapMixin",
+                "module": "utils/mixins/FocusTrapMixin.js"
               }
             },
             {
-              "kind": "field",
-              "name": "handleMouseLeave",
+              "kind": "method",
+              "name": "setFocusableElements",
               "privacy": "private",
-              "description": "Handles mouse leave event on the trigger element.\nThis method sets the `isHovered` flag to false and starts the close delay\ntimer to hide the popover.",
+              "description": "Updates the list of focusable elements within the component's shadow root.",
               "inheritedFrom": {
-                "name": "Popover",
-                "module": "components/popover/popover.component.js"
+                "name": "FocusTrapMixin",
+                "module": "utils/mixins/FocusTrapMixin.js"
               }
             },
             {
-              "kind": "field",
-              "name": "handleFocusOut",
-              "privacy": "private",
-              "description": "Handles focus out event on the trigger element.\nThis method checks if the popover is not hovered and hides the popover.\nIf the popover is hovered, it will not hide the popover.",
+              "kind": "method",
+              "name": "setInitialFocus",
+              "privacy": "public",
+              "parameters": [
+                {
+                  "name": "elementIndexToReceiveFocus",
+                  "default": "0",
+                  "type": {
+                    "text": "number"
+                  },
+                  "description": "The index of the preferable element to focus."
+                }
+              ],
+              "description": "Sets the initial focus within the container.",
               "inheritedFrom": {
-                "name": "Popover",
-                "module": "components/popover/popover.component.js"
+                "name": "FocusTrapMixin",
+                "module": "utils/mixins/FocusTrapMixin.js"
               }
             },
             {
-              "kind": "field",
-              "name": "startCloseDelay",
+              "kind": "method",
+              "name": "calculateNextIndex",
               "privacy": "private",
-              "description": "Starts the close delay timer.\nIf the popover is not interactive, it will close the popover after the delay.",
+              "parameters": [
+                {
+                  "name": "currentIndex",
+                  "type": {
+                    "text": "number"
+                  },
+                  "description": "The current index."
+                },
+                {
+                  "name": "step",
+                  "type": {
+                    "text": "number"
+                  },
+                  "description": "The step to calculate the next index."
+                }
+              ],
+              "description": "Calculates the next index for the focus trap.",
+              "return": {
+                "type": {
+                  "text": ""
+                }
+              },
               "inheritedFrom": {
-                "name": "Popover",
-                "module": "components/popover/popover.component.js"
+                "name": "FocusTrapMixin",
+                "module": "utils/mixins/FocusTrapMixin.js"
               }
             },
             {
-              "kind": "field",
-              "name": "cancelCloseDelay",
+              "kind": "method",
+              "name": "getDeepActiveElement",
               "privacy": "private",
-              "description": "Cancels the close delay timer.",
-              "inheritedFrom": {
-                "name": "Popover",
-                "module": "components/popover/popover.component.js"
-              }
-            },
-            {
-              "kind": "field",
-              "name": "showPopover",
-              "privacy": "public",
-              "description": "Shows the popover.",
-              "inheritedFrom": {
-                "name": "Popover",
-                "module": "components/popover/popover.component.js"
-              }
-            },
-            {
-              "kind": "field",
-              "name": "hidePopover",
-              "privacy": "public",
-              "description": "Hides the popover.",
-              "inheritedFrom": {
-                "name": "Popover",
-                "module": "components/popover/popover.component.js"
-              }
-            },
-            {
-              "kind": "field",
-              "name": "togglePopoverVisible",
-              "privacy": "public",
-              "description": "Toggles the popover visibility.",
+              "description": "Returns the deepest active element in the shadow DOM.",
+              "return": {
+                "type": {
+                  "text": ""
+                }
+              },
               "inheritedFrom": {
-                "name": "Popover",
-                "module": "components/popover/popover.component.js"
+                "name": "FocusTrapMixin",
+                "module": "utils/mixins/FocusTrapMixin.js"
               }
             },
             {
               "kind": "method",
-              "name": "positionPopover",
+              "name": "findElement",
               "privacy": "private",
-              "description": "Positions the popover based on the trigger element.\nIt also handles the flip, size and arrow placement.\nIt uses the floating-ui/dom library to calculate the position.",
+              "parameters": [
+                {
+                  "name": "activeElement",
+                  "type": {
+                    "text": "HTMLElement"
+                  },
+                  "description": "The active element."
+                }
+              ],
+              "description": "Finds the index of the active element within the focusable elements.",
+              "return": {
+                "type": {
+                  "text": ""
+                }
+              },
               "inheritedFrom": {
-                "name": "Popover",
-                "module": "components/popover/popover.component.js"
+                "name": "FocusTrapMixin",
+                "module": "utils/mixins/FocusTrapMixin.js"
               }
             },
             {
               "kind": "method",
-              "name": "findClosestPopover",
-              "privacy": "protected",
+              "name": "isEqualFocusNode",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "activeElement",
+                  "type": {
+                    "text": "HTMLElement"
+                  },
+                  "description": "The active element."
+                },
+                {
+                  "name": "element",
+                  "type": {
+                    "text": "HTMLElement"
+                  },
+                  "description": "The element to compare."
+                }
+              ],
+              "description": "Checks if the active element is equal to the given element.",
               "return": {
                 "type": {
-                  "text": "Popover | null"
+                  "text": ""
                 }
               },
+              "inheritedFrom": {
+                "name": "FocusTrapMixin",
+                "module": "utils/mixins/FocusTrapMixin.js"
+              }
+            },
+            {
+              "kind": "method",
+              "name": "trapFocus",
+              "privacy": "private",
               "parameters": [
                 {
-                  "name": "element",
+                  "name": "event",
                   "type": {
-                    "text": "Element"
+                    "text": "KeyboardEvent"
+                  }
+                },
+                {
+                  "description": "The direction of the focus trap.\nIf true, the focus will be trapped in the previous element.",
+                  "name": "direction"
+                }
+              ],
+              "description": "Traps focus within the container.",
+              "inheritedFrom": {
+                "name": "FocusTrapMixin",
+                "module": "utils/mixins/FocusTrapMixin.js"
+              }
+            },
+            {
+              "kind": "method",
+              "name": "handleTabKeydown",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "event",
+                  "type": {
+                    "text": "KeyboardEvent"
                   },
-                  "description": "The element to start searching from."
+                  "description": "The keyboard event."
                 }
               ],
-              "description": "Finds the closest popover to the passed element in the DOM tree.\n\nUseful when need to find the parent popover in a nested popover scenario.",
+              "description": "Traps focus within the container.",
               "inheritedFrom": {
-                "name": "Popover",
-                "module": "components/popover/popover.component.js"
+                "name": "FocusTrapMixin",
+                "module": "utils/mixins/FocusTrapMixin.js"
               }
             },
             {
-              "kind": "field",
-              "name": "utils",
-              "default": "new PopoverUtils(this)",
+              "kind": "method",
+              "name": "renderFooter",
+              "privacy": "protected",
+              "description": "Renders the footer of the card if footer-link,\nfooter-button-primary, or footer-button-secondary slots are provided",
+              "return": {
+                "type": {
+                  "text": ""
+                }
+              },
               "inheritedFrom": {
-                "name": "Popover",
-                "module": "components/popover/popover.component.js"
+                "name": "FooterMixin",
+                "module": "utils/mixins/FooterMixin.js"
               }
             }
           ],
           "events": [
             {
-              "description": "(React: onShown) This event is dispatched when the coachmark is shown",
+              "description": "(React: onShown) Dispatched when the dialog is shown",
               "name": "shown",
-              "reactName": "onShown",
-              "inheritedFrom": {
-                "name": "Popover",
-                "module": "src/components/popover/popover.component.ts"
-              }
+              "reactName": "onShown"
             },
             {
-              "description": "(React: onHidden) This event is dispatched when the coachmark is hidden",
+              "description": "(React: onHidden) Dispatched when the dialog is hidden",
               "name": "hidden",
-              "reactName": "onHidden",
-              "inheritedFrom": {
-                "name": "Popover",
-                "module": "src/components/popover/popover.component.ts"
-              }
+              "reactName": "onHidden"
             },
             {
-              "description": "(React: onCreated) This event is dispatched when the coachmark is created (added to the DOM)",
+              "description": "(React: onCreated) Dispatched when the dialog is created (added to the DOM)",
               "name": "created",
-              "reactName": "onCreated",
-              "inheritedFrom": {
-                "name": "Popover",
-                "module": "src/components/popover/popover.component.ts"
-              }
+              "reactName": "onCreated"
             },
             {
-              "description": "(React: onDestroyed) This event is dispatched when the coachmark is destroyed (removed from the DOM)",
+              "description": "(React: onDestroyed) Dispatched when the dialog is destroyed (removed from the DOM)",
               "name": "destroyed",
-              "reactName": "onDestroyed",
-              "inheritedFrom": {
-                "name": "Popover",
-                "module": "src/components/popover/popover.component.ts"
-              }
+              "reactName": "onDestroyed"
+            },
+            {
+              "description": "(React: onClose) Dispatched when the Close Button is clicked or Escape key is pressed (this does not hide the dialog)",
+              "name": "close",
+              "reactName": "onClose"
             }
           ],
           "attributes": [
             {
-              "name": "trigger",
+              "name": "id",
               "type": {
-                "text": "PopoverTrigger"
+                "text": "string"
               },
-              "description": "Determines the events that cause the Coachmark to show.\nMultiple event names should be separated by spaces.\nFor example to allow both click and hover, use 'click mouseenter' as the trigger.\n- **click**\n- **mouseenter**\n- **focusin**\n- **manual**",
-              "default": "manual",
-              "fieldName": "trigger",
-              "inheritedFrom": {
-                "name": "Popover",
-                "module": "src/components/popover/popover.component.ts"
-              }
+              "default": "''",
+              "description": "The unique ID of the dialog",
+              "fieldName": "id"
             },
             {
-              "name": "show-arrow",
+              "name": "triggerId",
               "type": {
-                "text": "boolean"
+                "text": "string | undefined"
               },
-              "description": "The arrow visibility of the Coachmark.",
-              "default": "true",
-              "fieldName": "showArrow",
-              "inheritedFrom": {
-                "name": "Popover",
-                "module": "src/components/popover/popover.component.ts"
-              }
+              "description": "The ID of the element that triggers the dialog",
+              "default": "undefined",
+              "fieldName": "triggerId"
             },
             {
-              "name": "close-button",
+              "name": "visible",
               "type": {
                 "text": "boolean"
               },
-              "description": "The close button visibility of the Coachmark.",
-              "default": "true",
-              "fieldName": "closeButton",
-              "inheritedFrom": {
-                "name": "Popover",
-                "module": "src/components/popover/popover.component.ts"
-              }
+              "description": "The visibility of the dialog\n\nDialog is a controlled component, visible is the only property that controls the visibility of the dialog.",
+              "default": "false",
+              "fieldName": "visible"
             },
             {
-              "name": "disable-aria-expanded",
+              "name": "z-index",
               "type": {
-                "text": "boolean"
+                "text": "number"
               },
-              "description": "Disable aria-expanded attribute on trigger element.",
-              "default": "true",
-              "fieldName": "disableAriaExpanded",
-              "inheritedFrom": {
-                "name": "Popover",
-                "module": "src/components/popover/popover.component.ts"
-              }
+              "description": "The z-index of the dialog\n\nThe backdrop will have z-index of `zIndex - 1`",
+              "default": "1000",
+              "fieldName": "zIndex"
             },
             {
-              "name": "should-focus-trap-wrap",
+              "name": "size",
               "type": {
-                "text": "boolean"
+                "text": "DialogSize"
               },
-              "default": "true",
-              "description": "Determines whether focus should wrap around when reaching the first or last focusable element.\nIf true, focus will cycle from end to start and vice versa.\n\nThis only applies when `focusTrap` is true.",
-              "fieldName": "shouldFocusTrapWrap",
-              "inheritedFrom": {
-                "name": "FocusTrapMixin",
-                "module": "src/utils/mixins/FocusTrapMixin.ts"
-              }
+              "description": "The size of the dialog, can be 'small' (432px width), 'medium' (656px width), 'large' (992px width), 'xlarge' (90% width) or 'fullscreen' (100% width).",
+              "default": "small",
+              "fieldName": "size"
             },
             {
-              "name": "id",
+              "name": "variant",
               "type": {
-                "text": "string"
+                "text": "DialogVariant"
               },
-              "default": "''",
-              "description": "The unique ID of the popover.",
-              "fieldName": "id",
-              "inheritedFrom": {
-                "name": "Popover",
-                "module": "src/components/popover/popover.component.ts"
-              }
+              "description": "The variant of the dialog, can be 'default' or 'promotional'",
+              "default": "default",
+              "fieldName": "variant"
             },
             {
-              "name": "triggerID",
+              "name": "close-button-aria-label",
               "type": {
-                "text": "string"
+                "text": "string | null"
               },
-              "default": "''",
-              "description": "The ID of the element that triggers the popover.\nThis attribute is required for the popover to work.",
-              "fieldName": "triggerID",
-              "inheritedFrom": {
-                "name": "Popover",
-                "module": "src/components/popover/popover.component.ts"
-              }
+              "default": "null",
+              "description": "Defines a string value for the aria-label attribute for close button accessibility",
+              "fieldName": "closeButtonAriaLabel"
+            },
+            {
+              "name": "aria-label",
+              "type": {
+                "text": "string | null"
+              },
+              "default": "null",
+              "description": "Defines a string value for the aria-label attribute when header is not used",
+              "fieldName": "ariaLabel"
+            },
+            {
+              "name": "aria-labelledby",
+              "type": {
+                "text": "string | null"
+              },
+              "default": "null",
+              "description": "Defines a string value for the aria-labelledby attribute that refers to the element\nlabeling the dialog for accessibility",
+              "fieldName": "ariaLabelledby"
             },
             {
-              "name": "placement",
+              "name": "aria-describedby",
               "type": {
-                "text": "PopoverPlacement"
+                "text": "string | null"
               },
-              "description": "The placement of the popover.\n- **top**\n- **top-start**\n- **top-end**\n- **bottom**\n- **bottom-start**\n- **bottom-end**\n- **left**\n- **left-start**\n- **left-end**\n- **right**\n- **right-start**\n- **right-end**",
-              "default": "bottom",
-              "fieldName": "placement",
-              "inheritedFrom": {
-                "name": "Popover",
-                "module": "src/components/popover/popover.component.ts"
-              }
+              "default": "null",
+              "description": "Defines a string value for the aria-describedby attribute that refers to the element\ndescribing the dialog for accessibility",
+              "fieldName": "ariaDescribedBy"
             },
             {
-              "name": "color",
+              "name": "aria-description",
               "type": {
-                "text": "PopoverColor"
+                "text": "string | null"
               },
-              "description": "Color of the popover\n- **tonal**\n- **contrast**",
-              "default": "tonal",
-              "fieldName": "color",
-              "inheritedFrom": {
-                "name": "Popover",
-                "module": "src/components/popover/popover.component.ts"
-              }
+              "default": "null",
+              "description": "Defines a string value for the aria-description attribute that refers to the element\ndescribing the dialog for accessibility",
+              "fieldName": "ariaDescription"
             },
             {
-              "name": "visible",
+              "name": "header-text",
               "type": {
-                "text": "boolean"
+                "text": "string | undefined"
               },
-              "description": "The visibility of the popover.",
-              "default": "false",
-              "fieldName": "visible",
-              "inheritedFrom": {
-                "name": "Popover",
-                "module": "src/components/popover/popover.component.ts"
-              }
+              "description": "Defines a string value to display as the title of the dialog",
+              "fieldName": "headerText"
             },
             {
-              "name": "offset",
+              "name": "description-text",
               "type": {
-                "text": "number"
+                "text": "string | undefined"
               },
-              "description": "The offset of the popover.",
-              "default": "4",
-              "fieldName": "offset",
-              "inheritedFrom": {
-                "name": "Popover",
-                "module": "src/components/popover/popover.component.ts"
-              }
+              "description": "Defines a string value to display as the under-header description of the dialog",
+              "fieldName": "descriptionText"
             },
             {
-              "name": "boundary",
+              "name": "header-tag-name",
               "type": {
-                "text": "'clippingAncestors' | string"
+                "text": "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"
-              }
+              "description": "The html tag to be used for the header text",
+              "fieldName": "headerTagName"
             },
             {
-              "name": "boundary-root",
+              "name": "description-tag-name",
               "type": {
-                "text": "'viewport' | 'document'"
+                "text": "string"
               },
-              "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"
-              }
+              "description": "The html tag to be used for the below-header description text",
+              "fieldName": "descriptionTagName"
             },
             {
-              "name": "boundary-padding",
+              "name": "role",
               "type": {
-                "text": "undefined | number"
+                "text": "DialogRole"
               },
-              "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"
-              }
+              "description": "Role of the dialog",
+              "default": "dialog",
+              "fieldName": "role"
             },
             {
-              "name": "focus-trap",
+              "name": "disable-aria-haspopup",
               "type": {
                 "text": "boolean"
               },
-              "description": "Determines whether the focus trap is enabled.\nIf true, focus will be restricted to the content within this component.",
+              "description": "Disable setting the aria-haspopup attribute on trigger element.\nMake sure to set this to true when the popover is extended and its role\nis not 'dialog' or 'alertdialog' i.e. listbox, menu, etc.",
               "default": "false",
-              "fieldName": "focusTrap",
-              "inheritedFrom": {
-                "name": "Popover",
-                "module": "src/components/popover/popover.component.ts"
-              }
+              "fieldName": "disableAriaHasPopup"
             },
             {
-              "name": "prevent-scroll",
+              "name": "focus-trap",
               "type": {
                 "text": "boolean"
               },
-              "description": "Prevent outside scrolling when popover is shown.",
-              "default": "false",
-              "fieldName": "preventScroll",
-              "inheritedFrom": {
-                "name": "Popover",
-                "module": "src/components/popover/popover.component.ts"
-              }
+              "description": "Determines whether the focus trap is enabled.\nIf true, focus will be restricted to the content within this component.\n\nNOTE: this should only be disabled in rare cases! By default a Modal Dialog\nshould trap focus always.",
+              "default": "true",
+              "fieldName": "focusTrap"
             },
             {
-              "name": "interactive",
+              "name": "should-focus-trap-wrap",
               "type": {
                 "text": "boolean"
               },
-              "description": "Determines whether the popover is interactive.\nMake sure to set focusTrap to true to keep the focus inside the popover in case necessary.\nSetting interactive to true will not automatically set focusTrap!",
-              "default": "false",
-              "fieldName": "interactive",
+              "default": "true",
+              "description": "Determines whether focus should wrap around when reaching the first or last focusable element.\nIf true, focus will cycle from end to start and vice versa.\n\nThis only applies when `focusTrap` is true.",
+              "fieldName": "shouldFocusTrapWrap",
               "inheritedFrom": {
-                "name": "Popover",
-                "module": "src/components/popover/popover.component.ts"
+                "name": "FocusTrapMixin",
+                "module": "src/utils/mixins/FocusTrapMixin.ts"
               }
+            }
+          ],
+          "mixins": [
+            {
+              "name": "PreventScrollMixin",
+              "module": "/src/utils/mixins/PreventScrollMixin"
             },
             {
-              "name": "delay",
-              "type": {
-                "text": "string"
-              },
-              "description": "The delay of the show/hide popover.",
-              "default": "0,0",
-              "fieldName": "delay",
-              "inheritedFrom": {
-                "name": "Popover",
-                "module": "src/components/popover/popover.component.ts"
-              }
+              "name": "FocusTrapMixin",
+              "module": "/src/utils/mixins/FocusTrapMixin"
             },
             {
-              "name": "hide-on-escape",
-              "type": {
-                "text": "boolean"
-              },
-              "description": "Hide popover on escape key press.",
-              "default": "false",
-              "fieldName": "hideOnEscape",
-              "inheritedFrom": {
-                "name": "Popover",
-                "module": "src/components/popover/popover.component.ts"
-              }
+              "name": "FooterMixin",
+              "module": "/src/utils/mixins/FooterMixin"
+            }
+          ],
+          "superclass": {
+            "name": "Component",
+            "module": "/src/models"
+          },
+          "tagName": "mdc-dialog",
+          "jsDoc": "/**\n * Dialog component is a modal dialog that can be used to display information or prompt the user for input.\n * It can be used to create custom dialogs where content for the body and footer actions is provided by the consumer.\n * The dialog is available in 5 sizes: small, medium, large, xlarge and fullscreen. It may also receive custom styling/sizing.\n * The dialog interrupts the user and will block interaction with the rest of the application until it is closed.\n *\n * The dialog can be controlled solely through the `visible` property, no trigger element is required.\n * If a `triggerId` is provided, the dialog will manage focus with that element, otherwise it will\n * remember the previously focused element before the dialog was opened.\n *\n * The dialog is a controlled component, meaning it does not have its own state management for visibility.\n * Use the `visible` property to control the visibility of the dialog.\n * Use the `onClose` event to handle the close action of the dialog (fired when Close button is clicked\n * or Escape is pressed).\n *\n * Dialog component have 2 variants: default and promotional.\n *\n * **Accessibility notes for consuming (have to be explicitly set when you consume the component)**\n *\n * - The dialog should have an aria-label or aria-labelledby attribute to provide a label for screen readers.\n * - Use aria-labelledby to reference the ID of the element that labels the dialog when there is no visible title.\n *\n * **Note: Programmatic show/hide requires the ? prefix on the visible attribute**\n * - Use `?visible=true/false` as an attribute instead of `visible=true/false`\n * - Reference docs for more info: https://lit.dev/docs/templates/expressions/#boolean-attribute-expressions\n *\n * @dependency mdc-button\n * @dependency mdc-text\n *\n * @tagname mdc-dialog\n *\n * @event shown - (React: onShown) Dispatched when the dialog is shown\n * @event hidden - (React: onHidden) Dispatched when the dialog is hidden\n * @event created - (React: onCreated) Dispatched when the dialog is created (added to the DOM)\n * @event destroyed - (React: onDestroyed) Dispatched when the dialog is destroyed (removed from the DOM)\n * @event close - (React: onClose) Dispatched when the Close Button is clicked or Escape key is pressed\n * (this does not hide the dialog)\n *\n * @cssproperty --mdc-dialog-primary-background-color - primary background color of the dialog\n * @cssproperty --mdc-dialog-border-color - border color of the dialog\n * @cssproperty --mdc-dialog-header-text-color - text color of the header/title of the dialog\n * @cssproperty --mdc-dialog-description-text-color - text color of the below header description of the dialog\n * @cssproperty --mdc-dialog-elevation-3 - elevation of the dialog\n * @cssproperty --mdc-dialog-width - width of the dialog\n *\n * @slot header-prefix - Slot for the dialog header content. This can be used to pass custom header content.\n * @slot dialog-body - Slot for the dialog body content\n * @slot footer-link - This slot is for passing `mdc-link` component within the footer section.\n * @slot footer-button-secondary - This slot is for passing secondary variant of `mdc-button` component\n * within the footer section.\n * @slot footer-button-primary - This slot is for passing primary variant of\n * `mdc-button` component within the footer section.\n * @slot footer -  This slot is for passing custom footer content. Only use this if really needed,\n * using the footer-link and footer-button slots is preferred\n */",
+          "customElement": true
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "default",
+          "declaration": {
+            "name": "Dialog",
+            "module": "components/dialog/dialog.component.js"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "components/divider/divider.component.js",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "`mdc-divider` is a component that provides a line to separate and organize content.\nIt can also include a button or text positioned centrally, allowing users to interact with the layout.\n\n**Divider Orientation:**\n- **Horizontal**: A thin, horizontal line.\n- **Vertical**: A thin, vertical line.\n\n**Divider Variants:**\n- **solid**: Solid line.\n- **gradient**: Gradient Line.\n\n**Divider Types:**\n- The type of divider is inferred based on the kind of slot present.\n - **Primary**: A simple horizontal or vertical divider.\n - **Text**: A horizontal divider with a text label in the center.\n - **Grabber Button**: A horizontal or vertical divider with a styled button in the center.\n\n**Accessibility:**\n- When the slot is replaced by an `mdc-button`:\n  - `aria-label` should be passed to the `mdc-button`.\n  - `aria-expanded` should be passed to the `mdc-button`.\n\n**Notes:**\n- If the slot is replaced by an invalid tag name or contains multiple elements,\n  the divider defaults to the **Primary** type.\n- To override the styles of the divider, use the provided CSS custom properties.",
+          "name": "Divider",
+          "cssProperties": [
+            {
+              "description": "background color of the divider",
+              "name": "--mdc-divider-background-color"
             },
             {
-              "name": "propagate-event-on-escape",
-              "type": {
-                "text": "boolean"
-              },
-              "description": "Propagates the event, when the escape key is pressed (only when pressed inside the popover)\nIf true, the escape key press close the popover and will propagate the keydown event.\nIf false, the escape key press will close the popover but will not propagate the keydown event.\n(set to false to prevent the event from bubbling up to the document).\n\nThis only works when `hideOnEscape` is true.",
-              "default": "false",
-              "fieldName": "propagateEventOnEscape",
-              "inheritedFrom": {
-                "name": "Popover",
-                "module": "src/components/popover/popover.component.ts"
-              }
+              "description": "width of the divider",
+              "name": "--mdc-divider-width"
+            },
+            {
+              "description": "gradient of the horizontal divider",
+              "name": "--mdc-divider-horizontal-gradient"
+            },
+            {
+              "description": "gradient of the vertical divider",
+              "name": "--mdc-divider-vertical-gradient"
+            },
+            {
+              "description": "font size of label in the text divider",
+              "name": "--mdc-divider-text-size"
+            },
+            {
+              "description": "font color of label in the text divider",
+              "name": "--mdc-divider-text-color"
+            },
+            {
+              "description": "left and right margin of label in the text divider",
+              "name": "--mdc-divider-text-margin"
+            },
+            {
+              "description": "line height of label in the text divider",
+              "name": "--mdc-divider-text-line-height"
+            },
+            {
+              "description": "background color of the grabber button in rest state",
+              "name": "--mdc-divider-grabber-button-background-color-normal"
+            },
+            {
+              "description": "background color of the grabber button in hover state",
+              "name": "--mdc-divider-grabber-button-background-color-hover"
+            },
+            {
+              "description": "background color of the grabber button in pressed state",
+              "name": "--mdc-divider-grabber-button-background-color-pressed"
+            },
+            {
+              "description": "border color of the grabber button",
+              "name": "--mdc-divider-grabber-button-border-color"
             },
             {
-              "name": "hide-on-blur",
+              "description": "border radius of the grabber button",
+              "name": "--mdc-divider-grabber-button-border-radius"
+            }
+          ],
+          "members": [
+            {
+              "kind": "field",
+              "name": "orientation",
               "type": {
-                "text": "boolean"
+                "text": "DividerOrientation"
               },
-              "description": "Hide popover on blur.",
-              "default": "false",
-              "fieldName": "hideOnBlur",
-              "inheritedFrom": {
-                "name": "Popover",
-                "module": "src/components/popover/popover.component.ts"
-              }
+              "description": "Two orientations of divider\n- **horizontal**: A thin, horizontal line with 0.0625rem width.\n- **vertical**: A thin, vertical line with 0.0625rem width.\n\nNote: We do not support \"Vertical Text Divider\" as of now.",
+              "default": "horizontal",
+              "attribute": "orientation",
+              "reflects": true
             },
             {
-              "name": "hide-on-outside-click",
+              "kind": "field",
+              "name": "variant",
               "type": {
-                "text": "boolean"
+                "text": "DividerVariant"
               },
-              "description": "Hide on outside click of the popover.",
-              "default": "false",
-              "fieldName": "hideOnOutsideClick",
-              "inheritedFrom": {
-                "name": "Popover",
-                "module": "src/components/popover/popover.component.ts"
-              }
+              "description": "Two variants of divider\n- **solid**: Solid line.\n- **gradient**: Gradient Line that fades on either sides of the divider.",
+              "default": "solid",
+              "attribute": "variant",
+              "reflects": true
             },
             {
-              "name": "focus-back-to-trigger",
+              "kind": "field",
+              "name": "arrowDirection",
               "type": {
-                "text": "boolean"
+                "text": "Directions"
               },
-              "description": "The focus back to trigger after the popover hide.",
-              "default": "false",
-              "fieldName": "focusBackToTrigger",
-              "inheritedFrom": {
-                "name": "Popover",
-                "module": "src/components/popover/popover.component.ts"
-              }
+              "description": "Direction of the arrow icon, if applicable.\n- **positive**\n- **negative**\n\nNote: Positive and Negative directions are defined based on Cartesian plane.",
+              "default": "'negative'",
+              "attribute": "arrow-direction",
+              "reflects": true
             },
             {
-              "name": "backdrop",
+              "kind": "field",
+              "name": "buttonPosition",
               "type": {
-                "text": "boolean"
+                "text": "Directions"
               },
-              "description": "Determines whether the popover with backdrop.\nOther than popover and trigger element, the rest of the screen will be covered with a backdrop.",
-              "default": "false",
-              "fieldName": "backdrop",
-              "inheritedFrom": {
-                "name": "Popover",
-                "module": "src/components/popover/popover.component.ts"
-              }
+              "description": "Position of the button, if applicable.\n- **positive**\n- **negative**\n\nNote: Positive and Negative directions are defined based on Cartesian plane.",
+              "default": "'negative'",
+              "attribute": "button-position",
+              "reflects": true
             },
             {
-              "name": "flip",
-              "type": {
-                "text": "boolean"
-              },
-              "description": "Changes the placement of popover to keep it in view when scrolling.",
-              "default": "true",
-              "fieldName": "flip",
-              "inheritedFrom": {
-                "name": "Popover",
-                "module": "src/components/popover/popover.component.ts"
-              }
+              "kind": "method",
+              "name": "setVariant",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "variant",
+                  "type": {
+                    "text": "DividerVariant"
+                  },
+                  "description": "The variant to set."
+                }
+              ],
+              "description": "Sets the variant attribute for the divider component.\nIf the provided variant is not included in the DIVIDER_VARIANT,\nit defaults to the value specified in DEFAULTS.VARIANT."
             },
             {
-              "name": "size",
-              "type": {
-                "text": "boolean"
-              },
-              "description": "Changes the size of popover to keep it in view when scrolling.",
-              "default": "false",
-              "fieldName": "size",
-              "inheritedFrom": {
-                "name": "Popover",
-                "module": "src/components/popover/popover.component.ts"
-              }
+              "kind": "method",
+              "name": "setOrientation",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "orientation",
+                  "type": {
+                    "text": "DividerOrientation"
+                  },
+                  "description": "The orientation to set."
+                }
+              ],
+              "description": "Sets the orientation attribute for the divider component.\nIf the provided orientation is not included in the DIVIDER_ORIENTATION,\nit defaults to the value specified in DEFAULTS.ORIENTATION."
             },
             {
-              "name": "z-index",
-              "type": {
-                "text": "number"
-              },
-              "description": "The z-index of the popover.",
-              "default": "1000",
-              "fieldName": "zIndex",
-              "inheritedFrom": {
-                "name": "Popover",
-                "module": "src/components/popover/popover.component.ts"
-              }
+              "kind": "method",
+              "name": "ensureValidDirections",
+              "privacy": "private",
+              "description": "Sets the buttonPosition and arrowDirection attribute for the divider component.\nIf the provided buttonPosition and arrowDirection are not included in the DIRECTIONS,\nit defaults to the value specified in DIRECTIONS based on the ORIENTATION.",
+              "parameters": [
+                {
+                  "description": "The buttonPosition to set.",
+                  "name": "buttonPosition"
+                },
+                {
+                  "description": "The arrowDirection to set.",
+                  "name": "arrowDirection"
+                }
+              ]
             },
             {
-              "name": "append-to",
-              "type": {
-                "text": "string | undefined"
+              "kind": "method",
+              "name": "setGrabberButton",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
               },
-              "description": "Element ID that the popover append to.",
-              "default": "''",
-              "fieldName": "appendTo",
-              "inheritedFrom": {
-                "name": "Popover",
-                "module": "src/components/popover/popover.component.ts"
-              }
+              "description": "Configures the grabber button within the divider.\n\n- Sets the `prefix-icon` attribute for the grabber button based\non the `arrow-direction` and `orientation` properties.\n\nThis method updates the DOM element dynamically if a grabber button is present."
             },
             {
-              "name": "close-button-aria-label",
-              "type": {
-                "text": "string | null"
+              "kind": "method",
+              "name": "getArrowIcon",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": ""
+                }
               },
-              "default": "null",
-              "description": "aria-label attribute to be set for close button accessibility.",
-              "fieldName": "closeButtonAriaLabel",
-              "inheritedFrom": {
-                "name": "Popover",
-                "module": "src/components/popover/popover.component.ts"
-              }
+              "description": "Determines the arrow icon based on the consumer-defined `arrowDirection`."
             },
             {
-              "name": "role",
+              "kind": "method",
+              "name": "inferDividerType",
+              "privacy": "private",
+              "description": "Infers the type of divider based on the kind of slot present.",
+              "parameters": [
+                {
+                  "description": "default slot of divider",
+                  "name": "slot"
+                }
+              ]
+            }
+          ],
+          "attributes": [
+            {
+              "name": "orientation",
               "type": {
-                "text": "HTMLElement['role']"
+                "text": "DividerOrientation"
               },
-              "description": "Role of the popover",
-              "default": "dialog",
-              "fieldName": "role",
-              "inheritedFrom": {
-                "name": "Popover",
-                "module": "src/components/popover/popover.component.ts"
-              }
+              "description": "Two orientations of divider\n- **horizontal**: A thin, horizontal line with 0.0625rem width.\n- **vertical**: A thin, vertical line with 0.0625rem width.\n\nNote: We do not support \"Vertical Text Divider\" as of now.",
+              "default": "horizontal",
+              "fieldName": "orientation"
             },
             {
-              "name": "aria-labelledby",
+              "name": "variant",
               "type": {
-                "text": "string | null"
+                "text": "DividerVariant"
               },
-              "default": "null",
-              "description": "aria-labelledby for an interactive popover only, defaults to the trigger component id.\nUsed in nested cases where the triggerComponent isn't the actual button.",
-              "fieldName": "ariaLabelledby",
-              "inheritedFrom": {
-                "name": "Popover",
-                "module": "src/components/popover/popover.component.ts"
-              }
+              "description": "Two variants of divider\n- **solid**: Solid line.\n- **gradient**: Gradient Line that fades on either sides of the divider.",
+              "default": "solid",
+              "fieldName": "variant"
             },
             {
-              "name": "aria-describedby",
+              "name": "arrow-direction",
               "type": {
-                "text": "string | null"
+                "text": "Directions"
               },
-              "default": "null",
-              "description": "aria-describedby of the popover.",
-              "fieldName": "ariaDescribedby",
-              "inheritedFrom": {
-                "name": "Popover",
-                "module": "src/components/popover/popover.component.ts"
-              }
+              "description": "Direction of the arrow icon, if applicable.\n- **positive**\n- **negative**\n\nNote: Positive and Negative directions are defined based on Cartesian plane.",
+              "default": "'negative'",
+              "fieldName": "arrowDirection"
             },
             {
-              "name": "disable-aria-haspopup",
+              "name": "button-position",
               "type": {
-                "text": "boolean"
+                "text": "Directions"
               },
-              "description": "Disable setting the aria-haspopup attribute on trigger element.\nMake sure to set this to true when the popover is extended and its role\nis not 'dialog' or 'alertdialog' i.e. listbox, menu, etc.",
-              "default": "false",
-              "fieldName": "disableAriaHasPopup",
-              "inheritedFrom": {
-                "name": "Popover",
-                "module": "src/components/popover/popover.component.ts"
-              }
+              "description": "Position of the button, if applicable.\n- **positive**\n- **negative**\n\nNote: Positive and Negative directions are defined based on Cartesian plane.",
+              "default": "'negative'",
+              "fieldName": "buttonPosition"
             }
           ],
           "superclass": {
-            "name": "Popover",
-            "module": "/src/components/popover/popover.component"
+            "name": "Component",
+            "module": "/src/models"
           },
-          "tagName": "mdc-coachmark",
-          "jsDoc": "/**\n * Coachmark component based on top of the popover component,\n * with the default value of certain properties changed.\n *\n * @dependency mdc-popover\n *\n * @tagname mdc-coachmark\n *\n * @event shown - (React: onShown) This event is dispatched when the coachmark is shown\n * @event hidden - (React: onHidden) This event is dispatched when the coachmark is hidden\n * @event created - (React: onCreated) This event is dispatched when the coachmark is created (added to the DOM)\n * @event destroyed - (React: onDestroyed) This event is dispatched when the coachmark is\n * destroyed (removed from the DOM)\n *\n * @cssproperty --mdc-popover-arrow-border-radius - radius of the arrow border\n * @cssproperty --mdc-popover-arrow-border - border of the arrow\n * @cssproperty --mdc-popover-primary-background-color - primary background color of the popover\n * @cssproperty --mdc-popover-border-color - border color of the popover\n * @cssproperty --mdc-popover-inverted-background-color - inverted background color of the popover\n * @cssproperty --mdc-popover-inverted-border-color - inverted border color of the popover\n * @cssproperty --mdc-popover-inverted-text-color - inverted text color of the popover\n * @cssproperty --mdc-popover-elevation-3 - elevation of the popover\n *\n * @slot - Default slot for modal container\n *\n */",
+          "tagName": "mdc-divider",
+          "jsDoc": "/**\n * `mdc-divider` is a component that provides a line to separate and organize content.\n * It can also include a button or text positioned centrally, allowing users to interact with the layout.\n *\n * **Divider Orientation:**\n * - **Horizontal**: A thin, horizontal line.\n * - **Vertical**: A thin, vertical line.\n *\n * **Divider Variants:**\n * - **solid**: Solid line.\n * - **gradient**: Gradient Line.\n *\n * **Divider Types:**\n * - The type of divider is inferred based on the kind of slot present.\n *  - **Primary**: A simple horizontal or vertical divider.\n *  - **Text**: A horizontal divider with a text label in the center.\n *  - **Grabber Button**: A horizontal or vertical divider with a styled button in the center.\n *\n * **Accessibility:**\n * - When the slot is replaced by an `mdc-button`:\n *   - `aria-label` should be passed to the `mdc-button`.\n *   - `aria-expanded` should be passed to the `mdc-button`.\n *\n * **Notes:**\n * - If the slot is replaced by an invalid tag name or contains multiple elements,\n *   the divider defaults to the **Primary** type.\n * - To override the styles of the divider, use the provided CSS custom properties.\n *\n * @tagname mdc-divider\n *\n * @cssproperty --mdc-divider-background-color - background color of the divider\n * @cssproperty --mdc-divider-width - width of the divider\n * @cssproperty --mdc-divider-horizontal-gradient - gradient of the horizontal divider\n * @cssproperty --mdc-divider-vertical-gradient - gradient of the vertical divider\n * @cssproperty --mdc-divider-text-size - font size of label in the text divider\n * @cssproperty --mdc-divider-text-color - font color of label in the text divider\n * @cssproperty --mdc-divider-text-margin - left and right margin of label in the text divider\n * @cssproperty --mdc-divider-text-line-height - line height of label in the text divider\n * @cssproperty --mdc-divider-grabber-button-background-color-normal - background color of the grabber button\n *  in rest state\n * @cssproperty --mdc-divider-grabber-button-background-color-hover - background color of the grabber button\n *  in hover state\n * @cssproperty --mdc-divider-grabber-button-background-color-pressed - background color of the grabber button\n *  in pressed state\n * @cssproperty --mdc-divider-grabber-button-border-color - border color of the grabber button\n * @cssproperty --mdc-divider-grabber-button-border-radius - border radius of the grabber button\n */",
           "customElement": true
         }
       ],
@@ -10891,8 +10891,8 @@
           "kind": "js",
           "name": "default",
           "declaration": {
-            "name": "Coachmark",
-            "module": "components/coachmark/coachmark.component.js"
+            "name": "Divider",
+            "module": "components/divider/divider.component.js"
           }
         }
       ]