@momentum-design/components 0.37.1 → 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,374 @@
                   "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"
-              }
-            },
-            {
-              "description": "(React: onKeyUp) This event is dispatched when a key is released on the button.",
-              "name": "keyup",
-              "reactName": "onKeyUp",
-              "eventName": "KeyupEvent",
-              "inheritedFrom": {
-                "name": "Buttonsimple",
-                "module": "src/components/buttonsimple/buttonsimple.component.ts"
-              }
-            },
-            {
-              "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",
-              "inheritedFrom": {
-                "name": "Popover",
-                "module": "src/components/popover/popover.component.ts"
-              }
-            },
-            {
-              "description": "border of the arrow",
-              "name": "--mdc-popover-arrow-border",
-              "inheritedFrom": {
-                "name": "Popover",
-                "module": "src/components/popover/popover.component.ts"
-              }
-            },
-            {
-              "description": "primary background color of the popover",
-              "name": "--mdc-popover-primary-background-color",
-              "inheritedFrom": {
-                "name": "Popover",
-                "module": "src/components/popover/popover.component.ts"
-              }
-            },
-            {
-              "description": "border color of the popover",
-              "name": "--mdc-popover-border-color",
               "inheritedFrom": {
-                "name": "Popover",
-                "module": "src/components/popover/popover.component.ts"
+                "name": "FocusTrapMixin",
+                "module": "utils/mixins/FocusTrapMixin.js"
               }
             },
             {
-              "description": "inverted background color of the popover",
-              "name": "--mdc-popover-inverted-background-color",
+              "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": "Popover",
-                "module": "src/components/popover/popover.component.ts"
+                "name": "FocusTrapMixin",
+                "module": "utils/mixins/FocusTrapMixin.js"
               }
             },
             {
-              "description": "inverted border color of the popover",
-              "name": "--mdc-popover-inverted-border-color",
+              "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": "inverted text color of the popover",
-              "name": "--mdc-popover-inverted-text-color",
+              "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": "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": "",
+              "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"
               }
-            }
-          ],
-          "members": [
+            },
             {
               "kind": "field",
-              "name": "trigger",
+              "name": "id",
               "type": {
-                "text": "PopoverTrigger"
+                "text": "string"
               },
-              "description": "Determines the events that cause the Coachmark to show.\nMultiple event names should be separated by spaces.\nFor example to allow both click and hover, use 'click mouseenter' as the trigger.\n- **click**\n- **mouseenter**\n- **focusin**\n- **manual**",
-              "default": "manual",
-              "attribute": "trigger",
+              "default": "''",
+              "description": "The unique ID of the popover.",
+              "attribute": "id",
               "reflects": true,
               "inheritedFrom": {
                 "name": "Popover",
@@ -3865,13 +3903,13 @@
             },
             {
               "kind": "field",
-              "name": "showArrow",
+              "name": "triggerID",
               "type": {
-                "text": "boolean"
+                "text": "string"
               },
-              "description": "The arrow visibility of the Coachmark.",
-              "default": "true",
-              "attribute": "show-arrow",
+              "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",
@@ -3880,13 +3918,13 @@
             },
             {
               "kind": "field",
-              "name": "closeButton",
+              "name": "placement",
               "type": {
-                "text": "boolean"
+                "text": "PopoverPlacement"
               },
-              "description": "The close button visibility of the Coachmark.",
-              "default": "true",
-              "attribute": "close-button",
+              "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",
@@ -3895,13 +3933,13 @@
             },
             {
               "kind": "field",
-              "name": "disableAriaExpanded",
+              "name": "visible",
               "type": {
                 "text": "boolean"
               },
-              "description": "Disable aria-expanded attribute on trigger element.",
-              "default": "true",
-              "attribute": "disable-aria-expanded",
+              "description": "The visibility of the popover.",
+              "default": "false",
+              "attribute": "visible",
               "reflects": true,
               "inheritedFrom": {
                 "name": "Popover",
@@ -3910,13 +3948,13 @@
             },
             {
               "kind": "field",
-              "name": "color",
+              "name": "offset",
               "type": {
-                "text": "PopoverColor"
+                "text": "number"
               },
-              "description": "Color of the popover\n- **tonal**\n- **contrast**",
-              "default": "tonal",
-              "attribute": "color",
+              "description": "The offset of the popover.",
+              "default": "4",
+              "attribute": "offset",
               "reflects": true,
               "inheritedFrom": {
                 "name": "Popover",
@@ -3925,479 +3963,373 @@
             },
             {
               "kind": "field",
-              "name": "enabledFocusTrap",
+              "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": "enabledFocusTrap",
+              "attribute": "focus-trap",
+              "reflects": true,
               "inheritedFrom": {
-                "name": "FocusTrapMixin",
-                "module": "utils/mixins/FocusTrapMixin.js"
+                "name": "Popover",
+                "module": "components/popover/popover.component.js"
               }
             },
             {
               "kind": "field",
-              "name": "enabledPreventScroll",
+              "name": "preventScroll",
               "type": {
                 "text": "boolean"
               },
               "description": "Prevent outside scrolling when popover show.",
               "default": "false",
-              "attribute": "enabledPreventScroll",
+              "attribute": "prevent-scroll",
+              "reflects": true,
               "inheritedFrom": {
-                "name": "FocusTrapMixin",
-                "module": "utils/mixins/FocusTrapMixin.js"
+                "name": "Popover",
+                "module": "components/popover/popover.component.js"
               }
             },
             {
               "kind": "field",
-              "name": "shouldWrapFocus",
+              "name": "interactive",
               "type": {
-                "text": "() => boolean"
+                "text": "boolean"
               },
+              "description": "Determines whether the popover is interactive。",
+              "default": "false",
+              "attribute": "interactive",
+              "reflects": true,
               "inheritedFrom": {
-                "name": "FocusTrapMixin",
-                "module": "utils/mixins/FocusTrapMixin.js"
+                "name": "Popover",
+                "module": "components/popover/popover.component.js"
               }
             },
             {
-              "kind": "method",
-              "name": "deactivateFocusTrap",
-              "description": "Deactivate the focus trap.",
+              "kind": "field",
+              "name": "delay",
+              "type": {
+                "text": "string"
+              },
+              "description": "The delay of the show/hide popover.",
+              "default": "0,0",
+              "attribute": "delay",
+              "reflects": true,
               "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": "hideOnEscape",
+              "type": {
+                "text": "boolean"
               },
+              "description": "Hide popover on escape key press.",
+              "default": "false",
+              "attribute": "hide-on-escape",
+              "reflects": true,
               "inheritedFrom": {
-                "name": "FocusTrapMixin",
-                "module": "utils/mixins/FocusTrapMixin.js"
+                "name": "Popover",
+                "module": "components/popover/popover.component.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": ""
-                }
+              "kind": "field",
+              "name": "hideOnBlur",
+              "type": {
+                "text": "boolean"
               },
+              "description": "Hide popover on blur.",
+              "default": "false",
+              "attribute": "hide-on-blur",
+              "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": "hideOnOutsideClick",
+              "type": {
+                "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"
+                "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": "focusBackToTrigger",
+              "type": {
+                "text": "boolean"
               },
+              "description": "The focus back to trigger after the popover hide.",
+              "default": "false",
+              "attribute": "focus-back-to-trigger",
+              "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": "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": "Popover",
+                "module": "components/popover/popover.component.js"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "flip",
+              "type": {
+                "text": "boolean"
+              },
+              "description": "Changes the placement of popover to keep it in view when scrolling.",
+              "default": "true",
+              "attribute": "flip",
+              "reflects": true,
+              "inheritedFrom": {
+                "name": "Popover",
+                "module": "components/popover/popover.component.js"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "size",
+              "type": {
+                "text": "boolean"
               },
+              "description": "Changes the size of popover to keep it in view when scrolling.",
+              "default": "false",
+              "attribute": "size",
+              "reflects": true,
               "inheritedFrom": {
-                "name": "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": "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": "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": "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": "isInteractiveElement",
-              "privacy": "private",
-              "return": {
-                "type": {
-                  "text": ""
-                }
+              "kind": "field",
+              "name": "closeButtonAriaLabel",
+              "type": {
+                "text": "string | null"
               },
-              "parameters": [
-                {
-                  "name": "element",
-                  "type": {
-                    "text": "HTMLElement"
-                  },
-                  "description": "The element to check."
-                }
-              ],
-              "description": "Checks if the element is interactive.",
+              "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": "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": "role",
+              "type": {
+                "text": "HTMLElement['role']"
               },
+              "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": "findFocusable",
-              "privacy": "private",
-              "return": {
-                "type": {
-                  "text": ""
-                }
+              "kind": "field",
+              "name": "ariaLabelledby",
+              "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-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": "setFocusableElements",
-              "privacy": "public",
-              "description": "Updates the list of focusable elements within the component's shadow root.",
+              "kind": "field",
+              "name": "ariaDescribedby",
+              "type": {
+                "text": "string | null"
+              },
+              "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": "setInitialFocus",
+              "kind": "field",
+              "name": "arrowElement",
+              "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",
-              "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": ""
-                }
+              "kind": "field",
+              "name": "triggerElement",
+              "type": {
+                "text": "HTMLElement | null"
               },
+              "privacy": "public",
+              "default": "null",
               "inheritedFrom": {
-                "name": "FocusTrapMixin",
-                "module": "utils/mixins/FocusTrapMixin.js"
+                "name": "Popover",
+                "module": "components/popover/popover.component.js"
               }
             },
             {
               "kind": "method",
-              "name": "getDeepActiveElement",
+              "name": "setupTriggerListener",
               "privacy": "private",
-              "description": "Returns the deepest active element in the shadow DOM.",
-              "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": "findElement",
+              "name": "removeEventListeners",
+              "privacy": "private",
+              "description": "Removes the trigger event listeners.",
+              "inheritedFrom": {
+                "name": "Popover",
+                "module": "components/popover/popover.component.js"
+              }
+            },
+            {
+              "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.",
-              "inheritedFrom": {
-                "name": "FocusTrapMixin",
-                "module": "utils/mixins/FocusTrapMixin.js"
-              }
-            },
-            {
-              "kind": "field",
-              "name": "id",
-              "type": {
-                "text": "string"
-              },
-              "default": "''",
-              "description": "The unique ID of the popover.",
-              "attribute": "id",
-              "reflects": true,
+              "description": "Handles the popover visibility change and position the popover.\nHandles the exit event to close the popover.",
               "inheritedFrom": {
                 "name": "Popover",
                 "module": "components/popover/popover.component.js"
@@ -4405,14 +4337,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": "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"
@@ -4420,14 +4347,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": "cancelCloseDelay",
+              "privacy": "private",
+              "description": "Cancels the close delay timer.",
               "inheritedFrom": {
                 "name": "Popover",
                 "module": "components/popover/popover.component.js"
@@ -4435,14 +4357,9 @@
             },
             {
               "kind": "field",
-              "name": "visible",
-              "type": {
-                "text": "boolean"
-              },
-              "description": "The visibility of the popover.",
-              "default": "false",
-              "attribute": "visible",
-              "reflects": true,
+              "name": "showPopover",
+              "privacy": "public",
+              "description": "Shows the popover.",
               "inheritedFrom": {
                 "name": "Popover",
                 "module": "components/popover/popover.component.js"
@@ -4450,14 +4367,9 @@
             },
             {
               "kind": "field",
-              "name": "offset",
-              "type": {
-                "text": "number"
-              },
-              "description": "The offset of the popover.",
-              "default": "4",
-              "attribute": "offset",
-              "reflects": true,
+              "name": "hidePopover",
+              "privacy": "public",
+              "description": "Hides the popover.",
               "inheritedFrom": {
                 "name": "Popover",
                 "module": "components/popover/popover.component.js"
@@ -4465,44 +4377,29 @@
             },
             {
               "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,
+              "name": "togglePopoverVisible",
+              "privacy": "public",
+              "description": "Toggles the popover visibility.",
               "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": "handleCreatePopoverFirstUpdate",
+              "privacy": "private",
+              "description": "Sets the focusable elements inside the popover.",
               "inheritedFrom": {
                 "name": "Popover",
                 "module": "components/popover/popover.component.js"
               }
             },
             {
-              "kind": "field",
-              "name": "interactive",
-              "type": {
-                "text": "boolean"
-              },
-              "description": "Determines whether the popover is interactive。",
-              "default": "false",
-              "attribute": "interactive",
-              "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"
@@ -4510,799 +4407,902 @@
             },
             {
               "kind": "field",
-              "name": "delay",
-              "type": {
-                "text": "string"
-              },
-              "description": "The delay of the show/hide popover.",
-              "default": "0,0",
-              "attribute": "delay",
-              "reflects": true,
+              "name": "utils",
+              "default": "new PopoverUtils(this)",
               "inheritedFrom": {
                 "name": "Popover",
                 "module": "components/popover/popover.component.js"
               }
-            },
+            }
+          ],
+          "attributes": [
             {
-              "kind": "field",
-              "name": "hideOnEscape",
+              "name": "trigger",
               "type": {
-                "text": "boolean"
+                "text": "PopoverTrigger"
               },
-              "description": "Hide popover on escape key press.",
-              "default": "false",
-              "attribute": "hide-on-escape",
-              "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": "hideOnBlur",
+              "name": "show-arrow",
               "type": {
                 "text": "boolean"
               },
-              "description": "Hide popover on blur.",
-              "default": "false",
-              "attribute": "hide-on-blur",
-              "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": "hideOnOutsideClick",
+              "name": "close-button",
               "type": {
                 "text": "boolean"
               },
-              "description": "Hide on outside click of the popover.",
-              "default": "false",
-              "attribute": "hide-on-outside-click",
-              "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": "focusBackToTrigger",
+              "name": "disable-aria-expanded",
               "type": {
                 "text": "boolean"
               },
-              "description": "The focus back to trigger after the popover hide.",
-              "default": "false",
-              "attribute": "focus-back-to-trigger",
-              "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": "backdrop",
+              "name": "enabledFocusTrap",
               "type": {
                 "text": "boolean"
               },
-              "description": "Determines whether the popover with backdrop.\nOther than popover and trigger element, the rest of the screen will be covered with a backdrop.",
+              "description": "Determines whether the focus trap is enabled.\nIf true, focus will be restricted to the content within this component.",
               "default": "false",
-              "attribute": "backdrop",
-              "reflects": true,
+              "fieldName": "enabledFocusTrap",
               "inheritedFrom": {
-                "name": "Popover",
-                "module": "components/popover/popover.component.js"
+                "name": "FocusTrapMixin",
+                "module": "src/utils/mixins/FocusTrapMixin.ts"
               }
             },
             {
-              "kind": "field",
-              "name": "flip",
+              "name": "enabledPreventScroll",
               "type": {
                 "text": "boolean"
               },
-              "description": "Changes the placement of popover to keep it in view when scrolling.",
-              "default": "true",
-              "attribute": "flip",
-              "reflects": true,
+              "description": "Prevent outside scrolling when popover show.",
+              "default": "false",
+              "fieldName": "enabledPreventScroll",
               "inheritedFrom": {
-                "name": "Popover",
-                "module": "components/popover/popover.component.js"
+                "name": "FocusTrapMixin",
+                "module": "src/utils/mixins/FocusTrapMixin.ts"
               }
             },
             {
-              "kind": "field",
-              "name": "size",
+              "name": "id",
               "type": {
-                "text": "boolean"
+                "text": "string"
               },
-              "description": "Changes the size of popover to keep it in view when scrolling.",
-              "default": "false",
-              "attribute": "size",
-              "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": "zIndex",
+              "name": "triggerID",
               "type": {
-                "text": "number"
+                "text": "string"
               },
-              "description": "The z-index of the popover.",
-              "default": "1000",
-              "attribute": "z-index",
-              "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": "appendTo",
+              "name": "placement",
               "type": {
-                "text": "string"
+                "text": "PopoverPlacement"
               },
-              "default": "''",
-              "description": "Element ID that the popover append to.",
-              "attribute": "append-to",
-              "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": "closeButtonAriaLabel",
+              "name": "color",
               "type": {
-                "text": "string | null"
+                "text": "PopoverColor"
               },
-              "default": "null",
-              "description": "aria-label attribute to be set for close button accessibility.",
-              "attribute": "close-button-aria-label",
+              "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": "role",
+              "name": "visible",
               "type": {
-                "text": "HTMLElement['role']"
+                "text": "boolean"
               },
-              "description": "Role of the popover",
-              "default": "dialog",
-              "attribute": "role",
-              "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": "ariaLabelledby",
+              "name": "offset",
               "type": {
-                "text": "string | null"
+                "text": "number"
               },
-              "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": "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": "ariaDescribedby",
+              "name": "focus-trap",
               "type": {
-                "text": "string | null"
+                "text": "boolean"
               },
-              "default": "null",
-              "description": "aria-describedby of the popover.",
-              "attribute": "aria-describedby",
-              "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": "arrowElement",
+              "name": "prevent-scroll",
               "type": {
-                "text": "HTMLElement | null"
+                "text": "boolean"
               },
-              "privacy": "public",
-              "default": "null",
+              "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": "triggerElement",
+              "name": "interactive",
               "type": {
-                "text": "HTMLElement | null"
+                "text": "boolean"
               },
-              "privacy": "public",
-              "default": "null",
+              "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": "method",
-              "name": "setupTriggerListener",
-              "privacy": "private",
-              "description": "Sets up the trigger event listeners based on the trigger type.",
+              "name": "delay",
+              "type": {
+                "text": "string"
+              },
+              "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": "method",
-              "name": "removeEventListeners",
-              "privacy": "private",
-              "description": "Removes the trigger event listeners.",
+              "name": "hide-on-escape",
+              "type": {
+                "text": "boolean"
+              },
+              "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": "field",
-              "name": "onOutsidePopoverClick",
-              "privacy": "private",
-              "description": "Handles the outside click event to close the popover.",
-              "parameters": [
-                {
-                  "description": "The mouse event.",
-                  "name": "event"
-                }
-              ],
+              "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": "field",
-              "name": "onEscapeKeydown",
-              "privacy": "private",
-              "description": "Handles the escape keydown event to close the popover.",
-              "parameters": [
-                {
-                  "description": "The keyboard event.",
-                  "name": "event"
-                }
-              ],
+              "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": "onPopoverFocusOut",
-              "privacy": "private",
-              "description": "Handles the popover focus out event.",
-              "parameters": [
-                {
-                  "description": "The focus 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": "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": "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": "startCloseDelay",
-              "privacy": "private",
-              "description": "Starts the close delay timer.\nIf the popover is not interactive, it will close the popover after the delay.",
+              "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": "field",
-              "name": "cancelCloseDelay",
-              "privacy": "private",
-              "description": "Cancels the close delay timer.",
+              "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": "showPopover",
-              "privacy": "public",
-              "description": "Shows the popover.",
+              "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": "hidePopover",
-              "privacy": "public",
-              "description": "Hides the popover.",
+              "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": "togglePopoverVisible",
-              "privacy": "public",
-              "description": "Toggles the popover visibility.",
+              "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": "method",
-              "name": "handleCreatePopoverFirstUpdate",
-              "privacy": "private",
-              "description": "Sets the focusable elements inside 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": "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.",
+              "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": "field",
-              "name": "utils",
-              "default": "new PopoverUtils(this)",
+              "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"
               }
             }
           ],
-          "attributes": [
+          "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": [
             {
-              "name": "trigger",
+              "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": "PopoverTrigger"
+                "text": "ColorType"
               },
-              "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": "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": "renderIcon",
+              "privacy": "private",
+              "description": "Renders the icon element if available.",
+              "return": {
+                "type": {
+                  "text": ""
+                }
+              }
+            },
+            {
+              "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",
+              "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": "size",
               "type": {
-                "text": "boolean"
+                "text": "ButtonSize"
               },
-              "description": "The arrow visibility of the Coachmark.",
-              "default": "true",
-              "fieldName": "showArrow",
+              "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": "close-button",
+              "kind": "field",
+              "name": "active",
               "type": {
                 "text": "boolean"
               },
-              "description": "The close button visibility of the Coachmark.",
-              "default": "true",
-              "fieldName": "closeButton",
+              "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": "disable-aria-expanded",
+              "kind": "field",
+              "name": "softDisabled",
               "type": {
                 "text": "boolean"
               },
-              "description": "Disable aria-expanded attribute on trigger element.",
-              "default": "true",
-              "fieldName": "disableAriaExpanded",
+              "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": "enabledFocusTrap",
+              "kind": "field",
+              "name": "iconName",
               "type": {
-                "text": "boolean"
+                "text": "IconNames | undefined"
+              },
+              "description": "Name of the icon (= filename).\n\nIf no `icon-name` is provided, no icon will be rendered.",
+              "attribute": "icon-name",
+              "inheritedFrom": {
+                "name": "IconNameMixin",
+                "module": "utils/mixins/IconNameMixin.js"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "tabIndex",
+              "type": {
+                "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"
               }
             },
             {
-              "name": "prevent-scroll",
-              "type": {
-                "text": "boolean"
-              },
-              "description": "Prevent outside scrolling when popover show.",
-              "default": "false",
-              "fieldName": "preventScroll",
+              "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": "Popover",
-                "module": "src/components/popover/popover.component.ts"
+                "name": "Buttonsimple",
+                "module": "components/buttonsimple/buttonsimple.component.js"
               }
             },
             {
-              "name": "interactive",
-              "type": {
-                "text": "boolean"
-              },
-              "description": "Determines whether the popover is interactive。",
-              "default": "false",
-              "fieldName": "interactive",
+              "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": "delay",
+              "name": "color",
               "type": {
-                "text": "string"
+                "text": "ColorType"
               },
-              "description": "The delay of the show/hide popover.",
-              "default": "0,0",
-              "fieldName": "delay",
-              "inheritedFrom": {
-                "name": "Popover",
-                "module": "src/components/popover/popover.component.ts"
-              }
+              "description": "The 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": "hide-on-escape",
+              "name": "label",
               "type": {
-                "text": "boolean"
+                "text": "string"
               },
-              "description": "Hide popover on escape key press.",
-              "default": "false",
-              "fieldName": "hideOnEscape",
-              "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-blur",
+              "name": "icon-name",
               "type": {
-                "text": "boolean"
+                "text": "IconNames | undefined"
               },
-              "description": "Hide popover on blur.",
-              "default": "false",
-              "fieldName": "hideOnBlur",
+              "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-outside-click",
+              "name": "tabIndex",
               "type": {
-                "text": "boolean"
+                "text": "number"
               },
-              "description": "Hide on outside click of the popover.",
-              "default": "false",
-              "fieldName": "hideOnOutsideClick",
+              "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": "focus-back-to-trigger",
+              "name": "disabled",
               "type": {
                 "text": "boolean"
               },
-              "description": "The focus back to trigger after the popover hide.",
               "default": "false",
-              "fieldName": "focusBackToTrigger",
+              "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": "backdrop",
+              "name": "active",
               "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",
+              "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": "flip",
+              "name": "soft-disabled",
               "type": {
                 "text": "boolean"
               },
-              "description": "Changes the placement of popover to keep it in view when scrolling.",
-              "default": "true",
-              "fieldName": "flip",
+              "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": "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"
           }
         }
       ]
@@ -13489,7 +13489,7 @@
       "declarations": [
         {
           "kind": "class",
-          "description": "mdc-textarea component, which is used to get the multi-line text input from the user.\nIt contains:\n- label: It is the title of the textarea field.\n- required-label: A string depicting that the textarea field is required.\n- Textarea: It is the multi-line text input field.\n- helper-text: It is the text that provides additional information about the textarea field.\n- max-character-limit: It is the text that shows the character count of the textarea field.\n- clear-button: A boolean value when marked to true represents a button that can\n  clear the text value within the textarea field.\n- Error, Warning, Success, Priority Help Text type: It is the text that provides additional information\n  about the textarea field based on the validation state.\n- limitexceeded: It is the event that is dispatched when the character limit exceeds or restored.\n  This event exposes 3 properties:\n  - currentCharacterCount - the current number of characters in the textarea field,\n  - maxCharacterLimit - the maximum number of characters allowed in the textarea field,\n  - value - the current value of the textarea field,\n\n**Note**: Consumers must set the help-text-type with 'error' and\nhelp-text attribute with the error message using limitexceeded event.\nThe same help-text value will be used for the validation message to be displayed.",
+          "description": "mdc-textarea component, which is used to get the multi-line text input from the user.\nIt contains:\n- label: It is the title of the textarea field.\n- required-label: A string depicting that the textarea field is required.\n- Textarea: It is the multi-line text input field.\n- helper-text: It is the text that provides additional information about the textarea field.\n- max-character-limit: It is the text that shows the character count of the textarea field.\n- Error, Warning, Success, Priority Help Text type: It is the text that provides additional information\n  about the textarea field based on the validation state.\n- limitexceeded: It is the event that is dispatched when the character limit exceeds or restored.\n  This event exposes 3 properties:\n  - currentCharacterCount - the current number of characters in the textarea field,\n  - maxCharacterLimit - the maximum number of characters allowed in the textarea field,\n  - value - the current value of the textarea field,\n\n**Note**: Consumers must set the help-text-type with 'error' and\nhelp-text attribute with the error message using limitexceeded event.\nThe same help-text value will be used for the validation message to be displayed.",
           "name": "Textarea",
           "cssProperties": [
             {
@@ -13650,26 +13650,6 @@
               "description": "The minimum number of characters that the textarea field can accept.",
               "attribute": "minlength"
             },
-            {
-              "kind": "field",
-              "name": "clearButton",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "The clear button when set to true, shows a clear button that clears the textarea field.",
-              "attribute": "clear-button"
-            },
-            {
-              "kind": "field",
-              "name": "clearAriaLabel",
-              "type": {
-                "text": "string"
-              },
-              "default": "''",
-              "description": "Aria label for the clear button. If clear button is set to true, this label is used for the clear button.",
-              "attribute": "clear-aria-label"
-            },
             {
               "kind": "field",
               "name": "maxCharacterLimit",
@@ -13760,48 +13740,6 @@
               ],
               "description": "Handles the change event of the textarea field.\nUpdates the value and sets the validity of the textarea field.\n\nThe 'change' event does not bubble up through the shadow DOM as it was not composed.\nTherefore, we need to re-dispatch the same event to ensure it is propagated correctly.\nRead more: https://developer.mozilla.org/en-US/docs/Web/API/Event/composed"
             },
-            {
-              "kind": "method",
-              "name": "handleKeyDown",
-              "privacy": "private",
-              "parameters": [
-                {
-                  "name": "event",
-                  "type": {
-                    "text": "KeyboardEvent"
-                  },
-                  "description": "Keyboard event"
-                }
-              ],
-              "description": "Handles the keydown event of the textarea field.\nClears the textarea field when the 'Enter' key is pressed.",
-              "return": {
-                "type": {
-                  "text": ""
-                }
-              }
-            },
-            {
-              "kind": "method",
-              "name": "clearInputText",
-              "privacy": "private",
-              "description": "Clears the textarea field.",
-              "return": {
-                "type": {
-                  "text": ""
-                }
-              }
-            },
-            {
-              "kind": "method",
-              "name": "renderClearButton",
-              "privacy": "protected",
-              "description": "Renders the clear button to clear the textarea field if the clearButton is set to true.",
-              "return": {
-                "type": {
-                  "text": ""
-                }
-              }
-            },
             {
               "kind": "method",
               "name": "renderCharacterCounter",
@@ -14227,24 +14165,6 @@
               "description": "The minimum number of characters that the textarea field can accept.",
               "fieldName": "minlength"
             },
-            {
-              "name": "clear-button",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "The clear button when set to true, shows a clear button that clears the textarea field.",
-              "fieldName": "clearButton"
-            },
-            {
-              "name": "clear-aria-label",
-              "type": {
-                "text": "string"
-              },
-              "default": "''",
-              "description": "Aria label for the clear button. If clear button is set to true, this label is used for the clear button.",
-              "fieldName": "clearAriaLabel"
-            },
             {
               "name": "max-character-limit",
               "type": {
@@ -14394,7 +14314,7 @@
             "module": "/src/components/formfieldwrapper"
           },
           "tagName": "mdc-textarea",
-          "jsDoc": "/**\n * mdc-textarea component, which is used to get the multi-line text input from the user.\n * It contains:\n * - label: It is the title of the textarea field.\n * - required-label: A string depicting that the textarea field is required.\n * - Textarea: It is the multi-line text input field.\n * - helper-text: It is the text that provides additional information about the textarea field.\n * - max-character-limit: It is the text that shows the character count of the textarea field.\n * - clear-button: A boolean value when marked to true represents a button that can\n *   clear the text value within the textarea field.\n * - Error, Warning, Success, Priority Help Text type: It is the text that provides additional information\n *   about the textarea field based on the validation state.\n * - limitexceeded: It is the event that is dispatched when the character limit exceeds or restored.\n *   This event exposes 3 properties:\n *   - currentCharacterCount - the current number of characters in the textarea field,\n *   - maxCharacterLimit - the maximum number of characters allowed in the textarea field,\n *   - value - the current value of the textarea field,\n *\n * **Note**: Consumers must set the help-text-type with 'error' and\n * help-text attribute with the error message using limitexceeded event.\n * The same help-text value will be used for the validation message to be displayed.\n *\n * @tagname mdc-textarea\n *\n * @event input - (React: onInput) This event is dispatched when the value of the textarea field changes (every press).\n * @event change - (React: onChange) This event is dispatched when the value of the textarea field changes (on blur).\n * @event focus - (React: onFocus) This event is dispatched when the textarea receives focus.\n * @event blur - (React: onBlur) This event is dispatched when the textarea loses focus.\n * @event limitexceeded - (React: onLimitExceeded) This event is dispatched once when the character limit\n * exceeds or restored.\n *\n *\n * @dependency mdc-icon\n * @dependency mdc-text\n * @dependency mdc-button\n *\n * @cssproperty --mdc-textarea-disabled-border-color - Border color for the textarea container when disabled\n * @cssproperty --mdc-textarea-disabled-text-color - Text color for the textarea field when disabled\n * @cssproperty --mdc-textarea-disabled-background-color - Background color for the textarea field when disabled\n * @cssproperty --mdc-textarea-text-color - Text color for the textarea field\n * @cssproperty --mdc-textarea-background-color - Background color for the textarea field\n * @cssproperty --mdc-textarea-border-color - Border color for the textarea field\n * @cssproperty --mdc-textarea-text-secondary-normal - Text color for the character counter\n * @cssproperty --mdc-textarea-error-border-color - Border color for the error related help text\n * @cssproperty --mdc-textarea-warning-border-color - Border color for the warning related help text\n * @cssproperty --mdc-textarea-success-border-color - Border color for the success related help text\n * @cssproperty --mdc-textarea-primary-border-color - Border color for the priority related help text\n * @cssproperty --mdc-textarea-hover-background-color - Background color for the textarea container when hover\n * @cssproperty --mdc-textarea-focused-background-color - Background color for the textarea container when focused\n * @cssproperty --mdc-textarea-focused-border-color - Border color for the textarea container when focused\n */",
+          "jsDoc": "/**\n * mdc-textarea component, which is used to get the multi-line text input from the user.\n * It contains:\n * - label: It is the title of the textarea field.\n * - required-label: A string depicting that the textarea field is required.\n * - Textarea: It is the multi-line text input field.\n * - helper-text: It is the text that provides additional information about the textarea field.\n * - max-character-limit: It is the text that shows the character count of the textarea field.\n * - Error, Warning, Success, Priority Help Text type: It is the text that provides additional information\n *   about the textarea field based on the validation state.\n * - limitexceeded: It is the event that is dispatched when the character limit exceeds or restored.\n *   This event exposes 3 properties:\n *   - currentCharacterCount - the current number of characters in the textarea field,\n *   - maxCharacterLimit - the maximum number of characters allowed in the textarea field,\n *   - value - the current value of the textarea field,\n *\n * **Note**: Consumers must set the help-text-type with 'error' and\n * help-text attribute with the error message using limitexceeded event.\n * The same help-text value will be used for the validation message to be displayed.\n *\n * @tagname mdc-textarea\n *\n * @event input - (React: onInput) This event is dispatched when the value of the textarea field changes (every press).\n * @event change - (React: onChange) This event is dispatched when the value of the textarea field changes (on blur).\n * @event focus - (React: onFocus) This event is dispatched when the textarea receives focus.\n * @event blur - (React: onBlur) This event is dispatched when the textarea loses focus.\n * @event limitexceeded - (React: onLimitExceeded) This event is dispatched once when the character limit\n * exceeds or restored.\n *\n *\n * @dependency mdc-icon\n * @dependency mdc-text\n * @dependency mdc-button\n *\n * @cssproperty --mdc-textarea-disabled-border-color - Border color for the textarea container when disabled\n * @cssproperty --mdc-textarea-disabled-text-color - Text color for the textarea field when disabled\n * @cssproperty --mdc-textarea-disabled-background-color - Background color for the textarea field when disabled\n * @cssproperty --mdc-textarea-text-color - Text color for the textarea field\n * @cssproperty --mdc-textarea-background-color - Background color for the textarea field\n * @cssproperty --mdc-textarea-border-color - Border color for the textarea field\n * @cssproperty --mdc-textarea-text-secondary-normal - Text color for the character counter\n * @cssproperty --mdc-textarea-error-border-color - Border color for the error related help text\n * @cssproperty --mdc-textarea-warning-border-color - Border color for the warning related help text\n * @cssproperty --mdc-textarea-success-border-color - Border color for the success related help text\n * @cssproperty --mdc-textarea-primary-border-color - Border color for the priority related help text\n * @cssproperty --mdc-textarea-hover-background-color - Background color for the textarea container when hover\n * @cssproperty --mdc-textarea-focused-background-color - Background color for the textarea container when focused\n * @cssproperty --mdc-textarea-focused-border-color - Border color for the textarea container when focused\n */",
           "customElement": true,
           "slots": [
             {