@momentum-design/components 0.76.0 → 0.76.2

package/dist/custom-elements.json

@@ -4,754 +4,754 @@
   "modules": [
     {
       "kind": "javascript-module",
-      "path": "components/appheader/appheader.component.js",
+      "path": "components/alertchip/alertchip.component.js",
       "declarations": [
         {
           "kind": "class",
-          "description": "The `mdc-appheader` component provides a structured and accessible app header layout.\nIt consists of three primary sections: leading, center, and trailing.\n\n- The **leading section** typically holds a **brand logo**, **brand name** or **menu icon**.\n- The **center section** can contain a **search bar**, **icons** or action controls.\n- The **trailing section** generally includes a **profile avatar**, **additional icons** or **action controls**.",
-          "name": "Appheader",
-          "cssParts": [
+          "description": "mdc-alertchip component is an interactive chip that consumers can use to represent an alert.\n\n- It supports a leading icon along with label.\n- It supports 5 variants of alerts - neutral, warning, error, success, and informational\n\nThis component is built by extending Buttonsimple.",
+          "name": "AlertChip",
+          "cssProperties": [
             {
-              "description": "The main container for styling the header.",
-              "name": "container"
+              "description": "The color of the label text",
+              "name": "--mdc-chip-color"
             },
             {
-              "description": "The leading section of the header.",
-              "name": "leading-section"
+              "description": "The color of the icon",
+              "name": "--mdc-chip-icon-color"
             },
             {
-              "description": "The center section of the header.",
-              "name": "center-section"
+              "description": "The border color of the alertchip",
+              "name": "--mdc-chip-border-color"
             },
             {
-              "description": "The trailing section of the header.",
-              "name": "trailing-section"
+              "description": "The background color of the alertchip",
+              "name": "--mdc-chip-background-color"
             }
           ],
-          "slots": [
-            {
-              "description": "Slot for the leading section (e.g., brand logo, brand name).",
-              "name": "leading"
-            },
+          "members": [
             {
-              "description": "Slot for the center section (e.g., search bar, icons).",
-              "name": "center"
+              "kind": "field",
+              "name": "variant",
+              "type": {
+                "text": "VariantType"
+              },
+              "description": "The variant of the alertchip. It supports 5 variants\n- neutral\n- warning\n- error\n- success\n- informational",
+              "default": "neutral",
+              "attribute": "variant"
             },
-            {
-              "description": "Slot for the trailing section (e.g., profile avatar, icons).",
-              "name": "trailing"
-            }
-          ],
-          "members": [],
-          "superclass": {
-            "name": "Component",
-            "module": "/src/models"
-          },
-          "tagName": "mdc-appheader",
-          "jsDoc": "/**\n * The `mdc-appheader` component provides a structured and accessible app header layout.\n * It consists of three primary sections: leading, center, and trailing.\n *\n * - The **leading section** typically holds a **brand logo**, **brand name** or **menu icon**.\n * - The **center section** can contain a **search bar**, **icons** or action controls.\n * - The **trailing section** generally includes a **profile avatar**, **additional icons** or **action controls**.\n *\n * @tagname mdc-appheader\n *\n * @slot leading - Slot for the leading section (e.g., brand logo, brand name).\n * @slot center - Slot for the center section (e.g., search bar, icons).\n * @slot trailing - Slot for the trailing section (e.g., profile avatar, icons).\n *\n * @csspart container - The main container for styling the header.\n * @csspart leading-section - The leading section of the header.\n * @csspart center-section - The center section of the header.\n * @csspart trailing-section - The trailing section of the header.\n */",
-          "customElement": true
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "default",
-          "declaration": {
-            "name": "Appheader",
-            "module": "components/appheader/appheader.component.js"
-          }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "components/animation/animation.component.js",
-      "declarations": [
-        {
-          "kind": "class",
-          "description": "The `mdc-animation` component is a wrapper around the Lottie animation library.\nIt fetches the animation data dynamically based on the provided name and renders it.\nThis is a display only component that does not have any interactive functionality.\nFrom accessibility perspective, (by default) it is a decorative image component.",
-          "name": "Animation",
-          "members": [
             {
               "kind": "field",
-              "name": "name",
+              "name": "label",
               "type": {
-                "text": "AnimationNames | undefined"
+                "text": "string"
               },
-              "description": "Name of the animation (= filename)",
-              "attribute": "name",
-              "reflects": true
+              "default": "''",
+              "description": "The visible label text of the alertchip.\n\nWe recommend limiting the <b>maximum length of the label text to 20 characters</b>,\nincluding empty spaces to split words.",
+              "attribute": "label"
             },
             {
               "kind": "field",
-              "name": "loop",
+              "name": "tabIndex",
               "type": {
-                "text": "LoopType | undefined"
+                "text": "number"
               },
-              "description": "How many times to loop the animation\n- \"true\" - infinite\n- \"false\" - no loop\n- number - number of times to loop",
-              "attribute": "loop",
-              "reflects": true
+              "default": "0",
+              "description": "This property specifies the tab order of the element.",
+              "attribute": "tabIndex",
+              "reflects": true,
+              "inheritedFrom": {
+                "name": "TabIndexMixin",
+                "module": "utils/mixins/TabIndexMixin.js"
+              }
             },
             {
               "kind": "field",
-              "name": "autoplay",
+              "name": "disabled",
               "type": {
                 "text": "boolean | undefined"
               },
-              "description": "Weather start the animation automatically",
-              "attribute": "autoplay",
-              "reflects": true
+              "description": "Indicates whether the component is disabled.\nWhen the component is disabled for user interaction; it is not focusable or clickable.",
+              "default": "undefined",
+              "attribute": "disabled",
+              "reflects": true,
+              "inheritedFrom": {
+                "name": "DisabledMixin",
+                "module": "utils/mixins/DisabledMixin.js"
+              }
             },
             {
               "kind": "field",
-              "name": "ariaLabel",
+              "name": "active",
               "type": {
-                "text": "string | null"
+                "text": "boolean | undefined"
               },
-              "default": "null",
-              "description": "Aria-label attribute to be set for accessibility",
-              "attribute": "aria-label"
+              "description": "The button's active state indicates whether it is currently toggled on (active) or off (inactive).\nWhen the active state is true, the button is considered to be in an active state, meaning it is toggled on.\nConversely, when the active state is false, the button is in an inactive state, indicating it is toggled off.\n\nThis attribute is used to set the provided `ariaStateKey` to true or false.",
+              "default": "undefined",
+              "attribute": "active",
+              "reflects": true,
+              "inheritedFrom": {
+                "name": "Buttonsimple",
+                "module": "components/buttonsimple/buttonsimple.component.js"
+              }
             },
             {
               "kind": "field",
-              "name": "ariaLabelledBy",
+              "name": "softDisabled",
               "type": {
-                "text": "string | null"
+                "text": "boolean | undefined"
               },
-              "default": "null",
-              "description": "Aria-labelledby attribute to be set for accessibility",
-              "attribute": "aria-labelledby"
+              "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",
+              "attribute": "soft-disabled",
+              "reflects": true,
+              "inheritedFrom": {
+                "name": "Buttonsimple",
+                "module": "components/buttonsimple/buttonsimple.component.js"
+              }
             },
             {
               "kind": "field",
-              "name": "lottieInstance",
+              "name": "size",
               "type": {
-                "text": "AnimationItem | undefined"
+                "text": "ButtonSize"
               },
-              "privacy": "private",
-              "description": "Lottie animation instance"
+              "description": "Simplebutton size is a super set of all the sizes supported by children components.",
+              "default": "32",
+              "attribute": "size",
+              "reflects": true,
+              "inheritedFrom": {
+                "name": "Buttonsimple",
+                "module": "components/buttonsimple/buttonsimple.component.js"
+              }
             },
             {
               "kind": "field",
-              "name": "containerRef",
+              "name": "role",
+              "description": "This property defines the ARIA role for the element. By default, it is set to 'button'.\nConsumers should override this role when:\n- The element is being used in a context where a different role is more appropriate.\n- Custom behaviors are implemented that require a specific ARIA role for accessibility purposes.",
+              "default": "button",
+              "attribute": "role",
+              "reflects": true,
+              "inheritedFrom": {
+                "name": "Buttonsimple",
+                "module": "components/buttonsimple/buttonsimple.component.js"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "ariaStateKey",
               "type": {
-                "text": "Ref<HTMLDivElement>"
+                "text": "string | undefined"
               },
-              "privacy": "private",
-              "description": "Container for the animation"
+              "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": "animation",
-              "description": "Exposed API of the animation library (lottie)",
-              "readonly": true
+              "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": "method",
-              "name": "getLoopValue",
-              "privacy": "private"
+              "name": "executeAction",
+              "privacy": "protected",
+              "inheritedFrom": {
+                "name": "Buttonsimple",
+                "module": "components/buttonsimple/buttonsimple.component.js"
+              }
             },
             {
               "kind": "method",
-              "name": "onLoadSuccessHandler",
-              "privacy": "private",
+              "name": "setActive",
+              "privacy": "protected",
               "parameters": [
                 {
-                  "name": "animationData",
+                  "name": "element",
                   "type": {
-                    "text": "any"
-                  }
+                    "text": "HTMLElement"
+                  },
+                  "description": "The button element"
+                },
+                {
+                  "name": "active",
+                  "optional": true,
+                  "type": {
+                    "text": "boolean"
+                  },
+                  "description": "The active state of the element"
                 }
               ],
-              "description": "Create new lotty instance for the loaded data"
+              "description": "Sets the ariaStateKey attributes based on the active state of the button.",
+              "inheritedFrom": {
+                "name": "Buttonsimple",
+                "module": "components/buttonsimple/buttonsimple.component.js"
+              }
             },
             {
               "kind": "method",
-              "name": "onLoadFailHandler",
+              "name": "setSoftDisabled",
               "privacy": "private",
               "parameters": [
                 {
-                  "name": "error",
+                  "name": "element",
                   "type": {
-                    "text": "Error"
-                  }
+                    "text": "HTMLElement"
+                  },
+                  "description": "The button element."
+                },
+                {
+                  "name": "softDisabled",
+                  "optional": true,
+                  "type": {
+                    "text": "boolean"
+                  },
+                  "description": "The soft-disabled state."
                 }
               ],
-              "description": "Error handler for animation loading"
+              "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": "getAnimationData",
+              "name": "setDisabled",
               "privacy": "private",
-              "description": "Import animation data dynamically"
-            },
-            {
-              "kind": "field",
-              "name": "onCompleteHandler",
-              "description": "Re-dispatch the complete event from the animation library\n\nThis handler called with the animation instance instead of the component instance\nso we need to bind it to the component instance. The arrow function just does that."
-            }
-          ],
-          "events": [
-            {
-              "name": "load",
-              "type": {
-                "text": "CustomEvent"
-              },
-              "description": "(React: onLoad) This event is dispatched when the animation is loaded",
-              "reactName": "onLoad"
-            },
-            {
-              "description": "(React: onComplete) This event is dispatched when all animation loops completed",
-              "name": "complete",
-              "reactName": "onComplete"
-            },
-            {
-              "description": "(React: onError) This event is dispatched when animation loading failed",
-              "name": "error",
-              "reactName": "onError"
-            }
-          ],
-          "attributes": [
-            {
-              "name": "name",
-              "type": {
-                "text": "AnimationNames | undefined"
-              },
-              "description": "Name of the animation (= filename)",
-              "fieldName": "name"
-            },
-            {
-              "name": "loop",
-              "type": {
-                "text": "LoopType | undefined"
-              },
-              "description": "How many times to loop the animation\n- \"true\" - infinite\n- \"false\" - no loop\n- number - number of times to loop",
-              "fieldName": "loop"
-            },
-            {
-              "name": "autoplay",
-              "type": {
-                "text": "boolean | undefined"
-              },
-              "description": "Weather start the animation automatically",
-              "fieldName": "autoplay"
-            },
-            {
-              "name": "aria-label",
-              "type": {
-                "text": "string | null"
-              },
-              "default": "null",
-              "description": "Aria-label attribute to be set for accessibility",
-              "fieldName": "ariaLabel"
+              "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"
+              }
             },
             {
-              "name": "aria-labelledby",
-              "type": {
-                "text": "string | null"
-              },
-              "default": "null",
-              "description": "Aria-labelledby attribute to be set for accessibility",
-              "fieldName": "ariaLabelledBy"
-            }
-          ],
-          "superclass": {
-            "name": "Component",
-            "module": "/src/models"
-          },
-          "tagName": "mdc-animation",
-          "jsDoc": "/**\n * The `mdc-animation` component is a wrapper around the Lottie animation library.\n * It fetches the animation data dynamically based on the provided name and renders it.\n * This is a display only component that does not have any interactive functionality.\n * From accessibility perspective, (by default) it is a decorative image component.\n *\n * @tagname mdc-animation\n *\n * @event load - (React: onLoad) This event is dispatched when the animation is loaded\n * @event complete - (React: onComplete) This event is dispatched when all animation loops completed\n * @event error - (React: onError) This event is dispatched when animation loading failed\n */",
-          "customElement": true
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "default",
-          "declaration": {
-            "name": "Animation",
-            "module": "components/animation/animation.component.js"
-          }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "components/alertchip/alertchip.component.js",
-      "declarations": [
-        {
-          "kind": "class",
-          "description": "mdc-alertchip component is an interactive chip that consumers can use to represent an alert.\n\n- It supports a leading icon along with label.\n- It supports 5 variants of alerts - neutral, warning, error, success, and informational\n\nThis component is built by extending Buttonsimple.",
-          "name": "AlertChip",
-          "cssProperties": [
-            {
-              "description": "The color of the label text",
-              "name": "--mdc-chip-color"
+              "kind": "method",
+              "name": "triggerClickEvent",
+              "privacy": "private",
+              "inheritedFrom": {
+                "name": "Buttonsimple",
+                "module": "components/buttonsimple/buttonsimple.component.js"
+              }
             },
             {
-              "description": "The color of the icon",
-              "name": "--mdc-chip-icon-color"
+              "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"
+              }
             },
             {
-              "description": "The border color of the alertchip",
-              "name": "--mdc-chip-border-color"
+              "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"
+              }
             },
             {
-              "description": "The background color of the alertchip",
-              "name": "--mdc-chip-background-color"
+              "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"
+              }
             }
           ],
-          "members": [
+          "attributes": [
             {
-              "kind": "field",
               "name": "variant",
               "type": {
                 "text": "VariantType"
               },
               "description": "The variant of the alertchip. It supports 5 variants\n- neutral\n- warning\n- error\n- success\n- informational",
               "default": "neutral",
-              "attribute": "variant"
+              "fieldName": "variant"
             },
             {
-              "kind": "field",
               "name": "label",
               "type": {
                 "text": "string"
               },
               "default": "''",
               "description": "The visible label text of the alertchip.\n\nWe recommend limiting the <b>maximum length of the label text to 20 characters</b>,\nincluding empty spaces to split words.",
-              "attribute": "label"
+              "fieldName": "label"
             },
             {
-              "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"
+                "module": "src/utils/mixins/TabIndexMixin.ts"
               }
             },
             {
-              "kind": "field",
               "name": "disabled",
               "type": {
                 "text": "boolean | undefined"
               },
               "description": "Indicates whether the component is disabled.\nWhen the component is disabled for user interaction; it is not focusable or clickable.",
               "default": "undefined",
-              "attribute": "disabled",
-              "reflects": true,
+              "fieldName": "disabled",
               "inheritedFrom": {
                 "name": "DisabledMixin",
-                "module": "utils/mixins/DisabledMixin.js"
+                "module": "src/utils/mixins/DisabledMixin.ts"
               }
             },
             {
-              "kind": "field",
               "name": "active",
               "type": {
                 "text": "boolean | undefined"
               },
               "description": "The button's active state indicates whether it is currently toggled on (active) or off (inactive).\nWhen the active state is true, the button is considered to be in an active state, meaning it is toggled on.\nConversely, when the active state is false, the button is in an inactive state, indicating it is toggled off.\n\nThis attribute is used to set the provided `ariaStateKey` to true or false.",
               "default": "undefined",
-              "attribute": "active",
-              "reflects": true,
+              "fieldName": "active",
               "inheritedFrom": {
                 "name": "Buttonsimple",
-                "module": "components/buttonsimple/buttonsimple.component.js"
+                "module": "src/components/buttonsimple/buttonsimple.component.ts"
               }
             },
             {
-              "kind": "field",
-              "name": "softDisabled",
+              "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",
-              "attribute": "soft-disabled",
-              "reflects": true,
+              "fieldName": "softDisabled",
               "inheritedFrom": {
                 "name": "Buttonsimple",
-                "module": "components/buttonsimple/buttonsimple.component.js"
+                "module": "src/components/buttonsimple/buttonsimple.component.ts"
               }
             },
             {
-              "kind": "field",
               "name": "size",
               "type": {
                 "text": "ButtonSize"
               },
               "description": "Simplebutton size is a super set of all the sizes supported by children components.",
               "default": "32",
-              "attribute": "size",
-              "reflects": true,
+              "fieldName": "size",
               "inheritedFrom": {
                 "name": "Buttonsimple",
-                "module": "components/buttonsimple/buttonsimple.component.js"
+                "module": "src/components/buttonsimple/buttonsimple.component.ts"
               }
             },
             {
-              "kind": "field",
               "name": "role",
               "description": "This property defines the ARIA role for the element. By default, it is set to 'button'.\nConsumers should override this role when:\n- The element is being used in a context where a different role is more appropriate.\n- Custom behaviors are implemented that require a specific ARIA role for accessibility purposes.",
               "default": "button",
-              "attribute": "role",
-              "reflects": true,
+              "fieldName": "role",
               "inheritedFrom": {
                 "name": "Buttonsimple",
-                "module": "components/buttonsimple/buttonsimple.component.js"
+                "module": "src/components/buttonsimple/buttonsimple.component.ts"
               }
             },
             {
-              "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,
+              "fieldName": "ariaStateKey",
               "inheritedFrom": {
                 "name": "Buttonsimple",
-                "module": "components/buttonsimple/buttonsimple.component.js"
+                "module": "src/components/buttonsimple/buttonsimple.component.ts"
               }
             },
             {
-              "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,
+              "fieldName": "type",
               "inheritedFrom": {
                 "name": "Buttonsimple",
-                "module": "components/buttonsimple/buttonsimple.component.js"
+                "module": "src/components/buttonsimple/buttonsimple.component.ts"
               }
-            },
+            }
+          ],
+          "superclass": {
+            "name": "Buttonsimple",
+            "module": "/src/components/buttonsimple/buttonsimple.component"
+          },
+          "tagName": "mdc-alertchip",
+          "jsDoc": "/**\n * mdc-alertchip component is an interactive chip that consumers can use to represent an alert.\n *\n * - It supports a leading icon along with label.\n * - It supports 5 variants of alerts - neutral, warning, error, success, and informational\n *\n * This component is built by extending Buttonsimple.\n *\n * @tagname mdc-alertchip\n *\n * @dependency mdc-icon\n * @dependency mdc-text\n *\n * @cssproperty --mdc-chip-color - The color of the label text\n * @cssproperty --mdc-chip-icon-color - The color of the icon\n * @cssproperty --mdc-chip-border-color - The border color of the alertchip\n * @cssproperty --mdc-chip-background-color - The background color of the alertchip\n *\n */",
+          "customElement": true,
+          "events": [
             {
-              "kind": "method",
-              "name": "executeAction",
-              "privacy": "protected",
+              "description": "(React: onClick) This event is dispatched when the button is clicked.",
+              "name": "click",
+              "reactName": "onClick",
               "inheritedFrom": {
                 "name": "Buttonsimple",
-                "module": "components/buttonsimple/buttonsimple.component.js"
+                "module": "src/components/buttonsimple/buttonsimple.component.ts"
               }
             },
             {
-              "kind": "method",
-              "name": "setActive",
-              "privacy": "protected",
-              "parameters": [
-                {
-                  "name": "element",
-                  "type": {
-                    "text": "HTMLElement"
-                  },
-                  "description": "The button element"
-                },
-                {
-                  "name": "active",
-                  "optional": true,
-                  "type": {
-                    "text": "boolean"
-                  },
-                  "description": "The active state of the element"
-                }
-              ],
-              "description": "Sets the ariaStateKey attributes based on the active state of the button.",
+              "description": "(React: onKeyDown) This event is dispatched when a key is pressed down on the button.",
+              "name": "keydown",
+              "reactName": "onKeyDown",
               "inheritedFrom": {
                 "name": "Buttonsimple",
-                "module": "components/buttonsimple/buttonsimple.component.js"
+                "module": "src/components/buttonsimple/buttonsimple.component.ts"
               }
             },
             {
-              "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.",
+              "description": "(React: onKeyUp) This event is dispatched when a key is released on the button.",
+              "name": "keyup",
+              "reactName": "onKeyUp",
               "inheritedFrom": {
                 "name": "Buttonsimple",
-                "module": "components/buttonsimple/buttonsimple.component.js"
+                "module": "src/components/buttonsimple/buttonsimple.component.ts"
               }
             },
             {
-              "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.",
+              "description": "(React: onFocus) This event is dispatched when the button receives focus.",
+              "name": "focus",
+              "reactName": "onFocus",
               "inheritedFrom": {
                 "name": "Buttonsimple",
-                "module": "components/buttonsimple/buttonsimple.component.js"
+                "module": "src/components/buttonsimple/buttonsimple.component.ts"
               }
+            }
+          ]
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "default",
+          "declaration": {
+            "name": "AlertChip",
+            "module": "components/alertchip/alertchip.component.js"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "components/animation/animation.component.js",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "The `mdc-animation` component is a wrapper around the Lottie animation library.\nIt fetches the animation data dynamically based on the provided name and renders it.\nThis is a display only component that does not have any interactive functionality.\nFrom accessibility perspective, (by default) it is a decorative image component.",
+          "name": "Animation",
+          "members": [
+            {
+              "kind": "field",
+              "name": "name",
+              "type": {
+                "text": "AnimationNames | undefined"
+              },
+              "description": "Name of the animation (= filename)",
+              "attribute": "name",
+              "reflects": true
             },
             {
-              "kind": "method",
-              "name": "triggerClickEvent",
+              "kind": "field",
+              "name": "loop",
+              "type": {
+                "text": "LoopType | undefined"
+              },
+              "description": "How many times to loop the animation\n- \"true\" - infinite\n- \"false\" - no loop\n- number - number of times to loop",
+              "attribute": "loop",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "autoplay",
+              "type": {
+                "text": "boolean | undefined"
+              },
+              "description": "Weather start the animation automatically",
+              "attribute": "autoplay",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "ariaLabel",
+              "type": {
+                "text": "string | null"
+              },
+              "default": "null",
+              "description": "Aria-label attribute to be set for accessibility",
+              "attribute": "aria-label"
+            },
+            {
+              "kind": "field",
+              "name": "ariaLabelledBy",
+              "type": {
+                "text": "string | null"
+              },
+              "default": "null",
+              "description": "Aria-labelledby attribute to be set for accessibility",
+              "attribute": "aria-labelledby"
+            },
+            {
+              "kind": "field",
+              "name": "lottieInstance",
+              "type": {
+                "text": "AnimationItem | undefined"
+              },
               "privacy": "private",
-              "inheritedFrom": {
-                "name": "Buttonsimple",
-                "module": "components/buttonsimple/buttonsimple.component.js"
-              }
+              "description": "Lottie animation instance"
             },
             {
-              "kind": "method",
-              "name": "handleBlur",
+              "kind": "field",
+              "name": "containerRef",
+              "type": {
+                "text": "Ref<HTMLDivElement>"
+              },
               "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"
-              }
+              "description": "Container for the animation"
+            },
+            {
+              "kind": "field",
+              "name": "animation",
+              "description": "Exposed API of the animation library (lottie)",
+              "readonly": true
             },
             {
               "kind": "method",
-              "name": "handleKeyDown",
+              "name": "getLoopValue",
+              "privacy": "private"
+            },
+            {
+              "kind": "method",
+              "name": "onLoadSuccessHandler",
               "privacy": "private",
               "parameters": [
                 {
-                  "name": "event",
+                  "name": "animationData",
                   "type": {
-                    "text": "KeyboardEvent"
-                  },
-                  "description": "The keyboard event."
+                    "text": "any"
+                  }
                 }
               ],
-              "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"
-              }
+              "description": "Create new lotty instance for the loaded data"
             },
             {
               "kind": "method",
-              "name": "handleKeyUp",
+              "name": "onLoadFailHandler",
               "privacy": "private",
               "parameters": [
                 {
-                  "name": "event",
+                  "name": "error",
                   "type": {
-                    "text": "KeyboardEvent"
-                  },
-                  "description": "The keyboard event."
+                    "text": "Error"
+                  }
                 }
               ],
-              "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"
-              }
-            }
-          ],
-          "attributes": [
-            {
-              "name": "variant",
-              "type": {
-                "text": "VariantType"
-              },
-              "description": "The variant of the alertchip. It supports 5 variants\n- neutral\n- warning\n- error\n- success\n- informational",
-              "default": "neutral",
-              "fieldName": "variant"
+              "description": "Error handler for animation loading"
             },
             {
-              "name": "label",
-              "type": {
-                "text": "string"
-              },
-              "default": "''",
-              "description": "The visible label text of the alertchip.\n\nWe recommend limiting the <b>maximum length of the label text to 20 characters</b>,\nincluding empty spaces to split words.",
-              "fieldName": "label"
+              "kind": "method",
+              "name": "getAnimationData",
+              "privacy": "private",
+              "description": "Import animation data dynamically"
             },
             {
-              "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"
-              }
-            },
+              "kind": "field",
+              "name": "onCompleteHandler",
+              "description": "Re-dispatch the complete event from the animation library\n\nThis handler called with the animation instance instead of the component instance\nso we need to bind it to the component instance. The arrow function just does that."
+            }
+          ],
+          "events": [
             {
-              "name": "disabled",
+              "name": "load",
               "type": {
-                "text": "boolean | undefined"
+                "text": "CustomEvent"
               },
-              "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": "DisabledMixin",
-                "module": "src/utils/mixins/DisabledMixin.ts"
-              }
+              "description": "(React: onLoad) This event is dispatched when the animation is loaded",
+              "reactName": "onLoad"
             },
             {
-              "name": "active",
-              "type": {
-                "text": "boolean | undefined"
-              },
-              "description": "The button's active state indicates whether it is currently toggled on (active) or off (inactive).\nWhen the active state is true, the button is considered to be in an active state, meaning it is toggled on.\nConversely, when the active state is false, the button is in an inactive state, indicating it is toggled off.\n\nThis attribute is used to set the provided `ariaStateKey` to true or false.",
-              "default": "undefined",
-              "fieldName": "active",
-              "inheritedFrom": {
-                "name": "Buttonsimple",
-                "module": "src/components/buttonsimple/buttonsimple.component.ts"
-              }
+              "description": "(React: onComplete) This event is dispatched when all animation loops completed",
+              "name": "complete",
+              "reactName": "onComplete"
             },
             {
-              "name": "soft-disabled",
+              "description": "(React: onError) This event is dispatched when animation loading failed",
+              "name": "error",
+              "reactName": "onError"
+            }
+          ],
+          "attributes": [
+            {
+              "name": "name",
               "type": {
-                "text": "boolean | undefined"
+                "text": "AnimationNames | 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"
-              }
+              "description": "Name of the animation (= filename)",
+              "fieldName": "name"
             },
             {
-              "name": "size",
+              "name": "loop",
               "type": {
-                "text": "ButtonSize"
+                "text": "LoopType | undefined"
               },
-              "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"
-              }
+              "description": "How many times to loop the animation\n- \"true\" - infinite\n- \"false\" - no loop\n- number - number of times to loop",
+              "fieldName": "loop"
             },
             {
-              "name": "role",
-              "description": "This property defines the ARIA role for the element. By default, it is set to 'button'.\nConsumers should override this role when:\n- The element is being used in a context where a different role is more appropriate.\n- Custom behaviors are implemented that require a specific ARIA role for accessibility purposes.",
-              "default": "button",
-              "fieldName": "role",
-              "inheritedFrom": {
-                "name": "Buttonsimple",
-                "module": "src/components/buttonsimple/buttonsimple.component.ts"
-              }
+              "name": "autoplay",
+              "type": {
+                "text": "boolean | undefined"
+              },
+              "description": "Weather start the animation automatically",
+              "fieldName": "autoplay"
             },
             {
-              "name": "ariaStateKey",
+              "name": "aria-label",
               "type": {
-                "text": "string | undefined"
+                "text": "string | null"
               },
-              "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"
-              }
+              "default": "null",
+              "description": "Aria-label attribute to be set for accessibility",
+              "fieldName": "ariaLabel"
             },
             {
-              "name": "type",
+              "name": "aria-labelledby",
               "type": {
-                "text": "ButtonType"
+                "text": "string | null"
               },
-              "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"
-              }
+              "default": "null",
+              "description": "Aria-labelledby attribute to be set for accessibility",
+              "fieldName": "ariaLabelledBy"
             }
           ],
           "superclass": {
-            "name": "Buttonsimple",
-            "module": "/src/components/buttonsimple/buttonsimple.component"
+            "name": "Component",
+            "module": "/src/models"
           },
-          "tagName": "mdc-alertchip",
-          "jsDoc": "/**\n * mdc-alertchip component is an interactive chip that consumers can use to represent an alert.\n *\n * - It supports a leading icon along with label.\n * - It supports 5 variants of alerts - neutral, warning, error, success, and informational\n *\n * This component is built by extending Buttonsimple.\n *\n * @tagname mdc-alertchip\n *\n * @dependency mdc-icon\n * @dependency mdc-text\n *\n * @cssproperty --mdc-chip-color - The color of the label text\n * @cssproperty --mdc-chip-icon-color - The color of the icon\n * @cssproperty --mdc-chip-border-color - The border color of the alertchip\n * @cssproperty --mdc-chip-background-color - The background color of the alertchip\n *\n */",
-          "customElement": true,
-          "events": [
+          "tagName": "mdc-animation",
+          "jsDoc": "/**\n * The `mdc-animation` component is a wrapper around the Lottie animation library.\n * It fetches the animation data dynamically based on the provided name and renders it.\n * This is a display only component that does not have any interactive functionality.\n * From accessibility perspective, (by default) it is a decorative image component.\n *\n * @tagname mdc-animation\n *\n * @event load - (React: onLoad) This event is dispatched when the animation is loaded\n * @event complete - (React: onComplete) This event is dispatched when all animation loops completed\n * @event error - (React: onError) This event is dispatched when animation loading failed\n */",
+          "customElement": true
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "default",
+          "declaration": {
+            "name": "Animation",
+            "module": "components/animation/animation.component.js"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "components/appheader/appheader.component.js",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "The `mdc-appheader` component provides a structured and accessible app header layout.\nIt consists of three primary sections: leading, center, and trailing.\n\n- The **leading section** typically holds a **brand logo**, **brand name** or **menu icon**.\n- The **center section** can contain a **search bar**, **icons** or action controls.\n- The **trailing section** generally includes a **profile avatar**, **additional icons** or **action controls**.",
+          "name": "Appheader",
+          "cssParts": [
             {
-              "description": "(React: onClick) This event is dispatched when the button is clicked.",
-              "name": "click",
-              "reactName": "onClick",
-              "inheritedFrom": {
-                "name": "Buttonsimple",
-                "module": "src/components/buttonsimple/buttonsimple.component.ts"
-              }
+              "description": "The main container for styling the header.",
+              "name": "container"
             },
             {
-              "description": "(React: onKeyDown) This event is dispatched when a key is pressed down on the button.",
-              "name": "keydown",
-              "reactName": "onKeyDown",
-              "inheritedFrom": {
-                "name": "Buttonsimple",
-                "module": "src/components/buttonsimple/buttonsimple.component.ts"
-              }
+              "description": "The leading section of the header.",
+              "name": "leading-section"
             },
             {
-              "description": "(React: onKeyUp) This event is dispatched when a key is released on the button.",
-              "name": "keyup",
-              "reactName": "onKeyUp",
-              "inheritedFrom": {
-                "name": "Buttonsimple",
-                "module": "src/components/buttonsimple/buttonsimple.component.ts"
-              }
+              "description": "The center section of the header.",
+              "name": "center-section"
             },
             {
-              "description": "(React: onFocus) This event is dispatched when the button receives focus.",
-              "name": "focus",
-              "reactName": "onFocus",
-              "inheritedFrom": {
-                "name": "Buttonsimple",
-                "module": "src/components/buttonsimple/buttonsimple.component.ts"
-              }
+              "description": "The trailing section of the header.",
+              "name": "trailing-section"
             }
-          ]
+          ],
+          "slots": [
+            {
+              "description": "Slot for the leading section (e.g., brand logo, brand name).",
+              "name": "leading"
+            },
+            {
+              "description": "Slot for the center section (e.g., search bar, icons).",
+              "name": "center"
+            },
+            {
+              "description": "Slot for the trailing section (e.g., profile avatar, icons).",
+              "name": "trailing"
+            }
+          ],
+          "members": [],
+          "superclass": {
+            "name": "Component",
+            "module": "/src/models"
+          },
+          "tagName": "mdc-appheader",
+          "jsDoc": "/**\n * The `mdc-appheader` component provides a structured and accessible app header layout.\n * It consists of three primary sections: leading, center, and trailing.\n *\n * - The **leading section** typically holds a **brand logo**, **brand name** or **menu icon**.\n * - The **center section** can contain a **search bar**, **icons** or action controls.\n * - The **trailing section** generally includes a **profile avatar**, **additional icons** or **action controls**.\n *\n * @tagname mdc-appheader\n *\n * @slot leading - Slot for the leading section (e.g., brand logo, brand name).\n * @slot center - Slot for the center section (e.g., search bar, icons).\n * @slot trailing - Slot for the trailing section (e.g., profile avatar, icons).\n *\n * @csspart container - The main container for styling the header.\n * @csspart leading-section - The leading section of the header.\n * @csspart center-section - The center section of the header.\n * @csspart trailing-section - The trailing section of the header.\n */",
+          "customElement": true
         }
       ],
       "exports": [
@@ -759,8 +759,8 @@
           "kind": "js",
           "name": "default",
           "declaration": {
-            "name": "AlertChip",
-            "module": "components/alertchip/alertchip.component.js"
+            "name": "Appheader",
+            "module": "components/appheader/appheader.component.js"
           }
         }
       ]
@@ -6362,7 +6362,7 @@
               "kind": "method",
               "name": "manageRequired",
               "privacy": "private",
-              "description": "Manages the required state of the checkbox.\nIf the checkbox is not checked and the requiredLabel property is set, then the checkbox is invalid."
+              "description": "Manages the required state of the checkbox.\nIf the checkbox is not checked and the required property is set, then the checkbox is invalid."
             },
             {
               "kind": "method",
@@ -6565,12 +6565,13 @@
             },
             {
               "kind": "field",
-              "name": "requiredLabel",
+              "name": "required",
               "type": {
-                "text": "string | undefined"
+                "text": "boolean"
               },
-              "description": "The required label of the input field.\nWhen an appropriate string value is set,\nthe input field is marked as required and the label is appended with this text.",
-              "attribute": "required-label",
+              "default": "false",
+              "description": "The required attribute to indicate that the input field is required.\nIt is used to append a required indicator (*) to the label.",
+              "attribute": "required",
               "reflects": true,
               "inheritedFrom": {
                 "name": "FormfieldWrapper",
@@ -6634,15 +6635,6 @@
                 "module": "components/formfieldwrapper/formfieldwrapper.component.js"
               }
             },
-            {
-              "kind": "method",
-              "name": "renderRequiredLabel",
-              "privacy": "protected",
-              "inheritedFrom": {
-                "name": "FormfieldWrapper",
-                "module": "components/formfieldwrapper/formfieldwrapper.component.js"
-              }
-            },
             {
               "kind": "method",
               "name": "renderHelpTextIcon",
@@ -6826,12 +6818,13 @@
               }
             },
             {
-              "name": "required-label",
+              "name": "required",
               "type": {
-                "text": "string | undefined"
+                "text": "boolean"
               },
-              "description": "The required label of the input field.\nWhen an appropriate string value is set,\nthe input field is marked as required and the label is appended with this text.",
-              "fieldName": "requiredLabel",
+              "default": "false",
+              "description": "The required attribute to indicate that the input field is required.\nIt is used to append a required indicator (*) to the label.",
+              "fieldName": "required",
               "inheritedFrom": {
                 "name": "FormfieldWrapper",
                 "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
@@ -10893,12 +10886,13 @@
             },
             {
               "kind": "field",
-              "name": "requiredLabel",
+              "name": "required",
               "type": {
-                "text": "string | undefined"
+                "text": "boolean"
               },
-              "description": "The required label of the input field.\nWhen an appropriate string value is set,\nthe input field is marked as required and the label is appended with this text.",
-              "attribute": "required-label",
+              "default": "false",
+              "description": "The required attribute to indicate that the input field is required.\nIt is used to append a required indicator (*) to the label.",
+              "attribute": "required",
               "reflects": true,
               "inheritedFrom": {
                 "name": "FormfieldWrapper",
@@ -10962,15 +10956,6 @@
                 "module": "components/formfieldwrapper/formfieldwrapper.component.js"
               }
             },
-            {
-              "kind": "method",
-              "name": "renderRequiredLabel",
-              "privacy": "protected",
-              "inheritedFrom": {
-                "name": "FormfieldWrapper",
-                "module": "components/formfieldwrapper/formfieldwrapper.component.js"
-              }
-            },
             {
               "kind": "method",
               "name": "renderHelpTextIcon",
@@ -11085,12 +11070,13 @@
               }
             },
             {
-              "name": "required-label",
+              "name": "required",
               "type": {
-                "text": "string | undefined"
+                "text": "boolean"
               },
-              "description": "The required label of the input field.\nWhen an appropriate string value is set,\nthe input field is marked as required and the label is appended with this text.",
-              "fieldName": "requiredLabel",
+              "default": "false",
+              "description": "The required attribute to indicate that the input field is required.\nIt is used to append a required indicator (*) to the label.",
+              "fieldName": "required",
               "inheritedFrom": {
                 "name": "FormfieldWrapper",
                 "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
@@ -11174,12 +11160,13 @@
             },
             {
               "kind": "field",
-              "name": "requiredLabel",
+              "name": "required",
               "type": {
-                "text": "string | undefined"
+                "text": "boolean"
               },
-              "description": "The required label of the input field.\nWhen an appropriate string value is set,\nthe input field is marked as required and the label is appended with this text.",
-              "attribute": "required-label",
+              "default": "false",
+              "description": "The required attribute to indicate that the input field is required.\nIt is used to append a required indicator (*) to the label.",
+              "attribute": "required",
               "reflects": true
             },
             {
@@ -11223,11 +11210,6 @@
                 }
               }
             },
-            {
-              "kind": "method",
-              "name": "renderRequiredLabel",
-              "privacy": "protected"
-            },
             {
               "kind": "method",
               "name": "renderHelpTextIcon",
@@ -11298,12 +11280,13 @@
               "fieldName": "label"
             },
             {
-              "name": "required-label",
+              "name": "required",
               "type": {
-                "text": "string | undefined"
+                "text": "boolean"
               },
-              "description": "The required label of the input field.\nWhen an appropriate string value is set,\nthe input field is marked as required and the label is appended with this text.",
-              "fieldName": "requiredLabel"
+              "default": "false",
+              "description": "The required attribute to indicate that the input field is required.\nIt is used to append a required indicator (*) to the label.",
+              "fieldName": "required"
             },
             {
               "name": "id",
@@ -12296,12 +12279,13 @@
             },
             {
               "kind": "field",
-              "name": "requiredLabel",
+              "name": "required",
               "type": {
-                "text": "string | undefined"
+                "text": "boolean"
               },
-              "description": "The required label of the input field.\nWhen an appropriate string value is set,\nthe input field is marked as required and the label is appended with this text.",
-              "attribute": "required-label",
+              "default": "false",
+              "description": "The required attribute to indicate that the input field is required.\nIt is used to append a required indicator (*) to the label.",
+              "attribute": "required",
               "reflects": true,
               "inheritedFrom": {
                 "name": "FormfieldWrapper",
@@ -12365,15 +12349,6 @@
                 "module": "components/formfieldwrapper/formfieldwrapper.component.js"
               }
             },
-            {
-              "kind": "method",
-              "name": "renderRequiredLabel",
-              "privacy": "protected",
-              "inheritedFrom": {
-                "name": "FormfieldWrapper",
-                "module": "components/formfieldwrapper/formfieldwrapper.component.js"
-              }
-            },
             {
               "kind": "method",
               "name": "renderHelpTextIcon",
@@ -12668,12 +12643,13 @@
               }
             },
             {
-              "name": "required-label",
+              "name": "required",
               "type": {
-                "text": "string | undefined"
+                "text": "boolean"
               },
-              "description": "The required label of the input field.\nWhen an appropriate string value is set,\nthe input field is marked as required and the label is appended with this text.",
-              "fieldName": "requiredLabel",
+              "default": "false",
+              "description": "The required attribute to indicate that the input field is required.\nIt is used to append a required indicator (*) to the label.",
+              "fieldName": "required",
               "inheritedFrom": {
                 "name": "FormfieldWrapper",
                 "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
@@ -14028,14 +14004,17 @@
                   "name": "event",
                   "type": {
                     "text": "KeyboardEvent"
-                  }
+                  },
+                  "description": "The keyboard event triggered when a key is pressed down."
                 }
-              ]
+              ],
+              "description": "Fires the click event when the enter or space key is pressed."
             },
             {
               "kind": "method",
               "name": "triggerClickEvent",
-              "privacy": "private"
+              "privacy": "private",
+              "description": "Triggers a click event on the list item."
             },
             {
               "kind": "method",
@@ -14045,7 +14024,8 @@
                 "type": {
                   "text": "void"
                 }
-              }
+              },
+              "description": "Handles the click event on the list item.\nIf the tooltip is open, it has to be closed first."
             },
             {
               "kind": "method",
@@ -14127,12 +14107,44 @@
             {
               "kind": "method",
               "name": "renderTrailingControls",
-              "privacy": "protected"
+              "privacy": "protected",
+              "description": "Renders the trailing controls slot.",
+              "return": {
+                "type": {
+                  "text": ""
+                }
+              }
             },
             {
               "kind": "method",
               "name": "renderLeadingControls",
-              "privacy": "protected"
+              "privacy": "protected",
+              "description": "Renders the leading controls slot.",
+              "return": {
+                "type": {
+                  "text": ""
+                }
+              }
+            },
+            {
+              "kind": "method",
+              "name": "stopEventPropagation",
+              "privacy": "protected",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "event",
+                  "type": {
+                    "text": "Event"
+                  },
+                  "description": "The mouse event triggered when a click occurs."
+                }
+              ],
+              "description": "Stops the click event from propagating to parent elements. In case of keyboard events,\nit stops the propagation for Enter and Space keys.\nThis is useful when the list item contains controls that\nshould not trigger the click event on the list item itself."
             },
             {
               "kind": "field",
@@ -15311,6 +15323,11 @@
               "name": "renderTrailingControls",
               "privacy": "protected",
               "description": "Renders the trailing controls slot and optionally the trailing arrow icon,\nbased on `arrowPosition` and `arrowDirection`.",
+              "return": {
+                "type": {
+                  "text": ""
+                }
+              },
               "inheritedFrom": {
                 "name": "ListItem",
                 "module": "components/listitem/listitem.component.js"
@@ -15321,6 +15338,11 @@
               "name": "renderLeadingControls",
               "privacy": "protected",
               "description": "Renders the leading controls slot and optionally the leading arrow icon,\nbased on `arrowPosition` and `arrowDirection`.",
+              "return": {
+                "type": {
+                  "text": ""
+                }
+              },
               "inheritedFrom": {
                 "name": "ListItem",
                 "module": "components/listitem/listitem.component.js"
@@ -15484,9 +15506,11 @@
                   "name": "event",
                   "type": {
                     "text": "KeyboardEvent"
-                  }
+                  },
+                  "description": "The keyboard event triggered when a key is pressed down."
                 }
               ],
+              "description": "Fires the click event when the enter or space key is pressed.",
               "inheritedFrom": {
                 "name": "ListItem",
                 "module": "components/listitem/listitem.component.js"
@@ -15496,6 +15520,7 @@
               "kind": "method",
               "name": "triggerClickEvent",
               "privacy": "private",
+              "description": "Triggers a click event on the list item.",
               "inheritedFrom": {
                 "name": "ListItem",
                 "module": "components/listitem/listitem.component.js"
@@ -15510,6 +15535,7 @@
                   "text": "void"
                 }
               },
+              "description": "Handles the click event on the list item.\nIf the tooltip is open, it has to be closed first.",
               "inheritedFrom": {
                 "name": "ListItem",
                 "module": "components/listitem/listitem.component.js"
@@ -15607,6 +15633,30 @@
                 "name": "ListItem",
                 "module": "components/listitem/listitem.component.js"
               }
+            },
+            {
+              "kind": "method",
+              "name": "stopEventPropagation",
+              "privacy": "protected",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "event",
+                  "type": {
+                    "text": "Event"
+                  },
+                  "description": "The mouse event triggered when a click occurs."
+                }
+              ],
+              "description": "Stops the click event from propagating to parent elements. In case of keyboard events,\nit stops the propagation for Enter and Space keys.\nThis is useful when the list item contains controls that\nshould not trigger the click event on the list item itself.",
+              "inheritedFrom": {
+                "name": "ListItem",
+                "module": "components/listitem/listitem.component.js"
+              }
             }
           ],
           "events": [
@@ -16097,6 +16147,11 @@
               "name": "renderTrailingControls",
               "privacy": "protected",
               "description": "Renders the trailing controls slot and optionally the trailing arrow icon,\nbased on `arrowPosition` and `arrowDirection`.",
+              "return": {
+                "type": {
+                  "text": ""
+                }
+              },
               "inheritedFrom": {
                 "name": "ListItem",
                 "module": "components/listitem/listitem.component.js"
@@ -16107,6 +16162,11 @@
               "name": "renderLeadingControls",
               "privacy": "protected",
               "description": "Renders the leading controls slot and optionally the leading arrow icon,\nbased on `arrowPosition` and `arrowDirection`.",
+              "return": {
+                "type": {
+                  "text": ""
+                }
+              },
               "inheritedFrom": {
                 "name": "ListItem",
                 "module": "components/listitem/listitem.component.js"
@@ -16270,9 +16330,11 @@
                   "name": "event",
                   "type": {
                     "text": "KeyboardEvent"
-                  }
+                  },
+                  "description": "The keyboard event triggered when a key is pressed down."
                 }
               ],
+              "description": "Fires the click event when the enter or space key is pressed.",
               "inheritedFrom": {
                 "name": "ListItem",
                 "module": "components/listitem/listitem.component.js"
@@ -16282,6 +16344,7 @@
               "kind": "method",
               "name": "triggerClickEvent",
               "privacy": "private",
+              "description": "Triggers a click event on the list item.",
               "inheritedFrom": {
                 "name": "ListItem",
                 "module": "components/listitem/listitem.component.js"
@@ -16296,6 +16359,7 @@
                   "text": "void"
                 }
               },
+              "description": "Handles the click event on the list item.\nIf the tooltip is open, it has to be closed first.",
               "inheritedFrom": {
                 "name": "ListItem",
                 "module": "components/listitem/listitem.component.js"
@@ -16393,6 +16457,30 @@
                 "name": "ListItem",
                 "module": "components/listitem/listitem.component.js"
               }
+            },
+            {
+              "kind": "method",
+              "name": "stopEventPropagation",
+              "privacy": "protected",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "event",
+                  "type": {
+                    "text": "Event"
+                  },
+                  "description": "The mouse event triggered when a click occurs."
+                }
+              ],
+              "description": "Stops the click event from propagating to parent elements. In case of keyboard events,\nit stops the propagation for Enter and Space keys.\nThis is useful when the list item contains controls that\nshould not trigger the click event on the list item itself.",
+              "inheritedFrom": {
+                "name": "ListItem",
+                "module": "components/listitem/listitem.component.js"
+              }
             }
           ],
           "events": [
@@ -16737,6 +16825,11 @@
               "name": "renderTrailingControls",
               "privacy": "protected",
               "description": "Renders the trailing controls slot and optionally the trailing arrow icon,\nbased on `arrowPosition` and `arrowDirection`.",
+              "return": {
+                "type": {
+                  "text": ""
+                }
+              },
               "inheritedFrom": {
                 "name": "ListItem",
                 "module": "components/listitem/listitem.component.js"
@@ -16747,6 +16840,11 @@
               "name": "renderLeadingControls",
               "privacy": "protected",
               "description": "Renders the leading controls slot and optionally the leading arrow icon,\nbased on `arrowPosition` and `arrowDirection`.",
+              "return": {
+                "type": {
+                  "text": ""
+                }
+              },
               "inheritedFrom": {
                 "name": "ListItem",
                 "module": "components/listitem/listitem.component.js"
@@ -16910,9 +17008,11 @@
                   "name": "event",
                   "type": {
                     "text": "KeyboardEvent"
-                  }
+                  },
+                  "description": "The keyboard event triggered when a key is pressed down."
                 }
               ],
+              "description": "Fires the click event when the enter or space key is pressed.",
               "inheritedFrom": {
                 "name": "ListItem",
                 "module": "components/listitem/listitem.component.js"
@@ -16922,6 +17022,7 @@
               "kind": "method",
               "name": "triggerClickEvent",
               "privacy": "private",
+              "description": "Triggers a click event on the list item.",
               "inheritedFrom": {
                 "name": "ListItem",
                 "module": "components/listitem/listitem.component.js"
@@ -16936,6 +17037,7 @@
                   "text": "void"
                 }
               },
+              "description": "Handles the click event on the list item.\nIf the tooltip is open, it has to be closed first.",
               "inheritedFrom": {
                 "name": "ListItem",
                 "module": "components/listitem/listitem.component.js"
@@ -17033,6 +17135,30 @@
                 "name": "ListItem",
                 "module": "components/listitem/listitem.component.js"
               }
+            },
+            {
+              "kind": "method",
+              "name": "stopEventPropagation",
+              "privacy": "protected",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "event",
+                  "type": {
+                    "text": "Event"
+                  },
+                  "description": "The mouse event triggered when a click occurs."
+                }
+              ],
+              "description": "Stops the click event from propagating to parent elements. In case of keyboard events,\nit stops the propagation for Enter and Space keys.\nThis is useful when the list item contains controls that\nshould not trigger the click event on the list item itself.",
+              "inheritedFrom": {
+                "name": "ListItem",
+                "module": "components/listitem/listitem.component.js"
+              }
             }
           ],
           "events": [
@@ -20191,9 +20317,11 @@
                   "name": "event",
                   "type": {
                     "text": "KeyboardEvent"
-                  }
+                  },
+                  "description": "The keyboard event triggered when a key is pressed down."
                 }
               ],
+              "description": "Fires the click event when the enter or space key is pressed.",
               "inheritedFrom": {
                 "name": "ListItem",
                 "module": "components/listitem/listitem.component.js"
@@ -20203,6 +20331,7 @@
               "kind": "method",
               "name": "triggerClickEvent",
               "privacy": "private",
+              "description": "Triggers a click event on the list item.",
               "inheritedFrom": {
                 "name": "ListItem",
                 "module": "components/listitem/listitem.component.js"
@@ -20217,6 +20346,7 @@
                   "text": "void"
                 }
               },
+              "description": "Handles the click event on the list item.\nIf the tooltip is open, it has to be closed first.",
               "inheritedFrom": {
                 "name": "ListItem",
                 "module": "components/listitem/listitem.component.js"
@@ -20319,6 +20449,12 @@
               "kind": "method",
               "name": "renderTrailingControls",
               "privacy": "protected",
+              "description": "Renders the trailing controls slot.",
+              "return": {
+                "type": {
+                  "text": ""
+                }
+              },
               "inheritedFrom": {
                 "name": "ListItem",
                 "module": "components/listitem/listitem.component.js"
@@ -20328,6 +20464,36 @@
               "kind": "method",
               "name": "renderLeadingControls",
               "privacy": "protected",
+              "description": "Renders the leading controls slot.",
+              "return": {
+                "type": {
+                  "text": ""
+                }
+              },
+              "inheritedFrom": {
+                "name": "ListItem",
+                "module": "components/listitem/listitem.component.js"
+              }
+            },
+            {
+              "kind": "method",
+              "name": "stopEventPropagation",
+              "privacy": "protected",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "event",
+                  "type": {
+                    "text": "Event"
+                  },
+                  "description": "The mouse event triggered when a click occurs."
+                }
+              ],
+              "description": "Stops the click event from propagating to parent elements. In case of keyboard events,\nit stops the propagation for Enter and Space keys.\nThis is useful when the list item contains controls that\nshould not trigger the click event on the list item itself.",
               "inheritedFrom": {
                 "name": "ListItem",
                 "module": "components/listitem/listitem.component.js"
@@ -22243,12 +22409,13 @@
             },
             {
               "kind": "field",
-              "name": "requiredLabel",
+              "name": "required",
               "type": {
-                "text": "string | undefined"
+                "text": "boolean"
               },
-              "description": "The required label of the input field.\nWhen an appropriate string value is set,\nthe input field is marked as required and the label is appended with this text.",
-              "attribute": "required-label",
+              "default": "false",
+              "description": "The required attribute to indicate that the input field is required.\nIt is used to append a required indicator (*) to the label.",
+              "attribute": "required",
               "reflects": true,
               "inheritedFrom": {
                 "name": "FormfieldWrapper",
@@ -22312,15 +22479,6 @@
                 "module": "components/formfieldwrapper/formfieldwrapper.component.js"
               }
             },
-            {
-              "kind": "method",
-              "name": "renderRequiredLabel",
-              "privacy": "protected",
-              "inheritedFrom": {
-                "name": "FormfieldWrapper",
-                "module": "components/formfieldwrapper/formfieldwrapper.component.js"
-              }
-            },
             {
               "kind": "method",
               "name": "renderHelpTextIcon",
@@ -22449,12 +22607,13 @@
               }
             },
             {
-              "name": "required-label",
+              "name": "required",
               "type": {
-                "text": "string | undefined"
+                "text": "boolean"
               },
-              "description": "The required label of the input field.\nWhen an appropriate string value is set,\nthe input field is marked as required and the label is appended with this text.",
-              "fieldName": "requiredLabel",
+              "default": "false",
+              "description": "The required attribute to indicate that the input field is required.\nIt is used to append a required indicator (*) to the label.",
+              "fieldName": "required",
               "inheritedFrom": {
                 "name": "FormfieldWrapper",
                 "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
@@ -22785,12 +22944,13 @@
             },
             {
               "kind": "field",
-              "name": "requiredLabel",
+              "name": "required",
               "type": {
-                "text": "string | undefined"
+                "text": "boolean"
               },
-              "description": "The required label of the input field.\nWhen an appropriate string value is set,\nthe input field is marked as required and the label is appended with this text.",
-              "attribute": "required-label",
+              "default": "false",
+              "description": "The required attribute to indicate that the input field is required.\nIt is used to append a required indicator (*) to the label.",
+              "attribute": "required",
               "reflects": true,
               "inheritedFrom": {
                 "name": "FormfieldWrapper",
@@ -22854,15 +23014,6 @@
                 "module": "components/formfieldwrapper/formfieldwrapper.component.js"
               }
             },
-            {
-              "kind": "method",
-              "name": "renderRequiredLabel",
-              "privacy": "protected",
-              "inheritedFrom": {
-                "name": "FormfieldWrapper",
-                "module": "components/formfieldwrapper/formfieldwrapper.component.js"
-              }
-            },
             {
               "kind": "method",
               "name": "renderHelpTextIcon",
@@ -23010,12 +23161,13 @@
               }
             },
             {
-              "name": "required-label",
+              "name": "required",
               "type": {
-                "text": "string | undefined"
+                "text": "boolean"
               },
-              "description": "The required label of the input field.\nWhen an appropriate string value is set,\nthe input field is marked as required and the label is appended with this text.",
-              "fieldName": "requiredLabel",
+              "default": "false",
+              "description": "The required attribute to indicate that the input field is required.\nIt is used to append a required indicator (*) to the label.",
+              "fieldName": "required",
               "inheritedFrom": {
                 "name": "FormfieldWrapper",
                 "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
@@ -23445,12 +23597,13 @@
             },
             {
               "kind": "field",
-              "name": "requiredLabel",
+              "name": "required",
               "type": {
-                "text": "string | undefined"
+                "text": "boolean"
               },
-              "description": "The required label of the input field.\nWhen an appropriate string value is set,\nthe input field is marked as required and the label is appended with this text.",
-              "attribute": "required-label",
+              "default": "false",
+              "description": "The required attribute to indicate that the input field is required.\nIt is used to append a required indicator (*) to the label.",
+              "attribute": "required",
               "reflects": true,
               "inheritedFrom": {
                 "name": "FormfieldWrapper",
@@ -23514,15 +23667,6 @@
                 "module": "components/formfieldwrapper/formfieldwrapper.component.js"
               }
             },
-            {
-              "kind": "method",
-              "name": "renderRequiredLabel",
-              "privacy": "protected",
-              "inheritedFrom": {
-                "name": "FormfieldWrapper",
-                "module": "components/formfieldwrapper/formfieldwrapper.component.js"
-              }
-            },
             {
               "kind": "method",
               "name": "renderHelpTextIcon",
@@ -23706,12 +23850,13 @@
               }
             },
             {
-              "name": "required-label",
+              "name": "required",
               "type": {
-                "text": "string | undefined"
+                "text": "boolean"
               },
-              "description": "The required label of the input field.\nWhen an appropriate string value is set,\nthe input field is marked as required and the label is appended with this text.",
-              "fieldName": "requiredLabel",
+              "default": "false",
+              "description": "The required attribute to indicate that the input field is required.\nIt is used to append a required indicator (*) to the label.",
+              "fieldName": "required",
               "inheritedFrom": {
                 "name": "FormfieldWrapper",
                 "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
@@ -23866,12 +24011,13 @@
             },
             {
               "kind": "field",
-              "name": "requiredLabel",
+              "name": "required",
               "type": {
-                "text": "string | undefined"
+                "text": "boolean"
               },
-              "description": "The required label of the input field.\nWhen an appropriate string value is set,\nthe input field is marked as required and the label is appended with this text.",
-              "attribute": "required-label",
+              "default": "false",
+              "description": "The required attribute to indicate that the input field is required.\nIt is used to append a required indicator (*) to the label.",
+              "attribute": "required",
               "reflects": true,
               "inheritedFrom": {
                 "name": "FormfieldWrapper",
@@ -23935,15 +24081,6 @@
                 "module": "components/formfieldwrapper/formfieldwrapper.component.js"
               }
             },
-            {
-              "kind": "method",
-              "name": "renderRequiredLabel",
-              "privacy": "protected",
-              "inheritedFrom": {
-                "name": "FormfieldWrapper",
-                "module": "components/formfieldwrapper/formfieldwrapper.component.js"
-              }
-            },
             {
               "kind": "method",
               "name": "renderHelpTextIcon",
@@ -24054,12 +24191,13 @@
               }
             },
             {
-              "name": "required-label",
+              "name": "required",
               "type": {
-                "text": "string | undefined"
+                "text": "boolean"
               },
-              "description": "The required label of the input field.\nWhen an appropriate string value is set,\nthe input field is marked as required and the label is appended with this text.",
-              "fieldName": "requiredLabel",
+              "default": "false",
+              "description": "The required attribute to indicate that the input field is required.\nIt is used to append a required indicator (*) to the label.",
+              "fieldName": "required",
               "inheritedFrom": {
                 "name": "FormfieldWrapper",
                 "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
@@ -24873,12 +25011,13 @@
             },
             {
               "kind": "field",
-              "name": "requiredLabel",
+              "name": "required",
               "type": {
-                "text": "string | undefined"
+                "text": "boolean"
               },
-              "description": "The required label of the input field.\nWhen an appropriate string value is set,\nthe input field is marked as required and the label is appended with this text.",
-              "attribute": "required-label",
+              "default": "false",
+              "description": "The required attribute to indicate that the input field is required.\nIt is used to append a required indicator (*) to the label.",
+              "attribute": "required",
               "reflects": true,
               "inheritedFrom": {
                 "name": "FormfieldWrapper",
@@ -24942,15 +25081,6 @@
                 "module": "components/formfieldwrapper/formfieldwrapper.component.js"
               }
             },
-            {
-              "kind": "method",
-              "name": "renderRequiredLabel",
-              "privacy": "protected",
-              "inheritedFrom": {
-                "name": "FormfieldWrapper",
-                "module": "components/formfieldwrapper/formfieldwrapper.component.js"
-              }
-            },
             {
               "kind": "method",
               "name": "renderHelpTextIcon",
@@ -25285,12 +25415,13 @@
               }
             },
             {
-              "name": "required-label",
+              "name": "required",
               "type": {
-                "text": "string | undefined"
+                "text": "boolean"
               },
-              "description": "The required label of the input field.\nWhen an appropriate string value is set,\nthe input field is marked as required and the label is appended with this text.",
-              "fieldName": "requiredLabel",
+              "default": "false",
+              "description": "The required attribute to indicate that the input field is required.\nIt is used to append a required indicator (*) to the label.",
+              "fieldName": "required",
               "inheritedFrom": {
                 "name": "FormfieldWrapper",
                 "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
@@ -25663,12 +25794,6 @@
               ],
               "description": "Sets the selected value based on the provided option element.\nIt retrieves the 'label' attribute of the option, if present,\notherwise it falls back to the option's text content."
             },
-            {
-              "kind": "method",
-              "name": "manageRequired",
-              "privacy": "private",
-              "description": "Manages the required state of the select.\nIf the value is not set and the requiredLabel property is set,\nthen the select is invalid."
-            },
             {
               "kind": "method",
               "name": "dispatchChange",
@@ -26046,12 +26171,13 @@
             },
             {
               "kind": "field",
-              "name": "requiredLabel",
+              "name": "required",
               "type": {
-                "text": "string | undefined"
+                "text": "boolean"
               },
-              "description": "The required label of the input field.\nWhen an appropriate string value is set,\nthe input field is marked as required and the label is appended with this text.",
-              "attribute": "required-label",
+              "default": "false",
+              "description": "The required attribute to indicate that the input field is required.\nIt is used to append a required indicator (*) to the label.",
+              "attribute": "required",
               "reflects": true,
               "inheritedFrom": {
                 "name": "FormfieldWrapper",
@@ -26115,15 +26241,6 @@
                 "module": "components/formfieldwrapper/formfieldwrapper.component.js"
               }
             },
-            {
-              "kind": "method",
-              "name": "renderRequiredLabel",
-              "privacy": "protected",
-              "inheritedFrom": {
-                "name": "FormfieldWrapper",
-                "module": "components/formfieldwrapper/formfieldwrapper.component.js"
-              }
-            },
             {
               "kind": "method",
               "name": "renderHelpTextIcon",
@@ -26314,12 +26431,13 @@
               }
             },
             {
-              "name": "required-label",
+              "name": "required",
               "type": {
-                "text": "string | undefined"
+                "text": "boolean"
               },
-              "description": "The required label of the input field.\nWhen an appropriate string value is set,\nthe input field is marked as required and the label is appended with this text.",
-              "fieldName": "requiredLabel",
+              "default": "false",
+              "description": "The required attribute to indicate that the input field is required.\nIt is used to append a required indicator (*) to the label.",
+              "fieldName": "required",
               "inheritedFrom": {
                 "name": "FormfieldWrapper",
                 "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
@@ -27957,7 +28075,7 @@
       "declarations": [
         {
           "kind": "class",
-          "description": "mdc-textarea component, which is used to get the multi-line text input from the user.\nIt contains:\n- label: It is the title of the textarea field.\n- required-label: A string depicting that the textarea field is required.\n- Textarea: It is the multi-line text input field.\n- helper-text: It is the text that provides additional information about the textarea field.\n- max-character-limit: It is the text that shows the character count of the textarea field.\n- Error, Warning, Success, Priority Help Text type: It is the text that provides additional information\n  about the textarea field based on the validation state.\n- limitexceeded: It is the event that is dispatched when the character limit exceeds or restored.\n  This event exposes 3 properties:\n  - currentCharacterCount - the current number of characters in the textarea field,\n  - maxCharacterLimit - the maximum number of characters allowed in the textarea field,\n  - value - the current value of the textarea field,\n\n**Note**: Consumers must set the help-text-type with 'error' and\nhelp-text attribute with the error message using limitexceeded event.\nThe same help-text value will be used for the validation message to be displayed.",
+          "description": "mdc-textarea component, which is used to get the multi-line text input from the user.\nIt contains:\n- label: It is the title of the textarea field.\n- required: A boolean attribute depicting that the textarea field is required.\n- Textarea: It is the multi-line text input field.\n- helper-text: It is the text that provides additional information about the textarea field.\n- max-character-limit: It is the text that shows the character count of the textarea field.\n- Error, Warning, Success, Priority Help Text type: It is the text that provides additional information\n  about the textarea field based on the validation state.\n- limitexceeded: It is the event that is dispatched when the character limit exceeds or restored.\n  This event exposes 3 properties:\n  - currentCharacterCount - the current number of characters in the textarea field,\n  - maxCharacterLimit - the maximum number of characters allowed in the textarea field,\n  - value - the current value of the textarea field,\n\n**Note**: Consumers must set the help-text-type with 'error' and\nhelp-text attribute with the error message using limitexceeded event.\nThe same help-text value will be used for the validation message to be displayed.",
           "name": "Textarea",
           "cssProperties": [
             {
@@ -28364,12 +28482,13 @@
             },
             {
               "kind": "field",
-              "name": "requiredLabel",
+              "name": "required",
               "type": {
-                "text": "string | undefined"
+                "text": "boolean"
               },
-              "description": "The required label of the input field.\nWhen an appropriate string value is set,\nthe input field is marked as required and the label is appended with this text.",
-              "attribute": "required-label",
+              "default": "false",
+              "description": "The required attribute to indicate that the input field is required.\nIt is used to append a required indicator (*) to the label.",
+              "attribute": "required",
               "reflects": true,
               "inheritedFrom": {
                 "name": "FormfieldWrapper",
@@ -28433,15 +28552,6 @@
                 "module": "components/formfieldwrapper/formfieldwrapper.component.js"
               }
             },
-            {
-              "kind": "method",
-              "name": "renderRequiredLabel",
-              "privacy": "protected",
-              "inheritedFrom": {
-                "name": "FormfieldWrapper",
-                "module": "components/formfieldwrapper/formfieldwrapper.component.js"
-              }
-            },
             {
               "kind": "method",
               "name": "renderHelpTextIcon",
@@ -28713,12 +28823,13 @@
               }
             },
             {
-              "name": "required-label",
+              "name": "required",
               "type": {
-                "text": "string | undefined"
+                "text": "boolean"
               },
-              "description": "The required label of the input field.\nWhen an appropriate string value is set,\nthe input field is marked as required and the label is appended with this text.",
-              "fieldName": "requiredLabel",
+              "default": "false",
+              "description": "The required attribute to indicate that the input field is required.\nIt is used to append a required indicator (*) to the label.",
+              "fieldName": "required",
               "inheritedFrom": {
                 "name": "FormfieldWrapper",
                 "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
@@ -28777,7 +28888,7 @@
             "module": "/src/components/formfieldwrapper"
           },
           "tagName": "mdc-textarea",
-          "jsDoc": "/**\n * mdc-textarea component, which is used to get the multi-line text input from the user.\n * It contains:\n * - label: It is the title of the textarea field.\n * - required-label: A string depicting that the textarea field is required.\n * - Textarea: It is the multi-line text input field.\n * - helper-text: It is the text that provides additional information about the textarea field.\n * - max-character-limit: It is the text that shows the character count of the textarea field.\n * - Error, Warning, Success, Priority Help Text type: It is the text that provides additional information\n *   about the textarea field based on the validation state.\n * - limitexceeded: It is the event that is dispatched when the character limit exceeds or restored.\n *   This event exposes 3 properties:\n *   - currentCharacterCount - the current number of characters in the textarea field,\n *   - maxCharacterLimit - the maximum number of characters allowed in the textarea field,\n *   - value - the current value of the textarea field,\n *\n * **Note**: Consumers must set the help-text-type with 'error' and\n * help-text attribute with the error message using limitexceeded event.\n * The same help-text value will be used for the validation message to be displayed.\n *\n * @tagname mdc-textarea\n *\n * @event input - (React: onInput) This event is dispatched when the value of the textarea field changes (every press).\n * @event change - (React: onChange) This event is dispatched when the value of the textarea field changes (on blur).\n * @event focus - (React: onFocus) This event is dispatched when the textarea receives focus.\n * @event blur - (React: onBlur) This event is dispatched when the textarea loses focus.\n * @event limitexceeded - (React: onLimitExceeded) This event is dispatched once when the character limit\n * exceeds or restored.\n *\n *\n * @dependency mdc-icon\n * @dependency mdc-text\n * @dependency mdc-button\n *\n * @cssproperty --mdc-textarea-disabled-border-color - Border color for the textarea container when disabled\n * @cssproperty --mdc-textarea-disabled-text-color - Text color for the textarea field when disabled\n * @cssproperty --mdc-textarea-disabled-background-color - Background color for the textarea field when disabled\n * @cssproperty --mdc-textarea-text-color - Text color for the textarea field\n * @cssproperty --mdc-textarea-background-color - Background color for the textarea field\n * @cssproperty --mdc-textarea-border-color - Border color for the textarea field\n * @cssproperty --mdc-textarea-text-secondary-normal - Text color for the character counter\n * @cssproperty --mdc-textarea-error-border-color - Border color for the error related help text\n * @cssproperty --mdc-textarea-warning-border-color - Border color for the warning related help text\n * @cssproperty --mdc-textarea-success-border-color - Border color for the success related help text\n * @cssproperty --mdc-textarea-primary-border-color - Border color for the priority related help text\n * @cssproperty --mdc-textarea-hover-background-color - Background color for the textarea container when hover\n * @cssproperty --mdc-textarea-focused-background-color - Background color for the textarea container when focused\n * @cssproperty --mdc-textarea-focused-border-color - Border color for the textarea container when focused\n */",
+          "jsDoc": "/**\n * mdc-textarea component, which is used to get the multi-line text input from the user.\n * It contains:\n * - label: It is the title of the textarea field.\n * - required: A boolean attribute depicting that the textarea field is required.\n * - Textarea: It is the multi-line text input field.\n * - helper-text: It is the text that provides additional information about the textarea field.\n * - max-character-limit: It is the text that shows the character count of the textarea field.\n * - Error, Warning, Success, Priority Help Text type: It is the text that provides additional information\n *   about the textarea field based on the validation state.\n * - limitexceeded: It is the event that is dispatched when the character limit exceeds or restored.\n *   This event exposes 3 properties:\n *   - currentCharacterCount - the current number of characters in the textarea field,\n *   - maxCharacterLimit - the maximum number of characters allowed in the textarea field,\n *   - value - the current value of the textarea field,\n *\n * **Note**: Consumers must set the help-text-type with 'error' and\n * help-text attribute with the error message using limitexceeded event.\n * The same help-text value will be used for the validation message to be displayed.\n *\n * @tagname mdc-textarea\n *\n * @event input - (React: onInput) This event is dispatched when the value of the textarea field changes (every press).\n * @event change - (React: onChange) This event is dispatched when the value of the textarea field changes (on blur).\n * @event focus - (React: onFocus) This event is dispatched when the textarea receives focus.\n * @event blur - (React: onBlur) This event is dispatched when the textarea loses focus.\n * @event limitexceeded - (React: onLimitExceeded) This event is dispatched once when the character limit\n * exceeds or restored.\n *\n *\n * @dependency mdc-icon\n * @dependency mdc-text\n * @dependency mdc-button\n *\n * @cssproperty --mdc-textarea-disabled-border-color - Border color for the textarea container when disabled\n * @cssproperty --mdc-textarea-disabled-text-color - Text color for the textarea field when disabled\n * @cssproperty --mdc-textarea-disabled-background-color - Background color for the textarea field when disabled\n * @cssproperty --mdc-textarea-text-color - Text color for the textarea field\n * @cssproperty --mdc-textarea-background-color - Background color for the textarea field\n * @cssproperty --mdc-textarea-border-color - Border color for the textarea field\n * @cssproperty --mdc-textarea-text-secondary-normal - Text color for the character counter\n * @cssproperty --mdc-textarea-error-border-color - Border color for the error related help text\n * @cssproperty --mdc-textarea-warning-border-color - Border color for the warning related help text\n * @cssproperty --mdc-textarea-success-border-color - Border color for the success related help text\n * @cssproperty --mdc-textarea-primary-border-color - Border color for the priority related help text\n * @cssproperty --mdc-textarea-hover-background-color - Background color for the textarea container when hover\n * @cssproperty --mdc-textarea-focused-background-color - Background color for the textarea container when focused\n * @cssproperty --mdc-textarea-focused-border-color - Border color for the textarea container when focused\n */",
           "customElement": true,
           "slots": [
             {
@@ -29020,7 +29131,7 @@
               "kind": "method",
               "name": "manageRequired",
               "privacy": "private",
-              "description": "Manages the required state of the checkbox.\nIf the checkbox is not checked and the requiredLabel property is set, then the checkbox is invalid."
+              "description": "Manages the required state of the checkbox.\nIf the checkbox is not checked and the required property is set, then the checkbox is invalid.\nIf the validationMessage is set, it will be used as the custom validity message.\nIf the validationMessage is not set, it will clear the custom validity message."
             },
             {
               "kind": "method",
@@ -29234,12 +29345,13 @@
             },
             {
               "kind": "field",
-              "name": "requiredLabel",
+              "name": "required",
               "type": {
-                "text": "string | undefined"
+                "text": "boolean"
               },
-              "description": "The required label of the input field.\nWhen an appropriate string value is set,\nthe input field is marked as required and the label is appended with this text.",
-              "attribute": "required-label",
+              "default": "false",
+              "description": "The required attribute to indicate that the input field is required.\nIt is used to append a required indicator (*) to the label.",
+              "attribute": "required",
               "reflects": true,
               "inheritedFrom": {
                 "name": "FormfieldWrapper",
@@ -29303,15 +29415,6 @@
                 "module": "components/formfieldwrapper/formfieldwrapper.component.js"
               }
             },
-            {
-              "kind": "method",
-              "name": "renderRequiredLabel",
-              "privacy": "protected",
-              "inheritedFrom": {
-                "name": "FormfieldWrapper",
-                "module": "components/formfieldwrapper/formfieldwrapper.component.js"
-              }
-            },
             {
               "kind": "method",
               "name": "renderHelpTextIcon",
@@ -29495,12 +29598,13 @@
               }
             },
             {
-              "name": "required-label",
+              "name": "required",
               "type": {
-                "text": "string | undefined"
+                "text": "boolean"
               },
-              "description": "The required label of the input field.\nWhen an appropriate string value is set,\nthe input field is marked as required and the label is appended with this text.",
-              "fieldName": "requiredLabel",
+              "default": "false",
+              "description": "The required attribute to indicate that the input field is required.\nIt is used to append a required indicator (*) to the label.",
+              "fieldName": "required",
               "inheritedFrom": {
                 "name": "FormfieldWrapper",
                 "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"