@momentum-design/components 0.66.4 → 0.68.0

package/dist/custom-elements.json

@@ -3792,12 +3792,31 @@
                 "name": "CardComponentMixin",
                 "module": "utils/mixins/CardComponentMixin.js"
               }
+            },
+            {
+              "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"
+              }
             }
           ],
           "mixins": [
             {
               "name": "CardComponentMixin",
               "module": "/src/utils/mixins/CardComponentMixin"
+            },
+            {
+              "name": "CardAndDialogFooterMixin",
+              "module": "/src/utils/mixins/CardAndDialogFooterMixin"
             }
           ],
           "superclass": {
@@ -5032,6 +5051,21 @@
                 "name": "Card",
                 "module": "components/card/card.component.js"
               }
+            },
+            {
+              "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": "Card",
+                "module": "components/card/card.component.js"
+              }
             }
           ],
           "events": [
@@ -5600,6 +5634,21 @@
                 "name": "Card",
                 "module": "components/card/card.component.js"
               }
+            },
+            {
+              "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": "Card",
+                "module": "components/card/card.component.js"
+              }
             }
           ],
           "events": [
@@ -7144,8 +7193,8 @@
               "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",
+              "description": "Determines whether the focus trap is enabled.\nIf true, focus will be restricted to the content within this component.",
               "attribute": "enabledFocusTrap",
               "inheritedFrom": {
                 "name": "FocusTrapMixin",
@@ -7158,8 +7207,8 @@
               "type": {
                 "text": "boolean"
               },
-              "description": "Prevent outside scrolling when popover show.",
               "default": "false",
+              "description": "Prevent outside scrolling when element is shown.",
               "attribute": "enabledPreventScroll",
               "inheritedFrom": {
                 "name": "FocusTrapMixin",
@@ -7456,7 +7505,7 @@
                   "type": {
                     "text": "number"
                   },
-                  "description": "The index of the prefferable element to focus."
+                  "description": "The index of the preferable element to focus."
                 }
               ],
               "description": "Sets the initial focus within the container.",
@@ -8245,8 +8294,8 @@
               "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",
+              "description": "Determines whether the focus trap is enabled.\nIf true, focus will be restricted to the content within this component.",
               "fieldName": "enabledFocusTrap",
               "inheritedFrom": {
                 "name": "FocusTrapMixin",
@@ -8258,8 +8307,8 @@
               "type": {
                 "text": "boolean"
               },
-              "description": "Prevent outside scrolling when popover show.",
               "default": "false",
+              "description": "Prevent outside scrolling when element is shown.",
               "fieldName": "enabledPreventScroll",
               "inheritedFrom": {
                 "name": "FocusTrapMixin",
@@ -8449,129 +8498,1055 @@
               }
             },
             {
-              "name": "backdrop",
+              "name": "backdrop",
+              "type": {
+                "text": "boolean"
+              },
+              "description": "Determines whether the popover with backdrop.\nOther than popover and trigger element, the rest of the screen will be covered with a backdrop.",
+              "default": "false",
+              "fieldName": "backdrop",
+              "inheritedFrom": {
+                "name": "Popover",
+                "module": "src/components/popover/popover.component.ts"
+              }
+            },
+            {
+              "name": "flip",
+              "type": {
+                "text": "boolean"
+              },
+              "description": "Changes the placement of popover to keep it in view when scrolling.",
+              "default": "true",
+              "fieldName": "flip",
+              "inheritedFrom": {
+                "name": "Popover",
+                "module": "src/components/popover/popover.component.ts"
+              }
+            },
+            {
+              "name": "size",
+              "type": {
+                "text": "boolean"
+              },
+              "description": "Changes the size of popover to keep it in view when scrolling.",
+              "default": "false",
+              "fieldName": "size",
+              "inheritedFrom": {
+                "name": "Popover",
+                "module": "src/components/popover/popover.component.ts"
+              }
+            },
+            {
+              "name": "z-index",
+              "type": {
+                "text": "number"
+              },
+              "description": "The z-index of the popover.",
+              "default": "1000",
+              "fieldName": "zIndex",
+              "inheritedFrom": {
+                "name": "Popover",
+                "module": "src/components/popover/popover.component.ts"
+              }
+            },
+            {
+              "name": "append-to",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "description": "Element ID that the popover append to.",
+              "fieldName": "appendTo",
+              "inheritedFrom": {
+                "name": "Popover",
+                "module": "src/components/popover/popover.component.ts"
+              }
+            },
+            {
+              "name": "close-button-aria-label",
+              "type": {
+                "text": "string | null"
+              },
+              "default": "null",
+              "description": "aria-label attribute to be set for close button accessibility.",
+              "fieldName": "closeButtonAriaLabel",
+              "inheritedFrom": {
+                "name": "Popover",
+                "module": "src/components/popover/popover.component.ts"
+              }
+            },
+            {
+              "name": "role",
+              "type": {
+                "text": "HTMLElement['role']"
+              },
+              "description": "Role of the popover",
+              "default": "dialog",
+              "fieldName": "role",
+              "inheritedFrom": {
+                "name": "Popover",
+                "module": "src/components/popover/popover.component.ts"
+              }
+            },
+            {
+              "name": "aria-labelledby",
+              "type": {
+                "text": "string | null"
+              },
+              "default": "null",
+              "description": "aria-labelledby for an interactive popover only, defaults to the trigger component id.\nUsed in nested cases where the triggerComponent isn't the actual button.",
+              "fieldName": "ariaLabelledby",
+              "inheritedFrom": {
+                "name": "Popover",
+                "module": "src/components/popover/popover.component.ts"
+              }
+            },
+            {
+              "name": "aria-describedby",
+              "type": {
+                "text": "string | null"
+              },
+              "default": "null",
+              "description": "aria-describedby of the popover.",
+              "fieldName": "ariaDescribedby",
+              "inheritedFrom": {
+                "name": "Popover",
+                "module": "src/components/popover/popover.component.ts"
+              }
+            }
+          ],
+          "superclass": {
+            "name": "Popover",
+            "module": "/src/components/popover/popover.component"
+          },
+          "tagName": "mdc-coachmark",
+          "jsDoc": "/**\n * Coachmark component based on top of the popover component,\n * with the default value of certain properties changed.\n *\n * @dependency mdc-popover\n *\n * @tagname mdc-coachmark\n *\n * @event shown - (React: onShown) This event is dispatched when the coachmark is shown\n * @event hidden - (React: onHidden) This event is dispatched when the coachmark is hidden\n * @event created - (React: onCreated) This event is dispatched when the coachmark is created (added to the DOM)\n * @event destroyed - (React: onDestroyed) This event is dispatched when the coachmark is\n * destroyed (removed from the DOM)\n *\n * @cssproperty --mdc-popover-arrow-border-radius - radius of the arrow border\n * @cssproperty --mdc-popover-arrow-border - border of the arrow\n * @cssproperty --mdc-popover-primary-background-color - primary background color of the popover\n * @cssproperty --mdc-popover-border-color - border color of the popover\n * @cssproperty --mdc-popover-inverted-background-color - inverted background color of the popover\n * @cssproperty --mdc-popover-inverted-border-color - inverted border color of the popover\n * @cssproperty --mdc-popover-inverted-text-color - inverted text color of the popover\n * @cssproperty --mdc-popover-elevation-3 - elevation of the popover\n *\n * @slot - Default slot for modal container\n *\n */",
+          "customElement": true
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "default",
+          "declaration": {
+            "name": "Coachmark",
+            "module": "components/coachmark/coachmark.component.js"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "components/dialog/dialog.component.js",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "Dialog component is a modal dialog that can be used to display information or prompt the user for input.\nIt can be used to create custom dialogs where content for the body and footer actions is provided by the consumer.\nThe dialog is available in three sizes: small, medium, and large. 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\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 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"
+            }
+          ],
+          "members": [
+            {
+              "kind": "field",
+              "name": "id",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "description": "The unique ID of the dialog",
+              "attribute": "id",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "triggerId",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "description": "The ID of the element that triggers the dialog",
+              "attribute": "triggerId",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "visible",
+              "type": {
+                "text": "boolean"
+              },
+              "description": "The visibility of the dialog",
+              "default": "false",
+              "attribute": "visible",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "zIndex",
+              "type": {
+                "text": "number"
+              },
+              "description": "The z-index of the dialog",
+              "default": "1000",
+              "attribute": "z-index",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "size",
+              "type": {
+                "text": "DialogSize"
+              },
+              "description": "The size of the dialog, can be 'small' (432x332), 'medium' (656x356), or 'large' (992x412)",
+              "default": "small",
+              "attribute": "size",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "variant",
+              "type": {
+                "text": "DialogVariant"
+              },
+              "attribute": "variant",
+              "reflects": true
+            },
+            {
+              "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": "field",
+              "name": "ariaLabelledby",
+              "type": {
+                "text": "string | null"
+              },
+              "default": "null",
+              "description": "Defines a string value for the aria-labelledby attribute that refers to the element\nlabeling the dialog for accessibility",
+              "attribute": "aria-labelledby",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "ariaLabel",
+              "type": {
+                "text": "string | null"
+              },
+              "default": "null",
+              "description": "Defines a string value for the aria-label attribute when header is not used",
+              "attribute": "aria-label",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "headerText",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "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"
+              },
+              "default": "''",
+              "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": "method",
+              "name": "setupTriggerListener",
+              "privacy": "private",
+              "description": "Sets up the trigger listener for focus trap"
+            },
+            {
+              "kind": "method",
+              "name": "removeEventListeners",
+              "privacy": "private",
+              "description": "Removes the trigger event listener"
+            },
+            {
+              "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": "method",
+              "name": "handleCreateDialogFirstUpdate",
+              "privacy": "private",
+              "description": "Sets the focusable elements inside the dialog."
+            },
+            {
+              "kind": "field",
+              "name": "enabledFocusTrap",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Determines whether the focus trap is enabled.\nIf true, focus will be restricted to the content within this component.",
+              "attribute": "enabledFocusTrap",
+              "inheritedFrom": {
+                "name": "FocusTrapMixin",
+                "module": "utils/mixins/FocusTrapMixin.js"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "enabledPreventScroll",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Prevent outside scrolling when element is shown.",
+              "attribute": "enabledPreventScroll",
+              "inheritedFrom": {
+                "name": "FocusTrapMixin",
+                "module": "utils/mixins/FocusTrapMixin.js"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "shouldWrapFocus",
+              "type": {
+                "text": "() => boolean"
+              },
+              "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",
+              "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": "FocusTrapMixin",
+                "module": "utils/mixins/FocusTrapMixin.js"
+              }
+            },
+            {
+              "kind": "method",
+              "name": "hasZeroDimensions",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "element",
+                  "type": {
+                    "text": "HTMLElement"
+                  },
+                  "description": "The element to check."
+                }
+              ],
+              "description": "Checks if the element has zero dimensions (width and height are both 0).",
+              "return": {
+                "type": {
+                  "text": ""
+                }
+              },
+              "inheritedFrom": {
+                "name": "FocusTrapMixin",
+                "module": "utils/mixins/FocusTrapMixin.js"
+              }
+            },
+            {
+              "kind": "method",
+              "name": "isNotVisible",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "element",
+                  "type": {
+                    "text": "HTMLElement"
+                  },
+                  "description": "The element to check."
+                }
+              ],
+              "description": "Determines if the element is not visible in the DOM.",
+              "return": {
+                "type": {
+                  "text": ""
+                }
+              },
+              "inheritedFrom": {
+                "name": "FocusTrapMixin",
+                "module": "utils/mixins/FocusTrapMixin.js"
+              }
+            },
+            {
+              "kind": "method",
+              "name": "hasHiddenStyle",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "element",
+                  "type": {
+                    "text": "HTMLElement"
+                  },
+                  "description": "The element to check."
+                }
+              ],
+              "description": "Checks if the element has inline styles that make it hidden.",
+              "return": {
+                "type": {
+                  "text": ""
+                }
+              },
+              "inheritedFrom": {
+                "name": "FocusTrapMixin",
+                "module": "utils/mixins/FocusTrapMixin.js"
+              }
+            },
+            {
+              "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": "FocusTrapMixin",
+                "module": "utils/mixins/FocusTrapMixin.js"
+              }
+            },
+            {
+              "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": "FocusTrapMixin",
+                "module": "utils/mixins/FocusTrapMixin.js"
+              }
+            },
+            {
+              "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": "FocusTrapMixin",
+                "module": "utils/mixins/FocusTrapMixin.js"
+              }
+            },
+            {
+              "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": "FocusTrapMixin",
+                "module": "utils/mixins/FocusTrapMixin.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": ""
+                }
+              },
+              "inheritedFrom": {
+                "name": "FocusTrapMixin",
+                "module": "utils/mixins/FocusTrapMixin.js"
+              }
+            },
+            {
+              "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.",
+              "inheritedFrom": {
+                "name": "FocusTrapMixin",
+                "module": "utils/mixins/FocusTrapMixin.js"
+              }
+            },
+            {
+              "kind": "method",
+              "name": "setFocusableElements",
+              "privacy": "public",
+              "description": "Updates the list of focusable elements within the component's shadow root.",
+              "inheritedFrom": {
+                "name": "FocusTrapMixin",
+                "module": "utils/mixins/FocusTrapMixin.js"
+              }
+            },
+            {
+              "kind": "method",
+              "name": "setInitialFocus",
+              "privacy": "public",
+              "parameters": [
+                {
+                  "name": "prefferableElement",
+                  "default": "0",
+                  "type": {
+                    "text": "number"
+                  },
+                  "description": "The index of the preferable element to focus."
+                }
+              ],
+              "description": "Sets the initial focus within the container.",
+              "inheritedFrom": {
+                "name": "FocusTrapMixin",
+                "module": "utils/mixins/FocusTrapMixin.js"
+              }
+            },
+            {
+              "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": ""
+                }
+              },
+              "inheritedFrom": {
+                "name": "FocusTrapMixin",
+                "module": "utils/mixins/FocusTrapMixin.js"
+              }
+            },
+            {
+              "kind": "method",
+              "name": "getDeepActiveElement",
+              "privacy": "private",
+              "description": "Returns the deepest active element in the shadow DOM.",
+              "return": {
+                "type": {
+                  "text": ""
+                }
+              },
+              "inheritedFrom": {
+                "name": "FocusTrapMixin",
+                "module": "utils/mixins/FocusTrapMixin.js"
+              }
+            },
+            {
+              "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": ""
+                }
+              },
+              "inheritedFrom": {
+                "name": "FocusTrapMixin",
+                "module": "utils/mixins/FocusTrapMixin.js"
+              }
+            },
+            {
+              "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": ""
+                }
+              },
+              "inheritedFrom": {
+                "name": "FocusTrapMixin",
+                "module": "utils/mixins/FocusTrapMixin.js"
+              }
+            },
+            {
+              "kind": "method",
+              "name": "trapFocus",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "direction",
+                  "type": {
+                    "text": "boolean"
+                  },
+                  "description": "The direction of the focus trap.\nIf true, the focus will be trapped in the previous element."
+                }
+              ],
+              "description": "Traps focus within the container.",
+              "inheritedFrom": {
+                "name": "FocusTrapMixin",
+                "module": "utils/mixins/FocusTrapMixin.js"
+              }
+            },
+            {
+              "kind": "method",
+              "name": "handleKeydown",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "event",
+                  "type": {
+                    "text": "KeyboardEvent"
+                  },
+                  "description": "The keyboard event."
+                }
+              ],
+              "description": "Traps focus within the container.",
+              "inheritedFrom": {
+                "name": "FocusTrapMixin",
+                "module": "utils/mixins/FocusTrapMixin.js"
+              }
+            },
+            {
+              "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"
+            }
+          ],
+          "attributes": [
+            {
+              "name": "id",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "description": "The unique ID of the dialog",
+              "fieldName": "id"
+            },
+            {
+              "name": "triggerId",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "description": "The ID of the element that triggers the dialog",
+              "fieldName": "triggerId"
+            },
+            {
+              "name": "visible",
+              "type": {
+                "text": "boolean"
+              },
+              "description": "The visibility of the dialog",
+              "default": "false",
+              "fieldName": "visible"
+            },
+            {
+              "name": "z-index",
+              "type": {
+                "text": "number"
+              },
+              "description": "The z-index of the dialog",
+              "default": "1000",
+              "fieldName": "zIndex"
+            },
+            {
+              "name": "size",
+              "type": {
+                "text": "DialogSize"
+              },
+              "description": "The size of the dialog, can be 'small' (432x332), 'medium' (656x356), or 'large' (992x412)",
+              "default": "small",
+              "fieldName": "size"
+            },
+            {
+              "name": "variant",
+              "type": {
+                "text": "DialogVariant"
+              },
+              "fieldName": "variant"
+            },
+            {
+              "name": "close-button-aria-label",
+              "type": {
+                "text": "string | null"
+              },
+              "default": "null",
+              "description": "Defines a string value for the aria-label attribute for close button accessibility",
+              "fieldName": "closeButtonAriaLabel"
+            },
+            {
+              "name": "aria-labelledby",
               "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-labelledby attribute that refers to the element\nlabeling the dialog for accessibility",
+              "fieldName": "ariaLabelledby"
             },
             {
-              "name": "flip",
+              "name": "aria-label",
               "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-label attribute when header is not used",
+              "fieldName": "ariaLabel"
             },
             {
-              "name": "size",
+              "name": "header-text",
               "type": {
-                "text": "boolean"
+                "text": "string"
               },
-              "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"
-              }
+              "default": "''",
+              "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"
               },
-              "description": "The z-index of the popover.",
-              "default": "1000",
-              "fieldName": "zIndex",
-              "inheritedFrom": {
-                "name": "Popover",
-                "module": "src/components/popover/popover.component.ts"
-              }
+              "default": "''",
+              "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"
               },
-              "default": "''",
-              "description": "Element ID that the popover append to.",
-              "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": "enabledFocusTrap",
               "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",
+              "default": "false",
+              "description": "Determines whether the focus trap is enabled.\nIf true, focus will be restricted to the content within this component.",
+              "fieldName": "enabledFocusTrap",
               "inheritedFrom": {
-                "name": "Popover",
-                "module": "src/components/popover/popover.component.ts"
+                "name": "FocusTrapMixin",
+                "module": "src/utils/mixins/FocusTrapMixin.ts"
               }
             },
             {
-              "name": "aria-describedby",
+              "name": "enabledPreventScroll",
               "type": {
-                "text": "string | null"
+                "text": "boolean"
               },
-              "default": "null",
-              "description": "aria-describedby of the popover.",
-              "fieldName": "ariaDescribedby",
+              "default": "false",
+              "description": "Prevent outside scrolling when element is shown.",
+              "fieldName": "enabledPreventScroll",
               "inheritedFrom": {
-                "name": "Popover",
-                "module": "src/components/popover/popover.component.ts"
+                "name": "FocusTrapMixin",
+                "module": "src/utils/mixins/FocusTrapMixin.ts"
               }
             }
           ],
+          "mixins": [
+            {
+              "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 three sizes: small, medium, and large. 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 * 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 *\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 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 *\n */",
           "customElement": true
         }
       ],
@@ -8580,8 +9555,8 @@
           "kind": "js",
           "name": "default",
           "declaration": {
-            "name": "Coachmark",
-            "module": "components/coachmark/coachmark.component.js"
+            "name": "Dialog",
+            "module": "components/dialog/dialog.component.js"
           }
         }
       ]
@@ -16202,8 +17177,8 @@
               "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",
+              "description": "Determines whether the focus trap is enabled.\nIf true, focus will be restricted to the content within this component.",
               "attribute": "enabledFocusTrap",
               "inheritedFrom": {
                 "name": "FocusTrapMixin",
@@ -16216,8 +17191,8 @@
               "type": {
                 "text": "boolean"
               },
-              "description": "Prevent outside scrolling when popover show.",
               "default": "false",
+              "description": "Prevent outside scrolling when element is shown.",
               "attribute": "enabledPreventScroll",
               "inheritedFrom": {
                 "name": "FocusTrapMixin",
@@ -16514,7 +17489,7 @@
                   "type": {
                     "text": "number"
                   },
-                  "description": "The index of the prefferable element to focus."
+                  "description": "The index of the preferable element to focus."
                 }
               ],
               "description": "Sets the initial focus within the container.",
@@ -16934,8 +17909,8 @@
               "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",
+              "description": "Determines whether the focus trap is enabled.\nIf true, focus will be restricted to the content within this component.",
               "fieldName": "enabledFocusTrap",
               "inheritedFrom": {
                 "name": "FocusTrapMixin",
@@ -16947,8 +17922,8 @@
               "type": {
                 "text": "boolean"
               },
-              "description": "Prevent outside scrolling when popover show.",
               "default": "false",
+              "description": "Prevent outside scrolling when element is shown.",
               "fieldName": "enabledPreventScroll",
               "inheritedFrom": {
                 "name": "FocusTrapMixin",
@@ -24796,8 +25771,8 @@
               "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",
+              "description": "Determines whether the focus trap is enabled.\nIf true, focus will be restricted to the content within this component.",
               "attribute": "enabledFocusTrap",
               "inheritedFrom": {
                 "name": "Popover",
@@ -24810,8 +25785,8 @@
               "type": {
                 "text": "boolean"
               },
-              "description": "Prevent outside scrolling when popover show.",
               "default": "false",
+              "description": "Prevent outside scrolling when element is shown.",
               "attribute": "enabledPreventScroll",
               "inheritedFrom": {
                 "name": "Popover",
@@ -25108,7 +26083,7 @@
                   "type": {
                     "text": "number"
                   },
-                  "description": "The index of the prefferable element to focus."
+                  "description": "The index of the preferable element to focus."
                 }
               ],
               "description": "Sets the initial focus within the container.",
@@ -25914,8 +26889,8 @@
               "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",
+              "description": "Determines whether the focus trap is enabled.\nIf true, focus will be restricted to the content within this component.",
               "fieldName": "enabledFocusTrap",
               "inheritedFrom": {
                 "name": "Popover",
@@ -25927,8 +26902,8 @@
               "type": {
                 "text": "boolean"
               },
-              "description": "Prevent outside scrolling when popover show.",
               "default": "false",
+              "description": "Prevent outside scrolling when element is shown.",
               "fieldName": "enabledPreventScroll",
               "inheritedFrom": {
                 "name": "Popover",
@@ -26511,8 +27486,8 @@
               "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",
+              "description": "Determines whether the focus trap is enabled.\nIf true, focus will be restricted to the content within this component.",
               "attribute": "enabledFocusTrap",
               "inheritedFrom": {
                 "name": "Popover",
@@ -26525,8 +27500,8 @@
               "type": {
                 "text": "boolean"
               },
-              "description": "Prevent outside scrolling when popover show.",
               "default": "false",
+              "description": "Prevent outside scrolling when element is shown.",
               "attribute": "enabledPreventScroll",
               "inheritedFrom": {
                 "name": "Popover",
@@ -26823,7 +27798,7 @@
                   "type": {
                     "text": "number"
                   },
-                  "description": "The index of the prefferable element to focus."
+                  "description": "The index of the preferable element to focus."
                 }
               ],
               "description": "Sets the initial focus within the container.",
@@ -27629,8 +28604,8 @@
               "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",
+              "description": "Determines whether the focus trap is enabled.\nIf true, focus will be restricted to the content within this component.",
               "fieldName": "enabledFocusTrap",
               "inheritedFrom": {
                 "name": "Popover",
@@ -27642,8 +28617,8 @@
               "type": {
                 "text": "boolean"
               },
-              "description": "Prevent outside scrolling when popover show.",
               "default": "false",
+              "description": "Prevent outside scrolling when element is shown.",
               "fieldName": "enabledPreventScroll",
               "inheritedFrom": {
                 "name": "Popover",
@@ -28585,6 +29560,137 @@
         }
       ]
     },
+    {
+      "kind": "javascript-module",
+      "path": "utils/mixins/CardAndDialogFooterMixin.js",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "",
+          "name": "CardAndDialogFooterMixinInterface",
+          "members": [
+            {
+              "kind": "field",
+              "name": "footerLink",
+              "type": {
+                "text": "Array<HTMLElement> | undefined"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "footerButtonPrimary",
+              "type": {
+                "text": "Array<HTMLElement> | undefined"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "footerButtonSecondary",
+              "type": {
+                "text": "Array<HTMLElement> | undefined"
+              }
+            },
+            {
+              "kind": "method",
+              "name": "updateFooterButtonColors",
+              "privacy": "protected",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "variant",
+                  "type": {
+                    "text": "string"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "handleFooterSlot",
+              "privacy": "protected",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "tagname",
+                  "type": {
+                    "text": "string"
+                  }
+                },
+                {
+                  "name": "variant",
+                  "optional": true,
+                  "type": {
+                    "text": "string"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "renderFooter",
+              "privacy": "protected",
+              "return": {
+                "type": {
+                  "text": "TemplateResult"
+                }
+              }
+            }
+          ]
+        },
+        {
+          "kind": "mixin",
+          "description": "",
+          "name": "CardAndDialogFooterMixin",
+          "members": [
+            {
+              "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": ""
+                }
+              }
+            }
+          ],
+          "parameters": [
+            {
+              "name": "superClass",
+              "type": {
+                "text": "T"
+              }
+            }
+          ]
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "CardAndDialogFooterMixinInterface",
+          "declaration": {
+            "name": "CardAndDialogFooterMixinInterface",
+            "module": "utils/mixins/CardAndDialogFooterMixin.js"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "CardAndDialogFooterMixin",
+          "declaration": {
+            "name": "CardAndDialogFooterMixin",
+            "module": "utils/mixins/CardAndDialogFooterMixin.js"
+          }
+        }
+      ]
+    },
     {
       "kind": "javascript-module",
       "path": "utils/mixins/CardComponentMixin.js",
@@ -29101,8 +30207,8 @@
               "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",
+              "description": "Determines whether the focus trap is enabled.\nIf true, focus will be restricted to the content within this component.",
               "attribute": "enabledFocusTrap"
             },
             {
@@ -29111,8 +30217,8 @@
               "type": {
                 "text": "boolean"
               },
-              "description": "Prevent outside scrolling when popover show.",
               "default": "false",
+              "description": "Prevent outside scrolling when element is shown.",
               "attribute": "enabledPreventScroll"
             },
             {
@@ -29353,7 +30459,7 @@
                   "type": {
                     "text": "number"
                   },
-                  "description": "The index of the prefferable element to focus."
+                  "description": "The index of the preferable element to focus."
                 }
               ],
               "description": "Sets the initial focus within the container."
@@ -29480,8 +30586,8 @@
               "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",
+              "description": "Determines whether the focus trap is enabled.\nIf true, focus will be restricted to the content within this component.",
               "fieldName": "enabledFocusTrap"
             },
             {
@@ -29489,8 +30595,8 @@
               "type": {
                 "text": "boolean"
               },
-              "description": "Prevent outside scrolling when popover show.",
               "default": "false",
+              "description": "Prevent outside scrolling when element is shown.",
               "fieldName": "enabledPreventScroll"
             }
           ],