@momentum-design/components 0.76.5 → 0.76.6

package/dist/custom-elements.json

@@ -28029,270 +28029,289 @@
     },
     {
       "kind": "javascript-module",
-      "path": "components/textarea/textarea.component.js",
+      "path": "components/themeprovider/themeprovider.component.js",
       "declarations": [
         {
           "kind": "class",
-          "description": "mdc-textarea component, which is used to get the multi-line text input from the user.\nIt contains:\n- label: It is the title of the textarea field.\n- required: A boolean attribute depicting that the textarea field is required.\n- Textarea: It is the multi-line text input field.\n- helper-text: It is the text that provides additional information about the textarea field.\n- max-character-limit: It is the text that shows the character count of the textarea field.\n- Error, Warning, Success, Priority Help Text type: It is the text that provides additional information\n  about the textarea field based on the validation state.\n- limitexceeded: It is the event that is dispatched when the character limit exceeds or restored.\n  This event exposes 3 properties:\n  - currentCharacterCount - the current number of characters in the textarea field,\n  - maxCharacterLimit - the maximum number of characters allowed in the textarea field,\n  - value - the current value of the textarea field,\n\n**Note**: Consumers must set the help-text-type with 'error' and\nhelp-text attribute with the error message using limitexceeded event.\nThe same help-text value will be used for the validation message to be displayed.",
-          "name": "Textarea",
+          "description": "ThemeProvider component, which sets the passed in themeclass as class.\nIf the themeclass switches, the existing themeclass will be removed as a class\nand the new themeclass will be added.\n\nCSS variables defined in the themeclass will be used for the styling of child dom nodes.\n\nAvailable Momentum theme classes:\n\n`mds-theme-stable-darkWebex`, `mds-theme-stable-lightWebex`\n\n`mds-theme-stable-darkBronzeWebex`, `mds-theme-stable-lightBronzeWebex`\n\n`mds-theme-stable-darkIndigoWebex`, `mds-theme-stable-lightIndigoWebex`\n\n`mds-theme-stable-darkJadeWebex`, `mds-theme-stable-lightJadeWebex`\n\n`mds-theme-stable-darkLavenderWebex`, `mds-theme-stable-lightLavenderWebex`\n\n`mds-theme-stable-darkRoseWebex`, `mds-theme-stable-lightRoseWebex`\n\nThemeclass context can be be consumed from Lit child components\n(see providerUtils.consume for how to consume)\n\nThemeProvider also includes basic font defaults for text.",
+          "name": "ThemeProvider",
           "cssProperties": [
             {
-              "description": "Border color for the textarea container when disabled",
-              "name": "--mdc-textarea-disabled-border-color"
+              "description": "Option to override the default color, default: color-theme-text-primary-normal",
+              "name": "--mdc-themeprovider-color-default"
             },
             {
-              "description": "Text color for the textarea field when disabled",
-              "name": "--mdc-textarea-disabled-text-color"
+              "description": "Option to override the font family, default: `Momentum` (from momentum-design/fonts)",
+              "name": "--mdc-themeprovider-font-family"
             },
             {
-              "description": "Background color for the textarea field when disabled",
-              "name": "--mdc-textarea-disabled-background-color"
+              "description": "Option to override the font weight, default: `400`",
+              "name": "--mdc-themeprovider-font-weight"
             },
             {
-              "description": "Text color for the textarea field",
-              "name": "--mdc-textarea-text-color"
+              "description": "Option to override the default letter-spacing, default: `-0.25px` (this is to match the old CiscoSans)",
+              "name": "--mdc-themeprovider-letter-spacing-adjustment"
             },
             {
-              "description": "Background color for the textarea field",
-              "name": "--mdc-textarea-background-color"
+              "description": "Option to override the font feature settings, default: `\"ss02\" on`",
+              "name": "--mdc-themeprovider-font-feature-settings"
             },
             {
-              "description": "Border color for the textarea field",
-              "name": "--mdc-textarea-border-color"
+              "description": "Option to override the color of the scrollbar track.",
+              "name": "--mdc-themeprovider-scrollbar-track-color"
             },
             {
-              "description": "Text color for the character counter",
-              "name": "--mdc-textarea-text-secondary-normal"
+              "description": "Option to override the color of the scrollbar thumb.",
+              "name": "--mdc-themeprovider-scrollbar-thumb-color"
             },
             {
-              "description": "Border color for the error related help text",
-              "name": "--mdc-textarea-error-border-color"
+              "description": "Option to override the color of the scrollbar thumb on hover. Applicable only on webkit browsers.",
+              "name": "--mdc-themeprovider-scrollbar-thumb-hover-color"
             },
             {
-              "description": "Border color for the warning related help text",
-              "name": "--mdc-textarea-warning-border-color"
-            },
+              "description": "Option to override the color of the scrollbar thumb on press. Applicable only on webkit browsers.",
+              "name": "--mdc-themeprovider-scrollbar-thumb-active-color"
+            }
+          ],
+          "slots": [
             {
-              "description": "Border color for the success related help text",
-              "name": "--mdc-textarea-success-border-color"
-            },
+              "description": "children",
+              "name": ""
+            }
+          ],
+          "members": [
             {
-              "description": "Border color for the priority related help text",
-              "name": "--mdc-textarea-primary-border-color"
+              "kind": "field",
+              "name": "Context",
+              "privacy": "public",
+              "static": true,
+              "description": "Context object of the ThemeProvider, to be consumed by child components",
+              "readonly": true
             },
             {
-              "description": "Background color for the textarea container when hover",
-              "name": "--mdc-textarea-hover-background-color"
+              "kind": "field",
+              "name": "themeclass",
+              "type": {
+                "text": "string"
+              },
+              "description": "Current theme class\n\nHas to be fully qualified, such that\nthe theme class matches the class of the respective\ntheme stylesheet\n\nDefault: 'mds-theme-stable-darkWebex'",
+              "attribute": "themeclass"
             },
             {
-              "description": "Background color for the textarea container when focused",
-              "name": "--mdc-textarea-focused-background-color"
+              "kind": "method",
+              "name": "updateContext",
+              "privacy": "protected",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "description": "Update all observing components of this\nprovider to update the themeclass\n\nIs called on every re-render, see Provider class"
             },
             {
-              "description": "Border color for the textarea container when focused",
-              "name": "--mdc-textarea-focused-border-color"
+              "kind": "method",
+              "name": "setThemeInClassList",
+              "privacy": "private",
+              "description": "Function to update the active theme classnames to update the theme tokens\nas CSS variables on the web component."
             }
           ],
-          "members": [
+          "attributes": [
             {
-              "kind": "field",
-              "name": "placeholder",
+              "name": "themeclass",
               "type": {
-                "text": "string | undefined"
+                "text": "string"
               },
-              "description": "The placeholder text that is displayed when the textarea field is empty.",
-              "attribute": "placeholder"
+              "description": "Current theme class\n\nHas to be fully qualified, such that\nthe theme class matches the class of the respective\ntheme stylesheet\n\nDefault: 'mds-theme-stable-darkWebex'",
+              "fieldName": "themeclass"
+            }
+          ],
+          "superclass": {
+            "name": "Provider",
+            "module": "/src/models"
+          },
+          "tagName": "mdc-themeprovider",
+          "jsDoc": "/**\n * ThemeProvider component, which sets the passed in themeclass as class.\n * If the themeclass switches, the existing themeclass will be removed as a class\n * and the new themeclass will be added.\n *\n * CSS variables defined in the themeclass will be used for the styling of child dom nodes.\n *\n * Available Momentum theme classes:\n *\n * `mds-theme-stable-darkWebex`, `mds-theme-stable-lightWebex`\n *\n * `mds-theme-stable-darkBronzeWebex`, `mds-theme-stable-lightBronzeWebex`\n *\n * `mds-theme-stable-darkIndigoWebex`, `mds-theme-stable-lightIndigoWebex`\n *\n * `mds-theme-stable-darkJadeWebex`, `mds-theme-stable-lightJadeWebex`\n *\n * `mds-theme-stable-darkLavenderWebex`, `mds-theme-stable-lightLavenderWebex`\n *\n * `mds-theme-stable-darkRoseWebex`, `mds-theme-stable-lightRoseWebex`\n *\n * Themeclass context can be be consumed from Lit child components\n * (see providerUtils.consume for how to consume)\n *\n * ThemeProvider also includes basic font defaults for text.\n *\n * @tagname mdc-themeprovider\n *\n * @slot - children\n *\n * @cssproperty --mdc-themeprovider-color-default - Option to override the default color,\n * default: color-theme-text-primary-normal\n * @cssproperty --mdc-themeprovider-font-family - Option to override the font family,\n * default: `Momentum` (from momentum-design/fonts)\n * @cssproperty --mdc-themeprovider-font-weight - Option to override the font weight, default: `400`\n * @cssproperty --mdc-themeprovider-letter-spacing-adjustment - Option to override the default letter-spacing,\n * default: `-0.25px` (this is to match the old CiscoSans)\n * @cssproperty --mdc-themeprovider-font-feature-settings - Option to override the font feature settings,\n * default: `\"ss02\" on`\n * @cssproperty --mdc-themeprovider-scrollbar-track-color - Option to override the color of the scrollbar track.\n * @cssproperty --mdc-themeprovider-scrollbar-thumb-color - Option to override the color of the scrollbar thumb.\n * @cssproperty --mdc-themeprovider-scrollbar-thumb-hover-color - Option to override the color of the\n * scrollbar thumb on hover. Applicable only on webkit browsers.\n * @cssproperty --mdc-themeprovider-scrollbar-thumb-active-color - Option to override the color of the\n * scrollbar thumb on press. Applicable only on webkit browsers.\n */",
+          "customElement": true
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "default",
+          "declaration": {
+            "name": "ThemeProvider",
+            "module": "components/themeprovider/themeprovider.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"
             },
             {
-              "kind": "field",
-              "name": "readonly",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "readonly attribute of the textarea field. If true, the textarea field is read-only.",
-              "attribute": "readonly"
+              "description": "Height of the toggle",
+              "name": "--mdc-toggle-height"
             },
             {
-              "kind": "field",
-              "name": "rows",
-              "description": "The rows attribute specifies the visible number of lines in a text area.",
-              "default": "5",
-              "attribute": "rows"
+              "description": "Width of the toggle when it's size is compact",
+              "name": "--mdc-toggle-width-compact"
             },
             {
-              "kind": "field",
-              "name": "cols",
-              "description": "The cols attribute specifies the visible number of lines in a text area.",
-              "default": "40",
-              "attribute": "cols"
+              "description": "Height of the toggle when it's size is compact",
+              "name": "--mdc-toggle-height-compact"
             },
             {
-              "kind": "field",
-              "name": "wrap",
-              "type": {
-                "text": "WrapType"
-              },
-              "description": "The wrap attribute specifies how the text in a text area is to be wrapped when submitted in a form.",
-              "default": "'soft'",
-              "attribute": "wrap"
+              "description": "Line height of the toggle label",
+              "name": "--mdc-toggle-label-lineheight"
             },
             {
-              "kind": "field",
-              "name": "autocapitalize",
-              "type": {
-                "text": "AutoCapitalizeType"
-              },
-              "description": "The autocapitalize attribute of the textarea field.",
-              "default": "'off'",
-              "attribute": "autocapitalize"
+              "description": "Font size of the toggle label",
+              "name": "--mdc-toggle-label-fontsize"
             },
             {
-              "kind": "field",
-              "name": "autocomplete",
-              "type": {
-                "text": "AutoCompleteType"
-              },
-              "description": "The autocomplete attribute of the textarea field.",
-              "default": "'off'",
-              "attribute": "autocomplete"
+              "description": "Font weight of the toggle label",
+              "name": "--mdc-toggle-label-fontweight"
             },
             {
-              "kind": "field",
-              "name": "autofocus",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "If true, the textarea field is focused when the component is rendered.",
-              "attribute": "autofocus"
+              "description": "Color of the toggle label and help text in disabled state",
+              "name": "--mdc-toggle-label-color-disabled"
             },
             {
-              "kind": "field",
-              "name": "dirname",
-              "type": {
-                "text": "string | undefined"
-              },
-              "description": "Specifies the name of the directionality of text for submission purposes (e.g., \"rtl\" for right-to-left).",
-              "attribute": "dirname"
+              "description": "Color of the help text label",
+              "name": "--mdc-toggle-help-text-color"
             },
             {
-              "kind": "field",
-              "name": "maxlength",
-              "type": {
-                "text": "number | undefined"
-              },
-              "description": "The maximum number of characters that the textarea field can accept.",
-              "attribute": "maxlength"
+              "description": "Background color of the active toggle in hover state",
+              "name": "--mdc-toggle-active-hover-color"
             },
             {
-              "kind": "field",
-              "name": "minlength",
-              "type": {
-                "text": "number | undefined"
-              },
-              "description": "The minimum number of characters that the textarea field can accept.",
-              "attribute": "minlength"
+              "description": "Background color of the active toggle in pressed state",
+              "name": "--mdc-toggle-active-pressed-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"
+            }
+          ],
+          "members": [
             {
               "kind": "field",
-              "name": "maxCharacterLimit",
+              "name": "checked",
               "type": {
-                "text": "number | undefined"
+                "text": "boolean"
               },
-              "description": "maximum character limit for the textarea field for character counter.",
-              "attribute": "max-character-limit"
+              "default": "false",
+              "description": "Determines whether the toggle is active or inactive.",
+              "attribute": "checked",
+              "reflects": true
             },
             {
               "kind": "field",
-              "name": "characterLimitExceedingFired",
+              "name": "size",
               "type": {
-                "text": "boolean"
+                "text": "ToggleSize"
               },
-              "privacy": "private",
-              "default": "false"
+              "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": "textarea",
+              "name": "autofocus",
               "type": {
-                "text": "HTMLTextAreaElement"
+                "text": "boolean"
               },
-              "privacy": "protected",
-              "readonly": true
-            },
-            {
-              "kind": "method",
-              "name": "setTextareaValidity",
-              "privacy": "private"
+              "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": "handleValueChange",
-              "description": "Handles the value change of the textarea field.\nSets the form value and updates the validity of the textarea field.",
-              "return": {
-                "type": {
-                  "text": ""
-                }
-              }
+              "name": "manageRequired",
+              "privacy": "private",
+              "description": "Manages the required state of the checkbox.\nIf the checkbox is not checked and the required property is set, then the checkbox is invalid.\nIf the validationMessage is set, it will be used as the custom validity message.\nIf the validationMessage is not set, it will clear the custom validity message."
             },
             {
               "kind": "method",
-              "name": "dispatchCharacterOverflowStateChangeEvent",
+              "name": "setFormValue",
               "privacy": "private",
-              "description": "Dispatches the character overflow state change event.",
-              "return": {
-                "type": {
-                  "text": ""
-                }
-              }
+              "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": "handleCharacterOverflowStateChange",
+              "name": "toggleState",
               "privacy": "private",
-              "description": "Handles the character overflow state change.\nDispatches the character overflow state change event if the character limit is exceeded or restored.",
               "return": {
                 "type": {
-                  "text": ""
+                  "text": "void"
                 }
-              }
+              },
+              "description": "Toggles the state of the toggle element.\nIf the element is not disabled, then the checked property is toggled."
             },
             {
               "kind": "method",
-              "name": "updateValue",
+              "name": "handleKeyDown",
               "privacy": "private",
-              "description": "Updates the value of the textarea field.\nSets the form value.",
               "return": {
                 "type": {
-                  "text": ""
+                  "text": "void"
                 }
-              }
+              },
+              "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": "onChange",
+              "name": "handleChange",
               "privacy": "private",
               "parameters": [
                 {
                   "name": "event",
                   "type": {
                     "text": "Event"
-                  },
-                  "description": "Event which contains information about the value change."
+                  }
                 }
               ],
-              "description": "Handles the change event of the textarea field.\nUpdates the value and sets the validity of the textarea field.\n\nThe 'change' event does not bubble up through the shadow DOM as it was not composed.\nTherefore, we need to re-dispatch the same event to ensure it is propagated correctly.\nRead more: https://developer.mozilla.org/en-US/docs/Web/API/Event/composed"
-            },
-            {
-              "kind": "method",
-              "name": "renderCharacterCounter",
-              "privacy": "protected"
+              "description": "Toggles the state of the toggle element.\nand dispatch the new change event."
             },
             {
               "kind": "method",
-              "name": "renderTextareaFooter",
-              "privacy": "protected"
+              "name": "setToggleSize",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "size",
+                  "type": {
+                    "text": "ToggleSize"
+                  },
+                  "description": "The size to set."
+                }
+              ],
+              "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",
@@ -28572,96 +28591,40 @@
             }
           ],
           "events": [
-            {
-              "name": "limitexceeded",
-              "type": {
-                "text": "CustomEvent"
-              },
-              "description": "(React: onLimitExceeded) This event is dispatched once when the character limit exceeds or restored.",
-              "reactName": "onLimitExceeded"
-            },
             {
               "type": {
                 "text": "EventConstructor"
               }
             },
             {
-              "description": "(React: onInput) This event is dispatched when the value of the textarea field changes (every press).",
-              "name": "input",
-              "reactName": "onInput"
-            },
-            {
-              "description": "(React: onChange) This event is dispatched when the value of the textarea field changes (on blur).",
+              "description": "(React: onChange) Event that gets dispatched when the toggle state changes.",
               "name": "change",
               "reactName": "onChange"
             },
             {
-              "description": "(React: onFocus) This event is dispatched when the textarea receives focus.",
+              "description": "(React: onFocus) Event that gets dispatched when the toggle receives focus.",
               "name": "focus",
               "reactName": "onFocus"
-            },
-            {
-              "description": "(React: onBlur) This event is dispatched when the textarea loses focus.",
-              "name": "blur",
-              "reactName": "onBlur"
             }
           ],
           "attributes": [
             {
-              "name": "placeholder",
-              "type": {
-                "text": "string | undefined"
-              },
-              "description": "The placeholder text that is displayed when the textarea field is empty.",
-              "fieldName": "placeholder"
-            },
-            {
-              "name": "readonly",
+              "name": "checked",
               "type": {
                 "text": "boolean"
               },
               "default": "false",
-              "description": "readonly attribute of the textarea field. If true, the textarea field is read-only.",
-              "fieldName": "readonly"
-            },
-            {
-              "name": "rows",
-              "description": "The rows attribute specifies the visible number of lines in a text area.",
-              "default": "5",
-              "fieldName": "rows"
-            },
-            {
-              "name": "cols",
-              "description": "The cols attribute specifies the visible number of lines in a text area.",
-              "default": "40",
-              "fieldName": "cols"
-            },
-            {
-              "name": "wrap",
-              "type": {
-                "text": "WrapType"
-              },
-              "description": "The wrap attribute specifies how the text in a text area is to be wrapped when submitted in a form.",
-              "default": "'soft'",
-              "fieldName": "wrap"
-            },
-            {
-              "name": "autocapitalize",
-              "type": {
-                "text": "AutoCapitalizeType"
-              },
-              "description": "The autocapitalize attribute of the textarea field.",
-              "default": "'off'",
-              "fieldName": "autocapitalize"
+              "description": "Determines whether the toggle is active or inactive.",
+              "fieldName": "checked"
             },
             {
-              "name": "autocomplete",
+              "name": "size",
               "type": {
-                "text": "AutoCompleteType"
+                "text": "ToggleSize"
               },
-              "description": "The autocomplete attribute of the textarea field.",
-              "default": "'off'",
-              "fieldName": "autocomplete"
+              "description": "Determines toggle size in rem (height is specified here).\n- **Default**: 1.5\n- **Compact**: 1",
+              "default": "default",
+              "fieldName": "size"
             },
             {
               "name": "autofocus",
@@ -28669,41 +28632,9 @@
                 "text": "boolean"
               },
               "default": "false",
-              "description": "If true, the textarea field is focused when the component is rendered.",
+              "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"
             },
-            {
-              "name": "dirname",
-              "type": {
-                "text": "string | undefined"
-              },
-              "description": "Specifies the name of the directionality of text for submission purposes (e.g., \"rtl\" for right-to-left).",
-              "fieldName": "dirname"
-            },
-            {
-              "name": "maxlength",
-              "type": {
-                "text": "number | undefined"
-              },
-              "description": "The maximum number of characters that the textarea field can accept.",
-              "fieldName": "maxlength"
-            },
-            {
-              "name": "minlength",
-              "type": {
-                "text": "number | undefined"
-              },
-              "description": "The minimum number of characters that the textarea field can accept.",
-              "fieldName": "minlength"
-            },
-            {
-              "name": "max-character-limit",
-              "type": {
-                "text": "number | undefined"
-              },
-              "description": "maximum character limit for the textarea field for character counter.",
-              "fieldName": "maxCharacterLimit"
-            },
             {
               "name": "name",
               "type": {
@@ -28845,8 +28776,8 @@
             "name": "FormfieldWrapper",
             "module": "/src/components/formfieldwrapper"
           },
-          "tagName": "mdc-textarea",
-          "jsDoc": "/**\n * mdc-textarea component, which is used to get the multi-line text input from the user.\n * It contains:\n * - label: It is the title of the textarea field.\n * - required: A boolean attribute depicting that the textarea field is required.\n * - Textarea: It is the multi-line text input field.\n * - helper-text: It is the text that provides additional information about the textarea field.\n * - max-character-limit: It is the text that shows the character count of the textarea field.\n * - Error, Warning, Success, Priority Help Text type: It is the text that provides additional information\n *   about the textarea field based on the validation state.\n * - limitexceeded: It is the event that is dispatched when the character limit exceeds or restored.\n *   This event exposes 3 properties:\n *   - currentCharacterCount - the current number of characters in the textarea field,\n *   - maxCharacterLimit - the maximum number of characters allowed in the textarea field,\n *   - value - the current value of the textarea field,\n *\n * **Note**: Consumers must set the help-text-type with 'error' and\n * help-text attribute with the error message using limitexceeded event.\n * The same help-text value will be used for the validation message to be displayed.\n *\n * @tagname mdc-textarea\n *\n * @event input - (React: onInput) This event is dispatched when the value of the textarea field changes (every press).\n * @event change - (React: onChange) This event is dispatched when the value of the textarea field changes (on blur).\n * @event focus - (React: onFocus) This event is dispatched when the textarea receives focus.\n * @event blur - (React: onBlur) This event is dispatched when the textarea loses focus.\n * @event limitexceeded - (React: onLimitExceeded) This event is dispatched once when the character limit\n * exceeds or restored.\n *\n *\n * @dependency mdc-icon\n * @dependency mdc-text\n * @dependency mdc-button\n *\n * @cssproperty --mdc-textarea-disabled-border-color - Border color for the textarea container when disabled\n * @cssproperty --mdc-textarea-disabled-text-color - Text color for the textarea field when disabled\n * @cssproperty --mdc-textarea-disabled-background-color - Background color for the textarea field when disabled\n * @cssproperty --mdc-textarea-text-color - Text color for the textarea field\n * @cssproperty --mdc-textarea-background-color - Background color for the textarea field\n * @cssproperty --mdc-textarea-border-color - Border color for the textarea field\n * @cssproperty --mdc-textarea-text-secondary-normal - Text color for the character counter\n * @cssproperty --mdc-textarea-error-border-color - Border color for the error related help text\n * @cssproperty --mdc-textarea-warning-border-color - Border color for the warning related help text\n * @cssproperty --mdc-textarea-success-border-color - Border color for the success related help text\n * @cssproperty --mdc-textarea-primary-border-color - Border color for the priority related help text\n * @cssproperty --mdc-textarea-hover-background-color - Background color for the textarea container when hover\n * @cssproperty --mdc-textarea-focused-background-color - Background color for the textarea container when focused\n * @cssproperty --mdc-textarea-focused-border-color - Border color for the textarea container when focused\n */",
+          "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 * @dependency mdc-statictoggle\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-label-lineheight - Line height of the toggle label\n * @cssproperty --mdc-toggle-label-fontsize - Font size of the toggle label\n * @cssproperty --mdc-toggle-label-fontweight - Font weight of the toggle label\n * @cssproperty --mdc-toggle-label-color-disabled - Color of the toggle label and help text in disabled state\n * @cssproperty --mdc-toggle-help-text-color - Color of the help text label\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-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 */",
           "customElement": true,
           "slots": [
             {
@@ -28865,949 +28796,1171 @@
           "kind": "js",
           "name": "default",
           "declaration": {
-            "name": "Textarea",
-            "module": "components/textarea/textarea.component.js"
+            "name": "Toggle",
+            "module": "components/toggle/toggle.component.js"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "components/themeprovider/themeprovider.component.js",
+      "path": "components/toggletip/toggletip.component.js",
       "declarations": [
         {
           "kind": "class",
-          "description": "ThemeProvider component, which sets the passed in themeclass as class.\nIf the themeclass switches, the existing themeclass will be removed as a class\nand the new themeclass will be added.\n\nCSS variables defined in the themeclass will be used for the styling of child dom nodes.\n\nAvailable Momentum theme classes:\n\n`mds-theme-stable-darkWebex`, `mds-theme-stable-lightWebex`\n\n`mds-theme-stable-darkBronzeWebex`, `mds-theme-stable-lightBronzeWebex`\n\n`mds-theme-stable-darkIndigoWebex`, `mds-theme-stable-lightIndigoWebex`\n\n`mds-theme-stable-darkJadeWebex`, `mds-theme-stable-lightJadeWebex`\n\n`mds-theme-stable-darkLavenderWebex`, `mds-theme-stable-lightLavenderWebex`\n\n`mds-theme-stable-darkRoseWebex`, `mds-theme-stable-lightRoseWebex`\n\nThemeclass context can be be consumed from Lit child components\n(see providerUtils.consume for how to consume)\n\nThemeProvider also includes basic font defaults for text.",
-          "name": "ThemeProvider",
+          "description": "A toggletip is triggered by clicking a trigger element.\n\nIt can contain interactive content and can be closed by\nclicking outside the toggletip or pressing the escape key.\n\nIt can have optional close button to close the toggletip.\n\nToggletip component uses `mdc-screenreaderannouncer` internally to\nannounce the toggletip text content with screen readers when the toggletip is shown.\n\n`screenreader-announcer-identity` attribute can be used to provide ID of an element\nin DOM to which announcement elements are added. If not set, a visually hidden\ndiv element is created in DOM to which announcement elements are added.\n\nPlease refer to the `mdc-screenreaderannouncer` component for more details.",
+          "name": "ToggleTip",
           "cssProperties": [
             {
-              "description": "Option to override the default color, default: color-theme-text-primary-normal",
-              "name": "--mdc-themeprovider-color-default"
-            },
-            {
-              "description": "Option to override the font family, default: `Momentum` (from momentum-design/fonts)",
-              "name": "--mdc-themeprovider-font-family"
+              "description": "The maximum width of the toggletip.",
+              "name": "--mdc-toggletip-max-width"
             },
             {
-              "description": "Option to override the font weight, default: `400`",
-              "name": "--mdc-themeprovider-font-weight"
+              "description": "The text color of the toggletip.",
+              "name": "--mdc-toggletip-text-color"
             },
             {
-              "description": "Option to override the default letter-spacing, default: `-0.25px` (this is to match the old CiscoSans)",
-              "name": "--mdc-themeprovider-letter-spacing-adjustment"
+              "description": "The text color of the toggletip when the color is contrast.",
+              "name": "--mdc-toggletip-text-color-contrast"
             },
             {
-              "description": "Option to override the font feature settings, default: `\"ss02\" on`",
-              "name": "--mdc-themeprovider-font-feature-settings"
+              "description": "radius of the arrow border",
+              "name": "--mdc-popover-arrow-border-radius",
+              "inheritedFrom": {
+                "name": "Popover",
+                "module": "src/components/popover/popover.component.ts"
+              }
             },
             {
-              "description": "Option to override the color of the scrollbar track.",
-              "name": "--mdc-themeprovider-scrollbar-track-color"
+              "description": "border of the arrow",
+              "name": "--mdc-popover-arrow-border",
+              "inheritedFrom": {
+                "name": "Popover",
+                "module": "src/components/popover/popover.component.ts"
+              }
             },
             {
-              "description": "Option to override the color of the scrollbar thumb.",
-              "name": "--mdc-themeprovider-scrollbar-thumb-color"
+              "description": "primary background color of the popover",
+              "name": "--mdc-popover-primary-background-color",
+              "inheritedFrom": {
+                "name": "Popover",
+                "module": "src/components/popover/popover.component.ts"
+              }
             },
             {
-              "description": "Option to override the color of the scrollbar thumb on hover. Applicable only on webkit browsers.",
-              "name": "--mdc-themeprovider-scrollbar-thumb-hover-color"
+              "description": "border color of the popover",
+              "name": "--mdc-popover-border-color",
+              "inheritedFrom": {
+                "name": "Popover",
+                "module": "src/components/popover/popover.component.ts"
+              }
             },
             {
-              "description": "Option to override the color of the scrollbar thumb on press. Applicable only on webkit browsers.",
-              "name": "--mdc-themeprovider-scrollbar-thumb-active-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": "inverted border color of the popover",
+              "name": "--mdc-popover-inverted-border-color",
+              "inheritedFrom": {
+                "name": "Popover",
+                "module": "src/components/popover/popover.component.ts"
+              }
+            },
+            {
+              "description": "inverted text color of the popover",
+              "name": "--mdc-popover-inverted-text-color",
+              "inheritedFrom": {
+                "name": "Popover",
+                "module": "src/components/popover/popover.component.ts"
+              }
+            },
+            {
+              "description": "elevation of the popover",
+              "name": "--mdc-popover-elevation-3",
+              "inheritedFrom": {
+                "name": "Popover",
+                "module": "src/components/popover/popover.component.ts"
+              }
+            },
+            {
+              "description": "max width of the popover",
+              "name": "--mdc-popover-max-width",
+              "inheritedFrom": {
+                "name": "Popover",
+                "module": "src/components/popover/popover.component.ts"
+              }
+            },
+            {
+              "description": "max height of the popover",
+              "name": "--mdc-popover-max-height",
+              "inheritedFrom": {
+                "name": "Popover",
+                "module": "src/components/popover/popover.component.ts"
+              }
             }
           ],
           "slots": [
             {
-              "description": "children",
-              "name": ""
+              "description": "Default slot for the toggletip content",
+              "name": "",
+              "inheritedFrom": {
+                "name": "Popover",
+                "module": "src/components/popover/popover.component.ts"
+              }
             }
           ],
           "members": [
             {
               "kind": "field",
-              "name": "Context",
-              "privacy": "public",
-              "static": true,
-              "description": "Context object of the ThemeProvider, to be consumed by child components",
-              "readonly": true
+              "name": "defaultSlotNodes",
+              "type": {
+                "text": "Array<Node>"
+              },
+              "privacy": "private"
             },
             {
               "kind": "field",
-              "name": "themeclass",
+              "name": "screenreaderAnnouncerIdentity",
               "type": {
                 "text": "string"
               },
-              "description": "Current theme class\n\nHas to be fully qualified, such that\nthe theme class matches the class of the respective\ntheme stylesheet\n\nDefault: 'mds-theme-stable-darkWebex'",
-              "attribute": "themeclass"
+              "default": "''",
+              "description": "Set this attribute with the id of the element in the DOM, to which announcement\nelements will be appended.\nIf an id is provided, the announcement elements will be appended to this element.\nIf id is not provided, a visually hidden div element will be created in the DOM.\n\nPlease refer to the `mdc-screenreaderannouncer` component for more details.",
+              "attribute": "screenreader-announcer-identity",
+              "reflects": true
             },
             {
               "kind": "method",
-              "name": "updateContext",
-              "privacy": "protected",
+              "name": "getToggleTipText",
+              "privacy": "private",
               "return": {
                 "type": {
-                  "text": "void"
+                  "text": ""
                 }
-              },
-              "description": "Update all observing components of this\nprovider to update the themeclass\n\nIs called on every re-render, see Provider class"
+              }
             },
             {
               "kind": "method",
-              "name": "setThemeInClassList",
+              "name": "onPlacementUpdated",
               "privacy": "private",
-              "description": "Function to update the active theme classnames to update the theme tokens\nas CSS variables on the web component."
-            }
-          ],
-          "attributes": [
-            {
-              "name": "themeclass",
-              "type": {
-                "text": "string"
+              "return": {
+                "type": {
+                  "text": "void"
+                }
               },
-              "description": "Current theme class\n\nHas to be fully qualified, such that\nthe theme class matches the class of the respective\ntheme stylesheet\n\nDefault: 'mds-theme-stable-darkWebex'",
-              "fieldName": "themeclass"
-            }
-          ],
-          "superclass": {
-            "name": "Provider",
-            "module": "/src/models"
-          },
-          "tagName": "mdc-themeprovider",
-          "jsDoc": "/**\n * ThemeProvider component, which sets the passed in themeclass as class.\n * If the themeclass switches, the existing themeclass will be removed as a class\n * and the new themeclass will be added.\n *\n * CSS variables defined in the themeclass will be used for the styling of child dom nodes.\n *\n * Available Momentum theme classes:\n *\n * `mds-theme-stable-darkWebex`, `mds-theme-stable-lightWebex`\n *\n * `mds-theme-stable-darkBronzeWebex`, `mds-theme-stable-lightBronzeWebex`\n *\n * `mds-theme-stable-darkIndigoWebex`, `mds-theme-stable-lightIndigoWebex`\n *\n * `mds-theme-stable-darkJadeWebex`, `mds-theme-stable-lightJadeWebex`\n *\n * `mds-theme-stable-darkLavenderWebex`, `mds-theme-stable-lightLavenderWebex`\n *\n * `mds-theme-stable-darkRoseWebex`, `mds-theme-stable-lightRoseWebex`\n *\n * Themeclass context can be be consumed from Lit child components\n * (see providerUtils.consume for how to consume)\n *\n * ThemeProvider also includes basic font defaults for text.\n *\n * @tagname mdc-themeprovider\n *\n * @slot - children\n *\n * @cssproperty --mdc-themeprovider-color-default - Option to override the default color,\n * default: color-theme-text-primary-normal\n * @cssproperty --mdc-themeprovider-font-family - Option to override the font family,\n * default: `Momentum` (from momentum-design/fonts)\n * @cssproperty --mdc-themeprovider-font-weight - Option to override the font weight, default: `400`\n * @cssproperty --mdc-themeprovider-letter-spacing-adjustment - Option to override the default letter-spacing,\n * default: `-0.25px` (this is to match the old CiscoSans)\n * @cssproperty --mdc-themeprovider-font-feature-settings - Option to override the font feature settings,\n * default: `\"ss02\" on`\n * @cssproperty --mdc-themeprovider-scrollbar-track-color - Option to override the color of the scrollbar track.\n * @cssproperty --mdc-themeprovider-scrollbar-thumb-color - Option to override the color of the scrollbar thumb.\n * @cssproperty --mdc-themeprovider-scrollbar-thumb-hover-color - Option to override the color of the\n * scrollbar thumb on hover. Applicable only on webkit browsers.\n * @cssproperty --mdc-themeprovider-scrollbar-thumb-active-color - Option to override the color of the\n * scrollbar thumb on press. Applicable only on webkit browsers.\n */",
-          "customElement": true
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "default",
-          "declaration": {
-            "name": "ThemeProvider",
-            "module": "components/themeprovider/themeprovider.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": "Line height of the toggle label",
-              "name": "--mdc-toggle-label-lineheight"
-            },
-            {
-              "description": "Font size of the toggle label",
-              "name": "--mdc-toggle-label-fontsize"
-            },
-            {
-              "description": "Font weight of the toggle label",
-              "name": "--mdc-toggle-label-fontweight"
+              "description": "Updates the placement attribute if it is not a valid placement.\nDefault placement for toggle tip is top."
             },
             {
-              "description": "Color of the toggle label and help text in disabled state",
-              "name": "--mdc-toggle-label-color-disabled"
+              "kind": "field",
+              "name": "enabledFocusTrap",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Determines whether the focus trap is enabled.\nIf true, focus will be restricted to the content within this component.",
+              "attribute": "enabledFocusTrap",
+              "inheritedFrom": {
+                "name": "Popover",
+                "module": "components/popover/popover.component.js"
+              }
             },
             {
-              "description": "Color of the help text label",
-              "name": "--mdc-toggle-help-text-color"
+              "kind": "field",
+              "name": "enabledPreventScroll",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Prevent outside scrolling when element is shown.",
+              "attribute": "enabledPreventScroll",
+              "inheritedFrom": {
+                "name": "Popover",
+                "module": "components/popover/popover.component.js"
+              }
             },
             {
-              "description": "Background color of the active toggle in hover state",
-              "name": "--mdc-toggle-active-hover-color"
+              "kind": "field",
+              "name": "shouldWrapFocus",
+              "type": {
+                "text": "() => boolean"
+              },
+              "inheritedFrom": {
+                "name": "Popover",
+                "module": "components/popover/popover.component.js"
+              }
             },
             {
-              "description": "Background color of the active toggle in pressed state",
-              "name": "--mdc-toggle-active-pressed-color"
+              "kind": "method",
+              "name": "deactivateFocusTrap",
+              "privacy": "public",
+              "description": "Deactivate the focus trap.",
+              "inheritedFrom": {
+                "name": "Popover",
+                "module": "components/popover/popover.component.js"
+              }
             },
             {
-              "description": "Background color of the inactive toggle in hover state",
-              "name": "--mdc-toggle-inactive-hover-color"
+              "kind": "method",
+              "name": "hasNoClientRects",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "element",
+                  "type": {
+                    "text": "HTMLElement"
+                  },
+                  "description": "The element to check."
+                }
+              ],
+              "description": "Checks if the element has no client rectangles (not visible in the viewport).",
+              "return": {
+                "type": {
+                  "text": ""
+                }
+              },
+              "inheritedFrom": {
+                "name": "Popover",
+                "module": "components/popover/popover.component.js"
+              }
             },
             {
-              "description": "Background color of the inactive toggle in pressed state",
-              "name": "--mdc-toggle-inactive-pressed-color"
-            }
-          ],
-          "members": [
-            {
-              "kind": "field",
-              "name": "checked",
-              "type": {
-                "text": "boolean"
+              "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": "false",
-              "description": "Determines whether the toggle is active or inactive.",
-              "attribute": "checked",
-              "reflects": true
+              "inheritedFrom": {
+                "name": "Popover",
+                "module": "components/popover/popover.component.js"
+              }
             },
             {
-              "kind": "field",
-              "name": "size",
-              "type": {
-                "text": "ToggleSize"
-              },
-              "description": "Determines toggle size in rem (height is specified here).\n- **Default**: 1.5\n- **Compact**: 1",
-              "default": "default",
-              "attribute": "size",
-              "reflects": true
+              "kind": "method",
+              "name": "isNotVisible",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "element",
+                  "type": {
+                    "text": "HTMLElement"
+                  },
+                  "description": "The element to check."
+                }
+              ],
+              "description": "Determines if the element is not visible in the DOM.",
+              "return": {
+                "type": {
+                  "text": ""
+                }
+              },
+              "inheritedFrom": {
+                "name": "Popover",
+                "module": "components/popover/popover.component.js"
+              }
             },
             {
-              "kind": "field",
-              "name": "autofocus",
-              "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": ""
+                }
               },
-              "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
+              "inheritedFrom": {
+                "name": "Popover",
+                "module": "components/popover/popover.component.js"
+              }
             },
             {
               "kind": "method",
-              "name": "manageRequired",
+              "name": "hasComputedHidden",
               "privacy": "private",
-              "description": "Manages the required state of the checkbox.\nIf the checkbox is not checked and the required property is set, then the checkbox is invalid.\nIf the validationMessage is set, it will be used as the custom validity message.\nIf the validationMessage is not set, it will clear the custom validity message."
+              "parameters": [
+                {
+                  "name": "element",
+                  "type": {
+                    "text": "HTMLElement"
+                  },
+                  "description": "The element to check."
+                }
+              ],
+              "description": "Checks if the element is hidden by a computed style.",
+              "return": {
+                "type": {
+                  "text": ""
+                }
+              },
+              "inheritedFrom": {
+                "name": "Popover",
+                "module": "components/popover/popover.component.js"
+              }
             },
             {
               "kind": "method",
-              "name": "setFormValue",
+              "name": "isHidden",
               "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."
+              "parameters": [
+                {
+                  "name": "element",
+                  "type": {
+                    "text": "HTMLElement"
+                  },
+                  "description": "The element to check."
+                }
+              ],
+              "description": "Checks if the element is hidden from the user.",
+              "return": {
+                "type": {
+                  "text": ""
+                }
+              },
+              "inheritedFrom": {
+                "name": "Popover",
+                "module": "components/popover/popover.component.js"
+              }
             },
             {
               "kind": "method",
-              "name": "toggleState",
+              "name": "isNotTabbable",
               "privacy": "private",
+              "parameters": [
+                {
+                  "name": "element",
+                  "type": {
+                    "text": "HTMLElement"
+                  },
+                  "description": "The element to check."
+                }
+              ],
+              "description": "Checks if the element is not tabbable.",
               "return": {
                 "type": {
-                  "text": "void"
+                  "text": ""
                 }
               },
-              "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",
+              "name": "isInteractiveElement",
               "privacy": "private",
               "return": {
                 "type": {
-                  "text": "void"
+                  "text": ""
                 }
               },
               "parameters": [
                 {
-                  "name": "event",
+                  "name": "element",
                   "type": {
-                    "text": "KeyboardEvent"
+                    "text": "HTMLElement"
                   },
-                  "description": "The keyboard event."
+                  "description": "The element to check."
                 }
               ],
-              "description": "Handles the keydown event on the toggle element.\nWhen the user presses Enter, the form is submitted."
+              "description": "Checks if the element is interactive.",
+              "inheritedFrom": {
+                "name": "Popover",
+                "module": "components/popover/popover.component.js"
+              }
             },
             {
               "kind": "method",
-              "name": "handleChange",
+              "name": "isFocusable",
               "privacy": "private",
               "parameters": [
                 {
-                  "name": "event",
+                  "name": "element",
                   "type": {
-                    "text": "Event"
-                  }
+                    "text": "HTMLElement"
+                  },
+                  "description": "The element to check."
                 }
               ],
-              "description": "Toggles the state of the toggle element.\nand dispatch the new change event."
+              "description": "Checks if the element is focusable.",
+              "return": {
+                "type": {
+                  "text": ""
+                }
+              },
+              "inheritedFrom": {
+                "name": "Popover",
+                "module": "components/popover/popover.component.js"
+              }
             },
             {
               "kind": "method",
-              "name": "setToggleSize",
+              "name": "findFocusable",
               "privacy": "private",
+              "return": {
+                "type": {
+                  "text": ""
+                }
+              },
               "parameters": [
                 {
-                  "name": "size",
+                  "name": "root",
                   "type": {
-                    "text": "ToggleSize"
+                    "text": "ShadowRoot | HTMLElement"
                   },
-                  "description": "The size to set."
+                  "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": "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": "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,
+              "description": "Recursively finds all focusable elements within the given root and its descendants.",
               "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,
+              "kind": "method",
+              "name": "setFocusableElements",
+              "privacy": "public",
+              "description": "Updates the list of focusable elements within the component's shadow root.",
               "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,
+              "kind": "method",
+              "name": "setInitialFocus",
+              "privacy": "public",
+              "parameters": [
+                {
+                  "name": "prefferableElement",
+                  "default": "0",
+                  "type": {
+                    "text": "number"
+                  },
+                  "description": "The index of the preferable element to focus."
+                }
+              ],
+              "description": "Sets the initial focus within the container.",
               "inheritedFrom": {
-                "name": "FormInternalsMixin",
-                "module": "utils/mixins/FormInternalsMixin.js"
+                "name": "Popover",
+                "module": "components/popover/popover.component.js"
               }
             },
             {
-              "kind": "field",
-              "name": "validity",
-              "type": {
-                "text": "ValidityState"
+              "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": ""
+                }
               },
-              "readonly": true,
-              "inheritedFrom": {
-                "name": "FormInternalsMixin",
-                "module": "utils/mixins/FormInternalsMixin.js"
-              }
-            },
-            {
-              "kind": "field",
-              "name": "willValidate",
-              "readonly": true,
               "inheritedFrom": {
-                "name": "FormInternalsMixin",
-                "module": "utils/mixins/FormInternalsMixin.js"
+                "name": "Popover",
+                "module": "components/popover/popover.component.js"
               }
             },
             {
               "kind": "method",
-              "name": "setValidity",
-              "description": "Sets the validity of the input field based on the input field's validity.",
+              "name": "getDeepActiveElement",
+              "privacy": "private",
+              "description": "Returns the deepest active element in the shadow DOM.",
               "return": {
                 "type": {
                   "text": ""
                 }
               },
               "inheritedFrom": {
-                "name": "FormInternalsMixin",
-                "module": "utils/mixins/FormInternalsMixin.js"
+                "name": "Popover",
+                "module": "components/popover/popover.component.js"
               }
             },
             {
               "kind": "method",
-              "name": "checkValidity",
+              "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": "boolean"
+                  "text": ""
                 }
               },
               "inheritedFrom": {
-                "name": "FormInternalsMixin",
-                "module": "utils/mixins/FormInternalsMixin.js"
+                "name": "Popover",
+                "module": "components/popover/popover.component.js"
               }
             },
             {
               "kind": "method",
-              "name": "reportValidity",
-              "inheritedFrom": {
-                "name": "FormInternalsMixin",
-                "module": "utils/mixins/FormInternalsMixin.js"
-              }
-            },
-            {
-              "kind": "field",
-              "name": "dataAriaLabel",
-              "type": {
-                "text": "string | null"
+              "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": ""
+                }
               },
-              "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": "DataAriaLabelMixin",
-                "module": "utils/mixins/DataAriaLabelMixin.js"
+                "name": "Popover",
+                "module": "components/popover/popover.component.js"
               }
             },
             {
-              "kind": "field",
-              "name": "disabled",
-              "type": {
-                "text": "boolean | undefined"
-              },
-              "description": "Indicates whether the component is disabled.\nWhen the component is disabled for user interaction; it is not focusable or clickable.",
-              "default": "undefined",
-              "attribute": "disabled",
-              "reflects": true,
+              "kind": "method",
+              "name": "trapFocus",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "direction",
+                  "type": {
+                    "text": "boolean"
+                  },
+                  "description": "The direction of the focus trap.\nIf true, the focus will be trapped in the previous element."
+                }
+              ],
+              "description": "Traps focus within the container.",
               "inheritedFrom": {
-                "name": "FormfieldWrapper",
-                "module": "components/formfieldwrapper/formfieldwrapper.component.js"
+                "name": "Popover",
+                "module": "components/popover/popover.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,
+              "kind": "method",
+              "name": "handleKeydown",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "event",
+                  "type": {
+                    "text": "KeyboardEvent"
+                  },
+                  "description": "The keyboard event."
+                }
+              ],
+              "description": "Traps focus within the container.",
               "inheritedFrom": {
-                "name": "FormfieldWrapper",
-                "module": "components/formfieldwrapper/formfieldwrapper.component.js"
+                "name": "Popover",
+                "module": "components/popover/popover.component.js"
               }
             },
             {
               "kind": "field",
-              "name": "required",
+              "name": "id",
               "type": {
-                "text": "boolean"
+                "text": "string"
               },
-              "default": "false",
-              "description": "The required attribute to indicate that the input field is required.\nIt is used to append a required indicator (*) to the label.",
-              "attribute": "required",
+              "default": "''",
+              "description": "The unique ID of the popover.",
+              "attribute": "id",
               "reflects": true,
               "inheritedFrom": {
-                "name": "FormfieldWrapper",
-                "module": "components/formfieldwrapper/formfieldwrapper.component.js"
+                "name": "Popover",
+                "module": "components/popover/popover.component.js"
               }
             },
             {
               "kind": "field",
-              "name": "id",
+              "name": "triggerID",
               "type": {
                 "text": "string"
               },
               "default": "''",
-              "description": "The unique id of the input field. It is used to link the input field with the label.",
-              "attribute": "id",
+              "description": "The ID of the element that triggers the popover.\nThis attribute is required for the popover to work.",
+              "attribute": "triggerID",
+              "reflects": true,
               "inheritedFrom": {
-                "name": "FormfieldWrapper",
-                "module": "components/formfieldwrapper/formfieldwrapper.component.js"
+                "name": "Popover",
+                "module": "components/popover/popover.component.js"
               }
             },
             {
               "kind": "field",
-              "name": "helpTextType",
+              "name": "trigger",
               "type": {
-                "text": "ValidationType"
+                "text": "PopoverTrigger"
               },
-              "description": "The type of help text. It can be 'default', 'error', 'warning', 'success', 'priority'.",
-              "attribute": "help-text-type",
+              "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,
               "inheritedFrom": {
-                "name": "FormfieldWrapper",
-                "module": "components/formfieldwrapper/formfieldwrapper.component.js"
+                "name": "Popover",
+                "module": "components/popover/popover.component.js"
               }
             },
             {
               "kind": "field",
-              "name": "helpText",
+              "name": "placement",
               "type": {
-                "text": "string | undefined"
+                "text": "PopoverPlacement"
               },
-              "description": "The help text that is displayed below the input field.",
-              "attribute": "help-text",
+              "description": "The placement of the popover.\n- **top**\n- **top-start**\n- **top-end**\n- **bottom**\n- **bottom-start**\n- **bottom-end**\n- **left**\n- **left-start**\n- **left-end**\n- **right**\n- **right-start**\n- **right-end**",
+              "default": "bottom",
+              "attribute": "placement",
               "reflects": true,
               "inheritedFrom": {
-                "name": "FormfieldWrapper",
-                "module": "components/formfieldwrapper/formfieldwrapper.component.js"
-              }
-            },
-            {
-              "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": ""
-                }
-              },
-              "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": "FormfieldWrapper",
-                "module": "components/formfieldwrapper/formfieldwrapper.component.js"
-              }
-            },
-            {
-              "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": ""
-                }
-              },
-              "inheritedFrom": {
-                "name": "FormfieldWrapper",
-                "module": "components/formfieldwrapper/formfieldwrapper.component.js"
-              }
-            },
-            {
-              "kind": "method",
-              "name": "renderLabel",
-              "privacy": "protected",
-              "description": "renders the mdc-label-text container that contains the label and labelInfoToggleTip.",
-              "return": {
-                "type": {
-                  "text": ""
-                }
-              },
-              "inheritedFrom": {
-                "name": "FormfieldWrapper",
-                "module": "components/formfieldwrapper/formfieldwrapper.component.js"
+                "name": "Popover",
+                "module": "components/popover/popover.component.js"
               }
             },
             {
-              "kind": "method",
-              "name": "renderHelperText",
-              "privacy": "protected",
-              "description": "renders the mdc-help-text container that contains the helpertext icon and helpertext.",
-              "return": {
-                "type": {
-                  "text": ""
-                }
-              },
-              "inheritedFrom": {
-                "name": "FormfieldWrapper",
-                "module": "components/formfieldwrapper/formfieldwrapper.component.js"
-              }
-            }
-          ],
-          "events": [
-            {
+              "kind": "field",
+              "name": "color",
               "type": {
-                "text": "EventConstructor"
+                "text": "PopoverColor"
+              },
+              "description": "Color of the popover\n- **tonal**\n- **contrast**",
+              "default": "tonal",
+              "attribute": "color",
+              "reflects": true,
+              "inheritedFrom": {
+                "name": "Popover",
+                "module": "components/popover/popover.component.js"
               }
             },
             {
-              "description": "(React: onChange) Event that gets dispatched when the toggle state changes.",
-              "name": "change",
-              "reactName": "onChange"
-            },
-            {
-              "description": "(React: onFocus) Event that gets dispatched when the toggle receives focus.",
-              "name": "focus",
-              "reactName": "onFocus"
-            }
-          ],
-          "attributes": [
-            {
-              "name": "checked",
+              "kind": "field",
+              "name": "visible",
               "type": {
                 "text": "boolean"
               },
+              "description": "The visibility of the popover.",
               "default": "false",
-              "description": "Determines whether the toggle is active or inactive.",
-              "fieldName": "checked"
+              "attribute": "visible",
+              "reflects": true,
+              "inheritedFrom": {
+                "name": "Popover",
+                "module": "components/popover/popover.component.js"
+              }
             },
             {
-              "name": "size",
+              "kind": "field",
+              "name": "offset",
               "type": {
-                "text": "ToggleSize"
+                "text": "number"
               },
-              "description": "Determines toggle size in rem (height is specified here).\n- **Default**: 1.5\n- **Compact**: 1",
-              "default": "default",
-              "fieldName": "size"
+              "description": "The offset of the popover.",
+              "default": "4",
+              "attribute": "offset",
+              "reflects": true,
+              "inheritedFrom": {
+                "name": "Popover",
+                "module": "components/popover/popover.component.js"
+              }
             },
             {
-              "name": "autofocus",
+              "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",
-              "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"
-            },
-            {
-              "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",
+              "attribute": "focus-trap",
+              "reflects": true,
               "inheritedFrom": {
-                "name": "FormInternalsMixin",
-                "module": "src/utils/mixins/FormInternalsMixin.ts"
+                "name": "Popover",
+                "module": "components/popover/popover.component.js"
               }
             },
             {
-              "name": "value",
+              "kind": "field",
+              "name": "preventScroll",
               "type": {
-                "text": "string"
+                "text": "boolean"
               },
-              "default": "''",
-              "description": "Indicates the value of the component group (ex: input, checkbox, radio, select etc...)",
-              "fieldName": "value",
+              "description": "Prevent outside scrolling when popover show.",
+              "default": "false",
+              "attribute": "prevent-scroll",
+              "reflects": true,
               "inheritedFrom": {
-                "name": "FormInternalsMixin",
-                "module": "src/utils/mixins/FormInternalsMixin.ts"
+                "name": "Popover",
+                "module": "components/popover/popover.component.js"
               }
             },
             {
-              "name": "validation-message",
+              "kind": "field",
+              "name": "showArrow",
               "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": "The arrow visibility of the popover.",
+              "default": "false",
+              "attribute": "show-arrow",
+              "reflects": true,
               "inheritedFrom": {
-                "name": "FormInternalsMixin",
-                "module": "src/utils/mixins/FormInternalsMixin.ts"
+                "name": "Popover",
+                "module": "components/popover/popover.component.js"
               }
             },
             {
-              "name": "data-aria-label",
+              "kind": "field",
+              "name": "closeButton",
               "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": "The close button visibility of the popover.",
+              "default": "false",
+              "attribute": "close-button",
+              "reflects": true,
               "inheritedFrom": {
-                "name": "DataAriaLabelMixin",
-                "module": "src/utils/mixins/DataAriaLabelMixin.ts"
+                "name": "Popover",
+                "module": "components/popover/popover.component.js"
               }
             },
             {
-              "name": "disabled",
+              "kind": "field",
+              "name": "interactive",
               "type": {
-                "text": "boolean | undefined"
+                "text": "boolean"
               },
-              "description": "Indicates whether the component is disabled.\nWhen the component is disabled for user interaction; it is not focusable or clickable.",
-              "default": "undefined",
-              "fieldName": "disabled",
+              "description": "Determines whether the popover is interactive。",
+              "default": "false",
+              "attribute": "interactive",
+              "reflects": true,
               "inheritedFrom": {
-                "name": "FormfieldWrapper",
-                "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
+                "name": "Popover",
+                "module": "components/popover/popover.component.js"
               }
             },
             {
-              "name": "label",
+              "kind": "field",
+              "name": "delay",
               "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",
+              "description": "The delay of the show/hide popover.",
+              "default": "0,0",
+              "attribute": "delay",
+              "reflects": true,
               "inheritedFrom": {
-                "name": "FormfieldWrapper",
-                "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
+                "name": "Popover",
+                "module": "components/popover/popover.component.js"
               }
             },
             {
-              "name": "required",
+              "kind": "field",
+              "name": "hideOnEscape",
               "type": {
                 "text": "boolean"
               },
+              "description": "Hide popover on escape key press.",
               "default": "false",
-              "description": "The required attribute to indicate that the input field is required.\nIt is used to append a required indicator (*) to the label.",
-              "fieldName": "required",
+              "attribute": "hide-on-escape",
+              "reflects": true,
               "inheritedFrom": {
-                "name": "FormfieldWrapper",
-                "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
+                "name": "Popover",
+                "module": "components/popover/popover.component.js"
               }
             },
             {
-              "name": "id",
+              "kind": "field",
+              "name": "hideOnBlur",
               "type": {
-                "text": "string"
+                "text": "boolean"
               },
-              "default": "''",
-              "description": "The unique id of the input field. It is used to link the input field with the label.",
-              "fieldName": "id",
+              "description": "Hide popover on blur.",
+              "default": "false",
+              "attribute": "hide-on-blur",
+              "reflects": true,
               "inheritedFrom": {
-                "name": "FormfieldWrapper",
-                "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
+                "name": "Popover",
+                "module": "components/popover/popover.component.js"
               }
             },
             {
-              "name": "help-text-type",
+              "kind": "field",
+              "name": "hideOnOutsideClick",
               "type": {
-                "text": "ValidationType"
+                "text": "boolean"
               },
-              "description": "The type of help text. It can be 'default', 'error', 'warning', 'success', 'priority'.",
-              "fieldName": "helpTextType",
+              "description": "Hide on outside click of the popover.",
+              "default": "false",
+              "attribute": "hide-on-outside-click",
+              "reflects": true,
               "inheritedFrom": {
-                "name": "FormfieldWrapper",
-                "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
+                "name": "Popover",
+                "module": "components/popover/popover.component.js"
               }
             },
             {
-              "name": "help-text",
+              "kind": "field",
+              "name": "focusBackToTrigger",
               "type": {
-                "text": "string | undefined"
+                "text": "boolean"
               },
-              "description": "The help text that is displayed below the input field.",
-              "fieldName": "helpText",
+              "description": "The focus back to trigger after the popover hide.",
+              "default": "false",
+              "attribute": "focus-back-to-trigger",
+              "reflects": true,
               "inheritedFrom": {
-                "name": "FormfieldWrapper",
-                "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
+                "name": "Popover",
+                "module": "components/popover/popover.component.js"
               }
-            }
-          ],
-          "mixins": [
-            {
-              "name": "FormInternalsMixin",
-              "module": "/src/utils/mixins/FormInternalsMixin"
             },
             {
-              "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 * @dependency mdc-statictoggle\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-label-lineheight - Line height of the toggle label\n * @cssproperty --mdc-toggle-label-fontsize - Font size of the toggle label\n * @cssproperty --mdc-toggle-label-fontweight - Font weight of the toggle label\n * @cssproperty --mdc-toggle-label-color-disabled - Color of the toggle label and help text in disabled state\n * @cssproperty --mdc-toggle-help-text-color - Color of the help text label\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-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 */",
-          "customElement": true,
-          "slots": [
-            {
-              "description": "slot to add the label info icon",
-              "name": "label-info",
-              "inheritedFrom": {
-                "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/toggletip/toggletip.component.js",
-      "declarations": [
-        {
-          "kind": "class",
-          "description": "A toggletip is triggered by clicking a trigger element.\n\nIt can contain interactive content and can be closed by\nclicking outside the toggletip or pressing the escape key.\n\nIt can have optional close button to close the toggletip.\n\nToggletip component uses `mdc-screenreaderannouncer` internally to\nannounce the toggletip text content with screen readers when the toggletip is shown.\n\n`screenreader-announcer-identity` attribute can be used to provide ID of an element\nin DOM to which announcement elements are added. If not set, a visually hidden\ndiv element is created in DOM to which announcement elements are added.\n\nPlease refer to the `mdc-screenreaderannouncer` component for more details.",
-          "name": "ToggleTip",
-          "cssProperties": [
+              "kind": "field",
+              "name": "backdrop",
+              "type": {
+                "text": "boolean"
+              },
+              "description": "Determines whether the popover with backdrop.\nOther than popover and trigger element, the rest of the screen will be covered with a backdrop.",
+              "default": "false",
+              "attribute": "backdrop",
+              "reflects": true,
+              "inheritedFrom": {
+                "name": "Popover",
+                "module": "components/popover/popover.component.js"
+              }
+            },
             {
-              "description": "The maximum width of the toggletip.",
-              "name": "--mdc-toggletip-max-width"
+              "kind": "field",
+              "name": "flip",
+              "type": {
+                "text": "boolean"
+              },
+              "description": "Changes the placement of popover to keep it in view when scrolling.",
+              "default": "true",
+              "attribute": "flip",
+              "reflects": true,
+              "inheritedFrom": {
+                "name": "Popover",
+                "module": "components/popover/popover.component.js"
+              }
             },
             {
-              "description": "The text color of the toggletip.",
-              "name": "--mdc-toggletip-text-color"
+              "kind": "field",
+              "name": "size",
+              "type": {
+                "text": "boolean"
+              },
+              "description": "Changes the size of popover to keep it in view when scrolling.",
+              "default": "false",
+              "attribute": "size",
+              "reflects": true,
+              "inheritedFrom": {
+                "name": "Popover",
+                "module": "components/popover/popover.component.js"
+              }
             },
             {
-              "description": "The text color of the toggletip when the color is contrast.",
-              "name": "--mdc-toggletip-text-color-contrast"
+              "kind": "field",
+              "name": "zIndex",
+              "type": {
+                "text": "number"
+              },
+              "description": "The z-index of the popover.",
+              "default": "1000",
+              "attribute": "z-index",
+              "reflects": true,
+              "inheritedFrom": {
+                "name": "Popover",
+                "module": "components/popover/popover.component.js"
+              }
             },
             {
-              "description": "radius of the arrow border",
-              "name": "--mdc-popover-arrow-border-radius",
+              "kind": "field",
+              "name": "appendTo",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "description": "Element ID that the popover append to.",
+              "attribute": "append-to",
+              "reflects": true,
               "inheritedFrom": {
                 "name": "Popover",
-                "module": "src/components/popover/popover.component.ts"
+                "module": "components/popover/popover.component.js"
               }
             },
             {
-              "description": "border of the arrow",
-              "name": "--mdc-popover-arrow-border",
+              "kind": "field",
+              "name": "closeButtonAriaLabel",
+              "type": {
+                "text": "string | null"
+              },
+              "default": "null",
+              "description": "aria-label attribute to be set for close button accessibility.",
+              "attribute": "close-button-aria-label",
+              "reflects": true,
               "inheritedFrom": {
                 "name": "Popover",
-                "module": "src/components/popover/popover.component.ts"
+                "module": "components/popover/popover.component.js"
               }
             },
             {
-              "description": "primary background color of the popover",
-              "name": "--mdc-popover-primary-background-color",
+              "kind": "field",
+              "name": "role",
+              "type": {
+                "text": "HTMLElement['role']"
+              },
+              "description": "Role of the popover",
+              "default": "dialog",
+              "attribute": "role",
+              "reflects": true,
               "inheritedFrom": {
                 "name": "Popover",
-                "module": "src/components/popover/popover.component.ts"
+                "module": "components/popover/popover.component.js"
               }
             },
             {
-              "description": "border color of the popover",
-              "name": "--mdc-popover-border-color",
+              "kind": "field",
+              "name": "ariaLabelledby",
+              "type": {
+                "text": "string | null"
+              },
+              "default": "null",
+              "description": "aria-labelledby for an interactive popover only, defaults to the trigger component id.\nUsed in nested cases where the triggerComponent isn't the actual button.",
+              "attribute": "aria-labelledby",
+              "reflects": true,
               "inheritedFrom": {
                 "name": "Popover",
-                "module": "src/components/popover/popover.component.ts"
+                "module": "components/popover/popover.component.js"
               }
             },
             {
-              "description": "inverted background color of the popover",
-              "name": "--mdc-popover-inverted-background-color",
+              "kind": "field",
+              "name": "ariaDescribedby",
+              "type": {
+                "text": "string | null"
+              },
+              "default": "null",
+              "description": "aria-describedby of the popover.",
+              "attribute": "aria-describedby",
+              "reflects": true,
               "inheritedFrom": {
                 "name": "Popover",
-                "module": "src/components/popover/popover.component.ts"
+                "module": "components/popover/popover.component.js"
               }
             },
             {
-              "description": "inverted border color of the popover",
-              "name": "--mdc-popover-inverted-border-color",
+              "kind": "field",
+              "name": "disableAriaExpanded",
+              "type": {
+                "text": "boolean"
+              },
+              "description": "Disable aria-expanded attribute on trigger element.\nMake sure to set this to false when the popover is interactive.",
+              "default": "false",
+              "attribute": "disable-aria-expanded",
+              "reflects": true,
               "inheritedFrom": {
                 "name": "Popover",
-                "module": "src/components/popover/popover.component.ts"
+                "module": "components/popover/popover.component.js"
               }
             },
             {
-              "description": "inverted text color of the popover",
-              "name": "--mdc-popover-inverted-text-color",
+              "kind": "field",
+              "name": "arrowElement",
+              "type": {
+                "text": "HTMLElement | null"
+              },
+              "privacy": "public",
+              "default": "null",
               "inheritedFrom": {
                 "name": "Popover",
-                "module": "src/components/popover/popover.component.ts"
+                "module": "components/popover/popover.component.js"
               }
             },
             {
-              "description": "elevation of the popover",
-              "name": "--mdc-popover-elevation-3",
+              "kind": "field",
+              "name": "triggerElement",
+              "type": {
+                "text": "HTMLElement | null"
+              },
+              "privacy": "public",
+              "default": "null",
               "inheritedFrom": {
                 "name": "Popover",
-                "module": "src/components/popover/popover.component.ts"
+                "module": "components/popover/popover.component.js"
               }
             },
             {
-              "description": "max width of the popover",
-              "name": "--mdc-popover-max-width",
+              "kind": "method",
+              "name": "setupTriggerListener",
+              "privacy": "private",
+              "description": "Sets up the trigger event listeners based on the trigger type.",
               "inheritedFrom": {
                 "name": "Popover",
-                "module": "src/components/popover/popover.component.ts"
+                "module": "components/popover/popover.component.js"
               }
             },
             {
-              "description": "max height of the popover",
-              "name": "--mdc-popover-max-height",
+              "kind": "method",
+              "name": "removeEventListeners",
+              "privacy": "private",
+              "description": "Removes the trigger event listeners.",
               "inheritedFrom": {
                 "name": "Popover",
-                "module": "src/components/popover/popover.component.ts"
+                "module": "components/popover/popover.component.js"
               }
-            }
-          ],
-          "slots": [
+            },
             {
-              "description": "Default slot for the toggletip content",
-              "name": "",
+              "kind": "field",
+              "name": "onOutsidePopoverClick",
+              "privacy": "private",
+              "description": "Handles the outside click event to close the popover.",
+              "parameters": [
+                {
+                  "description": "The mouse event.",
+                  "name": "event"
+                }
+              ],
               "inheritedFrom": {
                 "name": "Popover",
-                "module": "src/components/popover/popover.component.ts"
+                "module": "components/popover/popover.component.js"
               }
-            }
-          ],
-          "members": [
+            },
             {
               "kind": "field",
-              "name": "defaultSlotNodes",
-              "type": {
-                "text": "Array<Node>"
-              },
-              "privacy": "private"
+              "name": "onEscapeKeydown",
+              "privacy": "private",
+              "description": "Handles the escape keydown event to close the popover.",
+              "parameters": [
+                {
+                  "description": "The keyboard event.",
+                  "name": "event"
+                }
+              ],
+              "inheritedFrom": {
+                "name": "Popover",
+                "module": "components/popover/popover.component.js"
+              }
             },
             {
               "kind": "field",
-              "name": "screenreaderAnnouncerIdentity",
-              "type": {
-                "text": "string"
-              },
-              "default": "''",
-              "description": "Set this attribute with the id of the element in the DOM, to which announcement\nelements will be appended.\nIf an id is provided, the announcement elements will be appended to this element.\nIf id is not provided, a visually hidden div element will be created in the DOM.\n\nPlease refer to the `mdc-screenreaderannouncer` component for more details.",
-              "attribute": "screenreader-announcer-identity",
-              "reflects": true
+              "name": "onPopoverFocusOut",
+              "privacy": "private",
+              "description": "Handles the popover focus out event.",
+              "parameters": [
+                {
+                  "description": "The focus event.",
+                  "name": "event"
+                }
+              ],
+              "inheritedFrom": {
+                "name": "Popover",
+                "module": "components/popover/popover.component.js"
+              }
             },
             {
               "kind": "method",
-              "name": "getToggleTipText",
+              "name": "isOpenUpdated",
               "privacy": "private",
-              "return": {
-                "type": {
-                  "text": ""
+              "parameters": [
+                {
+                  "name": "oldValue",
+                  "type": {
+                    "text": "boolean"
+                  },
+                  "description": "The old value of the visible property."
+                },
+                {
+                  "name": "newValue",
+                  "type": {
+                    "text": "boolean"
+                  },
+                  "description": "The new value of the visible property."
                 }
+              ],
+              "description": "Handles the popover visibility change and position the popover.\nHandles the exit event to close the popover.",
+              "inheritedFrom": {
+                "name": "Popover",
+                "module": "components/popover/popover.component.js"
               }
             },
             {
-              "kind": "method",
-              "name": "onPlacementUpdated",
+              "kind": "field",
+              "name": "startCloseDelay",
               "privacy": "private",
-              "return": {
-                "type": {
-                  "text": "void"
-                }
-              },
-              "description": "Updates the placement attribute if it is not a valid placement.\nDefault placement for toggle tip is top."
+              "description": "Starts the close delay timer.\nIf the popover is not interactive, it will close the popover after the delay.",
+              "inheritedFrom": {
+                "name": "Popover",
+                "module": "components/popover/popover.component.js"
+              }
             },
             {
               "kind": "field",
-              "name": "enabledFocusTrap",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "Determines whether the focus trap is enabled.\nIf true, focus will be restricted to the content within this component.",
-              "attribute": "enabledFocusTrap",
+              "name": "cancelCloseDelay",
+              "privacy": "private",
+              "description": "Cancels the close delay timer.",
               "inheritedFrom": {
                 "name": "Popover",
                 "module": "components/popover/popover.component.js"
@@ -29815,13 +29968,9 @@
             },
             {
               "kind": "field",
-              "name": "enabledPreventScroll",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "Prevent outside scrolling when element is shown.",
-              "attribute": "enabledPreventScroll",
+              "name": "showPopover",
+              "privacy": "public",
+              "description": "Shows the popover.",
               "inheritedFrom": {
                 "name": "Popover",
                 "module": "components/popover/popover.component.js"
@@ -29829,20 +29978,19 @@
             },
             {
               "kind": "field",
-              "name": "shouldWrapFocus",
-              "type": {
-                "text": "() => boolean"
-              },
+              "name": "hidePopover",
+              "privacy": "public",
+              "description": "Hides the popover.",
               "inheritedFrom": {
                 "name": "Popover",
                 "module": "components/popover/popover.component.js"
               }
             },
             {
-              "kind": "method",
-              "name": "deactivateFocusTrap",
+              "kind": "field",
+              "name": "togglePopoverVisible",
               "privacy": "public",
-              "description": "Deactivate the focus trap.",
+              "description": "Toggles the popover visibility.",
               "inheritedFrom": {
                 "name": "Popover",
                 "module": "components/popover/popover.component.js"
@@ -29850,23 +29998,9 @@
             },
             {
               "kind": "method",
-              "name": "hasNoClientRects",
+              "name": "handleCreatePopoverFirstUpdate",
               "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": "Sets the focusable elements inside the popover.",
               "inheritedFrom": {
                 "name": "Popover",
                 "module": "components/popover/popover.component.js"
@@ -29874,1435 +30008,1301 @@
             },
             {
               "kind": "method",
-              "name": "hasZeroDimensions",
+              "name": "positionPopover",
               "privacy": "private",
-              "parameters": [
-                {
-                  "name": "element",
-                  "type": {
-                    "text": "HTMLElement"
-                  },
-                  "description": "The element to check."
-                }
-              ],
-              "description": "Checks if the element has zero dimensions (width and height are both 0).",
-              "return": {
-                "type": {
-                  "text": ""
-                }
-              },
+              "description": "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": "method",
-              "name": "isNotVisible",
-              "privacy": "private",
-              "parameters": [
-                {
-                  "name": "element",
-                  "type": {
-                    "text": "HTMLElement"
-                  },
-                  "description": "The element to check."
-                }
-              ],
-              "description": "Determines if the element is not visible in the DOM.",
-              "return": {
-                "type": {
-                  "text": ""
-                }
-              },
+              "kind": "field",
+              "name": "utils",
+              "default": "new PopoverUtils(this)",
               "inheritedFrom": {
                 "name": "Popover",
                 "module": "components/popover/popover.component.js"
               }
+            }
+          ],
+          "events": [
+            {
+              "description": "(React: onShown) This event is dispatched when the toggletip is shown",
+              "name": "shown",
+              "reactName": "onShown",
+              "inheritedFrom": {
+                "name": "Popover",
+                "module": "src/components/popover/popover.component.ts"
+              }
             },
             {
-              "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": "(React: onHidden) This event is dispatched when the toggletip is hidden",
+              "name": "hidden",
+              "reactName": "onHidden",
+              "inheritedFrom": {
+                "name": "Popover",
+                "module": "src/components/popover/popover.component.ts"
+              }
+            },
+            {
+              "description": "(React: onCreated) This event is dispatched when the toggletip is created (added to the DOM)",
+              "name": "created",
+              "reactName": "onCreated",
+              "inheritedFrom": {
+                "name": "Popover",
+                "module": "src/components/popover/popover.component.ts"
+              }
+            },
+            {
+              "description": "(React: onDestroyed) This event is dispatched when the toggletip is destroyed (removed from the DOM)",
+              "name": "destroyed",
+              "reactName": "onDestroyed",
+              "inheritedFrom": {
+                "name": "Popover",
+                "module": "src/components/popover/popover.component.ts"
+              }
+            }
+          ],
+          "attributes": [
+            {
+              "name": "screenreader-announcer-identity",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "description": "Set this attribute with the id of the element in the DOM, to which announcement\nelements will be appended.\nIf an id is provided, the announcement elements will be appended to this element.\nIf id is not provided, a visually hidden div element will be created in the DOM.\n\nPlease refer to the `mdc-screenreaderannouncer` component for more details.",
+              "fieldName": "screenreaderAnnouncerIdentity"
+            },
+            {
+              "name": "enabledFocusTrap",
+              "type": {
+                "text": "boolean"
               },
+              "default": "false",
+              "description": "Determines whether the focus trap is enabled.\nIf true, focus will be restricted to the content within this component.",
+              "fieldName": "enabledFocusTrap",
               "inheritedFrom": {
                 "name": "Popover",
-                "module": "components/popover/popover.component.js"
+                "module": "src/components/popover/popover.component.ts"
               }
             },
             {
-              "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": ""
-                }
+              "name": "enabledPreventScroll",
+              "type": {
+                "text": "boolean"
               },
+              "default": "false",
+              "description": "Prevent outside scrolling when element is shown.",
+              "fieldName": "enabledPreventScroll",
               "inheritedFrom": {
                 "name": "Popover",
-                "module": "components/popover/popover.component.js"
+                "module": "src/components/popover/popover.component.ts"
               }
             },
             {
-              "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": ""
-                }
+              "name": "id",
+              "type": {
+                "text": "string"
               },
+              "default": "''",
+              "description": "The unique ID of the popover.",
+              "fieldName": "id",
               "inheritedFrom": {
                 "name": "Popover",
-                "module": "components/popover/popover.component.js"
+                "module": "src/components/popover/popover.component.ts"
               }
             },
             {
-              "kind": "method",
-              "name": "isNotTabbable",
-              "privacy": "private",
-              "parameters": [
-                {
-                  "name": "element",
-                  "type": {
-                    "text": "HTMLElement"
-                  },
-                  "description": "The element to check."
-                }
-              ],
-              "description": "Checks if the element is not tabbable.",
-              "return": {
-                "type": {
-                  "text": ""
-                }
+              "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",
+              "inheritedFrom": {
+                "name": "Popover",
+                "module": "src/components/popover/popover.component.ts"
+              }
+            },
+            {
+              "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",
               "inheritedFrom": {
                 "name": "Popover",
-                "module": "components/popover/popover.component.js"
+                "module": "src/components/popover/popover.component.ts"
               }
             },
             {
-              "kind": "method",
-              "name": "isInteractiveElement",
-              "privacy": "private",
-              "return": {
-                "type": {
-                  "text": ""
-                }
+              "name": "placement",
+              "type": {
+                "text": "PopoverPlacement"
               },
-              "parameters": [
-                {
-                  "name": "element",
-                  "type": {
-                    "text": "HTMLElement"
-                  },
-                  "description": "The element to check."
-                }
-              ],
-              "description": "Checks if the element is interactive.",
+              "description": "The placement of the popover.\n- **top**\n- **top-start**\n- **top-end**\n- **bottom**\n- **bottom-start**\n- **bottom-end**\n- **left**\n- **left-start**\n- **left-end**\n- **right**\n- **right-start**\n- **right-end**",
+              "default": "bottom",
+              "fieldName": "placement",
               "inheritedFrom": {
                 "name": "Popover",
-                "module": "components/popover/popover.component.js"
+                "module": "src/components/popover/popover.component.ts"
               }
             },
             {
-              "kind": "method",
-              "name": "isFocusable",
-              "privacy": "private",
-              "parameters": [
-                {
-                  "name": "element",
-                  "type": {
-                    "text": "HTMLElement"
-                  },
-                  "description": "The element to check."
-                }
-              ],
-              "description": "Checks if the element is focusable.",
-              "return": {
-                "type": {
-                  "text": ""
-                }
+              "name": "color",
+              "type": {
+                "text": "PopoverColor"
               },
+              "description": "Color of the popover\n- **tonal**\n- **contrast**",
+              "default": "tonal",
+              "fieldName": "color",
               "inheritedFrom": {
                 "name": "Popover",
-                "module": "components/popover/popover.component.js"
+                "module": "src/components/popover/popover.component.ts"
               }
             },
             {
-              "kind": "method",
-              "name": "findFocusable",
-              "privacy": "private",
-              "return": {
-                "type": {
-                  "text": ""
-                }
+              "name": "visible",
+              "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.",
+              "description": "The visibility of the popover.",
+              "default": "false",
+              "fieldName": "visible",
               "inheritedFrom": {
                 "name": "Popover",
-                "module": "components/popover/popover.component.js"
+                "module": "src/components/popover/popover.component.ts"
               }
             },
             {
-              "kind": "method",
-              "name": "setFocusableElements",
-              "privacy": "public",
-              "description": "Updates the list of focusable elements within the component's shadow root.",
+              "name": "offset",
+              "type": {
+                "text": "number"
+              },
+              "description": "The offset of the popover.",
+              "default": "4",
+              "fieldName": "offset",
               "inheritedFrom": {
                 "name": "Popover",
-                "module": "components/popover/popover.component.js"
+                "module": "src/components/popover/popover.component.ts"
               }
             },
             {
-              "kind": "method",
-              "name": "setInitialFocus",
-              "privacy": "public",
-              "parameters": [
-                {
-                  "name": "prefferableElement",
-                  "default": "0",
-                  "type": {
-                    "text": "number"
-                  },
-                  "description": "The index of the preferable element to focus."
-                }
-              ],
-              "description": "Sets the initial focus within the container.",
+              "name": "focus-trap",
+              "type": {
+                "text": "boolean"
+              },
+              "description": "Determines whether the focus trap is enabled.\nIf true, focus will be restricted to the content within this component.",
+              "default": "false",
+              "fieldName": "focusTrap",
               "inheritedFrom": {
                 "name": "Popover",
-                "module": "components/popover/popover.component.js"
+                "module": "src/components/popover/popover.component.ts"
               }
             },
             {
-              "kind": "method",
-              "name": "calculateNextIndex",
-              "privacy": "private",
-              "parameters": [
-                {
-                  "name": "currentIndex",
-                  "type": {
-                    "text": "number"
-                  },
-                  "description": "The current index."
-                },
-                {
-                  "name": "step",
-                  "type": {
-                    "text": "number"
-                  },
-                  "description": "The step to calculate the next index."
-                }
-              ],
-              "description": "Calculates the next index for the focus trap.",
-              "return": {
-                "type": {
-                  "text": ""
-                }
+              "name": "prevent-scroll",
+              "type": {
+                "text": "boolean"
               },
+              "description": "Prevent outside scrolling when popover show.",
+              "default": "false",
+              "fieldName": "preventScroll",
               "inheritedFrom": {
                 "name": "Popover",
-                "module": "components/popover/popover.component.js"
+                "module": "src/components/popover/popover.component.ts"
               }
             },
             {
-              "kind": "method",
-              "name": "getDeepActiveElement",
-              "privacy": "private",
-              "description": "Returns the deepest active element in the shadow DOM.",
-              "return": {
-                "type": {
-                  "text": ""
-                }
+              "name": "show-arrow",
+              "type": {
+                "text": "boolean"
               },
+              "description": "The arrow visibility of the popover.",
+              "default": "false",
+              "fieldName": "showArrow",
               "inheritedFrom": {
                 "name": "Popover",
-                "module": "components/popover/popover.component.js"
+                "module": "src/components/popover/popover.component.ts"
               }
             },
             {
-              "kind": "method",
-              "name": "findElement",
-              "privacy": "private",
-              "parameters": [
-                {
-                  "name": "activeElement",
-                  "type": {
-                    "text": "HTMLElement"
-                  },
-                  "description": "The active element."
-                }
-              ],
-              "description": "Finds the index of the active element within the focusable elements.",
-              "return": {
-                "type": {
-                  "text": ""
-                }
+              "name": "close-button",
+              "type": {
+                "text": "boolean"
               },
+              "description": "The close button visibility of the popover.",
+              "default": "false",
+              "fieldName": "closeButton",
               "inheritedFrom": {
                 "name": "Popover",
-                "module": "components/popover/popover.component.js"
+                "module": "src/components/popover/popover.component.ts"
               }
             },
             {
-              "kind": "method",
-              "name": "isEqualFocusNode",
-              "privacy": "private",
-              "parameters": [
-                {
-                  "name": "activeElement",
-                  "type": {
-                    "text": "HTMLElement"
-                  },
-                  "description": "The active element."
-                },
-                {
-                  "name": "element",
-                  "type": {
-                    "text": "HTMLElement"
-                  },
-                  "description": "The element to compare."
-                }
-              ],
-              "description": "Checks if the active element is equal to the given element.",
-              "return": {
-                "type": {
-                  "text": ""
-                }
+              "name": "interactive",
+              "type": {
+                "text": "boolean"
               },
+              "description": "Determines whether the popover is interactive。",
+              "default": "false",
+              "fieldName": "interactive",
               "inheritedFrom": {
                 "name": "Popover",
-                "module": "components/popover/popover.component.js"
+                "module": "src/components/popover/popover.component.ts"
               }
             },
             {
-              "kind": "method",
-              "name": "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": "delay",
+              "type": {
+                "text": "string"
+              },
+              "description": "The delay of the show/hide popover.",
+              "default": "0,0",
+              "fieldName": "delay",
               "inheritedFrom": {
                 "name": "Popover",
-                "module": "components/popover/popover.component.js"
+                "module": "src/components/popover/popover.component.ts"
               }
             },
             {
-              "kind": "method",
-              "name": "handleKeydown",
-              "privacy": "private",
-              "parameters": [
-                {
-                  "name": "event",
-                  "type": {
-                    "text": "KeyboardEvent"
-                  },
-                  "description": "The keyboard event."
-                }
-              ],
-              "description": "Traps focus within the container.",
+              "name": "hide-on-escape",
+              "type": {
+                "text": "boolean"
+              },
+              "description": "Hide popover on escape key press.",
+              "default": "false",
+              "fieldName": "hideOnEscape",
               "inheritedFrom": {
                 "name": "Popover",
-                "module": "components/popover/popover.component.js"
+                "module": "src/components/popover/popover.component.ts"
               }
             },
             {
-              "kind": "field",
-              "name": "id",
+              "name": "hide-on-blur",
               "type": {
-                "text": "string"
+                "text": "boolean"
               },
-              "default": "''",
-              "description": "The unique ID of the popover.",
-              "attribute": "id",
-              "reflects": true,
+              "description": "Hide popover on blur.",
+              "default": "false",
+              "fieldName": "hideOnBlur",
               "inheritedFrom": {
                 "name": "Popover",
-                "module": "components/popover/popover.component.js"
+                "module": "src/components/popover/popover.component.ts"
               }
             },
             {
-              "kind": "field",
-              "name": "triggerID",
+              "name": "hide-on-outside-click",
               "type": {
-                "text": "string"
+                "text": "boolean"
               },
-              "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": "Hide on outside click of the popover.",
+              "default": "false",
+              "fieldName": "hideOnOutsideClick",
               "inheritedFrom": {
                 "name": "Popover",
-                "module": "components/popover/popover.component.js"
+                "module": "src/components/popover/popover.component.ts"
               }
             },
             {
-              "kind": "field",
-              "name": "trigger",
+              "name": "focus-back-to-trigger",
               "type": {
-                "text": "PopoverTrigger"
+                "text": "boolean"
               },
-              "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 focus back to trigger after the popover hide.",
+              "default": "false",
+              "fieldName": "focusBackToTrigger",
               "inheritedFrom": {
                 "name": "Popover",
-                "module": "components/popover/popover.component.js"
+                "module": "src/components/popover/popover.component.ts"
               }
             },
             {
-              "kind": "field",
-              "name": "placement",
+              "name": "backdrop",
               "type": {
-                "text": "PopoverPlacement"
+                "text": "boolean"
               },
-              "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": "Determines whether the popover with backdrop.\nOther than popover and trigger element, the rest of the screen will be covered with a backdrop.",
+              "default": "false",
+              "fieldName": "backdrop",
               "inheritedFrom": {
                 "name": "Popover",
-                "module": "components/popover/popover.component.js"
+                "module": "src/components/popover/popover.component.ts"
               }
             },
             {
-              "kind": "field",
-              "name": "color",
+              "name": "flip",
               "type": {
-                "text": "PopoverColor"
+                "text": "boolean"
               },
-              "description": "Color of the popover\n- **tonal**\n- **contrast**",
-              "default": "tonal",
-              "attribute": "color",
-              "reflects": true,
+              "description": "Changes the placement of popover to keep it in view when scrolling.",
+              "default": "true",
+              "fieldName": "flip",
               "inheritedFrom": {
                 "name": "Popover",
-                "module": "components/popover/popover.component.js"
+                "module": "src/components/popover/popover.component.ts"
               }
             },
             {
-              "kind": "field",
-              "name": "visible",
+              "name": "size",
               "type": {
                 "text": "boolean"
               },
-              "description": "The visibility of the popover.",
+              "description": "Changes the size of popover to keep it in view when scrolling.",
               "default": "false",
-              "attribute": "visible",
-              "reflects": true,
+              "fieldName": "size",
               "inheritedFrom": {
                 "name": "Popover",
-                "module": "components/popover/popover.component.js"
+                "module": "src/components/popover/popover.component.ts"
               }
             },
             {
-              "kind": "field",
-              "name": "offset",
+              "name": "z-index",
               "type": {
                 "text": "number"
               },
-              "description": "The offset of the popover.",
-              "default": "4",
-              "attribute": "offset",
-              "reflects": true,
+              "description": "The z-index of the popover.",
+              "default": "1000",
+              "fieldName": "zIndex",
               "inheritedFrom": {
                 "name": "Popover",
-                "module": "components/popover/popover.component.js"
+                "module": "src/components/popover/popover.component.ts"
               }
             },
             {
-              "kind": "field",
-              "name": "focusTrap",
+              "name": "append-to",
               "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": "focus-trap",
-              "reflects": true,
+              "default": "''",
+              "description": "Element ID that the popover append to.",
+              "fieldName": "appendTo",
               "inheritedFrom": {
                 "name": "Popover",
-                "module": "components/popover/popover.component.js"
+                "module": "src/components/popover/popover.component.ts"
               }
             },
             {
-              "kind": "field",
-              "name": "preventScroll",
+              "name": "close-button-aria-label",
               "type": {
-                "text": "boolean"
+                "text": "string | null"
               },
-              "description": "Prevent outside scrolling when popover show.",
-              "default": "false",
-              "attribute": "prevent-scroll",
-              "reflects": true,
+              "default": "null",
+              "description": "aria-label attribute to be set for close button accessibility.",
+              "fieldName": "closeButtonAriaLabel",
               "inheritedFrom": {
                 "name": "Popover",
-                "module": "components/popover/popover.component.js"
+                "module": "src/components/popover/popover.component.ts"
               }
             },
             {
-              "kind": "field",
-              "name": "showArrow",
+              "name": "role",
               "type": {
-                "text": "boolean"
+                "text": "HTMLElement['role']"
               },
-              "description": "The arrow visibility of the popover.",
-              "default": "false",
-              "attribute": "show-arrow",
-              "reflects": true,
+              "description": "Role of the popover",
+              "default": "dialog",
+              "fieldName": "role",
               "inheritedFrom": {
                 "name": "Popover",
-                "module": "components/popover/popover.component.js"
+                "module": "src/components/popover/popover.component.ts"
               }
             },
             {
-              "kind": "field",
-              "name": "closeButton",
+              "name": "aria-labelledby",
               "type": {
-                "text": "boolean"
+                "text": "string | null"
               },
-              "description": "The close button visibility of the popover.",
-              "default": "false",
-              "attribute": "close-button",
-              "reflects": true,
+              "default": "null",
+              "description": "aria-labelledby for an interactive popover only, defaults to the trigger component id.\nUsed in nested cases where the triggerComponent isn't the actual button.",
+              "fieldName": "ariaLabelledby",
               "inheritedFrom": {
                 "name": "Popover",
-                "module": "components/popover/popover.component.js"
+                "module": "src/components/popover/popover.component.ts"
               }
             },
             {
-              "kind": "field",
-              "name": "interactive",
+              "name": "aria-describedby",
+              "type": {
+                "text": "string | null"
+              },
+              "default": "null",
+              "description": "aria-describedby of the popover.",
+              "fieldName": "ariaDescribedby",
+              "inheritedFrom": {
+                "name": "Popover",
+                "module": "src/components/popover/popover.component.ts"
+              }
+            },
+            {
+              "name": "disable-aria-expanded",
               "type": {
                 "text": "boolean"
               },
-              "description": "Determines whether the popover is interactive。",
+              "description": "Disable aria-expanded attribute on trigger element.\nMake sure to set this to false when the popover is interactive.",
               "default": "false",
-              "attribute": "interactive",
-              "reflects": true,
+              "fieldName": "disableAriaExpanded",
               "inheritedFrom": {
                 "name": "Popover",
-                "module": "components/popover/popover.component.js"
+                "module": "src/components/popover/popover.component.ts"
               }
+            }
+          ],
+          "superclass": {
+            "name": "Popover",
+            "module": "/src/components/popover/popover.component"
+          },
+          "tagName": "mdc-toggletip",
+          "jsDoc": "/**\n * A toggletip is triggered by clicking a trigger element.\n *\n * It can contain interactive content and can be closed by\n * clicking outside the toggletip or pressing the escape key.\n *\n * It can have optional close button to close the toggletip.\n *\n * Toggletip component uses `mdc-screenreaderannouncer` internally to\n * announce the toggletip text content with screen readers when the toggletip is shown.\n *\n * `screenreader-announcer-identity` attribute can be used to provide ID of an element\n * in DOM to which announcement elements are added. If not set, a visually hidden\n * div element is created in DOM to which announcement elements are added.\n *\n * Please refer to the `mdc-screenreaderannouncer` component for more details.\n *\n * @dependency mdc-screenreaderannouncer\n * @dependency mdc-button\n *\n * @tagname mdc-toggletip\n *\n * @event shown - (React: onShown) This event is dispatched when the toggletip is shown\n * @event hidden - (React: onHidden) This event is dispatched when the toggletip is hidden\n * @event created - (React: onCreated) This event is dispatched when the toggletip is created (added to the DOM)\n * @event destroyed - (React: onDestroyed) This event is dispatched when the toggletip\n * is destroyed (removed from the DOM)\n *\n * @cssproperty --mdc-toggletip-max-width - The maximum width of the toggletip.\n * @cssproperty --mdc-toggletip-text-color - The text color of the toggletip.\n * @cssproperty --mdc-toggletip-text-color-contrast - The text color of the toggletip\n *  when the color is contrast.\n *\n * @slot - Default slot for the toggletip content\n */",
+          "customElement": true
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "default",
+          "declaration": {
+            "name": "ToggleTip",
+            "module": "components/toggletip/toggletip.component.js"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "components/textarea/textarea.component.js",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "mdc-textarea component, which is used to get the multi-line text input from the user.\nIt contains:\n- label: It is the title of the textarea field.\n- required: A boolean attribute depicting that the textarea field is required.\n- Textarea: It is the multi-line text input field.\n- helper-text: It is the text that provides additional information about the textarea field.\n- max-character-limit: It is the text that shows the character count of the textarea field.\n- Error, Warning, Success, Priority Help Text type: It is the text that provides additional information\n  about the textarea field based on the validation state.\n- limitexceeded: It is the event that is dispatched when the character limit exceeds or restored.\n  This event exposes 3 properties:\n  - currentCharacterCount - the current number of characters in the textarea field,\n  - maxCharacterLimit - the maximum number of characters allowed in the textarea field,\n  - value - the current value of the textarea field,\n\n**Note**: Consumers must set the help-text-type with 'error' and\nhelp-text attribute with the error message using limitexceeded event.\nThe same help-text value will be used for the validation message to be displayed.",
+          "name": "Textarea",
+          "cssProperties": [
+            {
+              "description": "Border color for the textarea container when disabled",
+              "name": "--mdc-textarea-disabled-border-color"
+            },
+            {
+              "description": "Text color for the textarea field when disabled",
+              "name": "--mdc-textarea-disabled-text-color"
+            },
+            {
+              "description": "Background color for the textarea field when disabled",
+              "name": "--mdc-textarea-disabled-background-color"
+            },
+            {
+              "description": "Text color for the textarea field",
+              "name": "--mdc-textarea-text-color"
+            },
+            {
+              "description": "Background color for the textarea field",
+              "name": "--mdc-textarea-background-color"
+            },
+            {
+              "description": "Border color for the textarea field",
+              "name": "--mdc-textarea-border-color"
+            },
+            {
+              "description": "Text color for the character counter",
+              "name": "--mdc-textarea-text-secondary-normal"
+            },
+            {
+              "description": "Border color for the error related help text",
+              "name": "--mdc-textarea-error-border-color"
             },
             {
-              "kind": "field",
-              "name": "delay",
-              "type": {
-                "text": "string"
-              },
-              "description": "The delay of the show/hide popover.",
-              "default": "0,0",
-              "attribute": "delay",
-              "reflects": true,
-              "inheritedFrom": {
-                "name": "Popover",
-                "module": "components/popover/popover.component.js"
-              }
+              "description": "Border color for the warning related help text",
+              "name": "--mdc-textarea-warning-border-color"
             },
             {
-              "kind": "field",
-              "name": "hideOnEscape",
-              "type": {
-                "text": "boolean"
-              },
-              "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": "Border color for the success related help text",
+              "name": "--mdc-textarea-success-border-color"
             },
             {
-              "kind": "field",
-              "name": "hideOnBlur",
-              "type": {
-                "text": "boolean"
-              },
-              "description": "Hide popover on blur.",
-              "default": "false",
-              "attribute": "hide-on-blur",
-              "reflects": true,
-              "inheritedFrom": {
-                "name": "Popover",
-                "module": "components/popover/popover.component.js"
-              }
+              "description": "Border color for the priority related help text",
+              "name": "--mdc-textarea-primary-border-color"
+            },
+            {
+              "description": "Background color for the textarea container when hover",
+              "name": "--mdc-textarea-hover-background-color"
+            },
+            {
+              "description": "Background color for the textarea container when focused",
+              "name": "--mdc-textarea-focused-background-color"
             },
+            {
+              "description": "Border color for the textarea container when focused",
+              "name": "--mdc-textarea-focused-border-color"
+            }
+          ],
+          "members": [
             {
               "kind": "field",
-              "name": "hideOnOutsideClick",
+              "name": "placeholder",
               "type": {
-                "text": "boolean"
+                "text": "string | undefined"
               },
-              "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"
-              }
+              "description": "The placeholder text that is displayed when the textarea field is empty.",
+              "attribute": "placeholder"
             },
             {
               "kind": "field",
-              "name": "focusBackToTrigger",
+              "name": "readonly",
               "type": {
                 "text": "boolean"
               },
-              "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": "readonly attribute of the textarea field. If true, the textarea field is read-only.",
+              "attribute": "readonly"
             },
             {
               "kind": "field",
-              "name": "backdrop",
-              "type": {
-                "text": "boolean"
-              },
-              "description": "Determines whether the popover with backdrop.\nOther than popover and trigger element, the rest of the screen will be covered with a backdrop.",
-              "default": "false",
-              "attribute": "backdrop",
-              "reflects": true,
-              "inheritedFrom": {
-                "name": "Popover",
-                "module": "components/popover/popover.component.js"
-              }
+              "name": "rows",
+              "description": "The rows attribute specifies the visible number of lines in a text area.",
+              "default": "5",
+              "attribute": "rows"
             },
             {
               "kind": "field",
-              "name": "flip",
-              "type": {
-                "text": "boolean"
-              },
-              "description": "Changes the placement of popover to keep it in view when scrolling.",
-              "default": "true",
-              "attribute": "flip",
-              "reflects": true,
-              "inheritedFrom": {
-                "name": "Popover",
-                "module": "components/popover/popover.component.js"
-              }
+              "name": "cols",
+              "description": "The cols attribute specifies the visible number of lines in a text area.",
+              "default": "40",
+              "attribute": "cols"
             },
             {
               "kind": "field",
-              "name": "size",
+              "name": "wrap",
               "type": {
-                "text": "boolean"
+                "text": "WrapType"
               },
-              "description": "Changes the size of popover to keep it in view when scrolling.",
-              "default": "false",
-              "attribute": "size",
-              "reflects": true,
-              "inheritedFrom": {
-                "name": "Popover",
-                "module": "components/popover/popover.component.js"
-              }
+              "description": "The wrap attribute specifies how the text in a text area is to be wrapped when submitted in a form.",
+              "default": "'soft'",
+              "attribute": "wrap"
             },
             {
               "kind": "field",
-              "name": "zIndex",
+              "name": "autocapitalize",
               "type": {
-                "text": "number"
+                "text": "AutoCapitalizeType"
               },
-              "description": "The z-index of the popover.",
-              "default": "1000",
-              "attribute": "z-index",
-              "reflects": true,
-              "inheritedFrom": {
-                "name": "Popover",
-                "module": "components/popover/popover.component.js"
-              }
+              "description": "The autocapitalize attribute of the textarea field.",
+              "default": "'off'",
+              "attribute": "autocapitalize"
             },
             {
               "kind": "field",
-              "name": "appendTo",
+              "name": "autocomplete",
               "type": {
-                "text": "string"
+                "text": "AutoCompleteType"
               },
-              "default": "''",
-              "description": "Element ID that the popover append to.",
-              "attribute": "append-to",
-              "reflects": true,
-              "inheritedFrom": {
-                "name": "Popover",
-                "module": "components/popover/popover.component.js"
-              }
+              "description": "The autocomplete attribute of the textarea field.",
+              "default": "'off'",
+              "attribute": "autocomplete"
             },
             {
               "kind": "field",
-              "name": "closeButtonAriaLabel",
+              "name": "autofocus",
               "type": {
-                "text": "string | null"
+                "text": "boolean"
               },
-              "default": "null",
-              "description": "aria-label attribute to be set for close button accessibility.",
-              "attribute": "close-button-aria-label",
-              "reflects": true,
-              "inheritedFrom": {
-                "name": "Popover",
-                "module": "components/popover/popover.component.js"
-              }
+              "default": "false",
+              "description": "If true, the textarea field is focused when the component is rendered.",
+              "attribute": "autofocus"
             },
             {
               "kind": "field",
-              "name": "role",
+              "name": "dirname",
               "type": {
-                "text": "HTMLElement['role']"
+                "text": "string | undefined"
               },
-              "description": "Role of the popover",
-              "default": "dialog",
-              "attribute": "role",
-              "reflects": true,
-              "inheritedFrom": {
-                "name": "Popover",
-                "module": "components/popover/popover.component.js"
-              }
+              "description": "Specifies the name of the directionality of text for submission purposes (e.g., \"rtl\" for right-to-left).",
+              "attribute": "dirname"
             },
             {
               "kind": "field",
-              "name": "ariaLabelledby",
+              "name": "maxlength",
               "type": {
-                "text": "string | null"
+                "text": "number | undefined"
               },
-              "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"
-              }
+              "description": "The maximum number of characters that the textarea field can accept.",
+              "attribute": "maxlength"
             },
             {
               "kind": "field",
-              "name": "ariaDescribedby",
+              "name": "minlength",
               "type": {
-                "text": "string | null"
+                "text": "number | undefined"
               },
-              "default": "null",
-              "description": "aria-describedby of the popover.",
-              "attribute": "aria-describedby",
-              "reflects": true,
-              "inheritedFrom": {
-                "name": "Popover",
-                "module": "components/popover/popover.component.js"
-              }
+              "description": "The minimum number of characters that the textarea field can accept.",
+              "attribute": "minlength"
             },
             {
               "kind": "field",
-              "name": "disableAriaExpanded",
+              "name": "maxCharacterLimit",
               "type": {
-                "text": "boolean"
+                "text": "number | undefined"
               },
-              "description": "Disable aria-expanded attribute on trigger element.\nMake sure to set this to false when the popover is interactive.",
-              "default": "false",
-              "attribute": "disable-aria-expanded",
-              "reflects": true,
-              "inheritedFrom": {
-                "name": "Popover",
-                "module": "components/popover/popover.component.js"
-              }
+              "description": "maximum character limit for the textarea field for character counter.",
+              "attribute": "max-character-limit"
             },
             {
               "kind": "field",
-              "name": "arrowElement",
+              "name": "characterLimitExceedingFired",
               "type": {
-                "text": "HTMLElement | null"
+                "text": "boolean"
               },
-              "privacy": "public",
-              "default": "null",
-              "inheritedFrom": {
-                "name": "Popover",
-                "module": "components/popover/popover.component.js"
-              }
+              "privacy": "private",
+              "default": "false"
             },
             {
               "kind": "field",
-              "name": "triggerElement",
+              "name": "textarea",
               "type": {
-                "text": "HTMLElement | null"
+                "text": "HTMLTextAreaElement"
               },
-              "privacy": "public",
-              "default": "null",
-              "inheritedFrom": {
-                "name": "Popover",
-                "module": "components/popover/popover.component.js"
-              }
+              "privacy": "protected",
+              "readonly": true
             },
             {
               "kind": "method",
-              "name": "setupTriggerListener",
-              "privacy": "private",
-              "description": "Sets up the trigger event listeners based on the trigger type.",
-              "inheritedFrom": {
-                "name": "Popover",
-                "module": "components/popover/popover.component.js"
-              }
+              "name": "setTextareaValidity",
+              "privacy": "private"
             },
             {
               "kind": "method",
-              "name": "removeEventListeners",
-              "privacy": "private",
-              "description": "Removes the trigger event listeners.",
-              "inheritedFrom": {
-                "name": "Popover",
-                "module": "components/popover/popover.component.js"
+              "name": "handleValueChange",
+              "description": "Handles the value change of the textarea field.\nSets the form value and updates the validity of the textarea field.",
+              "return": {
+                "type": {
+                  "text": ""
+                }
               }
             },
             {
-              "kind": "field",
-              "name": "onOutsidePopoverClick",
+              "kind": "method",
+              "name": "dispatchCharacterOverflowStateChangeEvent",
               "privacy": "private",
-              "description": "Handles the outside click event to close the popover.",
-              "parameters": [
-                {
-                  "description": "The mouse event.",
-                  "name": "event"
+              "description": "Dispatches the character overflow state change event.",
+              "return": {
+                "type": {
+                  "text": ""
                 }
-              ],
-              "inheritedFrom": {
-                "name": "Popover",
-                "module": "components/popover/popover.component.js"
               }
             },
             {
-              "kind": "field",
-              "name": "onEscapeKeydown",
+              "kind": "method",
+              "name": "handleCharacterOverflowStateChange",
               "privacy": "private",
-              "description": "Handles the escape keydown event to close the popover.",
-              "parameters": [
-                {
-                  "description": "The keyboard event.",
-                  "name": "event"
+              "description": "Handles the character overflow state change.\nDispatches the character overflow state change event if the character limit is exceeded or restored.",
+              "return": {
+                "type": {
+                  "text": ""
                 }
-              ],
-              "inheritedFrom": {
-                "name": "Popover",
-                "module": "components/popover/popover.component.js"
               }
             },
             {
-              "kind": "field",
-              "name": "onPopoverFocusOut",
+              "kind": "method",
+              "name": "updateValue",
               "privacy": "private",
-              "description": "Handles the popover focus out event.",
-              "parameters": [
-                {
-                  "description": "The focus event.",
-                  "name": "event"
+              "description": "Updates the value of the textarea field.\nSets the form value.",
+              "return": {
+                "type": {
+                  "text": ""
                 }
-              ],
-              "inheritedFrom": {
-                "name": "Popover",
-                "module": "components/popover/popover.component.js"
               }
             },
             {
               "kind": "method",
-              "name": "isOpenUpdated",
+              "name": "onChange",
               "privacy": "private",
               "parameters": [
                 {
-                  "name": "oldValue",
-                  "type": {
-                    "text": "boolean"
-                  },
-                  "description": "The old value of the visible property."
-                },
-                {
-                  "name": "newValue",
+                  "name": "event",
                   "type": {
-                    "text": "boolean"
+                    "text": "Event"
                   },
-                  "description": "The new value of the visible property."
+                  "description": "Event which contains information about the value change."
                 }
               ],
-              "description": "Handles the popover visibility change and position the popover.\nHandles the exit event to close the popover.",
-              "inheritedFrom": {
-                "name": "Popover",
-                "module": "components/popover/popover.component.js"
-              }
+              "description": "Handles the change event of the textarea field.\nUpdates the value and sets the validity of the textarea field.\n\nThe 'change' event does not bubble up through the shadow DOM as it was not composed.\nTherefore, we need to re-dispatch the same event to ensure it is propagated correctly.\nRead more: https://developer.mozilla.org/en-US/docs/Web/API/Event/composed"
             },
             {
-              "kind": "field",
-              "name": "startCloseDelay",
-              "privacy": "private",
-              "description": "Starts the close delay timer.\nIf the popover is not interactive, it will close the popover after the delay.",
-              "inheritedFrom": {
-                "name": "Popover",
-                "module": "components/popover/popover.component.js"
-              }
+              "kind": "method",
+              "name": "renderCharacterCounter",
+              "privacy": "protected"
+            },
+            {
+              "kind": "method",
+              "name": "renderTextareaFooter",
+              "privacy": "protected"
             },
             {
               "kind": "field",
-              "name": "cancelCloseDelay",
-              "privacy": "private",
-              "description": "Cancels the close delay timer.",
+              "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,
               "inheritedFrom": {
-                "name": "Popover",
-                "module": "components/popover/popover.component.js"
+                "name": "FormInternalsMixin",
+                "module": "utils/mixins/FormInternalsMixin.js"
               }
             },
             {
               "kind": "field",
-              "name": "showPopover",
-              "privacy": "public",
-              "description": "Shows the popover.",
+              "name": "value",
+              "type": {
+                "text": "string"
+              },
+              "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": "hidePopover",
-              "privacy": "public",
-              "description": "Hides the popover.",
+              "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,
               "inheritedFrom": {
-                "name": "Popover",
-                "module": "components/popover/popover.component.js"
+                "name": "FormInternalsMixin",
+                "module": "utils/mixins/FormInternalsMixin.js"
               }
             },
             {
               "kind": "field",
-              "name": "togglePopoverVisible",
-              "privacy": "public",
-              "description": "Toggles the popover visibility.",
+              "name": "validity",
+              "type": {
+                "text": "ValidityState"
+              },
+              "readonly": true,
               "inheritedFrom": {
-                "name": "Popover",
-                "module": "components/popover/popover.component.js"
+                "name": "FormInternalsMixin",
+                "module": "utils/mixins/FormInternalsMixin.js"
               }
             },
             {
-              "kind": "method",
-              "name": "handleCreatePopoverFirstUpdate",
-              "privacy": "private",
-              "description": "Sets the focusable elements inside the popover.",
+              "kind": "field",
+              "name": "willValidate",
+              "readonly": true,
               "inheritedFrom": {
-                "name": "Popover",
-                "module": "components/popover/popover.component.js"
+                "name": "FormInternalsMixin",
+                "module": "utils/mixins/FormInternalsMixin.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.",
+              "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": "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 toggletip is shown",
-              "name": "shown",
-              "reactName": "onShown",
+              "kind": "method",
+              "name": "checkValidity",
+              "return": {
+                "type": {
+                  "text": "boolean"
+                }
+              },
               "inheritedFrom": {
-                "name": "Popover",
-                "module": "src/components/popover/popover.component.ts"
+                "name": "FormInternalsMixin",
+                "module": "utils/mixins/FormInternalsMixin.js"
               }
             },
             {
-              "description": "(React: onHidden) This event is dispatched when the toggletip is hidden",
-              "name": "hidden",
-              "reactName": "onHidden",
+              "kind": "method",
+              "name": "reportValidity",
               "inheritedFrom": {
-                "name": "Popover",
-                "module": "src/components/popover/popover.component.ts"
+                "name": "FormInternalsMixin",
+                "module": "utils/mixins/FormInternalsMixin.js"
               }
             },
             {
-              "description": "(React: onCreated) This event is dispatched when the toggletip is created (added to the DOM)",
-              "name": "created",
-              "reactName": "onCreated",
+              "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": "src/components/popover/popover.component.ts"
+                "name": "DataAriaLabelMixin",
+                "module": "utils/mixins/DataAriaLabelMixin.js"
               }
             },
             {
-              "description": "(React: onDestroyed) This event is dispatched when the toggletip is destroyed (removed from the DOM)",
-              "name": "destroyed",
-              "reactName": "onDestroyed",
-              "inheritedFrom": {
-                "name": "Popover",
-                "module": "src/components/popover/popover.component.ts"
-              }
-            }
-          ],
-          "attributes": [
-            {
-              "name": "screenreader-announcer-identity",
+              "kind": "field",
+              "name": "disabled",
               "type": {
-                "text": "string"
+                "text": "boolean | undefined"
               },
-              "default": "''",
-              "description": "Set this attribute with the id of the element in the DOM, to which announcement\nelements will be appended.\nIf an id is provided, the announcement elements will be appended to this element.\nIf id is not provided, a visually hidden div element will be created in the DOM.\n\nPlease refer to the `mdc-screenreaderannouncer` component for more details.",
-              "fieldName": "screenreaderAnnouncerIdentity"
+              "description": "Indicates whether the component is disabled.\nWhen the component is disabled for user interaction; it is not focusable or clickable.",
+              "default": "undefined",
+              "attribute": "disabled",
+              "reflects": true,
+              "inheritedFrom": {
+                "name": "FormfieldWrapper",
+                "module": "components/formfieldwrapper/formfieldwrapper.component.js"
+              }
             },
             {
-              "name": "enabledFocusTrap",
+              "kind": "field",
+              "name": "label",
               "type": {
-                "text": "boolean"
+                "text": "string | undefined"
               },
-              "default": "false",
-              "description": "Determines whether the focus trap is enabled.\nIf true, focus will be restricted to the content within this component.",
-              "fieldName": "enabledFocusTrap",
+              "description": "The label of the input field. It is linked to the input field using the `for` attribute.",
+              "attribute": "label",
+              "reflects": true,
               "inheritedFrom": {
-                "name": "Popover",
-                "module": "src/components/popover/popover.component.ts"
+                "name": "FormfieldWrapper",
+                "module": "components/formfieldwrapper/formfieldwrapper.component.js"
               }
             },
             {
-              "name": "enabledPreventScroll",
+              "kind": "field",
+              "name": "required",
               "type": {
                 "text": "boolean"
               },
               "default": "false",
-              "description": "Prevent outside scrolling when element is shown.",
-              "fieldName": "enabledPreventScroll",
+              "description": "The required attribute to indicate that the input field is required.\nIt is used to append a required indicator (*) to the label.",
+              "attribute": "required",
+              "reflects": true,
               "inheritedFrom": {
-                "name": "Popover",
-                "module": "src/components/popover/popover.component.ts"
+                "name": "FormfieldWrapper",
+                "module": "components/formfieldwrapper/formfieldwrapper.component.js"
               }
             },
             {
+              "kind": "field",
               "name": "id",
               "type": {
                 "text": "string"
               },
               "default": "''",
-              "description": "The unique ID of the popover.",
-              "fieldName": "id",
+              "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": "src/components/popover/popover.component.ts"
+                "name": "FormfieldWrapper",
+                "module": "components/formfieldwrapper/formfieldwrapper.component.js"
               }
             },
             {
-              "name": "triggerID",
+              "kind": "field",
+              "name": "helpTextType",
               "type": {
-                "text": "string"
+                "text": "ValidationType"
               },
-              "default": "''",
-              "description": "The ID of the element that triggers the popover.\nThis attribute is required for the popover to work.",
-              "fieldName": "triggerID",
+              "description": "The type of help text. It can be 'default', 'error', 'warning', 'success', 'priority'.",
+              "attribute": "help-text-type",
+              "reflects": true,
               "inheritedFrom": {
-                "name": "Popover",
-                "module": "src/components/popover/popover.component.ts"
+                "name": "FormfieldWrapper",
+                "module": "components/formfieldwrapper/formfieldwrapper.component.js"
               }
             },
             {
-              "name": "trigger",
+              "kind": "field",
+              "name": "helpText",
               "type": {
-                "text": "PopoverTrigger"
+                "text": "string | undefined"
               },
-              "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",
+              "description": "The help text that is displayed below the input field.",
+              "attribute": "help-text",
+              "reflects": true,
               "inheritedFrom": {
-                "name": "Popover",
-                "module": "src/components/popover/popover.component.ts"
+                "name": "FormfieldWrapper",
+                "module": "components/formfieldwrapper/formfieldwrapper.component.js"
               }
             },
             {
-              "name": "placement",
-              "type": {
-                "text": "PopoverPlacement"
+              "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": ""
+                }
               },
-              "description": "The placement of the popover.\n- **top**\n- **top-start**\n- **top-end**\n- **bottom**\n- **bottom-start**\n- **bottom-end**\n- **left**\n- **left-start**\n- **left-end**\n- **right**\n- **right-start**\n- **right-end**",
-              "default": "bottom",
-              "fieldName": "placement",
               "inheritedFrom": {
-                "name": "Popover",
-                "module": "src/components/popover/popover.component.ts"
+                "name": "FormfieldWrapper",
+                "module": "components/formfieldwrapper/formfieldwrapper.component.js"
               }
             },
             {
-              "name": "color",
-              "type": {
-                "text": "PopoverColor"
+              "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": ""
+                }
               },
-              "description": "Color of the popover\n- **tonal**\n- **contrast**",
-              "default": "tonal",
-              "fieldName": "color",
               "inheritedFrom": {
-                "name": "Popover",
-                "module": "src/components/popover/popover.component.ts"
+                "name": "FormfieldWrapper",
+                "module": "components/formfieldwrapper/formfieldwrapper.component.js"
               }
             },
             {
-              "name": "visible",
-              "type": {
-                "text": "boolean"
+              "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": ""
+                }
               },
-              "description": "The visibility of the popover.",
-              "default": "false",
-              "fieldName": "visible",
               "inheritedFrom": {
-                "name": "Popover",
-                "module": "src/components/popover/popover.component.ts"
+                "name": "FormfieldWrapper",
+                "module": "components/formfieldwrapper/formfieldwrapper.component.js"
               }
             },
             {
-              "name": "offset",
-              "type": {
-                "text": "number"
+              "kind": "method",
+              "name": "renderLabel",
+              "privacy": "protected",
+              "description": "renders the mdc-label-text container that contains the label and labelInfoToggleTip.",
+              "return": {
+                "type": {
+                  "text": ""
+                }
               },
-              "description": "The offset of the popover.",
-              "default": "4",
-              "fieldName": "offset",
               "inheritedFrom": {
-                "name": "Popover",
-                "module": "src/components/popover/popover.component.ts"
+                "name": "FormfieldWrapper",
+                "module": "components/formfieldwrapper/formfieldwrapper.component.js"
               }
             },
             {
-              "name": "focus-trap",
-              "type": {
-                "text": "boolean"
+              "kind": "method",
+              "name": "renderHelperText",
+              "privacy": "protected",
+              "description": "renders the mdc-help-text container that contains the helpertext icon and helpertext.",
+              "return": {
+                "type": {
+                  "text": ""
+                }
               },
-              "description": "Determines whether the focus trap is enabled.\nIf true, focus will be restricted to the content within this component.",
-              "default": "false",
-              "fieldName": "focusTrap",
               "inheritedFrom": {
-                "name": "Popover",
-                "module": "src/components/popover/popover.component.ts"
+                "name": "FormfieldWrapper",
+                "module": "components/formfieldwrapper/formfieldwrapper.component.js"
               }
-            },
+            }
+          ],
+          "events": [
             {
-              "name": "prevent-scroll",
+              "name": "limitexceeded",
               "type": {
-                "text": "boolean"
+                "text": "CustomEvent"
               },
-              "description": "Prevent outside scrolling when popover show.",
-              "default": "false",
-              "fieldName": "preventScroll",
-              "inheritedFrom": {
-                "name": "Popover",
-                "module": "src/components/popover/popover.component.ts"
+              "description": "(React: onLimitExceeded) This event is dispatched once when the character limit exceeds or restored.",
+              "reactName": "onLimitExceeded"
+            },
+            {
+              "type": {
+                "text": "EventConstructor"
               }
             },
             {
-              "name": "show-arrow",
+              "description": "(React: onInput) This event is dispatched when the value of the textarea field changes (every press).",
+              "name": "input",
+              "reactName": "onInput"
+            },
+            {
+              "description": "(React: onChange) This event is dispatched when the value of the textarea field changes (on blur).",
+              "name": "change",
+              "reactName": "onChange"
+            },
+            {
+              "description": "(React: onFocus) This event is dispatched when the textarea receives focus.",
+              "name": "focus",
+              "reactName": "onFocus"
+            },
+            {
+              "description": "(React: onBlur) This event is dispatched when the textarea loses focus.",
+              "name": "blur",
+              "reactName": "onBlur"
+            }
+          ],
+          "attributes": [
+            {
+              "name": "placeholder",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "The placeholder text that is displayed when the textarea field is empty.",
+              "fieldName": "placeholder"
+            },
+            {
+              "name": "readonly",
               "type": {
                 "text": "boolean"
               },
-              "description": "The arrow visibility of the popover.",
               "default": "false",
-              "fieldName": "showArrow",
-              "inheritedFrom": {
-                "name": "Popover",
-                "module": "src/components/popover/popover.component.ts"
-              }
+              "description": "readonly attribute of the textarea field. If true, the textarea field is read-only.",
+              "fieldName": "readonly"
+            },
+            {
+              "name": "rows",
+              "description": "The rows attribute specifies the visible number of lines in a text area.",
+              "default": "5",
+              "fieldName": "rows"
+            },
+            {
+              "name": "cols",
+              "description": "The cols attribute specifies the visible number of lines in a text area.",
+              "default": "40",
+              "fieldName": "cols"
+            },
+            {
+              "name": "wrap",
+              "type": {
+                "text": "WrapType"
+              },
+              "description": "The wrap attribute specifies how the text in a text area is to be wrapped when submitted in a form.",
+              "default": "'soft'",
+              "fieldName": "wrap"
+            },
+            {
+              "name": "autocapitalize",
+              "type": {
+                "text": "AutoCapitalizeType"
+              },
+              "description": "The autocapitalize attribute of the textarea field.",
+              "default": "'off'",
+              "fieldName": "autocapitalize"
             },
             {
-              "name": "close-button",
+              "name": "autocomplete",
               "type": {
-                "text": "boolean"
+                "text": "AutoCompleteType"
               },
-              "description": "The close button visibility of the popover.",
-              "default": "false",
-              "fieldName": "closeButton",
-              "inheritedFrom": {
-                "name": "Popover",
-                "module": "src/components/popover/popover.component.ts"
-              }
+              "description": "The autocomplete attribute of the textarea field.",
+              "default": "'off'",
+              "fieldName": "autocomplete"
             },
             {
-              "name": "interactive",
+              "name": "autofocus",
               "type": {
                 "text": "boolean"
               },
-              "description": "Determines whether the popover is interactive。",
               "default": "false",
-              "fieldName": "interactive",
-              "inheritedFrom": {
-                "name": "Popover",
-                "module": "src/components/popover/popover.component.ts"
-              }
+              "description": "If true, the textarea field is focused when the component is rendered.",
+              "fieldName": "autofocus"
             },
             {
-              "name": "delay",
+              "name": "dirname",
               "type": {
-                "text": "string"
+                "text": "string | undefined"
               },
-              "description": "The delay of the show/hide popover.",
-              "default": "0,0",
-              "fieldName": "delay",
-              "inheritedFrom": {
-                "name": "Popover",
-                "module": "src/components/popover/popover.component.ts"
-              }
+              "description": "Specifies the name of the directionality of text for submission purposes (e.g., \"rtl\" for right-to-left).",
+              "fieldName": "dirname"
             },
             {
-              "name": "hide-on-escape",
+              "name": "maxlength",
               "type": {
-                "text": "boolean"
+                "text": "number | undefined"
               },
-              "description": "Hide popover on escape key press.",
-              "default": "false",
-              "fieldName": "hideOnEscape",
-              "inheritedFrom": {
-                "name": "Popover",
-                "module": "src/components/popover/popover.component.ts"
-              }
+              "description": "The maximum number of characters that the textarea field can accept.",
+              "fieldName": "maxlength"
             },
             {
-              "name": "hide-on-blur",
+              "name": "minlength",
               "type": {
-                "text": "boolean"
+                "text": "number | undefined"
               },
-              "description": "Hide popover on blur.",
-              "default": "false",
-              "fieldName": "hideOnBlur",
-              "inheritedFrom": {
-                "name": "Popover",
-                "module": "src/components/popover/popover.component.ts"
-              }
+              "description": "The minimum number of characters that the textarea field can accept.",
+              "fieldName": "minlength"
             },
             {
-              "name": "hide-on-outside-click",
+              "name": "max-character-limit",
               "type": {
-                "text": "boolean"
+                "text": "number | undefined"
               },
-              "description": "Hide on outside click of the popover.",
-              "default": "false",
-              "fieldName": "hideOnOutsideClick",
-              "inheritedFrom": {
-                "name": "Popover",
-                "module": "src/components/popover/popover.component.ts"
-              }
+              "description": "maximum character limit for the textarea field for character counter.",
+              "fieldName": "maxCharacterLimit"
             },
             {
-              "name": "focus-back-to-trigger",
+              "name": "name",
               "type": {
-                "text": "boolean"
+                "text": "string"
               },
-              "description": "The focus back to trigger after the popover hide.",
-              "default": "false",
-              "fieldName": "focusBackToTrigger",
+              "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": "src/components/popover/popover.component.ts"
+                "name": "FormInternalsMixin",
+                "module": "src/utils/mixins/FormInternalsMixin.ts"
               }
             },
             {
-              "name": "backdrop",
+              "name": "value",
               "type": {
-                "text": "boolean"
+                "text": "string"
               },
-              "description": "Determines whether the popover with backdrop.\nOther than popover and trigger element, the rest of the screen will be covered with a backdrop.",
-              "default": "false",
-              "fieldName": "backdrop",
+              "default": "''",
+              "description": "Indicates the value of the component group (ex: input, checkbox, radio, select etc...)",
+              "fieldName": "value",
               "inheritedFrom": {
-                "name": "Popover",
-                "module": "src/components/popover/popover.component.ts"
+                "name": "FormInternalsMixin",
+                "module": "src/utils/mixins/FormInternalsMixin.ts"
               }
             },
             {
-              "name": "flip",
+              "name": "validation-message",
               "type": {
-                "text": "boolean"
+                "text": "string | undefined"
               },
-              "description": "Changes the placement of popover to keep it in view when scrolling.",
-              "default": "true",
-              "fieldName": "flip",
+              "description": "Custom validation message that will override the default message and displayed when the input is invalid.",
+              "fieldName": "validationMessage",
               "inheritedFrom": {
-                "name": "Popover",
-                "module": "src/components/popover/popover.component.ts"
+                "name": "FormInternalsMixin",
+                "module": "src/utils/mixins/FormInternalsMixin.ts"
               }
             },
             {
-              "name": "size",
+              "name": "data-aria-label",
               "type": {
-                "text": "boolean"
+                "text": "string | null"
               },
-              "description": "Changes the size of popover to keep it in view when scrolling.",
-              "default": "false",
-              "fieldName": "size",
+              "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": "src/components/popover/popover.component.ts"
+                "name": "DataAriaLabelMixin",
+                "module": "src/utils/mixins/DataAriaLabelMixin.ts"
               }
             },
             {
-              "name": "z-index",
+              "name": "disabled",
               "type": {
-                "text": "number"
+                "text": "boolean | undefined"
               },
-              "description": "The z-index of the popover.",
-              "default": "1000",
-              "fieldName": "zIndex",
+              "description": "Indicates whether the component is disabled.\nWhen the component is disabled for user interaction; it is not focusable or clickable.",
+              "default": "undefined",
+              "fieldName": "disabled",
               "inheritedFrom": {
-                "name": "Popover",
-                "module": "src/components/popover/popover.component.ts"
+                "name": "FormfieldWrapper",
+                "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
               }
             },
             {
-              "name": "append-to",
+              "name": "label",
               "type": {
-                "text": "string"
+                "text": "string | undefined"
               },
-              "default": "''",
-              "description": "Element ID that the popover append to.",
-              "fieldName": "appendTo",
+              "description": "The label of the input field. It is linked to the input field using the `for` attribute.",
+              "fieldName": "label",
               "inheritedFrom": {
-                "name": "Popover",
-                "module": "src/components/popover/popover.component.ts"
+                "name": "FormfieldWrapper",
+                "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
               }
             },
             {
-              "name": "close-button-aria-label",
+              "name": "required",
               "type": {
-                "text": "string | null"
+                "text": "boolean"
               },
-              "default": "null",
-              "description": "aria-label attribute to be set for close button accessibility.",
-              "fieldName": "closeButtonAriaLabel",
+              "default": "false",
+              "description": "The required attribute to indicate that the input field is required.\nIt is used to append a required indicator (*) to the label.",
+              "fieldName": "required",
               "inheritedFrom": {
-                "name": "Popover",
-                "module": "src/components/popover/popover.component.ts"
+                "name": "FormfieldWrapper",
+                "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
               }
             },
             {
-              "name": "role",
+              "name": "id",
               "type": {
-                "text": "HTMLElement['role']"
+                "text": "string"
               },
-              "description": "Role of the popover",
-              "default": "dialog",
-              "fieldName": "role",
+              "default": "''",
+              "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": "src/components/popover/popover.component.ts"
+                "name": "FormfieldWrapper",
+                "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
               }
             },
             {
-              "name": "aria-labelledby",
+              "name": "help-text-type",
               "type": {
-                "text": "string | null"
+                "text": "ValidationType"
               },
-              "default": "null",
-              "description": "aria-labelledby for an interactive popover only, defaults to the trigger component id.\nUsed in nested cases where the triggerComponent isn't the actual button.",
-              "fieldName": "ariaLabelledby",
+              "description": "The type of help text. It can be 'default', 'error', 'warning', 'success', 'priority'.",
+              "fieldName": "helpTextType",
               "inheritedFrom": {
-                "name": "Popover",
-                "module": "src/components/popover/popover.component.ts"
+                "name": "FormfieldWrapper",
+                "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
               }
             },
             {
-              "name": "aria-describedby",
+              "name": "help-text",
               "type": {
-                "text": "string | null"
+                "text": "string | undefined"
               },
-              "default": "null",
-              "description": "aria-describedby of the popover.",
-              "fieldName": "ariaDescribedby",
+              "description": "The help text that is displayed below the input field.",
+              "fieldName": "helpText",
               "inheritedFrom": {
-                "name": "Popover",
-                "module": "src/components/popover/popover.component.ts"
+                "name": "FormfieldWrapper",
+                "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
               }
+            }
+          ],
+          "mixins": [
+            {
+              "name": "FormInternalsMixin",
+              "module": "/src/utils/mixins/FormInternalsMixin"
             },
             {
-              "name": "disable-aria-expanded",
-              "type": {
-                "text": "boolean"
-              },
-              "description": "Disable aria-expanded attribute on trigger element.\nMake sure to set this to false when the popover is interactive.",
-              "default": "false",
-              "fieldName": "disableAriaExpanded",
-              "inheritedFrom": {
-                "name": "Popover",
-                "module": "src/components/popover/popover.component.ts"
-              }
+              "name": "DataAriaLabelMixin",
+              "module": "/src/utils/mixins/DataAriaLabelMixin"
             }
           ],
           "superclass": {
-            "name": "Popover",
-            "module": "/src/components/popover/popover.component"
+            "name": "FormfieldWrapper",
+            "module": "/src/components/formfieldwrapper"
           },
-          "tagName": "mdc-toggletip",
-          "jsDoc": "/**\n * A toggletip is triggered by clicking a trigger element.\n *\n * It can contain interactive content and can be closed by\n * clicking outside the toggletip or pressing the escape key.\n *\n * It can have optional close button to close the toggletip.\n *\n * Toggletip component uses `mdc-screenreaderannouncer` internally to\n * announce the toggletip text content with screen readers when the toggletip is shown.\n *\n * `screenreader-announcer-identity` attribute can be used to provide ID of an element\n * in DOM to which announcement elements are added. If not set, a visually hidden\n * div element is created in DOM to which announcement elements are added.\n *\n * Please refer to the `mdc-screenreaderannouncer` component for more details.\n *\n * @dependency mdc-screenreaderannouncer\n * @dependency mdc-button\n *\n * @tagname mdc-toggletip\n *\n * @event shown - (React: onShown) This event is dispatched when the toggletip is shown\n * @event hidden - (React: onHidden) This event is dispatched when the toggletip is hidden\n * @event created - (React: onCreated) This event is dispatched when the toggletip is created (added to the DOM)\n * @event destroyed - (React: onDestroyed) This event is dispatched when the toggletip\n * is destroyed (removed from the DOM)\n *\n * @cssproperty --mdc-toggletip-max-width - The maximum width of the toggletip.\n * @cssproperty --mdc-toggletip-text-color - The text color of the toggletip.\n * @cssproperty --mdc-toggletip-text-color-contrast - The text color of the toggletip\n *  when the color is contrast.\n *\n * @slot - Default slot for the toggletip content\n */",
-          "customElement": true
+          "tagName": "mdc-textarea",
+          "jsDoc": "/**\n * mdc-textarea component, which is used to get the multi-line text input from the user.\n * It contains:\n * - label: It is the title of the textarea field.\n * - required: A boolean attribute depicting that the textarea field is required.\n * - Textarea: It is the multi-line text input field.\n * - helper-text: It is the text that provides additional information about the textarea field.\n * - max-character-limit: It is the text that shows the character count of the textarea field.\n * - Error, Warning, Success, Priority Help Text type: It is the text that provides additional information\n *   about the textarea field based on the validation state.\n * - limitexceeded: It is the event that is dispatched when the character limit exceeds or restored.\n *   This event exposes 3 properties:\n *   - currentCharacterCount - the current number of characters in the textarea field,\n *   - maxCharacterLimit - the maximum number of characters allowed in the textarea field,\n *   - value - the current value of the textarea field,\n *\n * **Note**: Consumers must set the help-text-type with 'error' and\n * help-text attribute with the error message using limitexceeded event.\n * The same help-text value will be used for the validation message to be displayed.\n *\n * @tagname mdc-textarea\n *\n * @event input - (React: onInput) This event is dispatched when the value of the textarea field changes (every press).\n * @event change - (React: onChange) This event is dispatched when the value of the textarea field changes (on blur).\n * @event focus - (React: onFocus) This event is dispatched when the textarea receives focus.\n * @event blur - (React: onBlur) This event is dispatched when the textarea loses focus.\n * @event limitexceeded - (React: onLimitExceeded) This event is dispatched once when the character limit\n * exceeds or restored.\n *\n *\n * @dependency mdc-icon\n * @dependency mdc-text\n * @dependency mdc-button\n *\n * @cssproperty --mdc-textarea-disabled-border-color - Border color for the textarea container when disabled\n * @cssproperty --mdc-textarea-disabled-text-color - Text color for the textarea field when disabled\n * @cssproperty --mdc-textarea-disabled-background-color - Background color for the textarea field when disabled\n * @cssproperty --mdc-textarea-text-color - Text color for the textarea field\n * @cssproperty --mdc-textarea-background-color - Background color for the textarea field\n * @cssproperty --mdc-textarea-border-color - Border color for the textarea field\n * @cssproperty --mdc-textarea-text-secondary-normal - Text color for the character counter\n * @cssproperty --mdc-textarea-error-border-color - Border color for the error related help text\n * @cssproperty --mdc-textarea-warning-border-color - Border color for the warning related help text\n * @cssproperty --mdc-textarea-success-border-color - Border color for the success related help text\n * @cssproperty --mdc-textarea-primary-border-color - Border color for the priority related help text\n * @cssproperty --mdc-textarea-hover-background-color - Background color for the textarea container when hover\n * @cssproperty --mdc-textarea-focused-background-color - Background color for the textarea container when focused\n * @cssproperty --mdc-textarea-focused-border-color - Border color for the textarea container when focused\n */",
+          "customElement": true,
+          "slots": [
+            {
+              "description": "slot to add the label info icon",
+              "name": "label-info",
+              "inheritedFrom": {
+                "name": "FormfieldWrapper",
+                "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
+              }
+            }
+          ]
         }
       ],
       "exports": [
@@ -31310,8 +31310,8 @@
           "kind": "js",
           "name": "default",
           "declaration": {
-            "name": "ToggleTip",
-            "module": "components/toggletip/toggletip.component.js"
+            "name": "Textarea",
+            "module": "components/textarea/textarea.component.js"
           }
         }
       ]