@momentum-design/components 0.94.0 → 0.95.1

package/dist/custom-elements.json

@@ -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,365 +8465,359 @@
               }
             },
             {
-              "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": "CardAndDialogFooterMixin",
-                "module": "utils/mixins/CardAndDialogFooterMixin.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": "CardAndDialogFooterMixin",
-              "module": "/src/utils/mixins/CardAndDialogFooterMixin"
-            }
-          ],
-          "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/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",
-              "inheritedFrom": {
-                "name": "Popover",
-                "module": "src/components/popover/popover.component.ts"
-              }
-            },
-            {
-              "description": "border of the arrow",
-              "name": "--mdc-popover-arrow-border",
-              "inheritedFrom": {
-                "name": "Popover",
-                "module": "src/components/popover/popover.component.ts"
-              }
-            },
-            {
-              "description": "primary background color of the popover",
-              "name": "--mdc-popover-primary-background-color",
-              "inheritedFrom": {
-                "name": "Popover",
-                "module": "src/components/popover/popover.component.ts"
-              }
-            },
-            {
-              "description": "border color of the popover",
-              "name": "--mdc-popover-border-color",
-              "inheritedFrom": {
-                "name": "Popover",
-                "module": "src/components/popover/popover.component.ts"
-              }
-            },
-            {
-              "description": "inverted background color of the popover",
-              "name": "--mdc-popover-inverted-background-color",
-              "inheritedFrom": {
-                "name": "Popover",
-                "module": "src/components/popover/popover.component.ts"
-              }
-            },
-            {
-              "description": "inverted border color of the popover",
-              "name": "--mdc-popover-inverted-border-color",
-              "inheritedFrom": {
-                "name": "Popover",
-                "module": "src/components/popover/popover.component.ts"
-              }
-            },
-            {
-              "description": "inverted text color of the popover",
-              "name": "--mdc-popover-inverted-text-color",
+              "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": "src/components/popover/popover.component.ts"
+                "module": "components/popover/popover.component.js"
               }
             },
             {
-              "description": "elevation of the popover",
-              "name": "--mdc-popover-elevation-3",
+              "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": "src/components/popover/popover.component.ts"
+                "module": "components/popover/popover.component.js"
               }
             },
             {
-              "description": "max width of the popover",
-              "name": "--mdc-popover-max-width",
+              "kind": "field",
+              "name": "role",
+              "type": {
+                "text": "HTMLElement['role']"
+              },
+              "description": "Role of the popover",
+              "default": "dialog",
+              "attribute": "role",
+              "reflects": true,
               "inheritedFrom": {
                 "name": "Popover",
-                "module": "src/components/popover/popover.component.ts"
+                "module": "components/popover/popover.component.js"
               }
             },
-            {
-              "description": "max height of the popover",
-              "name": "--mdc-popover-max-height",
-              "inheritedFrom": {
-                "name": "Popover",
-                "module": "src/components/popover/popover.component.ts"
-              }
-            }
-          ],
-          "slots": [
-            {
-              "description": "Default slot for modal container",
-              "name": "",
-              "inheritedFrom": {
-                "name": "Popover",
-                "module": "src/components/popover/popover.component.ts"
-              }
-            }
-          ],
-          "members": [
             {
               "kind": "field",
-              "name": "trigger",
+              "name": "ariaLabelledby",
               "type": {
-                "text": "PopoverTrigger"
+                "text": "string | null"
               },
-              "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",
+              "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",
@@ -8939,13 +8826,13 @@
             },
             {
               "kind": "field",
-              "name": "showArrow",
+              "name": "ariaDescribedby",
               "type": {
-                "text": "boolean"
+                "text": "string | null"
               },
-              "description": "The arrow visibility of the Coachmark.",
-              "default": "true",
-              "attribute": "show-arrow",
+              "default": "null",
+              "description": "aria-describedby of the popover.",
+              "attribute": "aria-describedby",
               "reflects": true,
               "inheritedFrom": {
                 "name": "Popover",
@@ -8954,13 +8841,13 @@
             },
             {
               "kind": "field",
-              "name": "closeButton",
+              "name": "disableAriaHasPopup",
               "type": {
                 "text": "boolean"
               },
-              "description": "The close button visibility of the Coachmark.",
-              "default": "true",
-              "attribute": "close-button",
+              "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",
@@ -8969,14 +8856,12 @@
             },
             {
               "kind": "field",
-              "name": "disableAriaExpanded",
+              "name": "arrowElement",
               "type": {
-                "text": "boolean"
+                "text": "HTMLElement | null"
               },
-              "description": "Disable aria-expanded attribute on trigger element.",
-              "default": "true",
-              "attribute": "disable-aria-expanded",
-              "reflects": true,
+              "privacy": "public",
+              "default": "null",
               "inheritedFrom": {
                 "name": "Popover",
                 "module": "components/popover/popover.component.js"
@@ -8984,15 +8869,12 @@
             },
             {
               "kind": "field",
-              "name": "preventScroll",
+              "name": "triggerElement",
               "type": {
-                "text": "boolean"
+                "text": "HTMLElement | null"
               },
-              "description": "Prevent outside scrolling when element is shown.\n\nIMPLEMENT THIS IN YOUR COMPONENT.",
-              "default": "false",
-              "attribute": "prevent-scroll",
-              "reflects": true,
-              "privacy": "protected",
+              "privacy": "public",
+              "default": "null",
               "inheritedFrom": {
                 "name": "Popover",
                 "module": "components/popover/popover.component.js"
@@ -9000,33 +8882,35 @@
             },
             {
               "kind": "method",
-              "name": "activatePreventScroll",
-              "privacy": "protected",
+              "name": "setupTriggerListener",
+              "privacy": "private",
+              "description": "Sets up the trigger event listeners based on the trigger type.",
               "inheritedFrom": {
-                "name": "PreventScrollMixin",
-                "module": "utils/mixins/PreventScrollMixin.js"
+                "name": "Popover",
+                "module": "components/popover/popover.component.js"
               }
             },
             {
               "kind": "method",
-              "name": "deactivatePreventScroll",
-              "privacy": "protected",
+              "name": "removeEventListeners",
+              "privacy": "private",
+              "description": "Removes the trigger event listeners.",
               "inheritedFrom": {
-                "name": "PreventScrollMixin",
-                "module": "utils/mixins/PreventScrollMixin.js"
+                "name": "Popover",
+                "module": "components/popover/popover.component.js"
               }
             },
             {
               "kind": "field",
-              "name": "focusTrap",
-              "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.",
-              "default": "false",
-              "attribute": "focus-trap",
-              "reflects": true,
+              "name": "onOutsidePopoverClick",
               "privacy": "protected",
+              "description": "Handles the outside click event to close the popover.",
+              "parameters": [
+                {
+                  "description": "The mouse event.",
+                  "name": "event"
+                }
+              ],
               "inheritedFrom": {
                 "name": "Popover",
                 "module": "components/popover/popover.component.js"
@@ -9034,784 +8918,768 @@
             },
             {
               "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"
-              }
-            },
-            {
-              "kind": "method",
-              "name": "setIsFocusTrapActivated",
+              "name": "onEscapeKeydown",
               "privacy": "private",
+              "description": "Handles the escape keydown event to close the popover.\n\nThis method is attached to the document.",
               "parameters": [
                 {
-                  "name": "isActivated",
-                  "type": {
-                    "text": "boolean"
-                  }
+                  "description": "The keyboard event.",
+                  "name": "event"
                 }
               ],
               "inheritedFrom": {
-                "name": "FocusTrapMixin",
-                "module": "utils/mixins/FocusTrapMixin.js"
+                "name": "Popover",
+                "module": "components/popover/popover.component.js"
               }
             },
             {
-              "kind": "method",
-              "name": "activateFocusTrap",
-              "privacy": "public",
-              "description": "Activate the focus trap",
-              "inheritedFrom": {
-                "name": "FocusTrapMixin",
-                "module": "utils/mixins/FocusTrapMixin.js"
-              }
-            },
-            {
-              "kind": "method",
-              "name": "deactivateFocusTrap",
-              "privacy": "public",
-              "description": "Deactivate the focus trap.",
-              "inheritedFrom": {
-                "name": "FocusTrapMixin",
-                "module": "utils/mixins/FocusTrapMixin.js"
-              }
-            },
-            {
-              "kind": "method",
-              "name": "hasNoClientRects",
+              "kind": "field",
+              "name": "onPopoverFocusOut",
               "privacy": "private",
+              "description": "Handles the popover focus out event.",
               "parameters": [
                 {
-                  "name": "element",
-                  "type": {
-                    "text": "HTMLElement"
-                  },
-                  "description": "The element to check."
+                  "description": "The focus event.",
+                  "name": "event"
                 }
               ],
-              "description": "Checks if the element has no client rectangles (not visible in the viewport).",
-              "return": {
-                "type": {
-                  "text": ""
-                }
-              },
               "inheritedFrom": {
-                "name": "FocusTrapMixin",
-                "module": "utils/mixins/FocusTrapMixin.js"
+                "name": "Popover",
+                "module": "components/popover/popover.component.js"
               }
             },
             {
               "kind": "method",
-              "name": "hasZeroDimensions",
-              "privacy": "private",
+              "name": "isOpenUpdated",
+              "privacy": "protected",
               "parameters": [
                 {
-                  "name": "element",
+                  "name": "oldValue",
                   "type": {
-                    "text": "HTMLElement"
+                    "text": "boolean"
                   },
-                  "description": "The element to check."
+                  "description": "The old value of the visible property."
+                },
+                {
+                  "name": "newValue",
+                  "type": {
+                    "text": "boolean"
+                  },
+                  "description": "The new value of the visible property."
                 }
               ],
-              "description": "Checks if the element has zero dimensions (width and height are both 0).",
-              "return": {
-                "type": {
-                  "text": ""
-                }
-              },
+              "description": "Handles the popover visibility change and position the popover.\nHandles the exit event to close the popover.",
               "inheritedFrom": {
-                "name": "FocusTrapMixin",
-                "module": "utils/mixins/FocusTrapMixin.js"
+                "name": "Popover",
+                "module": "components/popover/popover.component.js"
               }
             },
             {
-              "kind": "method",
-              "name": "isNotVisible",
+              "kind": "field",
+              "name": "handleMouseEnter",
               "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": "Handles mouse enter event on the trigger element.\nThis method sets the `isHovered` flag to true and shows the popover",
               "inheritedFrom": {
-                "name": "FocusTrapMixin",
-                "module": "utils/mixins/FocusTrapMixin.js"
+                "name": "Popover",
+                "module": "components/popover/popover.component.js"
               }
             },
             {
-              "kind": "method",
-              "name": "hasHiddenStyle",
+              "kind": "field",
+              "name": "handleMouseLeave",
               "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": ""
-                }
-              },
+              "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": "FocusTrapMixin",
-                "module": "utils/mixins/FocusTrapMixin.js"
+                "name": "Popover",
+                "module": "components/popover/popover.component.js"
               }
             },
             {
-              "kind": "method",
-              "name": "hasComputedHidden",
+              "kind": "field",
+              "name": "handleFocusOut",
               "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": ""
-                }
-              },
+              "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": "FocusTrapMixin",
-                "module": "utils/mixins/FocusTrapMixin.js"
+                "name": "Popover",
+                "module": "components/popover/popover.component.js"
               }
             },
             {
-              "kind": "method",
-              "name": "isHidden",
+              "kind": "field",
+              "name": "startCloseDelay",
               "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": ""
-                }
-              },
+              "description": "Starts the close delay timer.\nIf the popover is not interactive, it will close the popover after the delay.",
               "inheritedFrom": {
-                "name": "FocusTrapMixin",
-                "module": "utils/mixins/FocusTrapMixin.js"
+                "name": "Popover",
+                "module": "components/popover/popover.component.js"
               }
             },
             {
-              "kind": "method",
-              "name": "isDisabled",
+              "kind": "field",
+              "name": "cancelCloseDelay",
               "privacy": "private",
-              "parameters": [
-                {
-                  "name": "element",
-                  "type": {
-                    "text": "any"
-                  },
-                  "description": "The element to check."
-                }
-              ],
-              "description": "Checks if the element is disabled.",
-              "return": {
-                "type": {
-                  "text": ""
-                }
-              },
+              "description": "Cancels the close delay timer.",
               "inheritedFrom": {
-                "name": "FocusTrapMixin",
-                "module": "utils/mixins/FocusTrapMixin.js"
+                "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.",
+              "inheritedFrom": {
+                "name": "Popover",
+                "module": "components/popover/popover.component.js"
               }
             },
             {
               "kind": "method",
-              "name": "isNotTabbable",
+              "name": "positionPopover",
               "privacy": "private",
-              "parameters": [
-                {
-                  "name": "element",
-                  "type": {
-                    "text": "HTMLElement"
-                  },
-                  "description": "The element to check."
-                }
-              ],
-              "description": "Checks if the element is not tabbable.",
-              "return": {
-                "type": {
-                  "text": ""
-                }
-              },
+              "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": "FocusTrapMixin",
-                "module": "utils/mixins/FocusTrapMixin.js"
+                "name": "Popover",
+                "module": "components/popover/popover.component.js"
               }
             },
             {
               "kind": "method",
-              "name": "isInteractiveElement",
-              "privacy": "private",
+              "name": "findClosestPopover",
+              "privacy": "protected",
               "return": {
                 "type": {
-                  "text": ""
+                  "text": "Popover | null"
                 }
               },
               "parameters": [
                 {
                   "name": "element",
                   "type": {
-                    "text": "HTMLElement"
+                    "text": "Element"
                   },
-                  "description": "The element to check."
+                  "description": "The element to start searching from."
                 }
               ],
-              "description": "Checks if the element is interactive.",
+              "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": "FocusTrapMixin",
-                "module": "utils/mixins/FocusTrapMixin.js"
+                "name": "Popover",
+                "module": "components/popover/popover.component.js"
               }
             },
             {
-              "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": ""
-                }
-              },
+              "kind": "field",
+              "name": "utils",
+              "default": "new PopoverUtils(this)",
               "inheritedFrom": {
-                "name": "FocusTrapMixin",
-                "module": "utils/mixins/FocusTrapMixin.js"
+                "name": "Popover",
+                "module": "components/popover/popover.component.js"
               }
-            },
+            }
+          ],
+          "events": [
             {
-              "kind": "method",
-              "name": "findFocusable",
-              "privacy": "private",
-              "return": {
-                "type": {
-                  "text": ""
-                }
-              },
-              "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": "(React: onShown) This event is dispatched when the coachmark is shown",
+              "name": "shown",
+              "reactName": "onShown",
               "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.",
+              "description": "(React: onHidden) This event is dispatched when the coachmark is hidden",
+              "name": "hidden",
+              "reactName": "onHidden",
               "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.",
+              "description": "(React: onCreated) This event is dispatched when the coachmark is created (added to the DOM)",
+              "name": "created",
+              "reactName": "onCreated",
               "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": ""
-                }
-              },
+              "description": "(React: onDestroyed) This event is dispatched when the coachmark is destroyed (removed from the DOM)",
+              "name": "destroyed",
+              "reactName": "onDestroyed",
               "inheritedFrom": {
-                "name": "FocusTrapMixin",
-                "module": "utils/mixins/FocusTrapMixin.js"
+                "name": "Popover",
+                "module": "src/components/popover/popover.component.ts"
               }
-            },
+            }
+          ],
+          "attributes": [
             {
-              "kind": "method",
-              "name": "getDeepActiveElement",
-              "privacy": "private",
-              "description": "Returns the deepest active element in the shadow DOM.",
-              "return": {
-                "type": {
-                  "text": ""
-                }
+              "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",
+              "fieldName": "trigger",
               "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": "show-arrow",
+              "type": {
+                "text": "boolean"
               },
+              "description": "The arrow visibility of the Coachmark.",
+              "default": "true",
+              "fieldName": "showArrow",
               "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": "close-button",
+              "type": {
+                "text": "boolean"
               },
+              "description": "The close button visibility of the Coachmark.",
+              "default": "true",
+              "fieldName": "closeButton",
               "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": "disable-aria-expanded",
+              "type": {
+                "text": "boolean"
+              },
+              "description": "Disable aria-expanded attribute on trigger element.",
+              "default": "true",
+              "fieldName": "disableAriaExpanded",
               "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": "should-focus-trap-wrap",
+              "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",
               "inheritedFrom": {
                 "name": "FocusTrapMixin",
-                "module": "utils/mixins/FocusTrapMixin.js"
+                "module": "src/utils/mixins/FocusTrapMixin.ts"
               }
             },
             {
-              "kind": "field",
               "name": "id",
               "type": {
                 "text": "string"
               },
               "default": "''",
               "description": "The unique ID of the popover.",
-              "attribute": "id",
-              "reflects": true,
+              "fieldName": "id",
               "inheritedFrom": {
                 "name": "Popover",
-                "module": "components/popover/popover.component.js"
+                "module": "src/components/popover/popover.component.ts"
               }
             },
             {
-              "kind": "field",
               "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.",
-              "attribute": "triggerID",
-              "reflects": true,
+              "fieldName": "triggerID",
               "inheritedFrom": {
                 "name": "Popover",
-                "module": "components/popover/popover.component.js"
+                "module": "src/components/popover/popover.component.ts"
               }
             },
             {
-              "kind": "field",
               "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",
-              "attribute": "placement",
-              "reflects": true,
+              "fieldName": "placement",
               "inheritedFrom": {
                 "name": "Popover",
-                "module": "components/popover/popover.component.js"
+                "module": "src/components/popover/popover.component.ts"
               }
             },
             {
-              "kind": "field",
               "name": "color",
               "type": {
                 "text": "PopoverColor"
               },
               "description": "Color of the popover\n- **tonal**\n- **contrast**",
               "default": "tonal",
-              "attribute": "color",
-              "reflects": true,
+              "fieldName": "color",
               "inheritedFrom": {
                 "name": "Popover",
-                "module": "components/popover/popover.component.js"
+                "module": "src/components/popover/popover.component.ts"
               }
             },
             {
-              "kind": "field",
               "name": "visible",
               "type": {
                 "text": "boolean"
               },
               "description": "The visibility of the popover.",
               "default": "false",
-              "attribute": "visible",
-              "reflects": true,
+              "fieldName": "visible",
               "inheritedFrom": {
                 "name": "Popover",
-                "module": "components/popover/popover.component.js"
+                "module": "src/components/popover/popover.component.ts"
               }
             },
             {
-              "kind": "field",
               "name": "offset",
               "type": {
-                "text": "number"
+                "text": "number"
+              },
+              "description": "The offset of the popover.",
+              "default": "4",
+              "fieldName": "offset",
+              "inheritedFrom": {
+                "name": "Popover",
+                "module": "src/components/popover/popover.component.ts"
+              }
+            },
+            {
+              "name": "boundary",
+              "type": {
+                "text": "'clippingAncestors' | string"
+              },
+              "description": "This describes the clipping element(s) or area that overflow will be checked relative to.\nThe default is 'clippingAncestors', which are the overflow ancestors which will cause the\nelement to be clipped.\n\nPossible values:\n - 'clippingAncestors'\n - any css selector",
+              "default": "'clippingAncestors'",
+              "fieldName": "boundary",
+              "inheritedFrom": {
+                "name": "Popover",
+                "module": "src/components/popover/popover.component.ts"
+              }
+            },
+            {
+              "name": "boundary-root",
+              "type": {
+                "text": "'viewport' | 'document'"
+              },
+              "description": "This describes the root boundary that the element will be checked for overflow relative to.\nThe default is 'viewport', which is the area of the page the user can see on the screen.\n\nThe other string option is 'document', which is the entire page outside the viewport.",
+              "default": "'viewport'",
+              "fieldName": "boundaryRoot",
+              "inheritedFrom": {
+                "name": "Popover",
+                "module": "src/components/popover/popover.component.ts"
+              }
+            },
+            {
+              "name": "boundary-padding",
+              "type": {
+                "text": "undefined | number"
+              },
+              "description": "Virtual padding around the boundary to check for overflow.\nSo the popover will not be placed on top of the edge of the boundary.\n\nDefault works well for most cases, but you can set this to customise it when necessary.",
+              "default": "undefined",
+              "fieldName": "boundaryPadding",
+              "inheritedFrom": {
+                "name": "Popover",
+                "module": "src/components/popover/popover.component.ts"
+              }
+            },
+            {
+              "name": "focus-trap",
+              "type": {
+                "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": "Popover",
+                "module": "src/components/popover/popover.component.ts"
+              }
+            },
+            {
+              "name": "prevent-scroll",
+              "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"
+              }
+            },
+            {
+              "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": "Popover",
+                "module": "src/components/popover/popover.component.ts"
+              }
+            },
+            {
+              "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": "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": "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"
+              }
+            },
+            {
+              "name": "hide-on-blur",
+              "type": {
+                "text": "boolean"
+              },
+              "description": "Hide popover on blur.",
+              "default": "false",
+              "fieldName": "hideOnBlur",
+              "inheritedFrom": {
+                "name": "Popover",
+                "module": "src/components/popover/popover.component.ts"
+              }
+            },
+            {
+              "name": "hide-on-outside-click",
+              "type": {
+                "text": "boolean"
               },
-              "description": "The offset of the popover.",
-              "default": "4",
-              "attribute": "offset",
-              "reflects": true,
+              "description": "Hide on outside click of the popover.",
+              "default": "false",
+              "fieldName": "hideOnOutsideClick",
               "inheritedFrom": {
                 "name": "Popover",
-                "module": "components/popover/popover.component.js"
+                "module": "src/components/popover/popover.component.ts"
               }
             },
             {
-              "kind": "field",
-              "name": "boundary",
+              "name": "focus-back-to-trigger",
               "type": {
-                "text": "'clippingAncestors' | string"
+                "text": "boolean"
               },
-              "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,
+              "description": "The focus back to trigger after the popover hide.",
+              "default": "false",
+              "fieldName": "focusBackToTrigger",
               "inheritedFrom": {
                 "name": "Popover",
-                "module": "components/popover/popover.component.js"
+                "module": "src/components/popover/popover.component.ts"
               }
             },
             {
-              "kind": "field",
-              "name": "boundaryRoot",
+              "name": "backdrop",
               "type": {
-                "text": "'viewport' | 'document'"
+                "text": "boolean"
               },
-              "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,
+              "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": "components/popover/popover.component.js"
+                "module": "src/components/popover/popover.component.ts"
               }
             },
             {
-              "kind": "field",
-              "name": "boundaryPadding",
+              "name": "flip",
               "type": {
-                "text": "undefined | number"
+                "text": "boolean"
               },
-              "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,
+              "description": "Changes the placement of popover to keep it in view when scrolling.",
+              "default": "true",
+              "fieldName": "flip",
               "inheritedFrom": {
                 "name": "Popover",
-                "module": "components/popover/popover.component.js"
+                "module": "src/components/popover/popover.component.ts"
               }
             },
             {
-              "kind": "field",
-              "name": "interactive",
+              "name": "size",
               "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!",
+              "description": "Changes the size of popover to keep it in view when scrolling.",
               "default": "false",
-              "attribute": "interactive",
-              "reflects": true,
+              "fieldName": "size",
               "inheritedFrom": {
                 "name": "Popover",
-                "module": "components/popover/popover.component.js"
+                "module": "src/components/popover/popover.component.ts"
               }
             },
             {
-              "kind": "field",
-              "name": "delay",
+              "name": "z-index",
               "type": {
-                "text": "string"
+                "text": "number"
               },
-              "description": "The delay of the show/hide popover.",
-              "default": "0,0",
-              "attribute": "delay",
-              "reflects": true,
+              "description": "The z-index of the popover.",
+              "default": "1000",
+              "fieldName": "zIndex",
               "inheritedFrom": {
                 "name": "Popover",
-                "module": "components/popover/popover.component.js"
+                "module": "src/components/popover/popover.component.ts"
               }
             },
             {
-              "kind": "field",
-              "name": "hideOnEscape",
+              "name": "append-to",
               "type": {
-                "text": "boolean"
+                "text": "string | undefined"
               },
-              "description": "Hide popover on escape key press.",
-              "default": "false",
-              "attribute": "hide-on-escape",
-              "reflects": true,
+              "description": "Element ID that the popover append to.",
+              "default": "''",
+              "fieldName": "appendTo",
               "inheritedFrom": {
                 "name": "Popover",
-                "module": "components/popover/popover.component.js"
+                "module": "src/components/popover/popover.component.ts"
               }
             },
             {
-              "kind": "field",
-              "name": "propagateEventOnEscape",
+              "name": "close-button-aria-label",
               "type": {
-                "text": "boolean"
+                "text": "string | null"
               },
-              "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,
+              "default": "null",
+              "description": "aria-label attribute to be set for close button accessibility.",
+              "fieldName": "closeButtonAriaLabel",
               "inheritedFrom": {
                 "name": "Popover",
-                "module": "components/popover/popover.component.js"
+                "module": "src/components/popover/popover.component.ts"
               }
             },
             {
-              "kind": "field",
-              "name": "hideOnBlur",
+              "name": "role",
               "type": {
-                "text": "boolean"
+                "text": "HTMLElement['role']"
               },
-              "description": "Hide popover on blur.",
-              "default": "false",
-              "attribute": "hide-on-blur",
-              "reflects": true,
+              "description": "Role of the popover",
+              "default": "dialog",
+              "fieldName": "role",
               "inheritedFrom": {
                 "name": "Popover",
-                "module": "components/popover/popover.component.js"
+                "module": "src/components/popover/popover.component.ts"
               }
             },
             {
-              "kind": "field",
-              "name": "hideOnOutsideClick",
+              "name": "aria-labelledby",
               "type": {
-                "text": "boolean"
+                "text": "string | null"
               },
-              "description": "Hide on outside click of the popover.",
-              "default": "false",
-              "attribute": "hide-on-outside-click",
-              "reflects": true,
+              "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": "components/popover/popover.component.js"
+                "module": "src/components/popover/popover.component.ts"
               }
             },
             {
-              "kind": "field",
-              "name": "focusBackToTrigger",
+              "name": "aria-describedby",
               "type": {
-                "text": "boolean"
+                "text": "string | null"
               },
-              "description": "The focus back to trigger after the popover hide.",
-              "default": "false",
-              "attribute": "focus-back-to-trigger",
-              "reflects": true,
+              "default": "null",
+              "description": "aria-describedby of the popover.",
+              "fieldName": "ariaDescribedby",
               "inheritedFrom": {
                 "name": "Popover",
-                "module": "components/popover/popover.component.js"
+                "module": "src/components/popover/popover.component.ts"
               }
             },
             {
-              "kind": "field",
-              "name": "backdrop",
+              "name": "disable-aria-haspopup",
               "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.",
+              "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": "backdrop",
-              "reflects": true,
+              "fieldName": "disableAriaHasPopup",
               "inheritedFrom": {
                 "name": "Popover",
-                "module": "components/popover/popover.component.js"
+                "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": "flip",
+              "name": "id",
               "type": {
-                "text": "boolean"
+                "text": "string"
               },
-              "description": "Changes the placement of popover to keep it in view when scrolling.",
-              "default": "true",
-              "attribute": "flip",
-              "reflects": true,
-              "inheritedFrom": {
-                "name": "Popover",
-                "module": "components/popover/popover.component.js"
-              }
+              "default": "''",
+              "description": "The unique ID of the dialog",
+              "attribute": "id",
+              "reflects": true
             },
             {
               "kind": "field",
-              "name": "size",
+              "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": "Changes the size of popover to keep it in view when scrolling.",
+              "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": "size",
-              "reflects": true,
-              "inheritedFrom": {
-                "name": "Popover",
-                "module": "components/popover/popover.component.js"
-              }
+              "attribute": "visible",
+              "reflects": true
             },
             {
               "kind": "field",
@@ -9819,29 +9687,32 @@
               "type": {
                 "text": "number"
               },
-              "description": "The z-index of the popover.",
+              "description": "The z-index of the dialog\n\nThe backdrop will have z-index of `zIndex - 1`",
               "default": "1000",
               "attribute": "z-index",
-              "reflects": true,
-              "inheritedFrom": {
-                "name": "Popover",
-                "module": "components/popover/popover.component.js"
-              }
+              "reflects": true
             },
             {
               "kind": "field",
-              "name": "appendTo",
+              "name": "size",
               "type": {
-                "text": "string | undefined"
+                "text": "DialogSize"
               },
-              "description": "Element ID that the popover append to.",
-              "default": "''",
-              "attribute": "append-to",
-              "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": "variant",
+              "type": {
+                "text": "DialogVariant"
+              },
+              "description": "The variant of the dialog, can be 'default' or 'promotional'",
+              "default": "default",
+              "attribute": "variant",
+              "reflects": true
             },
             {
               "kind": "field",
@@ -9850,28 +9721,19 @@
                 "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": "Defines a string value for the aria-label attribute for close button accessibility",
+              "attribute": "close-button-aria-label"
             },
             {
               "kind": "field",
-              "name": "role",
+              "name": "ariaLabel",
               "type": {
-                "text": "HTMLElement['role']"
+                "text": "string | null"
               },
-              "description": "Role of the popover",
-              "default": "dialog",
-              "attribute": "role",
-              "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",
@@ -9880,147 +9742,125 @@
                 "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.",
+              "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,
-              "inheritedFrom": {
-                "name": "Popover",
-                "module": "components/popover/popover.component.js"
-              }
+              "reflects": true
             },
             {
               "kind": "field",
-              "name": "ariaDescribedby",
+              "name": "ariaDescribedBy",
               "type": {
                 "text": "string | null"
               },
               "default": "null",
-              "description": "aria-describedby of the popover.",
+              "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,
-              "inheritedFrom": {
-                "name": "Popover",
-                "module": "components/popover/popover.component.js"
-              }
+              "reflects": true
             },
             {
               "kind": "field",
-              "name": "disableAriaHasPopup",
+              "name": "ariaDescription",
               "type": {
-                "text": "boolean"
+                "text": "string | null"
               },
-              "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"
-              }
+              "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": "arrowElement",
+              "name": "headerText",
               "type": {
-                "text": "HTMLElement | null"
+                "text": "string | undefined"
               },
-              "privacy": "public",
-              "default": "null",
-              "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": "triggerElement",
+              "name": "descriptionText",
               "type": {
-                "text": "HTMLElement | null"
+                "text": "string | undefined"
               },
-              "privacy": "public",
-              "default": "null",
-              "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": "method",
-              "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": "field",
+              "name": "headerTagName",
+              "type": {
+                "text": "string"
+              },
+              "description": "The html tag to be used for the header text",
+              "attribute": "header-tag-name",
+              "reflects": true
             },
             {
-              "kind": "method",
-              "name": "removeEventListeners",
-              "privacy": "private",
-              "description": "Removes the trigger event listeners.",
-              "inheritedFrom": {
-                "name": "Popover",
-                "module": "components/popover/popover.component.js"
-              }
+              "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": "onOutsidePopoverClick",
-              "privacy": "protected",
-              "description": "Handles the outside click event to close the popover.",
-              "parameters": [
-                {
-                  "description": "The mouse event.",
-                  "name": "event"
-                }
-              ],
-              "inheritedFrom": {
-                "name": "Popover",
-                "module": "components/popover/popover.component.js"
-              }
+              "name": "role",
+              "type": {
+                "text": "DialogRole"
+              },
+              "description": "Role of the dialog",
+              "default": "dialog",
+              "attribute": "role",
+              "reflects": true
             },
             {
               "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": [
-                {
-                  "description": "The keyboard event.",
-                  "name": "event"
-                }
-              ],
-              "inheritedFrom": {
-                "name": "Popover",
-                "module": "components/popover/popover.component.js"
-              }
+              "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": "onPopoverFocusOut",
-              "privacy": "private",
-              "description": "Handles the popover focus out event.",
-              "parameters": [
-                {
-                  "description": "The focus event.",
-                  "name": "event"
-                }
-              ],
+              "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": "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": "protected",
+              "privacy": "private",
               "parameters": [
                 {
                   "name": "oldValue",
                   "type": {
-                    "text": "boolean"
+                    "text": "boolean | undefined"
                   },
                   "description": "The old value of the visible property."
                 },
@@ -10030,613 +9870,773 @@
                     "text": "boolean"
                   },
                   "description": "The new value of the visible property."
-                }
-              ],
-              "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"
-              }
+                }
+              ],
+              "description": "Handles the dialog visibility change.\nHandles the exit event to close the dialog."
             },
             {
               "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",
+              "name": "preventScroll",
+              "type": {
+                "text": "boolean"
+              },
+              "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": "handleMouseLeave",
-              "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.",
+              "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": "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": "deactivatePreventScroll",
+              "privacy": "protected",
               "inheritedFrom": {
-                "name": "Popover",
-                "module": "components/popover/popover.component.js"
+                "name": "PreventScrollMixin",
+                "module": "utils/mixins/PreventScrollMixin.js"
               }
             },
             {
               "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.",
+              "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": "Popover",
-                "module": "components/popover/popover.component.js"
+                "name": "FocusTrapMixin",
+                "module": "utils/mixins/FocusTrapMixin.js"
               }
             },
             {
-              "kind": "field",
-              "name": "cancelCloseDelay",
+              "kind": "method",
+              "name": "setIsFocusTrapActivated",
               "privacy": "private",
-              "description": "Cancels the close delay timer.",
+              "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": "showPopover",
+              "kind": "method",
+              "name": "activateFocusTrap",
               "privacy": "public",
-              "description": "Shows the popover.",
+              "description": "Activate the focus trap",
               "inheritedFrom": {
-                "name": "Popover",
-                "module": "components/popover/popover.component.js"
+                "name": "FocusTrapMixin",
+                "module": "utils/mixins/FocusTrapMixin.js"
               }
             },
             {
-              "kind": "field",
-              "name": "hidePopover",
+              "kind": "method",
+              "name": "deactivateFocusTrap",
               "privacy": "public",
-              "description": "Hides the popover.",
+              "description": "Deactivate the focus trap.",
               "inheritedFrom": {
-                "name": "Popover",
-                "module": "components/popover/popover.component.js"
+                "name": "FocusTrapMixin",
+                "module": "utils/mixins/FocusTrapMixin.js"
               }
             },
             {
-              "kind": "field",
-              "name": "togglePopoverVisible",
-              "privacy": "public",
-              "description": "Toggles the popover visibility.",
+              "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": ""
+                }
+              },
               "inheritedFrom": {
-                "name": "Popover",
-                "module": "components/popover/popover.component.js"
+                "name": "FocusTrapMixin",
+                "module": "utils/mixins/FocusTrapMixin.js"
               }
             },
             {
               "kind": "method",
-              "name": "positionPopover",
+              "name": "hasZeroDimensions",
               "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": "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": ""
+                }
+              },
               "inheritedFrom": {
-                "name": "Popover",
-                "module": "components/popover/popover.component.js"
+                "name": "FocusTrapMixin",
+                "module": "utils/mixins/FocusTrapMixin.js"
               }
             },
             {
               "kind": "method",
-              "name": "findClosestPopover",
-              "privacy": "protected",
+              "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": "Popover | null"
+                  "text": ""
                 }
               },
+              "inheritedFrom": {
+                "name": "FocusTrapMixin",
+                "module": "utils/mixins/FocusTrapMixin.js"
+              }
+            },
+            {
+              "kind": "method",
+              "name": "hasHiddenStyle",
+              "privacy": "private",
               "parameters": [
                 {
                   "name": "element",
                   "type": {
-                    "text": "Element"
+                    "text": "HTMLElement"
                   },
-                  "description": "The element to start searching from."
+                  "description": "The element to check."
                 }
               ],
-              "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": "Checks if the element has inline styles that make it hidden.",
+              "return": {
+                "type": {
+                  "text": ""
+                }
+              },
               "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": "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": ""
+                }
+              },
               "inheritedFrom": {
-                "name": "Popover",
-                "module": "components/popover/popover.component.js"
+                "name": "FocusTrapMixin",
+                "module": "utils/mixins/FocusTrapMixin.js"
               }
-            }
-          ],
-          "events": [
+            },
             {
-              "description": "(React: onShown) This event is dispatched when the coachmark is shown",
-              "name": "shown",
-              "reactName": "onShown",
+              "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": ""
+                }
+              },
               "inheritedFrom": {
-                "name": "Popover",
-                "module": "src/components/popover/popover.component.ts"
+                "name": "FocusTrapMixin",
+                "module": "utils/mixins/FocusTrapMixin.js"
               }
             },
             {
-              "description": "(React: onHidden) This event is dispatched when the coachmark is hidden",
-              "name": "hidden",
-              "reactName": "onHidden",
+              "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": ""
+                }
+              },
               "inheritedFrom": {
-                "name": "Popover",
-                "module": "src/components/popover/popover.component.ts"
+                "name": "FocusTrapMixin",
+                "module": "utils/mixins/FocusTrapMixin.js"
               }
             },
             {
-              "description": "(React: onCreated) This event is dispatched when the coachmark is created (added to the DOM)",
-              "name": "created",
-              "reactName": "onCreated",
+              "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": ""
+                }
+              },
               "inheritedFrom": {
-                "name": "Popover",
-                "module": "src/components/popover/popover.component.ts"
+                "name": "FocusTrapMixin",
+                "module": "utils/mixins/FocusTrapMixin.js"
               }
             },
             {
-              "description": "(React: onDestroyed) This event is dispatched when the coachmark is destroyed (removed from the DOM)",
-              "name": "destroyed",
-              "reactName": "onDestroyed",
+              "kind": "method",
+              "name": "isInteractiveElement",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": ""
+                }
+              },
+              "parameters": [
+                {
+                  "name": "element",
+                  "type": {
+                    "text": "HTMLElement"
+                  },
+                  "description": "The element to check."
+                }
+              ],
+              "description": "Checks if the element is interactive.",
               "inheritedFrom": {
-                "name": "Popover",
-                "module": "src/components/popover/popover.component.ts"
+                "name": "FocusTrapMixin",
+                "module": "utils/mixins/FocusTrapMixin.js"
               }
-            }
-          ],
-          "attributes": [
+            },
             {
-              "name": "trigger",
-              "type": {
-                "text": "PopoverTrigger"
+              "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": ""
+                }
               },
-              "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"
+                "name": "FocusTrapMixin",
+                "module": "utils/mixins/FocusTrapMixin.js"
               }
             },
             {
-              "name": "show-arrow",
-              "type": {
-                "text": "boolean"
+              "kind": "method",
+              "name": "findFocusable",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": ""
+                }
               },
-              "description": "The arrow visibility of the Coachmark.",
-              "default": "true",
-              "fieldName": "showArrow",
+              "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.",
               "inheritedFrom": {
-                "name": "Popover",
-                "module": "src/components/popover/popover.component.ts"
+                "name": "FocusTrapMixin",
+                "module": "utils/mixins/FocusTrapMixin.js"
               }
             },
             {
-              "name": "close-button",
-              "type": {
-                "text": "boolean"
-              },
-              "description": "The close button visibility of the Coachmark.",
-              "default": "true",
-              "fieldName": "closeButton",
+              "kind": "method",
+              "name": "setFocusableElements",
+              "privacy": "private",
+              "description": "Updates the list of focusable elements within the component's shadow root.",
               "inheritedFrom": {
-                "name": "Popover",
-                "module": "src/components/popover/popover.component.ts"
+                "name": "FocusTrapMixin",
+                "module": "utils/mixins/FocusTrapMixin.js"
               }
             },
             {
-              "name": "disable-aria-expanded",
-              "type": {
-                "text": "boolean"
-              },
-              "description": "Disable aria-expanded attribute on trigger element.",
-              "default": "true",
-              "fieldName": "disableAriaExpanded",
+              "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": "src/components/popover/popover.component.ts"
+                "name": "FocusTrapMixin",
+                "module": "utils/mixins/FocusTrapMixin.js"
               }
             },
             {
-              "name": "should-focus-trap-wrap",
-              "type": {
-                "text": "boolean"
+              "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": ""
+                }
               },
-              "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"
+                "module": "utils/mixins/FocusTrapMixin.js"
               }
             },
             {
-              "name": "id",
-              "type": {
-                "text": "string"
+              "kind": "method",
+              "name": "getDeepActiveElement",
+              "privacy": "private",
+              "description": "Returns the deepest active element in the shadow DOM.",
+              "return": {
+                "type": {
+                  "text": ""
+                }
               },
-              "default": "''",
-              "description": "The unique ID of the popover.",
-              "fieldName": "id",
               "inheritedFrom": {
-                "name": "Popover",
-                "module": "src/components/popover/popover.component.ts"
+                "name": "FocusTrapMixin",
+                "module": "utils/mixins/FocusTrapMixin.js"
               }
             },
             {
-              "name": "triggerID",
-              "type": {
-                "text": "string"
+              "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": ""
+                }
               },
-              "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"
+                "name": "FocusTrapMixin",
+                "module": "utils/mixins/FocusTrapMixin.js"
               }
             },
             {
-              "name": "placement",
-              "type": {
-                "text": "PopoverPlacement"
+              "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": ""
+                }
               },
-              "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"
+                "name": "FocusTrapMixin",
+                "module": "utils/mixins/FocusTrapMixin.js"
               }
             },
             {
-              "name": "color",
-              "type": {
-                "text": "PopoverColor"
-              },
-              "description": "Color of the popover\n- **tonal**\n- **contrast**",
-              "default": "tonal",
-              "fieldName": "color",
+              "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.",
               "inheritedFrom": {
-                "name": "Popover",
-                "module": "src/components/popover/popover.component.ts"
+                "name": "FocusTrapMixin",
+                "module": "utils/mixins/FocusTrapMixin.js"
               }
             },
             {
-              "name": "visible",
-              "type": {
-                "text": "boolean"
-              },
-              "description": "The visibility of the popover.",
-              "default": "false",
-              "fieldName": "visible",
+              "kind": "method",
+              "name": "handleTabKeydown",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "event",
+                  "type": {
+                    "text": "KeyboardEvent"
+                  },
+                  "description": "The keyboard event."
+                }
+              ],
+              "description": "Traps focus within the container.",
               "inheritedFrom": {
-                "name": "Popover",
-                "module": "src/components/popover/popover.component.ts"
+                "name": "FocusTrapMixin",
+                "module": "utils/mixins/FocusTrapMixin.js"
               }
             },
             {
-              "name": "offset",
-              "type": {
-                "text": "number"
+              "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": ""
+                }
               },
-              "description": "The offset of the popover.",
-              "default": "4",
-              "fieldName": "offset",
               "inheritedFrom": {
-                "name": "Popover",
-                "module": "src/components/popover/popover.component.ts"
+                "name": "CardAndDialogFooterMixin",
+                "module": "utils/mixins/CardAndDialogFooterMixin.js"
               }
+            }
+          ],
+          "events": [
+            {
+              "description": "(React: onShown) Dispatched when the dialog is shown",
+              "name": "shown",
+              "reactName": "onShown"
             },
             {
-              "name": "boundary",
-              "type": {
-                "text": "'clippingAncestors' | string"
-              },
-              "description": "This describes the clipping element(s) or area that overflow will be checked relative to.\nThe default is 'clippingAncestors', which are the overflow ancestors which will cause the\nelement to be clipped.\n\nPossible values:\n - 'clippingAncestors'\n - any css selector",
-              "default": "'clippingAncestors'",
-              "fieldName": "boundary",
-              "inheritedFrom": {
-                "name": "Popover",
-                "module": "src/components/popover/popover.component.ts"
-              }
+              "description": "(React: onHidden) Dispatched when the dialog is hidden",
+              "name": "hidden",
+              "reactName": "onHidden"
             },
             {
-              "name": "boundary-root",
-              "type": {
-                "text": "'viewport' | 'document'"
-              },
-              "description": "This describes the root boundary that the element will be checked for overflow relative to.\nThe default is 'viewport', which is the area of the page the user can see on the screen.\n\nThe other string option is 'document', which is the entire page outside the viewport.",
-              "default": "'viewport'",
-              "fieldName": "boundaryRoot",
-              "inheritedFrom": {
-                "name": "Popover",
-                "module": "src/components/popover/popover.component.ts"
-              }
+              "description": "(React: onCreated) Dispatched when the dialog is created (added to the DOM)",
+              "name": "created",
+              "reactName": "onCreated"
             },
             {
-              "name": "boundary-padding",
-              "type": {
-                "text": "undefined | number"
-              },
-              "description": "Virtual padding around the boundary to check for overflow.\nSo the popover will not be placed on top of the edge of the boundary.\n\nDefault works well for most cases, but you can set this to customise it when necessary.",
-              "default": "undefined",
-              "fieldName": "boundaryPadding",
-              "inheritedFrom": {
-                "name": "Popover",
-                "module": "src/components/popover/popover.component.ts"
-              }
+              "description": "(React: onDestroyed) Dispatched when the dialog is destroyed (removed from the DOM)",
+              "name": "destroyed",
+              "reactName": "onDestroyed"
             },
             {
-              "name": "focus-trap",
+              "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": "id",
               "type": {
-                "text": "boolean"
+                "text": "string"
               },
-              "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": "Popover",
-                "module": "src/components/popover/popover.component.ts"
-              }
+              "default": "''",
+              "description": "The unique ID of the dialog",
+              "fieldName": "id"
             },
             {
-              "name": "prevent-scroll",
+              "name": "triggerId",
               "type": {
-                "text": "boolean"
+                "text": "string | undefined"
               },
-              "description": "Prevent outside scrolling when popover is shown.",
-              "default": "false",
-              "fieldName": "preventScroll",
-              "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": "interactive",
+              "name": "visible",
               "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!",
+              "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": "interactive",
-              "inheritedFrom": {
-                "name": "Popover",
-                "module": "src/components/popover/popover.component.ts"
-              }
+              "fieldName": "visible"
             },
             {
-              "name": "delay",
+              "name": "z-index",
               "type": {
-                "text": "string"
+                "text": "number"
               },
-              "description": "The delay of the show/hide popover.",
-              "default": "0,0",
-              "fieldName": "delay",
-              "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": "hide-on-escape",
+              "name": "size",
               "type": {
-                "text": "boolean"
+                "text": "DialogSize"
               },
-              "description": "Hide popover on escape key press.",
-              "default": "false",
-              "fieldName": "hideOnEscape",
-              "inheritedFrom": {
-                "name": "Popover",
-                "module": "src/components/popover/popover.component.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": "propagate-event-on-escape",
+              "name": "variant",
               "type": {
-                "text": "boolean"
+                "text": "DialogVariant"
               },
-              "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": "The variant of the dialog, can be 'default' or 'promotional'",
+              "default": "default",
+              "fieldName": "variant"
             },
             {
-              "name": "hide-on-blur",
+              "name": "close-button-aria-label",
               "type": {
-                "text": "boolean"
+                "text": "string | null"
               },
-              "description": "Hide popover on blur.",
-              "default": "false",
-              "fieldName": "hideOnBlur",
-              "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": "hide-on-outside-click",
+              "name": "aria-label",
               "type": {
-                "text": "boolean"
+                "text": "string | null"
               },
-              "description": "Hide on outside click of the popover.",
-              "default": "false",
-              "fieldName": "hideOnOutsideClick",
-              "inheritedFrom": {
-                "name": "Popover",
-                "module": "src/components/popover/popover.component.ts"
-              }
+              "default": "null",
+              "description": "Defines a string value for the aria-label attribute when header is not used",
+              "fieldName": "ariaLabel"
             },
             {
-              "name": "focus-back-to-trigger",
+              "name": "aria-labelledby",
               "type": {
-                "text": "boolean"
+                "text": "string | null"
               },
-              "description": "The focus back to trigger after the popover hide.",
-              "default": "false",
-              "fieldName": "focusBackToTrigger",
-              "inheritedFrom": {
-                "name": "Popover",
-                "module": "src/components/popover/popover.component.ts"
-              }
+              "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": "backdrop",
+              "name": "aria-describedby",
               "type": {
-                "text": "boolean"
+                "text": "string | null"
               },
-              "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"
-              }
+              "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": "flip",
+              "name": "aria-description",
               "type": {
-                "text": "boolean"
+                "text": "string | null"
               },
-              "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"
-              }
+              "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": "size",
+              "name": "header-text",
               "type": {
-                "text": "boolean"
+                "text": "string | undefined"
               },
-              "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"
-              }
+              "description": "Defines a string value to display as the title of the dialog",
+              "fieldName": "headerText"
             },
             {
-              "name": "z-index",
+              "name": "description-text",
               "type": {
-                "text": "number"
+                "text": "string | undefined"
               },
-              "description": "The z-index of the popover.",
-              "default": "1000",
-              "fieldName": "zIndex",
-              "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": "append-to",
+              "name": "header-tag-name",
               "type": {
-                "text": "string | undefined"
+                "text": "string"
               },
-              "description": "Element ID that the popover append to.",
-              "default": "''",
-              "fieldName": "appendTo",
-              "inheritedFrom": {
-                "name": "Popover",
-                "module": "src/components/popover/popover.component.ts"
-              }
+              "description": "The html tag to be used for the header text",
+              "fieldName": "headerTagName"
             },
             {
-              "name": "close-button-aria-label",
+              "name": "description-tag-name",
               "type": {
-                "text": "string | null"
+                "text": "string"
               },
-              "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": "The html tag to be used for the below-header description text",
+              "fieldName": "descriptionTagName"
             },
             {
               "name": "role",
               "type": {
-                "text": "HTMLElement['role']"
+                "text": "DialogRole"
               },
-              "description": "Role of the popover",
+              "description": "Role of the dialog",
               "default": "dialog",
-              "fieldName": "role",
-              "inheritedFrom": {
-                "name": "Popover",
-                "module": "src/components/popover/popover.component.ts"
-              }
+              "fieldName": "role"
             },
             {
-              "name": "aria-labelledby",
+              "name": "disable-aria-haspopup",
               "type": {
-                "text": "string | null"
+                "text": "boolean"
               },
-              "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": "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"
             },
             {
-              "name": "aria-describedby",
+              "name": "focus-trap",
               "type": {
-                "text": "string | null"
+                "text": "boolean"
               },
-              "default": "null",
-              "description": "aria-describedby of the popover.",
-              "fieldName": "ariaDescribedby",
-              "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": "disable-aria-haspopup",
+              "name": "should-focus-trap-wrap",
               "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",
+              "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": "FocusTrapMixin",
+              "module": "/src/utils/mixins/FocusTrapMixin"
+            },
+            {
+              "name": "CardAndDialogFooterMixin",
+              "module": "/src/utils/mixins/CardAndDialogFooterMixin"
+            }
+          ],
           "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-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
         }
       ],
@@ -10645,8 +10645,8 @@
           "kind": "js",
           "name": "default",
           "declaration": {
-            "name": "Coachmark",
-            "module": "components/coachmark/coachmark.component.js"
+            "name": "Dialog",
+            "module": "components/dialog/dialog.component.js"
           }
         }
       ]
@@ -21936,123 +21936,61 @@
               "fieldName": "dataAriaLabel",
               "inheritedFrom": {
                 "name": "DataAriaLabelMixin",
-                "module": "src/utils/mixins/DataAriaLabelMixin.ts"
-              }
-            },
-            {
-              "name": "disabled",
-              "type": {
-                "text": "boolean | undefined"
-              },
-              "description": "Indicates whether the component is disabled.\nWhen the component is disabled for user interaction; it is not focusable or clickable.",
-              "default": "undefined",
-              "fieldName": "disabled",
-              "inheritedFrom": {
-                "name": "DisabledMixin",
-                "module": "src/utils/mixins/DisabledMixin.ts"
-              }
-            }
-          ],
-          "mixins": [
-            {
-              "name": "DataAriaLabelMixin",
-              "module": "/src/utils/mixins/DataAriaLabelMixin"
-            },
-            {
-              "name": "DisabledMixin",
-              "module": "/src/utils/mixins/DisabledMixin"
-            }
-          ],
-          "superclass": {
-            "name": "Component",
-            "module": "/src/models"
-          },
-          "tagName": "mdc-optgroup",
-          "jsDoc": "/**\n * optgroup component, which creates a grouping of mdc-option within a listbox element.\n *\n * @dependency mdc-text\n *\n * @tagname mdc-optgroup\n *\n * @slot default - This is a default slot for mdc-option elements.\n *\n * @cssproperty --mdc-optgroup-disabled-color - Allows customization of the disabled option color.\n */",
-          "customElement": true
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "default",
-          "declaration": {
-            "name": "OptGroup",
-            "module": "components/optgroup/optgroup.component.js"
-          }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "components/option/option.component.js",
-      "declarations": [
-        {
-          "kind": "class",
-          "description": "option component, which is used as a list item in a select component.<br/>\nWe can pass an icon which will be displayed in leading position of the option label text.\nWe can pass a tooltip which will be displayed on hover of the option label text.\nThe tooltip will be helpful for a long label text which is truncated with ellipsis.",
-          "name": "Option",
-          "slots": [
-            {
-              "description": "This is a default/unnamed slot",
-              "name": "default"
-            },
-            {
-              "description": "slot for list item controls to appear of leading end.",
-              "name": "leading-controls",
-              "inheritedFrom": {
-                "name": "ListItem",
-                "module": "src/components/listitem/listitem.component.ts"
-              }
-            },
-            {
-              "description": "slot for list item primary label.",
-              "name": "leading-text-primary-label",
-              "inheritedFrom": {
-                "name": "ListItem",
-                "module": "src/components/listitem/listitem.component.ts"
-              }
-            },
-            {
-              "description": "slot for list item secondary label.",
-              "name": "leading-text-secondary-label",
-              "inheritedFrom": {
-                "name": "ListItem",
-                "module": "src/components/listitem/listitem.component.ts"
-              }
-            },
-            {
-              "description": "slot for list item tertiary label.",
-              "name": "leading-text-tertiary-label",
-              "inheritedFrom": {
-                "name": "ListItem",
-                "module": "src/components/listitem/listitem.component.ts"
-              }
-            },
-            {
-              "description": "slot for list item side header text.",
-              "name": "trailing-text-side-header",
-              "inheritedFrom": {
-                "name": "ListItem",
-                "module": "src/components/listitem/listitem.component.ts"
+                "module": "src/utils/mixins/DataAriaLabelMixin.ts"
               }
             },
             {
-              "description": "slot for list item subline text.",
-              "name": "trailing-text-subline",
+              "name": "disabled",
+              "type": {
+                "text": "boolean | undefined"
+              },
+              "description": "Indicates whether the component is disabled.\nWhen the component is disabled for user interaction; it is not focusable or clickable.",
+              "default": "undefined",
+              "fieldName": "disabled",
               "inheritedFrom": {
-                "name": "ListItem",
-                "module": "src/components/listitem/listitem.component.ts"
+                "name": "DisabledMixin",
+                "module": "src/utils/mixins/DisabledMixin.ts"
               }
+            }
+          ],
+          "mixins": [
+            {
+              "name": "DataAriaLabelMixin",
+              "module": "/src/utils/mixins/DataAriaLabelMixin"
             },
             {
-              "description": "slot for list item controls to appear of trailing end.",
-              "name": "trailing-controls",
-              "inheritedFrom": {
-                "name": "ListItem",
-                "module": "src/components/listitem/listitem.component.ts"
-              }
+              "name": "DisabledMixin",
+              "module": "/src/utils/mixins/DisabledMixin"
             }
           ],
+          "superclass": {
+            "name": "Component",
+            "module": "/src/models"
+          },
+          "tagName": "mdc-optgroup",
+          "jsDoc": "/**\n * optgroup component, which creates a grouping of mdc-option within a listbox element.\n *\n * @dependency mdc-text\n *\n * @tagname mdc-optgroup\n *\n * @slot default - This is a default slot for mdc-option elements.\n *\n * @cssproperty --mdc-optgroup-disabled-color - Allows customization of the disabled option color.\n */",
+          "customElement": true
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "default",
+          "declaration": {
+            "name": "OptGroup",
+            "module": "components/optgroup/optgroup.component.js"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "components/option/option.component.js",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "Option component, which is used within Selectlistbox within Select component.\n\nThe label and secondary label of the option can be set using the `label` and `secondaryLabel` properties respectively.\nThe `label` is the primary text displayed in the option, while the `secondaryLabel` is the secondary text displayed below the primary label.\n\nThe `selected` property is used to indicate whether the option is selected or not.\nWhen the `selected` property is set to true, a checkmark icon will be displayed\non the right side of the option to indicate that it is selected.\n\nThe `prefixIcon` property can be used to display an icon on the left side of the option label.\nWe can show a tooltip by setting `tooltip-text` attribute. This will be displayed on hover or focus of the option.\nThe tooltip will be helpful for a long label text which is truncated with ellipsis.",
+          "name": "Option",
           "members": [
             {
               "kind": "field",
@@ -22086,12 +22024,6 @@
               "attribute": "aria-label",
               "reflects": true
             },
-            {
-              "kind": "method",
-              "name": "handleDefaultSlotChange",
-              "privacy": "private",
-              "description": "Listens to changes in the default slot and updates the label of the option accordingly.\nThis is used to set the label of the option when it is not explicitly set.\nIt is called internally when the slot is changed."
-            },
             {
               "kind": "field",
               "name": "name",
@@ -22837,8 +22769,66 @@
             "module": "/src/components/listitem/listitem.component"
           },
           "tagName": "mdc-option",
-          "jsDoc": "/**\n * option component, which is used as a list item in a select component.<br/>\n * We can pass an icon which will be displayed in leading position of the option label text.\n * We can pass a tooltip which will be displayed on hover of the option label text.\n * The tooltip will be helpful for a long label text which is truncated with ellipsis.\n *\n * @dependency mdc-icon\n * @dependency mdc-text\n * @dependency mdc-tooltip\n *\n * @tagname mdc-option\n *\n * @slot default - This is a default/unnamed slot\n *\n * @event click - (React: onClick) This event is dispatched when the option is clicked.\n * @event keydown - (React: onKeyDown) This event is dispatched when a key is pressed down on the option.\n * @event keyup - (React: onKeyUp) This event is dispatched when a key is released on the option.\n * @event focus - (React: onFocus) This event is dispatched when the option receives focus.\n */",
+          "jsDoc": "/**\n * Option component, which is used within Selectlistbox within Select component.\n *\n * The label and secondary label of the option can be set using the `label` and `secondaryLabel` properties respectively.\n * The `label` is the primary text displayed in the option, while the `secondaryLabel` is the secondary text displayed below the primary label.\n *\n * The `selected` property is used to indicate whether the option is selected or not.\n * When the `selected` property is set to true, a checkmark icon will be displayed\n * on the right side of the option to indicate that it is selected.\n *\n * The `prefixIcon` property can be used to display an icon on the left side of the option label.\n * We can show a tooltip by setting `tooltip-text` attribute. This will be displayed on hover or focus of the option.\n * The tooltip will be helpful for a long label text which is truncated with ellipsis.\n *\n * @dependency mdc-icon\n * @dependency mdc-text\n * @dependency mdc-tooltip\n *\n * @tagname mdc-option\n *\n * @event click - (React: onClick) This event is dispatched when the option is clicked.\n * @event keydown - (React: onKeyDown) This event is dispatched when a key is pressed down on the option.\n * @event keyup - (React: onKeyUp) This event is dispatched when a key is released on the option.\n * @event focus - (React: onFocus) This event is dispatched when the option receives focus.\n */",
           "customElement": true,
+          "slots": [
+            {
+              "description": "slot for list item controls to appear of leading end.",
+              "name": "leading-controls",
+              "inheritedFrom": {
+                "name": "ListItem",
+                "module": "src/components/listitem/listitem.component.ts"
+              }
+            },
+            {
+              "description": "slot for list item primary label.",
+              "name": "leading-text-primary-label",
+              "inheritedFrom": {
+                "name": "ListItem",
+                "module": "src/components/listitem/listitem.component.ts"
+              }
+            },
+            {
+              "description": "slot for list item secondary label.",
+              "name": "leading-text-secondary-label",
+              "inheritedFrom": {
+                "name": "ListItem",
+                "module": "src/components/listitem/listitem.component.ts"
+              }
+            },
+            {
+              "description": "slot for list item tertiary label.",
+              "name": "leading-text-tertiary-label",
+              "inheritedFrom": {
+                "name": "ListItem",
+                "module": "src/components/listitem/listitem.component.ts"
+              }
+            },
+            {
+              "description": "slot for list item side header text.",
+              "name": "trailing-text-side-header",
+              "inheritedFrom": {
+                "name": "ListItem",
+                "module": "src/components/listitem/listitem.component.ts"
+              }
+            },
+            {
+              "description": "slot for list item subline text.",
+              "name": "trailing-text-subline",
+              "inheritedFrom": {
+                "name": "ListItem",
+                "module": "src/components/listitem/listitem.component.ts"
+              }
+            },
+            {
+              "description": "slot for list item controls to appear of trailing end.",
+              "name": "trailing-controls",
+              "inheritedFrom": {
+                "name": "ListItem",
+                "module": "src/components/listitem/listitem.component.ts"
+              }
+            }
+          ],
           "cssProperties": [
             {
               "description": "Allows customization of the default background color.",
@@ -29555,11 +29545,11 @@
       "declarations": [
         {
           "kind": "class",
-          "description": "The mdc-select component is a dropdown selection control that allows users to pick an option from a predefined list.\nIt is designed to work with `mdc-option` for individual options and `mdc-optgroup` for grouping related options.\nThe component ensures accessibility and usability while handling various use cases,\nincluding long text truncation with tooltip support.\n\nTo set a default option, use the `selected` attribute on the `mdc-option` element.\n\n**Note:** Make sure to add `mdc-selectlistbox` as a child of `mdc-select` and wrap options/optgroup in it to ensure proper accessibility functionality. Read more about it in SelectListBox documentation.",
+          "description": "The mdc-select component is a dropdown selection control that allows users to pick an option from a predefined list.\nIt is designed to work with `mdc-option` for individual options and `mdc-optgroup` for grouping related options.\nThe component ensures accessibility and usability while handling various use cases,\nincluding long text truncation with tooltip support.\n\nEvery mdc-option should have a `value` attribute set to ensure proper form submission.\n\nTo set a default option, use the `selected` attribute on the `mdc-option` element.\n\n**Note:** Make sure to add `mdc-selectlistbox` as a child of `mdc-select` and wrap options/optgroup in it to ensure proper accessibility functionality. Read more about it in SelectListBox documentation.",
           "name": "Select",
           "slots": [
             {
-              "description": "This is a default/unnamed slot for options and/or option group.",
+              "description": "This is a default/unnamed slot for Selectlistbox including options and/or option group.",
               "name": "default"
             }
           ],
@@ -29615,36 +29605,49 @@
             },
             {
               "kind": "method",
-              "name": "modifyListBoxWrapper",
+              "name": "getAllValidOptions",
               "privacy": "private",
-              "description": "Modifies the listbox wrapper to ensure it has the correct attributes\nand IDs for accessibility.\n\nOnce [ariaOwnsElements](https://developer.mozilla.org/en-US/docs/Web/API/ElementInternals/ariaOwnsElements) is supported in browsers,\nthis an be removed and mdc-option can be used directly in the select component with a listbox in a different\nshadow root and aria-owns attribute to connect them."
+              "return": {
+                "type": {
+                  "text": "Array<Option>"
+                }
+              }
             },
             {
               "kind": "method",
-              "name": "getAllValidOptions",
+              "name": "getFirstValidOption",
               "privacy": "private",
-              "description": "A helper function which returns a flattened array of all valid options from within the slotted listbox.\nIt takes care of the edge cases where the option is either a direct child or a\nchild of an option group."
+              "return": {
+                "type": {
+                  "text": "Option | null"
+                }
+              }
             },
             {
               "kind": "method",
-              "name": "updateTabIndexForAllOptions",
+              "name": "getLastValidOption",
               "privacy": "private",
               "return": {
                 "type": {
-                  "text": "void"
+                  "text": "Option | null"
                 }
-              },
-              "parameters": [
-                {
-                  "name": "selectedOption",
-                  "optional": true,
-                  "type": {
-                    "text": "EventTarget | null"
-                  },
-                  "description": "The option which should be selected."
+              }
+            },
+            {
+              "kind": "method",
+              "name": "getFirstSelectedOption",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "Option | null"
                 }
-              ],
-              "description": "Updates the tabindex and selected attribute of the options.\nIf selectedOption is provided, it will be set as the selected option.\nOtherwise, it will set the first option as the selected option."
+              }
+            },
+            {
+              "kind": "method",
+              "name": "modifyListBoxWrapper",
+              "privacy": "private",
+              "description": "Modifies the listbox wrapper to ensure it has the correct attributes\nand IDs for accessibility.\n\nOnce [ariaOwnsElements](https://developer.mozilla.org/en-US/docs/Web/API/ElementInternals/ariaOwnsElements) is supported in browsers,\nthis an be removed and mdc-option can be used directly in the select component with a listbox in a different\nshadow root and aria-owns attribute to connect them."
             },
             {
               "kind": "method",
@@ -29664,11 +29667,11 @@
                   "description": "The event which triggered this function."
                 }
               ],
-              "description": "A private method which is called when an option is clicked.\nIt is used to update the tabindex and selected attribute of the options."
+              "description": "A private method which is called when an option is clicked.\nIt sets the selected option, removes selected from other options, updates the tabindex for all options,\ncloses the popover, and fires the change and input events."
             },
             {
               "kind": "method",
-              "name": "setSelectedValue",
+              "name": "setSelectedOption",
               "privacy": "private",
               "return": {
                 "type": {
@@ -29679,16 +29682,16 @@
                 {
                   "name": "option",
                   "type": {
-                    "text": "Element"
+                    "text": "Option | null"
                   },
-                  "description": "The option element from which to set the selected value."
+                  "description": "The option element in DOM which gets selected."
                 }
               ],
-              "description": "Sets the selected value based on the provided option element.\nIt retrieves the 'label' attribute of the option, if present,\notherwise it falls back to the option's text content."
+              "description": "Sets the selected option in the component state and updates the input element's value.\nThis method ensures that only the selected option is marked as selected in the DOM,\nand updates the tabindex for all options accordingly.\nIt also updates the validity of the input element based on the selected option.\nThis method is called when an option is selected."
             },
             {
               "kind": "method",
-              "name": "dispatchChange",
+              "name": "updateTabIndexForAllOptions",
               "privacy": "private",
               "return": {
                 "type": {
@@ -29697,16 +29700,19 @@
               },
               "parameters": [
                 {
-                  "name": "value",
+                  "name": "option",
+                  "optional": true,
                   "type": {
-                    "text": "string"
-                  }
+                    "text": "Option | null"
+                  },
+                  "description": "The option which tabIndex should be set to 0."
                 }
-              ]
+              ],
+              "description": "Updates the tabindex of all options.\nSets the tabindex of the selected option to '0' and others to '-1'."
             },
             {
               "kind": "method",
-              "name": "dispatchInput",
+              "name": "updateSelectedInChildOptions",
               "privacy": "private",
               "return": {
                 "type": {
@@ -29715,36 +29721,29 @@
               },
               "parameters": [
                 {
-                  "name": "value",
+                  "name": "selectedOption",
                   "type": {
-                    "text": "string"
-                  }
+                    "text": "Option | null"
+                  },
+                  "description": "The option which gets selected"
                 }
-              ]
+              ],
+              "description": "Sets selected attribute on the selected option and removes it from all options"
             },
             {
               "kind": "method",
-              "name": "handlePopoverOnOpen",
+              "name": "fireEvents",
               "privacy": "private",
               "return": {
                 "type": {
                   "text": "void"
                 }
               },
-              "parameters": [
-                {
-                  "name": "event",
-                  "type": {
-                    "text": "KeyboardEvent"
-                  },
-                  "description": "The keyboard event."
-                }
-              ],
-              "description": "Handles the keydown event on the select element when the popover is open.\nThe options are as follows:\n- SPACE or ENTER: Selects the currently active option and closes the popover.\n- HOME: Sets focus and tabindex on the first option.\n- END: Sets focus and tabindex on the last option.\n- ARROW_DOWN, ARROW_UP, PAGE_DOWN, PAGE_UP: Handles navigation between options."
+              "description": "A private method which is called to fire the change and input events.\nIt dispatches the input and change events with the selected option's value and label."
             },
             {
               "kind": "method",
-              "name": "handleClickCombobox",
+              "name": "dispatchChange",
               "privacy": "private",
               "return": {
                 "type": {
@@ -29753,16 +29752,16 @@
               },
               "parameters": [
                 {
-                  "name": "event",
+                  "name": "option",
                   "type": {
-                    "text": "MouseEvent"
+                    "text": "Option"
                   }
                 }
               ]
             },
             {
               "kind": "method",
-              "name": "handleKeydownCombobox",
+              "name": "dispatchInput",
               "privacy": "private",
               "return": {
                 "type": {
@@ -29771,18 +29770,16 @@
               },
               "parameters": [
                 {
-                  "name": "event",
+                  "name": "option",
                   "type": {
-                    "text": "KeyboardEvent"
-                  },
-                  "description": "The keyboard event."
+                    "text": "Option"
+                  }
                 }
-              ],
-              "description": "Handles the keydown event on the select element when the popover is closed.\nThe options are as follows:\n- ARROW_DOWN, ARROW_UP, SPACE: Opens the popover and prevents the default scrolling behavior.\n- ENTER: Opens the popover, prevents default scrolling, and submits the form if the popover is closed.\n- HOME: Opens the popover and sets focus and tabindex on the first option.\n- END: Opens the popover and sets focus and tabindex on the last option."
+              ]
             },
             {
               "kind": "method",
-              "name": "handleOptionsNavigation",
+              "name": "handleClickCombobox",
               "privacy": "private",
               "return": {
                 "type": {
@@ -29793,50 +29790,36 @@
                 {
                   "name": "event",
                   "type": {
-                    "text": "KeyboardEvent"
+                    "text": "MouseEvent"
                   },
-                  "description": "The keyboard event that triggered the navigation."
+                  "description": "The mouse event which triggered this function."
                 }
               ],
-              "description": "Handles the navigation of options when the user presses\nArrowUp, ArrowDown, PageUp, or PageDown keys."
+              "description": "Handles the click event on the visual combobox.\nIf the select is disabled, soft-disabled or readonly, it does nothing.\nIf the popover is already open, it closes it.\nIf it is closed, it opens it."
             },
             {
               "kind": "method",
-              "name": "getNewIndexBasedOnKey",
+              "name": "handleKeydownCombobox",
               "privacy": "private",
               "return": {
                 "type": {
-                  "text": ""
+                  "text": "void"
                 }
               },
               "parameters": [
                 {
-                  "name": "key",
-                  "type": {
-                    "text": "string"
-                  },
-                  "description": "The navigation key that was pressed."
-                },
-                {
-                  "name": "currentIndex",
-                  "type": {
-                    "text": "number"
-                  },
-                  "description": "The current index of the focused option."
-                },
-                {
-                  "name": "optionsLength",
+                  "name": "event",
                   "type": {
-                    "text": "number"
+                    "text": "KeyboardEvent"
                   },
-                  "description": "The total number of options."
+                  "description": "The keyboard event."
                 }
               ],
-              "description": "Calculates the new index based on the pressed navigation key.\nSupports ArrowUp, ArrowDown, PageUp, and PageDown keys for navigating options.\n- ArrowDown: Moves focus to the next option, if available.\n- ArrowUp: Moves focus to the previous option, if available.\n- PageDown: Moves focus 10 options down or to the last option.\n- PageUp: Moves focus 10 options up or to the first option."
+              "description": "Handles the keydown event on the select element when the popover is closed.\nThe options are as follows:\n- ARROW_DOWN, ARROW_UP, SPACE: Opens the popover and prevents the default scrolling behavior.\n- ENTER: Opens the popover, prevents default scrolling, and submits the form if the popover is closed.\n- HOME: Opens the popover and sets focus and tabindex on the first option.\n- END: Opens the popover and sets focus and tabindex on the last option."
             },
             {
               "kind": "method",
-              "name": "setFocusAndTabIndex",
+              "name": "handlePopoverKeydown",
               "privacy": "private",
               "return": {
                 "type": {
@@ -29845,42 +29828,14 @@
               },
               "parameters": [
                 {
-                  "name": "newIndex",
+                  "name": "event",
                   "type": {
-                    "text": "number"
-                  }
-                }
-              ]
-            },
-            {
-              "kind": "method",
-              "name": "openPopover",
-              "privacy": "private",
-              "return": {
-                "type": {
-                  "text": "void"
-                }
-              }
-            },
-            {
-              "kind": "method",
-              "name": "closePopover",
-              "privacy": "private",
-              "return": {
-                "type": {
-                  "text": "void"
-                }
-              }
-            },
-            {
-              "kind": "method",
-              "name": "handleOnChange",
-              "privacy": "private",
-              "return": {
-                "type": {
-                  "text": "void"
+                    "text": "KeyboardEvent"
+                  },
+                  "description": "The keyboard event."
                 }
-              }
+              ],
+              "description": "Handles the keydown event on the select element when the popover is open.\nThe options are as follows:\n- HOME: Sets focus and tabindex on the first option.\n- END: Sets focus and tabindex on the last option.\n- ARROW_DOWN, ARROW_UP, PAGE_DOWN, PAGE_UP: Handles navigation between options."
             },
             {
               "kind": "field",
@@ -30458,7 +30413,7 @@
             "module": "/src/components/formfieldwrapper/formfieldwrapper.component"
           },
           "tagName": "mdc-select",
-          "jsDoc": "/**\n * The mdc-select component is a dropdown selection control that allows users to pick an option from a predefined list.\n * It is designed to work with `mdc-option` for individual options and `mdc-optgroup` for grouping related options.\n * The component ensures accessibility and usability while handling various use cases,\n * including long text truncation with tooltip support.\n *\n * To set a default option, use the `selected` attribute on the `mdc-option` element.\n *\n * **Note:** Make sure to add `mdc-selectlistbox` as a child of `mdc-select` and wrap options/optgroup in it to ensure proper accessibility functionality. Read more about it in SelectListBox documentation.\n *\n * @dependency mdc-button\n * @dependency mdc-icon\n * @dependency mdc-popover\n * @dependency mdc-text\n * @dependency mdc-toggletip\n *\n * @tagname mdc-select\n *\n * @slot default - This is a default/unnamed slot for options and/or option group.\n *\n * @event click - (React: onClick) This event is dispatched when the select is clicked.\n * @event change - (React: onChange) This event is dispatched when the select is changed.\n * @event input - (React: onInput) This event is dispatched when the select is changed.\n * @event keydown - (React: onKeyDown) This event is dispatched when a key is pressed down on the select.\n * @event focus - (React: onFocus) This event is dispatched when the select receives focus.\n */",
+          "jsDoc": "/**\n * The mdc-select component is a dropdown selection control that allows users to pick an option from a predefined list.\n * It is designed to work with `mdc-option` for individual options and `mdc-optgroup` for grouping related options.\n * The component ensures accessibility and usability while handling various use cases,\n * including long text truncation with tooltip support.\n *\n * Every mdc-option should have a `value` attribute set to ensure proper form submission.\n *\n * To set a default option, use the `selected` attribute on the `mdc-option` element.\n *\n * **Note:** Make sure to add `mdc-selectlistbox` as a child of `mdc-select` and wrap options/optgroup in it to ensure proper accessibility functionality. Read more about it in SelectListBox documentation.\n *\n * @dependency mdc-button\n * @dependency mdc-icon\n * @dependency mdc-popover\n * @dependency mdc-text\n * @dependency mdc-toggletip\n *\n * @tagname mdc-select\n *\n * @slot default - This is a default/unnamed slot for Selectlistbox including options and/or option group.\n *\n * @event click - (React: onClick) This event is dispatched when the select is clicked.\n * @event change - (React: onChange) This event is dispatched when the select is changed.\n * @event input - (React: onInput) This event is dispatched when the select is changed.\n * @event keydown - (React: onKeyDown) This event is dispatched when a key is pressed down on the select.\n * @event focus - (React: onFocus) This event is dispatched when the select receives focus.\n */",
           "customElement": true
         }
       ],