@momentum-design/components 0.104.7 → 0.104.8

package/dist/custom-elements.json

@@ -23120,6 +23120,11 @@
               "description": "(React: onChange) This event is dispatched when a `menuitemcheckbox`, or `menuitemradio` changes.",
               "name": "change",
               "reactName": "onChange"
+            },
+            {
+              "description": "(React: onAction) This event is dispatched when a `menuitem` selected.",
+              "name": "action",
+              "reactName": "onAction"
             }
           ],
           "attributes": [
@@ -23170,7 +23175,7 @@
             "module": "/src/models"
           },
           "tagName": "mdc-menusection",
-          "jsDoc": "/**\n * `mdc-menusection` is a container element used to group a set of menu items.\n *\n * This component supports a mix of `menuitem`, `menuitemcheckbox`, and `menuitemradio` components.\n *\n * - If multiple `menuitemradio` components are slotted into the section, the group enforces a single-selection rule:\n *   only one radio item can be selected at a time.\n * - If `menuitemcheckbox` components are included, their checked state can be toggled independently.\n *\n * @tagname mdc-menusection\n *\n * @slot - Default slot for inserting `menuitem`, `menuitemcheckbox`, or `menuitemradio`\n *\n * @event change - (React: onChange) This event is dispatched when a `menuitemcheckbox`, or `menuitemradio` changes.\n */",
+          "jsDoc": "/**\n * `mdc-menusection` is a container element used to group a set of menu items.\n *\n * This component supports a mix of `menuitem`, `menuitemcheckbox`, and `menuitemradio` components.\n *\n * - If multiple `menuitemradio` components are slotted into the section, the group enforces a single-selection rule:\n *   only one radio item can be selected at a time.\n * - If `menuitemcheckbox` components are included, their checked state can be toggled independently.\n *\n * @tagname mdc-menusection\n *\n * @slot - Default slot for inserting `menuitem`, `menuitemcheckbox`, or `menuitemradio`\n *\n * @event change - (React: onChange) This event is dispatched when a `menuitemcheckbox`, or `menuitemradio` changes.\n * @event action - (React: onAction) This event is dispatched when a `menuitem` selected.\n */",
           "customElement": true
         }
       ],
@@ -36121,486 +36126,916 @@
     },
     {
       "kind": "javascript-module",
-      "path": "components/themeprovider/themeprovider.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",
-          "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": "Option to override the font weight, default: `400`",
-              "name": "--mdc-themeprovider-font-weight"
-            },
-            {
-              "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": "Option to override the font feature settings, default: `\"ss02\" on`",
-              "name": "--mdc-themeprovider-font-feature-settings"
-            },
-            {
-              "description": "Option to override the color of the scrollbar track.",
-              "name": "--mdc-themeprovider-scrollbar-track-color"
-            },
-            {
-              "description": "Option to override the color of the scrollbar thumb.",
-              "name": "--mdc-themeprovider-scrollbar-thumb-color"
-            }
-          ],
-          "slots": [
-            {
-              "description": "children",
-              "name": ""
-            }
-          ],
-          "members": [
-            {
-              "kind": "field",
-              "name": "Context",
-              "privacy": "public",
-              "static": true,
-              "description": "Context object of the ThemeProvider, to be consumed by child components",
-              "readonly": true
-            },
-            {
-              "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"
-            },
-            {
-              "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"
-            },
-            {
-              "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."
-            }
-          ],
-          "attributes": [
-            {
-              "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'",
-              "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 */",
-          "customElement": true
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "default",
-          "declaration": {
-            "name": "ThemeProvider",
-            "module": "components/themeprovider/themeprovider.component.js"
-          }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "components/toast/toast.component.js",
+      "path": "components/textarea/textarea.component.js",
       "declarations": [
         {
           "kind": "class",
-          "description": "`mdc-toast` is a lightweight, non-blocking alert used to inform users about application processes.\nIt supports success, warning, error, and custom messages, and is designed to be controlled externally.\n\n**Note**: When using `slot=\"toast-body-normal\"` and `slot=\"toast-body-detailed\"`, it's strongly recommended to wrap the content with `<mdc-text tagname=\"span\">`.\nIf not used, ensure your custom content is styled appropriately to match the design and alignment expectations of the toast component.",
-          "name": "Toast",
+          "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": "Background color of the toast.",
-              "name": "--mdc-toast-background-color"
-            },
-            {
-              "description": "Border color of the toast.",
-              "name": "--mdc-toast-border-color"
-            },
-            {
-              "description": "Color of the header text in the toast.",
-              "name": "--mdc-toast-header-text-color"
-            },
-            {
-              "description": "Color of the icon in the toast.",
-              "name": "--mdc-toast-icon-color"
-            },
-            {
-              "description": "Elevation effect applied to the toast.",
-              "name": "--mdc-toast-elevation-3"
+              "description": "Border color for the textarea container when disabled",
+              "name": "--mdc-textarea-disabled-border-color"
             },
             {
-              "description": "Width of the toast.",
-              "name": "--mdc-toast-width"
+              "description": "Text color for the textarea field when disabled",
+              "name": "--mdc-textarea-disabled-text-color"
             },
             {
-              "description": "Padding inside the toast.",
-              "name": "--mdc-toast-padding"
-            }
-          ],
-          "cssParts": [
-            {
-              "description": "The container for the toast's main content, including icon, text, and close button.",
-              "name": "content-container"
+              "description": "Background color for the textarea field when disabled",
+              "name": "--mdc-textarea-disabled-background-color"
             },
             {
-              "description": "The icon shown at the start of the toast, styled by variant.",
-              "name": "toast-prefix-icon"
+              "description": "Text color for the textarea field",
+              "name": "--mdc-textarea-text-color"
             },
             {
-              "description": "The container for the header and body content of the toast.",
-              "name": "toast-content"
+              "description": "Background color for the textarea field",
+              "name": "--mdc-textarea-background-color"
             },
             {
-              "description": "The header text of the toast.",
-              "name": "toast-header"
+              "description": "Border color for the textarea field",
+              "name": "--mdc-textarea-border-color"
             },
             {
-              "description": "The container for the toast's footer, including toggle and action buttons.",
-              "name": "footer"
+              "description": "Text color for the character counter",
+              "name": "--mdc-textarea-text-secondary-normal"
             },
             {
-              "description": "The toggle button for showing/hiding detailed content.",
-              "name": "footer-button-toggle"
+              "description": "Border color for the error related help text",
+              "name": "--mdc-textarea-error-border-color"
             },
             {
-              "description": "The close button for the toast.",
-              "name": "toast-close-btn"
-            }
-          ],
-          "slots": [
-            {
-              "description": "Slot for custom content before the icon (only for custom variant).",
-              "name": "content-prefix"
+              "description": "Border color for the warning related help text",
+              "name": "--mdc-textarea-warning-border-color"
             },
             {
-              "description": "Slot for the main body content of the toast.",
-              "name": "toast-body-normal"
+              "description": "Border color for the success related help text",
+              "name": "--mdc-textarea-success-border-color"
             },
             {
-              "description": "Slot for additional detailed content, shown when expanded.",
-              "name": "toast-body-detailed"
+              "description": "Border color for the priority related help text",
+              "name": "--mdc-textarea-primary-border-color"
             },
             {
-              "description": "Slot for custom footer content. Prefer using footer-button-primary and footer-button-secondary slots.",
-              "name": "footer"
+              "description": "Background color for the textarea container when hover",
+              "name": "--mdc-textarea-hover-background-color"
             },
             {
-              "description": "Slot for passing the primary variant of `mdc-button` in the footer.",
-              "name": "footer-button-primary"
+              "description": "Background color for the textarea container when focused",
+              "name": "--mdc-textarea-focused-background-color"
             },
             {
-              "description": "Slot for passing the secondary variant of `mdc-button` in the footer.",
-              "name": "footer-button-secondary"
+              "description": "Border color for the textarea container when focused",
+              "name": "--mdc-textarea-focused-border-color"
             }
           ],
           "members": [
             {
               "kind": "field",
-              "name": "variant",
+              "name": "placeholder",
               "type": {
-                "text": "ToastVariant"
+                "text": "string | undefined"
               },
-              "description": "Type of toast\n- Can be `custom`, `success`, `warning` or `error`.",
-              "default": "'custom'",
-              "attribute": "variant",
-              "reflects": true
+              "description": "The placeholder text that is displayed when the textarea field is empty.",
+              "attribute": "placeholder"
             },
             {
               "kind": "field",
-              "name": "closeButtonAriaLabel",
+              "name": "readonly",
               "type": {
-                "text": "string | undefined"
+                "text": "boolean"
               },
-              "description": "Defines aria-label attribute for close button accessibility",
-              "attribute": "close-button-aria-label"
+              "default": "false",
+              "description": "readonly attribute of the textarea field. If true, the textarea field is read-only.",
+              "attribute": "readonly"
             },
             {
               "kind": "field",
-              "name": "headerText",
+              "name": "rows",
               "type": {
-                "text": "string | undefined"
+                "text": "number | undefined"
               },
-              "description": "Defines a string value to display as the title of the toast",
-              "attribute": "header-text",
-              "reflects": true
+              "description": "The rows attribute specifies the visible number of lines in a text area.",
+              "default": "5",
+              "attribute": "rows"
             },
             {
               "kind": "field",
-              "name": "headerTagName",
+              "name": "cols",
               "type": {
-                "text": "TagName"
+                "text": "number | undefined"
               },
-              "description": "The html tag to be used for the header text",
-              "default": "'h2'",
-              "attribute": "header-tag-name",
-              "reflects": true
+              "description": "The cols attribute specifies the visible number of lines in a text area.",
+              "default": "40",
+              "attribute": "cols"
             },
             {
               "kind": "field",
-              "name": "ariaLabel",
+              "name": "wrap",
               "type": {
-                "text": "string | null"
+                "text": "WrapType"
               },
-              "default": "null",
-              "description": "Defines aria-label attribute when header is not used",
-              "attribute": "aria-label",
-              "reflects": true
+              "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": "showMoreText",
+              "name": "autocapitalize",
               "type": {
-                "text": "string | undefined"
+                "text": "AutoCapitalizeType"
               },
-              "description": "Defines the text shown on the linkbutton when detailed content is hidden.",
-              "attribute": "show-more-text",
-              "reflects": true
+              "description": "The autocapitalize attribute of the textarea field.",
+              "default": "'off'",
+              "attribute": "autocapitalize"
             },
             {
               "kind": "field",
-              "name": "showLessText",
+              "name": "autocomplete",
               "type": {
-                "text": "string | undefined"
+                "text": "AutoCompleteType"
               },
-              "description": "Defines the text shown on the linkbutton when detailed content is visible.",
-              "attribute": "show-less-text",
-              "reflects": true
+              "description": "The autocomplete attribute of the textarea field.",
+              "default": "'off'",
+              "attribute": "autocomplete"
             },
             {
               "kind": "field",
-              "name": "isDetailVisible",
+              "name": "autofocus",
               "type": {
                 "text": "boolean"
               },
-              "privacy": "private",
-              "default": "false"
+              "default": "false",
+              "description": "If true, the textarea field is focused when the component is rendered.",
+              "attribute": "autofocus"
             },
             {
               "kind": "field",
-              "name": "hasDetailedSlot",
+              "name": "dirname",
               "type": {
-                "text": "boolean"
+                "text": "string | undefined"
               },
-              "privacy": "private",
-              "default": "false"
+              "description": "Specifies the name of the directionality of text for submission purposes (e.g., \"rtl\" for right-to-left).",
+              "attribute": "dirname"
             },
             {
               "kind": "field",
-              "name": "detailedElements",
+              "name": "maxlength",
               "type": {
-                "text": "HTMLElement[]"
+                "text": "number | undefined"
               },
-              "privacy": "private"
+              "description": "The maximum number of characters that the textarea field can accept.",
+              "attribute": "maxlength"
             },
             {
               "kind": "field",
-              "name": "hasFooterButtons",
+              "name": "minlength",
               "type": {
-                "text": "string"
+                "text": "number | undefined"
               },
-              "privacy": "private",
-              "default": "''"
+              "description": "The minimum number of characters that the textarea field can accept.",
+              "attribute": "minlength"
             },
             {
-              "kind": "method",
-              "name": "closeToast",
-              "privacy": "private",
-              "description": "Fired when Close Button is clicked using mouse or keyboard.\nThis method dispatches the close event.\nIt is used to notify that the toast should be closed."
+              "kind": "field",
+              "name": "maxCharacterLimit",
+              "type": {
+                "text": "number | undefined"
+              },
+              "description": "maximum character limit for the textarea field for character counter.",
+              "attribute": "max-character-limit"
             },
             {
-              "kind": "method",
-              "name": "toggleDetailVisibility",
-              "privacy": "private"
+              "kind": "field",
+              "name": "characterLimitExceedingFired",
+              "type": {
+                "text": "boolean"
+              },
+              "privacy": "private",
+              "default": "false"
             },
             {
-              "kind": "method",
-              "name": "updateDetailedSlotPresence",
-              "privacy": "private"
+              "kind": "field",
+              "name": "textarea",
+              "type": {
+                "text": "HTMLTextAreaElement"
+              },
+              "privacy": "protected",
+              "readonly": true
             },
             {
               "kind": "method",
-              "name": "updateFooterButtonsPresence",
+              "name": "setTextareaValidity",
               "privacy": "private"
             },
             {
               "kind": "method",
-              "name": "renderIcon",
-              "privacy": "protected",
-              "parameters": [
-                {
-                  "name": "iconName",
-                  "type": {
-                    "text": "string"
-                  }
+              "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": "method",
-              "name": "shouldRenderToggleButton",
-              "privacy": "private"
+              }
             },
             {
               "kind": "method",
-              "name": "renderToggleDetailButton",
-              "privacy": "private"
+              "name": "dispatchCharacterOverflowStateChangeEvent",
+              "privacy": "private",
+              "description": "Dispatches the character overflow state change event.",
+              "return": {
+                "type": {
+                  "text": ""
+                }
+              }
             },
             {
               "kind": "method",
-              "name": "renderHeader",
-              "privacy": "protected"
+              "name": "handleCharacterOverflowStateChange",
+              "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": ""
+                }
+              }
             },
             {
               "kind": "method",
-              "name": "handleFooterSlot",
-              "privacy": "protected",
+              "name": "updateValue",
+              "privacy": "private",
+              "description": "Updates the value of the textarea field.\nSets the form value.",
               "return": {
                 "type": {
-                  "text": "void"
+                  "text": ""
                 }
-              },
+              }
+            },
+            {
+              "kind": "method",
+              "name": "onChange",
+              "privacy": "private",
               "parameters": [
                 {
-                  "name": "tagname",
-                  "type": {
-                    "text": "string"
-                  }
-                },
-                {
-                  "name": "variant",
-                  "optional": true,
+                  "name": "event",
                   "type": {
-                    "text": "string | undefined"
-                  }
+                    "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": "renderFooter",
-              "privacy": "protected",
-              "description": "Renders the footer of the card if footer-link,\nfooter-button-primary, or footer-button-secondary slots are provided",
-              "return": {
-                "type": {
-                  "text": ""
-                }
-              },
-              "inheritedFrom": {
-                "name": "FooterMixin",
-                "module": "utils/mixins/FooterMixin.js"
-              }
-            }
-          ],
-          "events": [
+              "name": "renderCharacterCounter",
+              "privacy": "protected"
+            },
             {
-              "description": "(React: onClose) Dispatched when the Close Button is clicked using mouse or keyboard.",
-              "name": "close",
-              "reactName": "onClose"
-            }
-          ],
-          "attributes": [
+              "kind": "method",
+              "name": "renderTextareaFooter",
+              "privacy": "protected"
+            },
             {
-              "name": "variant",
+              "kind": "field",
+              "name": "name",
               "type": {
-                "text": "ToastVariant"
+                "text": "string"
               },
-              "description": "Type of toast\n- Can be `custom`, `success`, `warning` or `error`.",
-              "default": "'custom'",
-              "fieldName": "variant"
+              "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": "FormInternalsMixin",
+                "module": "utils/mixins/FormInternalsMixin.js"
+              }
             },
             {
-              "name": "close-button-aria-label",
+              "kind": "field",
+              "name": "value",
               "type": {
-                "text": "string | undefined"
+                "text": "string"
               },
-              "description": "Defines aria-label attribute for close button accessibility",
-              "fieldName": "closeButtonAriaLabel"
+              "default": "''",
+              "description": "Indicates the value of the component group (ex: input, checkbox, radio, select etc...)",
+              "attribute": "value",
+              "reflects": true,
+              "inheritedFrom": {
+                "name": "FormInternalsMixin",
+                "module": "utils/mixins/FormInternalsMixin.js"
+              }
             },
             {
-              "name": "header-text",
+              "kind": "field",
+              "name": "validationMessage",
               "type": {
                 "text": "string | undefined"
               },
-              "description": "Defines a string value to display as the title of the toast",
-              "fieldName": "headerText"
+              "description": "Custom validation message that will override the default message and displayed when the input is invalid.\n\nTo display custom validation messages, you must listen for input events (or other relevant events)\non your component and update the `validationMessage` property with the desired message string.\nUpdating this property will ensure that new validation messages are shown to the user.\n- The `validationMessage` property overrides the default browser validation message when set.\n- Consumers are responsible for updating `validationMessage` in response to input or validation state changes.",
+              "attribute": "validation-message",
+              "reflects": true,
+              "inheritedFrom": {
+                "name": "FormInternalsMixin",
+                "module": "utils/mixins/FormInternalsMixin.js"
+              }
             },
             {
-              "name": "header-tag-name",
+              "kind": "field",
+              "name": "validity",
               "type": {
-                "text": "TagName"
+                "text": "ValidityState"
               },
-              "description": "The html tag to be used for the header text",
-              "default": "'h2'",
-              "fieldName": "headerTagName"
+              "readonly": true,
+              "inheritedFrom": {
+                "name": "FormInternalsMixin",
+                "module": "utils/mixins/FormInternalsMixin.js"
+              }
             },
             {
-              "name": "aria-label",
-              "type": {
-                "text": "string | null"
-              },
-              "default": "null",
-              "description": "Defines aria-label attribute when header is not used",
-              "fieldName": "ariaLabel"
+              "kind": "field",
+              "name": "willValidate",
+              "readonly": true,
+              "inheritedFrom": {
+                "name": "FormInternalsMixin",
+                "module": "utils/mixins/FormInternalsMixin.js"
+              }
             },
             {
-              "name": "show-more-text",
-              "type": {
-                "text": "string | undefined"
-              },
-              "description": "Defines the text shown on the linkbutton when detailed content is hidden.",
-              "fieldName": "showMoreText"
+              "kind": "method",
+              "name": "setValidity",
+              "description": "Sets the validity of the input field based on the input field's validity.",
+              "return": {
+                "type": {
+                  "text": ""
+                }
+              },
+              "inheritedFrom": {
+                "name": "FormInternalsMixin",
+                "module": "utils/mixins/FormInternalsMixin.js"
+              }
+            },
+            {
+              "kind": "method",
+              "name": "checkValidity",
+              "return": {
+                "type": {
+                  "text": "boolean"
+                }
+              },
+              "inheritedFrom": {
+                "name": "FormInternalsMixin",
+                "module": "utils/mixins/FormInternalsMixin.js"
+              }
+            },
+            {
+              "kind": "method",
+              "name": "reportValidity",
+              "inheritedFrom": {
+                "name": "FormInternalsMixin",
+                "module": "utils/mixins/FormInternalsMixin.js"
+              }
+            },
+            {
+              "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": "DataAriaLabelMixin",
+                "module": "utils/mixins/DataAriaLabelMixin.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,
+              "inheritedFrom": {
+                "name": "FormfieldWrapper",
+                "module": "components/formfieldwrapper/formfieldwrapper.component.js"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "label",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "The label of the input field. It is linked to the input field using the `for` attribute.",
+              "attribute": "label",
+              "reflects": true,
+              "inheritedFrom": {
+                "name": "FormfieldWrapper",
+                "module": "components/formfieldwrapper/formfieldwrapper.component.js"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "required",
+              "type": {
+                "text": "boolean"
+              },
+              "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",
+              "reflects": true,
+              "inheritedFrom": {
+                "name": "FormfieldWrapper",
+                "module": "components/formfieldwrapper/formfieldwrapper.component.js"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "id",
+              "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",
+              "inheritedFrom": {
+                "name": "FormfieldWrapper",
+                "module": "components/formfieldwrapper/formfieldwrapper.component.js"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "helpTextType",
+              "type": {
+                "text": "ValidationType"
+              },
+              "description": "The type of help text. It can be 'default', 'error', 'warning', 'success', 'priority'.",
+              "attribute": "help-text-type",
+              "reflects": true,
+              "inheritedFrom": {
+                "name": "FormfieldWrapper",
+                "module": "components/formfieldwrapper/formfieldwrapper.component.js"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "helpText",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "The help text that is displayed below the input field.",
+              "attribute": "help-text",
+              "reflects": true,
+              "inheritedFrom": {
+                "name": "FormfieldWrapper",
+                "module": "components/formfieldwrapper/formfieldwrapper.component.js"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "toggletipText",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "The toggletip text that is displayed when the label is hovered.\nIt is used to provide additional information about the label.",
+              "attribute": "toggletip-text",
+              "reflects": true,
+              "inheritedFrom": {
+                "name": "FormfieldWrapper",
+                "module": "components/formfieldwrapper/formfieldwrapper.component.js"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "toggletipPlacement",
+              "type": {
+                "text": "PopoverPlacement"
+              },
+              "description": "The placement of the toggletip that is displayed when the info icon is hovered.",
+              "default": "'top'",
+              "attribute": "toggletip-placement",
+              "reflects": true,
+              "inheritedFrom": {
+                "name": "FormfieldWrapper",
+                "module": "components/formfieldwrapper/formfieldwrapper.component.js"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "infoIconAriaLabel",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "Aria label for the info icon that is displayed next to the label when `toggletipText` is set.\nThis is used for accessibility purposes to provide a description of the icon.",
+              "attribute": "info-icon-aria-label",
+              "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"
+              }
+            },
+            {
+              "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": [
+            {
+              "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).",
+              "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"
+              },
+              "default": "false",
+              "description": "readonly attribute of the textarea field. If true, the textarea field is read-only.",
+              "fieldName": "readonly"
+            },
+            {
+              "name": "rows",
+              "type": {
+                "text": "number | undefined"
+              },
+              "description": "The rows attribute specifies the visible number of lines in a text area.",
+              "default": "5",
+              "fieldName": "rows"
+            },
+            {
+              "name": "cols",
+              "type": {
+                "text": "number | undefined"
+              },
+              "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": "autocomplete",
+              "type": {
+                "text": "AutoCompleteType"
+              },
+              "description": "The autocomplete attribute of the textarea field.",
+              "default": "'off'",
+              "fieldName": "autocomplete"
+            },
+            {
+              "name": "autofocus",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "If true, the textarea field is focused when the component is rendered.",
+              "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": {
+                "text": "string"
+              },
+              "default": "''",
+              "description": "Indicates the name of the component group.\nThey are used to group elements in a form together.",
+              "fieldName": "name",
+              "inheritedFrom": {
+                "name": "FormInternalsMixin",
+                "module": "src/utils/mixins/FormInternalsMixin.ts"
+              }
+            },
+            {
+              "name": "value",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "description": "Indicates the value of the component group (ex: input, checkbox, radio, select etc...)",
+              "fieldName": "value",
+              "inheritedFrom": {
+                "name": "FormInternalsMixin",
+                "module": "src/utils/mixins/FormInternalsMixin.ts"
+              }
+            },
+            {
+              "name": "validation-message",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "Custom validation message that will override the default message and displayed when the input is invalid.\n\nTo display custom validation messages, you must listen for input events (or other relevant events)\non your component and update the `validationMessage` property with the desired message string.\nUpdating this property will ensure that new validation messages are shown to the user.\n- The `validationMessage` property overrides the default browser validation message when set.\n- Consumers are responsible for updating `validationMessage` in response to input or validation state changes.",
+              "fieldName": "validationMessage",
+              "inheritedFrom": {
+                "name": "FormInternalsMixin",
+                "module": "src/utils/mixins/FormInternalsMixin.ts"
+              }
+            },
+            {
+              "name": "data-aria-label",
+              "type": {
+                "text": "string | null"
+              },
+              "default": "null",
+              "description": "Defines a string value that labels the current element.\nThe Aria-Label attribute to be set for accessibility.",
+              "fieldName": "dataAriaLabel",
+              "inheritedFrom": {
+                "name": "DataAriaLabelMixin",
+                "module": "src/utils/mixins/DataAriaLabelMixin.ts"
+              }
+            },
+            {
+              "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",
+              "fieldName": "disabled",
+              "inheritedFrom": {
+                "name": "FormfieldWrapper",
+                "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
+              }
+            },
+            {
+              "name": "label",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "The label of the input field. It is linked to the input field using the `for` attribute.",
+              "fieldName": "label",
+              "inheritedFrom": {
+                "name": "FormfieldWrapper",
+                "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
+              }
+            },
+            {
+              "name": "required",
+              "type": {
+                "text": "boolean"
+              },
+              "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": "FormfieldWrapper",
+                "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
+              }
+            },
+            {
+              "name": "id",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "description": "The unique id of the input field. It is used to link the input field with the label.",
+              "fieldName": "id",
+              "inheritedFrom": {
+                "name": "FormfieldWrapper",
+                "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
+              }
+            },
+            {
+              "name": "help-text-type",
+              "type": {
+                "text": "ValidationType"
+              },
+              "description": "The type of help text. It can be 'default', 'error', 'warning', 'success', 'priority'.",
+              "fieldName": "helpTextType",
+              "inheritedFrom": {
+                "name": "FormfieldWrapper",
+                "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
+              }
+            },
+            {
+              "name": "help-text",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "The help text that is displayed below the input field.",
+              "fieldName": "helpText",
+              "inheritedFrom": {
+                "name": "FormfieldWrapper",
+                "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
+              }
+            },
+            {
+              "name": "toggletip-text",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "The toggletip text that is displayed when the label is hovered.\nIt is used to provide additional information about the label.",
+              "fieldName": "toggletipText",
+              "inheritedFrom": {
+                "name": "FormfieldWrapper",
+                "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
+              }
             },
             {
-              "name": "show-less-text",
+              "name": "toggletip-placement",
+              "type": {
+                "text": "PopoverPlacement"
+              },
+              "description": "The placement of the toggletip that is displayed when the info icon is hovered.",
+              "default": "'top'",
+              "fieldName": "toggletipPlacement",
+              "inheritedFrom": {
+                "name": "FormfieldWrapper",
+                "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
+              }
+            },
+            {
+              "name": "info-icon-aria-label",
               "type": {
                 "text": "string | undefined"
               },
-              "description": "Defines the text shown on the linkbutton when detailed content is visible.",
-              "fieldName": "showLessText"
+              "description": "Aria label for the info icon that is displayed next to the label when `toggletipText` is set.\nThis is used for accessibility purposes to provide a description of the icon.",
+              "fieldName": "infoIconAriaLabel",
+              "inheritedFrom": {
+                "name": "FormfieldWrapper",
+                "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
+              }
             }
           ],
           "mixins": [
             {
-              "name": "FooterMixin",
-              "module": "/src/utils/mixins/FooterMixin"
+              "name": "FormInternalsMixin",
+              "module": "/src/utils/mixins/FormInternalsMixin"
+            },
+            {
+              "name": "DataAriaLabelMixin",
+              "module": "/src/utils/mixins/DataAriaLabelMixin"
             }
           ],
           "superclass": {
-            "name": "Component",
-            "module": "/src/models"
+            "name": "FormfieldWrapper",
+            "module": "/src/components/formfieldwrapper"
           },
-          "tagName": "mdc-toast",
-          "jsDoc": "/**\n * `mdc-toast` is a lightweight, non-blocking alert used to inform users about application processes.\n * It supports success, warning, error, and custom messages, and is designed to be controlled externally.\n * \n * **Note**: When using `slot=\"toast-body-normal\"` and `slot=\"toast-body-detailed\"`, it's strongly recommended to wrap the content with `<mdc-text tagname=\"span\">`.\n * If not used, ensure your custom content is styled appropriately to match the design and alignment expectations of the toast component.\n * \n * @dependency mdc-icon\n * @dependency mdc-text\n * @dependency mdc-button\n * @dependency mdc-linkbutton\n *\n * @slot content-prefix - Slot for custom content before the icon (only for custom variant).\n * @slot toast-body-normal - Slot for the main body content of the toast.\n * @slot toast-body-detailed - Slot for additional detailed content, shown when expanded.\n * @slot footer - Slot for custom footer content. Prefer using footer-button-primary and footer-button-secondary slots.\n * @slot footer-button-primary - Slot for passing the primary variant of `mdc-button` in the footer.\n * @slot footer-button-secondary - Slot for passing the secondary variant of `mdc-button` in the footer.\n *\n * @tagname mdc-toast\n * \n * @event close - (React: onClose) Dispatched when the Close Button is clicked using mouse or keyboard.\n *\n * @csspart content-container - The container for the toast's main content, including icon, text, and close button.\n * @csspart toast-prefix-icon - The icon shown at the start of the toast, styled by variant.\n * @csspart toast-content - The container for the header and body content of the toast.\n * @csspart toast-header - The header text of the toast.\n * @csspart footer - The container for the toast's footer, including toggle and action buttons.\n * @csspart footer-button-toggle - The toggle button for showing/hiding detailed content.\n * @csspart toast-close-btn - The close button for the toast.\n *\n * @cssproperty --mdc-toast-background-color - Background color of the toast.\n * @cssproperty --mdc-toast-border-color - Border color of the toast.\n * @cssproperty --mdc-toast-header-text-color - Color of the header text in the toast.\n * @cssproperty --mdc-toast-icon-color - Color of the icon in the toast.\n * @cssproperty --mdc-toast-elevation-3 - Elevation effect applied to the toast.\n * @cssproperty --mdc-toast-width - Width of the toast.\n * @cssproperty --mdc-toast-padding - Padding inside the toast.\n */",
+          "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 * @dependency mdc-button\n * @dependency mdc-icon\n * @dependency mdc-text\n * @dependency mdc-toggletip\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
         }
       ],
@@ -36609,725 +37044,494 @@
           "kind": "js",
           "name": "default",
           "declaration": {
-            "name": "Toast",
-            "module": "components/toast/toast.component.js"
+            "name": "Textarea",
+            "module": "components/textarea/textarea.component.js"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "components/toggle/toggle.component.js",
+      "path": "components/themeprovider/themeprovider.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",
+          "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": "Width of the toggle",
-              "name": "--mdc-toggle-width"
-            },
-            {
-              "description": "Height of the toggle",
-              "name": "--mdc-toggle-height"
+              "description": "Option to override the default color, default: color-theme-text-primary-normal",
+              "name": "--mdc-themeprovider-color-default"
             },
             {
-              "description": "Width of the toggle when it's size is compact",
-              "name": "--mdc-toggle-width-compact"
+              "description": "Option to override the font family, default: `Momentum` (from momentum-design/fonts)",
+              "name": "--mdc-themeprovider-font-family"
             },
             {
-              "description": "Height of the toggle when it's size is compact",
-              "name": "--mdc-toggle-height-compact"
+              "description": "Option to override the font weight, default: `400`",
+              "name": "--mdc-themeprovider-font-weight"
             },
             {
-              "description": "Line height of the toggle label",
-              "name": "--mdc-toggle-label-lineheight"
+              "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": "Font size of the toggle label",
-              "name": "--mdc-toggle-label-fontsize"
+              "description": "Option to override the font feature settings, default: `\"ss02\" on`",
+              "name": "--mdc-themeprovider-font-feature-settings"
             },
             {
-              "description": "Font weight of the toggle label",
-              "name": "--mdc-toggle-label-fontweight"
+              "description": "Option to override the color of the scrollbar track.",
+              "name": "--mdc-themeprovider-scrollbar-track-color"
             },
             {
-              "description": "Color of the toggle label and help text in disabled state",
-              "name": "--mdc-toggle-label-color-disabled"
-            },
+              "description": "Option to override the color of the scrollbar thumb.",
+              "name": "--mdc-themeprovider-scrollbar-thumb-color"
+            }
+          ],
+          "slots": [
             {
-              "description": "Color of the help text label",
-              "name": "--mdc-toggle-help-text-color"
-            },
+              "description": "children",
+              "name": ""
+            }
+          ],
+          "members": [
             {
-              "description": "Background color of the active toggle in hover state",
-              "name": "--mdc-toggle-active-hover-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 of the active toggle in pressed state",
-              "name": "--mdc-toggle-active-pressed-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 of the inactive toggle in hover state",
-              "name": "--mdc-toggle-inactive-hover-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": "Background color of the inactive toggle in pressed state",
-              "name": "--mdc-toggle-inactive-pressed-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": "checked",
+              "name": "themeclass",
               "type": {
-                "text": "boolean"
+                "text": "string"
               },
-              "default": "false",
-              "description": "Determines whether the toggle is active or inactive.",
-              "attribute": "checked",
-              "reflects": true
+              "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 */",
+          "customElement": true
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "default",
+          "declaration": {
+            "name": "ThemeProvider",
+            "module": "components/themeprovider/themeprovider.component.js"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "components/toast/toast.component.js",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "`mdc-toast` is a lightweight, non-blocking alert used to inform users about application processes.\nIt supports success, warning, error, and custom messages, and is designed to be controlled externally.\n\n**Note**: When using `slot=\"toast-body-normal\"` and `slot=\"toast-body-detailed\"`, it's strongly recommended to wrap the content with `<mdc-text tagname=\"span\">`.\nIf not used, ensure your custom content is styled appropriately to match the design and alignment expectations of the toast component.",
+          "name": "Toast",
+          "cssProperties": [
+            {
+              "description": "Background color of the toast.",
+              "name": "--mdc-toast-background-color"
             },
             {
-              "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
+              "description": "Border color of the toast.",
+              "name": "--mdc-toast-border-color"
             },
             {
-              "kind": "field",
-              "name": "autofocus",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "Automatically focus on the element when the page loads.\n[MDN Reference](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/autofocus)",
-              "attribute": "autofocus",
-              "reflects": true
+              "description": "Color of the header text in the toast.",
+              "name": "--mdc-toast-header-text-color"
             },
             {
-              "kind": "method",
-              "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."
+              "description": "Color of the icon in the toast.",
+              "name": "--mdc-toast-icon-color"
             },
             {
-              "kind": "method",
-              "name": "setFormValue",
-              "privacy": "private",
-              "description": "Updates the form value to reflect the current state of the toggle.\nIf toggle is switched on, the value is set to either the user-provided value or 'isActive' if no value is provided.\nIf toggle is switched off, the value is set to null."
+              "description": "Elevation effect applied to the toast.",
+              "name": "--mdc-toast-elevation-3"
             },
             {
-              "kind": "method",
-              "name": "toggleState",
-              "privacy": "private",
-              "return": {
-                "type": {
-                  "text": "void"
-                }
-              },
-              "description": "Toggles the state of the toggle element.\nIf the element is not disabled, then the checked property is toggled."
+              "description": "Width of the toast.",
+              "name": "--mdc-toast-width"
             },
             {
-              "kind": "method",
-              "name": "handleKeyDown",
-              "privacy": "private",
-              "return": {
-                "type": {
-                  "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."
+              "description": "Padding inside the toast.",
+              "name": "--mdc-toast-padding"
+            }
+          ],
+          "cssParts": [
+            {
+              "description": "The container for the toast's main content, including icon, text, and close button.",
+              "name": "content-container"
+            },
+            {
+              "description": "The icon shown at the start of the toast, styled by variant.",
+              "name": "toast-prefix-icon"
             },
             {
-              "kind": "method",
-              "name": "handleChange",
-              "privacy": "private",
-              "parameters": [
-                {
-                  "name": "event",
-                  "type": {
-                    "text": "Event"
-                  }
-                }
-              ],
-              "description": "Toggles the state of the toggle element.\nand dispatch the new change event."
+              "description": "The container for the header and body content of the toast.",
+              "name": "toast-content"
             },
             {
-              "kind": "method",
-              "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."
+              "description": "The header text of the toast.",
+              "name": "toast-header"
             },
             {
-              "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,
-              "inheritedFrom": {
-                "name": "FormInternalsMixin",
-                "module": "utils/mixins/FormInternalsMixin.js"
-              }
+              "description": "The container for the toast's footer, including toggle and action buttons.",
+              "name": "footer"
             },
             {
-              "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,
-              "inheritedFrom": {
-                "name": "FormInternalsMixin",
-                "module": "utils/mixins/FormInternalsMixin.js"
-              }
+              "description": "The toggle button for showing/hiding detailed content.",
+              "name": "footer-button-toggle"
             },
             {
-              "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.\n\nTo display custom validation messages, you must listen for input events (or other relevant events)\non your component and update the `validationMessage` property with the desired message string.\nUpdating this property will ensure that new validation messages are shown to the user.\n- The `validationMessage` property overrides the default browser validation message when set.\n- Consumers are responsible for updating `validationMessage` in response to input or validation state changes.",
-              "attribute": "validation-message",
-              "reflects": true,
-              "inheritedFrom": {
-                "name": "FormInternalsMixin",
-                "module": "utils/mixins/FormInternalsMixin.js"
-              }
-            },
+              "description": "The close button for the toast.",
+              "name": "toast-close-btn"
+            }
+          ],
+          "slots": [
             {
-              "kind": "field",
-              "name": "validity",
-              "type": {
-                "text": "ValidityState"
-              },
-              "readonly": true,
-              "inheritedFrom": {
-                "name": "FormInternalsMixin",
-                "module": "utils/mixins/FormInternalsMixin.js"
-              }
+              "description": "Slot for custom content before the icon (only for custom variant).",
+              "name": "content-prefix"
             },
             {
-              "kind": "field",
-              "name": "willValidate",
-              "readonly": true,
-              "inheritedFrom": {
-                "name": "FormInternalsMixin",
-                "module": "utils/mixins/FormInternalsMixin.js"
-              }
+              "description": "Slot for the main body content of the toast.",
+              "name": "toast-body-normal"
             },
             {
-              "kind": "method",
-              "name": "setValidity",
-              "description": "Sets the validity of the input field based on the input field's validity.",
-              "return": {
-                "type": {
-                  "text": ""
-                }
-              },
-              "inheritedFrom": {
-                "name": "FormInternalsMixin",
-                "module": "utils/mixins/FormInternalsMixin.js"
-              }
+              "description": "Slot for additional detailed content, shown when expanded.",
+              "name": "toast-body-detailed"
             },
             {
-              "kind": "method",
-              "name": "checkValidity",
-              "return": {
-                "type": {
-                  "text": "boolean"
-                }
-              },
-              "inheritedFrom": {
-                "name": "FormInternalsMixin",
-                "module": "utils/mixins/FormInternalsMixin.js"
-              }
+              "description": "Slot for custom footer content. Prefer using footer-button-primary and footer-button-secondary slots.",
+              "name": "footer"
             },
             {
-              "kind": "method",
-              "name": "reportValidity",
-              "inheritedFrom": {
-                "name": "FormInternalsMixin",
-                "module": "utils/mixins/FormInternalsMixin.js"
-              }
+              "description": "Slot for passing the primary variant of `mdc-button` in the footer.",
+              "name": "footer-button-primary"
             },
+            {
+              "description": "Slot for passing the secondary variant of `mdc-button` in the footer.",
+              "name": "footer-button-secondary"
+            }
+          ],
+          "members": [
             {
               "kind": "field",
-              "name": "dataAriaLabel",
+              "name": "variant",
               "type": {
-                "text": "string | null"
+                "text": "ToastVariant"
               },
-              "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"
-              }
+              "description": "Type of toast\n- Can be `custom`, `success`, `warning` or `error`.",
+              "default": "'custom'",
+              "attribute": "variant",
+              "reflects": true
             },
             {
               "kind": "field",
-              "name": "disabled",
+              "name": "closeButtonAriaLabel",
               "type": {
-                "text": "boolean | undefined"
+                "text": "string | 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,
-              "inheritedFrom": {
-                "name": "FormfieldWrapper",
-                "module": "components/formfieldwrapper/formfieldwrapper.component.js"
-              }
+              "description": "Defines aria-label attribute for close button accessibility",
+              "attribute": "close-button-aria-label"
             },
             {
               "kind": "field",
-              "name": "label",
+              "name": "headerText",
               "type": {
                 "text": "string | undefined"
               },
-              "description": "The label of the input field. It is linked to the input field using the `for` attribute.",
-              "attribute": "label",
-              "reflects": true,
-              "inheritedFrom": {
-                "name": "FormfieldWrapper",
-                "module": "components/formfieldwrapper/formfieldwrapper.component.js"
-              }
+              "description": "Defines a string value to display as the title of the toast",
+              "attribute": "header-text",
+              "reflects": true
             },
             {
               "kind": "field",
-              "name": "required",
+              "name": "headerTagName",
               "type": {
-                "text": "boolean"
+                "text": "TagName"
               },
-              "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",
-              "reflects": true,
-              "inheritedFrom": {
-                "name": "FormfieldWrapper",
-                "module": "components/formfieldwrapper/formfieldwrapper.component.js"
-              }
+              "description": "The html tag to be used for the header text",
+              "default": "'h2'",
+              "attribute": "header-tag-name",
+              "reflects": true
             },
             {
               "kind": "field",
-              "name": "id",
+              "name": "ariaLabel",
               "type": {
-                "text": "string"
+                "text": "string | null"
               },
-              "default": "''",
-              "description": "The unique id of the input field. It is used to link the input field with the label.",
-              "attribute": "id",
-              "inheritedFrom": {
-                "name": "FormfieldWrapper",
-                "module": "components/formfieldwrapper/formfieldwrapper.component.js"
-              }
+              "default": "null",
+              "description": "Defines aria-label attribute when header is not used",
+              "attribute": "aria-label",
+              "reflects": true
             },
             {
               "kind": "field",
-              "name": "helpTextType",
+              "name": "showMoreText",
               "type": {
-                "text": "ValidationType"
+                "text": "string | undefined"
               },
-              "description": "The type of help text. It can be 'default', 'error', 'warning', 'success', 'priority'.",
-              "attribute": "help-text-type",
-              "reflects": true,
-              "inheritedFrom": {
-                "name": "FormfieldWrapper",
-                "module": "components/formfieldwrapper/formfieldwrapper.component.js"
-              }
+              "description": "Defines the text shown on the linkbutton when detailed content is hidden.",
+              "attribute": "show-more-text",
+              "reflects": true
             },
             {
               "kind": "field",
-              "name": "helpText",
+              "name": "showLessText",
               "type": {
                 "text": "string | undefined"
               },
-              "description": "The help text that is displayed below the input field.",
-              "attribute": "help-text",
-              "reflects": true,
-              "inheritedFrom": {
-                "name": "FormfieldWrapper",
-                "module": "components/formfieldwrapper/formfieldwrapper.component.js"
-              }
+              "description": "Defines the text shown on the linkbutton when detailed content is visible.",
+              "attribute": "show-less-text",
+              "reflects": true
             },
             {
               "kind": "field",
-              "name": "toggletipText",
+              "name": "isDetailVisible",
               "type": {
-                "text": "string | undefined"
+                "text": "boolean"
               },
-              "description": "The toggletip text that is displayed when the label is hovered.\nIt is used to provide additional information about the label.",
-              "attribute": "toggletip-text",
-              "reflects": true,
-              "inheritedFrom": {
-                "name": "FormfieldWrapper",
-                "module": "components/formfieldwrapper/formfieldwrapper.component.js"
-              }
+              "privacy": "private",
+              "default": "false"
+            },
+            {
+              "kind": "field",
+              "name": "hasDetailedSlot",
+              "type": {
+                "text": "boolean"
+              },
+              "privacy": "private",
+              "default": "false"
             },
             {
               "kind": "field",
-              "name": "toggletipPlacement",
+              "name": "detailedElements",
               "type": {
-                "text": "PopoverPlacement"
+                "text": "HTMLElement[]"
               },
-              "description": "The placement of the toggletip that is displayed when the info icon is hovered.",
-              "default": "'top'",
-              "attribute": "toggletip-placement",
-              "reflects": true,
-              "inheritedFrom": {
-                "name": "FormfieldWrapper",
-                "module": "components/formfieldwrapper/formfieldwrapper.component.js"
-              }
+              "privacy": "private"
             },
             {
               "kind": "field",
-              "name": "infoIconAriaLabel",
+              "name": "hasFooterButtons",
               "type": {
-                "text": "string | undefined"
+                "text": "string"
               },
-              "description": "Aria label for the info icon that is displayed next to the label when `toggletipText` is set.\nThis is used for accessibility purposes to provide a description of the icon.",
-              "attribute": "info-icon-aria-label",
-              "reflects": true,
-              "inheritedFrom": {
-                "name": "FormfieldWrapper",
-                "module": "components/formfieldwrapper/formfieldwrapper.component.js"
-              }
+              "privacy": "private",
+              "default": "''"
             },
             {
               "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"
-              }
+              "name": "closeToast",
+              "privacy": "private",
+              "description": "Fired when Close Button is clicked using mouse or keyboard.\nThis method dispatches the close event.\nIt is used to notify that the toast should be closed."
             },
             {
               "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"
-              }
+              "name": "toggleDetailVisibility",
+              "privacy": "private"
             },
             {
               "kind": "method",
-              "name": "renderHelpText",
+              "name": "updateDetailedSlotPresence",
+              "privacy": "private"
+            },
+            {
+              "kind": "method",
+              "name": "updateFooterButtonsPresence",
+              "privacy": "private"
+            },
+            {
+              "kind": "method",
+              "name": "renderIcon",
               "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": ""
+              "parameters": [
+                {
+                  "name": "iconName",
+                  "type": {
+                    "text": "string"
+                  }
                 }
-              },
-              "inheritedFrom": {
-                "name": "FormfieldWrapper",
-                "module": "components/formfieldwrapper/formfieldwrapper.component.js"
-              }
+              ]
             },
             {
               "kind": "method",
-              "name": "renderLabel",
+              "name": "shouldRenderToggleButton",
+              "privacy": "private"
+            },
+            {
+              "kind": "method",
+              "name": "renderToggleDetailButton",
+              "privacy": "private"
+            },
+            {
+              "kind": "method",
+              "name": "renderHeader",
+              "privacy": "protected"
+            },
+            {
+              "kind": "method",
+              "name": "handleFooterSlot",
               "privacy": "protected",
-              "description": "renders the mdc-label-text container that contains the label and labelInfoToggleTip.",
               "return": {
                 "type": {
-                  "text": ""
+                  "text": "void"
                 }
               },
-              "inheritedFrom": {
-                "name": "FormfieldWrapper",
-                "module": "components/formfieldwrapper/formfieldwrapper.component.js"
-              }
+              "parameters": [
+                {
+                  "name": "tagname",
+                  "type": {
+                    "text": "string"
+                  }
+                },
+                {
+                  "name": "variant",
+                  "optional": true,
+                  "type": {
+                    "text": "string | undefined"
+                  }
+                }
+              ]
             },
             {
               "kind": "method",
-              "name": "renderHelperText",
+              "name": "renderFooter",
               "privacy": "protected",
-              "description": "renders the mdc-help-text container that contains the helpertext icon and helpertext.",
+              "description": "Renders the footer of the card if footer-link,\nfooter-button-primary, or footer-button-secondary slots are provided",
               "return": {
                 "type": {
                   "text": ""
                 }
               },
               "inheritedFrom": {
-                "name": "FormfieldWrapper",
-                "module": "components/formfieldwrapper/formfieldwrapper.component.js"
+                "name": "FooterMixin",
+                "module": "utils/mixins/FooterMixin.js"
               }
             }
           ],
           "events": [
             {
-              "type": {
-                "text": "EventConstructor"
-              }
-            },
-            {
-              "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"
+              "description": "(React: onClose) Dispatched when the Close Button is clicked using mouse or keyboard.",
+              "name": "close",
+              "reactName": "onClose"
             }
           ],
           "attributes": [
             {
-              "name": "checked",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "Determines whether the toggle is active or inactive.",
-              "fieldName": "checked"
-            },
-            {
-              "name": "size",
-              "type": {
-                "text": "ToggleSize"
-              },
-              "description": "Determines toggle size in rem (height is specified here).\n- **Default**: 1.5\n- **Compact**: 1",
-              "default": "default",
-              "fieldName": "size"
-            },
-            {
-              "name": "autofocus",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "Automatically focus on the element when the page loads.\n[MDN Reference](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/autofocus)",
-              "fieldName": "autofocus"
-            },
-            {
-              "name": "name",
-              "type": {
-                "text": "string"
-              },
-              "default": "''",
-              "description": "Indicates the name of the component group.\nThey are used to group elements in a form together.",
-              "fieldName": "name",
-              "inheritedFrom": {
-                "name": "FormInternalsMixin",
-                "module": "src/utils/mixins/FormInternalsMixin.ts"
-              }
-            },
-            {
-              "name": "value",
-              "type": {
-                "text": "string"
-              },
-              "default": "''",
-              "description": "Indicates the value of the component group (ex: input, checkbox, radio, select etc...)",
-              "fieldName": "value",
-              "inheritedFrom": {
-                "name": "FormInternalsMixin",
-                "module": "src/utils/mixins/FormInternalsMixin.ts"
-              }
-            },
-            {
-              "name": "validation-message",
-              "type": {
-                "text": "string | undefined"
-              },
-              "description": "Custom validation message that will override the default message and displayed when the input is invalid.\n\nTo display custom validation messages, you must listen for input events (or other relevant events)\non your component and update the `validationMessage` property with the desired message string.\nUpdating this property will ensure that new validation messages are shown to the user.\n- The `validationMessage` property overrides the default browser validation message when set.\n- Consumers are responsible for updating `validationMessage` in response to input or validation state changes.",
-              "fieldName": "validationMessage",
-              "inheritedFrom": {
-                "name": "FormInternalsMixin",
-                "module": "src/utils/mixins/FormInternalsMixin.ts"
-              }
-            },
-            {
-              "name": "data-aria-label",
-              "type": {
-                "text": "string | null"
-              },
-              "default": "null",
-              "description": "Defines a string value that labels the current element.\nThe Aria-Label attribute to be set for accessibility.",
-              "fieldName": "dataAriaLabel",
-              "inheritedFrom": {
-                "name": "DataAriaLabelMixin",
-                "module": "src/utils/mixins/DataAriaLabelMixin.ts"
-              }
-            },
-            {
-              "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",
-              "fieldName": "disabled",
-              "inheritedFrom": {
-                "name": "FormfieldWrapper",
-                "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
-              }
-            },
-            {
-              "name": "label",
-              "type": {
-                "text": "string | undefined"
-              },
-              "description": "The label of the input field. It is linked to the input field using the `for` attribute.",
-              "fieldName": "label",
-              "inheritedFrom": {
-                "name": "FormfieldWrapper",
-                "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
-              }
-            },
-            {
-              "name": "required",
+              "name": "variant",
               "type": {
-                "text": "boolean"
+                "text": "ToastVariant"
               },
-              "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": "FormfieldWrapper",
-                "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
-              }
+              "description": "Type of toast\n- Can be `custom`, `success`, `warning` or `error`.",
+              "default": "'custom'",
+              "fieldName": "variant"
             },
             {
-              "name": "id",
+              "name": "close-button-aria-label",
               "type": {
-                "text": "string"
+                "text": "string | undefined"
               },
-              "default": "''",
-              "description": "The unique id of the input field. It is used to link the input field with the label.",
-              "fieldName": "id",
-              "inheritedFrom": {
-                "name": "FormfieldWrapper",
-                "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
-              }
+              "description": "Defines aria-label attribute for close button accessibility",
+              "fieldName": "closeButtonAriaLabel"
             },
             {
-              "name": "help-text-type",
+              "name": "header-text",
               "type": {
-                "text": "ValidationType"
+                "text": "string | undefined"
               },
-              "description": "The type of help text. It can be 'default', 'error', 'warning', 'success', 'priority'.",
-              "fieldName": "helpTextType",
-              "inheritedFrom": {
-                "name": "FormfieldWrapper",
-                "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
-              }
+              "description": "Defines a string value to display as the title of the toast",
+              "fieldName": "headerText"
             },
             {
-              "name": "help-text",
+              "name": "header-tag-name",
               "type": {
-                "text": "string | undefined"
+                "text": "TagName"
               },
-              "description": "The help text that is displayed below the input field.",
-              "fieldName": "helpText",
-              "inheritedFrom": {
-                "name": "FormfieldWrapper",
-                "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
-              }
+              "description": "The html tag to be used for the header text",
+              "default": "'h2'",
+              "fieldName": "headerTagName"
             },
             {
-              "name": "toggletip-text",
+              "name": "aria-label",
               "type": {
-                "text": "string | undefined"
+                "text": "string | null"
               },
-              "description": "The toggletip text that is displayed when the label is hovered.\nIt is used to provide additional information about the label.",
-              "fieldName": "toggletipText",
-              "inheritedFrom": {
-                "name": "FormfieldWrapper",
-                "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
-              }
+              "default": "null",
+              "description": "Defines aria-label attribute when header is not used",
+              "fieldName": "ariaLabel"
             },
             {
-              "name": "toggletip-placement",
+              "name": "show-more-text",
               "type": {
-                "text": "PopoverPlacement"
+                "text": "string | undefined"
               },
-              "description": "The placement of the toggletip that is displayed when the info icon is hovered.",
-              "default": "'top'",
-              "fieldName": "toggletipPlacement",
-              "inheritedFrom": {
-                "name": "FormfieldWrapper",
-                "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
-              }
+              "description": "Defines the text shown on the linkbutton when detailed content is hidden.",
+              "fieldName": "showMoreText"
             },
             {
-              "name": "info-icon-aria-label",
+              "name": "show-less-text",
               "type": {
                 "text": "string | undefined"
               },
-              "description": "Aria label for the info icon that is displayed next to the label when `toggletipText` is set.\nThis is used for accessibility purposes to provide a description of the icon.",
-              "fieldName": "infoIconAriaLabel",
-              "inheritedFrom": {
-                "name": "FormfieldWrapper",
-                "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
-              }
+              "description": "Defines the text shown on the linkbutton when detailed content is visible.",
+              "fieldName": "showLessText"
             }
           ],
           "mixins": [
             {
-              "name": "FormInternalsMixin",
-              "module": "/src/utils/mixins/FormInternalsMixin"
-            },
-            {
-              "name": "DataAriaLabelMixin",
-              "module": "/src/utils/mixins/DataAriaLabelMixin"
+              "name": "FooterMixin",
+              "module": "/src/utils/mixins/FooterMixin"
             }
           ],
           "superclass": {
-            "name": "FormfieldWrapper",
-            "module": "/src/components/formfieldwrapper"
+            "name": "Component",
+            "module": "/src/models"
           },
-          "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-button\n * @dependency mdc-icon\n * @dependency mdc-statictoggle\n * @dependency mdc-text\n * @dependency mdc-toggletip\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 */",
+          "tagName": "mdc-toast",
+          "jsDoc": "/**\n * `mdc-toast` is a lightweight, non-blocking alert used to inform users about application processes.\n * It supports success, warning, error, and custom messages, and is designed to be controlled externally.\n * \n * **Note**: When using `slot=\"toast-body-normal\"` and `slot=\"toast-body-detailed\"`, it's strongly recommended to wrap the content with `<mdc-text tagname=\"span\">`.\n * If not used, ensure your custom content is styled appropriately to match the design and alignment expectations of the toast component.\n * \n * @dependency mdc-icon\n * @dependency mdc-text\n * @dependency mdc-button\n * @dependency mdc-linkbutton\n *\n * @slot content-prefix - Slot for custom content before the icon (only for custom variant).\n * @slot toast-body-normal - Slot for the main body content of the toast.\n * @slot toast-body-detailed - Slot for additional detailed content, shown when expanded.\n * @slot footer - Slot for custom footer content. Prefer using footer-button-primary and footer-button-secondary slots.\n * @slot footer-button-primary - Slot for passing the primary variant of `mdc-button` in the footer.\n * @slot footer-button-secondary - Slot for passing the secondary variant of `mdc-button` in the footer.\n *\n * @tagname mdc-toast\n * \n * @event close - (React: onClose) Dispatched when the Close Button is clicked using mouse or keyboard.\n *\n * @csspart content-container - The container for the toast's main content, including icon, text, and close button.\n * @csspart toast-prefix-icon - The icon shown at the start of the toast, styled by variant.\n * @csspart toast-content - The container for the header and body content of the toast.\n * @csspart toast-header - The header text of the toast.\n * @csspart footer - The container for the toast's footer, including toggle and action buttons.\n * @csspart footer-button-toggle - The toggle button for showing/hiding detailed content.\n * @csspart toast-close-btn - The close button for the toast.\n *\n * @cssproperty --mdc-toast-background-color - Background color of the toast.\n * @cssproperty --mdc-toast-border-color - Border color of the toast.\n * @cssproperty --mdc-toast-header-text-color - Color of the header text in the toast.\n * @cssproperty --mdc-toast-icon-color - Color of the icon in the toast.\n * @cssproperty --mdc-toast-elevation-3 - Elevation effect applied to the toast.\n * @cssproperty --mdc-toast-width - Width of the toast.\n * @cssproperty --mdc-toast-padding - Padding inside the toast.\n */",
           "customElement": true
         }
       ],
@@ -37336,284 +37540,179 @@
           "kind": "js",
           "name": "default",
           "declaration": {
-            "name": "Toggle",
-            "module": "components/toggle/toggle.component.js"
+            "name": "Toast",
+            "module": "components/toast/toast.component.js"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "components/textarea/textarea.component.js",
+      "path": "components/toggle/toggle.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": "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": "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"
-            },
-            {
-              "description": "Border color for the warning related help text",
-              "name": "--mdc-textarea-warning-border-color"
-            },
-            {
-              "description": "Border color for the success related help text",
-              "name": "--mdc-textarea-success-border-color"
-            },
-            {
-              "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": "Width of the toggle",
+              "name": "--mdc-toggle-width"
             },
             {
-              "description": "Border color for the textarea container when focused",
-              "name": "--mdc-textarea-focused-border-color"
-            }
-          ],
-          "members": [
-            {
-              "kind": "field",
-              "name": "placeholder",
-              "type": {
-                "text": "string | undefined"
-              },
-              "description": "The placeholder text that is displayed when the textarea field is empty.",
-              "attribute": "placeholder"
+              "description": "Height of the toggle",
+              "name": "--mdc-toggle-height"
             },
             {
-              "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": "Width of the toggle when it's size is compact",
+              "name": "--mdc-toggle-width-compact"
             },
             {
-              "kind": "field",
-              "name": "rows",
-              "type": {
-                "text": "number | undefined"
-              },
-              "description": "The rows attribute specifies the visible number of lines in a text area.",
-              "default": "5",
-              "attribute": "rows"
+              "description": "Height of the toggle when it's size is compact",
+              "name": "--mdc-toggle-height-compact"
             },
             {
-              "kind": "field",
-              "name": "cols",
-              "type": {
-                "text": "number | undefined"
-              },
-              "description": "The cols attribute specifies the visible number of lines in a text area.",
-              "default": "40",
-              "attribute": "cols"
+              "description": "Line height of the toggle label",
+              "name": "--mdc-toggle-label-lineheight"
             },
             {
-              "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": "Font size of the toggle label",
+              "name": "--mdc-toggle-label-fontsize"
             },
             {
-              "kind": "field",
-              "name": "autocapitalize",
-              "type": {
-                "text": "AutoCapitalizeType"
-              },
-              "description": "The autocapitalize attribute of the textarea field.",
-              "default": "'off'",
-              "attribute": "autocapitalize"
+              "description": "Font weight of the toggle label",
+              "name": "--mdc-toggle-label-fontweight"
             },
             {
-              "kind": "field",
-              "name": "autocomplete",
-              "type": {
-                "text": "AutoCompleteType"
-              },
-              "description": "The autocomplete attribute of the textarea field.",
-              "default": "'off'",
-              "attribute": "autocomplete"
+              "description": "Color of the toggle label and help text in disabled state",
+              "name": "--mdc-toggle-label-color-disabled"
             },
             {
-              "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 help text label",
+              "name": "--mdc-toggle-help-text-color"
             },
-            {
-              "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": "Background color of the active toggle in hover state",
+              "name": "--mdc-toggle-active-hover-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 pressed state",
+              "name": "--mdc-toggle-active-pressed-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 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",
@@ -37936,102 +38035,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",
-              "type": {
-                "text": "number | undefined"
-              },
-              "description": "The rows attribute specifies the visible number of lines in a text area.",
-              "default": "5",
-              "fieldName": "rows"
-            },
-            {
-              "name": "cols",
-              "type": {
-                "text": "number | undefined"
-              },
-              "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",
@@ -38039,41 +38076,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": {
@@ -38252,8 +38257,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 * @dependency mdc-button\n * @dependency mdc-icon\n * @dependency mdc-text\n * @dependency mdc-toggletip\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-button\n * @dependency mdc-icon\n * @dependency mdc-statictoggle\n * @dependency mdc-text\n * @dependency mdc-toggletip\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
         }
       ],
@@ -38262,8 +38267,8 @@
           "kind": "js",
           "name": "default",
           "declaration": {
-            "name": "Textarea",
-            "module": "components/textarea/textarea.component.js"
+            "name": "Toggle",
+            "module": "components/toggle/toggle.component.js"
           }
         }
       ]