@momentum-design/components 0.120.25 → 0.120.26

package/dist/custom-elements.json

@@ -37604,6 +37604,17 @@
               "attribute": "timeout",
               "reflects": true
             },
+            {
+              "kind": "field",
+              "name": "debounceTime",
+              "type": {
+                "text": "number"
+              },
+              "description": "The debounce time delay in milliseconds for announcements.",
+              "default": "500",
+              "attribute": "debounce-time",
+              "reflects": true
+            },
             {
               "kind": "method",
               "name": "announce",
@@ -37650,6 +37661,12 @@
               "name": "createAnnouncementAriaLiveRegion",
               "privacy": "private",
               "description": "Creates a div element with id as identity attribute in the DOM.\n\nIf the identity attribute is not provided, it is set internally to\n`mdc-screenreaderannouncer-identity`."
+            },
+            {
+              "kind": "method",
+              "name": "setupDebouncedAnnounce",
+              "privacy": "private",
+              "description": "Creates a single debounced function that will read the latest this.announcement when executed.\n\nThis function is used to debounce the announcement so that it will only be made after\nthis.debounceTime milliseconds have passed since the last time this.announcement was updated."
             }
           ],
           "attributes": [
@@ -37697,6 +37714,15 @@
               "description": "Milliseconds to wait after which the announcement element will be removed from\nidentity region in DOM, causing the screen reader to not announcing the message.",
               "default": "20_000",
               "fieldName": "timeout"
+            },
+            {
+              "name": "debounce-time",
+              "type": {
+                "text": "number"
+              },
+              "description": "The debounce time delay in milliseconds for announcements.",
+              "default": "500",
+              "fieldName": "debounceTime"
             }
           ],
           "superclass": {
@@ -42501,257 +42527,642 @@
     },
     {
       "kind": "javascript-module",
-      "path": "components/tab/tab.component.js",
+      "path": "components/stepperconnector/stepperconnector.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\nPass attribute `tabid` when using inside of `tablist` component.\n\nThe `slot=\"badge\"` can be used to add a badge to the tab.\n\nThe `slot=\"chip\"` can be used to add a chip to the tab.\n\nFor `icon`, the `mdc-icon` component is used to render the icon.\n\nNote: Icons can be used in conjunction with badges or chips.\nBadges and chips should not be used at the same time.",
-          "name": "Tab",
+          "description": "StepperConnector component visually represents the connection between two stepper items.\nIndicates whether the connection is complete or incomplete, and supports vertical or horizontal orientation.\nThey are used between 2 `mdc-stepperitem` components to visually connect them and wrapped in a `mdc-stepper` component.",
+          "name": "StepperConnector",
           "cssProperties": [
             {
-              "description": "Height for button size",
-              "name": "--mdc-button-height",
-              "inheritedFrom": {
-                "name": "Buttonsimple",
-                "module": "src/components/buttonsimple/buttonsimple.component.ts"
-              }
+              "description": "Background color for the complete connector",
+              "name": "--mdc-stepperconnector-complete-background"
             },
             {
-              "description": "Gap between the badge(if provided), icon and text.",
-              "name": "--mdc-tab-content-gap"
-            },
+              "description": "Background color for the incomplete connector",
+              "name": "--mdc-stepperconnector-incomplete-background"
+            }
+          ],
+          "cssParts": [
             {
-              "description": "Height of the tab.",
-              "name": "--mdc-tab-height"
-            },
+              "description": "The main connector line between steps",
+              "name": "connector"
+            }
+          ],
+          "members": [
             {
-              "description": "Background color for active glass tab in disabled state.",
-              "name": "--mdc-tab-glass-active-background-color-disabled"
+              "kind": "field",
+              "name": "status",
+              "type": {
+                "text": "StatusType"
+              },
+              "description": "The status of the connector (complete or incomplete)",
+              "default": "\"incomplete\"",
+              "attribute": "status",
+              "reflects": true
             },
             {
-              "description": "Background color for active glass tab in hover state.",
-              "name": "--mdc-tab-glass-active-background-color-hover"
-            },
+              "kind": "field",
+              "name": "orientation",
+              "type": {
+                "text": "OrientationType"
+              },
+              "description": "The orientation of the connector (vertical or horizontal)",
+              "default": "\"horizontal\"",
+              "attribute": "orientation",
+              "reflects": true
+            }
+          ],
+          "attributes": [
             {
-              "description": "Background color for active glass tab in rest state.",
-              "name": "--mdc-tab-glass-active-background-color-normal"
+              "name": "status",
+              "type": {
+                "text": "StatusType"
+              },
+              "description": "The status of the connector (complete or incomplete)",
+              "default": "\"incomplete\"",
+              "fieldName": "status"
             },
             {
-              "description": "Background color for active glass tab in pressed state.",
-              "name": "--mdc-tab-glass-active-background-color-pressed"
-            },
+              "name": "orientation",
+              "type": {
+                "text": "OrientationType"
+              },
+              "description": "The orientation of the connector (vertical or horizontal)",
+              "default": "\"horizontal\"",
+              "fieldName": "orientation"
+            }
+          ],
+          "superclass": {
+            "name": "Component",
+            "module": "/src/models"
+          },
+          "tagName": "mdc-stepperconnector",
+          "jsDoc": "/**\n * StepperConnector component visually represents the connection between two stepper items.\n * Indicates whether the connection is complete or incomplete, and supports vertical or horizontal orientation.\n * They are used between 2 `mdc-stepperitem` components to visually connect them and wrapped in a `mdc-stepper` component.\n *\n * @tagname mdc-stepperconnector\n *\n * @csspart connector - The main connector line between steps\n *\n * @cssproperty --mdc-stepperconnector-complete-background - Background color for the complete connector\n * @cssproperty --mdc-stepperconnector-incomplete-background - Background color for the incomplete connector\n */",
+          "customElement": true
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "default",
+          "declaration": {
+            "name": "StepperConnector",
+            "module": "components/stepperconnector/stepperconnector.component.js"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "components/stepperitem/stepperitem.component.js",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "stepperitem component is used to represent a single step in a stepper component. It is used within a `mdc-stepper` component to indicate the current step in a process.\nIt can have different statuses such as `completed`, `current`, `incomplete`, `error-current`, and `error-incomplete`.\nThe component supports various visual styles and can be customized with labels, help text, and step numbers.\n\nThis is an uncontrolled component, meaning it does not manage its own state. Instead, it relies on the consumer's to manage the state of each step.\nMake sure to set `aria-current=\"step\"` on the current stepper item. It is applicable only when status is `current` or `error-current`. This ensures accessibility for the stepper component. Only one stepper item should have this attribute at a time.\n\nAdditionally, make use of `aria-label` to provide a descriptive detail about the stepper item, especially for screen readers. If this aria-label is not set, it would read out only the label text and doesn't provide enough context for the user.",
+          "name": "StepperItem",
+          "cssProperties": [
             {
-              "description": "Text and icon color for active glass tab.",
-              "name": "--mdc-tab-glass-active-color"
+              "description": "The background color of the status container.",
+              "name": "--mdc-stepperitem-status-container-background"
             },
             {
-              "description": "Text and icon color for active glass tab in disabled state.",
-              "name": "--mdc-tab-glass-active-color-disabled"
+              "description": "The border color of the status container.",
+              "name": "--mdc-stepperitem-status-container-border-color"
             },
             {
-              "description": "Border radius for glass tab.",
-              "name": "--mdc-tab-glass-border-radius"
+              "description": "The color of the label text.",
+              "name": "--mdc-stepperitem-label-color"
             },
             {
-              "description": "Background color for inactive glass tab in disabled state.",
-              "name": "--mdc-tab-glass-inactive-background-color-disabled"
+              "description": "The color of the optional label text.",
+              "name": "--mdc-stepperitem-help-text-color"
             },
             {
-              "description": "Background color for inactive glass tab in hover state.",
-              "name": "--mdc-tab-glass-inactive-background-color-hover"
-            },
+              "description": "The background color of the label container.",
+              "name": "--mdc-stepperitem-label-container-background"
+            }
+          ],
+          "cssParts": [
             {
-              "description": "Background color for inactive glass tab in rest state.",
-              "name": "--mdc-tab-glass-inactive-background-color-normal"
+              "description": "The container for the status icon or step number.",
+              "name": "status-container"
             },
             {
-              "description": "Background color for inactive glass tab in pressed state.",
-              "name": "--mdc-tab-glass-inactive-background-color-pressed"
+              "description": "The container for the label and help text.",
+              "name": "label-container"
             },
             {
-              "description": "Text and icon color for inactive glass tab.",
-              "name": "--mdc-tab-glass-inactive-color"
+              "description": "The container for the help text and error icon when applicable.",
+              "name": "help-text-container"
             },
             {
-              "description": "Text and icon color for inactive glass tab in disabled state.",
-              "name": "--mdc-tab-glass-inactive-color-disabled"
+              "description": "The icon representing the status of the stepper item.",
+              "name": "status-icon"
             },
             {
-              "description": "Background color for active line tab in pressed state.",
-              "name": "--mdc-tab-line-active-background-color-pressed"
+              "description": "The text representing the step number.",
+              "name": "step-number"
             },
             {
-              "description": "Background color for active line tab in disabled state.",
-              "name": "--mdc-tab-line-active-background-color-disabled"
+              "description": "The text representing the label of the stepper item.",
+              "name": "label"
             },
             {
-              "description": "Background color for active line tab in hover state.",
-              "name": "--mdc-tab-line-active-background-color-hover"
+              "description": "The text providing additional information about the stepper item.",
+              "name": "help-text"
             },
             {
-              "description": "Background color for active line tab in rest state.",
-              "name": "--mdc-tab-line-active-background-color-normal"
+              "description": "The icon representing an error in the stepper item.",
+              "name": "help-icon"
+            }
+          ],
+          "members": [
+            {
+              "kind": "field",
+              "name": "variant",
+              "type": {
+                "text": "VariantType"
+              },
+              "description": "The variant of the stepper item, which can be `inline` or `stacked`.",
+              "default": "'inline'",
+              "attribute": "variant",
+              "reflects": true
             },
             {
-              "description": "Text and icon color for active line tab.",
-              "name": "--mdc-tab-line-active-color"
+              "kind": "field",
+              "name": "status",
+              "type": {
+                "text": "StatusType"
+              },
+              "description": "The status of the stepper item, which can be `completed`, `current`, `not-started`, `error-current`, or `error-incomplete`.",
+              "default": "'not-started'",
+              "attribute": "status",
+              "reflects": true
             },
             {
-              "description": "Text and icon color for active line tab in disabled state.",
-              "name": "--mdc-tab-line-active-color-disabled"
+              "kind": "field",
+              "name": "label",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "description": "The label for the stepper item, which is displayed as the main text of the step.\nThis label is typically used to describe the step or action that the step represents.",
+              "attribute": "label",
+              "reflects": true
             },
             {
-              "description": "color for indicator in active line tab.",
-              "name": "--mdc-tab-line-active-indicator-color"
+              "kind": "field",
+              "name": "helpText",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "Additional informational text that appears below the label\nThis text is optional and can be used to provide more context or instructions for the step.",
+              "default": "''",
+              "attribute": "help-text",
+              "reflects": true
             },
             {
-              "description": "Color for indicator in active line tab in disabled state.",
-              "name": "--mdc-tab-line-active-indicator-color-disabled"
+              "kind": "field",
+              "name": "stepNumber",
+              "type": {
+                "text": "number | undefined"
+              },
+              "description": "The step number for the stepper item, which is displayed as a numeric indicator of the step's position in the sequence.\nThis is useful for indicating the order of steps in a process.",
+              "default": "''",
+              "attribute": "step-number",
+              "reflects": true
             },
             {
-              "description": "Height for indicator in active line tab.",
-              "name": "--mdc-tab-line-active-indicator-height"
+              "kind": "method",
+              "name": "handleKeyDown",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "event",
+                  "type": {
+                    "text": "KeyboardEvent"
+                  },
+                  "description": "The keyboard event."
+                }
+              ],
+              "description": "Handles the keydown event on the stepperitem.\nIf the key is 'Enter' or 'Space', the stepperitem is pressed.\nIf the key is 'Enter', the stepperitem is pressed. The native HTML button works in the same way.\nIf the key is 'Space', the stepperitem's default is prevent to avoid scrolling etc in the host application."
             },
             {
-              "description": "Width for indicator in active line tab.",
-              "name": "--mdc-tab-line-active-indicator-width"
+              "kind": "method",
+              "name": "triggerClickEvent",
+              "privacy": "private",
+              "description": "Triggers a click event on the stepper item."
             },
             {
-              "description": "Bottom left border radius for line tab.",
-              "name": "--mdc-tab-line-border-bottom-left-radius"
+              "kind": "method",
+              "name": "handleKeyUp",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "event",
+                  "type": {
+                    "text": "KeyboardEvent"
+                  },
+                  "description": "The keyboard event."
+                }
+              ],
+              "description": "Handles the keyup event on the stepperitem.\nIf the key is 'Enter' or 'Space', the stepperitem is clicked.\nIf the key is 'Space', the stepperitem is pressed. The native HTML button works in the same way."
             },
             {
-              "description": "Bottom right border radius for line tab.",
-              "name": "--mdc-tab-line-border-bottom-right-radius"
+              "kind": "method",
+              "name": "renderStatusIcon",
+              "privacy": "private",
+              "description": "Renders the status icon based on the current status of the stepper item.\n- If the status is `completed`, it renders a check icon.\n- If the status is `current` or `error-current`, it renders a pencil icon.\n- If the status is `not-started` or `error-incomplete`, it renders the step number.\n- If the status is anything else, it renders nothing.",
+              "return": {
+                "type": {
+                  "text": ""
+                }
+              }
             },
             {
-              "description": "Top left border radius for line tab.",
-              "name": "--mdc-tab-line-border-top-left-radius"
+              "kind": "method",
+              "name": "renderHelpText",
+              "privacy": "private",
+              "description": "Renders the help text for the stepper item.\nIf the `helpText` property is not set, it returns nothing.",
+              "return": {
+                "type": {
+                  "text": ""
+                }
+              }
             },
             {
-              "description": "Top right border radius for line tab.",
-              "name": "--mdc-tab-line-border-top-right-radius"
-            },
+              "kind": "field",
+              "name": "tabIndex",
+              "type": {
+                "text": "number"
+              },
+              "default": "0",
+              "description": "This property specifies the tab order of the element.",
+              "attribute": "tabIndex",
+              "reflects": true,
+              "inheritedFrom": {
+                "name": "TabIndexMixin",
+                "module": "utils/mixins/TabIndexMixin.js"
+              }
+            }
+          ],
+          "events": [
             {
-              "description": "Background color for inactive line tab in pressed state.",
-              "name": "--mdc-tab-line-inactive-background-color-pressed"
+              "description": "(React: onClick) This event is dispatched when the stepperitem is clicked.",
+              "name": "click",
+              "reactName": "onClick"
             },
             {
-              "description": "Background color for inactive line tab in disabled state",
-              "name": "--mdc-tab-line-inactive-background-color-disabled"
+              "description": "(React: onKeyDown) This event is dispatched when a key is pressed down on the stepperitem.",
+              "name": "keydown",
+              "reactName": "onKeyDown"
             },
             {
-              "description": "Background color for inactive line tab in hover state.",
-              "name": "--mdc-tab-line-inactive-background-color-hover"
-            },
+              "description": "(React: onKeyUp) This event is dispatched when a key is released on the stepperitem.",
+              "name": "keyup",
+              "reactName": "onKeyUp"
+            }
+          ],
+          "attributes": [
             {
-              "description": "Background color for inactive line tab in rest state.",
-              "name": "--mdc-tab-line-inactive-background-color-normal"
+              "name": "variant",
+              "type": {
+                "text": "VariantType"
+              },
+              "description": "The variant of the stepper item, which can be `inline` or `stacked`.",
+              "default": "'inline'",
+              "fieldName": "variant"
             },
             {
-              "description": "Text and icon color for inactive line tab.",
-              "name": "--mdc-tab-line-inactive-color"
+              "name": "status",
+              "type": {
+                "text": "StatusType"
+              },
+              "description": "The status of the stepper item, which can be `completed`, `current`, `not-started`, `error-current`, or `error-incomplete`.",
+              "default": "'not-started'",
+              "fieldName": "status"
             },
             {
-              "description": "Text and icon color for inactive line tab in disabled state.",
-              "name": "--mdc-tab-line-inactive-color-disabled"
+              "name": "label",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "description": "The label for the stepper item, which is displayed as the main text of the step.\nThis label is typically used to describe the step or action that the step represents.",
+              "fieldName": "label"
             },
             {
-              "description": "Padding left for the tab.",
-              "name": "--mdc-tab-padding-left"
+              "name": "help-text",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "Additional informational text that appears below the label\nThis text is optional and can be used to provide more context or instructions for the step.",
+              "default": "''",
+              "fieldName": "helpText"
             },
             {
-              "description": "Padding right for the tab.",
-              "name": "--mdc-tab-padding-right"
+              "name": "step-number",
+              "type": {
+                "text": "number | undefined"
+              },
+              "description": "The step number for the stepper item, which is displayed as a numeric indicator of the step's position in the sequence.\nThis is useful for indicating the order of steps in a process.",
+              "default": "''",
+              "fieldName": "stepNumber"
             },
             {
-              "description": "Background color for active pill tab in pressed state.",
-              "name": "--mdc-tab-pill-active-background-color-pressed"
-            },
+              "name": "tabIndex",
+              "type": {
+                "text": "number"
+              },
+              "default": "0",
+              "description": "This property specifies the tab order of the element.",
+              "fieldName": "tabIndex",
+              "inheritedFrom": {
+                "name": "TabIndexMixin",
+                "module": "src/utils/mixins/TabIndexMixin.ts"
+              }
+            }
+          ],
+          "mixins": [
             {
-              "description": "Background color for active pill tab in disabled state.",
-              "name": "--mdc-tab-pill-active-background-color-disabled"
-            },
+              "name": "TabIndexMixin",
+              "module": "/src/utils/mixins/TabIndexMixin"
+            }
+          ],
+          "superclass": {
+            "name": "Component",
+            "module": "/src/models"
+          },
+          "tagName": "mdc-stepperitem",
+          "jsDoc": "/**\n * stepperitem component is used to represent a single step in a stepper component. It is used within a `mdc-stepper` component to indicate the current step in a process.\n * It can have different statuses such as `completed`, `current`, `incomplete`, `error-current`, and `error-incomplete`.\n * The component supports various visual styles and can be customized with labels, help text, and step numbers.\n *\n * This is an uncontrolled component, meaning it does not manage its own state. Instead, it relies on the consumer's to manage the state of each step.\n * Make sure to set `aria-current=\"step\"` on the current stepper item. It is applicable only when status is `current` or `error-current`. This ensures accessibility for the stepper component. Only one stepper item should have this attribute at a time.\n *\n * Additionally, make use of `aria-label` to provide a descriptive detail about the stepper item, especially for screen readers. If this aria-label is not set, it would read out only the label text and doesn't provide enough context for the user.\n *\n * @dependency mdc-icon\n * @dependency mdc-text\n *\n * @tagname mdc-stepperitem\n *\n * @event click - (React: onClick) This event is dispatched when the stepperitem is clicked.\n * @event keydown - (React: onKeyDown) This event is dispatched when a key is pressed down on the stepperitem.\n * @event keyup - (React: onKeyUp) This event is dispatched when a key is released on the stepperitem.\n *\n * @csspart status-container - The container for the status icon or step number.\n * @csspart label-container - The container for the label and help text.\n * @csspart help-text-container - The container for the help text and error icon when applicable.\n * @csspart status-icon - The icon representing the status of the stepper item.\n * @csspart step-number - The text representing the step number.\n * @csspart label - The text representing the label of the stepper item.\n * @csspart help-text - The text providing additional information about the stepper item.\n * @csspart help-icon - The icon representing an error in the stepper item.\n *\n * @cssproperty --mdc-stepperitem-status-container-background - The background color of the status container.\n * @cssproperty --mdc-stepperitem-status-container-border-color - The border color of the status container.\n * @cssproperty --mdc-stepperitem-label-color - The color of the label text.\n * @cssproperty --mdc-stepperitem-help-text-color - The color of the optional label text.\n * @cssproperty --mdc-stepperitem-label-container-background - The background color of the label container.\n */",
+          "customElement": true
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "default",
+          "declaration": {
+            "name": "StepperItem",
+            "module": "components/stepperitem/stepperitem.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\nPass attribute `tabid` when using inside of `tablist` component.\n\nThe `slot=\"badge\"` can be used to add a badge to the tab.\n\nThe `slot=\"chip\"` can be used to add a chip to the tab.\n\nFor `icon`, the `mdc-icon` component is used to render the icon.\n\nNote: Icons can be used in conjunction with badges or chips.\nBadges and chips should not be used at the same time.",
+          "name": "Tab",
+          "cssProperties": [
             {
-              "description": "Background color for active pill tab in hover state.",
-              "name": "--mdc-tab-pill-active-background-color-hover"
+              "description": "Height for button size",
+              "name": "--mdc-button-height",
+              "inheritedFrom": {
+                "name": "Buttonsimple",
+                "module": "src/components/buttonsimple/buttonsimple.component.ts"
+              }
             },
             {
-              "description": "Background color for active pill tab in rest state.",
-              "name": "--mdc-tab-pill-active-background-color-normal"
+              "description": "Gap between the badge(if provided), icon and text.",
+              "name": "--mdc-tab-content-gap"
             },
             {
-              "description": "Text and icon color for active pill tab.",
-              "name": "--mdc-tab-pill-active-color"
+              "description": "Height of the tab.",
+              "name": "--mdc-tab-height"
             },
             {
-              "description": "Text and icon color for active pill tab in disabled state.",
-              "name": "--mdc-tab-pill-active-color-disabled"
+              "description": "Background color for active glass tab in disabled state.",
+              "name": "--mdc-tab-glass-active-background-color-disabled"
             },
             {
-              "description": "Border radius for pill tab.",
-              "name": "--mdc-tab-pill-border-radius"
+              "description": "Background color for active glass tab in hover state.",
+              "name": "--mdc-tab-glass-active-background-color-hover"
             },
             {
-              "description": "Background color for inactive pill tab in pressed state.",
-              "name": "--mdc-tab-pill-inactive-background-color-pressed"
+              "description": "Background color for active glass tab in rest state.",
+              "name": "--mdc-tab-glass-active-background-color-normal"
             },
             {
-              "description": "Background color for inactive pill tab in disabled state.",
-              "name": "--mdc-tab-pill-inactive-background-color-disabled"
+              "description": "Background color for active glass tab in pressed state.",
+              "name": "--mdc-tab-glass-active-background-color-pressed"
             },
             {
-              "description": "Background color for inactive pill tab in hover state.",
-              "name": "--mdc-tab-pill-inactive-background-color-hover"
+              "description": "Text and icon color for active glass tab.",
+              "name": "--mdc-tab-glass-active-color"
             },
             {
-              "description": "Background color for inactive pill tab in rest state.",
-              "name": "--mdc-tab-pill-inactive-background-color-normal"
+              "description": "Text and icon color for active glass tab in disabled state.",
+              "name": "--mdc-tab-glass-active-color-disabled"
             },
             {
-              "description": "Text and icon color for inactive pill tab.",
-              "name": "--mdc-tab-pill-inactive-color"
+              "description": "Border radius for glass tab.",
+              "name": "--mdc-tab-glass-border-radius"
             },
             {
-              "description": "Text and icon color for inactive pill tab in disabled state.",
-              "name": "--mdc-tab-pill-inactive-color-disabled"
+              "description": "Background color for inactive glass tab in disabled state.",
+              "name": "--mdc-tab-glass-inactive-background-color-disabled"
             },
             {
-              "description": "Background color of the button",
-              "name": "--mdc-button-background",
-              "inheritedFrom": {
-                "name": "Buttonsimple",
-                "module": "src/components/buttonsimple/buttonsimple.component.ts"
-              }
+              "description": "Background color for inactive glass tab in hover state.",
+              "name": "--mdc-tab-glass-inactive-background-color-hover"
             },
             {
-              "description": "Borer color of the button",
-              "name": "--mdc-button-border-color",
-              "inheritedFrom": {
-                "name": "Buttonsimple",
-                "module": "src/components/buttonsimple/buttonsimple.component.ts"
-              }
+              "description": "Background color for inactive glass tab in rest state.",
+              "name": "--mdc-tab-glass-inactive-background-color-normal"
             },
             {
-              "description": "Text color of the button",
-              "name": "--mdc-button-text-color",
-              "inheritedFrom": {
-                "name": "Buttonsimple",
-                "module": "src/components/buttonsimple/buttonsimple.component.ts"
-              }
-            }
-          ],
-          "cssParts": [
-            {
-              "description": "The container of the tab.",
-              "name": "container"
+              "description": "Background color for inactive glass tab in pressed state.",
+              "name": "--mdc-tab-glass-inactive-background-color-pressed"
             },
             {
-              "description": "The icon of the tab.",
-              "name": "icon"
+              "description": "Text and icon color for inactive glass tab.",
+              "name": "--mdc-tab-glass-inactive-color"
             },
             {
-              "description": "The indicator of the tab.",
+              "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": "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"
+            },
+            {
+              "description": "Background color of the button",
+              "name": "--mdc-button-background",
+              "inheritedFrom": {
+                "name": "Buttonsimple",
+                "module": "src/components/buttonsimple/buttonsimple.component.ts"
+              }
+            },
+            {
+              "description": "Borer color of the button",
+              "name": "--mdc-button-border-color",
+              "inheritedFrom": {
+                "name": "Buttonsimple",
+                "module": "src/components/buttonsimple/buttonsimple.component.ts"
+              }
+            },
+            {
+              "description": "Text color of the button",
+              "name": "--mdc-button-text-color",
+              "inheritedFrom": {
+                "name": "Buttonsimple",
+                "module": "src/components/buttonsimple/buttonsimple.component.ts"
+              }
+            }
+          ],
+          "cssParts": [
+            {
+              "description": "The container of the tab.",
+              "name": "container"
+            },
+            {
+              "description": "The icon of the tab.",
+              "name": "icon"
+            },
+            {
+              "description": "The indicator of the tab.",
               "name": "indicator"
             },
             {
@@ -42993,673 +43404,143 @@
               "attribute": "role",
               "reflects": true,
               "inheritedFrom": {
-                "name": "Buttonsimple",
-                "module": "components/buttonsimple/buttonsimple.component.js"
-              }
-            },
-            {
-              "kind": "field",
-              "name": "ariaStateKey",
-              "type": {
-                "text": "string | undefined"
-              },
-              "description": "This property defines the ARIA state key, which will be toggled when the\nButton is set to `active`.\nThe default value is 'aria-pressed', which is commonly used for toggle buttons.\n\nConsumers can override this property to use a different ARIA state key if needed.\nIn case multiple aria attributes should be toggled, they can be passed in as\na comma separated string.\nFor example: `aria-pressed,aria-expanded`",
-              "default": "'aria-pressed' (when)",
-              "attribute": "ariaStateKey",
-              "reflects": true,
-              "inheritedFrom": {
-                "name": "Buttonsimple",
-                "module": "components/buttonsimple/buttonsimple.component.js"
-              }
-            },
-            {
-              "kind": "field",
-              "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",
-              "attribute": "type",
-              "reflects": true,
-              "inheritedFrom": {
-                "name": "Buttonsimple",
-                "module": "components/buttonsimple/buttonsimple.component.js"
-              }
-            },
-            {
-              "kind": "field",
-              "name": "name",
-              "type": {
-                "text": "string | undefined"
-              },
-              "description": "The name of the button, submitted as a pair with the button's value as part of the form data,\nwhen that button is used to submit the form.",
-              "attribute": "name",
-              "reflects": true,
-              "inheritedFrom": {
-                "name": "Buttonsimple",
-                "module": "components/buttonsimple/buttonsimple.component.js"
-              }
-            },
-            {
-              "kind": "field",
-              "name": "value",
-              "type": {
-                "text": "string | undefined"
-              },
-              "description": "Defines the value associated with the button's name when it's submitted with the form data.\nThis value is passed to the server in params when the form is submitted using this button.",
-              "attribute": "value",
-              "reflects": true,
-              "inheritedFrom": {
-                "name": "Buttonsimple",
-                "module": "components/buttonsimple/buttonsimple.component.js"
-              }
-            },
-            {
-              "kind": "method",
-              "name": "setSoftDisabled",
-              "privacy": "private",
-              "parameters": [
-                {
-                  "name": "element",
-                  "type": {
-                    "text": "HTMLElement"
-                  },
-                  "description": "The button element."
-                },
-                {
-                  "name": "softDisabled",
-                  "optional": true,
-                  "type": {
-                    "text": "boolean"
-                  },
-                  "description": "The soft-disabled state."
-                }
-              ],
-              "description": "Sets the soft-disabled attribute for the button.\nWhen soft-disabled, the button looks to be disabled but remains focusable and clickable.\nAlso sets/removes aria-disabled attribute.",
-              "inheritedFrom": {
-                "name": "Buttonsimple",
-                "module": "components/buttonsimple/buttonsimple.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."
-                }
-              ],
-              "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"
-              }
-            },
-            {
-              "kind": "method",
-              "name": "triggerClickEvent",
-              "privacy": "private",
-              "inheritedFrom": {
-                "name": "Buttonsimple",
-                "module": "components/buttonsimple/buttonsimple.component.js"
-              }
-            },
-            {
-              "kind": "method",
-              "name": "handleBlur",
-              "privacy": "private",
-              "description": "In case the button is pressed and the focus is lost while pressing,\nthe pressed class is removed.",
-              "inheritedFrom": {
-                "name": "Buttonsimple",
-                "module": "components/buttonsimple/buttonsimple.component.js"
-              }
-            },
-            {
-              "kind": "method",
-              "name": "handleKeyDown",
-              "privacy": "private",
-              "parameters": [
-                {
-                  "name": "event",
-                  "type": {
-                    "text": "KeyboardEvent"
-                  },
-                  "description": "The keyboard event."
-                }
-              ],
-              "description": "Handles the keydown event on the button.\nIf the key is 'Enter' or 'Space', the button is pressed.\nIf the key is 'Enter', the button is pressed. The native HTML button works in the same way.\nIf the key is 'Space', the button's default is prevent to avoid scrolling etc in the host application.",
-              "inheritedFrom": {
-                "name": "Buttonsimple",
-                "module": "components/buttonsimple/buttonsimple.component.js"
-              }
-            },
-            {
-              "kind": "method",
-              "name": "handleKeyUp",
-              "privacy": "private",
-              "parameters": [
-                {
-                  "name": "event",
-                  "type": {
-                    "text": "KeyboardEvent"
-                  },
-                  "description": "The keyboard event."
-                }
-              ],
-              "description": "Handles the keyup event on the button.\nIf the key is 'Enter' or 'Space', the button is clicked.\nIf the key is 'Space', the button is pressed. The native HTML button works in the same way.",
-              "inheritedFrom": {
-                "name": "Buttonsimple",
-                "module": "components/buttonsimple/buttonsimple.component.js"
-              }
-            }
-          ],
-          "events": [
-            {
-              "description": "(React: onClick) This event is dispatched when the tab is clicked.",
-              "name": "click",
-              "reactName": "onClick",
-              "inheritedFrom": {
-                "name": "Buttonsimple",
-                "module": "src/components/buttonsimple/buttonsimple.component.ts"
-              }
-            },
-            {
-              "description": "(React: onKeyDown) This event is dispatched when a key is pressed down on the tab.",
-              "name": "keydown",
-              "reactName": "onKeyDown",
-              "inheritedFrom": {
-                "name": "Buttonsimple",
-                "module": "src/components/buttonsimple/buttonsimple.component.ts"
-              }
-            },
-            {
-              "description": "(React: onKeyUp) This event is dispatched when a key is released on the tab.",
-              "name": "keyup",
-              "reactName": "onKeyUp",
-              "inheritedFrom": {
-                "name": "Buttonsimple",
-                "module": "src/components/buttonsimple/buttonsimple.component.ts"
-              }
-            },
-            {
-              "description": "(React: onFocus) This event is dispatched when the tab receives focus.",
-              "name": "focus",
-              "reactName": "onFocus",
-              "inheritedFrom": {
-                "name": "Buttonsimple",
-                "module": "src/components/buttonsimple/buttonsimple.component.ts"
-              }
-            },
-            {
-              "description": "(React: onActiveChange) This event is dispatched when the active state of the tab changes <br /> Event Data: `detail: { tabId: this.tabId, active }` <br /> Note: the activechange event is used by the tab list component to react to the change in state of the tab, so this event won't be needed if the tab list is used.",
-              "name": "activechange",
-              "reactName": "onActiveChange"
-            }
-          ],
-          "attributes": [
-            {
-              "name": "active",
-              "type": {
-                "text": "boolean | undefined"
-              },
-              "description": "The tab's active state indicates whether it is currently toggled on (active) or off (inactive).\nWhen the active state is true, the tab is considered to be in an active state, meaning it is toggled on.\nConversely, when the active state is false, the tab is in an inactive state, indicating it is toggled off.\n\nThis attribute also controls the \"aria-selected\" attribute of the tab.\nWhen the tab is active, \"aria-selected\" is set to true, indicating that the tab is selected.\nWhen the tab is inactive, \"aria-selected\" is set to false, indicating that the tab is not selected.",
-              "default": "false",
-              "fieldName": "active",
-              "inheritedFrom": {
-                "name": "Buttonsimple",
-                "module": "src/components/buttonsimple/buttonsimple.component.ts"
-              }
-            },
-            {
-              "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.",
-              "fieldName": "text"
-            },
-            {
-              "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",
-              "fieldName": "variant"
-            },
-            {
-              "name": "tab-id",
-              "type": {
-                "text": "string | undefined"
-              },
-              "description": "Id of the tab (used as a identificator when used in the tablist)\nNote: has to be unique!",
-              "default": "undefined",
-              "fieldName": "tabId"
-            },
-            {
-              "name": "icon-name",
-              "type": {
-                "text": "IconNames | undefined"
-              },
-              "description": "Name of the icon (= filename).\n\nIf no `icon-name` is provided, no icon will be rendered.",
-              "fieldName": "iconName",
-              "inheritedFrom": {
-                "name": "IconNameMixin",
-                "module": "src/utils/mixins/IconNameMixin.ts"
-              }
-            },
-            {
-              "name": "auto-focus-on-mount",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "This property indicates whether the element should receive focus automatically when it is mounted.\n\nIt will not focus if the element is re-attached to the DOM after being removed.",
-              "fieldName": "autoFocusOnMount",
-              "inheritedFrom": {
-                "name": "Buttonsimple",
-                "module": "src/components/buttonsimple/buttonsimple.component.ts"
-              }
-            },
-            {
-              "name": "tabIndex",
-              "type": {
-                "text": "number"
-              },
-              "default": "0",
-              "description": "This property specifies the tab order of the element.",
-              "fieldName": "tabIndex",
-              "inheritedFrom": {
-                "name": "Buttonsimple",
-                "module": "src/components/buttonsimple/buttonsimple.component.ts"
-              }
-            },
-            {
-              "name": "disabled",
-              "type": {
-                "text": "boolean | undefined"
-              },
-              "description": "Indicates whether the component is disabled.\nWhen the component is disabled for user interaction; it is not focusable or clickable.",
-              "default": "undefined",
-              "fieldName": "disabled",
-              "inheritedFrom": {
-                "name": "Buttonsimple",
-                "module": "src/components/buttonsimple/buttonsimple.component.ts"
-              }
-            },
-            {
-              "name": "soft-disabled",
-              "type": {
-                "text": "boolean | undefined"
-              },
-              "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.",
-              "default": "undefined",
-              "fieldName": "softDisabled",
-              "inheritedFrom": {
-                "name": "Buttonsimple",
-                "module": "src/components/buttonsimple/buttonsimple.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",
-              "inheritedFrom": {
-                "name": "Buttonsimple",
-                "module": "src/components/buttonsimple/buttonsimple.component.ts"
-              }
-            },
-            {
-              "name": "role",
-              "type": {
-                "text": "RoleType"
-              },
-              "description": "This property defines the ARIA role for the element. By default, it is set to 'button'.\nConsumers should override this role when:\n- The element is being used in a context where a different role is more appropriate.\n- Custom behaviors are implemented that require a specific ARIA role for accessibility purposes.",
-              "default": "button",
-              "fieldName": "role",
-              "inheritedFrom": {
-                "name": "Buttonsimple",
-                "module": "src/components/buttonsimple/buttonsimple.component.ts"
-              }
-            },
-            {
-              "name": "ariaStateKey",
-              "type": {
-                "text": "string | undefined"
-              },
-              "description": "This property defines the ARIA state key, which will be toggled when the\nButton is set to `active`.\nThe default value is 'aria-pressed', which is commonly used for toggle buttons.\n\nConsumers can override this property to use a different ARIA state key if needed.\nIn case multiple aria attributes should be toggled, they can be passed in as\na comma separated string.\nFor example: `aria-pressed,aria-expanded`",
-              "default": "'aria-pressed' (when)",
-              "fieldName": "ariaStateKey",
-              "inheritedFrom": {
-                "name": "Buttonsimple",
-                "module": "src/components/buttonsimple/buttonsimple.component.ts"
-              }
-            },
-            {
-              "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"
-              }
-            },
-            {
-              "name": "name",
-              "type": {
-                "text": "string | undefined"
-              },
-              "description": "The name of the button, submitted as a pair with the button's value as part of the form data,\nwhen that button is used to submit the form.",
-              "fieldName": "name",
-              "inheritedFrom": {
-                "name": "Buttonsimple",
-                "module": "src/components/buttonsimple/buttonsimple.component.ts"
-              }
-            },
-            {
-              "name": "value",
-              "type": {
-                "text": "string | undefined"
-              },
-              "description": "Defines the value associated with the button's name when it's submitted with the form data.\nThis value is passed to the server in params when the form is submitted using this button.",
-              "fieldName": "value",
-              "inheritedFrom": {
-                "name": "Buttonsimple",
-                "module": "src/components/buttonsimple/buttonsimple.component.ts"
-              }
-            }
-          ],
-          "mixins": [
-            {
-              "name": "IconNameMixin",
-              "module": "/src/utils/mixins/IconNameMixin"
-            }
-          ],
-          "superclass": {
-            "name": "Buttonsimple",
-            "module": "/src/components/buttonsimple/buttonsimple.component"
-          },
-          "tagName": "mdc-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 * Pass attribute `tabid` when using inside of `tablist` component.\n *\n * The `slot=\"badge\"` can be used to add a badge to the tab.\n *\n * The `slot=\"chip\"` can be used to add a chip to the tab.\n *\n * For `icon`, the `mdc-icon` component is used to render the icon.\n *\n * Note: Icons can be used in conjunction with badges or chips.\n * Badges and chips should not be used at the same time.\n *\n * @dependency mdc-icon\n * @dependency mdc-text\n *\n * @event click - (React: onClick) This event is dispatched when the tab is clicked.\n * @event keydown - (React: onKeyDown) This event is dispatched when a key is pressed down on the tab.\n * @event keyup - (React: onKeyUp) This event is dispatched when a key is released on the tab.\n * @event focus - (React: onFocus) This event is dispatched when the tab receives focus.\n * @event activechange - (React: onActiveChange) This event is dispatched when the active state of the tab changes\n * <br />\n * Event Data: `detail: { tabId: this.tabId, active }`\n * <br />\n * Note: the activechange event is used by the tab list component to react to the change in state of the tab,\n * so this event won't be needed if the tab list is used.\n *\n * @tagname mdc-tab\n *\n * @cssproperty --mdc-button-height - Height for button size\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 *\n * @csspart container - The container of the tab.\n * @csspart icon - The icon of the tab.\n * @csspart indicator - The indicator of the tab.\n * @csspart text - The text of the tab.\n */",
-          "customElement": true
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "default",
-          "declaration": {
-            "name": "Tab",
-            "module": "components/tab/tab.component.js"
-          }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "components/tablist/tablist.component.js",
-      "declarations": [
-        {
-          "kind": "class",
-          "description": "Tab list organizes tabs into a container.\n\nChildren of the tab list are `mdc-tab` elements, sent to the default slot.\n\nThe tabs can be navigated using the left/right arrow keys, and selected by clicking,\n or pressing the Enter and Space keys.\n\n**Implicit accessibility rules**\n\n- The element that serves as the container for the set of tabs has role `tablist`.\n- Each element that serves as a tab has role `tab` and is contained within the element with role `tablist`.\n- The active tab element has the state `aria-selected` set to `true`\n  and all other tab elements have it set to `false`.\n\n\n**Accessibility notes for consuming (have to be explicitly set when you consume the component)**\n\n- Each element that contains the `content panel` for a `tab` has role `tabpanel`.\n- The `tablist` element needs to have a label provided by `data-aria-label`.\n- Each element with role `tab` has the property `aria-controls`\n that should refer to its associated `tabpanel` element.\n- Each element with role `tabpanel` has the property `aria-labelledby` referring to its associated `tab` element.\n- If a `tab` element has a popup menu, it needs to have the property `aria-haspopup` set to either `menu` or `true`.",
-          "name": "TabList",
-          "cssProperties": [
-            {
-              "description": "Gap between tabs",
-              "name": "--mdc-tablist-gap"
-            },
-            {
-              "description": "Width of the tablist",
-              "name": "--mdc-tablist-width"
-            },
-            {
-              "description": "Margin value for the arrow button",
-              "name": "--mdc-tablist-arrow-button-margin"
-            }
-          ],
-          "cssParts": [
-            {
-              "description": "The tablist container.",
-              "name": "container"
-            }
-          ],
-          "slots": [
-            {
-              "description": "slot for mdc-tab elements.",
-              "name": "Default"
-            }
-          ],
-          "members": [
-            {
-              "kind": "field",
-              "name": "activeTabId",
-              "type": {
-                "text": "string | undefined"
-              },
-              "description": "ID of the active tab, defaults to the first tab if not provided",
-              "attribute": "active-tab-id",
-              "reflects": true
-            },
-            {
-              "kind": "field",
-              "name": "dataAriaLabel",
-              "type": {
-                "text": "string | undefined"
-              },
-              "description": "Label for the tablist.\nThis is used when the tablist does not have a visible label.",
-              "attribute": "data-aria-label"
-            }
-          ],
-          "events": [
-            {
-              "description": "(React: onChange) This event is dispatched when the tab is selected. Event that fires when user changes the active tab. The function sent as the argument will receive the fired event and the new tab id can be fetched from event.detail.tabId. `(event: CustomEvent) => handleTabChange(event.detail.tabId);`",
-              "name": "change",
-              "reactName": "onChange"
-            }
-          ],
-          "attributes": [
-            {
-              "name": "active-tab-id",
-              "type": {
-                "text": "string | undefined"
-              },
-              "description": "ID of the active tab, defaults to the first tab if not provided",
-              "fieldName": "activeTabId"
-            },
-            {
-              "name": "data-aria-label",
-              "type": {
-                "text": "string | undefined"
-              },
-              "description": "Label for the tablist.\nThis is used when the tablist does not have a visible label.",
-              "fieldName": "dataAriaLabel"
-            }
-          ],
-          "superclass": {
-            "name": "Component",
-            "module": "/src/models"
-          },
-          "tagName": "mdc-tablist",
-          "jsDoc": "/**\n * Tab list organizes tabs into a container.\n *\n * Children of the tab list are `mdc-tab` elements, sent to the default slot.\n *\n * The tabs can be navigated using the left/right arrow keys, and selected by clicking,\n *  or pressing the Enter and Space keys.\n *\n * **Implicit accessibility rules**\n *\n * - The element that serves as the container for the set of tabs has role `tablist`.\n * - Each element that serves as a tab has role `tab` and is contained within the element with role `tablist`.\n * - The active tab element has the state `aria-selected` set to `true`\n *   and all other tab elements have it set to `false`.\n *\n *\n * **Accessibility notes for consuming (have to be explicitly set when you consume the component)**\n *\n * - Each element that contains the `content panel` for a `tab` has role `tabpanel`.\n * - The `tablist` element needs to have a label provided by `data-aria-label`.\n * - Each element with role `tab` has the property `aria-controls`\n *  that should refer to its associated `tabpanel` element.\n * - Each element with role `tabpanel` has the property `aria-labelledby` referring to its associated `tab` element.\n * - If a `tab` element has a popup menu, it needs to have the property `aria-haspopup` set to either `menu` or `true`.\n *\n * @tagname mdc-tablist\n *\n * @dependency mdc-tab\n * @dependency mdc-button\n *\n * @event change - (React: onChange) This event is dispatched when the tab is selected.\n * Event that fires when user changes the active tab.\n *     The function sent as the argument will receive the fired event\n *      and the new tab id can be fetched from event.detail.tabId.\n *\n *    `(event: CustomEvent) => handleTabChange(event.detail.tabId);`\n *\n * @slot Default slot for mdc-tab elements.\n *\n * @cssproperty --mdc-tablist-gap - Gap between tabs\n * @cssproperty --mdc-tablist-width - Width of the tablist\n * @cssproperty --mdc-tablist-arrow-button-margin - Margin value for the arrow button\n *\n * @csspart container - The tablist container.\n */",
-          "customElement": true
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "default",
-          "declaration": {
-            "name": "TabList",
-            "module": "components/tablist/tablist.component.js"
-          }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "components/stepperitem/stepperitem.component.js",
-      "declarations": [
-        {
-          "kind": "class",
-          "description": "stepperitem component is used to represent a single step in a stepper component. It is used within a `mdc-stepper` component to indicate the current step in a process.\nIt can have different statuses such as `completed`, `current`, `incomplete`, `error-current`, and `error-incomplete`.\nThe component supports various visual styles and can be customized with labels, help text, and step numbers.\n\nThis is an uncontrolled component, meaning it does not manage its own state. Instead, it relies on the consumer's to manage the state of each step.\nMake sure to set `aria-current=\"step\"` on the current stepper item. It is applicable only when status is `current` or `error-current`. This ensures accessibility for the stepper component. Only one stepper item should have this attribute at a time.\n\nAdditionally, make use of `aria-label` to provide a descriptive detail about the stepper item, especially for screen readers. If this aria-label is not set, it would read out only the label text and doesn't provide enough context for the user.",
-          "name": "StepperItem",
-          "cssProperties": [
-            {
-              "description": "The background color of the status container.",
-              "name": "--mdc-stepperitem-status-container-background"
-            },
-            {
-              "description": "The border color of the status container.",
-              "name": "--mdc-stepperitem-status-container-border-color"
-            },
-            {
-              "description": "The color of the label text.",
-              "name": "--mdc-stepperitem-label-color"
-            },
-            {
-              "description": "The color of the optional label text.",
-              "name": "--mdc-stepperitem-help-text-color"
-            },
-            {
-              "description": "The background color of the label container.",
-              "name": "--mdc-stepperitem-label-container-background"
-            }
-          ],
-          "cssParts": [
-            {
-              "description": "The container for the status icon or step number.",
-              "name": "status-container"
-            },
-            {
-              "description": "The container for the label and help text.",
-              "name": "label-container"
-            },
-            {
-              "description": "The container for the help text and error icon when applicable.",
-              "name": "help-text-container"
-            },
-            {
-              "description": "The icon representing the status of the stepper item.",
-              "name": "status-icon"
-            },
-            {
-              "description": "The text representing the step number.",
-              "name": "step-number"
-            },
-            {
-              "description": "The text representing the label of the stepper item.",
-              "name": "label"
-            },
-            {
-              "description": "The text providing additional information about the stepper item.",
-              "name": "help-text"
-            },
-            {
-              "description": "The icon representing an error in the stepper item.",
-              "name": "help-icon"
-            }
-          ],
-          "members": [
+                "name": "Buttonsimple",
+                "module": "components/buttonsimple/buttonsimple.component.js"
+              }
+            },
             {
               "kind": "field",
-              "name": "variant",
+              "name": "ariaStateKey",
               "type": {
-                "text": "VariantType"
+                "text": "string | undefined"
               },
-              "description": "The variant of the stepper item, which can be `inline` or `stacked`.",
-              "default": "'inline'",
-              "attribute": "variant",
-              "reflects": true
+              "description": "This property defines the ARIA state key, which will be toggled when the\nButton is set to `active`.\nThe default value is 'aria-pressed', which is commonly used for toggle buttons.\n\nConsumers can override this property to use a different ARIA state key if needed.\nIn case multiple aria attributes should be toggled, they can be passed in as\na comma separated string.\nFor example: `aria-pressed,aria-expanded`",
+              "default": "'aria-pressed' (when)",
+              "attribute": "ariaStateKey",
+              "reflects": true,
+              "inheritedFrom": {
+                "name": "Buttonsimple",
+                "module": "components/buttonsimple/buttonsimple.component.js"
+              }
             },
             {
               "kind": "field",
-              "name": "status",
+              "name": "type",
               "type": {
-                "text": "StatusType"
+                "text": "ButtonType"
               },
-              "description": "The status of the stepper item, which can be `completed`, `current`, `not-started`, `error-current`, or `error-incomplete`.",
-              "default": "'not-started'",
-              "attribute": "status",
-              "reflects": true
+              "description": "This property defines the type attribute for the button element.\nThe type attribute specifies the behavior of the button when it is clicked.\n- **submit**: The button submits the form data to the server.\n- **reset**: The button resets the form data to its initial state.\n- **button**: The button does nothing when clicked.",
+              "default": "button",
+              "attribute": "type",
+              "reflects": true,
+              "inheritedFrom": {
+                "name": "Buttonsimple",
+                "module": "components/buttonsimple/buttonsimple.component.js"
+              }
             },
             {
               "kind": "field",
-              "name": "label",
+              "name": "name",
               "type": {
-                "text": "string"
+                "text": "string | undefined"
               },
-              "default": "''",
-              "description": "The label for the stepper item, which is displayed as the main text of the step.\nThis label is typically used to describe the step or action that the step represents.",
-              "attribute": "label",
-              "reflects": true
+              "description": "The name of the button, submitted as a pair with the button's value as part of the form data,\nwhen that button is used to submit the form.",
+              "attribute": "name",
+              "reflects": true,
+              "inheritedFrom": {
+                "name": "Buttonsimple",
+                "module": "components/buttonsimple/buttonsimple.component.js"
+              }
             },
             {
               "kind": "field",
-              "name": "helpText",
+              "name": "value",
               "type": {
                 "text": "string | undefined"
               },
-              "description": "Additional informational text that appears below the label\nThis text is optional and can be used to provide more context or instructions for the step.",
-              "default": "''",
-              "attribute": "help-text",
-              "reflects": true
+              "description": "Defines the value associated with the button's name when it's submitted with the form data.\nThis value is passed to the server in params when the form is submitted using this button.",
+              "attribute": "value",
+              "reflects": true,
+              "inheritedFrom": {
+                "name": "Buttonsimple",
+                "module": "components/buttonsimple/buttonsimple.component.js"
+              }
             },
             {
-              "kind": "field",
-              "name": "stepNumber",
-              "type": {
-                "text": "number | undefined"
-              },
-              "description": "The step number for the stepper item, which is displayed as a numeric indicator of the step's position in the sequence.\nThis is useful for indicating the order of steps in a process.",
-              "default": "''",
-              "attribute": "step-number",
-              "reflects": true
+              "kind": "method",
+              "name": "setSoftDisabled",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "element",
+                  "type": {
+                    "text": "HTMLElement"
+                  },
+                  "description": "The button element."
+                },
+                {
+                  "name": "softDisabled",
+                  "optional": true,
+                  "type": {
+                    "text": "boolean"
+                  },
+                  "description": "The soft-disabled state."
+                }
+              ],
+              "description": "Sets the soft-disabled attribute for the button.\nWhen soft-disabled, the button looks to be disabled but remains focusable and clickable.\nAlso sets/removes aria-disabled attribute.",
+              "inheritedFrom": {
+                "name": "Buttonsimple",
+                "module": "components/buttonsimple/buttonsimple.component.js"
+              }
             },
             {
               "kind": "method",
-              "name": "handleKeyDown",
+              "name": "setDisabled",
               "privacy": "private",
               "parameters": [
                 {
-                  "name": "event",
+                  "name": "element",
                   "type": {
-                    "text": "KeyboardEvent"
+                    "text": "HTMLElement"
                   },
-                  "description": "The keyboard event."
+                  "description": "The button element."
+                },
+                {
+                  "name": "disabled",
+                  "type": {
+                    "text": "boolean"
+                  },
+                  "description": "The disabled state."
                 }
               ],
-              "description": "Handles the keydown event on the stepperitem.\nIf the key is 'Enter' or 'Space', the stepperitem is pressed.\nIf the key is 'Enter', the stepperitem is pressed. The native HTML button works in the same way.\nIf the key is 'Space', the stepperitem's default is prevent to avoid scrolling etc in the host application."
+              "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"
+              }
             },
             {
               "kind": "method",
               "name": "triggerClickEvent",
               "privacy": "private",
-              "description": "Triggers a click event on the stepper item."
+              "inheritedFrom": {
+                "name": "Buttonsimple",
+                "module": "components/buttonsimple/buttonsimple.component.js"
+              }
             },
             {
               "kind": "method",
-              "name": "handleKeyUp",
+              "name": "handleBlur",
+              "privacy": "private",
+              "description": "In case the button is pressed and the focus is lost while pressing,\nthe pressed class is removed.",
+              "inheritedFrom": {
+                "name": "Buttonsimple",
+                "module": "components/buttonsimple/buttonsimple.component.js"
+              }
+            },
+            {
+              "kind": "method",
+              "name": "handleKeyDown",
               "privacy": "private",
               "parameters": [
                 {
@@ -43670,135 +43551,268 @@
                   "description": "The keyboard event."
                 }
               ],
-              "description": "Handles the keyup event on the stepperitem.\nIf the key is 'Enter' or 'Space', the stepperitem is clicked.\nIf the key is 'Space', the stepperitem is pressed. The native HTML button works in the same way."
+              "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.\nIf the key is 'Space', the button's default is prevent to avoid scrolling etc in the host application.",
+              "inheritedFrom": {
+                "name": "Buttonsimple",
+                "module": "components/buttonsimple/buttonsimple.component.js"
+              }
             },
             {
               "kind": "method",
-              "name": "renderStatusIcon",
+              "name": "handleKeyUp",
               "privacy": "private",
-              "description": "Renders the status icon based on the current status of the stepper item.\n- If the status is `completed`, it renders a check icon.\n- If the status is `current` or `error-current`, it renders a pencil icon.\n- If the status is `not-started` or `error-incomplete`, it renders the step number.\n- If the status is anything else, it renders nothing.",
-              "return": {
-                "type": {
-                  "text": ""
+              "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": "Buttonsimple",
+                "module": "components/buttonsimple/buttonsimple.component.js"
+              }
+            }
+          ],
+          "events": [
+            {
+              "description": "(React: onClick) This event is dispatched when the tab is clicked.",
+              "name": "click",
+              "reactName": "onClick",
+              "inheritedFrom": {
+                "name": "Buttonsimple",
+                "module": "src/components/buttonsimple/buttonsimple.component.ts"
+              }
+            },
+            {
+              "description": "(React: onKeyDown) This event is dispatched when a key is pressed down on the tab.",
+              "name": "keydown",
+              "reactName": "onKeyDown",
+              "inheritedFrom": {
+                "name": "Buttonsimple",
+                "module": "src/components/buttonsimple/buttonsimple.component.ts"
+              }
+            },
+            {
+              "description": "(React: onKeyUp) This event is dispatched when a key is released on the tab.",
+              "name": "keyup",
+              "reactName": "onKeyUp",
+              "inheritedFrom": {
+                "name": "Buttonsimple",
+                "module": "src/components/buttonsimple/buttonsimple.component.ts"
+              }
+            },
+            {
+              "description": "(React: onFocus) This event is dispatched when the tab receives focus.",
+              "name": "focus",
+              "reactName": "onFocus",
+              "inheritedFrom": {
+                "name": "Buttonsimple",
+                "module": "src/components/buttonsimple/buttonsimple.component.ts"
+              }
+            },
+            {
+              "description": "(React: onActiveChange) This event is dispatched when the active state of the tab changes <br /> Event Data: `detail: { tabId: this.tabId, active }` <br /> Note: the activechange event is used by the tab list component to react to the change in state of the tab, so this event won't be needed if the tab list is used.",
+              "name": "activechange",
+              "reactName": "onActiveChange"
+            }
+          ],
+          "attributes": [
+            {
+              "name": "active",
+              "type": {
+                "text": "boolean | undefined"
+              },
+              "description": "The tab's active state indicates whether it is currently toggled on (active) or off (inactive).\nWhen the active state is true, the tab is considered to be in an active state, meaning it is toggled on.\nConversely, when the active state is false, the tab is in an inactive state, indicating it is toggled off.\n\nThis attribute also controls the \"aria-selected\" attribute of the tab.\nWhen the tab is active, \"aria-selected\" is set to true, indicating that the tab is selected.\nWhen the tab is inactive, \"aria-selected\" is set to false, indicating that the tab is not selected.",
+              "default": "false",
+              "fieldName": "active",
+              "inheritedFrom": {
+                "name": "Buttonsimple",
+                "module": "src/components/buttonsimple/buttonsimple.component.ts"
+              }
+            },
+            {
+              "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.",
+              "fieldName": "text"
+            },
+            {
+              "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",
+              "fieldName": "variant"
+            },
+            {
+              "name": "tab-id",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "Id of the tab (used as a identificator when used in the tablist)\nNote: has to be unique!",
+              "default": "undefined",
+              "fieldName": "tabId"
+            },
+            {
+              "name": "icon-name",
+              "type": {
+                "text": "IconNames | undefined"
+              },
+              "description": "Name of the icon (= filename).\n\nIf no `icon-name` is provided, no icon will be rendered.",
+              "fieldName": "iconName",
+              "inheritedFrom": {
+                "name": "IconNameMixin",
+                "module": "src/utils/mixins/IconNameMixin.ts"
               }
             },
             {
-              "kind": "method",
-              "name": "renderHelpText",
-              "privacy": "private",
-              "description": "Renders the help text for the stepper item.\nIf the `helpText` property is not set, it returns nothing.",
-              "return": {
-                "type": {
-                  "text": ""
-                }
+              "name": "auto-focus-on-mount",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "This property indicates whether the element should receive focus automatically when it is mounted.\n\nIt will not focus if the element is re-attached to the DOM after being removed.",
+              "fieldName": "autoFocusOnMount",
+              "inheritedFrom": {
+                "name": "Buttonsimple",
+                "module": "src/components/buttonsimple/buttonsimple.component.ts"
               }
             },
             {
-              "kind": "field",
               "name": "tabIndex",
               "type": {
                 "text": "number"
               },
               "default": "0",
               "description": "This property specifies the tab order of the element.",
-              "attribute": "tabIndex",
-              "reflects": true,
+              "fieldName": "tabIndex",
               "inheritedFrom": {
-                "name": "TabIndexMixin",
-                "module": "utils/mixins/TabIndexMixin.js"
+                "name": "Buttonsimple",
+                "module": "src/components/buttonsimple/buttonsimple.component.ts"
               }
-            }
-          ],
-          "events": [
-            {
-              "description": "(React: onClick) This event is dispatched when the stepperitem is clicked.",
-              "name": "click",
-              "reactName": "onClick"
             },
             {
-              "description": "(React: onKeyDown) This event is dispatched when a key is pressed down on the stepperitem.",
-              "name": "keydown",
-              "reactName": "onKeyDown"
+              "name": "disabled",
+              "type": {
+                "text": "boolean | undefined"
+              },
+              "description": "Indicates whether the component is disabled.\nWhen the component is disabled for user interaction; it is not focusable or clickable.",
+              "default": "undefined",
+              "fieldName": "disabled",
+              "inheritedFrom": {
+                "name": "Buttonsimple",
+                "module": "src/components/buttonsimple/buttonsimple.component.ts"
+              }
             },
             {
-              "description": "(React: onKeyUp) This event is dispatched when a key is released on the stepperitem.",
-              "name": "keyup",
-              "reactName": "onKeyUp"
-            }
-          ],
-          "attributes": [
-            {
-              "name": "variant",
+              "name": "soft-disabled",
               "type": {
-                "text": "VariantType"
+                "text": "boolean | undefined"
               },
-              "description": "The variant of the stepper item, which can be `inline` or `stacked`.",
-              "default": "'inline'",
-              "fieldName": "variant"
+              "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.",
+              "default": "undefined",
+              "fieldName": "softDisabled",
+              "inheritedFrom": {
+                "name": "Buttonsimple",
+                "module": "src/components/buttonsimple/buttonsimple.component.ts"
+              }
             },
             {
-              "name": "status",
+              "name": "size",
               "type": {
-                "text": "StatusType"
+                "text": "ButtonSize"
               },
-              "description": "The status of the stepper item, which can be `completed`, `current`, `not-started`, `error-current`, or `error-incomplete`.",
-              "default": "'not-started'",
-              "fieldName": "status"
+              "description": "Simplebutton size is a super set of all the sizes supported by children components.",
+              "default": "32",
+              "fieldName": "size",
+              "inheritedFrom": {
+                "name": "Buttonsimple",
+                "module": "src/components/buttonsimple/buttonsimple.component.ts"
+              }
             },
             {
-              "name": "label",
+              "name": "role",
               "type": {
-                "text": "string"
+                "text": "RoleType"
               },
-              "default": "''",
-              "description": "The label for the stepper item, which is displayed as the main text of the step.\nThis label is typically used to describe the step or action that the step represents.",
-              "fieldName": "label"
+              "description": "This property defines the ARIA role for the element. By default, it is set to 'button'.\nConsumers should override this role when:\n- The element is being used in a context where a different role is more appropriate.\n- Custom behaviors are implemented that require a specific ARIA role for accessibility purposes.",
+              "default": "button",
+              "fieldName": "role",
+              "inheritedFrom": {
+                "name": "Buttonsimple",
+                "module": "src/components/buttonsimple/buttonsimple.component.ts"
+              }
             },
             {
-              "name": "help-text",
+              "name": "ariaStateKey",
               "type": {
                 "text": "string | undefined"
               },
-              "description": "Additional informational text that appears below the label\nThis text is optional and can be used to provide more context or instructions for the step.",
-              "default": "''",
-              "fieldName": "helpText"
+              "description": "This property defines the ARIA state key, which will be toggled when the\nButton is set to `active`.\nThe default value is 'aria-pressed', which is commonly used for toggle buttons.\n\nConsumers can override this property to use a different ARIA state key if needed.\nIn case multiple aria attributes should be toggled, they can be passed in as\na comma separated string.\nFor example: `aria-pressed,aria-expanded`",
+              "default": "'aria-pressed' (when)",
+              "fieldName": "ariaStateKey",
+              "inheritedFrom": {
+                "name": "Buttonsimple",
+                "module": "src/components/buttonsimple/buttonsimple.component.ts"
+              }
             },
             {
-              "name": "step-number",
+              "name": "type",
               "type": {
-                "text": "number | undefined"
+                "text": "ButtonType"
               },
-              "description": "The step number for the stepper item, which is displayed as a numeric indicator of the step's position in the sequence.\nThis is useful for indicating the order of steps in a process.",
-              "default": "''",
-              "fieldName": "stepNumber"
+              "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"
+              }
             },
             {
-              "name": "tabIndex",
+              "name": "name",
               "type": {
-                "text": "number"
+                "text": "string | undefined"
               },
-              "default": "0",
-              "description": "This property specifies the tab order of the element.",
-              "fieldName": "tabIndex",
+              "description": "The name of the button, submitted as a pair with the button's value as part of the form data,\nwhen that button is used to submit the form.",
+              "fieldName": "name",
               "inheritedFrom": {
-                "name": "TabIndexMixin",
-                "module": "src/utils/mixins/TabIndexMixin.ts"
+                "name": "Buttonsimple",
+                "module": "src/components/buttonsimple/buttonsimple.component.ts"
+              }
+            },
+            {
+              "name": "value",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "Defines the value associated with the button's name when it's submitted with the form data.\nThis value is passed to the server in params when the form is submitted using this button.",
+              "fieldName": "value",
+              "inheritedFrom": {
+                "name": "Buttonsimple",
+                "module": "src/components/buttonsimple/buttonsimple.component.ts"
               }
             }
           ],
           "mixins": [
             {
-              "name": "TabIndexMixin",
-              "module": "/src/utils/mixins/TabIndexMixin"
+              "name": "IconNameMixin",
+              "module": "/src/utils/mixins/IconNameMixin"
             }
           ],
           "superclass": {
-            "name": "Component",
-            "module": "/src/models"
+            "name": "Buttonsimple",
+            "module": "/src/components/buttonsimple/buttonsimple.component"
           },
-          "tagName": "mdc-stepperitem",
-          "jsDoc": "/**\n * stepperitem component is used to represent a single step in a stepper component. It is used within a `mdc-stepper` component to indicate the current step in a process.\n * It can have different statuses such as `completed`, `current`, `incomplete`, `error-current`, and `error-incomplete`.\n * The component supports various visual styles and can be customized with labels, help text, and step numbers.\n *\n * This is an uncontrolled component, meaning it does not manage its own state. Instead, it relies on the consumer's to manage the state of each step.\n * Make sure to set `aria-current=\"step\"` on the current stepper item. It is applicable only when status is `current` or `error-current`. This ensures accessibility for the stepper component. Only one stepper item should have this attribute at a time.\n *\n * Additionally, make use of `aria-label` to provide a descriptive detail about the stepper item, especially for screen readers. If this aria-label is not set, it would read out only the label text and doesn't provide enough context for the user.\n *\n * @dependency mdc-icon\n * @dependency mdc-text\n *\n * @tagname mdc-stepperitem\n *\n * @event click - (React: onClick) This event is dispatched when the stepperitem is clicked.\n * @event keydown - (React: onKeyDown) This event is dispatched when a key is pressed down on the stepperitem.\n * @event keyup - (React: onKeyUp) This event is dispatched when a key is released on the stepperitem.\n *\n * @csspart status-container - The container for the status icon or step number.\n * @csspart label-container - The container for the label and help text.\n * @csspart help-text-container - The container for the help text and error icon when applicable.\n * @csspart status-icon - The icon representing the status of the stepper item.\n * @csspart step-number - The text representing the step number.\n * @csspart label - The text representing the label of the stepper item.\n * @csspart help-text - The text providing additional information about the stepper item.\n * @csspart help-icon - The icon representing an error in the stepper item.\n *\n * @cssproperty --mdc-stepperitem-status-container-background - The background color of the status container.\n * @cssproperty --mdc-stepperitem-status-container-border-color - The border color of the status container.\n * @cssproperty --mdc-stepperitem-label-color - The color of the label text.\n * @cssproperty --mdc-stepperitem-help-text-color - The color of the optional label text.\n * @cssproperty --mdc-stepperitem-label-container-background - The background color of the label container.\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 * Pass attribute `tabid` when using inside of `tablist` component.\n *\n * The `slot=\"badge\"` can be used to add a badge to the tab.\n *\n * The `slot=\"chip\"` can be used to add a chip to the tab.\n *\n * For `icon`, the `mdc-icon` component is used to render the icon.\n *\n * Note: Icons can be used in conjunction with badges or chips.\n * Badges and chips should not be used at the same time.\n *\n * @dependency mdc-icon\n * @dependency mdc-text\n *\n * @event click - (React: onClick) This event is dispatched when the tab is clicked.\n * @event keydown - (React: onKeyDown) This event is dispatched when a key is pressed down on the tab.\n * @event keyup - (React: onKeyUp) This event is dispatched when a key is released on the tab.\n * @event focus - (React: onFocus) This event is dispatched when the tab receives focus.\n * @event activechange - (React: onActiveChange) This event is dispatched when the active state of the tab changes\n * <br />\n * Event Data: `detail: { tabId: this.tabId, active }`\n * <br />\n * Note: the activechange event is used by the tab list component to react to the change in state of the tab,\n * so this event won't be needed if the tab list is used.\n *\n * @tagname mdc-tab\n *\n * @cssproperty --mdc-button-height - Height for button size\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 *\n * @csspart container - The container of the tab.\n * @csspart icon - The icon of the tab.\n * @csspart indicator - The indicator of the tab.\n * @csspart text - The text of the tab.\n */",
           "customElement": true
         }
       ],
@@ -43807,86 +43821,98 @@
           "kind": "js",
           "name": "default",
           "declaration": {
-            "name": "StepperItem",
-            "module": "components/stepperitem/stepperitem.component.js"
+            "name": "Tab",
+            "module": "components/tab/tab.component.js"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "components/stepperconnector/stepperconnector.component.js",
+      "path": "components/tablist/tablist.component.js",
       "declarations": [
         {
           "kind": "class",
-          "description": "StepperConnector component visually represents the connection between two stepper items.\nIndicates whether the connection is complete or incomplete, and supports vertical or horizontal orientation.\nThey are used between 2 `mdc-stepperitem` components to visually connect them and wrapped in a `mdc-stepper` component.",
-          "name": "StepperConnector",
+          "description": "Tab list organizes tabs into a container.\n\nChildren of the tab list are `mdc-tab` elements, sent to the default slot.\n\nThe tabs can be navigated using the left/right arrow keys, and selected by clicking,\n or pressing the Enter and Space keys.\n\n**Implicit accessibility rules**\n\n- The element that serves as the container for the set of tabs has role `tablist`.\n- Each element that serves as a tab has role `tab` and is contained within the element with role `tablist`.\n- The active tab element has the state `aria-selected` set to `true`\n  and all other tab elements have it set to `false`.\n\n\n**Accessibility notes for consuming (have to be explicitly set when you consume the component)**\n\n- Each element that contains the `content panel` for a `tab` has role `tabpanel`.\n- The `tablist` element needs to have a label provided by `data-aria-label`.\n- Each element with role `tab` has the property `aria-controls`\n that should refer to its associated `tabpanel` element.\n- Each element with role `tabpanel` has the property `aria-labelledby` referring to its associated `tab` element.\n- If a `tab` element has a popup menu, it needs to have the property `aria-haspopup` set to either `menu` or `true`.",
+          "name": "TabList",
           "cssProperties": [
             {
-              "description": "Background color for the complete connector",
-              "name": "--mdc-stepperconnector-complete-background"
+              "description": "Gap between tabs",
+              "name": "--mdc-tablist-gap"
             },
             {
-              "description": "Background color for the incomplete connector",
-              "name": "--mdc-stepperconnector-incomplete-background"
+              "description": "Width of the tablist",
+              "name": "--mdc-tablist-width"
+            },
+            {
+              "description": "Margin value for the arrow button",
+              "name": "--mdc-tablist-arrow-button-margin"
             }
           ],
           "cssParts": [
             {
-              "description": "The main connector line between steps",
-              "name": "connector"
+              "description": "The tablist container.",
+              "name": "container"
+            }
+          ],
+          "slots": [
+            {
+              "description": "slot for mdc-tab elements.",
+              "name": "Default"
             }
           ],
           "members": [
             {
               "kind": "field",
-              "name": "status",
+              "name": "activeTabId",
               "type": {
-                "text": "StatusType"
+                "text": "string | undefined"
               },
-              "description": "The status of the connector (complete or incomplete)",
-              "default": "\"incomplete\"",
-              "attribute": "status",
+              "description": "ID of the active tab, defaults to the first tab if not provided",
+              "attribute": "active-tab-id",
               "reflects": true
             },
             {
               "kind": "field",
-              "name": "orientation",
+              "name": "dataAriaLabel",
               "type": {
-                "text": "OrientationType"
+                "text": "string | undefined"
               },
-              "description": "The orientation of the connector (vertical or horizontal)",
-              "default": "\"horizontal\"",
-              "attribute": "orientation",
-              "reflects": true
+              "description": "Label for the tablist.\nThis is used when the tablist does not have a visible label.",
+              "attribute": "data-aria-label"
+            }
+          ],
+          "events": [
+            {
+              "description": "(React: onChange) This event is dispatched when the tab is selected. Event that fires when user changes the active tab. The function sent as the argument will receive the fired event and the new tab id can be fetched from event.detail.tabId. `(event: CustomEvent) => handleTabChange(event.detail.tabId);`",
+              "name": "change",
+              "reactName": "onChange"
             }
           ],
           "attributes": [
             {
-              "name": "status",
+              "name": "active-tab-id",
               "type": {
-                "text": "StatusType"
+                "text": "string | undefined"
               },
-              "description": "The status of the connector (complete or incomplete)",
-              "default": "\"incomplete\"",
-              "fieldName": "status"
+              "description": "ID of the active tab, defaults to the first tab if not provided",
+              "fieldName": "activeTabId"
             },
             {
-              "name": "orientation",
+              "name": "data-aria-label",
               "type": {
-                "text": "OrientationType"
+                "text": "string | undefined"
               },
-              "description": "The orientation of the connector (vertical or horizontal)",
-              "default": "\"horizontal\"",
-              "fieldName": "orientation"
+              "description": "Label for the tablist.\nThis is used when the tablist does not have a visible label.",
+              "fieldName": "dataAriaLabel"
             }
           ],
           "superclass": {
             "name": "Component",
             "module": "/src/models"
           },
-          "tagName": "mdc-stepperconnector",
-          "jsDoc": "/**\n * StepperConnector component visually represents the connection between two stepper items.\n * Indicates whether the connection is complete or incomplete, and supports vertical or horizontal orientation.\n * They are used between 2 `mdc-stepperitem` components to visually connect them and wrapped in a `mdc-stepper` component.\n *\n * @tagname mdc-stepperconnector\n *\n * @csspart connector - The main connector line between steps\n *\n * @cssproperty --mdc-stepperconnector-complete-background - Background color for the complete connector\n * @cssproperty --mdc-stepperconnector-incomplete-background - Background color for the incomplete connector\n */",
+          "tagName": "mdc-tablist",
+          "jsDoc": "/**\n * Tab list organizes tabs into a container.\n *\n * Children of the tab list are `mdc-tab` elements, sent to the default slot.\n *\n * The tabs can be navigated using the left/right arrow keys, and selected by clicking,\n *  or pressing the Enter and Space keys.\n *\n * **Implicit accessibility rules**\n *\n * - The element that serves as the container for the set of tabs has role `tablist`.\n * - Each element that serves as a tab has role `tab` and is contained within the element with role `tablist`.\n * - The active tab element has the state `aria-selected` set to `true`\n *   and all other tab elements have it set to `false`.\n *\n *\n * **Accessibility notes for consuming (have to be explicitly set when you consume the component)**\n *\n * - Each element that contains the `content panel` for a `tab` has role `tabpanel`.\n * - The `tablist` element needs to have a label provided by `data-aria-label`.\n * - Each element with role `tab` has the property `aria-controls`\n *  that should refer to its associated `tabpanel` element.\n * - Each element with role `tabpanel` has the property `aria-labelledby` referring to its associated `tab` element.\n * - If a `tab` element has a popup menu, it needs to have the property `aria-haspopup` set to either `menu` or `true`.\n *\n * @tagname mdc-tablist\n *\n * @dependency mdc-tab\n * @dependency mdc-button\n *\n * @event change - (React: onChange) This event is dispatched when the tab is selected.\n * Event that fires when user changes the active tab.\n *     The function sent as the argument will receive the fired event\n *      and the new tab id can be fetched from event.detail.tabId.\n *\n *    `(event: CustomEvent) => handleTabChange(event.detail.tabId);`\n *\n * @slot Default slot for mdc-tab elements.\n *\n * @cssproperty --mdc-tablist-gap - Gap between tabs\n * @cssproperty --mdc-tablist-width - Width of the tablist\n * @cssproperty --mdc-tablist-arrow-button-margin - Margin value for the arrow button\n *\n * @csspart container - The tablist container.\n */",
           "customElement": true
         }
       ],
@@ -43895,8 +43921,8 @@
           "kind": "js",
           "name": "default",
           "declaration": {
-            "name": "StepperConnector",
-            "module": "components/stepperconnector/stepperconnector.component.js"
+            "name": "TabList",
+            "module": "components/tablist/tablist.component.js"
           }
         }
       ]
@@ -44280,17 +44306,17 @@
               "type": {
                 "text": "number | undefined"
               },
-              "description": "maximum character limit for the textarea field for character counter.",
+              "description": "The maximum character limit for the textarea field for character counter.",
               "attribute": "max-character-limit"
             },
             {
               "kind": "field",
-              "name": "characterLimitExceedingFired",
+              "name": "characterLimitAnnouncement",
               "type": {
-                "text": "boolean"
+                "text": "string | undefined"
               },
-              "privacy": "private",
-              "default": "false"
+              "description": "Template string for the announcement that will be read by screen readers when the max character limit is set.\nConsumers must use the placeholders `%{number-of-characters}` and `%{max-character-limit}` in the string,\nwhich will be dynamically replaced with the actual values at runtime.\nFor example: `%{number-of-characters} out of %{max-character-limit} characters are typed.`\nExample output: \"93 out of 140 characters are typed.\"",
+              "attribute": "character-limit-announcement"
             },
             {
               "kind": "field",
@@ -44349,6 +44375,12 @@
                 }
               }
             },
+            {
+              "kind": "method",
+              "name": "announceMaxLengthWarning",
+              "privacy": "private",
+              "description": "Announces the character limit warning based on the current value length.\nIf the value length exceeds the max character limit, the help text is announced (if help text is present).\nIf the value length does not exceed the max character limit, then the character limit announcement is announced."
+            },
             {
               "kind": "method",
               "name": "onChange",
@@ -44856,9 +44888,17 @@
               "type": {
                 "text": "number | undefined"
               },
-              "description": "maximum character limit for the textarea field for character counter.",
+              "description": "The maximum character limit for the textarea field for character counter.",
               "fieldName": "maxCharacterLimit"
             },
+            {
+              "name": "character-limit-announcement",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "Template string for the announcement that will be read by screen readers when the max character limit is set.\nConsumers must use the placeholders `%{number-of-characters}` and `%{max-character-limit}` in the string,\nwhich will be dynamically replaced with the actual values at runtime.\nFor example: `%{number-of-characters} out of %{max-character-limit} characters are typed.`\nExample output: \"93 out of 140 characters are typed.\"",
+              "fieldName": "characterLimitAnnouncement"
+            },
             {
               "name": "auto-focus-on-mount",
               "type": {