@momentum-design/components 0.24.1 → 0.25.0

package/dist/custom-elements.json

@@ -2006,7 +2006,7 @@
       "declarations": [
         {
           "kind": "class",
-          "description": "Checkboxes allow users to select multiple options from a list or turn an item/feature on or off.\nThese are often used in forms, settings, and selections in lists.\n\nA checkbox component contains an optional label and an optional helper text.",
+          "description": "Checkboxes allow users to select multiple options from a list or turn an item/feature on or off.\nThese are often used in forms, settings, and selections in lists.\n\nA checkbox component contains an optional label and an optional helper text.\n\nTo create a group of checkboxes, use the FormFieldGroup component.",
           "name": "Checkbox",
           "cssProperties": [
             {
@@ -2514,7 +2514,7 @@
             "module": "/src/components/formfieldwrapper/formfieldwrapper.component"
           },
           "tagName": "mdc-checkbox",
-          "jsDoc": "/**\n * Checkboxes allow users to select multiple options from a list or turn an item/feature on or off.\n * These are often used in forms, settings, and selections in lists.\n *\n * A checkbox component contains an optional label and an optional helper text.\n *\n * @dependency mdc-icon\n *\n * @tagname mdc-checkbox\n *\n * @cssproperty --mdc-checkbox-background-color-hover - Allows customization of the background color on hover.\n * @cssproperty --mdc-checkbox-border-color - Border color in high contrast.\n * @cssproperty --mdc-checkbox-checked-background-color - Background color for a selected checkbox.\n * @cssproperty --mdc-checkbox-checked-background-color-hover - Background color for a selected checkbox when hovered.\n * @cssproperty --mdc-checkbox-checked-pressed-icon-color - Background color for a selected checkbox when pressed.\n * @cssproperty --mdc-checkbox-disabled-background-color - Background color for a disabled checkbox.\n * @cssproperty --mdc-checkbox-disabled-border-color - Border color for a disabled checkbox.\n * @cssproperty --mdc-checkbox-disabled-checked-icon-color - Background color for a disabled, selected checkbox.\n * @cssproperty --mdc-checkbox-disabled-icon-color - Icon color for a disabled checkbox.\n * @cssproperty --mdc-checkbox-icon-background-color - Background color for an unselected checkbox.\n * @cssproperty --mdc-checkbox-icon-border-color - Default background color for an unselected checkbox.\n * @cssproperty --mdc-checkbox-icon-color - Icon color for an unselected checkbox.\n * @cssproperty --mdc-checkbox-pressed-icon-color - Background color for a selected checkbox when pressed.\n */",
+          "jsDoc": "/**\n * Checkboxes allow users to select multiple options from a list or turn an item/feature on or off.\n * These are often used in forms, settings, and selections in lists.\n *\n * A checkbox component contains an optional label and an optional helper text.\n *\n * To create a group of checkboxes, use the FormFieldGroup component.\n *\n * @dependency mdc-icon\n *\n * @tagname mdc-checkbox\n *\n * @cssproperty --mdc-checkbox-background-color-hover - Allows customization of the background color on hover.\n * @cssproperty --mdc-checkbox-border-color - Border color in high contrast.\n * @cssproperty --mdc-checkbox-checked-background-color - Background color for a selected checkbox.\n * @cssproperty --mdc-checkbox-checked-background-color-hover - Background color for a selected checkbox when hovered.\n * @cssproperty --mdc-checkbox-checked-pressed-icon-color - Background color for a selected checkbox when pressed.\n * @cssproperty --mdc-checkbox-disabled-background-color - Background color for a disabled checkbox.\n * @cssproperty --mdc-checkbox-disabled-border-color - Border color for a disabled checkbox.\n * @cssproperty --mdc-checkbox-disabled-checked-icon-color - Background color for a disabled, selected checkbox.\n * @cssproperty --mdc-checkbox-disabled-icon-color - Icon color for a disabled checkbox.\n * @cssproperty --mdc-checkbox-icon-background-color - Background color for an unselected checkbox.\n * @cssproperty --mdc-checkbox-icon-border-color - Default background color for an unselected checkbox.\n * @cssproperty --mdc-checkbox-icon-color - Icon color for an unselected checkbox.\n * @cssproperty --mdc-checkbox-pressed-icon-color - Background color for a selected checkbox when pressed.\n */",
           "customElement": true,
           "slots": [
             {
@@ -2539,112 +2539,6 @@
         }
       ]
     },
-    {
-      "kind": "javascript-module",
-      "path": "components/checkboxgroup/checkboxgroup.component.js",
-      "declarations": [
-        {
-          "kind": "class",
-          "description": "`mdc-checkboxgroup` component allows you to select multiple options from a predefined list.\nIt is commonly used in forms where multiple selections are required, such as preferences, filters, or categories.\n\nA checkbox group typically consists of multiple checkboxes grouped together,\neach representing a selectable option. You can check or uncheck options based on their preferences.",
-          "name": "Checkboxgroup",
-          "slots": [
-            {
-              "description": "This is a help text slot.",
-              "name": "help-text"
-            },
-            {
-              "description": "This is a default slot for children.",
-              "name": "default"
-            }
-          ],
-          "members": [
-            {
-              "kind": "field",
-              "name": "headerText",
-              "type": {
-                "text": "string | undefined"
-              },
-              "description": "The header text of the checkboxgroup.",
-              "attribute": "header-text"
-            },
-            {
-              "kind": "method",
-              "name": "handleKeyDown",
-              "privacy": "private",
-              "return": {
-                "type": {
-                  "text": "void"
-                }
-              },
-              "parameters": [
-                {
-                  "name": "event",
-                  "type": {
-                    "text": "KeyboardEvent"
-                  },
-                  "description": "The KeyboardEvent"
-                }
-              ],
-              "description": "Handles the keydown event on the parent checkbox in the checkboxgroup.\nWhen the user presses the down arrow key, the focus is moved to the next checkbox in the checkboxgroup.\nWhen the user presses the up arrow key, the focus is moved to the previous checkbox in the checkboxgroup."
-            },
-            {
-              "kind": "method",
-              "name": "navigate",
-              "privacy": "private",
-              "return": {
-                "type": {
-                  "text": "void"
-                }
-              },
-              "parameters": [
-                {
-                  "name": "origin",
-                  "type": {
-                    "text": "EventTarget | null"
-                  },
-                  "description": "The element that triggered the event."
-                },
-                {
-                  "name": "direction",
-                  "type": {
-                    "text": "number"
-                  },
-                  "description": "The direction of navigation, either -1 or 1."
-                }
-              ],
-              "description": "Navigate to the next or previous checkbox in the checkboxgroup based on the given origin and direction."
-            }
-          ],
-          "attributes": [
-            {
-              "name": "header-text",
-              "type": {
-                "text": "string | undefined"
-              },
-              "description": "The header text of the checkboxgroup.",
-              "fieldName": "headerText"
-            }
-          ],
-          "superclass": {
-            "name": "Component",
-            "module": "/src/models"
-          },
-          "tagName": "mdc-checkboxgroup",
-          "jsDoc": "/**\n * `mdc-checkboxgroup` component allows you to select multiple options from a predefined list.\n * It is commonly used in forms where multiple selections are required, such as preferences, filters, or categories.\n *\n * A checkbox group typically consists of multiple checkboxes grouped together,\n * each representing a selectable option. You can check or uncheck options based on their preferences.\n *\n * @dependency mdc-text\n *\n * @tagname mdc-checkboxgroup\n *\n * @slot help-text - This is a help text slot.\n * @slot default - This is a default slot for children.\n */",
-          "customElement": true
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "default",
-          "declaration": {
-            "name": "Checkboxgroup",
-            "module": "components/checkboxgroup/checkboxgroup.component.js"
-          }
-        }
-      ]
-    },
     {
       "kind": "javascript-module",
       "path": "components/divider/divider.component.js",
@@ -2875,6 +2769,151 @@
         }
       ]
     },
+    {
+      "kind": "javascript-module",
+      "path": "components/formfieldgroup/formfieldgroup.component.js",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "`mdc-formfieldgroup` component, groups the form field components together.\nAll passed in children will have a gap of 12px (0.75rem) each applied.\n\nThis component is specifically for creating a `checkbox` group and a `toggle` group component.\nFor the radiogroup use the RadioGroup component instead.\n\nThe header text and description text are displayed above the items with accessible labels.<br/>\nThe consumer has to provide atleast the header-text or the aria-label,\nlike one of them <b>has</b> to be passed in always, otherwise its not accessible.\n\nThe role will be set to `group`.\nThe aria-label will be set with the data-aria-label property.\nThe aria-labelledby will be set with the header id which contains the header text information.\nThe aria-describedby will be set with the description id which contains the description text information.",
+          "name": "FormfieldGroup",
+          "slots": [
+            {
+              "description": "This is a default slot for checkbox or toggle components.",
+              "name": "default"
+            }
+          ],
+          "members": [
+            {
+              "kind": "field",
+              "name": "headerText",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "The header text of the group.",
+              "attribute": "header-text",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "descriptionText",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "The description of the group.",
+              "attribute": "description-text",
+              "reflects": true
+            },
+            {
+              "kind": "method",
+              "name": "renderText",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "TemplateResult | typeof nothing"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "type",
+                  "type": {
+                    "text": "TextType"
+                  }
+                },
+                {
+                  "name": "id",
+                  "type": {
+                    "text": "string"
+                  }
+                },
+                {
+                  "name": "cssPart",
+                  "type": {
+                    "text": "string"
+                  }
+                },
+                {
+                  "name": "value",
+                  "optional": true,
+                  "type": {
+                    "text": "string"
+                  }
+                }
+              ]
+            },
+            {
+              "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"
+              }
+            }
+          ],
+          "attributes": [
+            {
+              "name": "header-text",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "The header text of the group.",
+              "fieldName": "headerText"
+            },
+            {
+              "name": "description-text",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "The description of the group.",
+              "fieldName": "descriptionText"
+            },
+            {
+              "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"
+              }
+            }
+          ],
+          "mixins": [
+            {
+              "name": "DataAriaLabelMixin",
+              "module": "/src/utils/mixins/DataAriaLabelMixin"
+            }
+          ],
+          "superclass": {
+            "name": "Component",
+            "module": "/src/models"
+          },
+          "tagName": "mdc-formfieldgroup",
+          "jsDoc": "/**\n * `mdc-formfieldgroup` component, groups the form field components together.\n * All passed in children will have a gap of 12px (0.75rem) each applied.\n *\n * This component is specifically for creating a `checkbox` group and a `toggle` group component.\n * For the radiogroup use the RadioGroup component instead.\n *\n * The header text and description text are displayed above the items with accessible labels.<br/>\n * The consumer has to provide atleast the header-text or the aria-label,\n * like one of them <b>has</b> to be passed in always, otherwise its not accessible.\n *\n * The role will be set to `group`.\n * The aria-label will be set with the data-aria-label property.\n * The aria-labelledby will be set with the header id which contains the header text information.\n * The aria-describedby will be set with the description id which contains the description text information.\n *\n * @tagname mdc-formfieldgroup\n *\n * @slot default - This is a default slot for checkbox or toggle components.\n */",
+          "customElement": true
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "default",
+          "declaration": {
+            "name": "FormfieldGroup",
+            "module": "components/formfieldgroup/formfieldgroup.component.js"
+          }
+        }
+      ]
+    },
     {
       "kind": "javascript-module",
       "path": "components/formfieldwrapper/formfieldwrapper.component.js",
@@ -4549,126 +4588,55 @@
     },
     {
       "kind": "javascript-module",
-      "path": "components/marker/marker.component.js",
+      "path": "components/modalcontainer/modalcontainer.component.js",
       "declarations": [
         {
           "kind": "class",
-          "description": "`mdc-marker`, which is a vertical line and\nused to draw attention to specific parts of\nthe content or to signify important information.\n\n**Marker Variants**:\n- **solid**: Solid marker.\n- **striped**: Striped marker.",
-          "name": "Marker",
+          "description": "The `mdc-modalcontainer` component is an element used to\ndisplay a modal container that can further be used in popover.",
+          "name": "Modalcontainer",
           "cssProperties": [
             {
-              "description": "Allows customization of the default background color in solid variant.",
-              "name": "--mdc-marker-solid-background-color"
+              "description": "primary background color of the modalcontainer",
+              "name": "--mdc-modalcontainer-primary-background-color"
             },
             {
-              "description": "Allows customization of the default stripes in striped variant.",
-              "name": "--mdc-marker-striped-color"
+              "description": "border color of the modalcontainer",
+              "name": "--mdc-modalcontainer-border-color"
             },
             {
-              "description": "Allows customization of the default background color in striped variant.",
-              "name": "--mdc-marker-striped-background-color"
+              "description": "inverted background color of the modalcontainer",
+              "name": "--mdc-modalcontainer-inverted-background-color"
             },
             {
-              "description": "Allows customization of the default width.",
-              "name": "--mdc-marker-width"
+              "description": "inverted border color of the modalcontainer",
+              "name": "--mdc-modalcontainer-inverted-border-color"
+            },
+            {
+              "description": "inverted text color of the modalcontainer",
+              "name": "--mdc-modalcontainer-inverted-text-color"
+            }
+          ],
+          "slots": [
+            {
+              "description": "Default slot for modal container",
+              "name": ""
             }
           ],
           "members": [
             {
               "kind": "field",
-              "name": "variant",
+              "name": "color",
               "type": {
-                "text": "MarkerVariants"
+                "text": "ModalContainerColor"
               },
-              "privacy": "public",
-              "description": "There are two variants of markers, each with a width of 0.25rem:\n- **solid**: Solid marker.\n- **striped**: Striped marker.",
-              "default": "solid",
-              "attribute": "variant",
+              "description": "Color of the modalcontainer\n- **tonal**\n- **contrast**",
+              "default": "tonal",
+              "attribute": "color",
               "reflects": true
-            }
-          ],
-          "attributes": [
+            },
             {
-              "name": "variant",
-              "type": {
-                "text": "MarkerVariants"
-              },
-              "description": "There are two variants of markers, each with a width of 0.25rem:\n- **solid**: Solid marker.\n- **striped**: Striped marker.",
-              "default": "solid",
-              "fieldName": "variant"
-            }
-          ],
-          "superclass": {
-            "name": "Component",
-            "module": "/src/models"
-          },
-          "tagName": "mdc-marker",
-          "jsDoc": "/**\n * `mdc-marker`, which is a vertical line and\n * used to draw attention to specific parts of\n * the content or to signify important information.\n *\n * **Marker Variants**:\n * - **solid**: Solid marker.\n * - **striped**: Striped marker.\n *\n * @tagname mdc-marker\n *\n * @cssproperty --mdc-marker-solid-background-color - Allows customization of the default background color\n * in solid variant.\n * @cssproperty --mdc-marker-striped-color - Allows customization of the default stripes in striped variant.\n * @cssproperty --mdc-marker-striped-background-color - Allows customization of the default background color\n * in striped variant.\n * @cssproperty --mdc-marker-width - Allows customization of the default width.\n */",
-          "customElement": true
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "default",
-          "declaration": {
-            "name": "Marker",
-            "module": "components/marker/marker.component.js"
-          }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "components/modalcontainer/modalcontainer.component.js",
-      "declarations": [
-        {
-          "kind": "class",
-          "description": "The `mdc-modalcontainer` component is an element used to\ndisplay a modal container that can further be used in popover.",
-          "name": "Modalcontainer",
-          "cssProperties": [
-            {
-              "description": "primary background color of the modalcontainer",
-              "name": "--mdc-modalcontainer-primary-background-color"
-            },
-            {
-              "description": "border color of the modalcontainer",
-              "name": "--mdc-modalcontainer-border-color"
-            },
-            {
-              "description": "inverted background color of the modalcontainer",
-              "name": "--mdc-modalcontainer-inverted-background-color"
-            },
-            {
-              "description": "inverted border color of the modalcontainer",
-              "name": "--mdc-modalcontainer-inverted-border-color"
-            },
-            {
-              "description": "inverted text color of the modalcontainer",
-              "name": "--mdc-modalcontainer-inverted-text-color"
-            }
-          ],
-          "slots": [
-            {
-              "description": "Default slot for modal container",
-              "name": ""
-            }
-          ],
-          "members": [
-            {
-              "kind": "field",
-              "name": "color",
-              "type": {
-                "text": "ModalContainerColor"
-              },
-              "description": "Color of the modalcontainer\n- **tonal**\n- **contrast**",
-              "default": "tonal",
-              "attribute": "color",
-              "reflects": true
-            },
-            {
-              "kind": "field",
-              "name": "elevation",
+              "kind": "field",
+              "name": "elevation",
               "type": {
                 "text": "ModalContainerElevation"
               },
@@ -4909,132 +4877,310 @@
     },
     {
       "kind": "javascript-module",
-      "path": "components/radio/radio.component.js",
+      "path": "components/marker/marker.component.js",
       "declarations": [
         {
           "kind": "class",
-          "description": "Radio allow users to select single options from a list or turn an item/feature on or off.\nThese are often used in forms, settings, and selection in lists.\n\nA radio component contains an optional label, optional info icon and an optional helper text.",
-          "name": "Radio",
+          "description": "`mdc-marker`, which is a vertical line and\nused to draw attention to specific parts of\nthe content or to signify important information.\n\n**Marker Variants**:\n- **solid**: Solid marker.\n- **striped**: Striped marker.",
+          "name": "Marker",
           "cssProperties": [
             {
-              "description": "size of the inner circle",
-              "name": "--mdc-radio-inner-circle-size"
+              "description": "Allows customization of the default background color in solid variant.",
+              "name": "--mdc-marker-solid-background-color"
             },
             {
-              "description": "color of the label when disabled",
-              "name": "--mdc-radio-text-disabled-color"
+              "description": "Allows customization of the default stripes in striped variant.",
+              "name": "--mdc-marker-striped-color"
             },
             {
-              "description": "color of the radio button border when disabled",
-              "name": "--mdc-radio-disabled-border-color"
+              "description": "Allows customization of the default background color in striped variant.",
+              "name": "--mdc-marker-striped-background-color"
             },
             {
-              "description": "color of the radio button border when normal",
-              "name": "--mdc-radio-normal-border-color"
+              "description": "Allows customization of the default width.",
+              "name": "--mdc-marker-width"
+            }
+          ],
+          "members": [
+            {
+              "kind": "field",
+              "name": "variant",
+              "type": {
+                "text": "MarkerVariants"
+              },
+              "privacy": "public",
+              "description": "There are two variants of markers, each with a width of 0.25rem:\n- **solid**: Solid marker.\n- **striped**: Striped marker.",
+              "default": "solid",
+              "attribute": "variant",
+              "reflects": true
+            }
+          ],
+          "attributes": [
+            {
+              "name": "variant",
+              "type": {
+                "text": "MarkerVariants"
+              },
+              "description": "There are two variants of markers, each with a width of 0.25rem:\n- **solid**: Solid marker.\n- **striped**: Striped marker.",
+              "default": "solid",
+              "fieldName": "variant"
+            }
+          ],
+          "superclass": {
+            "name": "Component",
+            "module": "/src/models"
+          },
+          "tagName": "mdc-marker",
+          "jsDoc": "/**\n * `mdc-marker`, which is a vertical line and\n * used to draw attention to specific parts of\n * the content or to signify important information.\n *\n * **Marker Variants**:\n * - **solid**: Solid marker.\n * - **striped**: Striped marker.\n *\n * @tagname mdc-marker\n *\n * @cssproperty --mdc-marker-solid-background-color - Allows customization of the default background color\n * in solid variant.\n * @cssproperty --mdc-marker-striped-color - Allows customization of the default stripes in striped variant.\n * @cssproperty --mdc-marker-striped-background-color - Allows customization of the default background color\n * in striped variant.\n * @cssproperty --mdc-marker-width - Allows customization of the default width.\n */",
+          "customElement": true
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "default",
+          "declaration": {
+            "name": "Marker",
+            "module": "components/marker/marker.component.js"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "components/tab/tab.component.js",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "`mdc-tab` is Tab component to be used within the Tabgroup.\n\nPassing in the attribute `text` to the tab component is changing the text displayed in the tab.\n\nThe `slot=\"badge\"` can be used to add a badge to the tab.\n\nFor `icon`, the `mdc-icon` component is used to render the icon.",
+          "name": "Tab",
+          "cssProperties": [
+            {
+              "description": "Gap between the badge(if provided), icon and text.",
+              "name": "--mdc-tab-content-gap"
             },
             {
-              "description": "background color of the inner circle when normal",
-              "name": "--mdc-radio-inner-circle-normal-background"
+              "description": "Height of the tab.",
+              "name": "--mdc-tab-height"
             },
             {
-              "description": "background color of the inner circle when disabled",
-              "name": "--mdc-radio-inner-circle-disabled-background"
+              "description": "Background color for active glass tab in disabled state.",
+              "name": "--mdc-tab-glass-active-background-color-disabled"
             },
             {
-              "description": "color of the radio button when inactive",
-              "name": "--mdc-radio-control-inactive-color"
+              "description": "Background color for active glass tab in hover state.",
+              "name": "--mdc-tab-glass-active-background-color-hover"
             },
             {
-              "description": "color of the radio button when inactive and hovered",
-              "name": "--mdc-radio-control-inactive-hover"
+              "description": "Background color for active glass tab in rest state.",
+              "name": "--mdc-tab-glass-active-background-color-normal"
             },
             {
-              "description": "color of the radio button when inactive and pressed",
-              "name": "--mdc-radio-control-inactive-pressed-color"
+              "description": "Background color for active glass tab in pressed state.",
+              "name": "--mdc-tab-glass-active-background-color-pressed"
             },
             {
-              "description": "background color of the radio button when inactive and disabled",
-              "name": "--mdc-radio-control-inactive-disabled-background"
+              "description": "Text and icon color for active glass tab.",
+              "name": "--mdc-tab-glass-active-color"
             },
             {
-              "description": "color of the radio button when active",
-              "name": "--mdc-radio-control-active-color"
+              "description": "Text and icon color for active glass tab in disabled state.",
+              "name": "--mdc-tab-glass-active-color-disabled"
             },
             {
-              "description": "color of the radio button when active and hovered",
-              "name": "--mdc-radio-control-active-hover-color"
+              "description": "Border radius for glass tab.",
+              "name": "--mdc-tab-glass-border-radius"
             },
             {
-              "description": "color of the radio button when active and pressed",
-              "name": "--mdc-radio-control-active-pressed-color"
+              "description": "Background color for inactive glass tab in disabled state.",
+              "name": "--mdc-tab-glass-inactive-background-color-disabled"
             },
             {
-              "description": "background color of the radio button when active and disabled",
-              "name": "--mdc-radio-control-active-disabled-background"
-            }
-          ],
-          "members": [
+              "description": "Background color for inactive glass tab in hover state.",
+              "name": "--mdc-tab-glass-inactive-background-color-hover"
+            },
             {
-              "kind": "field",
-              "name": "checked",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "Determines whether the radio is selected or unselected.",
-              "attribute": "checked",
-              "reflects": true
+              "description": "Background color for inactive glass tab in rest state.",
+              "name": "--mdc-tab-glass-inactive-background-color-normal"
             },
             {
-              "kind": "field",
-              "name": "readonly",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "Determines whether the radio is read-only.",
-              "attribute": "readonly",
-              "reflects": true
+              "description": "Background color for inactive glass tab in pressed state.",
+              "name": "--mdc-tab-glass-inactive-background-color-pressed"
             },
             {
-              "kind": "method",
-              "name": "setFormValue",
-              "privacy": "private",
-              "description": "Updates the form value to reflect the current state of the radio.\nIf checked, the value is set to the user-provided value.\nIf unchecked, the value is set to null."
+              "description": "Text and icon color for inactive glass tab.",
+              "name": "--mdc-tab-glass-inactive-color"
             },
             {
-              "kind": "method",
-              "name": "getAllRadiosWithinSameGroup",
-              "privacy": "private",
-              "return": {
-                "type": {
-                  "text": "Radio[]"
-                }
-              },
-              "description": "Returns all radios within the same group (name)."
+              "description": "Text and icon color for inactive glass tab in disabled state.",
+              "name": "--mdc-tab-glass-inactive-color-disabled"
             },
             {
-              "kind": "method",
-              "name": "dispatchChangeEvent",
-              "privacy": "private",
-              "return": {
-                "type": {
-                  "text": "void"
-                }
-              },
-              "parameters": [
-                {
-                  "name": "event",
-                  "type": {
-                    "text": "Event"
-                  }
-                }
-              ],
-              "description": "The '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"
+              "description": "Background color for active line tab in pressed state.",
+              "name": "--mdc-tab-line-active-background-color-pressed"
+            },
+            {
+              "description": "Background color for active line tab in disabled state.",
+              "name": "--mdc-tab-line-active-background-color-disabled"
+            },
+            {
+              "description": "Background color for active line tab in hover state.",
+              "name": "--mdc-tab-line-active-background-color-hover"
+            },
+            {
+              "description": "Background color for active line tab in rest state.",
+              "name": "--mdc-tab-line-active-background-color-normal"
+            },
+            {
+              "description": "Text and icon color for active line tab.",
+              "name": "--mdc-tab-line-active-color"
+            },
+            {
+              "description": "Text and icon color for active line tab in disabled state.",
+              "name": "--mdc-tab-line-active-color-disabled"
+            },
+            {
+              "description": "color for indicator in active line tab.",
+              "name": "--mdc-tab-line-active-indicator-color"
+            },
+            {
+              "description": "Color for indicator in active line tab in disabled state.",
+              "name": "--mdc-tab-line-active-indicator-color-disabled"
+            },
+            {
+              "description": "Height for indicator in active line tab.",
+              "name": "--mdc-tab-line-active-indicator-height"
+            },
+            {
+              "description": "Width for indicator in active line tab.",
+              "name": "--mdc-tab-line-active-indicator-width"
+            },
+            {
+              "description": "Bottom left border radius for line tab.",
+              "name": "--mdc-tab-line-border-bottom-left-radius"
+            },
+            {
+              "description": "Bottom right border radius for line tab.",
+              "name": "--mdc-tab-line-border-bottom-right-radius"
+            },
+            {
+              "description": "Top left border radius for line tab.",
+              "name": "--mdc-tab-line-border-top-left-radius"
+            },
+            {
+              "description": "Top right border radius for line tab.",
+              "name": "--mdc-tab-line-border-top-right-radius"
+            },
+            {
+              "description": "Background color for inactive line tab in pressed state.",
+              "name": "--mdc-tab-line-inactive-background-color-pressed"
+            },
+            {
+              "description": "Background color for inactive line tab in disabled state",
+              "name": "--mdc-tab-line-inactive-background-color-disabled"
+            },
+            {
+              "description": "Background color for inactive line tab in hover state.",
+              "name": "--mdc-tab-line-inactive-background-color-hover"
+            },
+            {
+              "description": "Background color for inactive line tab in rest state.",
+              "name": "--mdc-tab-line-inactive-background-color-normal"
+            },
+            {
+              "description": "Text and icon color for inactive line tab.",
+              "name": "--mdc-tab-line-inactive-color"
+            },
+            {
+              "description": "Text and icon color for inactive line tab in disabled state.",
+              "name": "--mdc-tab-line-inactive-color-disabled"
+            },
+            {
+              "description": "Padding left for the tab.",
+              "name": "--mdc-tab-padding-left"
+            },
+            {
+              "description": "Padding right for the tab.",
+              "name": "--mdc-tab-padding-right"
+            },
+            {
+              "description": "Background color for active pill tab in pressed state.",
+              "name": "--mdc-tab-pill-active-background-color-pressed"
+            },
+            {
+              "description": "Background color for active pill tab in disabled state.",
+              "name": "--mdc-tab-pill-active-background-color-disabled"
+            },
+            {
+              "description": "Background color for active pill tab in hover state.",
+              "name": "--mdc-tab-pill-active-background-color-hover"
+            },
+            {
+              "description": "Background color for active pill tab in rest state.",
+              "name": "--mdc-tab-pill-active-background-color-normal"
+            },
+            {
+              "description": "Text and icon color for active pill tab.",
+              "name": "--mdc-tab-pill-active-color"
+            },
+            {
+              "description": "Text and icon color for active pill tab in disabled state.",
+              "name": "--mdc-tab-pill-active-color-disabled"
+            },
+            {
+              "description": "Border radius for pill tab.",
+              "name": "--mdc-tab-pill-border-radius"
+            },
+            {
+              "description": "Background color for inactive pill tab in pressed state.",
+              "name": "--mdc-tab-pill-inactive-background-color-pressed"
+            },
+            {
+              "description": "Background color for inactive pill tab in disabled state.",
+              "name": "--mdc-tab-pill-inactive-background-color-disabled"
+            },
+            {
+              "description": "Background color for inactive pill tab in hover state.",
+              "name": "--mdc-tab-pill-inactive-background-color-hover"
+            },
+            {
+              "description": "Background color for inactive pill tab in rest state.",
+              "name": "--mdc-tab-pill-inactive-background-color-normal"
+            },
+            {
+              "description": "Text and icon color for inactive pill tab.",
+              "name": "--mdc-tab-pill-inactive-color"
+            },
+            {
+              "description": "Text and icon color for inactive pill tab in disabled state.",
+              "name": "--mdc-tab-pill-inactive-color-disabled"
+            }
+          ],
+          "members": [
+            {
+              "kind": "field",
+              "name": "text",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "Text to be displayed in the tab.\nIf no `text` is provided, no text will be rendered,\n`aria-label` should be set on the tab.",
+              "attribute": "text",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "variant",
+              "type": {
+                "text": "Variant"
+              },
+              "description": "Tab can have three variants:\n- `glass`\n- `line`\n- `pill`\n\nIt defines the background and foreground color of the tab.",
+              "default": "pill",
+              "attribute": "variant",
+              "reflects": true
             },
             {
               "kind": "method",
-              "name": "handleChange",
+              "name": "modifyIconName",
               "privacy": "private",
               "return": {
                 "type": {
@@ -5043,634 +5189,418 @@
               },
               "parameters": [
                 {
-                  "name": "event",
+                  "name": "active",
                   "type": {
-                    "text": "Event"
-                  }
+                    "text": "boolean"
+                  },
+                  "description": "The active state."
                 }
               ],
-              "description": "Handles the change event on the radio element.\nThis will toggle the state of the radio element.\nDispatches the change event."
+              "description": "Modifies the icon name based on the active state.\nIf the tab is active, the icon name is suffixed with '-filled'.\nIf the tab is inactive, the icon name is restored to its original value.\nIf '-filled' icon is not available, the icon name remains unchanged."
             },
             {
               "kind": "method",
-              "name": "updateRadio",
+              "name": "setVariant",
               "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
               "parameters": [
                 {
-                  "name": "enabledRadios",
-                  "type": {
-                    "text": "Radio[]"
-                  },
-                  "description": "An array of enabled radio buttons within the same group."
-                },
-                {
-                  "name": "index",
-                  "type": {
-                    "text": "number"
-                  },
-                  "description": "The index of the radio button to be updated within the enabled radios array."
-                },
-                {
-                  "name": "event",
+                  "name": "variant",
                   "type": {
-                    "text": "Event"
+                    "text": "Variant"
                   },
-                  "description": "The event that triggered the update."
+                  "description": "The variant to set."
                 }
               ],
-              "description": "Updates the state of the radio button at the specified index within the enabled radios.\nFocuses the radio button and triggers the change event if the radio button is not read-only."
+              "description": "Sets the variant attribute for the tab component.\nIf the provided variant is not included in the TAB_VARIANTS,\nit defaults to the value specified in DEFAULTS.VARIANT."
             },
             {
               "kind": "method",
-              "name": "handleKeyDown",
-              "privacy": "private",
-              "return": {
-                "type": {
-                  "text": "void"
-                }
-              },
+              "name": "setActive",
+              "privacy": "protected",
               "parameters": [
                 {
-                  "name": "event",
+                  "name": "element",
                   "type": {
-                    "text": "KeyboardEvent"
-                  }
+                    "text": "HTMLElement"
+                  },
+                  "description": "The tab element."
+                },
+                {
+                  "name": "active",
+                  "type": {
+                    "text": "boolean"
+                  },
+                  "description": "The active state of the tab."
                 }
               ],
-              "description": "Handles the keydown event (Arrow Up/Down/Left/Right) on the radio element."
+              "description": "Sets the aria-selected attribute based on the active state of the Tab.\nIf the tab is active, the filled version of the icon is displayed,\nelse the icon is restored to its original value.",
+              "inheritedFrom": {
+                "name": "Buttonsimple",
+                "module": "components/buttonsimple/buttonsimple.component.js"
+              }
             },
             {
               "kind": "method",
-              "name": "updateTabIndex",
-              "privacy": "private",
-              "return": {
-                "type": {
-                  "text": "void"
-                }
-              },
-              "description": "Update tab index for all radios in the same group (name)\nIf any radio group is checked, it will have a tab index of 0\nIf no radio group is checked, the first enabled radio will have a tab index of 0"
+              "name": "executeAction",
+              "privacy": "protected",
+              "inheritedFrom": {
+                "name": "Buttonsimple",
+                "module": "components/buttonsimple/buttonsimple.component.js"
+              }
             },
             {
               "kind": "field",
-              "name": "name",
+              "name": "role",
+              "description": "This property defines the ARIA role for the element. By default, it is set to 'button'.\nConsumers should override this role when:\n- The element is being used in a context where a different role is more appropriate.\n- Custom behaviors are implemented that require a specific ARIA role for accessibility purposes.",
+              "default": "'tab'",
+              "attribute": "role",
+              "reflects": true,
               "type": {
                 "text": "string"
               },
-              "default": "''",
-              "description": "Indicates the name of the component group (ex: checkbox, radio group).\nThey are used to group elements in a form together.",
-              "attribute": "name",
-              "reflects": true,
               "inheritedFrom": {
-                "name": "NameMixin",
-                "module": "utils/mixins/NameMixin.js"
+                "name": "Buttonsimple",
+                "module": "components/buttonsimple/buttonsimple.component.js"
               }
             },
             {
               "kind": "field",
-              "name": "value",
+              "name": "softDisabled",
               "type": {
-                "text": "string"
+                "text": "boolean"
               },
-              "default": "''",
-              "description": "Indicates the value of the component group (ex: input, checkbox, radio, select etc...)",
-              "attribute": "value",
-              "reflects": true,
+              "default": "undefined as unknown",
+              "description": "Indicates whether the button is soft disabled.\nWhen set to `true`, the button appears visually disabled but still allows\nfocus, click, and keyboard actions to be passed through.\n\n**Important:** When using soft disabled, consumers must ensure that\nthe button behaves like a disabled button, allowing only focus and\npreventing any interactions (clicks or keyboard actions) from triggering unintended actions.",
+              "attribute": "soft-disabled",
               "inheritedFrom": {
-                "name": "ValueMixin",
-                "module": "utils/mixins/ValueMixin.js"
+                "name": "Buttonsimple",
+                "module": "components/buttonsimple/buttonsimple.component.js"
               }
             },
             {
               "kind": "field",
-              "name": "dataAriaLabel",
+              "name": "size",
               "type": {
-                "text": "string | null"
+                "text": "ButtonSize"
               },
-              "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",
+              "description": "Simplebutton size is a super set of all the sizes supported by children components.",
+              "default": "undefined as unknown",
+              "attribute": "size",
               "reflects": true,
               "inheritedFrom": {
-                "name": "DataAriaLabelMixin",
-                "module": "utils/mixins/DataAriaLabelMixin.js"
+                "name": "Buttonsimple",
+                "module": "components/buttonsimple/buttonsimple.component.js"
               }
             },
             {
               "kind": "field",
-              "name": "disabled",
+              "name": "type",
               "type": {
-                "text": "boolean"
+                "text": "ButtonType"
               },
-              "default": "false",
-              "description": "Indicates whether the component is disabled.\nWhen the component is disabled for user interaction; it is not focusable or clickable.",
-              "attribute": "disabled",
+              "description": "This property defines the type attribute for the button element.\nThe type attribute specifies the behavior of the button when it is clicked.\n- **submit**: The button submits the form data to the server.\n- **reset**: The button resets the form data to its initial state.\n- **button**: The button does nothing when clicked.",
+              "default": "undefined as unknown",
+              "attribute": "type",
               "reflects": true,
               "inheritedFrom": {
-                "name": "FormfieldWrapper",
-                "module": "components/formfieldwrapper/formfieldwrapper.component.js"
+                "name": "Buttonsimple",
+                "module": "components/buttonsimple/buttonsimple.component.js"
               }
             },
             {
               "kind": "field",
-              "name": "label",
+              "name": "iconName",
               "type": {
-                "text": "string | undefined"
+                "text": "IconNames | undefined"
               },
-              "description": "The label of the input field. It is linked to the input field using the `for` attribute.",
-              "attribute": "label",
-              "reflects": true,
+              "description": "Name of the icon (= filename).\n\nIf no `icon-name` is provided, no icon will be rendered.",
+              "attribute": "icon-name",
               "inheritedFrom": {
-                "name": "FormfieldWrapper",
-                "module": "components/formfieldwrapper/formfieldwrapper.component.js"
+                "name": "IconNameMixin",
+                "module": "utils/mixins/IconNameMixin.js"
               }
             },
             {
               "kind": "field",
-              "name": "requiredLabel",
+              "name": "tabIndex",
               "type": {
-                "text": "string | undefined"
+                "text": "number"
               },
-              "description": "The required label of the input field.\nWhen an appropriate string value is set,\nthe input field is marked as required and the label is appended with this text.",
-              "attribute": "required-label",
+              "default": "0",
+              "description": "This property specifies the tab order of the element.",
+              "attribute": "tabIndex",
               "reflects": true,
               "inheritedFrom": {
-                "name": "FormfieldWrapper",
-                "module": "components/formfieldwrapper/formfieldwrapper.component.js"
-              }
-            },
-            {
-              "kind": "field",
-              "name": "id",
-              "default": "`mdc-input-${uuidv4()}`",
-              "description": "The unique id of the input field. It is used to link the input field with the label.",
-              "attribute": "id",
-              "inheritedFrom": {
-                "name": "FormfieldWrapper",
-                "module": "components/formfieldwrapper/formfieldwrapper.component.js"
+                "name": "Buttonsimple",
+                "module": "components/buttonsimple/buttonsimple.component.js"
               }
             },
             {
               "kind": "field",
-              "name": "helpTextType",
+              "name": "disabled",
               "type": {
-                "text": "ValidationType"
+                "text": "boolean"
               },
-              "description": "The type of help text. It can be 'default', 'error', 'warning', 'success', 'priority'.",
-              "attribute": "help-text-type",
+              "default": "false",
+              "description": "Indicates whether the component is disabled.\nWhen the component is disabled for user interaction; it is not focusable or clickable.",
+              "attribute": "disabled",
               "reflects": true,
               "inheritedFrom": {
-                "name": "FormfieldWrapper",
-                "module": "components/formfieldwrapper/formfieldwrapper.component.js"
+                "name": "Buttonsimple",
+                "module": "components/buttonsimple/buttonsimple.component.js"
               }
             },
             {
               "kind": "field",
-              "name": "helpText",
+              "name": "active",
               "type": {
-                "text": "string | undefined"
+                "text": "boolean"
               },
-              "description": "The help text that is displayed below the input field.",
-              "attribute": "help-text",
+              "default": "false",
+              "description": "The button's active state indicates whether it is currently toggled on (active) or off (inactive).\nWhen the active state is true, the button is considered to be in an active state, meaning it is toggled on.\nConversely, when the active state is false, the button is in an inactive state, indicating it is toggled off.",
+              "attribute": "active",
               "reflects": true,
               "inheritedFrom": {
-                "name": "FormfieldWrapper",
-                "module": "components/formfieldwrapper/formfieldwrapper.component.js"
+                "name": "Buttonsimple",
+                "module": "components/buttonsimple/buttonsimple.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": ""
+              "name": "setSoftDisabled",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "element",
+                  "type": {
+                    "text": "HTMLElement"
+                  },
+                  "description": "The button element."
+                },
+                {
+                  "name": "softDisabled",
+                  "type": {
+                    "text": "boolean"
+                  },
+                  "description": "The soft-disabled state."
                 }
-              },
-              "inheritedFrom": {
-                "name": "FormfieldWrapper",
-                "module": "components/formfieldwrapper/formfieldwrapper.component.js"
-              }
-            },
-            {
-              "kind": "method",
-              "name": "renderRequiredLabel",
-              "privacy": "protected",
+              ],
+              "description": "Sets the soft-disabled attribute for the button.\nWhen soft-disabled, the button looks to be disabled but remains focusable and clickable.\nAlso sets/removes aria-disabled attribute.",
               "inheritedFrom": {
-                "name": "FormfieldWrapper",
-                "module": "components/formfieldwrapper/formfieldwrapper.component.js"
+                "name": "Buttonsimple",
+                "module": "components/buttonsimple/buttonsimple.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": ""
+              "name": "setDisabled",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "element",
+                  "type": {
+                    "text": "HTMLElement"
+                  },
+                  "description": "The button element."
+                },
+                {
+                  "name": "disabled",
+                  "type": {
+                    "text": "boolean"
+                  },
+                  "description": "The disabled state."
                 }
-              },
+              ],
+              "description": "Sets the disabled attribute for the button.\nWhen disabled, the button is not focusable or clickable, and tabindex is set to -1.\nThe previous tabindex is stored and restored when enabled.\nAlso sets/removes aria-disabled attribute.",
               "inheritedFrom": {
-                "name": "FormfieldWrapper",
-                "module": "components/formfieldwrapper/formfieldwrapper.component.js"
+                "name": "Buttonsimple",
+                "module": "components/buttonsimple/buttonsimple.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": ""
-                }
-              },
+              "name": "triggerClickEvent",
+              "privacy": "private",
               "inheritedFrom": {
-                "name": "FormfieldWrapper",
-                "module": "components/formfieldwrapper/formfieldwrapper.component.js"
+                "name": "Buttonsimple",
+                "module": "components/buttonsimple/buttonsimple.component.js"
               }
             },
             {
               "kind": "method",
-              "name": "renderLabel",
-              "privacy": "protected",
-              "description": "renders the mdc-label-text container that contains the label and labelInfoToggleTip.",
-              "return": {
-                "type": {
-                  "text": ""
+              "name": "handleKeyDown",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "event",
+                  "type": {
+                    "text": "KeyboardEvent"
+                  },
+                  "description": "The keyboard event."
                 }
-              },
+              ],
+              "description": "Handles the keydown event on the button.\nIf the key is 'Enter' or 'Space', the button is pressed.\nIf the key is 'Enter', the button is pressed. The native HTML button works in the same way.",
               "inheritedFrom": {
-                "name": "FormfieldWrapper",
-                "module": "components/formfieldwrapper/formfieldwrapper.component.js"
+                "name": "Buttonsimple",
+                "module": "components/buttonsimple/buttonsimple.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": ""
+              "name": "handleKeyUp",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "event",
+                  "type": {
+                    "text": "KeyboardEvent"
+                  },
+                  "description": "The keyboard event."
                 }
-              },
+              ],
+              "description": "Handles the keyup event on the button.\nIf the key is 'Enter' or 'Space', the button is clicked.\nIf the key is 'Space', the button is pressed. The native HTML button works in the same way.",
               "inheritedFrom": {
-                "name": "FormfieldWrapper",
-                "module": "components/formfieldwrapper/formfieldwrapper.component.js"
-              }
-            }
-          ],
-          "events": [
-            {
-              "type": {
-                "text": "EventConstructor"
+                "name": "Buttonsimple",
+                "module": "components/buttonsimple/buttonsimple.component.js"
               }
             }
           ],
           "attributes": [
             {
-              "name": "checked",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "Determines whether the radio is selected or unselected.",
-              "fieldName": "checked"
-            },
-            {
-              "name": "readonly",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "Determines whether the radio is read-only.",
-              "fieldName": "readonly"
-            },
-            {
-              "name": "name",
-              "type": {
-                "text": "string"
-              },
-              "default": "''",
-              "description": "Indicates the name of the component group (ex: checkbox, radio group).\nThey are used to group elements in a form together.",
-              "fieldName": "name",
-              "inheritedFrom": {
-                "name": "NameMixin",
-                "module": "src/utils/mixins/NameMixin.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": "ValueMixin",
-                "module": "src/utils/mixins/ValueMixin.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"
-              },
-              "default": "false",
-              "description": "Indicates whether the component is disabled.\nWhen the component is disabled for user interaction; it is not focusable or clickable.",
-              "fieldName": "disabled",
-              "inheritedFrom": {
-                "name": "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-label",
+              "name": "text",
               "type": {
                 "text": "string | undefined"
               },
-              "description": "The required label of the input field.\nWhen an appropriate string value is set,\nthe input field is marked as required and the label is appended with this text.",
-              "fieldName": "requiredLabel",
-              "inheritedFrom": {
-                "name": "FormfieldWrapper",
-                "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
-              }
-            },
-            {
-              "name": "id",
-              "default": "`mdc-input-${uuidv4()}`",
-              "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": "Text to be displayed in the tab.\nIf no `text` is provided, no text will be rendered,\n`aria-label` should be set on the tab.",
+              "fieldName": "text"
             },
             {
-              "name": "help-text-type",
+              "name": "variant",
               "type": {
-                "text": "ValidationType"
+                "text": "Variant"
               },
-              "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": "Tab can have three variants:\n- `glass`\n- `line`\n- `pill`\n\nIt defines the background and foreground color of the tab.",
+              "default": "pill",
+              "fieldName": "variant"
             },
             {
-              "name": "help-text",
+              "name": "icon-name",
               "type": {
-                "text": "string | undefined"
+                "text": "IconNames | undefined"
               },
-              "description": "The help text that is displayed below the input field.",
-              "fieldName": "helpText",
-              "inheritedFrom": {
-                "name": "FormfieldWrapper",
-                "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
-              }
-            }
-          ],
-          "mixins": [
-            {
-              "name": "NameMixin",
-              "module": "/src/utils/mixins/NameMixin"
-            },
-            {
-              "name": "ValueMixin",
-              "module": "/src/utils/mixins/ValueMixin"
-            },
-            {
-              "name": "DataAriaLabelMixin",
-              "module": "/src/utils/mixins/DataAriaLabelMixin"
-            }
-          ],
-          "superclass": {
-            "name": "FormfieldWrapper",
-            "module": "/src/components/formfieldwrapper/formfieldwrapper.component"
-          },
-          "tagName": "mdc-radio",
-          "jsDoc": "/**\n * Radio allow users to select single options from a list or turn an item/feature on or off.\n * These are often used in forms, settings, and selection in lists.\n *\n * A radio component contains an optional label, optional info icon and an optional helper text.\n * @dependency mdc-formfieldwrapper\n *\n * @tagname mdc-radio\n *\n * @cssproperty --mdc-radio-inner-circle-size - size of the inner circle\n * @cssproperty --mdc-radio-text-disabled-color - color of the label when disabled\n * @cssproperty --mdc-radio-disabled-border-color - color of the radio button border when disabled\n * @cssproperty --mdc-radio-normal-border-color - color of the radio button border when normal\n * @cssproperty --mdc-radio-inner-circle-normal-background - background color of the inner circle when normal\n * @cssproperty --mdc-radio-inner-circle-disabled-background - background color of the inner circle when disabled\n * @cssproperty --mdc-radio-control-inactive-color - color of the radio button when inactive\n * @cssproperty --mdc-radio-control-inactive-hover - color of the radio button when inactive and hovered\n * @cssproperty --mdc-radio-control-inactive-pressed-color - color of the radio button when inactive and pressed\n * @cssproperty --mdc-radio-control-inactive-disabled-background - background color of the radio button when\n *  inactive and disabled\n * @cssproperty --mdc-radio-control-active-color - color of the radio button when active\n * @cssproperty --mdc-radio-control-active-hover-color - color of the radio button when active and hovered\n * @cssproperty --mdc-radio-control-active-pressed-color - color of the radio button when active and pressed\n * @cssproperty --mdc-radio-control-active-disabled-background - background color of the radio button\n *  when active and disabled\n *\n */",
-          "customElement": true,
-          "slots": [
-            {
-              "description": "slot to add the label info icon",
-              "name": "label-info",
+              "description": "Name of the icon (= filename).\n\nIf no `icon-name` is provided, no icon will be rendered.",
+              "fieldName": "iconName",
               "inheritedFrom": {
-                "name": "FormfieldWrapper",
-                "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
+                "name": "IconNameMixin",
+                "module": "src/utils/mixins/IconNameMixin.ts"
               }
-            }
-          ]
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "default",
-          "declaration": {
-            "name": "Radio",
-            "module": "components/radio/radio.component.js"
-          }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "components/text/text.component.js",
-      "declarations": [
-        {
-          "kind": "class",
-          "description": "Text component for creating styled text elements.\nIt has to be mounted within the ThemeProvider to access color and font tokens.\n\nThe `type` attribute allows changing the text style.\nThe `tagname` attribute allows changing the tag name of the text element.\nThe default tag name is `p`.\n\nThe `tagname` attribute should be a valid HTML tag name.\nIf the `tagname` attribute is not a valid HTML tag name, the default tag name will be used.\n\nThe styling is applied based on the `type` attribute.",
-          "name": "Text",
-          "cssParts": [
-            {
-              "description": "The text element",
-              "name": "text"
-            }
-          ],
-          "slots": [
-            {
-              "description": "Default slot for text content",
-              "name": ""
-            }
-          ],
-          "members": [
-            {
-              "kind": "field",
-              "name": "type",
-              "type": {
-                "text": "TextType"
-              },
-              "privacy": "public",
-              "description": "Specifies the text style to be applied.\n\nAcceptable values include:\n\n- 'body-small-regular'\n- 'body-small-medium'\n- 'body-small-bold'\n- 'body-midsize-regular'\n- 'body-midsize-medium'\n- 'body-midsize-bold'\n- 'body-large-regular'\n- 'body-large-medium'\n- 'body-large-bold'\n- 'body-small-regular-underline'\n- 'body-small-medium-underline'\n- 'body-midsize-regular-underline'\n- 'body-midsize-medium-underline'\n- 'body-large-regular-underline'\n- 'body-large-medium-underline'\n- 'heading-small-regular'\n- 'heading-small-medium'\n- 'heading-small-bold'\n- 'heading-midsize-regular'\n- 'heading-midsize-medium'\n- 'heading-midsize-bold'\n- 'heading-large-regular'\n- 'heading-large-medium'\n- 'heading-large-bold'\n- 'heading-xlarge-regular'\n- 'heading-xlarge-medium'\n- 'heading-xlarge-bold'\n- 'headline-small-light'\n- 'headline-small-regular'",
-              "default": "body-large-regular",
-              "attribute": "type",
-              "reflects": true
             },
             {
-              "kind": "field",
-              "name": "tagname",
-              "type": {
-                "text": "TagName | undefined"
-              },
-              "privacy": "public",
-              "description": "Specifies the HTML tag name for the text element. The default tag name is `p`.\nThis attribute is optional. When set, it changes the tag name of the text element.\n\nAcceptable values include:\n\n- 'h1'\n- 'h2'\n- 'h3'\n- 'h4'\n- 'h5'\n- 'h6'\n- 'p'\n- 'small'\n- 'span'\n- 'div'\n\nFor instance, setting this attribute to `h2` will render the text element as an `h2` element.\nNote that the styling is determined by the `type` attribute.",
-              "attribute": "tagname",
-              "reflects": true
-            }
-          ],
-          "attributes": [
-            {
-              "name": "type",
-              "type": {
-                "text": "TextType"
-              },
-              "description": "Specifies the text style to be applied.\n\nAcceptable values include:\n\n- 'body-small-regular'\n- 'body-small-medium'\n- 'body-small-bold'\n- 'body-midsize-regular'\n- 'body-midsize-medium'\n- 'body-midsize-bold'\n- 'body-large-regular'\n- 'body-large-medium'\n- 'body-large-bold'\n- 'body-small-regular-underline'\n- 'body-small-medium-underline'\n- 'body-midsize-regular-underline'\n- 'body-midsize-medium-underline'\n- 'body-large-regular-underline'\n- 'body-large-medium-underline'\n- 'heading-small-regular'\n- 'heading-small-medium'\n- 'heading-small-bold'\n- 'heading-midsize-regular'\n- 'heading-midsize-medium'\n- 'heading-midsize-bold'\n- 'heading-large-regular'\n- 'heading-large-medium'\n- 'heading-large-bold'\n- 'heading-xlarge-regular'\n- 'heading-xlarge-medium'\n- 'heading-xlarge-bold'\n- 'headline-small-light'\n- 'headline-small-regular'",
-              "default": "body-large-regular",
-              "fieldName": "type"
-            },
-            {
-              "name": "tagname",
+              "name": "tabIndex",
               "type": {
-                "text": "TagName | undefined"
+                "text": "number"
               },
-              "description": "Specifies the HTML tag name for the text element. The default tag name is `p`.\nThis attribute is optional. When set, it changes the tag name of the text element.\n\nAcceptable values include:\n\n- 'h1'\n- 'h2'\n- 'h3'\n- 'h4'\n- 'h5'\n- 'h6'\n- 'p'\n- 'small'\n- 'span'\n- 'div'\n\nFor instance, setting this attribute to `h2` will render the text element as an `h2` element.\nNote that the styling is determined by the `type` attribute.",
-              "fieldName": "tagname"
-            }
-          ],
-          "superclass": {
-            "name": "Component",
-            "module": "/src/models"
-          },
-          "tagName": "mdc-text",
-          "jsDoc": "/**\n * Text component for creating styled text elements.\n * It has to be mounted within the ThemeProvider to access color and font tokens.\n *\n * The `type` attribute allows changing the text style.\n * The `tagname` attribute allows changing the tag name of the text element.\n * The default tag name is `p`.\n *\n * The `tagname` attribute should be a valid HTML tag name.\n * If the `tagname` attribute is not a valid HTML tag name, the default tag name will be used.\n *\n * The styling is applied based on the `type` attribute.\n *\n * @tagname mdc-text\n * @slot - Default slot for text content\n *\n * @csspart text - The text element\n */",
-          "customElement": true
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "default",
-          "declaration": {
-            "name": "Text",
-            "module": "components/text/text.component.js"
-          }
-        }
-      ]
-    },
-    {
-      "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\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"
+              "default": "0",
+              "description": "This property specifies the tab order of the element.",
+              "fieldName": "tabIndex",
+              "inheritedFrom": {
+                "name": "Buttonsimple",
+                "module": "src/components/buttonsimple/buttonsimple.component.ts"
+              }
             },
             {
-              "description": "Option to override the font family, default: `Momentum` (from momentum-design/fonts)",
-              "name": "--mdc-themeprovider-font-family"
+              "name": "disabled",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Indicates whether the component is disabled.\nWhen the component is disabled for user interaction; it is not focusable or clickable.",
+              "fieldName": "disabled",
+              "inheritedFrom": {
+                "name": "Buttonsimple",
+                "module": "src/components/buttonsimple/buttonsimple.component.ts"
+              }
             },
             {
-              "description": "Option to override the font weight, default: `400`",
-              "name": "--mdc-themeprovider-font-weight"
+              "name": "active",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "The button's active state indicates whether it is currently toggled on (active) or off (inactive).\nWhen the active state is true, the button is considered to be in an active state, meaning it is toggled on.\nConversely, when the active state is false, the button is in an inactive state, indicating it is toggled off.",
+              "fieldName": "active",
+              "inheritedFrom": {
+                "name": "Buttonsimple",
+                "module": "src/components/buttonsimple/buttonsimple.component.ts"
+              }
             },
             {
-              "description": "Option to override the default letter-spacing, default: `-0.25px` (this is to match the old CiscoSans)",
-              "name": "--mdc-themeprovider-letter-spacing-adjustment"
-            }
-          ],
-          "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
+              "name": "soft-disabled",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Indicates whether the button is soft disabled.\nWhen set to `true`, the button appears visually disabled but still allows\nfocus, click, and keyboard actions to be passed through.\n\n**Important:** When using soft disabled, consumers must ensure that\nthe button behaves like a disabled button, allowing only focus and\npreventing any interactions (clicks or keyboard actions) from triggering unintended actions.",
+              "fieldName": "softDisabled",
+              "inheritedFrom": {
+                "name": "Buttonsimple",
+                "module": "src/components/buttonsimple/buttonsimple.component.ts"
+              }
             },
             {
-              "kind": "field",
-              "name": "themeclass",
+              "name": "size",
               "type": {
-                "text": "string"
+                "text": "ButtonSize"
               },
-              "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": "Simplebutton size is a super set of all the sizes supported by children components.",
+              "default": "32",
+              "fieldName": "size",
+              "inheritedFrom": {
+                "name": "Buttonsimple",
+                "module": "src/components/buttonsimple/buttonsimple.component.ts"
+              }
             },
             {
-              "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"
+              "name": "role",
+              "description": "This property defines the ARIA role for the element. By default, it is set to 'button'.\nConsumers should override this role when:\n- The element is being used in a context where a different role is more appropriate.\n- Custom behaviors are implemented that require a specific ARIA role for accessibility purposes.",
+              "default": "button",
+              "fieldName": "role",
+              "inheritedFrom": {
+                "name": "Buttonsimple",
+                "module": "src/components/buttonsimple/buttonsimple.component.ts"
+              }
             },
             {
-              "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."
+              "name": "type",
+              "type": {
+                "text": "ButtonType"
+              },
+              "description": "This property defines the type attribute for the button element.\nThe type attribute specifies the behavior of the button when it is clicked.\n- **submit**: The button submits the form data to the server.\n- **reset**: The button resets the form data to its initial state.\n- **button**: The button does nothing when clicked.",
+              "default": "button",
+              "fieldName": "type",
+              "inheritedFrom": {
+                "name": "Buttonsimple",
+                "module": "src/components/buttonsimple/buttonsimple.component.ts"
+              }
             }
           ],
-          "attributes": [
+          "mixins": [
             {
-              "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"
+              "name": "IconNameMixin",
+              "module": "/src/utils/mixins/IconNameMixin"
             }
           ],
           "superclass": {
-            "name": "Provider",
-            "module": "/src/models"
+            "name": "Buttonsimple",
+            "module": "/src/components/buttonsimple/buttonsimple.component"
           },
-          "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 * 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 */",
+          "tagName": "mdc-tab",
+          "jsDoc": "/**\n * `mdc-tab` is Tab component to be used within the Tabgroup.\n *\n * Passing in the attribute `text` to the tab component is changing the text displayed in the tab.\n *\n * The `slot=\"badge\"` can be used to add a badge to the tab.\n *\n * For `icon`, the `mdc-icon` component is used to render the icon.\n *\n * @dependency mdc-icon\n * @dependency mdc-text\n *\n * @tagname mdc-tab\n *\n * @cssproperty --mdc-tab-content-gap - Gap between the badge(if provided), icon and text.\n * @cssproperty --mdc-tab-height - Height of the tab.\n * @cssproperty --mdc-tab-glass-active-background-color-disabled - Background color for active glass tab\n *  in disabled state.\n * @cssproperty --mdc-tab-glass-active-background-color-hover - Background color for active glass tab in hover state.\n * @cssproperty --mdc-tab-glass-active-background-color-normal - Background color for active glass tab in rest state.\n * @cssproperty --mdc-tab-glass-active-background-color-pressed - Background color for active glass tab\n *  in pressed state.\n * @cssproperty --mdc-tab-glass-active-color - Text and icon color for active glass tab.\n * @cssproperty --mdc-tab-glass-active-color-disabled - Text and icon color for active glass tab in disabled state.\n * @cssproperty --mdc-tab-glass-border-radius - Border radius for glass tab.\n * @cssproperty --mdc-tab-glass-inactive-background-color-disabled - Background color for inactive glass tab\n *  in disabled state.\n * @cssproperty --mdc-tab-glass-inactive-background-color-hover - Background color for inactive glass tab\n *  in hover state.\n * @cssproperty --mdc-tab-glass-inactive-background-color-normal - Background color for inactive glass tab\n *  in rest state.\n * @cssproperty --mdc-tab-glass-inactive-background-color-pressed - Background color for inactive glass tab\n *  in pressed state.\n * @cssproperty --mdc-tab-glass-inactive-color - Text and icon color for inactive glass tab.\n * @cssproperty --mdc-tab-glass-inactive-color-disabled - Text and icon color for inactive glass tab in disabled state.\n * @cssproperty --mdc-tab-line-active-background-color-pressed - Background color for active line tab in pressed state.\n * @cssproperty --mdc-tab-line-active-background-color-disabled - Background color for active line tab\n *  in disabled state.\n * @cssproperty --mdc-tab-line-active-background-color-hover - Background color for active line tab in hover state.\n * @cssproperty --mdc-tab-line-active-background-color-normal - Background color for active line tab in rest state.\n * @cssproperty --mdc-tab-line-active-color - Text and icon color for active line tab.\n * @cssproperty --mdc-tab-line-active-color-disabled - Text and icon color for active line tab in disabled state.\n * @cssproperty --mdc-tab-line-active-indicator-color - color for indicator in active line tab.\n * @cssproperty --mdc-tab-line-active-indicator-color-disabled - Color for indicator in active line tab\n *  in disabled state.\n * @cssproperty --mdc-tab-line-active-indicator-height - Height for indicator in active line tab.\n * @cssproperty --mdc-tab-line-active-indicator-width - Width for indicator in active line tab.\n * @cssproperty --mdc-tab-line-border-bottom-left-radius - Bottom left border radius for line tab.\n * @cssproperty --mdc-tab-line-border-bottom-right-radius - Bottom right border radius for line tab.\n * @cssproperty --mdc-tab-line-border-top-left-radius - Top left border radius for line tab.\n * @cssproperty --mdc-tab-line-border-top-right-radius - Top right border radius for line tab.\n * @cssproperty --mdc-tab-line-inactive-background-color-pressed - Background color for inactive line tab\n *  in pressed state.\n * @cssproperty --mdc-tab-line-inactive-background-color-disabled - Background color for inactive line tab\n *  in disabled state\n * @cssproperty --mdc-tab-line-inactive-background-color-hover - Background color for inactive line tab in hover state.\n * @cssproperty --mdc-tab-line-inactive-background-color-normal - Background color for inactive line tab\n *  in rest state.\n * @cssproperty --mdc-tab-line-inactive-color - Text and icon color for inactive line tab.\n * @cssproperty --mdc-tab-line-inactive-color-disabled - Text and icon color for inactive line tab in disabled state.\n * @cssproperty --mdc-tab-padding-left - Padding left for the tab.\n * @cssproperty --mdc-tab-padding-right - Padding right for the tab.\n * @cssproperty --mdc-tab-pill-active-background-color-pressed - Background color for active pill tab in pressed state.\n * @cssproperty --mdc-tab-pill-active-background-color-disabled - Background color for active pill tab\n *  in disabled state.\n * @cssproperty --mdc-tab-pill-active-background-color-hover - Background color for active pill tab in hover state.\n * @cssproperty --mdc-tab-pill-active-background-color-normal - Background color for active pill tab in rest state.\n * @cssproperty --mdc-tab-pill-active-color - Text and icon color for active pill tab.\n * @cssproperty --mdc-tab-pill-active-color-disabled - Text and icon color for active pill tab in disabled state.\n * @cssproperty --mdc-tab-pill-border-radius - Border radius for pill tab.\n * @cssproperty --mdc-tab-pill-inactive-background-color-pressed - Background color for inactive pill tab\n *  in pressed state.\n * @cssproperty --mdc-tab-pill-inactive-background-color-disabled - Background color for inactive pill tab\n *  in disabled state.\n * @cssproperty --mdc-tab-pill-inactive-background-color-hover - Background color for inactive pill tab in hover state.\n * @cssproperty --mdc-tab-pill-inactive-background-color-normal - Background color for inactive pill tab in rest state.\n * @cssproperty --mdc-tab-pill-inactive-color - Text and icon color for inactive pill tab.\n * @cssproperty --mdc-tab-pill-inactive-color-disabled - Text and icon color for inactive pill tab in disabled state.\n */",
           "customElement": true
         }
       ],
@@ -5679,88 +5609,76 @@
           "kind": "js",
           "name": "default",
           "declaration": {
-            "name": "ThemeProvider",
-            "module": "components/themeprovider/themeprovider.component.js"
+            "name": "Tab",
+            "module": "components/tab/tab.component.js"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "components/toggle/toggle.component.js",
+      "path": "components/radio/radio.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\nNote: It internally renders a checkbox styled as a toggle switch.",
-          "name": "Toggle",
+          "description": "Radio allow users to select single options from a list or turn an item/feature on or off.\nThese are often used in forms, settings, and selection in lists.\n\nA radio component contains an optional label, optional info icon and an optional helper text.",
+          "name": "Radio",
           "cssProperties": [
             {
-              "description": "width of the toggle",
-              "name": "--mdc-toggle-width"
-            },
-            {
-              "description": "height of the toggle",
-              "name": "--mdc-toggle-height"
-            },
-            {
-              "description": "width of the toggle when it's size is compact",
-              "name": "--mdc-toggle-width-compact"
-            },
-            {
-              "description": "height of the toggle when it's size is compact",
-              "name": "--mdc-toggle-height-compact"
+              "description": "size of the inner circle",
+              "name": "--mdc-radio-inner-circle-size"
             },
             {
-              "description": "border radius of the toggle",
-              "name": "--mdc-toggle-border-radius"
+              "description": "color of the label when disabled",
+              "name": "--mdc-radio-text-disabled-color"
             },
             {
-              "description": "border radius of the toggle when it's size is compact",
-              "name": "--mdc-toggle-border-radius-compact"
+              "description": "color of the radio button border when disabled",
+              "name": "--mdc-radio-disabled-border-color"
             },
             {
-              "description": "border of the toggle",
-              "name": "--mdc-toggle-border"
+              "description": "color of the radio button border when normal",
+              "name": "--mdc-radio-normal-border-color"
             },
             {
-              "description": "background color of the inactive toggle in rest state",
-              "name": "--mdc-toggle-inactive-rest-color"
+              "description": "background color of the inner circle when normal",
+              "name": "--mdc-radio-inner-circle-normal-background"
             },
             {
-              "description": "background color of the inactive toggle in hover state",
-              "name": "--mdc-toggle-inactive-hover-color"
+              "description": "background color of the inner circle when disabled",
+              "name": "--mdc-radio-inner-circle-disabled-background"
             },
             {
-              "description": "background color of the inactive toggle in pressed state",
-              "name": "--mdc-toggle-inactive-pressed-color"
+              "description": "color of the radio button when inactive",
+              "name": "--mdc-radio-control-inactive-color"
             },
             {
-              "description": "background color of the inactive toggle in disabled state",
-              "name": "--mdc-toggle-inactive-disabled-color"
+              "description": "color of the radio button when inactive and hovered",
+              "name": "--mdc-radio-control-inactive-hover"
             },
             {
-              "description": "background color of the active toggle in rest state",
-              "name": "--mdc-toggle-active-rest-color"
+              "description": "color of the radio button when inactive and pressed",
+              "name": "--mdc-radio-control-inactive-pressed-color"
             },
             {
-              "description": "background color of the active toggle in hover state",
-              "name": "--mdc-toggle-active-hover-color"
+              "description": "background color of the radio button when inactive and disabled",
+              "name": "--mdc-radio-control-inactive-disabled-background"
             },
             {
-              "description": "background color of the active toggle in pressed state",
-              "name": "--mdc-toggle-active-pressed-color"
+              "description": "color of the radio button when active",
+              "name": "--mdc-radio-control-active-color"
             },
             {
-              "description": "background color of the active toggle in disabled state",
-              "name": "--mdc-toggle-active-disabled-color"
+              "description": "color of the radio button when active and hovered",
+              "name": "--mdc-radio-control-active-hover-color"
             },
             {
-              "description": " color of the help text label",
-              "name": "--mdc-toggle-help-text-color"
+              "description": "color of the radio button when active and pressed",
+              "name": "--mdc-radio-control-active-pressed-color"
             },
             {
-              "description": "color of the toggle label and help text in disabled state",
-              "name": "--mdc-toggle-label-color-disabled"
+              "description": "background color of the radio button when active and disabled",
+              "name": "--mdc-radio-control-active-disabled-background"
             }
           ],
           "members": [
@@ -5771,81 +5689,134 @@
                 "text": "boolean"
               },
               "default": "false",
-              "description": "Determines whether the toggle is active or inactive.",
+              "description": "Determines whether the radio is selected or unselected.",
               "attribute": "checked",
               "reflects": true
             },
             {
               "kind": "field",
-              "name": "size",
+              "name": "readonly",
               "type": {
-                "text": "ToggleSize"
+                "text": "boolean"
               },
-              "description": "Determines toggle size in rem (height is specified here).\n- **Default**: 1.5\n- **Compact**: 1",
-              "default": "default",
-              "attribute": "size",
+              "default": "false",
+              "description": "Determines whether the radio is read-only.",
+              "attribute": "readonly",
               "reflects": true
             },
             {
               "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": "Updates the form value to reflect the current state of the radio.\nIf checked, the value is set to the user-provided value.\nIf unchecked, the value is set to null."
             },
             {
               "kind": "method",
-              "name": "toggleState",
+              "name": "getAllRadiosWithinSameGroup",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "Radio[]"
+                }
+              },
+              "description": "Returns all radios within the same group (name)."
+            },
+            {
+              "kind": "method",
+              "name": "dispatchChangeEvent",
               "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."
+              "parameters": [
+                {
+                  "name": "event",
+                  "type": {
+                    "text": "Event"
+                  }
+                }
+              ],
+              "description": "The '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": "handleChange",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "event",
+                  "type": {
+                    "text": "Event"
+                  }
+                }
+              ],
+              "description": "Handles the change event on the radio element.\nThis will toggle the state of the radio element.\nDispatches the change event."
             },
             {
               "kind": "method",
-              "name": "handleChange",
+              "name": "updateRadio",
               "privacy": "private",
               "parameters": [
+                {
+                  "name": "enabledRadios",
+                  "type": {
+                    "text": "Radio[]"
+                  },
+                  "description": "An array of enabled radio buttons within the same group."
+                },
+                {
+                  "name": "index",
+                  "type": {
+                    "text": "number"
+                  },
+                  "description": "The index of the radio button to be updated within the enabled radios array."
+                },
                 {
                   "name": "event",
                   "type": {
                     "text": "Event"
-                  }
+                  },
+                  "description": "The event that triggered the update."
                 }
               ],
-              "description": "Toggles the state of the toggle element.\nand dispatch the new change event."
+              "description": "Updates the state of the radio button at the specified index within the enabled radios.\nFocuses the radio button and triggers the change event if the radio button is not read-only."
             },
             {
               "kind": "method",
-              "name": "setToggleSize",
+              "name": "handleKeyDown",
               "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
               "parameters": [
                 {
-                  "name": "size",
+                  "name": "event",
                   "type": {
-                    "text": "ToggleSize"
-                  },
-                  "description": "The size to set."
+                    "text": "KeyboardEvent"
+                  }
                 }
               ],
-              "description": "Sets the size attribute for the toggle component.\nIf the provided size is not included in the TOGGLE_SIZE,\nit defaults to the value specified in DEFAULTS.SIZE."
+              "description": "Handles the keydown event (Arrow Up/Down/Left/Right) on the radio element."
             },
             {
-              "kind": "field",
-              "name": "helpTextType",
-              "type": {
-                "text": "ValidationType"
+              "kind": "method",
+              "name": "updateTabIndex",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
               },
-              "description": "The type of help text. It can be 'default', 'error', 'warning', 'success', 'priority'.",
-              "attribute": "help-text-type",
-              "reflects": true,
-              "default": "undefined as unknown",
-              "inheritedFrom": {
-                "name": "FormfieldWrapper",
-                "module": "components/formfieldwrapper/formfieldwrapper.component.js"
-              }
+              "description": "Update tab index for all radios in the same group (name)\nIf any radio group is checked, it will have a tab index of 0\nIf no radio group is checked, the first enabled radio will have a tab index of 0"
             },
             {
               "kind": "field",
@@ -5946,6 +5917,20 @@
                 "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",
@@ -6059,17 +6044,17 @@
                 "text": "boolean"
               },
               "default": "false",
-              "description": "Determines whether the toggle is active or inactive.",
+              "description": "Determines whether the radio is selected or unselected.",
               "fieldName": "checked"
             },
             {
-              "name": "size",
+              "name": "readonly",
               "type": {
-                "text": "ToggleSize"
+                "text": "boolean"
               },
-              "description": "Determines toggle size in rem (height is specified here).\n- **Default**: 1.5\n- **Compact**: 1",
-              "default": "default",
-              "fieldName": "size"
+              "default": "false",
+              "description": "Determines whether the radio is read-only.",
+              "fieldName": "readonly"
             },
             {
               "name": "name",
@@ -6188,31 +6173,213 @@
               "module": "/src/utils/mixins/NameMixin"
             },
             {
-              "name": "ValueMixin",
-              "module": "/src/utils/mixins/ValueMixin"
+              "name": "ValueMixin",
+              "module": "/src/utils/mixins/ValueMixin"
+            },
+            {
+              "name": "DataAriaLabelMixin",
+              "module": "/src/utils/mixins/DataAriaLabelMixin"
+            }
+          ],
+          "superclass": {
+            "name": "FormfieldWrapper",
+            "module": "/src/components/formfieldwrapper/formfieldwrapper.component"
+          },
+          "tagName": "mdc-radio",
+          "jsDoc": "/**\n * Radio allow users to select single options from a list or turn an item/feature on or off.\n * These are often used in forms, settings, and selection in lists.\n *\n * A radio component contains an optional label, optional info icon and an optional helper text.\n * @dependency mdc-formfieldwrapper\n *\n * @tagname mdc-radio\n *\n * @cssproperty --mdc-radio-inner-circle-size - size of the inner circle\n * @cssproperty --mdc-radio-text-disabled-color - color of the label when disabled\n * @cssproperty --mdc-radio-disabled-border-color - color of the radio button border when disabled\n * @cssproperty --mdc-radio-normal-border-color - color of the radio button border when normal\n * @cssproperty --mdc-radio-inner-circle-normal-background - background color of the inner circle when normal\n * @cssproperty --mdc-radio-inner-circle-disabled-background - background color of the inner circle when disabled\n * @cssproperty --mdc-radio-control-inactive-color - color of the radio button when inactive\n * @cssproperty --mdc-radio-control-inactive-hover - color of the radio button when inactive and hovered\n * @cssproperty --mdc-radio-control-inactive-pressed-color - color of the radio button when inactive and pressed\n * @cssproperty --mdc-radio-control-inactive-disabled-background - background color of the radio button when\n *  inactive and disabled\n * @cssproperty --mdc-radio-control-active-color - color of the radio button when active\n * @cssproperty --mdc-radio-control-active-hover-color - color of the radio button when active and hovered\n * @cssproperty --mdc-radio-control-active-pressed-color - color of the radio button when active and pressed\n * @cssproperty --mdc-radio-control-active-disabled-background - background color of the radio button\n *  when active and disabled\n *\n */",
+          "customElement": true,
+          "slots": [
+            {
+              "description": "slot to add the label info icon",
+              "name": "label-info",
+              "inheritedFrom": {
+                "name": "FormfieldWrapper",
+                "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
+              }
+            }
+          ]
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "default",
+          "declaration": {
+            "name": "Radio",
+            "module": "components/radio/radio.component.js"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "components/text/text.component.js",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "Text component for creating styled text elements.\nIt has to be mounted within the ThemeProvider to access color and font tokens.\n\nThe `type` attribute allows changing the text style.\nThe `tagname` attribute allows changing the tag name of the text element.\nThe default tag name is `p`.\n\nThe `tagname` attribute should be a valid HTML tag name.\nIf the `tagname` attribute is not a valid HTML tag name, the default tag name will be used.\n\nThe styling is applied based on the `type` attribute.",
+          "name": "Text",
+          "cssParts": [
+            {
+              "description": "The text element",
+              "name": "text"
+            }
+          ],
+          "slots": [
+            {
+              "description": "Default slot for text content",
+              "name": ""
+            }
+          ],
+          "members": [
+            {
+              "kind": "field",
+              "name": "type",
+              "type": {
+                "text": "TextType"
+              },
+              "privacy": "public",
+              "description": "Specifies the text style to be applied.\n\nAcceptable values include:\n\n- 'body-small-regular'\n- 'body-small-medium'\n- 'body-small-bold'\n- 'body-midsize-regular'\n- 'body-midsize-medium'\n- 'body-midsize-bold'\n- 'body-large-regular'\n- 'body-large-medium'\n- 'body-large-bold'\n- 'body-small-regular-underline'\n- 'body-small-medium-underline'\n- 'body-midsize-regular-underline'\n- 'body-midsize-medium-underline'\n- 'body-large-regular-underline'\n- 'body-large-medium-underline'\n- 'heading-small-regular'\n- 'heading-small-medium'\n- 'heading-small-bold'\n- 'heading-midsize-regular'\n- 'heading-midsize-medium'\n- 'heading-midsize-bold'\n- 'heading-large-regular'\n- 'heading-large-medium'\n- 'heading-large-bold'\n- 'heading-xlarge-regular'\n- 'heading-xlarge-medium'\n- 'heading-xlarge-bold'\n- 'headline-small-light'\n- 'headline-small-regular'",
+              "default": "body-large-regular",
+              "attribute": "type",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "tagname",
+              "type": {
+                "text": "TagName | undefined"
+              },
+              "privacy": "public",
+              "description": "Specifies the HTML tag name for the text element. The default tag name is `p`.\nThis attribute is optional. When set, it changes the tag name of the text element.\n\nAcceptable values include:\n\n- 'h1'\n- 'h2'\n- 'h3'\n- 'h4'\n- 'h5'\n- 'h6'\n- 'p'\n- 'small'\n- 'span'\n- 'div'\n\nFor instance, setting this attribute to `h2` will render the text element as an `h2` element.\nNote that the styling is determined by the `type` attribute.",
+              "attribute": "tagname",
+              "reflects": true
+            }
+          ],
+          "attributes": [
+            {
+              "name": "type",
+              "type": {
+                "text": "TextType"
+              },
+              "description": "Specifies the text style to be applied.\n\nAcceptable values include:\n\n- 'body-small-regular'\n- 'body-small-medium'\n- 'body-small-bold'\n- 'body-midsize-regular'\n- 'body-midsize-medium'\n- 'body-midsize-bold'\n- 'body-large-regular'\n- 'body-large-medium'\n- 'body-large-bold'\n- 'body-small-regular-underline'\n- 'body-small-medium-underline'\n- 'body-midsize-regular-underline'\n- 'body-midsize-medium-underline'\n- 'body-large-regular-underline'\n- 'body-large-medium-underline'\n- 'heading-small-regular'\n- 'heading-small-medium'\n- 'heading-small-bold'\n- 'heading-midsize-regular'\n- 'heading-midsize-medium'\n- 'heading-midsize-bold'\n- 'heading-large-regular'\n- 'heading-large-medium'\n- 'heading-large-bold'\n- 'heading-xlarge-regular'\n- 'heading-xlarge-medium'\n- 'heading-xlarge-bold'\n- 'headline-small-light'\n- 'headline-small-regular'",
+              "default": "body-large-regular",
+              "fieldName": "type"
+            },
+            {
+              "name": "tagname",
+              "type": {
+                "text": "TagName | undefined"
+              },
+              "description": "Specifies the HTML tag name for the text element. The default tag name is `p`.\nThis attribute is optional. When set, it changes the tag name of the text element.\n\nAcceptable values include:\n\n- 'h1'\n- 'h2'\n- 'h3'\n- 'h4'\n- 'h5'\n- 'h6'\n- 'p'\n- 'small'\n- 'span'\n- 'div'\n\nFor instance, setting this attribute to `h2` will render the text element as an `h2` element.\nNote that the styling is determined by the `type` attribute.",
+              "fieldName": "tagname"
+            }
+          ],
+          "superclass": {
+            "name": "Component",
+            "module": "/src/models"
+          },
+          "tagName": "mdc-text",
+          "jsDoc": "/**\n * Text component for creating styled text elements.\n * It has to be mounted within the ThemeProvider to access color and font tokens.\n *\n * The `type` attribute allows changing the text style.\n * The `tagname` attribute allows changing the tag name of the text element.\n * The default tag name is `p`.\n *\n * The `tagname` attribute should be a valid HTML tag name.\n * If the `tagname` attribute is not a valid HTML tag name, the default tag name will be used.\n *\n * The styling is applied based on the `type` attribute.\n *\n * @tagname mdc-text\n * @slot - Default slot for text content\n *\n * @csspart text - The text element\n */",
+          "customElement": true
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "default",
+          "declaration": {
+            "name": "Text",
+            "module": "components/text/text.component.js"
+          }
+        }
+      ]
+    },
+    {
+      "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\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"
+            }
+          ],
+          "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"
             },
             {
-              "name": "DataAriaLabelMixin",
-              "module": "/src/utils/mixins/DataAriaLabelMixin"
+              "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."
             }
           ],
-          "superclass": {
-            "name": "FormfieldWrapper",
-            "module": "/src/components/formfieldwrapper"
-          },
-          "tagName": "mdc-toggle",
-          "jsDoc": "/**\n * Toggle Component is an interactive control used to switch between two mutually exclusive options,\n * such as On/Off, Active/Inactive. These are commonly used in settings panels, forms, and preference selections\n * where users need to enable or disable a feature.\n * It contains an optional label and an optional helper text.\n *\n * Note: It internally renders a checkbox styled as a toggle switch.\n *\n * @dependency mdc-icon\n *\n * @tagname mdc-toggle\n *\n * @cssproperty --mdc-toggle-width - width of the toggle\n * @cssproperty --mdc-toggle-height - height of the toggle\n * @cssproperty --mdc-toggle-width-compact - width of the toggle when it's size is compact\n * @cssproperty --mdc-toggle-height-compact - height of the toggle when it's size is compact\n * @cssproperty --mdc-toggle-border-radius - border radius of the toggle\n * @cssproperty --mdc-toggle-border-radius-compact - border radius of the toggle when it's size is compact\n * @cssproperty --mdc-toggle-border - border of the toggle\n * @cssproperty --mdc-toggle-inactive-rest-color - background color of the inactive toggle in rest state\n * @cssproperty --mdc-toggle-inactive-hover-color - background color of the inactive toggle in hover state\n * @cssproperty --mdc-toggle-inactive-pressed-color - background color of the inactive toggle in pressed state\n * @cssproperty --mdc-toggle-inactive-disabled-color - background color of the inactive toggle in disabled state\n * @cssproperty --mdc-toggle-active-rest-color - background color of the active toggle in rest state\n * @cssproperty --mdc-toggle-active-hover-color - background color of the active toggle in hover state\n * @cssproperty --mdc-toggle-active-pressed-color - background color of the active toggle in pressed state\n * @cssproperty --mdc-toggle-active-disabled-color - background color of the active toggle in disabled state\n * @cssproperty --mdc-toggle-help-text-color -  color of the help text label\n * @cssproperty --mdc-toggle-label-color-disabled - color of the toggle label and help text in disabled state\n *\n */",
-          "customElement": true,
-          "slots": [
+          "attributes": [
             {
-              "description": "slot to add the label info icon",
-              "name": "label-info",
-              "inheritedFrom": {
-                "name": "FormfieldWrapper",
-                "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
-              }
+              "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 * 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 */",
+          "customElement": true
         }
       ],
       "exports": [
@@ -6220,577 +6387,435 @@
           "kind": "js",
           "name": "default",
           "declaration": {
-            "name": "Toggle",
-            "module": "components/toggle/toggle.component.js"
+            "name": "ThemeProvider",
+            "module": "components/themeprovider/themeprovider.component.js"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "components/tab/tab.component.js",
+      "path": "components/toggle/toggle.component.js",
       "declarations": [
         {
           "kind": "class",
-          "description": "`mdc-tab` is Tab component to be used within the Tabgroup.\n\nPassing in the attribute `text` to the tab component is changing the text displayed in the tab.\n\nThe `slot=\"badge\"` can be used to add a badge to the tab.\n\nFor `icon`, the `mdc-icon` component is used to render the icon.",
-          "name": "Tab",
+          "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": "Gap between the badge(if provided), icon and text.",
-              "name": "--mdc-tab-content-gap"
-            },
-            {
-              "description": "Height of the tab.",
-              "name": "--mdc-tab-height"
-            },
-            {
-              "description": "Background color for active glass tab in disabled state.",
-              "name": "--mdc-tab-glass-active-background-color-disabled"
-            },
-            {
-              "description": "Background color for active glass tab in hover state.",
-              "name": "--mdc-tab-glass-active-background-color-hover"
-            },
-            {
-              "description": "Background color for active glass tab in rest state.",
-              "name": "--mdc-tab-glass-active-background-color-normal"
-            },
-            {
-              "description": "Background color for active glass tab in pressed state.",
-              "name": "--mdc-tab-glass-active-background-color-pressed"
-            },
-            {
-              "description": "Text and icon color for active glass tab.",
-              "name": "--mdc-tab-glass-active-color"
-            },
-            {
-              "description": "Text and icon color for active glass tab in disabled state.",
-              "name": "--mdc-tab-glass-active-color-disabled"
-            },
-            {
-              "description": "Border radius for glass tab.",
-              "name": "--mdc-tab-glass-border-radius"
-            },
-            {
-              "description": "Background color for inactive glass tab in disabled state.",
-              "name": "--mdc-tab-glass-inactive-background-color-disabled"
-            },
-            {
-              "description": "Background color for inactive glass tab in hover state.",
-              "name": "--mdc-tab-glass-inactive-background-color-hover"
-            },
-            {
-              "description": "Background color for inactive glass tab in rest state.",
-              "name": "--mdc-tab-glass-inactive-background-color-normal"
-            },
-            {
-              "description": "Background color for inactive glass tab in pressed state.",
-              "name": "--mdc-tab-glass-inactive-background-color-pressed"
-            },
-            {
-              "description": "Text and icon color for inactive glass tab.",
-              "name": "--mdc-tab-glass-inactive-color"
-            },
-            {
-              "description": "Text and icon color for inactive glass tab in disabled state.",
-              "name": "--mdc-tab-glass-inactive-color-disabled"
-            },
-            {
-              "description": "Background color for active line tab in pressed state.",
-              "name": "--mdc-tab-line-active-background-color-pressed"
-            },
-            {
-              "description": "Background color for active line tab in disabled state.",
-              "name": "--mdc-tab-line-active-background-color-disabled"
-            },
-            {
-              "description": "Background color for active line tab in hover state.",
-              "name": "--mdc-tab-line-active-background-color-hover"
-            },
-            {
-              "description": "Background color for active line tab in rest state.",
-              "name": "--mdc-tab-line-active-background-color-normal"
-            },
-            {
-              "description": "Text and icon color for active line tab.",
-              "name": "--mdc-tab-line-active-color"
-            },
-            {
-              "description": "Text and icon color for active line tab in disabled state.",
-              "name": "--mdc-tab-line-active-color-disabled"
-            },
-            {
-              "description": "color for indicator in active line tab.",
-              "name": "--mdc-tab-line-active-indicator-color"
-            },
-            {
-              "description": "Color for indicator in active line tab in disabled state.",
-              "name": "--mdc-tab-line-active-indicator-color-disabled"
-            },
-            {
-              "description": "Height for indicator in active line tab.",
-              "name": "--mdc-tab-line-active-indicator-height"
-            },
-            {
-              "description": "Width for indicator in active line tab.",
-              "name": "--mdc-tab-line-active-indicator-width"
-            },
-            {
-              "description": "Bottom left border radius for line tab.",
-              "name": "--mdc-tab-line-border-bottom-left-radius"
-            },
-            {
-              "description": "Bottom right border radius for line tab.",
-              "name": "--mdc-tab-line-border-bottom-right-radius"
-            },
-            {
-              "description": "Top left border radius for line tab.",
-              "name": "--mdc-tab-line-border-top-left-radius"
-            },
-            {
-              "description": "Top right border radius for line tab.",
-              "name": "--mdc-tab-line-border-top-right-radius"
-            },
-            {
-              "description": "Background color for inactive line tab in pressed state.",
-              "name": "--mdc-tab-line-inactive-background-color-pressed"
-            },
-            {
-              "description": "Background color for inactive line tab in disabled state",
-              "name": "--mdc-tab-line-inactive-background-color-disabled"
-            },
-            {
-              "description": "Background color for inactive line tab in hover state.",
-              "name": "--mdc-tab-line-inactive-background-color-hover"
-            },
-            {
-              "description": "Background color for inactive line tab in rest state.",
-              "name": "--mdc-tab-line-inactive-background-color-normal"
-            },
-            {
-              "description": "Text and icon color for inactive line tab.",
-              "name": "--mdc-tab-line-inactive-color"
+              "description": "width of the toggle",
+              "name": "--mdc-toggle-width"
             },
             {
-              "description": "Text and icon color for inactive line tab in disabled state.",
-              "name": "--mdc-tab-line-inactive-color-disabled"
+              "description": "height of the toggle",
+              "name": "--mdc-toggle-height"
             },
             {
-              "description": "Padding left for the tab.",
-              "name": "--mdc-tab-padding-left"
+              "description": "width of the toggle when it's size is compact",
+              "name": "--mdc-toggle-width-compact"
             },
             {
-              "description": "Padding right for the tab.",
-              "name": "--mdc-tab-padding-right"
+              "description": "height of the toggle when it's size is compact",
+              "name": "--mdc-toggle-height-compact"
             },
             {
-              "description": "Background color for active pill tab in pressed state.",
-              "name": "--mdc-tab-pill-active-background-color-pressed"
+              "description": "border radius of the toggle",
+              "name": "--mdc-toggle-border-radius"
             },
             {
-              "description": "Background color for active pill tab in disabled state.",
-              "name": "--mdc-tab-pill-active-background-color-disabled"
+              "description": "border radius of the toggle when it's size is compact",
+              "name": "--mdc-toggle-border-radius-compact"
             },
             {
-              "description": "Background color for active pill tab in hover state.",
-              "name": "--mdc-tab-pill-active-background-color-hover"
+              "description": "border of the toggle",
+              "name": "--mdc-toggle-border"
             },
             {
-              "description": "Background color for active pill tab in rest state.",
-              "name": "--mdc-tab-pill-active-background-color-normal"
+              "description": "background color of the inactive toggle in rest state",
+              "name": "--mdc-toggle-inactive-rest-color"
             },
             {
-              "description": "Text and icon color for active pill tab.",
-              "name": "--mdc-tab-pill-active-color"
+              "description": "background color of the inactive toggle in hover state",
+              "name": "--mdc-toggle-inactive-hover-color"
             },
             {
-              "description": "Text and icon color for active pill tab in disabled state.",
-              "name": "--mdc-tab-pill-active-color-disabled"
+              "description": "background color of the inactive toggle in pressed state",
+              "name": "--mdc-toggle-inactive-pressed-color"
             },
             {
-              "description": "Border radius for pill tab.",
-              "name": "--mdc-tab-pill-border-radius"
+              "description": "background color of the inactive toggle in disabled state",
+              "name": "--mdc-toggle-inactive-disabled-color"
             },
             {
-              "description": "Background color for inactive pill tab in pressed state.",
-              "name": "--mdc-tab-pill-inactive-background-color-pressed"
+              "description": "background color of the active toggle in rest state",
+              "name": "--mdc-toggle-active-rest-color"
             },
             {
-              "description": "Background color for inactive pill tab in disabled state.",
-              "name": "--mdc-tab-pill-inactive-background-color-disabled"
+              "description": "background color of the active toggle in hover state",
+              "name": "--mdc-toggle-active-hover-color"
             },
             {
-              "description": "Background color for inactive pill tab in hover state.",
-              "name": "--mdc-tab-pill-inactive-background-color-hover"
+              "description": "background color of the active toggle in pressed state",
+              "name": "--mdc-toggle-active-pressed-color"
             },
             {
-              "description": "Background color for inactive pill tab in rest state.",
-              "name": "--mdc-tab-pill-inactive-background-color-normal"
+              "description": "background color of the active toggle in disabled state",
+              "name": "--mdc-toggle-active-disabled-color"
             },
             {
-              "description": "Text and icon color for inactive pill tab.",
-              "name": "--mdc-tab-pill-inactive-color"
+              "description": " color of the help text label",
+              "name": "--mdc-toggle-help-text-color"
             },
-            {
-              "description": "Text and icon color for inactive pill tab in disabled state.",
-              "name": "--mdc-tab-pill-inactive-color-disabled"
+            {
+              "description": "color of the toggle label and help text in disabled state",
+              "name": "--mdc-toggle-label-color-disabled"
             }
           ],
           "members": [
             {
               "kind": "field",
-              "name": "text",
+              "name": "checked",
               "type": {
-                "text": "string | undefined"
+                "text": "boolean"
               },
-              "description": "Text to be displayed in the tab.\nIf no `text` is provided, no text will be rendered,\n`aria-label` should be set on the tab.",
-              "attribute": "text",
+              "default": "false",
+              "description": "Determines whether the toggle is active or inactive.",
+              "attribute": "checked",
               "reflects": true
             },
             {
               "kind": "field",
-              "name": "variant",
+              "name": "size",
               "type": {
-                "text": "Variant"
+                "text": "ToggleSize"
               },
-              "description": "Tab can have three variants:\n- `glass`\n- `line`\n- `pill`\n\nIt defines the background and foreground color of the tab.",
-              "default": "pill",
-              "attribute": "variant",
+              "description": "Determines toggle size in rem (height is specified here).\n- **Default**: 1.5\n- **Compact**: 1",
+              "default": "default",
+              "attribute": "size",
               "reflects": true
             },
             {
               "kind": "method",
-              "name": "modifyIconName",
+              "name": "setFormValue",
               "privacy": "private",
-              "return": {
-                "type": {
-                  "text": "void"
-                }
-              },
-              "parameters": [
-                {
-                  "name": "active",
-                  "type": {
-                    "text": "boolean"
-                  },
-                  "description": "The active state."
-                }
-              ],
-              "description": "Modifies the icon name based on the active state.\nIf the tab is active, the icon name is suffixed with '-filled'.\nIf the tab is inactive, the icon name is restored to its original value.\nIf '-filled' icon is not available, the icon name remains unchanged."
+              "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": "setVariant",
+              "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."
+            },
+            {
+              "kind": "method",
+              "name": "handleChange",
+              "privacy": "private",
               "parameters": [
                 {
-                  "name": "variant",
+                  "name": "event",
                   "type": {
-                    "text": "Variant"
-                  },
-                  "description": "The variant to set."
+                    "text": "Event"
+                  }
                 }
               ],
-              "description": "Sets the variant attribute for the tab component.\nIf the provided variant is not included in the TAB_VARIANTS,\nit defaults to the value specified in DEFAULTS.VARIANT."
+              "description": "Toggles the state of the toggle element.\nand dispatch the new change event."
             },
             {
               "kind": "method",
-              "name": "setActive",
-              "privacy": "protected",
+              "name": "setToggleSize",
+              "privacy": "private",
               "parameters": [
                 {
-                  "name": "element",
-                  "type": {
-                    "text": "HTMLElement"
-                  },
-                  "description": "The tab element."
-                },
-                {
-                  "name": "active",
+                  "name": "size",
                   "type": {
-                    "text": "boolean"
+                    "text": "ToggleSize"
                   },
-                  "description": "The active state of the tab."
+                  "description": "The size to set."
                 }
               ],
-              "description": "Sets the aria-selected attribute based on the active state of the Tab.\nIf the tab is active, the filled version of the icon is displayed,\nelse the icon is restored to its original value.",
-              "inheritedFrom": {
-                "name": "Buttonsimple",
-                "module": "components/buttonsimple/buttonsimple.component.js"
-              }
+              "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": "method",
-              "name": "executeAction",
-              "privacy": "protected",
+              "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,
+              "default": "undefined as unknown",
               "inheritedFrom": {
-                "name": "Buttonsimple",
-                "module": "components/buttonsimple/buttonsimple.component.js"
+                "name": "FormfieldWrapper",
+                "module": "components/formfieldwrapper/formfieldwrapper.component.js"
               }
             },
             {
               "kind": "field",
-              "name": "role",
-              "description": "This property defines the ARIA role for the element. By default, it is set to 'button'.\nConsumers should override this role when:\n- The element is being used in a context where a different role is more appropriate.\n- Custom behaviors are implemented that require a specific ARIA role for accessibility purposes.",
-              "default": "'tab'",
-              "attribute": "role",
-              "reflects": true,
+              "name": "name",
               "type": {
                 "text": "string"
               },
+              "default": "''",
+              "description": "Indicates the name of the component group (ex: checkbox, radio group).\nThey are used to group elements in a form together.",
+              "attribute": "name",
+              "reflects": true,
               "inheritedFrom": {
-                "name": "Buttonsimple",
-                "module": "components/buttonsimple/buttonsimple.component.js"
+                "name": "NameMixin",
+                "module": "utils/mixins/NameMixin.js"
               }
             },
             {
               "kind": "field",
-              "name": "softDisabled",
+              "name": "value",
               "type": {
-                "text": "boolean"
+                "text": "string"
               },
-              "default": "undefined as unknown",
-              "description": "Indicates whether the button is soft disabled.\nWhen set to `true`, the button appears visually disabled but still allows\nfocus, click, and keyboard actions to be passed through.\n\n**Important:** When using soft disabled, consumers must ensure that\nthe button behaves like a disabled button, allowing only focus and\npreventing any interactions (clicks or keyboard actions) from triggering unintended actions.",
-              "attribute": "soft-disabled",
+              "default": "''",
+              "description": "Indicates the value of the component group (ex: input, checkbox, radio, select etc...)",
+              "attribute": "value",
+              "reflects": true,
               "inheritedFrom": {
-                "name": "Buttonsimple",
-                "module": "components/buttonsimple/buttonsimple.component.js"
+                "name": "ValueMixin",
+                "module": "utils/mixins/ValueMixin.js"
               }
             },
             {
               "kind": "field",
-              "name": "size",
+              "name": "dataAriaLabel",
               "type": {
-                "text": "ButtonSize"
+                "text": "string | null"
               },
-              "description": "Simplebutton size is a super set of all the sizes supported by children components.",
-              "default": "undefined as unknown",
-              "attribute": "size",
+              "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": "Buttonsimple",
-                "module": "components/buttonsimple/buttonsimple.component.js"
+                "name": "DataAriaLabelMixin",
+                "module": "utils/mixins/DataAriaLabelMixin.js"
               }
             },
             {
               "kind": "field",
-              "name": "type",
+              "name": "disabled",
               "type": {
-                "text": "ButtonType"
+                "text": "boolean"
               },
-              "description": "This property defines the type attribute for the button element.\nThe type attribute specifies the behavior of the button when it is clicked.\n- **submit**: The button submits the form data to the server.\n- **reset**: The button resets the form data to its initial state.\n- **button**: The button does nothing when clicked.",
-              "default": "undefined as unknown",
-              "attribute": "type",
+              "default": "false",
+              "description": "Indicates whether the component is disabled.\nWhen the component is disabled for user interaction; it is not focusable or clickable.",
+              "attribute": "disabled",
               "reflects": true,
               "inheritedFrom": {
-                "name": "Buttonsimple",
-                "module": "components/buttonsimple/buttonsimple.component.js"
+                "name": "FormfieldWrapper",
+                "module": "components/formfieldwrapper/formfieldwrapper.component.js"
               }
             },
             {
               "kind": "field",
-              "name": "iconName",
+              "name": "label",
               "type": {
-                "text": "IconNames | undefined"
+                "text": "string | undefined"
               },
-              "description": "Name of the icon (= filename).\n\nIf no `icon-name` is provided, no icon will be rendered.",
-              "attribute": "icon-name",
+              "description": "The label of the input field. It is linked to the input field using the `for` attribute.",
+              "attribute": "label",
+              "reflects": true,
               "inheritedFrom": {
-                "name": "IconNameMixin",
-                "module": "utils/mixins/IconNameMixin.js"
+                "name": "FormfieldWrapper",
+                "module": "components/formfieldwrapper/formfieldwrapper.component.js"
               }
             },
             {
               "kind": "field",
-              "name": "tabIndex",
+              "name": "requiredLabel",
               "type": {
-                "text": "number"
+                "text": "string | undefined"
               },
-              "default": "0",
-              "description": "This property specifies the tab order of the element.",
-              "attribute": "tabIndex",
+              "description": "The required label of the input field.\nWhen an appropriate string value is set,\nthe input field is marked as required and the label is appended with this text.",
+              "attribute": "required-label",
               "reflects": true,
               "inheritedFrom": {
-                "name": "Buttonsimple",
-                "module": "components/buttonsimple/buttonsimple.component.js"
+                "name": "FormfieldWrapper",
+                "module": "components/formfieldwrapper/formfieldwrapper.component.js"
               }
             },
             {
               "kind": "field",
-              "name": "disabled",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "Indicates whether the component is disabled.\nWhen the component is disabled for user interaction; it is not focusable or clickable.",
-              "attribute": "disabled",
-              "reflects": true,
+              "name": "id",
+              "default": "`mdc-input-${uuidv4()}`",
+              "description": "The unique id of the input field. It is used to link the input field with the label.",
+              "attribute": "id",
               "inheritedFrom": {
-                "name": "Buttonsimple",
-                "module": "components/buttonsimple/buttonsimple.component.js"
+                "name": "FormfieldWrapper",
+                "module": "components/formfieldwrapper/formfieldwrapper.component.js"
               }
             },
             {
               "kind": "field",
-              "name": "active",
+              "name": "helpText",
               "type": {
-                "text": "boolean"
+                "text": "string | undefined"
               },
-              "default": "false",
-              "description": "The button's active state indicates whether it is currently toggled on (active) or off (inactive).\nWhen the active state is true, the button is considered to be in an active state, meaning it is toggled on.\nConversely, when the active state is false, the button is in an inactive state, indicating it is toggled off.",
-              "attribute": "active",
+              "description": "The help text that is displayed below the input field.",
+              "attribute": "help-text",
               "reflects": true,
               "inheritedFrom": {
-                "name": "Buttonsimple",
-                "module": "components/buttonsimple/buttonsimple.component.js"
+                "name": "FormfieldWrapper",
+                "module": "components/formfieldwrapper/formfieldwrapper.component.js"
               }
             },
             {
               "kind": "method",
-              "name": "setSoftDisabled",
-              "privacy": "private",
-              "parameters": [
-                {
-                  "name": "element",
-                  "type": {
-                    "text": "HTMLElement"
-                  },
-                  "description": "The button element."
-                },
-                {
-                  "name": "softDisabled",
-                  "type": {
-                    "text": "boolean"
-                  },
-                  "description": "The soft-disabled state."
+              "name": "renderLabelElement",
+              "privacy": "protected",
+              "description": "creates the label element when the label property is set.\nid is used to link the label with the input field.",
+              "return": {
+                "type": {
+                  "text": ""
                 }
-              ],
-              "description": "Sets the soft-disabled attribute for the button.\nWhen soft-disabled, the button looks to be disabled but remains focusable and clickable.\nAlso sets/removes aria-disabled attribute.",
+              },
               "inheritedFrom": {
-                "name": "Buttonsimple",
-                "module": "components/buttonsimple/buttonsimple.component.js"
+                "name": "FormfieldWrapper",
+                "module": "components/formfieldwrapper/formfieldwrapper.component.js"
               }
-            },
-            {
-              "kind": "method",
-              "name": "setDisabled",
-              "privacy": "private",
-              "parameters": [
-                {
-                  "name": "element",
-                  "type": {
-                    "text": "HTMLElement"
-                  },
-                  "description": "The button element."
-                },
-                {
-                  "name": "disabled",
-                  "type": {
-                    "text": "boolean"
-                  },
-                  "description": "The disabled state."
+            },
+            {
+              "kind": "method",
+              "name": "renderRequiredLabel",
+              "privacy": "protected",
+              "inheritedFrom": {
+                "name": "FormfieldWrapper",
+                "module": "components/formfieldwrapper/formfieldwrapper.component.js"
+              }
+            },
+            {
+              "kind": "method",
+              "name": "renderHelpTextIcon",
+              "privacy": "protected",
+              "description": "creates the helpertext icon based on the helpTextType for validation.\nIf the helpTextType is not set, it defaults to 'default' and it doesn't display any icon.",
+              "return": {
+                "type": {
+                  "text": ""
                 }
-              ],
-              "description": "Sets the disabled attribute for the button.\nWhen disabled, the button is not focusable or clickable, and tabindex is set to -1.\nThe previous tabindex is stored and restored when enabled.\nAlso sets/removes aria-disabled attribute.",
+              },
               "inheritedFrom": {
-                "name": "Buttonsimple",
-                "module": "components/buttonsimple/buttonsimple.component.js"
+                "name": "FormfieldWrapper",
+                "module": "components/formfieldwrapper/formfieldwrapper.component.js"
               }
             },
             {
               "kind": "method",
-              "name": "triggerClickEvent",
-              "privacy": "private",
+              "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": "Buttonsimple",
-                "module": "components/buttonsimple/buttonsimple.component.js"
+                "name": "FormfieldWrapper",
+                "module": "components/formfieldwrapper/formfieldwrapper.component.js"
               }
             },
             {
               "kind": "method",
-              "name": "handleKeyDown",
-              "privacy": "private",
-              "parameters": [
-                {
-                  "name": "event",
-                  "type": {
-                    "text": "KeyboardEvent"
-                  },
-                  "description": "The keyboard event."
+              "name": "renderLabel",
+              "privacy": "protected",
+              "description": "renders the mdc-label-text container that contains the label and labelInfoToggleTip.",
+              "return": {
+                "type": {
+                  "text": ""
                 }
-              ],
-              "description": "Handles the keydown event on the button.\nIf the key is 'Enter' or 'Space', the button is pressed.\nIf the key is 'Enter', the button is pressed. The native HTML button works in the same way.",
+              },
               "inheritedFrom": {
-                "name": "Buttonsimple",
-                "module": "components/buttonsimple/buttonsimple.component.js"
+                "name": "FormfieldWrapper",
+                "module": "components/formfieldwrapper/formfieldwrapper.component.js"
               }
             },
             {
               "kind": "method",
-              "name": "handleKeyUp",
-              "privacy": "private",
-              "parameters": [
-                {
-                  "name": "event",
-                  "type": {
-                    "text": "KeyboardEvent"
-                  },
-                  "description": "The keyboard event."
+              "name": "renderHelperText",
+              "privacy": "protected",
+              "description": "renders the mdc-help-text container that contains the helpertext icon and helpertext.",
+              "return": {
+                "type": {
+                  "text": ""
                 }
-              ],
-              "description": "Handles the keyup event on the button.\nIf the key is 'Enter' or 'Space', the button is clicked.\nIf the key is 'Space', the button is pressed. The native HTML button works in the same way.",
+              },
               "inheritedFrom": {
-                "name": "Buttonsimple",
-                "module": "components/buttonsimple/buttonsimple.component.js"
+                "name": "FormfieldWrapper",
+                "module": "components/formfieldwrapper/formfieldwrapper.component.js"
+              }
+            }
+          ],
+          "events": [
+            {
+              "type": {
+                "text": "EventConstructor"
               }
             }
           ],
           "attributes": [
             {
-              "name": "text",
+              "name": "checked",
               "type": {
-                "text": "string | undefined"
+                "text": "boolean"
               },
-              "description": "Text to be displayed in the tab.\nIf no `text` is provided, no text will be rendered,\n`aria-label` should be set on the tab.",
-              "fieldName": "text"
+              "default": "false",
+              "description": "Determines whether the toggle is active or inactive.",
+              "fieldName": "checked"
             },
             {
-              "name": "variant",
+              "name": "size",
               "type": {
-                "text": "Variant"
+                "text": "ToggleSize"
               },
-              "description": "Tab can have three variants:\n- `glass`\n- `line`\n- `pill`\n\nIt defines the background and foreground color of the tab.",
-              "default": "pill",
-              "fieldName": "variant"
+              "description": "Determines toggle size in rem (height is specified here).\n- **Default**: 1.5\n- **Compact**: 1",
+              "default": "default",
+              "fieldName": "size"
             },
             {
-              "name": "icon-name",
+              "name": "name",
               "type": {
-                "text": "IconNames | undefined"
+                "text": "string"
               },
-              "description": "Name of the icon (= filename).\n\nIf no `icon-name` is provided, no icon will be rendered.",
-              "fieldName": "iconName",
+              "default": "''",
+              "description": "Indicates the name of the component group (ex: checkbox, radio group).\nThey are used to group elements in a form together.",
+              "fieldName": "name",
               "inheritedFrom": {
-                "name": "IconNameMixin",
-                "module": "src/utils/mixins/IconNameMixin.ts"
+                "name": "NameMixin",
+                "module": "src/utils/mixins/NameMixin.ts"
               }
             },
             {
-              "name": "tabIndex",
+              "name": "value",
               "type": {
-                "text": "number"
+                "text": "string"
               },
-              "default": "0",
-              "description": "This property specifies the tab order of the element.",
-              "fieldName": "tabIndex",
+              "default": "''",
+              "description": "Indicates the value of the component group (ex: input, checkbox, radio, select etc...)",
+              "fieldName": "value",
               "inheritedFrom": {
-                "name": "Buttonsimple",
-                "module": "src/components/buttonsimple/buttonsimple.component.ts"
+                "name": "ValueMixin",
+                "module": "src/utils/mixins/ValueMixin.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"
               }
             },
             {
@@ -6802,86 +6827,100 @@
               "description": "Indicates whether the component is disabled.\nWhen the component is disabled for user interaction; it is not focusable or clickable.",
               "fieldName": "disabled",
               "inheritedFrom": {
-                "name": "Buttonsimple",
-                "module": "src/components/buttonsimple/buttonsimple.component.ts"
+                "name": "FormfieldWrapper",
+                "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
               }
             },
             {
-              "name": "active",
+              "name": "label",
               "type": {
-                "text": "boolean"
+                "text": "string | undefined"
               },
-              "default": "false",
-              "description": "The button's active state indicates whether it is currently toggled on (active) or off (inactive).\nWhen the active state is true, the button is considered to be in an active state, meaning it is toggled on.\nConversely, when the active state is false, the button is in an inactive state, indicating it is toggled off.",
-              "fieldName": "active",
+              "description": "The label of the input field. It is linked to the input field using the `for` attribute.",
+              "fieldName": "label",
               "inheritedFrom": {
-                "name": "Buttonsimple",
-                "module": "src/components/buttonsimple/buttonsimple.component.ts"
+                "name": "FormfieldWrapper",
+                "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
               }
             },
             {
-              "name": "soft-disabled",
+              "name": "required-label",
               "type": {
-                "text": "boolean"
+                "text": "string | undefined"
               },
-              "default": "false",
-              "description": "Indicates whether the button is soft disabled.\nWhen set to `true`, the button appears visually disabled but still allows\nfocus, click, and keyboard actions to be passed through.\n\n**Important:** When using soft disabled, consumers must ensure that\nthe button behaves like a disabled button, allowing only focus and\npreventing any interactions (clicks or keyboard actions) from triggering unintended actions.",
-              "fieldName": "softDisabled",
+              "description": "The required label of the input field.\nWhen an appropriate string value is set,\nthe input field is marked as required and the label is appended with this text.",
+              "fieldName": "requiredLabel",
               "inheritedFrom": {
-                "name": "Buttonsimple",
-                "module": "src/components/buttonsimple/buttonsimple.component.ts"
+                "name": "FormfieldWrapper",
+                "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
               }
             },
             {
-              "name": "size",
-              "type": {
-                "text": "ButtonSize"
-              },
-              "description": "Simplebutton size is a super set of all the sizes supported by children components.",
-              "default": "32",
-              "fieldName": "size",
+              "name": "id",
+              "default": "`mdc-input-${uuidv4()}`",
+              "description": "The unique id of the input field. It is used to link the input field with the label.",
+              "fieldName": "id",
               "inheritedFrom": {
-                "name": "Buttonsimple",
-                "module": "src/components/buttonsimple/buttonsimple.component.ts"
+                "name": "FormfieldWrapper",
+                "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
               }
             },
             {
-              "name": "role",
-              "description": "This property defines the ARIA role for the element. By default, it is set to 'button'.\nConsumers should override this role when:\n- The element is being used in a context where a different role is more appropriate.\n- Custom behaviors are implemented that require a specific ARIA role for accessibility purposes.",
-              "default": "button",
-              "fieldName": "role",
+              "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": "Buttonsimple",
-                "module": "src/components/buttonsimple/buttonsimple.component.ts"
+                "name": "FormfieldWrapper",
+                "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
               }
             },
             {
-              "name": "type",
+              "name": "help-text",
               "type": {
-                "text": "ButtonType"
+                "text": "string | undefined"
               },
-              "description": "This property defines the type attribute for the button element.\nThe type attribute specifies the behavior of the button when it is clicked.\n- **submit**: The button submits the form data to the server.\n- **reset**: The button resets the form data to its initial state.\n- **button**: The button does nothing when clicked.",
-              "default": "button",
-              "fieldName": "type",
+              "description": "The help text that is displayed below the input field.",
+              "fieldName": "helpText",
               "inheritedFrom": {
-                "name": "Buttonsimple",
-                "module": "src/components/buttonsimple/buttonsimple.component.ts"
+                "name": "FormfieldWrapper",
+                "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
               }
             }
           ],
           "mixins": [
             {
-              "name": "IconNameMixin",
-              "module": "/src/utils/mixins/IconNameMixin"
+              "name": "NameMixin",
+              "module": "/src/utils/mixins/NameMixin"
+            },
+            {
+              "name": "ValueMixin",
+              "module": "/src/utils/mixins/ValueMixin"
+            },
+            {
+              "name": "DataAriaLabelMixin",
+              "module": "/src/utils/mixins/DataAriaLabelMixin"
             }
           ],
           "superclass": {
-            "name": "Buttonsimple",
-            "module": "/src/components/buttonsimple/buttonsimple.component"
+            "name": "FormfieldWrapper",
+            "module": "/src/components/formfieldwrapper"
           },
-          "tagName": "mdc-tab",
-          "jsDoc": "/**\n * `mdc-tab` is Tab component to be used within the Tabgroup.\n *\n * Passing in the attribute `text` to the tab component is changing the text displayed in the tab.\n *\n * The `slot=\"badge\"` can be used to add a badge to the tab.\n *\n * For `icon`, the `mdc-icon` component is used to render the icon.\n *\n * @dependency mdc-icon\n * @dependency mdc-text\n *\n * @tagname mdc-tab\n *\n * @cssproperty --mdc-tab-content-gap - Gap between the badge(if provided), icon and text.\n * @cssproperty --mdc-tab-height - Height of the tab.\n * @cssproperty --mdc-tab-glass-active-background-color-disabled - Background color for active glass tab\n *  in disabled state.\n * @cssproperty --mdc-tab-glass-active-background-color-hover - Background color for active glass tab in hover state.\n * @cssproperty --mdc-tab-glass-active-background-color-normal - Background color for active glass tab in rest state.\n * @cssproperty --mdc-tab-glass-active-background-color-pressed - Background color for active glass tab\n *  in pressed state.\n * @cssproperty --mdc-tab-glass-active-color - Text and icon color for active glass tab.\n * @cssproperty --mdc-tab-glass-active-color-disabled - Text and icon color for active glass tab in disabled state.\n * @cssproperty --mdc-tab-glass-border-radius - Border radius for glass tab.\n * @cssproperty --mdc-tab-glass-inactive-background-color-disabled - Background color for inactive glass tab\n *  in disabled state.\n * @cssproperty --mdc-tab-glass-inactive-background-color-hover - Background color for inactive glass tab\n *  in hover state.\n * @cssproperty --mdc-tab-glass-inactive-background-color-normal - Background color for inactive glass tab\n *  in rest state.\n * @cssproperty --mdc-tab-glass-inactive-background-color-pressed - Background color for inactive glass tab\n *  in pressed state.\n * @cssproperty --mdc-tab-glass-inactive-color - Text and icon color for inactive glass tab.\n * @cssproperty --mdc-tab-glass-inactive-color-disabled - Text and icon color for inactive glass tab in disabled state.\n * @cssproperty --mdc-tab-line-active-background-color-pressed - Background color for active line tab in pressed state.\n * @cssproperty --mdc-tab-line-active-background-color-disabled - Background color for active line tab\n *  in disabled state.\n * @cssproperty --mdc-tab-line-active-background-color-hover - Background color for active line tab in hover state.\n * @cssproperty --mdc-tab-line-active-background-color-normal - Background color for active line tab in rest state.\n * @cssproperty --mdc-tab-line-active-color - Text and icon color for active line tab.\n * @cssproperty --mdc-tab-line-active-color-disabled - Text and icon color for active line tab in disabled state.\n * @cssproperty --mdc-tab-line-active-indicator-color - color for indicator in active line tab.\n * @cssproperty --mdc-tab-line-active-indicator-color-disabled - Color for indicator in active line tab\n *  in disabled state.\n * @cssproperty --mdc-tab-line-active-indicator-height - Height for indicator in active line tab.\n * @cssproperty --mdc-tab-line-active-indicator-width - Width for indicator in active line tab.\n * @cssproperty --mdc-tab-line-border-bottom-left-radius - Bottom left border radius for line tab.\n * @cssproperty --mdc-tab-line-border-bottom-right-radius - Bottom right border radius for line tab.\n * @cssproperty --mdc-tab-line-border-top-left-radius - Top left border radius for line tab.\n * @cssproperty --mdc-tab-line-border-top-right-radius - Top right border radius for line tab.\n * @cssproperty --mdc-tab-line-inactive-background-color-pressed - Background color for inactive line tab\n *  in pressed state.\n * @cssproperty --mdc-tab-line-inactive-background-color-disabled - Background color for inactive line tab\n *  in disabled state\n * @cssproperty --mdc-tab-line-inactive-background-color-hover - Background color for inactive line tab in hover state.\n * @cssproperty --mdc-tab-line-inactive-background-color-normal - Background color for inactive line tab\n *  in rest state.\n * @cssproperty --mdc-tab-line-inactive-color - Text and icon color for inactive line tab.\n * @cssproperty --mdc-tab-line-inactive-color-disabled - Text and icon color for inactive line tab in disabled state.\n * @cssproperty --mdc-tab-padding-left - Padding left for the tab.\n * @cssproperty --mdc-tab-padding-right - Padding right for the tab.\n * @cssproperty --mdc-tab-pill-active-background-color-pressed - Background color for active pill tab in pressed state.\n * @cssproperty --mdc-tab-pill-active-background-color-disabled - Background color for active pill tab\n *  in disabled state.\n * @cssproperty --mdc-tab-pill-active-background-color-hover - Background color for active pill tab in hover state.\n * @cssproperty --mdc-tab-pill-active-background-color-normal - Background color for active pill tab in rest state.\n * @cssproperty --mdc-tab-pill-active-color - Text and icon color for active pill tab.\n * @cssproperty --mdc-tab-pill-active-color-disabled - Text and icon color for active pill tab in disabled state.\n * @cssproperty --mdc-tab-pill-border-radius - Border radius for pill tab.\n * @cssproperty --mdc-tab-pill-inactive-background-color-pressed - Background color for inactive pill tab\n *  in pressed state.\n * @cssproperty --mdc-tab-pill-inactive-background-color-disabled - Background color for inactive pill tab\n *  in disabled state.\n * @cssproperty --mdc-tab-pill-inactive-background-color-hover - Background color for inactive pill tab in hover state.\n * @cssproperty --mdc-tab-pill-inactive-background-color-normal - Background color for inactive pill tab in rest state.\n * @cssproperty --mdc-tab-pill-inactive-color - Text and icon color for inactive pill tab.\n * @cssproperty --mdc-tab-pill-inactive-color-disabled - Text and icon color for inactive pill tab in disabled state.\n */",
-          "customElement": true
+          "tagName": "mdc-toggle",
+          "jsDoc": "/**\n * Toggle Component is an interactive control used to switch between two mutually exclusive options,\n * such as On/Off, Active/Inactive. These are commonly used in settings panels, forms, and preference selections\n * where users need to enable or disable a feature.\n * It contains an optional label and an optional helper text.\n *\n * To create a group of toggles, use the FormFieldGroup component.\n *\n * Note: It internally renders a checkbox styled as a toggle switch.\n *\n * @dependency mdc-icon\n *\n * @tagname mdc-toggle\n *\n * @cssproperty --mdc-toggle-width - width of the toggle\n * @cssproperty --mdc-toggle-height - height of the toggle\n * @cssproperty --mdc-toggle-width-compact - width of the toggle when it's size is compact\n * @cssproperty --mdc-toggle-height-compact - height of the toggle when it's size is compact\n * @cssproperty --mdc-toggle-border-radius - border radius of the toggle\n * @cssproperty --mdc-toggle-border-radius-compact - border radius of the toggle when it's size is compact\n * @cssproperty --mdc-toggle-border - border of the toggle\n * @cssproperty --mdc-toggle-inactive-rest-color - background color of the inactive toggle in rest state\n * @cssproperty --mdc-toggle-inactive-hover-color - background color of the inactive toggle in hover state\n * @cssproperty --mdc-toggle-inactive-pressed-color - background color of the inactive toggle in pressed state\n * @cssproperty --mdc-toggle-inactive-disabled-color - background color of the inactive toggle in disabled state\n * @cssproperty --mdc-toggle-active-rest-color - background color of the active toggle in rest state\n * @cssproperty --mdc-toggle-active-hover-color - background color of the active toggle in hover state\n * @cssproperty --mdc-toggle-active-pressed-color - background color of the active toggle in pressed state\n * @cssproperty --mdc-toggle-active-disabled-color - background color of the active toggle in disabled state\n * @cssproperty --mdc-toggle-help-text-color -  color of the help text label\n * @cssproperty --mdc-toggle-label-color-disabled - color of the toggle label and help text in disabled state\n *\n */",
+          "customElement": true,
+          "slots": [
+            {
+              "description": "slot to add the label info icon",
+              "name": "label-info",
+              "inheritedFrom": {
+                "name": "FormfieldWrapper",
+                "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
+              }
+            }
+          ]
         }
       ],
       "exports": [
@@ -6889,8 +6928,8 @@
           "kind": "js",
           "name": "default",
           "declaration": {
-            "name": "Tab",
-            "module": "components/tab/tab.component.js"
+            "name": "Toggle",
+            "module": "components/toggle/toggle.component.js"
           }
         }
       ]