@momentum-design/components 0.37.2 → 0.37.3

package/dist/custom-elements.json

@@ -3263,211 +3263,239 @@
     },
     {
       "kind": "javascript-module",
-      "path": "components/chip/chip.component.js",
+      "path": "components/coachmark/coachmark.component.js",
       "declarations": [
         {
           "kind": "class",
-          "description": "mdc-chip is an interactive element that can be used to represent a chip. It supports a leading icon along with label.\nConsumers can wrap this component around a tooltip to provide additional context.\n\nIt is recommended to keep the label text for the chip component concise and compact.\nFor best results, we recommend limiting the <b>maximum length of the label text to 20 characters</b>,\nincluding empty spaces to split words.\n\nThis component is built by extending Buttonsimple.",
-          "name": "Chip",
+          "description": "Coachmark component based on top of the popover component,\nwith the default value of certain properties changed.",
+          "name": "Coachmark",
           "cssProperties": [
             {
-              "description": "The color of the chip.",
-              "name": "--mdc-chip-color"
+              "description": "radius of the arrow border",
+              "name": "--mdc-popover-arrow-border-radius",
+              "inheritedFrom": {
+                "name": "Popover",
+                "module": "src/components/popover/popover.component.ts"
+              }
             },
             {
-              "description": "The border color of the chip.",
-              "name": "--mdc-chip-border-color"
+              "description": "border of the arrow",
+              "name": "--mdc-popover-arrow-border",
+              "inheritedFrom": {
+                "name": "Popover",
+                "module": "src/components/popover/popover.component.ts"
+              }
             },
             {
-              "description": "The background color of the chip.",
-              "name": "--mdc-chip-background-color"
-            }
-          ],
-          "members": [
+              "description": "primary background color of the popover",
+              "name": "--mdc-popover-primary-background-color",
+              "inheritedFrom": {
+                "name": "Popover",
+                "module": "src/components/popover/popover.component.ts"
+              }
+            },
             {
-              "kind": "field",
-              "name": "color",
-              "type": {
-                "text": "ColorType"
-              },
-              "description": "The color of the chip. It supports the following colors\n- default\n- cobalt\n- gold\n- lime\n- mint\n- pink\n- purple\n- slate\n- violet",
-              "default": "default",
-              "attribute": "color",
-              "reflects": true
+              "description": "border color of the popover",
+              "name": "--mdc-popover-border-color",
+              "inheritedFrom": {
+                "name": "Popover",
+                "module": "src/components/popover/popover.component.ts"
+              }
             },
             {
-              "kind": "field",
-              "name": "label",
-              "type": {
-                "text": "string"
-              },
-              "default": "''",
-              "description": "The visible label text of the chip.\n\nWe recommend limiting the <b>maximum length of the label text to 20 characters</b>,\nincluding empty spaces to split words.",
-              "attribute": "label"
+              "description": "inverted background color of the popover",
+              "name": "--mdc-popover-inverted-background-color",
+              "inheritedFrom": {
+                "name": "Popover",
+                "module": "src/components/popover/popover.component.ts"
+              }
             },
             {
-              "kind": "method",
-              "name": "renderIcon",
-              "privacy": "private",
-              "description": "Renders the icon element if available.",
-              "return": {
-                "type": {
-                  "text": ""
-                }
+              "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",
+              "inheritedFrom": {
+                "name": "Popover",
+                "module": "src/components/popover/popover.component.ts"
               }
             },
+            {
+              "description": "elevation of the popover",
+              "name": "--mdc-popover-elevation-3",
+              "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": "role",
-              "description": "This property defines the ARIA role for the element. By default, it is set to 'button'.\nConsumers should override this role when:\n- The element is being used in a context where a different role is more appropriate.\n- Custom behaviors are implemented that require a specific ARIA role for accessibility purposes.",
-              "default": "button",
-              "attribute": "role",
+              "name": "trigger",
+              "type": {
+                "text": "PopoverTrigger"
+              },
+              "description": "Determines the events that cause the Coachmark to show.\nMultiple event names should be separated by spaces.\nFor example to allow both click and hover, use 'click mouseenter' as the trigger.\n- **click**\n- **mouseenter**\n- **focusin**\n- **manual**",
+              "default": "manual",
+              "attribute": "trigger",
               "reflects": true,
               "inheritedFrom": {
-                "name": "Buttonsimple",
-                "module": "components/buttonsimple/buttonsimple.component.js"
+                "name": "Popover",
+                "module": "components/popover/popover.component.js"
               }
             },
             {
               "kind": "field",
-              "name": "size",
+              "name": "showArrow",
               "type": {
-                "text": "ButtonSize"
+                "text": "boolean"
               },
-              "description": "Simplebutton size is a super set of all the sizes supported by children components.",
-              "default": "32",
-              "attribute": "size",
+              "description": "The arrow visibility of the Coachmark.",
+              "default": "true",
+              "attribute": "show-arrow",
               "reflects": true,
               "inheritedFrom": {
-                "name": "Buttonsimple",
-                "module": "components/buttonsimple/buttonsimple.component.js"
+                "name": "Popover",
+                "module": "components/popover/popover.component.js"
               }
             },
             {
               "kind": "field",
-              "name": "active",
+              "name": "closeButton",
               "type": {
                 "text": "boolean"
               },
-              "default": "undefined as unknown",
-              "description": "The button's active state indicates whether it is currently toggled on (active) or off (inactive).\nWhen the active state is true, the button is considered to be in an active state, meaning it is toggled on.\nConversely, when the active state is false, the button is in an inactive state, indicating it is toggled off.",
-              "attribute": "active",
+              "description": "The close button visibility of the Coachmark.",
+              "default": "true",
+              "attribute": "close-button",
               "reflects": true,
               "inheritedFrom": {
-                "name": "Buttonsimple",
-                "module": "components/buttonsimple/buttonsimple.component.js"
+                "name": "Popover",
+                "module": "components/popover/popover.component.js"
               }
             },
             {
               "kind": "field",
-              "name": "softDisabled",
+              "name": "disableAriaExpanded",
               "type": {
                 "text": "boolean"
               },
-              "default": "undefined as unknown",
-              "description": "Indicates whether the button is soft disabled.\nWhen set to `true`, the button appears visually disabled but still allows\nfocus, click, and keyboard actions to be passed through.\n\n**Important:** When using soft disabled, consumers must ensure that\nthe button behaves like a disabled button, allowing only focus and\npreventing any interactions (clicks or keyboard actions) from triggering unintended actions.",
-              "attribute": "soft-disabled",
+              "description": "Disable aria-expanded attribute on trigger element.",
+              "default": "true",
+              "attribute": "disable-aria-expanded",
+              "reflects": true,
               "inheritedFrom": {
-                "name": "Buttonsimple",
-                "module": "components/buttonsimple/buttonsimple.component.js"
+                "name": "Popover",
+                "module": "components/popover/popover.component.js"
               }
             },
             {
               "kind": "field",
-              "name": "iconName",
+              "name": "color",
               "type": {
-                "text": "IconNames | undefined"
+                "text": "PopoverColor"
               },
-              "description": "Name of the icon (= filename).\n\nIf no `icon-name` is provided, no icon will be rendered.",
-              "attribute": "icon-name",
+              "description": "Color of the popover\n- **tonal**\n- **contrast**",
+              "default": "tonal",
+              "attribute": "color",
+              "reflects": true,
               "inheritedFrom": {
-                "name": "IconNameMixin",
-                "module": "utils/mixins/IconNameMixin.js"
+                "name": "Popover",
+                "module": "components/popover/popover.component.js"
               }
             },
             {
               "kind": "field",
-              "name": "tabIndex",
+              "name": "enabledFocusTrap",
               "type": {
-                "text": "number"
+                "text": "boolean"
               },
-              "default": "0",
-              "description": "This property specifies the tab order of the element.",
-              "attribute": "tabIndex",
-              "reflects": true,
+              "description": "Determines whether the focus trap is enabled.\nIf true, focus will be restricted to the content within this component.",
+              "default": "false",
+              "attribute": "enabledFocusTrap",
               "inheritedFrom": {
-                "name": "Buttonsimple",
-                "module": "components/buttonsimple/buttonsimple.component.js"
+                "name": "FocusTrapMixin",
+                "module": "utils/mixins/FocusTrapMixin.js"
               }
             },
             {
               "kind": "field",
-              "name": "disabled",
+              "name": "enabledPreventScroll",
               "type": {
                 "text": "boolean"
               },
+              "description": "Prevent outside scrolling when popover show.",
               "default": "false",
-              "description": "Indicates whether the component is disabled.\nWhen the component is disabled for user interaction; it is not focusable or clickable.",
-              "attribute": "disabled",
-              "reflects": true,
+              "attribute": "enabledPreventScroll",
               "inheritedFrom": {
-                "name": "Buttonsimple",
-                "module": "components/buttonsimple/buttonsimple.component.js"
+                "name": "FocusTrapMixin",
+                "module": "utils/mixins/FocusTrapMixin.js"
               }
             },
             {
               "kind": "field",
-              "name": "type",
+              "name": "shouldWrapFocus",
               "type": {
-                "text": "ButtonType"
+                "text": "() => boolean"
               },
-              "description": "This property defines the type attribute for the button element.\nThe type attribute specifies the behavior of the button when it is clicked.\n- **submit**: The button submits the form data to the server.\n- **reset**: The button resets the form data to its initial state.\n- **button**: The button does nothing when clicked.",
-              "default": "button",
-              "attribute": "type",
-              "reflects": true,
               "inheritedFrom": {
-                "name": "Buttonsimple",
-                "module": "components/buttonsimple/buttonsimple.component.js"
+                "name": "FocusTrapMixin",
+                "module": "utils/mixins/FocusTrapMixin.js"
               }
             },
             {
               "kind": "method",
-              "name": "executeAction",
-              "privacy": "protected",
+              "name": "deactivateFocusTrap",
+              "description": "Deactivate the focus trap.",
               "inheritedFrom": {
-                "name": "Buttonsimple",
-                "module": "components/buttonsimple/buttonsimple.component.js"
+                "name": "FocusTrapMixin",
+                "module": "utils/mixins/FocusTrapMixin.js"
               }
             },
             {
               "kind": "method",
-              "name": "setActive",
-              "privacy": "protected",
+              "name": "hasNoClientRects",
+              "privacy": "private",
               "parameters": [
                 {
                   "name": "element",
                   "type": {
                     "text": "HTMLElement"
                   },
-                  "description": "The button element"
-                },
-                {
-                  "name": "active",
-                  "type": {
-                    "text": "boolean"
-                  },
-                  "description": "The active state of the element"
+                  "description": "The element to check."
                 }
               ],
-              "description": "Sets the aria-pressed attribute based on the active state of the button.",
+              "description": "Checks if the element has no client rectangles (not visible in the viewport).",
+              "return": {
+                "type": {
+                  "text": ""
+                }
+              },
               "inheritedFrom": {
-                "name": "Buttonsimple",
-                "module": "components/buttonsimple/buttonsimple.component.js"
+                "name": "FocusTrapMixin",
+                "module": "utils/mixins/FocusTrapMixin.js"
               }
             },
             {
               "kind": "method",
-              "name": "setSoftDisabled",
+              "name": "hasZeroDimensions",
               "privacy": "private",
               "parameters": [
                 {
@@ -3475,25 +3503,23 @@
                   "type": {
                     "text": "HTMLElement"
                   },
-                  "description": "The button element."
-                },
-                {
-                  "name": "softDisabled",
-                  "type": {
-                    "text": "boolean"
-                  },
-                  "description": "The soft-disabled state."
+                  "description": "The element to check."
                 }
               ],
-              "description": "Sets the soft-disabled attribute for the button.\nWhen soft-disabled, the button looks to be disabled but remains focusable and clickable.\nAlso sets/removes aria-disabled attribute.",
-              "inheritedFrom": {
-                "name": "Buttonsimple",
-                "module": "components/buttonsimple/buttonsimple.component.js"
+              "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": "setDisabled",
+              "name": "isNotVisible",
               "privacy": "private",
               "parameters": [
                 {
@@ -3501,362 +3527,434 @@
                   "type": {
                     "text": "HTMLElement"
                   },
-                  "description": "The button element."
-                },
-                {
-                  "name": "disabled",
-                  "type": {
-                    "text": "boolean"
-                  },
-                  "description": "The disabled state."
+                  "description": "The element to check."
                 }
               ],
-              "description": "Sets the disabled attribute for the button.\nWhen disabled, the button is not focusable or clickable, and tabindex is set to -1.\nThe previous tabindex is stored and restored when enabled.\nAlso sets/removes aria-disabled attribute.",
+              "description": "Determines if the element is not visible in the DOM.",
+              "return": {
+                "type": {
+                  "text": ""
+                }
+              },
               "inheritedFrom": {
-                "name": "Buttonsimple",
-                "module": "components/buttonsimple/buttonsimple.component.js"
+                "name": "FocusTrapMixin",
+                "module": "utils/mixins/FocusTrapMixin.js"
               }
             },
             {
               "kind": "method",
-              "name": "triggerClickEvent",
+              "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": "Buttonsimple",
-                "module": "components/buttonsimple/buttonsimple.component.js"
+                "name": "FocusTrapMixin",
+                "module": "utils/mixins/FocusTrapMixin.js"
               }
             },
             {
               "kind": "method",
-              "name": "handleBlur",
+              "name": "hasComputedHidden",
               "privacy": "private",
-              "description": "In case the button is pressed and the focus is lost while pressing,\nthe pressed class is removed.",
+              "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": "Buttonsimple",
-                "module": "components/buttonsimple/buttonsimple.component.js"
+                "name": "FocusTrapMixin",
+                "module": "utils/mixins/FocusTrapMixin.js"
               }
             },
             {
               "kind": "method",
-              "name": "handleKeyDown",
+              "name": "isHidden",
               "privacy": "private",
               "parameters": [
                 {
-                  "name": "event",
+                  "name": "element",
                   "type": {
-                    "text": "KeyboardEvent"
+                    "text": "HTMLElement"
                   },
-                  "description": "The keyboard event."
+                  "description": "The element to check."
                 }
               ],
-              "description": "Handles the keydown event on the button.\nIf the key is 'Enter' or 'Space', the button is pressed.\nIf the key is 'Enter', the button is pressed. The native HTML button works in the same way.",
+              "description": "Checks if the element is hidden from the user.",
+              "return": {
+                "type": {
+                  "text": ""
+                }
+              },
               "inheritedFrom": {
-                "name": "Buttonsimple",
-                "module": "components/buttonsimple/buttonsimple.component.js"
+                "name": "FocusTrapMixin",
+                "module": "utils/mixins/FocusTrapMixin.js"
               }
             },
             {
               "kind": "method",
-              "name": "handleKeyUp",
+              "name": "isNotTabbable",
               "privacy": "private",
               "parameters": [
                 {
-                  "name": "event",
+                  "name": "element",
                   "type": {
-                    "text": "KeyboardEvent"
+                    "text": "HTMLElement"
                   },
-                  "description": "The keyboard event."
+                  "description": "The element to check."
                 }
               ],
-              "description": "Handles the keyup event on the button.\nIf the key is 'Enter' or 'Space', the button is clicked.\nIf the key is 'Space', the button is pressed. The native HTML button works in the same way.",
+              "description": "Checks if the element is not tabbable.",
+              "return": {
+                "type": {
+                  "text": ""
+                }
+              },
               "inheritedFrom": {
-                "name": "Buttonsimple",
-                "module": "components/buttonsimple/buttonsimple.component.js"
+                "name": "FocusTrapMixin",
+                "module": "utils/mixins/FocusTrapMixin.js"
               }
-            }
-          ],
-          "attributes": [
-            {
-              "name": "color",
-              "type": {
-                "text": "ColorType"
-              },
-              "description": "The color of the chip. It supports the following colors\n- default\n- cobalt\n- gold\n- lime\n- mint\n- pink\n- purple\n- slate\n- violet",
-              "default": "default",
-              "fieldName": "color"
             },
             {
-              "name": "label",
-              "type": {
-                "text": "string"
+              "kind": "method",
+              "name": "isInteractiveElement",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": ""
+                }
               },
-              "default": "''",
-              "description": "The visible label text of the chip.\n\nWe recommend limiting the <b>maximum length of the label text to 20 characters</b>,\nincluding empty spaces to split words.",
-              "fieldName": "label"
+              "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"
+              }
             },
             {
-              "name": "icon-name",
-              "type": {
-                "text": "IconNames | undefined"
+              "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": "Name of the icon (= filename).\n\nIf no `icon-name` is provided, no icon will be rendered.",
-              "fieldName": "iconName",
               "inheritedFrom": {
-                "name": "IconNameMixin",
-                "module": "src/utils/mixins/IconNameMixin.ts"
+                "name": "FocusTrapMixin",
+                "module": "utils/mixins/FocusTrapMixin.js"
               }
             },
             {
-              "name": "tabIndex",
-              "type": {
-                "text": "number"
+              "kind": "method",
+              "name": "findFocusable",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": ""
+                }
               },
-              "default": "0",
-              "description": "This property specifies the tab order of the element.",
-              "fieldName": "tabIndex",
+              "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": "Buttonsimple",
-                "module": "src/components/buttonsimple/buttonsimple.component.ts"
+                "name": "FocusTrapMixin",
+                "module": "utils/mixins/FocusTrapMixin.js"
               }
             },
             {
-              "name": "disabled",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "Indicates whether the component is disabled.\nWhen the component is disabled for user interaction; it is not focusable or clickable.",
-              "fieldName": "disabled",
+              "kind": "method",
+              "name": "setFocusableElements",
+              "privacy": "public",
+              "description": "Updates the list of focusable elements within the component's shadow root.",
               "inheritedFrom": {
-                "name": "Buttonsimple",
-                "module": "src/components/buttonsimple/buttonsimple.component.ts"
+                "name": "FocusTrapMixin",
+                "module": "utils/mixins/FocusTrapMixin.js"
               }
             },
             {
-              "name": "active",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "The button's active state indicates whether it is currently toggled on (active) or off (inactive).\nWhen the active state is true, the button is considered to be in an active state, meaning it is toggled on.\nConversely, when the active state is false, the button is in an inactive state, indicating it is toggled off.",
-              "fieldName": "active",
+              "kind": "method",
+              "name": "setInitialFocus",
+              "privacy": "public",
+              "parameters": [
+                {
+                  "name": "prefferableElement",
+                  "default": "0",
+                  "type": {
+                    "text": "number"
+                  },
+                  "description": "The index of the prefferable element to focus."
+                }
+              ],
+              "description": "Sets the initial focus within the container.",
               "inheritedFrom": {
-                "name": "Buttonsimple",
-                "module": "src/components/buttonsimple/buttonsimple.component.ts"
+                "name": "FocusTrapMixin",
+                "module": "utils/mixins/FocusTrapMixin.js"
               }
             },
             {
-              "name": "soft-disabled",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "Indicates whether the button is soft disabled.\nWhen set to `true`, the button appears visually disabled but still allows\nfocus, click, and keyboard actions to be passed through.\n\n**Important:** When using soft disabled, consumers must ensure that\nthe button behaves like a disabled button, allowing only focus and\npreventing any interactions (clicks or keyboard actions) from triggering unintended actions.",
-              "fieldName": "softDisabled",
-              "inheritedFrom": {
-                "name": "Buttonsimple",
-                "module": "src/components/buttonsimple/buttonsimple.component.ts"
-              }
-            },
-            {
-              "name": "size",
-              "type": {
-                "text": "ButtonSize"
+              "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": "Simplebutton size is a super set of all the sizes supported by children components.",
-              "default": "32",
-              "fieldName": "size",
               "inheritedFrom": {
-                "name": "Buttonsimple",
-                "module": "src/components/buttonsimple/buttonsimple.component.ts"
-              }
-            },
-            {
-              "name": "role",
-              "description": "This property defines the ARIA role for the element. By default, it is set to 'button'.\nConsumers should override this role when:\n- The element is being used in a context where a different role is more appropriate.\n- Custom behaviors are implemented that require a specific ARIA role for accessibility purposes.",
-              "default": "button",
-              "fieldName": "role",
-              "inheritedFrom": {
-                "name": "Buttonsimple",
-                "module": "src/components/buttonsimple/buttonsimple.component.ts"
+                "name": "FocusTrapMixin",
+                "module": "utils/mixins/FocusTrapMixin.js"
               }
             },
             {
-              "name": "type",
-              "type": {
-                "text": "ButtonType"
+              "kind": "method",
+              "name": "getDeepActiveElement",
+              "privacy": "private",
+              "description": "Returns the deepest active element in the shadow DOM.",
+              "return": {
+                "type": {
+                  "text": ""
+                }
               },
-              "description": "This property defines the type attribute for the button element.\nThe type attribute specifies the behavior of the button when it is clicked.\n- **submit**: The button submits the form data to the server.\n- **reset**: The button resets the form data to its initial state.\n- **button**: The button does nothing when clicked.",
-              "default": "button",
-              "fieldName": "type",
               "inheritedFrom": {
-                "name": "Buttonsimple",
-                "module": "src/components/buttonsimple/buttonsimple.component.ts"
-              }
-            }
-          ],
-          "mixins": [
-            {
-              "name": "IconNameMixin",
-              "module": "/src/utils/mixins/IconNameMixin"
-            }
-          ],
-          "superclass": {
-            "name": "Buttonsimple",
-            "module": "/src/components/buttonsimple/buttonsimple.component"
-          },
-          "tagName": "mdc-chip",
-          "jsDoc": "/**\n * mdc-chip is an interactive element that can be used to represent a chip. It supports a leading icon along with label.\n * Consumers can wrap this component around a tooltip to provide additional context.\n *\n * It is recommended to keep the label text for the chip component concise and compact.\n * For best results, we recommend limiting the <b>maximum length of the label text to 20 characters</b>,\n * including empty spaces to split words.\n *\n * This component is built by extending Buttonsimple.\n *\n * @tagname mdc-chip\n *\n * @dependency mdc-icon\n * @dependency mdc-text\n *\n * @cssproperty --mdc-chip-color - The color of the chip.\n * @cssproperty --mdc-chip-border-color - The border color of the chip.\n * @cssproperty --mdc-chip-background-color - The background color of the chip.\n *\n */",
-          "customElement": true,
-          "events": [
-            {
-              "description": "(React: onClick) This event is dispatched when the button is clicked.",
-              "name": "click",
-              "reactName": "onClick",
-              "eventName": "ClickEvent",
-              "inheritedFrom": {
-                "name": "Buttonsimple",
-                "module": "src/components/buttonsimple/buttonsimple.component.ts"
-              }
-            },
-            {
-              "description": "(React: onKeyDown) This event is dispatched when a key is pressed down on the button.",
-              "name": "keydown",
-              "reactName": "onKeyDown",
-              "eventName": "KeydownEvent",
-              "inheritedFrom": {
-                "name": "Buttonsimple",
-                "module": "src/components/buttonsimple/buttonsimple.component.ts"
+                "name": "FocusTrapMixin",
+                "module": "utils/mixins/FocusTrapMixin.js"
               }
             },
             {
-              "description": "(React: onKeyUp) This event is dispatched when a key is released on the button.",
-              "name": "keyup",
-              "reactName": "onKeyUp",
-              "eventName": "KeyupEvent",
+              "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": "Buttonsimple",
-                "module": "src/components/buttonsimple/buttonsimple.component.ts"
+                "name": "FocusTrapMixin",
+                "module": "utils/mixins/FocusTrapMixin.js"
               }
             },
             {
-              "description": "(React: onFocus) This event is dispatched when the button receives focus.",
-              "name": "focus",
-              "reactName": "onFocus",
-              "eventName": "FocusEvent",
-              "inheritedFrom": {
-                "name": "Buttonsimple",
-                "module": "src/components/buttonsimple/buttonsimple.component.ts"
-              }
-            }
-          ]
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "default",
-          "declaration": {
-            "name": "Chip",
-            "module": "components/chip/chip.component.js"
-          }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "components/coachmark/coachmark.component.js",
-      "declarations": [
-        {
-          "kind": "class",
-          "description": "Coachmark component based on top of the popover component,\nwith the default value of certain properties changed.",
-          "name": "Coachmark",
-          "cssProperties": [
-            {
-              "description": "radius of the arrow border",
-              "name": "--mdc-popover-arrow-border-radius",
+              "kind": "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": "Popover",
-                "module": "src/components/popover/popover.component.ts"
+                "name": "FocusTrapMixin",
+                "module": "utils/mixins/FocusTrapMixin.js"
               }
             },
             {
-              "description": "border of the arrow",
-              "name": "--mdc-popover-arrow-border",
+              "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": "Popover",
-                "module": "src/components/popover/popover.component.ts"
+                "name": "FocusTrapMixin",
+                "module": "utils/mixins/FocusTrapMixin.js"
               }
             },
             {
-              "description": "primary background color of the popover",
-              "name": "--mdc-popover-primary-background-color",
+              "kind": "method",
+              "name": "handleKeydown",
+              "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"
               }
             },
             {
-              "description": "border color of the popover",
-              "name": "--mdc-popover-border-color",
+              "kind": "field",
+              "name": "id",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "description": "The unique ID of the popover.",
+              "attribute": "id",
+              "reflects": true,
               "inheritedFrom": {
                 "name": "Popover",
-                "module": "src/components/popover/popover.component.ts"
+                "module": "components/popover/popover.component.js"
               }
             },
             {
-              "description": "inverted background color of the popover",
-              "name": "--mdc-popover-inverted-background-color",
+              "kind": "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,
               "inheritedFrom": {
                 "name": "Popover",
-                "module": "src/components/popover/popover.component.ts"
+                "module": "components/popover/popover.component.js"
               }
             },
             {
-              "description": "inverted border color of the popover",
-              "name": "--mdc-popover-inverted-border-color",
+              "kind": "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,
               "inheritedFrom": {
                 "name": "Popover",
-                "module": "src/components/popover/popover.component.ts"
+                "module": "components/popover/popover.component.js"
               }
             },
             {
-              "description": "inverted text color of the popover",
-              "name": "--mdc-popover-inverted-text-color",
+              "kind": "field",
+              "name": "visible",
+              "type": {
+                "text": "boolean"
+              },
+              "description": "The visibility of the popover.",
+              "default": "false",
+              "attribute": "visible",
+              "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",
-              "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": "offset",
               "type": {
-                "text": "PopoverTrigger"
+                "text": "number"
               },
-              "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",
+              "description": "The offset of the popover.",
+              "default": "4",
+              "attribute": "offset",
               "reflects": true,
               "inheritedFrom": {
                 "name": "Popover",
@@ -3865,13 +3963,13 @@
             },
             {
               "kind": "field",
-              "name": "showArrow",
+              "name": "focusTrap",
               "type": {
                 "text": "boolean"
               },
-              "description": "The arrow visibility of the Coachmark.",
-              "default": "true",
-              "attribute": "show-arrow",
+              "description": "Determines whether the focus trap is enabled.\nIf true, focus will be restricted to the content within this component.",
+              "default": "false",
+              "attribute": "focus-trap",
               "reflects": true,
               "inheritedFrom": {
                 "name": "Popover",
@@ -3880,13 +3978,13 @@
             },
             {
               "kind": "field",
-              "name": "closeButton",
+              "name": "preventScroll",
               "type": {
                 "text": "boolean"
               },
-              "description": "The close button visibility of the Coachmark.",
-              "default": "true",
-              "attribute": "close-button",
+              "description": "Prevent outside scrolling when popover show.",
+              "default": "false",
+              "attribute": "prevent-scroll",
               "reflects": true,
               "inheritedFrom": {
                 "name": "Popover",
@@ -3895,13 +3993,13 @@
             },
             {
               "kind": "field",
-              "name": "disableAriaExpanded",
+              "name": "interactive",
               "type": {
                 "text": "boolean"
               },
-              "description": "Disable aria-expanded attribute on trigger element.",
-              "default": "true",
-              "attribute": "disable-aria-expanded",
+              "description": "Determines whether the popover is interactive。",
+              "default": "false",
+              "attribute": "interactive",
               "reflects": true,
               "inheritedFrom": {
                 "name": "Popover",
@@ -3910,13 +4008,13 @@
             },
             {
               "kind": "field",
-              "name": "color",
+              "name": "delay",
               "type": {
-                "text": "PopoverColor"
+                "text": "string"
               },
-              "description": "Color of the popover\n- **tonal**\n- **contrast**",
-              "default": "tonal",
-              "attribute": "color",
+              "description": "The delay of the show/hide popover.",
+              "default": "0,0",
+              "attribute": "delay",
               "reflects": true,
               "inheritedFrom": {
                 "name": "Popover",
@@ -3925,479 +4023,323 @@
             },
             {
               "kind": "field",
-              "name": "enabledFocusTrap",
+              "name": "hideOnEscape",
               "type": {
                 "text": "boolean"
               },
-              "description": "Determines whether the focus trap is enabled.\nIf true, focus will be restricted to the content within this component.",
+              "description": "Hide popover on escape key press.",
               "default": "false",
-              "attribute": "enabledFocusTrap",
+              "attribute": "hide-on-escape",
+              "reflects": true,
               "inheritedFrom": {
-                "name": "FocusTrapMixin",
-                "module": "utils/mixins/FocusTrapMixin.js"
+                "name": "Popover",
+                "module": "components/popover/popover.component.js"
               }
             },
             {
               "kind": "field",
-              "name": "enabledPreventScroll",
+              "name": "hideOnBlur",
               "type": {
                 "text": "boolean"
               },
-              "description": "Prevent outside scrolling when popover show.",
+              "description": "Hide popover on blur.",
               "default": "false",
-              "attribute": "enabledPreventScroll",
+              "attribute": "hide-on-blur",
+              "reflects": true,
               "inheritedFrom": {
-                "name": "FocusTrapMixin",
-                "module": "utils/mixins/FocusTrapMixin.js"
+                "name": "Popover",
+                "module": "components/popover/popover.component.js"
               }
             },
             {
               "kind": "field",
-              "name": "shouldWrapFocus",
+              "name": "hideOnOutsideClick",
               "type": {
-                "text": "() => boolean"
+                "text": "boolean"
               },
+              "description": "Hide on outside click of the popover.",
+              "default": "false",
+              "attribute": "hide-on-outside-click",
+              "reflects": true,
               "inheritedFrom": {
-                "name": "FocusTrapMixin",
-                "module": "utils/mixins/FocusTrapMixin.js"
-              }
-            },
-            {
-              "kind": "method",
-              "name": "deactivateFocusTrap",
-              "description": "Deactivate the focus trap.",
-              "inheritedFrom": {
-                "name": "FocusTrapMixin",
-                "module": "utils/mixins/FocusTrapMixin.js"
+                "name": "Popover",
+                "module": "components/popover/popover.component.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": ""
-                }
+              "kind": "field",
+              "name": "focusBackToTrigger",
+              "type": {
+                "text": "boolean"
               },
-              "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": ""
-                }
+              "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"
+              }
+            },
+            {
+              "kind": "field",
+              "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",
+              "attribute": "backdrop",
+              "reflects": true,
               "inheritedFrom": {
-                "name": "FocusTrapMixin",
-                "module": "utils/mixins/FocusTrapMixin.js"
+                "name": "Popover",
+                "module": "components/popover/popover.component.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": ""
-                }
+              "kind": "field",
+              "name": "flip",
+              "type": {
+                "text": "boolean"
               },
+              "description": "Changes the placement of popover to keep it in view when scrolling.",
+              "default": "true",
+              "attribute": "flip",
+              "reflects": true,
               "inheritedFrom": {
-                "name": "FocusTrapMixin",
-                "module": "utils/mixins/FocusTrapMixin.js"
+                "name": "Popover",
+                "module": "components/popover/popover.component.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": ""
-                }
+              "kind": "field",
+              "name": "size",
+              "type": {
+                "text": "boolean"
               },
+              "description": "Changes the size of popover to keep it in view when scrolling.",
+              "default": "false",
+              "attribute": "size",
+              "reflects": true,
               "inheritedFrom": {
-                "name": "FocusTrapMixin",
-                "module": "utils/mixins/FocusTrapMixin.js"
+                "name": "Popover",
+                "module": "components/popover/popover.component.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": ""
-                }
+              "kind": "field",
+              "name": "zIndex",
+              "type": {
+                "text": "number"
               },
+              "description": "The z-index of the popover.",
+              "default": "1000",
+              "attribute": "z-index",
+              "reflects": true,
               "inheritedFrom": {
-                "name": "FocusTrapMixin",
-                "module": "utils/mixins/FocusTrapMixin.js"
+                "name": "Popover",
+                "module": "components/popover/popover.component.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": ""
-                }
+              "kind": "field",
+              "name": "appendTo",
+              "type": {
+                "text": "string"
               },
+              "default": "''",
+              "description": "Element ID that the popover append to.",
+              "attribute": "append-to",
+              "reflects": true,
               "inheritedFrom": {
-                "name": "FocusTrapMixin",
-                "module": "utils/mixins/FocusTrapMixin.js"
+                "name": "Popover",
+                "module": "components/popover/popover.component.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": ""
-                }
+              "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",
               "inheritedFrom": {
-                "name": "FocusTrapMixin",
-                "module": "utils/mixins/FocusTrapMixin.js"
+                "name": "Popover",
+                "module": "components/popover/popover.component.js"
               }
             },
             {
-              "kind": "method",
-              "name": "isInteractiveElement",
-              "privacy": "private",
-              "return": {
-                "type": {
-                  "text": ""
-                }
+              "kind": "field",
+              "name": "role",
+              "type": {
+                "text": "HTMLElement['role']"
               },
-              "parameters": [
-                {
-                  "name": "element",
-                  "type": {
-                    "text": "HTMLElement"
-                  },
-                  "description": "The element to check."
-                }
-              ],
-              "description": "Checks if the element is interactive.",
+              "description": "Role of the popover",
+              "default": "dialog",
+              "attribute": "role",
+              "reflects": true,
               "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": "ariaLabelledby",
+              "type": {
+                "text": "string | null"
               },
+              "default": "null",
+              "description": "aria-labelledby for an interactive popover only, defaults to the trigger component id.\nUsed in nested cases where the triggerComponent isn't the actual button.",
+              "attribute": "aria-labelledby",
+              "reflects": true,
               "inheritedFrom": {
-                "name": "FocusTrapMixin",
-                "module": "utils/mixins/FocusTrapMixin.js"
+                "name": "Popover",
+                "module": "components/popover/popover.component.js"
               }
             },
             {
-              "kind": "method",
-              "name": "findFocusable",
-              "privacy": "private",
-              "return": {
-                "type": {
-                  "text": ""
-                }
+              "kind": "field",
+              "name": "ariaDescribedby",
+              "type": {
+                "text": "string | null"
               },
-              "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.",
+              "default": "null",
+              "description": "aria-describedby of the popover.",
+              "attribute": "aria-describedby",
+              "reflects": true,
               "inheritedFrom": {
-                "name": "FocusTrapMixin",
-                "module": "utils/mixins/FocusTrapMixin.js"
+                "name": "Popover",
+                "module": "components/popover/popover.component.js"
               }
             },
             {
-              "kind": "method",
-              "name": "setFocusableElements",
+              "kind": "field",
+              "name": "arrowElement",
+              "type": {
+                "text": "HTMLElement | null"
+              },
               "privacy": "public",
-              "description": "Updates the list of focusable elements within the component's shadow root.",
+              "default": "null",
               "inheritedFrom": {
-                "name": "FocusTrapMixin",
-                "module": "utils/mixins/FocusTrapMixin.js"
+                "name": "Popover",
+                "module": "components/popover/popover.component.js"
               }
             },
             {
-              "kind": "method",
-              "name": "setInitialFocus",
+              "kind": "field",
+              "name": "triggerElement",
+              "type": {
+                "text": "HTMLElement | null"
+              },
               "privacy": "public",
-              "parameters": [
-                {
-                  "name": "prefferableElement",
-                  "default": "0",
-                  "type": {
-                    "text": "number"
-                  },
-                  "description": "The index of the prefferable element to focus."
-                }
-              ],
-              "description": "Sets the initial focus within the container.",
+              "default": "null",
               "inheritedFrom": {
-                "name": "FocusTrapMixin",
-                "module": "utils/mixins/FocusTrapMixin.js"
+                "name": "Popover",
+                "module": "components/popover/popover.component.js"
               }
             },
             {
               "kind": "method",
-              "name": "calculateNextIndex",
+              "name": "setupTriggerListener",
               "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": "Sets up the trigger event listeners based on the trigger type.",
               "inheritedFrom": {
-                "name": "FocusTrapMixin",
-                "module": "utils/mixins/FocusTrapMixin.js"
+                "name": "Popover",
+                "module": "components/popover/popover.component.js"
               }
             },
             {
               "kind": "method",
-              "name": "getDeepActiveElement",
+              "name": "removeEventListeners",
               "privacy": "private",
-              "description": "Returns the deepest active element in the shadow DOM.",
-              "return": {
-                "type": {
-                  "text": ""
-                }
-              },
+              "description": "Removes the trigger event listeners.",
               "inheritedFrom": {
-                "name": "FocusTrapMixin",
-                "module": "utils/mixins/FocusTrapMixin.js"
+                "name": "Popover",
+                "module": "components/popover/popover.component.js"
               }
             },
             {
-              "kind": "method",
-              "name": "findElement",
+              "kind": "field",
+              "name": "onOutsidePopoverClick",
               "privacy": "private",
+              "description": "Handles the outside click event to close the popover.",
               "parameters": [
                 {
-                  "name": "activeElement",
-                  "type": {
-                    "text": "HTMLElement"
-                  },
-                  "description": "The active element."
+                  "description": "The mouse event.",
+                  "name": "event"
                 }
               ],
-              "description": "Finds the index of the active element within the focusable elements.",
-              "return": {
-                "type": {
-                  "text": ""
-                }
-              },
               "inheritedFrom": {
-                "name": "FocusTrapMixin",
-                "module": "utils/mixins/FocusTrapMixin.js"
+                "name": "Popover",
+                "module": "components/popover/popover.component.js"
               }
             },
             {
-              "kind": "method",
-              "name": "isEqualFocusNode",
+              "kind": "field",
+              "name": "onEscapeKeydown",
               "privacy": "private",
+              "description": "Handles the escape keydown event to close the popover.",
               "parameters": [
                 {
-                  "name": "activeElement",
-                  "type": {
-                    "text": "HTMLElement"
-                  },
-                  "description": "The active element."
-                },
-                {
-                  "name": "element",
-                  "type": {
-                    "text": "HTMLElement"
-                  },
-                  "description": "The element to compare."
+                  "description": "The keyboard event.",
+                  "name": "event"
                 }
               ],
-              "description": "Checks if the active element is equal to the given element.",
-              "return": {
-                "type": {
-                  "text": ""
-                }
-              },
               "inheritedFrom": {
-                "name": "FocusTrapMixin",
-                "module": "utils/mixins/FocusTrapMixin.js"
+                "name": "Popover",
+                "module": "components/popover/popover.component.js"
               }
             },
             {
-              "kind": "method",
-              "name": "trapFocus",
+              "kind": "field",
+              "name": "onPopoverFocusOut",
               "privacy": "private",
+              "description": "Handles the popover focus out event.",
               "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": "The focus event.",
+                  "name": "event"
                 }
               ],
-              "description": "Traps focus within the container.",
               "inheritedFrom": {
-                "name": "FocusTrapMixin",
-                "module": "utils/mixins/FocusTrapMixin.js"
+                "name": "Popover",
+                "module": "components/popover/popover.component.js"
               }
             },
             {
               "kind": "method",
-              "name": "handleKeydown",
+              "name": "isOpenUpdated",
               "privacy": "private",
               "parameters": [
                 {
-                  "name": "event",
+                  "name": "oldValue",
                   "type": {
-                    "text": "KeyboardEvent"
+                    "text": "boolean"
                   },
-                  "description": "The keyboard event."
+                  "description": "The old value of the visible property."
+                },
+                {
+                  "name": "newValue",
+                  "type": {
+                    "text": "boolean"
+                  },
+                  "description": "The new value of the visible property."
                 }
               ],
-              "description": "Traps focus within the container.",
+              "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": "field",
-              "name": "id",
-              "type": {
-                "text": "string"
-              },
-              "default": "''",
-              "description": "The unique ID of the popover.",
-              "attribute": "id",
-              "reflects": true,
+              "name": "startCloseDelay",
+              "privacy": "private",
+              "description": "Starts the close delay timer.\nIf the popover is not interactive, it will close the popover after the delay.",
               "inheritedFrom": {
                 "name": "Popover",
                 "module": "components/popover/popover.component.js"
@@ -4405,14 +4347,9 @@
             },
             {
               "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,
+              "name": "cancelCloseDelay",
+              "privacy": "private",
+              "description": "Cancels the close delay timer.",
               "inheritedFrom": {
                 "name": "Popover",
                 "module": "components/popover/popover.component.js"
@@ -4420,14 +4357,9 @@
             },
             {
               "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,
+              "name": "showPopover",
+              "privacy": "public",
+              "description": "Shows the popover.",
               "inheritedFrom": {
                 "name": "Popover",
                 "module": "components/popover/popover.component.js"
@@ -4435,14 +4367,9 @@
             },
             {
               "kind": "field",
-              "name": "visible",
-              "type": {
-                "text": "boolean"
-              },
-              "description": "The visibility of the popover.",
-              "default": "false",
-              "attribute": "visible",
-              "reflects": true,
+              "name": "hidePopover",
+              "privacy": "public",
+              "description": "Hides the popover.",
               "inheritedFrom": {
                 "name": "Popover",
                 "module": "components/popover/popover.component.js"
@@ -4450,859 +4377,932 @@
             },
             {
               "kind": "field",
-              "name": "offset",
-              "type": {
-                "text": "number"
-              },
-              "description": "The offset of the popover.",
-              "default": "4",
-              "attribute": "offset",
-              "reflects": true,
+              "name": "togglePopoverVisible",
+              "privacy": "public",
+              "description": "Toggles the popover visibility.",
               "inheritedFrom": {
                 "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.",
-              "default": "false",
-              "attribute": "focus-trap",
-              "reflects": true,
+              "kind": "method",
+              "name": "handleCreatePopoverFirstUpdate",
+              "privacy": "private",
+              "description": "Sets the focusable elements inside the popover.",
               "inheritedFrom": {
                 "name": "Popover",
                 "module": "components/popover/popover.component.js"
               }
             },
             {
-              "kind": "field",
-              "name": "preventScroll",
-              "type": {
-                "text": "boolean"
-              },
-              "description": "Prevent outside scrolling when popover show.",
-              "default": "false",
-              "attribute": "prevent-scroll",
-              "reflects": true,
+              "kind": "method",
+              "name": "positionPopover",
+              "privacy": "private",
+              "description": "Positions the popover based on the trigger element.\nIt also handles the flip, size and arrow placement.\nIt uses the floating-ui/dom library to calculate the position.",
+              "inheritedFrom": {
+                "name": "Popover",
+                "module": "components/popover/popover.component.js"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "utils",
+              "default": "new PopoverUtils(this)",
               "inheritedFrom": {
                 "name": "Popover",
                 "module": "components/popover/popover.component.js"
               }
-            },
+            }
+          ],
+          "attributes": [
             {
-              "kind": "field",
-              "name": "interactive",
+              "name": "trigger",
               "type": {
-                "text": "boolean"
+                "text": "PopoverTrigger"
               },
-              "description": "Determines whether the popover is interactive。",
-              "default": "false",
-              "attribute": "interactive",
-              "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",
+              "fieldName": "trigger",
               "inheritedFrom": {
                 "name": "Popover",
-                "module": "components/popover/popover.component.js"
+                "module": "src/components/popover/popover.component.ts"
               }
             },
             {
-              "kind": "field",
-              "name": "delay",
+              "name": "show-arrow",
               "type": {
-                "text": "string"
+                "text": "boolean"
               },
-              "description": "The delay of the show/hide popover.",
-              "default": "0,0",
-              "attribute": "delay",
-              "reflects": true,
+              "description": "The arrow visibility of the Coachmark.",
+              "default": "true",
+              "fieldName": "showArrow",
               "inheritedFrom": {
                 "name": "Popover",
-                "module": "components/popover/popover.component.js"
+                "module": "src/components/popover/popover.component.ts"
               }
             },
             {
-              "kind": "field",
-              "name": "hideOnEscape",
+              "name": "close-button",
               "type": {
                 "text": "boolean"
               },
-              "description": "Hide popover on escape key press.",
-              "default": "false",
-              "attribute": "hide-on-escape",
-              "reflects": true,
+              "description": "The close button visibility of the Coachmark.",
+              "default": "true",
+              "fieldName": "closeButton",
               "inheritedFrom": {
                 "name": "Popover",
-                "module": "components/popover/popover.component.js"
+                "module": "src/components/popover/popover.component.ts"
               }
             },
             {
-              "kind": "field",
-              "name": "hideOnBlur",
+              "name": "disable-aria-expanded",
               "type": {
                 "text": "boolean"
               },
-              "description": "Hide popover on blur.",
-              "default": "false",
-              "attribute": "hide-on-blur",
-              "reflects": true,
+              "description": "Disable aria-expanded attribute on trigger element.",
+              "default": "true",
+              "fieldName": "disableAriaExpanded",
               "inheritedFrom": {
                 "name": "Popover",
-                "module": "components/popover/popover.component.js"
+                "module": "src/components/popover/popover.component.ts"
               }
             },
             {
-              "kind": "field",
-              "name": "hideOnOutsideClick",
+              "name": "enabledFocusTrap",
               "type": {
                 "text": "boolean"
               },
-              "description": "Hide on outside click of the popover.",
+              "description": "Determines whether the focus trap is enabled.\nIf true, focus will be restricted to the content within this component.",
               "default": "false",
-              "attribute": "hide-on-outside-click",
-              "reflects": true,
+              "fieldName": "enabledFocusTrap",
               "inheritedFrom": {
-                "name": "Popover",
-                "module": "components/popover/popover.component.js"
+                "name": "FocusTrapMixin",
+                "module": "src/utils/mixins/FocusTrapMixin.ts"
               }
             },
             {
-              "kind": "field",
-              "name": "focusBackToTrigger",
+              "name": "enabledPreventScroll",
               "type": {
                 "text": "boolean"
               },
-              "description": "The focus back to trigger after the popover hide.",
+              "description": "Prevent outside scrolling when popover show.",
               "default": "false",
-              "attribute": "focus-back-to-trigger",
-              "reflects": true,
+              "fieldName": "enabledPreventScroll",
               "inheritedFrom": {
-                "name": "Popover",
-                "module": "components/popover/popover.component.js"
+                "name": "FocusTrapMixin",
+                "module": "src/utils/mixins/FocusTrapMixin.ts"
               }
             },
             {
-              "kind": "field",
-              "name": "backdrop",
+              "name": "id",
               "type": {
-                "text": "boolean"
+                "text": "string"
               },
-              "description": "Determines whether the popover with backdrop.\nOther than popover and trigger element, the rest of the screen will be covered with a backdrop.",
-              "default": "false",
-              "attribute": "backdrop",
-              "reflects": true,
+              "default": "''",
+              "description": "The unique ID of the popover.",
+              "fieldName": "id",
               "inheritedFrom": {
                 "name": "Popover",
-                "module": "components/popover/popover.component.js"
+                "module": "src/components/popover/popover.component.ts"
               }
             },
             {
-              "kind": "field",
-              "name": "flip",
+              "name": "triggerID",
               "type": {
-                "text": "boolean"
+                "text": "string"
               },
-              "description": "Changes the placement of popover to keep it in view when scrolling.",
-              "default": "true",
-              "attribute": "flip",
-              "reflects": true,
+              "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": "components/popover/popover.component.js"
+                "module": "src/components/popover/popover.component.ts"
               }
             },
             {
-              "kind": "field",
-              "name": "size",
+              "name": "placement",
               "type": {
-                "text": "boolean"
+                "text": "PopoverPlacement"
               },
-              "description": "Changes the size of popover to keep it in view when scrolling.",
-              "default": "false",
-              "attribute": "size",
-              "reflects": true,
+              "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": "components/popover/popover.component.js"
+                "module": "src/components/popover/popover.component.ts"
               }
             },
             {
-              "kind": "field",
-              "name": "zIndex",
+              "name": "color",
               "type": {
-                "text": "number"
+                "text": "PopoverColor"
               },
-              "description": "The z-index of the popover.",
-              "default": "1000",
-              "attribute": "z-index",
-              "reflects": true,
+              "description": "Color of the popover\n- **tonal**\n- **contrast**",
+              "default": "tonal",
+              "fieldName": "color",
               "inheritedFrom": {
                 "name": "Popover",
-                "module": "components/popover/popover.component.js"
+                "module": "src/components/popover/popover.component.ts"
               }
             },
             {
-              "kind": "field",
-              "name": "appendTo",
+              "name": "visible",
               "type": {
-                "text": "string"
+                "text": "boolean"
               },
-              "default": "''",
-              "description": "Element ID that the popover append to.",
-              "attribute": "append-to",
-              "reflects": true,
+              "description": "The visibility of the popover.",
+              "default": "false",
+              "fieldName": "visible",
               "inheritedFrom": {
                 "name": "Popover",
-                "module": "components/popover/popover.component.js"
+                "module": "src/components/popover/popover.component.ts"
               }
             },
             {
-              "kind": "field",
-              "name": "closeButtonAriaLabel",
+              "name": "offset",
               "type": {
-                "text": "string | null"
+                "text": "number"
               },
-              "default": "null",
-              "description": "aria-label attribute to be set for close button accessibility.",
-              "attribute": "close-button-aria-label",
+              "description": "The offset of the popover.",
+              "default": "4",
+              "fieldName": "offset",
               "inheritedFrom": {
                 "name": "Popover",
-                "module": "components/popover/popover.component.js"
+                "module": "src/components/popover/popover.component.ts"
               }
             },
             {
-              "kind": "field",
-              "name": "role",
+              "name": "focus-trap",
               "type": {
-                "text": "HTMLElement['role']"
+                "text": "boolean"
               },
-              "description": "Role of the popover",
-              "default": "dialog",
-              "attribute": "role",
-              "reflects": true,
+              "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": "components/popover/popover.component.js"
+                "module": "src/components/popover/popover.component.ts"
               }
             },
             {
-              "kind": "field",
-              "name": "ariaLabelledby",
+              "name": "prevent-scroll",
               "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.",
-              "attribute": "aria-labelledby",
-              "reflects": true,
+              "description": "Prevent outside scrolling when popover show.",
+              "default": "false",
+              "fieldName": "preventScroll",
               "inheritedFrom": {
                 "name": "Popover",
-                "module": "components/popover/popover.component.js"
+                "module": "src/components/popover/popover.component.ts"
               }
             },
             {
-              "kind": "field",
-              "name": "ariaDescribedby",
+              "name": "interactive",
               "type": {
-                "text": "string | null"
+                "text": "boolean"
               },
-              "default": "null",
-              "description": "aria-describedby of the popover.",
-              "attribute": "aria-describedby",
-              "reflects": true,
+              "description": "Determines whether the popover is interactive。",
+              "default": "false",
+              "fieldName": "interactive",
               "inheritedFrom": {
                 "name": "Popover",
-                "module": "components/popover/popover.component.js"
+                "module": "src/components/popover/popover.component.ts"
               }
             },
             {
-              "kind": "field",
-              "name": "arrowElement",
+              "name": "delay",
               "type": {
-                "text": "HTMLElement | null"
+                "text": "string"
               },
-              "privacy": "public",
-              "default": "null",
+              "description": "The delay of the show/hide popover.",
+              "default": "0,0",
+              "fieldName": "delay",
               "inheritedFrom": {
                 "name": "Popover",
-                "module": "components/popover/popover.component.js"
+                "module": "src/components/popover/popover.component.ts"
               }
             },
             {
-              "kind": "field",
-              "name": "triggerElement",
+              "name": "hide-on-escape",
               "type": {
-                "text": "HTMLElement | null"
+                "text": "boolean"
               },
-              "privacy": "public",
-              "default": "null",
+              "description": "Hide popover on escape key press.",
+              "default": "false",
+              "fieldName": "hideOnEscape",
               "inheritedFrom": {
                 "name": "Popover",
-                "module": "components/popover/popover.component.js"
+                "module": "src/components/popover/popover.component.ts"
               }
             },
             {
-              "kind": "method",
-              "name": "setupTriggerListener",
-              "privacy": "private",
-              "description": "Sets up the trigger event listeners based on the trigger type.",
+              "name": "hide-on-blur",
+              "type": {
+                "text": "boolean"
+              },
+              "description": "Hide popover on blur.",
+              "default": "false",
+              "fieldName": "hideOnBlur",
               "inheritedFrom": {
                 "name": "Popover",
-                "module": "components/popover/popover.component.js"
+                "module": "src/components/popover/popover.component.ts"
               }
             },
             {
-              "kind": "method",
-              "name": "removeEventListeners",
-              "privacy": "private",
-              "description": "Removes the trigger event listeners.",
+              "name": "hide-on-outside-click",
+              "type": {
+                "text": "boolean"
+              },
+              "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": "onOutsidePopoverClick",
-              "privacy": "private",
-              "description": "Handles the outside click event to close the popover.",
-              "parameters": [
-                {
-                  "description": "The mouse event.",
-                  "name": "event"
-                }
-              ],
+              "name": "focus-back-to-trigger",
+              "type": {
+                "text": "boolean"
+              },
+              "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": "onEscapeKeydown",
-              "privacy": "private",
-              "description": "Handles the escape keydown event to close the popover.",
-              "parameters": [
-                {
-                  "description": "The keyboard event.",
-                  "name": "event"
-                }
-              ],
+              "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": "components/popover/popover.component.js"
+                "module": "src/components/popover/popover.component.ts"
               }
             },
             {
-              "kind": "field",
-              "name": "onPopoverFocusOut",
-              "privacy": "private",
-              "description": "Handles the popover focus out event.",
-              "parameters": [
-                {
-                  "description": "The focus event.",
-                  "name": "event"
-                }
-              ],
+              "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": "components/popover/popover.component.js"
+                "module": "src/components/popover/popover.component.ts"
               }
             },
             {
-              "kind": "method",
-              "name": "isOpenUpdated",
-              "privacy": "private",
-              "parameters": [
-                {
-                  "name": "oldValue",
-                  "type": {
-                    "text": "boolean"
-                  },
-                  "description": "The old value of the visible property."
-                },
-                {
-                  "name": "newValue",
-                  "type": {
-                    "text": "boolean"
-                  },
-                  "description": "The new value of the visible property."
-                }
-              ],
-              "description": "Handles the popover visibility change and position the popover.\nHandles the exit event to close the popover.",
+              "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": "components/popover/popover.component.js"
+                "module": "src/components/popover/popover.component.ts"
               }
             },
             {
-              "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": "z-index",
+              "type": {
+                "text": "number"
+              },
+              "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": "cancelCloseDelay",
-              "privacy": "private",
-              "description": "Cancels the close delay timer.",
+              "name": "append-to",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "description": "Element ID that the popover append to.",
+              "fieldName": "appendTo",
               "inheritedFrom": {
                 "name": "Popover",
-                "module": "components/popover/popover.component.js"
+                "module": "src/components/popover/popover.component.ts"
               }
             },
             {
-              "kind": "field",
-              "name": "showPopover",
-              "privacy": "public",
-              "description": "Shows the popover.",
+              "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": "components/popover/popover.component.js"
+                "module": "src/components/popover/popover.component.ts"
               }
             },
             {
-              "kind": "field",
-              "name": "hidePopover",
-              "privacy": "public",
-              "description": "Hides the popover.",
+              "name": "role",
+              "type": {
+                "text": "HTMLElement['role']"
+              },
+              "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": "togglePopoverVisible",
-              "privacy": "public",
-              "description": "Toggles the popover visibility.",
+              "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": "components/popover/popover.component.js"
+                "module": "src/components/popover/popover.component.ts"
               }
             },
             {
-              "kind": "method",
-              "name": "handleCreatePopoverFirstUpdate",
-              "privacy": "private",
-              "description": "Sets the focusable elements inside the popover.",
+              "name": "aria-describedby",
+              "type": {
+                "text": "string | null"
+              },
+              "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"
               }
+            }
+          ],
+          "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 * @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/chip/chip.component.js",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "mdc-chip is an interactive element that can be used to represent a chip. It supports a leading icon along with label.\nConsumers can wrap this component around a tooltip to provide additional context.\n\nIt is recommended to keep the label text for the chip component concise and compact.\nFor best results, we recommend limiting the <b>maximum length of the label text to 20 characters</b>,\nincluding empty spaces to split words.\n\nThis component is built by extending Buttonsimple.",
+          "name": "Chip",
+          "cssProperties": [
+            {
+              "description": "The color of the chip.",
+              "name": "--mdc-chip-color"
+            },
+            {
+              "description": "The border color of the chip.",
+              "name": "--mdc-chip-border-color"
+            },
+            {
+              "description": "The background color of the chip.",
+              "name": "--mdc-chip-background-color"
+            }
+          ],
+          "members": [
+            {
+              "kind": "field",
+              "name": "color",
+              "type": {
+                "text": "ColorType"
+              },
+              "description": "The color of the chip. It supports the following colors\n- default\n- cobalt\n- gold\n- lime\n- mint\n- pink\n- purple\n- slate\n- violet",
+              "default": "default",
+              "attribute": "color",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "label",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "description": "The visible label text of the chip.\n\nWe recommend limiting the <b>maximum length of the label text to 20 characters</b>,\nincluding empty spaces to split words.",
+              "attribute": "label"
             },
             {
               "kind": "method",
-              "name": "positionPopover",
+              "name": "renderIcon",
               "privacy": "private",
-              "description": "Positions the popover based on the trigger element.\nIt also handles the flip, size and arrow placement.\nIt uses the floating-ui/dom library to calculate the position.",
-              "inheritedFrom": {
-                "name": "Popover",
-                "module": "components/popover/popover.component.js"
+              "description": "Renders the icon element if available.",
+              "return": {
+                "type": {
+                  "text": ""
+                }
               }
             },
             {
               "kind": "field",
-              "name": "utils",
-              "default": "new PopoverUtils(this)",
+              "name": "role",
+              "description": "This property defines the ARIA role for the element. By default, it is set to 'button'.\nConsumers should override this role when:\n- The element is being used in a context where a different role is more appropriate.\n- Custom behaviors are implemented that require a specific ARIA role for accessibility purposes.",
+              "default": "button",
+              "attribute": "role",
+              "reflects": true,
               "inheritedFrom": {
-                "name": "Popover",
-                "module": "components/popover/popover.component.js"
-              }
-            }
-          ],
-          "attributes": [
+                "name": "Buttonsimple",
+                "module": "components/buttonsimple/buttonsimple.component.js"
+              }
+            },
             {
-              "name": "trigger",
+              "kind": "field",
+              "name": "size",
               "type": {
-                "text": "PopoverTrigger"
+                "text": "ButtonSize"
               },
-              "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",
+              "description": "Simplebutton size is a super set of all the sizes supported by children components.",
+              "default": "32",
+              "attribute": "size",
+              "reflects": true,
               "inheritedFrom": {
-                "name": "Popover",
-                "module": "src/components/popover/popover.component.ts"
+                "name": "Buttonsimple",
+                "module": "components/buttonsimple/buttonsimple.component.js"
               }
             },
             {
-              "name": "show-arrow",
+              "kind": "field",
+              "name": "active",
               "type": {
                 "text": "boolean"
               },
-              "description": "The arrow visibility of the Coachmark.",
-              "default": "true",
-              "fieldName": "showArrow",
+              "default": "undefined as unknown",
+              "description": "The button's active state indicates whether it is currently toggled on (active) or off (inactive).\nWhen the active state is true, the button is considered to be in an active state, meaning it is toggled on.\nConversely, when the active state is false, the button is in an inactive state, indicating it is toggled off.",
+              "attribute": "active",
+              "reflects": true,
               "inheritedFrom": {
-                "name": "Popover",
-                "module": "src/components/popover/popover.component.ts"
+                "name": "Buttonsimple",
+                "module": "components/buttonsimple/buttonsimple.component.js"
               }
             },
             {
-              "name": "close-button",
+              "kind": "field",
+              "name": "softDisabled",
               "type": {
                 "text": "boolean"
               },
-              "description": "The close button visibility of the Coachmark.",
-              "default": "true",
-              "fieldName": "closeButton",
+              "default": "undefined as unknown",
+              "description": "Indicates whether the button is soft disabled.\nWhen set to `true`, the button appears visually disabled but still allows\nfocus, click, and keyboard actions to be passed through.\n\n**Important:** When using soft disabled, consumers must ensure that\nthe button behaves like a disabled button, allowing only focus and\npreventing any interactions (clicks or keyboard actions) from triggering unintended actions.",
+              "attribute": "soft-disabled",
               "inheritedFrom": {
-                "name": "Popover",
-                "module": "src/components/popover/popover.component.ts"
+                "name": "Buttonsimple",
+                "module": "components/buttonsimple/buttonsimple.component.js"
               }
             },
             {
-              "name": "disable-aria-expanded",
+              "kind": "field",
+              "name": "iconName",
               "type": {
-                "text": "boolean"
+                "text": "IconNames | undefined"
               },
-              "description": "Disable aria-expanded attribute on trigger element.",
-              "default": "true",
-              "fieldName": "disableAriaExpanded",
+              "description": "Name of the icon (= filename).\n\nIf no `icon-name` is provided, no icon will be rendered.",
+              "attribute": "icon-name",
               "inheritedFrom": {
-                "name": "Popover",
-                "module": "src/components/popover/popover.component.ts"
+                "name": "IconNameMixin",
+                "module": "utils/mixins/IconNameMixin.js"
               }
             },
             {
-              "name": "enabledFocusTrap",
+              "kind": "field",
+              "name": "tabIndex",
               "type": {
-                "text": "boolean"
+                "text": "number"
               },
-              "description": "Determines whether the focus trap is enabled.\nIf true, focus will be restricted to the content within this component.",
-              "default": "false",
-              "fieldName": "enabledFocusTrap",
+              "default": "0",
+              "description": "This property specifies the tab order of the element.",
+              "attribute": "tabIndex",
+              "reflects": true,
               "inheritedFrom": {
-                "name": "FocusTrapMixin",
-                "module": "src/utils/mixins/FocusTrapMixin.ts"
+                "name": "Buttonsimple",
+                "module": "components/buttonsimple/buttonsimple.component.js"
               }
             },
             {
-              "name": "enabledPreventScroll",
+              "kind": "field",
+              "name": "disabled",
               "type": {
                 "text": "boolean"
               },
-              "description": "Prevent outside scrolling when popover show.",
               "default": "false",
-              "fieldName": "enabledPreventScroll",
+              "description": "Indicates whether the component is disabled.\nWhen the component is disabled for user interaction; it is not focusable or clickable.",
+              "attribute": "disabled",
+              "reflects": true,
               "inheritedFrom": {
-                "name": "FocusTrapMixin",
-                "module": "src/utils/mixins/FocusTrapMixin.ts"
+                "name": "Buttonsimple",
+                "module": "components/buttonsimple/buttonsimple.component.js"
               }
             },
             {
-              "name": "id",
+              "kind": "field",
+              "name": "type",
               "type": {
-                "text": "string"
+                "text": "ButtonType"
               },
-              "default": "''",
-              "description": "The unique ID of the popover.",
-              "fieldName": "id",
+              "description": "This property defines the type attribute for the button element.\nThe type attribute specifies the behavior of the button when it is clicked.\n- **submit**: The button submits the form data to the server.\n- **reset**: The button resets the form data to its initial state.\n- **button**: The button does nothing when clicked.",
+              "default": "button",
+              "attribute": "type",
+              "reflects": true,
               "inheritedFrom": {
-                "name": "Popover",
-                "module": "src/components/popover/popover.component.ts"
+                "name": "Buttonsimple",
+                "module": "components/buttonsimple/buttonsimple.component.js"
               }
             },
             {
-              "name": "triggerID",
-              "type": {
-                "text": "string"
-              },
-              "default": "''",
-              "description": "The ID of the element that triggers the popover.\nThis attribute is required for the popover to work.",
-              "fieldName": "triggerID",
+              "kind": "method",
+              "name": "executeAction",
+              "privacy": "protected",
               "inheritedFrom": {
-                "name": "Popover",
-                "module": "src/components/popover/popover.component.ts"
+                "name": "Buttonsimple",
+                "module": "components/buttonsimple/buttonsimple.component.js"
               }
             },
             {
-              "name": "placement",
-              "type": {
-                "text": "PopoverPlacement"
-              },
-              "description": "The placement of the popover.\n- **top**\n- **top-start**\n- **top-end**\n- **bottom**\n- **bottom-start**\n- **bottom-end**\n- **left**\n- **left-start**\n- **left-end**\n- **right**\n- **right-start**\n- **right-end**",
-              "default": "bottom",
-              "fieldName": "placement",
+              "kind": "method",
+              "name": "setActive",
+              "privacy": "protected",
+              "parameters": [
+                {
+                  "name": "element",
+                  "type": {
+                    "text": "HTMLElement"
+                  },
+                  "description": "The button element"
+                },
+                {
+                  "name": "active",
+                  "type": {
+                    "text": "boolean"
+                  },
+                  "description": "The active state of the element"
+                }
+              ],
+              "description": "Sets the aria-pressed attribute based on the active state of the button.",
               "inheritedFrom": {
-                "name": "Popover",
-                "module": "src/components/popover/popover.component.ts"
+                "name": "Buttonsimple",
+                "module": "components/buttonsimple/buttonsimple.component.js"
               }
             },
             {
-              "name": "color",
-              "type": {
-                "text": "PopoverColor"
-              },
-              "description": "Color of the popover\n- **tonal**\n- **contrast**",
-              "default": "tonal",
-              "fieldName": "color",
+              "kind": "method",
+              "name": "setSoftDisabled",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "element",
+                  "type": {
+                    "text": "HTMLElement"
+                  },
+                  "description": "The button element."
+                },
+                {
+                  "name": "softDisabled",
+                  "type": {
+                    "text": "boolean"
+                  },
+                  "description": "The soft-disabled state."
+                }
+              ],
+              "description": "Sets the soft-disabled attribute for the button.\nWhen soft-disabled, the button looks to be disabled but remains focusable and clickable.\nAlso sets/removes aria-disabled attribute.",
               "inheritedFrom": {
-                "name": "Popover",
-                "module": "src/components/popover/popover.component.ts"
+                "name": "Buttonsimple",
+                "module": "components/buttonsimple/buttonsimple.component.js"
               }
             },
             {
-              "name": "visible",
-              "type": {
-                "text": "boolean"
-              },
-              "description": "The visibility of the popover.",
-              "default": "false",
-              "fieldName": "visible",
+              "kind": "method",
+              "name": "setDisabled",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "element",
+                  "type": {
+                    "text": "HTMLElement"
+                  },
+                  "description": "The button element."
+                },
+                {
+                  "name": "disabled",
+                  "type": {
+                    "text": "boolean"
+                  },
+                  "description": "The disabled state."
+                }
+              ],
+              "description": "Sets the disabled attribute for the button.\nWhen disabled, the button is not focusable or clickable, and tabindex is set to -1.\nThe previous tabindex is stored and restored when enabled.\nAlso sets/removes aria-disabled attribute.",
               "inheritedFrom": {
-                "name": "Popover",
-                "module": "src/components/popover/popover.component.ts"
+                "name": "Buttonsimple",
+                "module": "components/buttonsimple/buttonsimple.component.js"
               }
             },
             {
-              "name": "offset",
-              "type": {
-                "text": "number"
-              },
-              "description": "The offset of the popover.",
-              "default": "4",
-              "fieldName": "offset",
+              "kind": "method",
+              "name": "triggerClickEvent",
+              "privacy": "private",
               "inheritedFrom": {
-                "name": "Popover",
-                "module": "src/components/popover/popover.component.ts"
+                "name": "Buttonsimple",
+                "module": "components/buttonsimple/buttonsimple.component.js"
               }
             },
             {
-              "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",
+              "kind": "method",
+              "name": "handleBlur",
+              "privacy": "private",
+              "description": "In case the button is pressed and the focus is lost while pressing,\nthe pressed class is removed.",
               "inheritedFrom": {
-                "name": "Popover",
-                "module": "src/components/popover/popover.component.ts"
+                "name": "Buttonsimple",
+                "module": "components/buttonsimple/buttonsimple.component.js"
+              }
+            },
+            {
+              "kind": "method",
+              "name": "handleKeyDown",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "event",
+                  "type": {
+                    "text": "KeyboardEvent"
+                  },
+                  "description": "The keyboard event."
+                }
+              ],
+              "description": "Handles the keydown event on the button.\nIf the key is 'Enter' or 'Space', the button is pressed.\nIf the key is 'Enter', the button is pressed. The native HTML button works in the same way.",
+              "inheritedFrom": {
+                "name": "Buttonsimple",
+                "module": "components/buttonsimple/buttonsimple.component.js"
               }
             },
             {
-              "name": "prevent-scroll",
-              "type": {
-                "text": "boolean"
-              },
-              "description": "Prevent outside scrolling when popover show.",
-              "default": "false",
-              "fieldName": "preventScroll",
+              "kind": "method",
+              "name": "handleKeyUp",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "event",
+                  "type": {
+                    "text": "KeyboardEvent"
+                  },
+                  "description": "The keyboard event."
+                }
+              ],
+              "description": "Handles the keyup event on the button.\nIf the key is 'Enter' or 'Space', the button is clicked.\nIf the key is 'Space', the button is pressed. The native HTML button works in the same way.",
               "inheritedFrom": {
-                "name": "Popover",
-                "module": "src/components/popover/popover.component.ts"
+                "name": "Buttonsimple",
+                "module": "components/buttonsimple/buttonsimple.component.js"
               }
-            },
+            }
+          ],
+          "attributes": [
             {
-              "name": "interactive",
+              "name": "color",
               "type": {
-                "text": "boolean"
+                "text": "ColorType"
               },
-              "description": "Determines whether the popover is interactive。",
-              "default": "false",
-              "fieldName": "interactive",
-              "inheritedFrom": {
-                "name": "Popover",
-                "module": "src/components/popover/popover.component.ts"
-              }
+              "description": "The color of the chip. It supports the following colors\n- default\n- cobalt\n- gold\n- lime\n- mint\n- pink\n- purple\n- slate\n- violet",
+              "default": "default",
+              "fieldName": "color"
             },
             {
-              "name": "delay",
+              "name": "label",
               "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"
-              }
+              "default": "''",
+              "description": "The visible label text of the chip.\n\nWe recommend limiting the <b>maximum length of the label text to 20 characters</b>,\nincluding empty spaces to split words.",
+              "fieldName": "label"
             },
             {
-              "name": "hide-on-escape",
+              "name": "icon-name",
               "type": {
-                "text": "boolean"
+                "text": "IconNames | undefined"
               },
-              "description": "Hide popover on escape key press.",
-              "default": "false",
-              "fieldName": "hideOnEscape",
+              "description": "Name of the icon (= filename).\n\nIf no `icon-name` is provided, no icon will be rendered.",
+              "fieldName": "iconName",
               "inheritedFrom": {
-                "name": "Popover",
-                "module": "src/components/popover/popover.component.ts"
+                "name": "IconNameMixin",
+                "module": "src/utils/mixins/IconNameMixin.ts"
               }
             },
             {
-              "name": "hide-on-blur",
+              "name": "tabIndex",
               "type": {
-                "text": "boolean"
+                "text": "number"
               },
-              "description": "Hide popover on blur.",
-              "default": "false",
-              "fieldName": "hideOnBlur",
+              "default": "0",
+              "description": "This property specifies the tab order of the element.",
+              "fieldName": "tabIndex",
               "inheritedFrom": {
-                "name": "Popover",
-                "module": "src/components/popover/popover.component.ts"
+                "name": "Buttonsimple",
+                "module": "src/components/buttonsimple/buttonsimple.component.ts"
               }
             },
             {
-              "name": "hide-on-outside-click",
+              "name": "disabled",
               "type": {
                 "text": "boolean"
               },
-              "description": "Hide on outside click of the popover.",
               "default": "false",
-              "fieldName": "hideOnOutsideClick",
+              "description": "Indicates whether the component is disabled.\nWhen the component is disabled for user interaction; it is not focusable or clickable.",
+              "fieldName": "disabled",
               "inheritedFrom": {
-                "name": "Popover",
-                "module": "src/components/popover/popover.component.ts"
+                "name": "Buttonsimple",
+                "module": "src/components/buttonsimple/buttonsimple.component.ts"
               }
             },
             {
-              "name": "focus-back-to-trigger",
+              "name": "active",
               "type": {
                 "text": "boolean"
               },
-              "description": "The focus back to trigger after the popover hide.",
               "default": "false",
-              "fieldName": "focusBackToTrigger",
+              "description": "The button's active state indicates whether it is currently toggled on (active) or off (inactive).\nWhen the active state is true, the button is considered to be in an active state, meaning it is toggled on.\nConversely, when the active state is false, the button is in an inactive state, indicating it is toggled off.",
+              "fieldName": "active",
               "inheritedFrom": {
-                "name": "Popover",
-                "module": "src/components/popover/popover.component.ts"
+                "name": "Buttonsimple",
+                "module": "src/components/buttonsimple/buttonsimple.component.ts"
               }
             },
             {
-              "name": "backdrop",
+              "name": "soft-disabled",
               "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",
+              "description": "Indicates whether the button is soft disabled.\nWhen set to `true`, the button appears visually disabled but still allows\nfocus, click, and keyboard actions to be passed through.\n\n**Important:** When using soft disabled, consumers must ensure that\nthe button behaves like a disabled button, allowing only focus and\npreventing any interactions (clicks or keyboard actions) from triggering unintended actions.",
+              "fieldName": "softDisabled",
               "inheritedFrom": {
-                "name": "Popover",
-                "module": "src/components/popover/popover.component.ts"
+                "name": "Buttonsimple",
+                "module": "src/components/buttonsimple/buttonsimple.component.ts"
               }
             },
             {
               "name": "size",
               "type": {
-                "text": "boolean"
+                "text": "ButtonSize"
               },
-              "description": "Changes the size of popover to keep it in view when scrolling.",
-              "default": "false",
+              "description": "Simplebutton size is a super set of all the sizes supported by children components.",
+              "default": "32",
               "fieldName": "size",
               "inheritedFrom": {
-                "name": "Popover",
-                "module": "src/components/popover/popover.component.ts"
+                "name": "Buttonsimple",
+                "module": "src/components/buttonsimple/buttonsimple.component.ts"
               }
             },
             {
-              "name": "z-index",
-              "type": {
-                "text": "number"
-              },
-              "description": "The z-index of the popover.",
-              "default": "1000",
-              "fieldName": "zIndex",
+              "name": "role",
+              "description": "This property defines the ARIA role for the element. By default, it is set to 'button'.\nConsumers should override this role when:\n- The element is being used in a context where a different role is more appropriate.\n- Custom behaviors are implemented that require a specific ARIA role for accessibility purposes.",
+              "default": "button",
+              "fieldName": "role",
               "inheritedFrom": {
-                "name": "Popover",
-                "module": "src/components/popover/popover.component.ts"
+                "name": "Buttonsimple",
+                "module": "src/components/buttonsimple/buttonsimple.component.ts"
               }
             },
             {
-              "name": "append-to",
+              "name": "type",
               "type": {
-                "text": "string"
+                "text": "ButtonType"
               },
-              "default": "''",
-              "description": "Element ID that the popover append to.",
-              "fieldName": "appendTo",
+              "description": "This property defines the type attribute for the button element.\nThe type attribute specifies the behavior of the button when it is clicked.\n- **submit**: The button submits the form data to the server.\n- **reset**: The button resets the form data to its initial state.\n- **button**: The button does nothing when clicked.",
+              "default": "button",
+              "fieldName": "type",
               "inheritedFrom": {
-                "name": "Popover",
-                "module": "src/components/popover/popover.component.ts"
+                "name": "Buttonsimple",
+                "module": "src/components/buttonsimple/buttonsimple.component.ts"
               }
-            },
+            }
+          ],
+          "mixins": [
             {
-              "name": "close-button-aria-label",
-              "type": {
-                "text": "string | null"
-              },
-              "default": "null",
-              "description": "aria-label attribute to be set for close button accessibility.",
-              "fieldName": "closeButtonAriaLabel",
+              "name": "IconNameMixin",
+              "module": "/src/utils/mixins/IconNameMixin"
+            }
+          ],
+          "superclass": {
+            "name": "Buttonsimple",
+            "module": "/src/components/buttonsimple/buttonsimple.component"
+          },
+          "tagName": "mdc-chip",
+          "jsDoc": "/**\n * mdc-chip is an interactive element that can be used to represent a chip. It supports a leading icon along with label.\n * Consumers can wrap this component around a tooltip to provide additional context.\n *\n * It is recommended to keep the label text for the chip component concise and compact.\n * For best results, we recommend limiting the <b>maximum length of the label text to 20 characters</b>,\n * including empty spaces to split words.\n *\n * This component is built by extending Buttonsimple.\n *\n * @tagname mdc-chip\n *\n * @dependency mdc-icon\n * @dependency mdc-text\n *\n * @cssproperty --mdc-chip-color - The color of the chip.\n * @cssproperty --mdc-chip-border-color - The border color of the chip.\n * @cssproperty --mdc-chip-background-color - The background color of the chip.\n *\n */",
+          "customElement": true,
+          "events": [
+            {
+              "description": "(React: onClick) This event is dispatched when the button is clicked.",
+              "name": "click",
+              "reactName": "onClick",
+              "eventName": "ClickEvent",
               "inheritedFrom": {
-                "name": "Popover",
-                "module": "src/components/popover/popover.component.ts"
+                "name": "Buttonsimple",
+                "module": "src/components/buttonsimple/buttonsimple.component.ts"
               }
             },
             {
-              "name": "role",
-              "type": {
-                "text": "HTMLElement['role']"
-              },
-              "description": "Role of the popover",
-              "default": "dialog",
-              "fieldName": "role",
+              "description": "(React: onKeyDown) This event is dispatched when a key is pressed down on the button.",
+              "name": "keydown",
+              "reactName": "onKeyDown",
+              "eventName": "KeydownEvent",
               "inheritedFrom": {
-                "name": "Popover",
-                "module": "src/components/popover/popover.component.ts"
+                "name": "Buttonsimple",
+                "module": "src/components/buttonsimple/buttonsimple.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",
+              "description": "(React: onKeyUp) This event is dispatched when a key is released on the button.",
+              "name": "keyup",
+              "reactName": "onKeyUp",
+              "eventName": "KeyupEvent",
               "inheritedFrom": {
-                "name": "Popover",
-                "module": "src/components/popover/popover.component.ts"
+                "name": "Buttonsimple",
+                "module": "src/components/buttonsimple/buttonsimple.component.ts"
               }
             },
             {
-              "name": "aria-describedby",
-              "type": {
-                "text": "string | null"
-              },
-              "default": "null",
-              "description": "aria-describedby of the popover.",
-              "fieldName": "ariaDescribedby",
+              "description": "(React: onFocus) This event is dispatched when the button receives focus.",
+              "name": "focus",
+              "reactName": "onFocus",
+              "eventName": "FocusEvent",
               "inheritedFrom": {
-                "name": "Popover",
-                "module": "src/components/popover/popover.component.ts"
+                "name": "Buttonsimple",
+                "module": "src/components/buttonsimple/buttonsimple.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 * @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": [
@@ -5310,8 +5310,8 @@
           "kind": "js",
           "name": "default",
           "declaration": {
-            "name": "Coachmark",
-            "module": "components/coachmark/coachmark.component.js"
+            "name": "Chip",
+            "module": "components/chip/chip.component.js"
           }
         }
       ]