@momentum-design/components 0.39.6 → 0.41.0

package/dist/custom-elements.json

@@ -14933,946 +14933,877 @@
     },
     {
       "kind": "javascript-module",
-      "path": "components/tooltip/tooltip.component.js",
+      "path": "components/toggle/toggle.component.js",
       "declarations": [
         {
           "kind": "class",
-          "description": "A tooltip is triggered by mouse hover or by keyboard focus\nand will disappear upon mouse exit or focus change.\n\nNote: Tooltips cannot contain content that can be focused or interacted with.",
-          "name": "Tooltip",
+          "description": "Toggle Component is an interactive control used to switch between two mutually exclusive options,\nsuch as On/Off, Active/Inactive. These are commonly used in settings panels, forms, and preference selections\nwhere users need to enable or disable a feature.\nIt contains an optional label and an optional helper text.\n\nTo create a group of toggles, use the FormFieldGroup component.\n\nNote: It internally renders a checkbox styled as a toggle switch.",
+          "name": "Toggle",
           "cssProperties": [
             {
-              "description": "The maximum width of the tooltip.",
-              "name": "--mdc-tooltip-max-width"
+              "description": "width of the toggle",
+              "name": "--mdc-toggle-width"
             },
             {
-              "description": "The padding of the tooltip.",
-              "name": "--mdc-tooltip-padding"
+              "description": "height of the toggle",
+              "name": "--mdc-toggle-height"
             },
             {
-              "description": "The text color of the tooltip.",
-              "name": "--mdc-tooltip-text-color"
+              "description": "width of the toggle when it's size is compact",
+              "name": "--mdc-toggle-width-compact"
             },
             {
-              "description": "The text color of the tooltip when the color is contrast.",
-              "name": "--mdc-tooltip-text-color-contrast"
+              "description": "height of the toggle when it's size is compact",
+              "name": "--mdc-toggle-height-compact"
             },
             {
-              "description": "radius of the arrow border",
-              "name": "--mdc-popover-arrow-border-radius",
-              "inheritedFrom": {
-                "name": "Popover",
-                "module": "src/components/popover/popover.component.ts"
-              }
+              "description": "border radius of the toggle",
+              "name": "--mdc-toggle-border-radius"
             },
             {
-              "description": "border of the arrow",
-              "name": "--mdc-popover-arrow-border",
-              "inheritedFrom": {
-                "name": "Popover",
-                "module": "src/components/popover/popover.component.ts"
-              }
+              "description": "border radius of the toggle when it's size is compact",
+              "name": "--mdc-toggle-border-radius-compact"
             },
             {
-              "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 of the toggle",
+              "name": "--mdc-toggle-border"
             },
             {
-              "description": "border color of the popover",
-              "name": "--mdc-popover-border-color",
-              "inheritedFrom": {
-                "name": "Popover",
-                "module": "src/components/popover/popover.component.ts"
-              }
+              "description": "background color of the inactive toggle in rest state",
+              "name": "--mdc-toggle-inactive-rest-color"
             },
             {
-              "description": "inverted background color of the popover",
-              "name": "--mdc-popover-inverted-background-color",
-              "inheritedFrom": {
-                "name": "Popover",
-                "module": "src/components/popover/popover.component.ts"
-              }
+              "description": "background color of the inactive toggle in hover state",
+              "name": "--mdc-toggle-inactive-hover-color"
             },
             {
-              "description": "inverted border color of the popover",
-              "name": "--mdc-popover-inverted-border-color",
-              "inheritedFrom": {
-                "name": "Popover",
-                "module": "src/components/popover/popover.component.ts"
-              }
+              "description": "background color of the inactive toggle in pressed state",
+              "name": "--mdc-toggle-inactive-pressed-color"
             },
             {
-              "description": "inverted text color of the popover",
-              "name": "--mdc-popover-inverted-text-color",
-              "inheritedFrom": {
-                "name": "Popover",
-                "module": "src/components/popover/popover.component.ts"
-              }
+              "description": "background color of the inactive toggle in disabled state",
+              "name": "--mdc-toggle-inactive-disabled-color"
             },
             {
-              "description": "elevation of the popover",
-              "name": "--mdc-popover-elevation-3",
-              "inheritedFrom": {
-                "name": "Popover",
-                "module": "src/components/popover/popover.component.ts"
-              }
+              "description": "background color of the active toggle in rest state",
+              "name": "--mdc-toggle-active-rest-color"
+            },
+            {
+              "description": "background color of the active toggle in hover state",
+              "name": "--mdc-toggle-active-hover-color"
+            },
+            {
+              "description": "background color of the active toggle in pressed state",
+              "name": "--mdc-toggle-active-pressed-color"
+            },
+            {
+              "description": "background color of the active toggle in disabled state",
+              "name": "--mdc-toggle-active-disabled-color"
+            },
+            {
+              "description": " color of the help text label",
+              "name": "--mdc-toggle-help-text-color"
+            },
+            {
+              "description": "color of the toggle label and help text in disabled state",
+              "name": "--mdc-toggle-label-color-disabled"
             }
           ],
           "members": [
             {
               "kind": "field",
-              "name": "tooltipType",
+              "name": "checked",
               "type": {
-                "text": "TooltipType"
+                "text": "boolean"
               },
-              "description": "The type of tooltip.\n- **description** sets aria-describedby on the trigger component which refers to the tooltip id.\n- **label** sets aria-labelledby on the trigger component which refers to the tooltip id.\n- **none** no aria props set on trigger component referring to the tooltip id.",
-              "default": "'description'",
-              "attribute": "tooltip-type",
+              "default": "false",
+              "description": "Determines whether the toggle is active or inactive.",
+              "attribute": "checked",
               "reflects": true
             },
             {
               "kind": "field",
-              "name": "defaultSlotNodes",
+              "name": "size",
               "type": {
-                "text": "Array<Node>"
+                "text": "ToggleSize"
               },
-              "privacy": "private"
+              "description": "Determines toggle size in rem (height is specified here).\n- **Default**: 1.5\n- **Compact**: 1",
+              "default": "default",
+              "attribute": "size",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "autofocus",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Automatically focus on the element when the page loads.\n[MDN Reference](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/autofocus)",
+              "attribute": "autofocus",
+              "reflects": true
             },
             {
               "kind": "method",
-              "name": "getTooltipText",
+              "name": "manageRequired",
               "privacy": "private",
-              "return": {
-                "type": {
-                  "text": ""
-                }
-              }
+              "description": "Manages the required state of the checkbox.\nIf the checkbox is not checked and the requiredLabel property is set, then the checkbox is invalid."
             },
             {
               "kind": "method",
-              "name": "setTooltipType",
+              "name": "setFormValue",
               "privacy": "private",
-              "return": {
-                "type": {
-                  "text": "void"
-                }
-              },
-              "parameters": [
-                {
-                  "name": "type",
-                  "type": {
-                    "text": "TooltipType"
-                  },
-                  "description": "The type to set."
-                }
-              ],
-              "description": "Sets the type attribute for the tooltip component.\nIf the provided type is not included in the TOOLTIP_TYPES,\nit defaults to the value specified in DEFAULTS.TOOLTIP_TYPE."
+              "description": "Updates the form value to reflect the current state of the toggle.\nIf toggle is switched on, the value is set to either the user-provided value or 'isActive' if no value is provided.\nIf toggle is switched off, the value is set to null."
             },
             {
               "kind": "method",
-              "name": "onIdUpdated",
+              "name": "toggleState",
               "privacy": "private",
               "return": {
                 "type": {
                   "text": "void"
                 }
               },
-              "description": "Updates the tooltip id if it is empty."
+              "description": "Toggles the state of the toggle element.\nIf the element is not disabled, then the checked property is toggled."
             },
             {
               "kind": "method",
-              "name": "onPlacementUpdated",
+              "name": "handleKeyDown",
               "privacy": "private",
               "return": {
                 "type": {
                   "text": "void"
                 }
               },
-              "description": "Updates the placement attribute if it is not a valid placement.\nOverriding the default from Popover"
+              "parameters": [
+                {
+                  "name": "event",
+                  "type": {
+                    "text": "KeyboardEvent"
+                  },
+                  "description": "The keyboard event."
+                }
+              ],
+              "description": "Handles the keydown event on the toggle element.\nWhen the user presses Enter, the form is submitted."
             },
             {
               "kind": "method",
-              "name": "onTooltipTypeUpdated",
+              "name": "handleChange",
               "privacy": "private",
-              "return": {
-                "type": {
-                  "text": "void"
+              "parameters": [
+                {
+                  "name": "event",
+                  "type": {
+                    "text": "Event"
+                  }
                 }
-              },
+              ],
+              "description": "Toggles the state of the toggle element.\nand dispatch the new change event."
+            },
+            {
+              "kind": "method",
+              "name": "setToggleSize",
+              "privacy": "private",
               "parameters": [
                 {
-                  "name": "changedProperties",
+                  "name": "size",
                   "type": {
-                    "text": "PropertyValues"
+                    "text": "ToggleSize"
                   },
-                  "description": "The changed properties."
+                  "description": "The size to set."
                 }
               ],
-              "description": "Updates the tooltip type attribute and sets the appropriate aria props on the trigger component."
+              "description": "Sets the size attribute for the toggle component.\nIf the provided size is not included in the TOGGLE_SIZE,\nit defaults to the value specified in DEFAULTS.SIZE."
             },
             {
               "kind": "field",
-              "name": "enabledFocusTrap",
+              "name": "name",
               "type": {
-                "text": "boolean"
+                "text": "string"
               },
-              "description": "Determines whether the focus trap is enabled.\nIf true, focus will be restricted to the content within this component.",
-              "default": "false",
-              "attribute": "enabledFocusTrap",
+              "default": "''",
+              "description": "Indicates the name of the component group.\nThey are used to group elements in a form together.",
+              "attribute": "name",
+              "reflects": true,
               "inheritedFrom": {
-                "name": "Popover",
-                "module": "components/popover/popover.component.js"
+                "name": "FormInternalsMixin",
+                "module": "utils/mixins/FormInternalsMixin.js"
               }
             },
             {
               "kind": "field",
-              "name": "enabledPreventScroll",
+              "name": "value",
               "type": {
-                "text": "boolean"
+                "text": "string"
               },
-              "description": "Prevent outside scrolling when popover show.",
-              "default": "false",
-              "attribute": "enabledPreventScroll",
+              "default": "''",
+              "description": "Indicates the value of the component group (ex: input, checkbox, radio, select etc...)",
+              "attribute": "value",
+              "reflects": true,
               "inheritedFrom": {
-                "name": "Popover",
-                "module": "components/popover/popover.component.js"
+                "name": "FormInternalsMixin",
+                "module": "utils/mixins/FormInternalsMixin.js"
               }
             },
             {
               "kind": "field",
-              "name": "shouldWrapFocus",
+              "name": "validationMessage",
               "type": {
-                "text": "() => boolean"
+                "text": "string | undefined"
               },
+              "description": "Custom validation message that will override the default message and displayed when the input is invalid.",
+              "attribute": "validation-message",
+              "reflects": true,
               "inheritedFrom": {
-                "name": "Popover",
-                "module": "components/popover/popover.component.js"
+                "name": "FormInternalsMixin",
+                "module": "utils/mixins/FormInternalsMixin.js"
               }
             },
             {
-              "kind": "method",
-              "name": "deactivateFocusTrap",
-              "description": "Deactivate the focus trap.",
+              "kind": "field",
+              "name": "validity",
+              "type": {
+                "text": "ValidityState"
+              },
+              "readonly": true,
               "inheritedFrom": {
-                "name": "Popover",
-                "module": "components/popover/popover.component.js"
+                "name": "FormInternalsMixin",
+                "module": "utils/mixins/FormInternalsMixin.js"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "willValidate",
+              "readonly": true,
+              "inheritedFrom": {
+                "name": "FormInternalsMixin",
+                "module": "utils/mixins/FormInternalsMixin.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).",
+              "name": "setValidity",
+              "description": "Sets the validity of the input field based on the input field's validity.",
               "return": {
                 "type": {
                   "text": ""
                 }
               },
               "inheritedFrom": {
-                "name": "Popover",
-                "module": "components/popover/popover.component.js"
+                "name": "FormInternalsMixin",
+                "module": "utils/mixins/FormInternalsMixin.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).",
+              "name": "checkValidity",
               "return": {
                 "type": {
-                  "text": ""
+                  "text": "boolean"
                 }
               },
               "inheritedFrom": {
-                "name": "Popover",
-                "module": "components/popover/popover.component.js"
+                "name": "FormInternalsMixin",
+                "module": "utils/mixins/FormInternalsMixin.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": ""
-                }
+              "name": "reportValidity",
+              "inheritedFrom": {
+                "name": "FormInternalsMixin",
+                "module": "utils/mixins/FormInternalsMixin.js"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "id",
+              "type": {
+                "text": "string"
               },
+              "default": "`mdc-input-${uuidv4()}`",
+              "description": "The unique id of the input field. It is used to link the input field with the label.",
+              "attribute": "id",
               "inheritedFrom": {
-                "name": "Popover",
-                "module": "components/popover/popover.component.js"
+                "name": "FormfieldWrapper",
+                "module": "components/formfieldwrapper/formfieldwrapper.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": "dataAriaLabel",
+              "type": {
+                "text": "string | null"
               },
+              "default": "null",
+              "description": "Defines a string value that labels the current element.\nThe Aria-Label attribute to be set for accessibility.",
+              "attribute": "data-aria-label",
+              "reflects": true,
               "inheritedFrom": {
-                "name": "Popover",
-                "module": "components/popover/popover.component.js"
+                "name": "DataAriaLabelMixin",
+                "module": "utils/mixins/DataAriaLabelMixin.js"
+              }
+            },
+            {
+              "kind": "field",
+              "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.",
+              "attribute": "disabled",
+              "reflects": true,
+              "inheritedFrom": {
+                "name": "FormfieldWrapper",
+                "module": "components/formfieldwrapper/formfieldwrapper.component.js"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "label",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "The label of the input field. It is linked to the input field using the `for` attribute.",
+              "attribute": "label",
+              "reflects": true,
+              "inheritedFrom": {
+                "name": "FormfieldWrapper",
+                "module": "components/formfieldwrapper/formfieldwrapper.component.js"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "requiredLabel",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "The required label of the input field.\nWhen an appropriate string value is set,\nthe input field is marked as required and the label is appended with this text.",
+              "attribute": "required-label",
+              "reflects": true,
+              "inheritedFrom": {
+                "name": "FormfieldWrapper",
+                "module": "components/formfieldwrapper/formfieldwrapper.component.js"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "helpTextType",
+              "type": {
+                "text": "ValidationType"
+              },
+              "description": "The type of help text. It can be 'default', 'error', 'warning', 'success', 'priority'.",
+              "attribute": "help-text-type",
+              "reflects": true,
+              "inheritedFrom": {
+                "name": "FormfieldWrapper",
+                "module": "components/formfieldwrapper/formfieldwrapper.component.js"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "helpText",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "The help text that is displayed below the input field.",
+              "attribute": "help-text",
+              "reflects": true,
+              "inheritedFrom": {
+                "name": "FormfieldWrapper",
+                "module": "components/formfieldwrapper/formfieldwrapper.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.",
+              "name": "renderLabelElement",
+              "privacy": "protected",
+              "description": "creates the label element when the label property is set.\nid is used to link the label with the input field.",
               "return": {
                 "type": {
                   "text": ""
                 }
               },
               "inheritedFrom": {
-                "name": "Popover",
-                "module": "components/popover/popover.component.js"
+                "name": "FormfieldWrapper",
+                "module": "components/formfieldwrapper/formfieldwrapper.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.",
+              "name": "renderRequiredLabel",
+              "privacy": "protected",
+              "inheritedFrom": {
+                "name": "FormfieldWrapper",
+                "module": "components/formfieldwrapper/formfieldwrapper.component.js"
+              }
+            },
+            {
+              "kind": "method",
+              "name": "renderHelpTextIcon",
+              "privacy": "protected",
+              "description": "creates the helpertext icon based on the helpTextType for validation.\nIf the helpTextType is not set, it defaults to 'default' and it doesn't display any icon.",
               "return": {
                 "type": {
                   "text": ""
                 }
               },
               "inheritedFrom": {
-                "name": "Popover",
-                "module": "components/popover/popover.component.js"
+                "name": "FormfieldWrapper",
+                "module": "components/formfieldwrapper/formfieldwrapper.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.",
+              "name": "renderHelpText",
+              "privacy": "protected",
+              "description": "creates the helper text component when the helpertext value is set.\nIt is also used to display the validation message based on the helpTextType.",
               "return": {
                 "type": {
                   "text": ""
                 }
               },
               "inheritedFrom": {
-                "name": "Popover",
-                "module": "components/popover/popover.component.js"
+                "name": "FormfieldWrapper",
+                "module": "components/formfieldwrapper/formfieldwrapper.component.js"
               }
             },
             {
               "kind": "method",
-              "name": "isInteractiveElement",
-              "privacy": "private",
+              "name": "renderLabel",
+              "privacy": "protected",
+              "description": "renders the mdc-label-text container that contains the label and labelInfoToggleTip.",
               "return": {
                 "type": {
                   "text": ""
                 }
               },
-              "parameters": [
-                {
-                  "name": "element",
-                  "type": {
-                    "text": "HTMLElement"
-                  },
-                  "description": "The element to check."
-                }
-              ],
-              "description": "Checks if the element is interactive.",
               "inheritedFrom": {
-                "name": "Popover",
-                "module": "components/popover/popover.component.js"
+                "name": "FormfieldWrapper",
+                "module": "components/formfieldwrapper/formfieldwrapper.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.",
+              "name": "renderHelperText",
+              "privacy": "protected",
+              "description": "renders the mdc-help-text container that contains the helpertext icon and helpertext.",
               "return": {
                 "type": {
                   "text": ""
                 }
               },
               "inheritedFrom": {
-                "name": "Popover",
-                "module": "components/popover/popover.component.js"
+                "name": "FormfieldWrapper",
+                "module": "components/formfieldwrapper/formfieldwrapper.component.js"
+              }
+            }
+          ],
+          "events": [
+            {
+              "type": {
+                "text": "EventConstructor"
               }
             },
             {
-              "kind": "method",
-              "name": "findFocusable",
-              "privacy": "private",
-              "return": {
-                "type": {
-                  "text": ""
-                }
+              "description": "(React: onChange) Event that gets dispatched when the toggle state changes.",
+              "name": "change",
+              "reactName": "onChange",
+              "eventName": "ChangeEvent"
+            },
+            {
+              "description": "(React: onFocus) Event that gets dispatched when the toggle receives focus.",
+              "name": "focus",
+              "reactName": "onFocus",
+              "eventName": "FocusEvent"
+            }
+          ],
+          "attributes": [
+            {
+              "name": "checked",
+              "type": {
+                "text": "boolean"
               },
-              "parameters": [
-                {
-                  "name": "root",
-                  "type": {
-                    "text": "ShadowRoot | HTMLElement"
-                  },
-                  "description": "The root element to search for focusable elements."
-                },
-                {
-                  "name": "matches",
-                  "default": "new Set()",
-                  "type": {
-                    "text": "Set<HTMLElement>"
-                  },
-                  "description": "The set of focusable elements."
-                }
-              ],
-              "description": "Recursively finds all focusable elements within the given root and its descendants.",
-              "inheritedFrom": {
-                "name": "Popover",
-                "module": "components/popover/popover.component.js"
-              }
+              "default": "false",
+              "description": "Determines whether the toggle is active or inactive.",
+              "fieldName": "checked"
             },
             {
-              "kind": "method",
-              "name": "setFocusableElements",
-              "privacy": "public",
-              "description": "Updates the list of focusable elements within the component's shadow root.",
-              "inheritedFrom": {
-                "name": "Popover",
-                "module": "components/popover/popover.component.js"
-              }
+              "name": "size",
+              "type": {
+                "text": "ToggleSize"
+              },
+              "description": "Determines toggle size in rem (height is specified here).\n- **Default**: 1.5\n- **Compact**: 1",
+              "default": "default",
+              "fieldName": "size"
             },
             {
-              "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": "Popover",
-                "module": "components/popover/popover.component.js"
-              }
+              "name": "autofocus",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Automatically focus on the element when the page loads.\n[MDN Reference](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/autofocus)",
+              "fieldName": "autofocus"
             },
             {
-              "kind": "method",
-              "name": "calculateNextIndex",
-              "privacy": "private",
-              "parameters": [
-                {
-                  "name": "currentIndex",
-                  "type": {
-                    "text": "number"
-                  },
-                  "description": "The current index."
-                },
-                {
-                  "name": "step",
-                  "type": {
-                    "text": "number"
-                  },
-                  "description": "The step to calculate the next index."
-                }
-              ],
-              "description": "Calculates the next index for the focus trap.",
-              "return": {
-                "type": {
-                  "text": ""
-                }
+              "name": "name",
+              "type": {
+                "text": "string"
               },
+              "default": "''",
+              "description": "Indicates the name of the component group.\nThey are used to group elements in a form together.",
+              "fieldName": "name",
               "inheritedFrom": {
-                "name": "Popover",
-                "module": "components/popover/popover.component.js"
+                "name": "FormInternalsMixin",
+                "module": "src/utils/mixins/FormInternalsMixin.ts"
               }
             },
             {
-              "kind": "method",
-              "name": "getDeepActiveElement",
-              "privacy": "private",
-              "description": "Returns the deepest active element in the shadow DOM.",
-              "return": {
-                "type": {
-                  "text": ""
-                }
+              "name": "value",
+              "type": {
+                "text": "string"
               },
+              "default": "''",
+              "description": "Indicates the value of the component group (ex: input, checkbox, radio, select etc...)",
+              "fieldName": "value",
               "inheritedFrom": {
-                "name": "Popover",
-                "module": "components/popover/popover.component.js"
+                "name": "FormInternalsMixin",
+                "module": "src/utils/mixins/FormInternalsMixin.ts"
               }
             },
             {
-              "kind": "method",
-              "name": "findElement",
-              "privacy": "private",
-              "parameters": [
-                {
-                  "name": "activeElement",
-                  "type": {
-                    "text": "HTMLElement"
-                  },
-                  "description": "The active element."
-                }
-              ],
-              "description": "Finds the index of the active element within the focusable elements.",
-              "return": {
-                "type": {
-                  "text": ""
-                }
+              "name": "validation-message",
+              "type": {
+                "text": "string | undefined"
               },
+              "description": "Custom validation message that will override the default message and displayed when the input is invalid.",
+              "fieldName": "validationMessage",
               "inheritedFrom": {
-                "name": "Popover",
-                "module": "components/popover/popover.component.js"
+                "name": "FormInternalsMixin",
+                "module": "src/utils/mixins/FormInternalsMixin.ts"
               }
             },
             {
-              "kind": "method",
-              "name": "isEqualFocusNode",
-              "privacy": "private",
-              "parameters": [
-                {
-                  "name": "activeElement",
-                  "type": {
-                    "text": "HTMLElement"
-                  },
-                  "description": "The active element."
-                },
-                {
-                  "name": "element",
-                  "type": {
-                    "text": "HTMLElement"
-                  },
-                  "description": "The element to compare."
-                }
-              ],
-              "description": "Checks if the active element is equal to the given element.",
-              "return": {
-                "type": {
-                  "text": ""
-                }
+              "name": "data-aria-label",
+              "type": {
+                "text": "string | null"
               },
+              "default": "null",
+              "description": "Defines a string value that labels the current element.\nThe Aria-Label attribute to be set for accessibility.",
+              "fieldName": "dataAriaLabel",
               "inheritedFrom": {
-                "name": "Popover",
-                "module": "components/popover/popover.component.js"
+                "name": "DataAriaLabelMixin",
+                "module": "src/utils/mixins/DataAriaLabelMixin.ts"
               }
             },
             {
-              "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.",
+              "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",
               "inheritedFrom": {
-                "name": "Popover",
-                "module": "components/popover/popover.component.js"
+                "name": "FormfieldWrapper",
+                "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
               }
             },
             {
-              "kind": "method",
-              "name": "handleKeydown",
-              "privacy": "private",
-              "parameters": [
-                {
-                  "name": "event",
-                  "type": {
-                    "text": "KeyboardEvent"
-                  },
-                  "description": "The keyboard event."
-                }
-              ],
-              "description": "Traps focus within the container.",
+              "name": "label",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "The label of the input field. It is linked to the input field using the `for` attribute.",
+              "fieldName": "label",
               "inheritedFrom": {
-                "name": "Popover",
-                "module": "components/popover/popover.component.js"
+                "name": "FormfieldWrapper",
+                "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
               }
             },
             {
-              "kind": "field",
-              "name": "id",
+              "name": "required-label",
               "type": {
-                "text": "string"
+                "text": "string | undefined"
               },
-              "default": "''",
-              "description": "The unique ID of the popover.",
-              "attribute": "id",
-              "reflects": true,
+              "description": "The required label of the input field.\nWhen an appropriate string value is set,\nthe input field is marked as required and the label is appended with this text.",
+              "fieldName": "requiredLabel",
               "inheritedFrom": {
-                "name": "Popover",
-                "module": "components/popover/popover.component.js"
+                "name": "FormfieldWrapper",
+                "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
               }
             },
             {
-              "kind": "field",
-              "name": "triggerID",
+              "name": "id",
               "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,
+              "description": "The unique id of the input field. It is used to link the input field with the label.",
+              "fieldName": "id",
               "inheritedFrom": {
-                "name": "Popover",
-                "module": "components/popover/popover.component.js"
+                "name": "FormfieldWrapper",
+                "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
               }
             },
             {
-              "kind": "field",
-              "name": "trigger",
+              "name": "help-text-type",
               "type": {
-                "text": "PopoverTrigger"
+                "text": "ValidationType"
               },
-              "description": "Determines the events that cause the Popover 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": "click",
-              "attribute": "trigger",
-              "reflects": true,
+              "description": "The type of help text. It can be 'default', 'error', 'warning', 'success', 'priority'.",
+              "fieldName": "helpTextType",
               "inheritedFrom": {
-                "name": "Popover",
-                "module": "components/popover/popover.component.js"
+                "name": "FormfieldWrapper",
+                "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
               }
             },
             {
-              "kind": "field",
-              "name": "placement",
+              "name": "help-text",
               "type": {
-                "text": "PopoverPlacement"
+                "text": "string | undefined"
               },
-              "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,
+              "description": "The help text that is displayed below the input field.",
+              "fieldName": "helpText",
               "inheritedFrom": {
-                "name": "Popover",
-                "module": "components/popover/popover.component.js"
+                "name": "FormfieldWrapper",
+                "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
               }
+            }
+          ],
+          "mixins": [
+            {
+              "name": "FormInternalsMixin",
+              "module": "/src/utils/mixins/FormInternalsMixin"
             },
             {
-              "kind": "field",
-              "name": "color",
-              "type": {
-                "text": "PopoverColor"
-              },
-              "description": "Color of the popover\n- **tonal**\n- **contrast**",
-              "default": "tonal",
-              "attribute": "color",
-              "reflects": true,
+              "name": "DataAriaLabelMixin",
+              "module": "/src/utils/mixins/DataAriaLabelMixin"
+            }
+          ],
+          "superclass": {
+            "name": "FormfieldWrapper",
+            "module": "/src/components/formfieldwrapper"
+          },
+          "tagName": "mdc-toggle",
+          "jsDoc": "/**\n * Toggle Component is an interactive control used to switch between two mutually exclusive options,\n * such as On/Off, Active/Inactive. These are commonly used in settings panels, forms, and preference selections\n * where users need to enable or disable a feature.\n * It contains an optional label and an optional helper text.\n *\n * To create a group of toggles, use the FormFieldGroup component.\n *\n * Note: It internally renders a checkbox styled as a toggle switch.\n *\n * @dependency mdc-icon\n *\n * @tagname mdc-toggle\n *\n * @event change - (React: onChange) Event that gets dispatched when the toggle state changes.\n * @event focus - (React: onFocus) Event that gets dispatched when the toggle receives focus.\n *\n * @cssproperty --mdc-toggle-width - width of the toggle\n * @cssproperty --mdc-toggle-height - height of the toggle\n * @cssproperty --mdc-toggle-width-compact - width of the toggle when it's size is compact\n * @cssproperty --mdc-toggle-height-compact - height of the toggle when it's size is compact\n * @cssproperty --mdc-toggle-border-radius - border radius of the toggle\n * @cssproperty --mdc-toggle-border-radius-compact - border radius of the toggle when it's size is compact\n * @cssproperty --mdc-toggle-border - border of the toggle\n * @cssproperty --mdc-toggle-inactive-rest-color - background color of the inactive toggle in rest state\n * @cssproperty --mdc-toggle-inactive-hover-color - background color of the inactive toggle in hover state\n * @cssproperty --mdc-toggle-inactive-pressed-color - background color of the inactive toggle in pressed state\n * @cssproperty --mdc-toggle-inactive-disabled-color - background color of the inactive toggle in disabled state\n * @cssproperty --mdc-toggle-active-rest-color - background color of the active toggle in rest state\n * @cssproperty --mdc-toggle-active-hover-color - background color of the active toggle in hover state\n * @cssproperty --mdc-toggle-active-pressed-color - background color of the active toggle in pressed state\n * @cssproperty --mdc-toggle-active-disabled-color - background color of the active toggle in disabled state\n * @cssproperty --mdc-toggle-help-text-color -  color of the help text label\n * @cssproperty --mdc-toggle-label-color-disabled - color of the toggle label and help text in disabled state\n *\n */",
+          "customElement": true,
+          "slots": [
+            {
+              "description": "slot to add the label info icon",
+              "name": "label-info",
               "inheritedFrom": {
-                "name": "Popover",
-                "module": "components/popover/popover.component.js"
+                "name": "FormfieldWrapper",
+                "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
               }
+            }
+          ]
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "default",
+          "declaration": {
+            "name": "Toggle",
+            "module": "components/toggle/toggle.component.js"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "components/tooltip/tooltip.component.js",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "A tooltip is triggered by mouse hover or by keyboard focus\nand will disappear upon mouse exit or focus change.\n\nNote: Tooltips cannot contain content that can be focused or interacted with.",
+          "name": "Tooltip",
+          "cssProperties": [
+            {
+              "description": "The maximum width of the tooltip.",
+              "name": "--mdc-tooltip-max-width"
             },
             {
-              "kind": "field",
-              "name": "visible",
-              "type": {
-                "text": "boolean"
-              },
-              "description": "The visibility of the popover.",
-              "default": "false",
-              "attribute": "visible",
-              "reflects": true,
+              "description": "The padding of the tooltip.",
+              "name": "--mdc-tooltip-padding"
+            },
+            {
+              "description": "The text color of the tooltip.",
+              "name": "--mdc-tooltip-text-color"
+            },
+            {
+              "description": "The text color of the tooltip when the color is contrast.",
+              "name": "--mdc-tooltip-text-color-contrast"
+            },
+            {
+              "description": "radius of the arrow border",
+              "name": "--mdc-popover-arrow-border-radius",
               "inheritedFrom": {
                 "name": "Popover",
-                "module": "components/popover/popover.component.js"
+                "module": "src/components/popover/popover.component.ts"
               }
             },
             {
-              "kind": "field",
-              "name": "offset",
-              "type": {
-                "text": "number"
-              },
-              "description": "The offset of the popover.",
-              "default": "4",
-              "attribute": "offset",
-              "reflects": true,
+              "description": "border of the arrow",
+              "name": "--mdc-popover-arrow-border",
               "inheritedFrom": {
                 "name": "Popover",
-                "module": "components/popover/popover.component.js"
+                "module": "src/components/popover/popover.component.ts"
               }
             },
             {
-              "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,
+              "description": "primary background color of the popover",
+              "name": "--mdc-popover-primary-background-color",
               "inheritedFrom": {
                 "name": "Popover",
-                "module": "components/popover/popover.component.js"
+                "module": "src/components/popover/popover.component.ts"
               }
             },
             {
-              "kind": "field",
-              "name": "preventScroll",
-              "type": {
-                "text": "boolean"
-              },
-              "description": "Prevent outside scrolling when popover show.",
-              "default": "false",
-              "attribute": "prevent-scroll",
-              "reflects": true,
+              "description": "border color of the popover",
+              "name": "--mdc-popover-border-color",
               "inheritedFrom": {
                 "name": "Popover",
-                "module": "components/popover/popover.component.js"
+                "module": "src/components/popover/popover.component.ts"
               }
             },
             {
-              "kind": "field",
-              "name": "showArrow",
-              "type": {
-                "text": "boolean"
-              },
-              "description": "The arrow visibility of the popover.",
-              "default": "false",
-              "attribute": "show-arrow",
-              "reflects": true,
+              "description": "inverted background color of the popover",
+              "name": "--mdc-popover-inverted-background-color",
               "inheritedFrom": {
                 "name": "Popover",
-                "module": "components/popover/popover.component.js"
+                "module": "src/components/popover/popover.component.ts"
               }
             },
             {
-              "kind": "field",
-              "name": "closeButton",
-              "type": {
-                "text": "boolean"
-              },
-              "description": "The close button visibility of the popover.",
-              "default": "false",
-              "attribute": "close-button",
-              "reflects": true,
+              "description": "inverted border color of the popover",
+              "name": "--mdc-popover-inverted-border-color",
               "inheritedFrom": {
                 "name": "Popover",
-                "module": "components/popover/popover.component.js"
+                "module": "src/components/popover/popover.component.ts"
               }
             },
             {
-              "kind": "field",
-              "name": "interactive",
-              "type": {
-                "text": "boolean"
-              },
-              "description": "Determines whether the popover is interactive。",
-              "default": "false",
-              "attribute": "interactive",
-              "reflects": true,
+              "description": "inverted text color of the popover",
+              "name": "--mdc-popover-inverted-text-color",
               "inheritedFrom": {
                 "name": "Popover",
-                "module": "components/popover/popover.component.js"
+                "module": "src/components/popover/popover.component.ts"
               }
             },
             {
-              "kind": "field",
-              "name": "delay",
-              "type": {
-                "text": "string"
-              },
-              "description": "The delay of the show/hide popover.",
-              "default": "0,0",
-              "attribute": "delay",
-              "reflects": true,
+              "description": "elevation of the popover",
+              "name": "--mdc-popover-elevation-3",
               "inheritedFrom": {
                 "name": "Popover",
-                "module": "components/popover/popover.component.js"
+                "module": "src/components/popover/popover.component.ts"
               }
-            },
+            }
+          ],
+          "members": [
             {
               "kind": "field",
-              "name": "hideOnEscape",
+              "name": "tooltipType",
               "type": {
-                "text": "boolean"
+                "text": "TooltipType"
               },
-              "description": "Hide popover on escape key press.",
-              "default": "false",
-              "attribute": "hide-on-escape",
-              "reflects": true,
-              "inheritedFrom": {
-                "name": "Popover",
-                "module": "components/popover/popover.component.js"
-              }
+              "description": "The type of tooltip.\n- **description** sets aria-describedby on the trigger component which refers to the tooltip id.\n- **label** sets aria-labelledby on the trigger component which refers to the tooltip id.\n- **none** no aria props set on trigger component referring to the tooltip id.",
+              "default": "'description'",
+              "attribute": "tooltip-type",
+              "reflects": true
             },
             {
               "kind": "field",
-              "name": "hideOnBlur",
+              "name": "defaultSlotNodes",
               "type": {
-                "text": "boolean"
+                "text": "Array<Node>"
               },
-              "description": "Hide popover on blur.",
-              "default": "false",
-              "attribute": "hide-on-blur",
-              "reflects": true,
-              "inheritedFrom": {
-                "name": "Popover",
-                "module": "components/popover/popover.component.js"
+              "privacy": "private"
+            },
+            {
+              "kind": "method",
+              "name": "getTooltipText",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": ""
+                }
               }
             },
             {
-              "kind": "field",
-              "name": "hideOnOutsideClick",
-              "type": {
-                "text": "boolean"
+              "kind": "method",
+              "name": "setTooltipType",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
               },
-              "description": "Hide on outside click of the popover.",
-              "default": "false",
-              "attribute": "hide-on-outside-click",
-              "reflects": true,
-              "inheritedFrom": {
-                "name": "Popover",
-                "module": "components/popover/popover.component.js"
-              }
+              "parameters": [
+                {
+                  "name": "type",
+                  "type": {
+                    "text": "TooltipType"
+                  },
+                  "description": "The type to set."
+                }
+              ],
+              "description": "Sets the type attribute for the tooltip component.\nIf the provided type is not included in the TOOLTIP_TYPES,\nit defaults to the value specified in DEFAULTS.TOOLTIP_TYPE."
             },
             {
-              "kind": "field",
-              "name": "focusBackToTrigger",
-              "type": {
-                "text": "boolean"
+              "kind": "method",
+              "name": "onIdUpdated",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
               },
-              "description": "The focus back to trigger after the popover hide.",
-              "default": "false",
-              "attribute": "focus-back-to-trigger",
-              "reflects": true,
-              "inheritedFrom": {
-                "name": "Popover",
-                "module": "components/popover/popover.component.js"
-              }
+              "description": "Updates the tooltip id if it is empty."
             },
             {
-              "kind": "field",
-              "name": "backdrop",
-              "type": {
-                "text": "boolean"
+              "kind": "method",
+              "name": "onPlacementUpdated",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
               },
-              "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"
-              }
+              "description": "Updates the placement attribute if it is not a valid placement.\nOverriding the default from Popover"
             },
             {
-              "kind": "field",
-              "name": "flip",
-              "type": {
-                "text": "boolean"
+              "kind": "method",
+              "name": "onTooltipTypeUpdated",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
               },
-              "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"
-              }
+              "parameters": [
+                {
+                  "name": "changedProperties",
+                  "type": {
+                    "text": "PropertyValues"
+                  },
+                  "description": "The changed properties."
+                }
+              ],
+              "description": "Updates the tooltip type attribute and sets the appropriate aria props on the trigger component."
             },
             {
               "kind": "field",
-              "name": "size",
+              "name": "enabledFocusTrap",
               "type": {
                 "text": "boolean"
               },
-              "description": "Changes the size of popover to keep it in view when scrolling.",
+              "description": "Determines whether the focus trap is enabled.\nIf true, focus will be restricted to the content within this component.",
               "default": "false",
-              "attribute": "size",
-              "reflects": true,
+              "attribute": "enabledFocusTrap",
               "inheritedFrom": {
                 "name": "Popover",
                 "module": "components/popover/popover.component.js"
@@ -15880,14 +15811,13 @@
             },
             {
               "kind": "field",
-              "name": "zIndex",
+              "name": "enabledPreventScroll",
               "type": {
-                "text": "number"
+                "text": "boolean"
               },
-              "description": "The z-index of the popover.",
-              "default": "1000",
-              "attribute": "z-index",
-              "reflects": true,
+              "description": "Prevent outside scrolling when popover show.",
+              "default": "false",
+              "attribute": "enabledPreventScroll",
               "inheritedFrom": {
                 "name": "Popover",
                 "module": "components/popover/popover.component.js"
@@ -15895,114 +15825,163 @@
             },
             {
               "kind": "field",
-              "name": "appendTo",
+              "name": "shouldWrapFocus",
               "type": {
-                "text": "string"
+                "text": "() => boolean"
               },
-              "default": "''",
-              "description": "Element ID that the popover append to.",
-              "attribute": "append-to",
-              "reflects": true,
               "inheritedFrom": {
                 "name": "Popover",
                 "module": "components/popover/popover.component.js"
               }
-            },
-            {
-              "kind": "field",
-              "name": "closeButtonAriaLabel",
-              "type": {
-                "text": "string | null"
-              },
-              "default": "null",
-              "description": "aria-label attribute to be set for close button accessibility.",
-              "attribute": "close-button-aria-label",
+            },
+            {
+              "kind": "method",
+              "name": "deactivateFocusTrap",
+              "description": "Deactivate the focus trap.",
               "inheritedFrom": {
                 "name": "Popover",
                 "module": "components/popover/popover.component.js"
               }
             },
             {
-              "kind": "field",
-              "name": "role",
-              "type": {
-                "text": "HTMLElement['role']"
+              "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": ""
+                }
               },
-              "description": "Role of the popover",
-              "default": "dialog",
-              "attribute": "role",
-              "reflects": true,
               "inheritedFrom": {
                 "name": "Popover",
                 "module": "components/popover/popover.component.js"
               }
             },
             {
-              "kind": "field",
-              "name": "ariaLabelledby",
-              "type": {
-                "text": "string | null"
+              "kind": "method",
+              "name": "hasZeroDimensions",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "element",
+                  "type": {
+                    "text": "HTMLElement"
+                  },
+                  "description": "The element to check."
+                }
+              ],
+              "description": "Checks if the element has zero dimensions (width and height are both 0).",
+              "return": {
+                "type": {
+                  "text": ""
+                }
               },
-              "default": "null",
-              "description": "aria-labelledby for an interactive popover only, defaults to the trigger component id.\nUsed in nested cases where the triggerComponent isn't the actual button.",
-              "attribute": "aria-labelledby",
-              "reflects": true,
               "inheritedFrom": {
                 "name": "Popover",
                 "module": "components/popover/popover.component.js"
               }
             },
             {
-              "kind": "field",
-              "name": "ariaDescribedby",
-              "type": {
-                "text": "string | null"
+              "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": ""
+                }
               },
-              "default": "null",
-              "description": "aria-describedby of the popover.",
-              "attribute": "aria-describedby",
-              "reflects": true,
               "inheritedFrom": {
                 "name": "Popover",
                 "module": "components/popover/popover.component.js"
               }
             },
             {
-              "kind": "field",
-              "name": "disableAriaExpanded",
-              "type": {
-                "text": "boolean"
+              "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": ""
+                }
               },
-              "description": "Disable aria-expanded attribute on trigger element.",
-              "default": "false",
-              "attribute": "disable-aria-expanded",
-              "reflects": true,
               "inheritedFrom": {
                 "name": "Popover",
                 "module": "components/popover/popover.component.js"
               }
             },
             {
-              "kind": "field",
-              "name": "arrowElement",
-              "type": {
-                "text": "HTMLElement | null"
+              "kind": "method",
+              "name": "hasComputedHidden",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "element",
+                  "type": {
+                    "text": "HTMLElement"
+                  },
+                  "description": "The element to check."
+                }
+              ],
+              "description": "Checks if the element is hidden by a computed style.",
+              "return": {
+                "type": {
+                  "text": ""
+                }
               },
-              "privacy": "public",
-              "default": "null",
               "inheritedFrom": {
                 "name": "Popover",
                 "module": "components/popover/popover.component.js"
               }
             },
             {
-              "kind": "field",
-              "name": "triggerElement",
-              "type": {
-                "text": "HTMLElement | null"
+              "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": ""
+                }
               },
-              "privacy": "public",
-              "default": "null",
               "inheritedFrom": {
                 "name": "Popover",
                 "module": "components/popover/popover.component.js"
@@ -16010,9 +15989,23 @@
             },
             {
               "kind": "method",
-              "name": "setupTriggerListener",
+              "name": "isNotTabbable",
               "privacy": "private",
-              "description": "Sets up the trigger event listeners based on the trigger type.",
+              "parameters": [
+                {
+                  "name": "element",
+                  "type": {
+                    "text": "HTMLElement"
+                  },
+                  "description": "The element to check."
+                }
+              ],
+              "description": "Checks if the element is not tabbable.",
+              "return": {
+                "type": {
+                  "text": ""
+                }
+              },
               "inheritedFrom": {
                 "name": "Popover",
                 "module": "components/popover/popover.component.js"
@@ -16020,57 +16013,109 @@
             },
             {
               "kind": "method",
-              "name": "removeEventListeners",
+              "name": "isInteractiveElement",
               "privacy": "private",
-              "description": "Removes the trigger event listeners.",
+              "return": {
+                "type": {
+                  "text": ""
+                }
+              },
+              "parameters": [
+                {
+                  "name": "element",
+                  "type": {
+                    "text": "HTMLElement"
+                  },
+                  "description": "The element to check."
+                }
+              ],
+              "description": "Checks if the element is interactive.",
               "inheritedFrom": {
                 "name": "Popover",
                 "module": "components/popover/popover.component.js"
               }
             },
             {
-              "kind": "field",
-              "name": "onOutsidePopoverClick",
+              "kind": "method",
+              "name": "isFocusable",
               "privacy": "private",
-              "description": "Handles the outside click event to close the popover.",
               "parameters": [
                 {
-                  "description": "The mouse event.",
-                  "name": "event"
+                  "name": "element",
+                  "type": {
+                    "text": "HTMLElement"
+                  },
+                  "description": "The element to check."
                 }
               ],
+              "description": "Checks if the element is focusable.",
+              "return": {
+                "type": {
+                  "text": ""
+                }
+              },
               "inheritedFrom": {
                 "name": "Popover",
                 "module": "components/popover/popover.component.js"
               }
             },
             {
-              "kind": "field",
-              "name": "onEscapeKeydown",
+              "kind": "method",
+              "name": "findFocusable",
               "privacy": "private",
-              "description": "Handles the escape keydown event to close the popover.",
+              "return": {
+                "type": {
+                  "text": ""
+                }
+              },
               "parameters": [
                 {
-                  "description": "The keyboard event.",
-                  "name": "event"
+                  "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": "Popover",
                 "module": "components/popover/popover.component.js"
               }
             },
             {
-              "kind": "field",
-              "name": "onPopoverFocusOut",
-              "privacy": "private",
-              "description": "Handles the popover focus out event.",
+              "kind": "method",
+              "name": "setFocusableElements",
+              "privacy": "public",
+              "description": "Updates the list of focusable elements within the component's shadow root.",
+              "inheritedFrom": {
+                "name": "Popover",
+                "module": "components/popover/popover.component.js"
+              }
+            },
+            {
+              "kind": "method",
+              "name": "setInitialFocus",
+              "privacy": "public",
               "parameters": [
                 {
-                  "description": "The focus event.",
-                  "name": "event"
+                  "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": "Popover",
                 "module": "components/popover/popover.component.js"
@@ -16078,75 +16123,100 @@
             },
             {
               "kind": "method",
-              "name": "isOpenUpdated",
+              "name": "calculateNextIndex",
               "privacy": "private",
               "parameters": [
                 {
-                  "name": "oldValue",
+                  "name": "currentIndex",
                   "type": {
-                    "text": "boolean"
+                    "text": "number"
                   },
-                  "description": "The old value of the visible property."
+                  "description": "The current index."
                 },
                 {
-                  "name": "newValue",
+                  "name": "step",
                   "type": {
-                    "text": "boolean"
+                    "text": "number"
                   },
-                  "description": "The new value of the visible property."
+                  "description": "The step to calculate the next index."
                 }
               ],
-              "description": "Handles the popover visibility change and position the popover.\nHandles the exit event to close the popover.",
+              "description": "Calculates the next index for the focus trap.",
+              "return": {
+                "type": {
+                  "text": ""
+                }
+              },
               "inheritedFrom": {
                 "name": "Popover",
                 "module": "components/popover/popover.component.js"
               }
             },
             {
-              "kind": "field",
-              "name": "startCloseDelay",
+              "kind": "method",
+              "name": "getDeepActiveElement",
               "privacy": "private",
-              "description": "Starts the close delay timer.\nIf the popover is not interactive, it will close the popover after the delay.",
+              "description": "Returns the deepest active element in the shadow DOM.",
+              "return": {
+                "type": {
+                  "text": ""
+                }
+              },
               "inheritedFrom": {
                 "name": "Popover",
                 "module": "components/popover/popover.component.js"
               }
             },
             {
-              "kind": "field",
-              "name": "cancelCloseDelay",
+              "kind": "method",
+              "name": "findElement",
               "privacy": "private",
-              "description": "Cancels the close delay timer.",
-              "inheritedFrom": {
-                "name": "Popover",
-                "module": "components/popover/popover.component.js"
-              }
-            },
-            {
-              "kind": "field",
-              "name": "showPopover",
-              "privacy": "public",
-              "description": "Shows the popover.",
-              "inheritedFrom": {
-                "name": "Popover",
-                "module": "components/popover/popover.component.js"
-              }
-            },
-            {
-              "kind": "field",
-              "name": "hidePopover",
-              "privacy": "public",
-              "description": "Hides the popover.",
+              "parameters": [
+                {
+                  "name": "activeElement",
+                  "type": {
+                    "text": "HTMLElement"
+                  },
+                  "description": "The active element."
+                }
+              ],
+              "description": "Finds the index of the active element within the focusable elements.",
+              "return": {
+                "type": {
+                  "text": ""
+                }
+              },
               "inheritedFrom": {
                 "name": "Popover",
                 "module": "components/popover/popover.component.js"
               }
             },
             {
-              "kind": "field",
-              "name": "togglePopoverVisible",
-              "privacy": "public",
-              "description": "Toggles the popover visibility.",
+              "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": "components/popover/popover.component.js"
@@ -16154,9 +16224,18 @@
             },
             {
               "kind": "method",
-              "name": "handleCreatePopoverFirstUpdate",
+              "name": "trapFocus",
               "privacy": "private",
-              "description": "Sets the focusable elements inside the popover.",
+              "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": "components/popover/popover.component.js"
@@ -16164,9 +16243,18 @@
             },
             {
               "kind": "method",
-              "name": "positionPopover",
+              "name": "handleKeydown",
               "privacy": "private",
-              "description": "Positions the popover based on the trigger element.\nIt also handles the flip, size and arrow placement.\nIt uses the floating-ui/dom library to calculate the position.",
+              "parameters": [
+                {
+                  "name": "event",
+                  "type": {
+                    "text": "KeyboardEvent"
+                  },
+                  "description": "The keyboard event."
+                }
+              ],
+              "description": "Traps focus within the container.",
               "inheritedFrom": {
                 "name": "Popover",
                 "module": "components/popover/popover.component.js"
@@ -16174,1140 +16262,1052 @@
             },
             {
               "kind": "field",
-              "name": "utils",
-              "default": "new PopoverUtils(this)",
-              "inheritedFrom": {
-                "name": "Popover",
-                "module": "components/popover/popover.component.js"
-              }
-            }
-          ],
-          "events": [
-            {
-              "description": "(React: onShown) This event is dispatched when the tooltip is shown",
-              "name": "shown",
-              "reactName": "onShown",
-              "eventName": "ShownEvent",
-              "inheritedFrom": {
-                "name": "Popover",
-                "module": "src/components/popover/popover.component.ts"
-              }
-            },
-            {
-              "description": "(React: onHidden) This event is dispatched when the tooltip is hidden",
-              "name": "hidden",
-              "reactName": "onHidden",
-              "eventName": "HiddenEvent",
-              "inheritedFrom": {
-                "name": "Popover",
-                "module": "src/components/popover/popover.component.ts"
-              }
-            },
-            {
-              "description": "(React: onCreated) This event is dispatched when the tooltip is created (added to the DOM)",
-              "name": "created",
-              "reactName": "onCreated",
-              "eventName": "CreatedEvent",
-              "inheritedFrom": {
-                "name": "Popover",
-                "module": "src/components/popover/popover.component.ts"
-              }
-            },
-            {
-              "description": "(React: onDestroyed) This event is dispatched when the tooltip is destroyed (removed from the DOM)",
-              "name": "destroyed",
-              "reactName": "onDestroyed",
-              "eventName": "DestroyedEvent",
-              "inheritedFrom": {
-                "name": "Popover",
-                "module": "src/components/popover/popover.component.ts"
-              }
-            }
-          ],
-          "attributes": [
-            {
-              "name": "tooltip-type",
-              "type": {
-                "text": "TooltipType"
-              },
-              "description": "The type of tooltip.\n- **description** sets aria-describedby on the trigger component which refers to the tooltip id.\n- **label** sets aria-labelledby on the trigger component which refers to the tooltip id.\n- **none** no aria props set on trigger component referring to the tooltip id.",
-              "default": "'description'",
-              "fieldName": "tooltipType"
-            },
-            {
-              "name": "enabledFocusTrap",
-              "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": "enabledFocusTrap",
-              "inheritedFrom": {
-                "name": "Popover",
-                "module": "src/components/popover/popover.component.ts"
-              }
-            },
-            {
-              "name": "enabledPreventScroll",
-              "type": {
-                "text": "boolean"
-              },
-              "description": "Prevent outside scrolling when popover show.",
-              "default": "false",
-              "fieldName": "enabledPreventScroll",
-              "inheritedFrom": {
-                "name": "Popover",
-                "module": "src/components/popover/popover.component.ts"
-              }
-            },
-            {
               "name": "id",
               "type": {
                 "text": "string"
               },
               "default": "''",
               "description": "The unique ID of the popover.",
-              "fieldName": "id",
+              "attribute": "id",
+              "reflects": true,
               "inheritedFrom": {
                 "name": "Popover",
-                "module": "src/components/popover/popover.component.ts"
+                "module": "components/popover/popover.component.js"
               }
             },
             {
+              "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.",
-              "fieldName": "triggerID",
+              "attribute": "triggerID",
+              "reflects": true,
               "inheritedFrom": {
                 "name": "Popover",
-                "module": "src/components/popover/popover.component.ts"
+                "module": "components/popover/popover.component.js"
               }
             },
             {
+              "kind": "field",
               "name": "trigger",
               "type": {
                 "text": "PopoverTrigger"
               },
               "description": "Determines the events that cause the Popover 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": "click",
-              "fieldName": "trigger",
+              "attribute": "trigger",
+              "reflects": true,
               "inheritedFrom": {
                 "name": "Popover",
-                "module": "src/components/popover/popover.component.ts"
+                "module": "components/popover/popover.component.js"
               }
             },
             {
+              "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",
-              "fieldName": "placement",
+              "attribute": "placement",
+              "reflects": true,
               "inheritedFrom": {
                 "name": "Popover",
-                "module": "src/components/popover/popover.component.ts"
+                "module": "components/popover/popover.component.js"
               }
             },
             {
+              "kind": "field",
               "name": "color",
               "type": {
                 "text": "PopoverColor"
               },
               "description": "Color of the popover\n- **tonal**\n- **contrast**",
               "default": "tonal",
-              "fieldName": "color",
+              "attribute": "color",
+              "reflects": true,
               "inheritedFrom": {
                 "name": "Popover",
-                "module": "src/components/popover/popover.component.ts"
+                "module": "components/popover/popover.component.js"
               }
             },
             {
+              "kind": "field",
               "name": "visible",
               "type": {
                 "text": "boolean"
               },
               "description": "The visibility of the popover.",
               "default": "false",
-              "fieldName": "visible",
+              "attribute": "visible",
+              "reflects": true,
               "inheritedFrom": {
                 "name": "Popover",
-                "module": "src/components/popover/popover.component.ts"
+                "module": "components/popover/popover.component.js"
               }
             },
             {
+              "kind": "field",
               "name": "offset",
               "type": {
                 "text": "number"
               },
               "description": "The offset of the popover.",
               "default": "4",
-              "fieldName": "offset",
+              "attribute": "offset",
+              "reflects": true,
               "inheritedFrom": {
                 "name": "Popover",
-                "module": "src/components/popover/popover.component.ts"
+                "module": "components/popover/popover.component.js"
               }
             },
             {
-              "name": "focus-trap",
+              "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",
-              "fieldName": "focusTrap",
+              "attribute": "focus-trap",
+              "reflects": true,
               "inheritedFrom": {
                 "name": "Popover",
-                "module": "src/components/popover/popover.component.ts"
+                "module": "components/popover/popover.component.js"
               }
             },
             {
-              "name": "prevent-scroll",
+              "kind": "field",
+              "name": "preventScroll",
               "type": {
                 "text": "boolean"
               },
               "description": "Prevent outside scrolling when popover show.",
               "default": "false",
-              "fieldName": "preventScroll",
+              "attribute": "prevent-scroll",
+              "reflects": true,
               "inheritedFrom": {
                 "name": "Popover",
-                "module": "src/components/popover/popover.component.ts"
+                "module": "components/popover/popover.component.js"
               }
             },
             {
-              "name": "show-arrow",
+              "kind": "field",
+              "name": "showArrow",
               "type": {
                 "text": "boolean"
               },
               "description": "The arrow visibility of the popover.",
               "default": "false",
-              "fieldName": "showArrow",
+              "attribute": "show-arrow",
+              "reflects": true,
               "inheritedFrom": {
                 "name": "Popover",
-                "module": "src/components/popover/popover.component.ts"
+                "module": "components/popover/popover.component.js"
               }
             },
             {
-              "name": "close-button",
+              "kind": "field",
+              "name": "closeButton",
               "type": {
                 "text": "boolean"
               },
               "description": "The close button visibility of the popover.",
               "default": "false",
-              "fieldName": "closeButton",
+              "attribute": "close-button",
+              "reflects": true,
               "inheritedFrom": {
                 "name": "Popover",
-                "module": "src/components/popover/popover.component.ts"
+                "module": "components/popover/popover.component.js"
               }
             },
             {
+              "kind": "field",
               "name": "interactive",
               "type": {
                 "text": "boolean"
               },
               "description": "Determines whether the popover is interactive。",
               "default": "false",
-              "fieldName": "interactive",
+              "attribute": "interactive",
+              "reflects": true,
               "inheritedFrom": {
                 "name": "Popover",
-                "module": "src/components/popover/popover.component.ts"
+                "module": "components/popover/popover.component.js"
               }
             },
             {
+              "kind": "field",
               "name": "delay",
               "type": {
                 "text": "string"
               },
               "description": "The delay of the show/hide popover.",
               "default": "0,0",
-              "fieldName": "delay",
+              "attribute": "delay",
+              "reflects": true,
               "inheritedFrom": {
                 "name": "Popover",
-                "module": "src/components/popover/popover.component.ts"
+                "module": "components/popover/popover.component.js"
               }
             },
             {
-              "name": "hide-on-escape",
+              "kind": "field",
+              "name": "hideOnEscape",
               "type": {
                 "text": "boolean"
               },
               "description": "Hide popover on escape key press.",
               "default": "false",
-              "fieldName": "hideOnEscape",
+              "attribute": "hide-on-escape",
+              "reflects": true,
               "inheritedFrom": {
                 "name": "Popover",
-                "module": "src/components/popover/popover.component.ts"
+                "module": "components/popover/popover.component.js"
               }
             },
             {
-              "name": "hide-on-blur",
+              "kind": "field",
+              "name": "hideOnBlur",
               "type": {
                 "text": "boolean"
               },
               "description": "Hide popover on blur.",
               "default": "false",
-              "fieldName": "hideOnBlur",
+              "attribute": "hide-on-blur",
+              "reflects": true,
               "inheritedFrom": {
                 "name": "Popover",
-                "module": "src/components/popover/popover.component.ts"
+                "module": "components/popover/popover.component.js"
               }
             },
             {
-              "name": "hide-on-outside-click",
+              "kind": "field",
+              "name": "hideOnOutsideClick",
               "type": {
                 "text": "boolean"
               },
               "description": "Hide on outside click of the popover.",
               "default": "false",
-              "fieldName": "hideOnOutsideClick",
+              "attribute": "hide-on-outside-click",
+              "reflects": true,
               "inheritedFrom": {
                 "name": "Popover",
-                "module": "src/components/popover/popover.component.ts"
+                "module": "components/popover/popover.component.js"
               }
             },
             {
-              "name": "focus-back-to-trigger",
+              "kind": "field",
+              "name": "focusBackToTrigger",
               "type": {
                 "text": "boolean"
               },
               "description": "The focus back to trigger after the popover hide.",
               "default": "false",
-              "fieldName": "focusBackToTrigger",
+              "attribute": "focus-back-to-trigger",
+              "reflects": true,
               "inheritedFrom": {
                 "name": "Popover",
-                "module": "src/components/popover/popover.component.ts"
+                "module": "components/popover/popover.component.js"
               }
             },
             {
+              "kind": "field",
               "name": "backdrop",
               "type": {
                 "text": "boolean"
               },
               "description": "Determines whether the popover with backdrop.\nOther than popover and trigger element, the rest of the screen will be covered with a backdrop.",
               "default": "false",
-              "fieldName": "backdrop",
+              "attribute": "backdrop",
+              "reflects": true,
               "inheritedFrom": {
                 "name": "Popover",
-                "module": "src/components/popover/popover.component.ts"
+                "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",
-              "fieldName": "flip",
+              "attribute": "flip",
+              "reflects": true,
               "inheritedFrom": {
                 "name": "Popover",
-                "module": "src/components/popover/popover.component.ts"
+                "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",
-              "fieldName": "size",
+              "attribute": "size",
+              "reflects": true,
               "inheritedFrom": {
                 "name": "Popover",
-                "module": "src/components/popover/popover.component.ts"
+                "module": "components/popover/popover.component.js"
               }
             },
             {
-              "name": "z-index",
+              "kind": "field",
+              "name": "zIndex",
               "type": {
                 "text": "number"
               },
               "description": "The z-index of the popover.",
               "default": "1000",
-              "fieldName": "zIndex",
+              "attribute": "z-index",
+              "reflects": true,
               "inheritedFrom": {
                 "name": "Popover",
-                "module": "src/components/popover/popover.component.ts"
+                "module": "components/popover/popover.component.js"
               }
             },
             {
-              "name": "append-to",
+              "kind": "field",
+              "name": "appendTo",
               "type": {
                 "text": "string"
               },
               "default": "''",
               "description": "Element ID that the popover append to.",
-              "fieldName": "appendTo",
+              "attribute": "append-to",
+              "reflects": true,
               "inheritedFrom": {
                 "name": "Popover",
-                "module": "src/components/popover/popover.component.ts"
+                "module": "components/popover/popover.component.js"
               }
             },
             {
-              "name": "close-button-aria-label",
+              "kind": "field",
+              "name": "closeButtonAriaLabel",
               "type": {
                 "text": "string | null"
               },
               "default": "null",
               "description": "aria-label attribute to be set for close button accessibility.",
-              "fieldName": "closeButtonAriaLabel",
+              "attribute": "close-button-aria-label",
               "inheritedFrom": {
                 "name": "Popover",
-                "module": "src/components/popover/popover.component.ts"
+                "module": "components/popover/popover.component.js"
               }
             },
             {
+              "kind": "field",
               "name": "role",
               "type": {
                 "text": "HTMLElement['role']"
               },
               "description": "Role of the popover",
               "default": "dialog",
-              "fieldName": "role",
+              "attribute": "role",
+              "reflects": true,
               "inheritedFrom": {
                 "name": "Popover",
-                "module": "src/components/popover/popover.component.ts"
+                "module": "components/popover/popover.component.js"
               }
             },
             {
-              "name": "aria-labelledby",
+              "kind": "field",
+              "name": "ariaLabelledby",
               "type": {
                 "text": "string | null"
               },
               "default": "null",
               "description": "aria-labelledby for an interactive popover only, defaults to the trigger component id.\nUsed in nested cases where the triggerComponent isn't the actual button.",
-              "fieldName": "ariaLabelledby",
+              "attribute": "aria-labelledby",
+              "reflects": true,
               "inheritedFrom": {
                 "name": "Popover",
-                "module": "src/components/popover/popover.component.ts"
+                "module": "components/popover/popover.component.js"
               }
             },
             {
-              "name": "aria-describedby",
+              "kind": "field",
+              "name": "ariaDescribedby",
               "type": {
                 "text": "string | null"
               },
               "default": "null",
               "description": "aria-describedby of the popover.",
-              "fieldName": "ariaDescribedby",
-              "inheritedFrom": {
-                "name": "Popover",
-                "module": "src/components/popover/popover.component.ts"
-              }
-            },
-            {
-              "name": "disable-aria-expanded",
-              "type": {
-                "text": "boolean"
-              },
-              "description": "Disable aria-expanded attribute on trigger element.",
-              "default": "false",
-              "fieldName": "disableAriaExpanded",
-              "inheritedFrom": {
-                "name": "Popover",
-                "module": "src/components/popover/popover.component.ts"
-              }
-            }
-          ],
-          "superclass": {
-            "name": "Popover",
-            "module": "/src/components/popover/popover.component"
-          },
-          "tagName": "mdc-tooltip",
-          "jsDoc": "/**\n * A tooltip is triggered by mouse hover or by keyboard focus\n * and will disappear upon mouse exit or focus change.\n *\n * Note: Tooltips cannot contain content that can be focused or interacted with.\n *\n * @tagname mdc-tooltip\n *\n * @event shown - (React: onShown) This event is dispatched when the tooltip is shown\n * @event hidden - (React: onHidden) This event is dispatched when the tooltip is hidden\n * @event created - (React: onCreated) This event is dispatched when the tooltip is created (added to the DOM)\n * @event destroyed - (React: onDestroyed) This event is dispatched when the tooltip is destroyed (removed from the DOM)\n *\n * @cssproperty --mdc-tooltip-max-width - The maximum width of the tooltip.\n * @cssproperty --mdc-tooltip-padding - The padding of the tooltip.\n * @cssproperty --mdc-tooltip-text-color - The text color of the tooltip.\n * @cssproperty --mdc-tooltip-text-color-contrast - The text color of the tooltip when the color is contrast.\n *\n */",
-          "customElement": true,
-          "slots": [
-            {
-              "description": "Default slot for the popover content",
-              "name": "",
-              "inheritedFrom": {
-                "name": "Popover",
-                "module": "src/components/popover/popover.component.ts"
-              }
-            }
-          ]
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "default",
-          "declaration": {
-            "name": "Tooltip",
-            "module": "components/tooltip/tooltip.component.js"
-          }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "components/toggle/toggle.component.js",
-      "declarations": [
-        {
-          "kind": "class",
-          "description": "Toggle Component is an interactive control used to switch between two mutually exclusive options,\nsuch as On/Off, Active/Inactive. These are commonly used in settings panels, forms, and preference selections\nwhere users need to enable or disable a feature.\nIt contains an optional label and an optional helper text.\n\nTo create a group of toggles, use the FormFieldGroup component.\n\nNote: It internally renders a checkbox styled as a toggle switch.",
-          "name": "Toggle",
-          "cssProperties": [
-            {
-              "description": "width of the toggle",
-              "name": "--mdc-toggle-width"
-            },
-            {
-              "description": "height of the toggle",
-              "name": "--mdc-toggle-height"
-            },
-            {
-              "description": "width of the toggle when it's size is compact",
-              "name": "--mdc-toggle-width-compact"
-            },
-            {
-              "description": "height of the toggle when it's size is compact",
-              "name": "--mdc-toggle-height-compact"
-            },
-            {
-              "description": "border radius of the toggle",
-              "name": "--mdc-toggle-border-radius"
-            },
-            {
-              "description": "border radius of the toggle when it's size is compact",
-              "name": "--mdc-toggle-border-radius-compact"
-            },
-            {
-              "description": "border of the toggle",
-              "name": "--mdc-toggle-border"
-            },
-            {
-              "description": "background color of the inactive toggle in rest state",
-              "name": "--mdc-toggle-inactive-rest-color"
-            },
-            {
-              "description": "background color of the inactive toggle in hover state",
-              "name": "--mdc-toggle-inactive-hover-color"
-            },
-            {
-              "description": "background color of the inactive toggle in pressed state",
-              "name": "--mdc-toggle-inactive-pressed-color"
-            },
-            {
-              "description": "background color of the inactive toggle in disabled state",
-              "name": "--mdc-toggle-inactive-disabled-color"
-            },
-            {
-              "description": "background color of the active toggle in rest state",
-              "name": "--mdc-toggle-active-rest-color"
-            },
-            {
-              "description": "background color of the active toggle in hover state",
-              "name": "--mdc-toggle-active-hover-color"
-            },
-            {
-              "description": "background color of the active toggle in pressed state",
-              "name": "--mdc-toggle-active-pressed-color"
-            },
-            {
-              "description": "background color of the active toggle in disabled state",
-              "name": "--mdc-toggle-active-disabled-color"
-            },
-            {
-              "description": " color of the help text label",
-              "name": "--mdc-toggle-help-text-color"
+              "attribute": "aria-describedby",
+              "reflects": true,
+              "inheritedFrom": {
+                "name": "Popover",
+                "module": "components/popover/popover.component.js"
+              }
             },
-            {
-              "description": "color of the toggle label and help text in disabled state",
-              "name": "--mdc-toggle-label-color-disabled"
-            }
-          ],
-          "members": [
             {
               "kind": "field",
-              "name": "checked",
+              "name": "disableAriaExpanded",
               "type": {
                 "text": "boolean"
               },
+              "description": "Disable aria-expanded attribute on trigger element.",
               "default": "false",
-              "description": "Determines whether the toggle is active or inactive.",
-              "attribute": "checked",
-              "reflects": true
+              "attribute": "disable-aria-expanded",
+              "reflects": true,
+              "inheritedFrom": {
+                "name": "Popover",
+                "module": "components/popover/popover.component.js"
+              }
             },
             {
               "kind": "field",
-              "name": "size",
+              "name": "arrowElement",
               "type": {
-                "text": "ToggleSize"
+                "text": "HTMLElement | null"
               },
-              "description": "Determines toggle size in rem (height is specified here).\n- **Default**: 1.5\n- **Compact**: 1",
-              "default": "default",
-              "attribute": "size",
-              "reflects": true
+              "privacy": "public",
+              "default": "null",
+              "inheritedFrom": {
+                "name": "Popover",
+                "module": "components/popover/popover.component.js"
+              }
             },
             {
               "kind": "field",
-              "name": "autofocus",
+              "name": "triggerElement",
               "type": {
-                "text": "boolean"
+                "text": "HTMLElement | null"
               },
-              "default": "false",
-              "description": "Automatically focus on the element when the page loads.\n[MDN Reference](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/autofocus)",
-              "attribute": "autofocus",
-              "reflects": true
+              "privacy": "public",
+              "default": "null",
+              "inheritedFrom": {
+                "name": "Popover",
+                "module": "components/popover/popover.component.js"
+              }
             },
             {
               "kind": "method",
-              "name": "manageRequired",
+              "name": "setupTriggerListener",
               "privacy": "private",
-              "description": "Manages the required state of the checkbox.\nIf the checkbox is not checked and the requiredLabel property is set, then the checkbox is invalid."
+              "description": "Sets up the trigger event listeners based on the trigger type.",
+              "inheritedFrom": {
+                "name": "Popover",
+                "module": "components/popover/popover.component.js"
+              }
             },
             {
               "kind": "method",
-              "name": "setFormValue",
+              "name": "removeEventListeners",
               "privacy": "private",
-              "description": "Updates the form value to reflect the current state of the toggle.\nIf toggle is switched on, the value is set to either the user-provided value or 'isActive' if no value is provided.\nIf toggle is switched off, the value is set to null."
+              "description": "Removes the trigger event listeners.",
+              "inheritedFrom": {
+                "name": "Popover",
+                "module": "components/popover/popover.component.js"
+              }
             },
             {
-              "kind": "method",
-              "name": "toggleState",
+              "kind": "field",
+              "name": "onOutsidePopoverClick",
               "privacy": "private",
-              "return": {
-                "type": {
-                  "text": "void"
+              "description": "Handles the outside click event to close the popover.",
+              "parameters": [
+                {
+                  "description": "The mouse event.",
+                  "name": "event"
                 }
-              },
-              "description": "Toggles the state of the toggle element.\nIf the element is not disabled, then the checked property is toggled."
+              ],
+              "inheritedFrom": {
+                "name": "Popover",
+                "module": "components/popover/popover.component.js"
+              }
             },
             {
-              "kind": "method",
-              "name": "handleKeyDown",
+              "kind": "field",
+              "name": "onEscapeKeydown",
               "privacy": "private",
-              "return": {
-                "type": {
-                  "text": "void"
-                }
-              },
+              "description": "Handles the escape keydown event to close the popover.",
               "parameters": [
                 {
-                  "name": "event",
-                  "type": {
-                    "text": "KeyboardEvent"
-                  },
-                  "description": "The keyboard event."
+                  "description": "The keyboard event.",
+                  "name": "event"
                 }
               ],
-              "description": "Handles the keydown event on the toggle element.\nWhen the user presses Enter, the form is submitted."
+              "inheritedFrom": {
+                "name": "Popover",
+                "module": "components/popover/popover.component.js"
+              }
             },
             {
-              "kind": "method",
-              "name": "handleChange",
+              "kind": "field",
+              "name": "onPopoverFocusOut",
               "privacy": "private",
+              "description": "Handles the popover focus out event.",
               "parameters": [
                 {
-                  "name": "event",
-                  "type": {
-                    "text": "Event"
-                  }
+                  "description": "The focus event.",
+                  "name": "event"
                 }
               ],
-              "description": "Toggles the state of the toggle element.\nand dispatch the new change event."
+              "inheritedFrom": {
+                "name": "Popover",
+                "module": "components/popover/popover.component.js"
+              }
             },
             {
               "kind": "method",
-              "name": "setToggleSize",
+              "name": "isOpenUpdated",
               "privacy": "private",
               "parameters": [
                 {
-                  "name": "size",
+                  "name": "oldValue",
                   "type": {
-                    "text": "ToggleSize"
+                    "text": "boolean"
                   },
-                  "description": "The size to set."
+                  "description": "The old value of the visible property."
+                },
+                {
+                  "name": "newValue",
+                  "type": {
+                    "text": "boolean"
+                  },
+                  "description": "The new value of the visible property."
                 }
               ],
-              "description": "Sets the size attribute for the toggle component.\nIf the provided size is not included in the TOGGLE_SIZE,\nit defaults to the value specified in DEFAULTS.SIZE."
+              "description": "Handles the popover visibility change and position the popover.\nHandles the exit event to close the popover.",
+              "inheritedFrom": {
+                "name": "Popover",
+                "module": "components/popover/popover.component.js"
+              }
             },
             {
               "kind": "field",
-              "name": "name",
-              "type": {
-                "text": "string"
-              },
-              "default": "''",
-              "description": "Indicates the name of the component group.\nThey are used to group elements in a form together.",
-              "attribute": "name",
-              "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": "FormInternalsMixin",
-                "module": "utils/mixins/FormInternalsMixin.js"
+                "name": "Popover",
+                "module": "components/popover/popover.component.js"
               }
             },
             {
               "kind": "field",
-              "name": "value",
-              "type": {
-                "text": "string"
-              },
-              "default": "''",
-              "description": "Indicates the value of the component group (ex: input, checkbox, radio, select etc...)",
-              "attribute": "value",
-              "reflects": true,
+              "name": "cancelCloseDelay",
+              "privacy": "private",
+              "description": "Cancels the close delay timer.",
               "inheritedFrom": {
-                "name": "FormInternalsMixin",
-                "module": "utils/mixins/FormInternalsMixin.js"
+                "name": "Popover",
+                "module": "components/popover/popover.component.js"
               }
             },
             {
               "kind": "field",
-              "name": "validationMessage",
-              "type": {
-                "text": "string | undefined"
-              },
-              "description": "Custom validation message that will override the default message and displayed when the input is invalid.",
-              "attribute": "validation-message",
-              "reflects": true,
+              "name": "showPopover",
+              "privacy": "public",
+              "description": "Shows the popover.",
               "inheritedFrom": {
-                "name": "FormInternalsMixin",
-                "module": "utils/mixins/FormInternalsMixin.js"
+                "name": "Popover",
+                "module": "components/popover/popover.component.js"
               }
             },
             {
               "kind": "field",
-              "name": "validity",
-              "type": {
-                "text": "ValidityState"
-              },
-              "readonly": true,
+              "name": "hidePopover",
+              "privacy": "public",
+              "description": "Hides the popover.",
+              "inheritedFrom": {
+                "name": "Popover",
+                "module": "components/popover/popover.component.js"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "togglePopoverVisible",
+              "privacy": "public",
+              "description": "Toggles the popover visibility.",
+              "inheritedFrom": {
+                "name": "Popover",
+                "module": "components/popover/popover.component.js"
+              }
+            },
+            {
+              "kind": "method",
+              "name": "handleCreatePopoverFirstUpdate",
+              "privacy": "private",
+              "description": "Sets the focusable elements inside the popover.",
+              "inheritedFrom": {
+                "name": "Popover",
+                "module": "components/popover/popover.component.js"
+              }
+            },
+            {
+              "kind": "method",
+              "name": "positionPopover",
+              "privacy": "private",
+              "description": "Positions the popover based on the trigger element.\nIt also handles the flip, size and arrow placement.\nIt uses the floating-ui/dom library to calculate the position.",
+              "inheritedFrom": {
+                "name": "Popover",
+                "module": "components/popover/popover.component.js"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "utils",
+              "default": "new PopoverUtils(this)",
+              "inheritedFrom": {
+                "name": "Popover",
+                "module": "components/popover/popover.component.js"
+              }
+            }
+          ],
+          "events": [
+            {
+              "description": "(React: onShown) This event is dispatched when the tooltip is shown",
+              "name": "shown",
+              "reactName": "onShown",
+              "eventName": "ShownEvent",
+              "inheritedFrom": {
+                "name": "Popover",
+                "module": "src/components/popover/popover.component.ts"
+              }
+            },
+            {
+              "description": "(React: onHidden) This event is dispatched when the tooltip is hidden",
+              "name": "hidden",
+              "reactName": "onHidden",
+              "eventName": "HiddenEvent",
               "inheritedFrom": {
-                "name": "FormInternalsMixin",
-                "module": "utils/mixins/FormInternalsMixin.js"
+                "name": "Popover",
+                "module": "src/components/popover/popover.component.ts"
               }
             },
             {
-              "kind": "field",
-              "name": "willValidate",
-              "readonly": true,
+              "description": "(React: onCreated) This event is dispatched when the tooltip is created (added to the DOM)",
+              "name": "created",
+              "reactName": "onCreated",
+              "eventName": "CreatedEvent",
               "inheritedFrom": {
-                "name": "FormInternalsMixin",
-                "module": "utils/mixins/FormInternalsMixin.js"
+                "name": "Popover",
+                "module": "src/components/popover/popover.component.ts"
               }
             },
             {
-              "kind": "method",
-              "name": "setValidity",
-              "description": "Sets the validity of the input field based on the input field's validity.",
-              "return": {
-                "type": {
-                  "text": ""
-                }
-              },
+              "description": "(React: onDestroyed) This event is dispatched when the tooltip is destroyed (removed from the DOM)",
+              "name": "destroyed",
+              "reactName": "onDestroyed",
+              "eventName": "DestroyedEvent",
               "inheritedFrom": {
-                "name": "FormInternalsMixin",
-                "module": "utils/mixins/FormInternalsMixin.js"
+                "name": "Popover",
+                "module": "src/components/popover/popover.component.ts"
               }
+            }
+          ],
+          "attributes": [
+            {
+              "name": "tooltip-type",
+              "type": {
+                "text": "TooltipType"
+              },
+              "description": "The type of tooltip.\n- **description** sets aria-describedby on the trigger component which refers to the tooltip id.\n- **label** sets aria-labelledby on the trigger component which refers to the tooltip id.\n- **none** no aria props set on trigger component referring to the tooltip id.",
+              "default": "'description'",
+              "fieldName": "tooltipType"
             },
             {
-              "kind": "method",
-              "name": "checkValidity",
-              "return": {
-                "type": {
-                  "text": "boolean"
-                }
+              "name": "enabledFocusTrap",
+              "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": "enabledFocusTrap",
               "inheritedFrom": {
-                "name": "FormInternalsMixin",
-                "module": "utils/mixins/FormInternalsMixin.js"
+                "name": "Popover",
+                "module": "src/components/popover/popover.component.ts"
               }
             },
             {
-              "kind": "method",
-              "name": "reportValidity",
+              "name": "enabledPreventScroll",
+              "type": {
+                "text": "boolean"
+              },
+              "description": "Prevent outside scrolling when popover show.",
+              "default": "false",
+              "fieldName": "enabledPreventScroll",
               "inheritedFrom": {
-                "name": "FormInternalsMixin",
-                "module": "utils/mixins/FormInternalsMixin.js"
+                "name": "Popover",
+                "module": "src/components/popover/popover.component.ts"
               }
             },
             {
-              "kind": "field",
               "name": "id",
               "type": {
                 "text": "string"
               },
-              "default": "`mdc-input-${uuidv4()}`",
-              "description": "The unique id of the input field. It is used to link the input field with the label.",
-              "attribute": "id",
+              "default": "''",
+              "description": "The unique ID of the popover.",
+              "fieldName": "id",
               "inheritedFrom": {
-                "name": "FormfieldWrapper",
-                "module": "components/formfieldwrapper/formfieldwrapper.component.js"
+                "name": "Popover",
+                "module": "src/components/popover/popover.component.ts"
               }
             },
             {
-              "kind": "field",
-              "name": "dataAriaLabel",
+              "name": "triggerID",
               "type": {
-                "text": "string | null"
+                "text": "string"
               },
-              "default": "null",
-              "description": "Defines a string value that labels the current element.\nThe Aria-Label attribute to be set for accessibility.",
-              "attribute": "data-aria-label",
-              "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": "DataAriaLabelMixin",
-                "module": "utils/mixins/DataAriaLabelMixin.js"
+                "name": "Popover",
+                "module": "src/components/popover/popover.component.ts"
               }
             },
             {
-              "kind": "field",
-              "name": "disabled",
+              "name": "trigger",
               "type": {
-                "text": "boolean"
+                "text": "PopoverTrigger"
               },
-              "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,
+              "description": "Determines the events that cause the Popover 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": "click",
+              "fieldName": "trigger",
               "inheritedFrom": {
-                "name": "FormfieldWrapper",
-                "module": "components/formfieldwrapper/formfieldwrapper.component.js"
+                "name": "Popover",
+                "module": "src/components/popover/popover.component.ts"
               }
             },
             {
-              "kind": "field",
-              "name": "label",
+              "name": "placement",
               "type": {
-                "text": "string | undefined"
+                "text": "PopoverPlacement"
               },
-              "description": "The label of the input field. It is linked to the input field using the `for` attribute.",
-              "attribute": "label",
-              "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": "FormfieldWrapper",
-                "module": "components/formfieldwrapper/formfieldwrapper.component.js"
+                "name": "Popover",
+                "module": "src/components/popover/popover.component.ts"
               }
             },
             {
-              "kind": "field",
-              "name": "requiredLabel",
+              "name": "color",
               "type": {
-                "text": "string | undefined"
+                "text": "PopoverColor"
               },
-              "description": "The required label of the input field.\nWhen an appropriate string value is set,\nthe input field is marked as required and the label is appended with this text.",
-              "attribute": "required-label",
-              "reflects": true,
+              "description": "Color of the popover\n- **tonal**\n- **contrast**",
+              "default": "tonal",
+              "fieldName": "color",
               "inheritedFrom": {
-                "name": "FormfieldWrapper",
-                "module": "components/formfieldwrapper/formfieldwrapper.component.js"
+                "name": "Popover",
+                "module": "src/components/popover/popover.component.ts"
               }
             },
             {
-              "kind": "field",
-              "name": "helpTextType",
+              "name": "visible",
               "type": {
-                "text": "ValidationType"
+                "text": "boolean"
               },
-              "description": "The type of help text. It can be 'default', 'error', 'warning', 'success', 'priority'.",
-              "attribute": "help-text-type",
-              "reflects": true,
+              "description": "The visibility of the popover.",
+              "default": "false",
+              "fieldName": "visible",
               "inheritedFrom": {
-                "name": "FormfieldWrapper",
-                "module": "components/formfieldwrapper/formfieldwrapper.component.js"
+                "name": "Popover",
+                "module": "src/components/popover/popover.component.ts"
               }
             },
             {
-              "kind": "field",
-              "name": "helpText",
+              "name": "offset",
               "type": {
-                "text": "string | undefined"
+                "text": "number"
               },
-              "description": "The help text that is displayed below the input field.",
-              "attribute": "help-text",
-              "reflects": true,
+              "description": "The offset of the popover.",
+              "default": "4",
+              "fieldName": "offset",
               "inheritedFrom": {
-                "name": "FormfieldWrapper",
-                "module": "components/formfieldwrapper/formfieldwrapper.component.js"
+                "name": "Popover",
+                "module": "src/components/popover/popover.component.ts"
               }
             },
             {
-              "kind": "method",
-              "name": "renderLabelElement",
-              "privacy": "protected",
-              "description": "creates the label element when the label property is set.\nid is used to link the label with the input field.",
-              "return": {
-                "type": {
-                  "text": ""
-                }
+              "name": "focus-trap",
+              "type": {
+                "text": "boolean"
               },
+              "description": "Determines whether the focus trap is enabled.\nIf true, focus will be restricted to the content within this component.",
+              "default": "false",
+              "fieldName": "focusTrap",
               "inheritedFrom": {
-                "name": "FormfieldWrapper",
-                "module": "components/formfieldwrapper/formfieldwrapper.component.js"
-              }
-            },
-            {
-              "kind": "method",
-              "name": "renderRequiredLabel",
-              "privacy": "protected",
-              "inheritedFrom": {
-                "name": "FormfieldWrapper",
-                "module": "components/formfieldwrapper/formfieldwrapper.component.js"
+                "name": "Popover",
+                "module": "src/components/popover/popover.component.ts"
               }
             },
             {
-              "kind": "method",
-              "name": "renderHelpTextIcon",
-              "privacy": "protected",
-              "description": "creates the helpertext icon based on the helpTextType for validation.\nIf the helpTextType is not set, it defaults to 'default' and it doesn't display any icon.",
-              "return": {
-                "type": {
-                  "text": ""
-                }
+              "name": "prevent-scroll",
+              "type": {
+                "text": "boolean"
               },
+              "description": "Prevent outside scrolling when popover show.",
+              "default": "false",
+              "fieldName": "preventScroll",
               "inheritedFrom": {
-                "name": "FormfieldWrapper",
-                "module": "components/formfieldwrapper/formfieldwrapper.component.js"
+                "name": "Popover",
+                "module": "src/components/popover/popover.component.ts"
               }
             },
             {
-              "kind": "method",
-              "name": "renderHelpText",
-              "privacy": "protected",
-              "description": "creates the helper text component when the helpertext value is set.\nIt is also used to display the validation message based on the helpTextType.",
-              "return": {
-                "type": {
-                  "text": ""
-                }
+              "name": "show-arrow",
+              "type": {
+                "text": "boolean"
               },
+              "description": "The arrow visibility of the popover.",
+              "default": "false",
+              "fieldName": "showArrow",
               "inheritedFrom": {
-                "name": "FormfieldWrapper",
-                "module": "components/formfieldwrapper/formfieldwrapper.component.js"
+                "name": "Popover",
+                "module": "src/components/popover/popover.component.ts"
               }
             },
             {
-              "kind": "method",
-              "name": "renderLabel",
-              "privacy": "protected",
-              "description": "renders the mdc-label-text container that contains the label and labelInfoToggleTip.",
-              "return": {
-                "type": {
-                  "text": ""
-                }
+              "name": "close-button",
+              "type": {
+                "text": "boolean"
               },
+              "description": "The close button visibility of the popover.",
+              "default": "false",
+              "fieldName": "closeButton",
               "inheritedFrom": {
-                "name": "FormfieldWrapper",
-                "module": "components/formfieldwrapper/formfieldwrapper.component.js"
+                "name": "Popover",
+                "module": "src/components/popover/popover.component.ts"
               }
             },
             {
-              "kind": "method",
-              "name": "renderHelperText",
-              "privacy": "protected",
-              "description": "renders the mdc-help-text container that contains the helpertext icon and helpertext.",
-              "return": {
-                "type": {
-                  "text": ""
-                }
+              "name": "interactive",
+              "type": {
+                "text": "boolean"
               },
+              "description": "Determines whether the popover is interactive。",
+              "default": "false",
+              "fieldName": "interactive",
               "inheritedFrom": {
-                "name": "FormfieldWrapper",
-                "module": "components/formfieldwrapper/formfieldwrapper.component.js"
+                "name": "Popover",
+                "module": "src/components/popover/popover.component.ts"
               }
-            }
-          ],
-          "events": [
+            },
             {
+              "name": "delay",
               "type": {
-                "text": "EventConstructor"
+                "text": "string"
+              },
+              "description": "The delay of the show/hide popover.",
+              "default": "0,0",
+              "fieldName": "delay",
+              "inheritedFrom": {
+                "name": "Popover",
+                "module": "src/components/popover/popover.component.ts"
               }
             },
             {
-              "description": "(React: onChange) Event that gets dispatched when the toggle state changes.",
-              "name": "change",
-              "reactName": "onChange",
-              "eventName": "ChangeEvent"
-            },
-            {
-              "description": "(React: onFocus) Event that gets dispatched when the toggle receives focus.",
-              "name": "focus",
-              "reactName": "onFocus",
-              "eventName": "FocusEvent"
-            }
-          ],
-          "attributes": [
-            {
-              "name": "checked",
+              "name": "hide-on-escape",
               "type": {
                 "text": "boolean"
               },
+              "description": "Hide popover on escape key press.",
               "default": "false",
-              "description": "Determines whether the toggle is active or inactive.",
-              "fieldName": "checked"
+              "fieldName": "hideOnEscape",
+              "inheritedFrom": {
+                "name": "Popover",
+                "module": "src/components/popover/popover.component.ts"
+              }
             },
             {
-              "name": "size",
+              "name": "hide-on-blur",
               "type": {
-                "text": "ToggleSize"
+                "text": "boolean"
               },
-              "description": "Determines toggle size in rem (height is specified here).\n- **Default**: 1.5\n- **Compact**: 1",
-              "default": "default",
-              "fieldName": "size"
+              "description": "Hide popover on blur.",
+              "default": "false",
+              "fieldName": "hideOnBlur",
+              "inheritedFrom": {
+                "name": "Popover",
+                "module": "src/components/popover/popover.component.ts"
+              }
             },
             {
-              "name": "autofocus",
+              "name": "hide-on-outside-click",
               "type": {
                 "text": "boolean"
               },
+              "description": "Hide on outside click of the popover.",
               "default": "false",
-              "description": "Automatically focus on the element when the page loads.\n[MDN Reference](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/autofocus)",
-              "fieldName": "autofocus"
+              "fieldName": "hideOnOutsideClick",
+              "inheritedFrom": {
+                "name": "Popover",
+                "module": "src/components/popover/popover.component.ts"
+              }
             },
             {
-              "name": "name",
+              "name": "focus-back-to-trigger",
               "type": {
-                "text": "string"
+                "text": "boolean"
               },
-              "default": "''",
-              "description": "Indicates the name of the component group.\nThey are used to group elements in a form together.",
-              "fieldName": "name",
+              "description": "The focus back to trigger after the popover hide.",
+              "default": "false",
+              "fieldName": "focusBackToTrigger",
               "inheritedFrom": {
-                "name": "FormInternalsMixin",
-                "module": "src/utils/mixins/FormInternalsMixin.ts"
+                "name": "Popover",
+                "module": "src/components/popover/popover.component.ts"
               }
             },
             {
-              "name": "value",
+              "name": "backdrop",
               "type": {
-                "text": "string"
+                "text": "boolean"
               },
-              "default": "''",
-              "description": "Indicates the value of the component group (ex: input, checkbox, radio, select etc...)",
-              "fieldName": "value",
+              "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": "FormInternalsMixin",
-                "module": "src/utils/mixins/FormInternalsMixin.ts"
+                "name": "Popover",
+                "module": "src/components/popover/popover.component.ts"
               }
             },
             {
-              "name": "validation-message",
+              "name": "flip",
               "type": {
-                "text": "string | undefined"
+                "text": "boolean"
               },
-              "description": "Custom validation message that will override the default message and displayed when the input is invalid.",
-              "fieldName": "validationMessage",
+              "description": "Changes the placement of popover to keep it in view when scrolling.",
+              "default": "true",
+              "fieldName": "flip",
               "inheritedFrom": {
-                "name": "FormInternalsMixin",
-                "module": "src/utils/mixins/FormInternalsMixin.ts"
+                "name": "Popover",
+                "module": "src/components/popover/popover.component.ts"
               }
             },
             {
-              "name": "data-aria-label",
+              "name": "size",
               "type": {
-                "text": "string | null"
+                "text": "boolean"
               },
-              "default": "null",
-              "description": "Defines a string value that labels the current element.\nThe Aria-Label attribute to be set for accessibility.",
-              "fieldName": "dataAriaLabel",
+              "description": "Changes the size of popover to keep it in view when scrolling.",
+              "default": "false",
+              "fieldName": "size",
               "inheritedFrom": {
-                "name": "DataAriaLabelMixin",
-                "module": "src/utils/mixins/DataAriaLabelMixin.ts"
+                "name": "Popover",
+                "module": "src/components/popover/popover.component.ts"
               }
             },
             {
-              "name": "disabled",
+              "name": "z-index",
               "type": {
-                "text": "boolean"
+                "text": "number"
               },
-              "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",
+              "description": "The z-index of the popover.",
+              "default": "1000",
+              "fieldName": "zIndex",
               "inheritedFrom": {
-                "name": "FormfieldWrapper",
-                "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
+                "name": "Popover",
+                "module": "src/components/popover/popover.component.ts"
               }
             },
             {
-              "name": "label",
+              "name": "append-to",
               "type": {
-                "text": "string | undefined"
+                "text": "string"
               },
-              "description": "The label of the input field. It is linked to the input field using the `for` attribute.",
-              "fieldName": "label",
+              "default": "''",
+              "description": "Element ID that the popover append to.",
+              "fieldName": "appendTo",
               "inheritedFrom": {
-                "name": "FormfieldWrapper",
-                "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
+                "name": "Popover",
+                "module": "src/components/popover/popover.component.ts"
               }
             },
             {
-              "name": "required-label",
+              "name": "close-button-aria-label",
               "type": {
-                "text": "string | undefined"
+                "text": "string | null"
               },
-              "description": "The required label of the input field.\nWhen an appropriate string value is set,\nthe input field is marked as required and the label is appended with this text.",
-              "fieldName": "requiredLabel",
+              "default": "null",
+              "description": "aria-label attribute to be set for close button accessibility.",
+              "fieldName": "closeButtonAriaLabel",
               "inheritedFrom": {
-                "name": "FormfieldWrapper",
-                "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
+                "name": "Popover",
+                "module": "src/components/popover/popover.component.ts"
               }
             },
             {
-              "name": "id",
+              "name": "role",
               "type": {
-                "text": "string"
+                "text": "HTMLElement['role']"
               },
-              "default": "''",
-              "description": "The unique id of the input field. It is used to link the input field with the label.",
-              "fieldName": "id",
+              "description": "Role of the popover",
+              "default": "dialog",
+              "fieldName": "role",
               "inheritedFrom": {
-                "name": "FormfieldWrapper",
-                "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
+                "name": "Popover",
+                "module": "src/components/popover/popover.component.ts"
               }
             },
             {
-              "name": "help-text-type",
+              "name": "aria-labelledby",
               "type": {
-                "text": "ValidationType"
+                "text": "string | null"
               },
-              "description": "The type of help text. It can be 'default', 'error', 'warning', 'success', 'priority'.",
-              "fieldName": "helpTextType",
+              "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": "FormfieldWrapper",
-                "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
+                "name": "Popover",
+                "module": "src/components/popover/popover.component.ts"
               }
             },
             {
-              "name": "help-text",
+              "name": "aria-describedby",
               "type": {
-                "text": "string | undefined"
+                "text": "string | null"
               },
-              "description": "The help text that is displayed below the input field.",
-              "fieldName": "helpText",
+              "default": "null",
+              "description": "aria-describedby of the popover.",
+              "fieldName": "ariaDescribedby",
               "inheritedFrom": {
-                "name": "FormfieldWrapper",
-                "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
+                "name": "Popover",
+                "module": "src/components/popover/popover.component.ts"
               }
-            }
-          ],
-          "mixins": [
-            {
-              "name": "FormInternalsMixin",
-              "module": "/src/utils/mixins/FormInternalsMixin"
             },
             {
-              "name": "DataAriaLabelMixin",
-              "module": "/src/utils/mixins/DataAriaLabelMixin"
+              "name": "disable-aria-expanded",
+              "type": {
+                "text": "boolean"
+              },
+              "description": "Disable aria-expanded attribute on trigger element.",
+              "default": "false",
+              "fieldName": "disableAriaExpanded",
+              "inheritedFrom": {
+                "name": "Popover",
+                "module": "src/components/popover/popover.component.ts"
+              }
             }
           ],
           "superclass": {
-            "name": "FormfieldWrapper",
-            "module": "/src/components/formfieldwrapper"
+            "name": "Popover",
+            "module": "/src/components/popover/popover.component"
           },
-          "tagName": "mdc-toggle",
-          "jsDoc": "/**\n * Toggle Component is an interactive control used to switch between two mutually exclusive options,\n * such as On/Off, Active/Inactive. These are commonly used in settings panels, forms, and preference selections\n * where users need to enable or disable a feature.\n * It contains an optional label and an optional helper text.\n *\n * To create a group of toggles, use the FormFieldGroup component.\n *\n * Note: It internally renders a checkbox styled as a toggle switch.\n *\n * @dependency mdc-icon\n *\n * @tagname mdc-toggle\n *\n * @event change - (React: onChange) Event that gets dispatched when the toggle state changes.\n * @event focus - (React: onFocus) Event that gets dispatched when the toggle receives focus.\n *\n * @cssproperty --mdc-toggle-width - width of the toggle\n * @cssproperty --mdc-toggle-height - height of the toggle\n * @cssproperty --mdc-toggle-width-compact - width of the toggle when it's size is compact\n * @cssproperty --mdc-toggle-height-compact - height of the toggle when it's size is compact\n * @cssproperty --mdc-toggle-border-radius - border radius of the toggle\n * @cssproperty --mdc-toggle-border-radius-compact - border radius of the toggle when it's size is compact\n * @cssproperty --mdc-toggle-border - border of the toggle\n * @cssproperty --mdc-toggle-inactive-rest-color - background color of the inactive toggle in rest state\n * @cssproperty --mdc-toggle-inactive-hover-color - background color of the inactive toggle in hover state\n * @cssproperty --mdc-toggle-inactive-pressed-color - background color of the inactive toggle in pressed state\n * @cssproperty --mdc-toggle-inactive-disabled-color - background color of the inactive toggle in disabled state\n * @cssproperty --mdc-toggle-active-rest-color - background color of the active toggle in rest state\n * @cssproperty --mdc-toggle-active-hover-color - background color of the active toggle in hover state\n * @cssproperty --mdc-toggle-active-pressed-color - background color of the active toggle in pressed state\n * @cssproperty --mdc-toggle-active-disabled-color - background color of the active toggle in disabled state\n * @cssproperty --mdc-toggle-help-text-color -  color of the help text label\n * @cssproperty --mdc-toggle-label-color-disabled - color of the toggle label and help text in disabled state\n *\n */",
+          "tagName": "mdc-tooltip",
+          "jsDoc": "/**\n * A tooltip is triggered by mouse hover or by keyboard focus\n * and will disappear upon mouse exit or focus change.\n *\n * Note: Tooltips cannot contain content that can be focused or interacted with.\n *\n * @tagname mdc-tooltip\n *\n * @event shown - (React: onShown) This event is dispatched when the tooltip is shown\n * @event hidden - (React: onHidden) This event is dispatched when the tooltip is hidden\n * @event created - (React: onCreated) This event is dispatched when the tooltip is created (added to the DOM)\n * @event destroyed - (React: onDestroyed) This event is dispatched when the tooltip is destroyed (removed from the DOM)\n *\n * @cssproperty --mdc-tooltip-max-width - The maximum width of the tooltip.\n * @cssproperty --mdc-tooltip-padding - The padding of the tooltip.\n * @cssproperty --mdc-tooltip-text-color - The text color of the tooltip.\n * @cssproperty --mdc-tooltip-text-color-contrast - The text color of the tooltip when the color is contrast.\n *\n */",
           "customElement": true,
           "slots": [
             {
-              "description": "slot to add the label info icon",
-              "name": "label-info",
+              "description": "Default slot for the popover content",
+              "name": "",
               "inheritedFrom": {
-                "name": "FormfieldWrapper",
-                "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
+                "name": "Popover",
+                "module": "src/components/popover/popover.component.ts"
               }
             }
           ]
@@ -17318,8 +17318,8 @@
           "kind": "js",
           "name": "default",
           "declaration": {
-            "name": "Toggle",
-            "module": "components/toggle/toggle.component.js"
+            "name": "Tooltip",
+            "module": "components/tooltip/tooltip.component.js"
           }
         }
       ]