@momentum-design/components 0.120.2 → 0.120.4

package/dist/custom-elements.json

@@ -9909,6 +9909,80 @@
               "name": "--mdc-checkbox-disabled-checked-icon-color"
             }
           ],
+          "cssParts": [
+            {
+              "description": "The label element.",
+              "name": "label",
+              "inheritedFrom": {
+                "name": "FormfieldWrapper",
+                "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
+              }
+            },
+            {
+              "description": "The container for the label and required indicator elements.",
+              "name": "label-text",
+              "inheritedFrom": {
+                "name": "FormfieldWrapper",
+                "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
+              }
+            },
+            {
+              "description": "The required indicator element that is displayed next to the label when the `required` property is set to true.",
+              "name": "required-indicator",
+              "inheritedFrom": {
+                "name": "FormfieldWrapper",
+                "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
+              }
+            },
+            {
+              "description": "The info icon button element that is displayed next to the label when the `toggletip-text` property is set.",
+              "name": "info-icon-btn",
+              "inheritedFrom": {
+                "name": "FormfieldWrapper",
+                "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
+              }
+            },
+            {
+              "description": "The toggletip element that is displayed when the info icon button is clicked.",
+              "name": "label-toggletip",
+              "inheritedFrom": {
+                "name": "FormfieldWrapper",
+                "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
+              }
+            },
+            {
+              "description": "The helper/validation text element.",
+              "name": "help-text",
+              "inheritedFrom": {
+                "name": "FormfieldWrapper",
+                "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
+              }
+            },
+            {
+              "description": "The helper/validation icon element that is displayed next to the helper/validation text.",
+              "name": "helper-icon",
+              "inheritedFrom": {
+                "name": "FormfieldWrapper",
+                "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
+              }
+            },
+            {
+              "description": "The container for the helper/validation icon and text elements.",
+              "name": "help-text-container",
+              "inheritedFrom": {
+                "name": "FormfieldWrapper",
+                "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
+              }
+            },
+            {
+              "description": "The native checkbox input element.",
+              "name": "checkbox-input"
+            },
+            {
+              "description": "The container for the label and helper text elements.",
+              "name": "text-container"
+            }
+          ],
           "slots": [
             {
               "description": "Slot for the label element. If not provided, the `label` property will be used to render the label.",
@@ -10617,7 +10691,7 @@
             "module": "/src/components/formfieldwrapper/formfieldwrapper.component"
           },
           "tagName": "mdc-checkbox",
-          "jsDoc": "/**\n * Checkboxes allow users to select multiple options from a list or turn an item/feature on or off.\n * These are often used in forms, settings, and selections in lists.\n *\n * A checkbox component contains an optional label and an optional helper text.\n *\n * To create a group of checkboxes, use the FormFieldGroup component.\n *\n * @dependency mdc-button\n * @dependency mdc-icon\n * @dependency mdc-staticcheckbox\n * @dependency mdc-text\n * @dependency mdc-toggletip\n *\n * @tagname mdc-checkbox\n *\n * @event change - (React: onChange) Event that gets dispatched when the checkbox state changes.\n * @event focus - (React: onFocus) Event that gets dispatched when the checkbox receives focus.\n *\n * @cssproperty --mdc-checkbox-background-color-hover - Allows customization of the background color on hover.\n * @cssproperty --mdc-checkbox-checked-background-color-hover - Background color for a selected checkbox when hovered.\n * @cssproperty --mdc-checkbox-checked-pressed-icon-color - Background color for a selected checkbox when pressed.\n * @cssproperty --mdc-checkbox-pressed-icon-color - Background color for a selected checkbox when pressed.\n * @cssproperty --mdc-checkbox-disabled-checked-icon-color - Background color for a selected checkbox when disabled.\n *\n * @slot label - Slot for the label element. If not provided, the `label` property will be used to render the label.\n * @slot toggletip - Slot for the toggletip info icon button. If not provided, the `toggletip-text` property will be used to render the info icon button and toggletip.\n * @slot help-icon - Slot for the helper/validation icon. If not provided, the icon will be rendered based on the `helpTextType` property.\n * @slot help-text - Slot for the helper/validation text. If not provided, the `helpText` property will be used to render the helper/validation text.\n */",
+          "jsDoc": "/**\n * Checkboxes allow users to select multiple options from a list or turn an item/feature on or off.\n * These are often used in forms, settings, and selections in lists.\n *\n * A checkbox component contains an optional label and an optional helper text.\n *\n * To create a group of checkboxes, use the FormFieldGroup component.\n *\n * @dependency mdc-button\n * @dependency mdc-icon\n * @dependency mdc-staticcheckbox\n * @dependency mdc-text\n * @dependency mdc-toggletip\n *\n * @tagname mdc-checkbox\n *\n * @event change - (React: onChange) Event that gets dispatched when the checkbox state changes.\n * @event focus - (React: onFocus) Event that gets dispatched when the checkbox receives focus.\n *\n * @cssproperty --mdc-checkbox-background-color-hover - Allows customization of the background color on hover.\n * @cssproperty --mdc-checkbox-checked-background-color-hover - Background color for a selected checkbox when hovered.\n * @cssproperty --mdc-checkbox-checked-pressed-icon-color - Background color for a selected checkbox when pressed.\n * @cssproperty --mdc-checkbox-pressed-icon-color - Background color for a selected checkbox when pressed.\n * @cssproperty --mdc-checkbox-disabled-checked-icon-color - Background color for a selected checkbox when disabled.\n *\n * @slot label - Slot for the label element. If not provided, the `label` property will be used to render the label.\n * @slot toggletip - Slot for the toggletip info icon button. If not provided, the `toggletip-text` property will be used to render the info icon button and toggletip.\n * @slot help-icon - Slot for the helper/validation icon. If not provided, the icon will be rendered based on the `helpTextType` property.\n * @slot help-text - Slot for the helper/validation text. If not provided, the `helpText` property will be used to render the helper/validation text.\n *\n * @csspart label - The label element.\n * @csspart label-text - The container for the label and required indicator elements.\n * @csspart required-indicator - The required indicator element that is displayed next to the label when the `required` property is set to true.\n * @csspart info-icon-btn - The info icon button element that is displayed next to the label when the `toggletip-text` property is set.\n * @csspart label-toggletip - The toggletip element that is displayed when the info icon button is clicked.\n * @csspart help-text - The helper/validation text element.\n * @csspart helper-icon - The helper/validation icon element that is displayed next to the helper/validation text.\n * @csspart help-text-container - The container for the helper/validation icon and text elements.\n * @csspart checkbox-input - The native checkbox input element.\n * @csspart text-container - The container for the label and helper text elements.\n */",
           "customElement": true
         }
       ],
@@ -13282,13 +13356,77 @@
             }
           ],
           "cssParts": [
+            {
+              "description": "The label element.",
+              "name": "label",
+              "inheritedFrom": {
+                "name": "FormfieldWrapper",
+                "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
+              }
+            },
+            {
+              "description": "The container for the label and required indicator elements.",
+              "name": "label-text",
+              "inheritedFrom": {
+                "name": "FormfieldWrapper",
+                "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
+              }
+            },
+            {
+              "description": "The required indicator element that is displayed next to the label when the `required` property is set to true.",
+              "name": "required-indicator",
+              "inheritedFrom": {
+                "name": "FormfieldWrapper",
+                "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
+              }
+            },
+            {
+              "description": "The info icon button element that is displayed next to the label when the `toggletip-text` property is set.",
+              "name": "info-icon-btn",
+              "inheritedFrom": {
+                "name": "FormfieldWrapper",
+                "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
+              }
+            },
+            {
+              "description": "The toggletip element that is displayed when the info icon button is clicked.",
+              "name": "label-toggletip",
+              "inheritedFrom": {
+                "name": "FormfieldWrapper",
+                "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
+              }
+            },
+            {
+              "description": "The helper/validation text element.",
+              "name": "help-text",
+              "inheritedFrom": {
+                "name": "FormfieldWrapper",
+                "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
+              }
+            },
+            {
+              "description": "The helper/validation icon element that is displayed next to the helper/validation text.",
+              "name": "helper-icon",
+              "inheritedFrom": {
+                "name": "FormfieldWrapper",
+                "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
+              }
+            },
+            {
+              "description": "The container for the helper/validation icon and text elements.",
+              "name": "help-text-container",
+              "inheritedFrom": {
+                "name": "FormfieldWrapper",
+                "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
+              }
+            },
             {
               "description": "The internal native input element of the combobox.",
               "name": "internal-native-input"
             },
             {
               "description": "The input element of the combobox.",
-              "name": "mdc-input"
+              "name": "input-text"
             },
             {
               "description": "The no result text element of the combobox.",
@@ -14452,7 +14590,7 @@
             "module": "/src/components/formfieldwrapper/formfieldwrapper.component"
           },
           "tagName": "mdc-combobox",
-          "jsDoc": "/**\n * The Combobox component is a text-based dropdown control that allows users to select an option from a predefined list.\n * Users can type text to filter the options and select their desired choice.\n *\n * When the user starts typing, the filter uses a \"starts with\" search and displays options based on the text entered by the user.\n * If the user entered text that doesn't match with any of the options, then the text in the `no-result-text` attribute will be displayed.\n *\n * If there is no text in the `no-result-text` attribute then nothing will be shown.\n *\n * Combobox is designed to work with `mdc-option` for individual options and `mdc-optgroup` for grouping related options.\n * The component ensures accessibility and usability while handling various use cases, including long text truncation with tooltip support.\n *\n * Every mdc-option should have a `value` attribute set to ensure proper form submission.\n *\n * To set a default option, use the `selected` attribute on the `mdc-option` element.\n *\n * **Note:** Make sure to add `mdc-selectlistbox` as a child of `mdc-combobox` and wrap options/optgroup in it to ensure proper accessibility functionality. Read more about it in SelectListBox documentation.\n *\n * If you need to use `mdc-tooltip` with any options, make sure to place the tooltip component outside the `mdc-selectlistbox` element. Read more about it in Options documentation.\n *\n * To understand more about combobox and its patterns, refer to this [WCAG example](https://www.w3.org/WAI/ARIA/apg/patterns/combobox/examples/combobox-autocomplete-list/).\n *\n * @dependency mdc-buttonsimple\n * @dependency mdc-icon\n * @dependency mdc-input\n * @dependency mdc-listitem\n * @dependency mdc-popover\n *\n * @tagname mdc-combobox\n *\n * @slot default - This is a default/unnamed slot for Selectlistbox including options and/or option group.\n * @slot label - Slot for the label element. If not provided, the `label` property will be used to render the label.\n * @slot toggletip - Slot for the toggletip info icon button. If not provided, the `toggletip-text` property will be used to render the info icon button and toggletip.\n * @slot help-icon - Slot for the helper/validation icon. If not provided, the icon will be rendered based on the `helpTextType` property.\n * @slot help-text - Slot for the helper/validation text. If not provided, the `helpText` property will be used to render the helper/validation text.\n *\n * @event click - (React: onClick) This event is dispatched when the combobox is clicked.\n * @event change - (React: onChange) This event is dispatched when the combobox is changed.\n * @event input - (React: onInput) This event is dispatched when the combobox is changed.\n * @event keydown - (React: onKeyDown) This event is dispatched when a key is pressed down on the combobox.\n * @event focus - (React: onFocus) This event is dispatched when the combobox receives focus.\n *\n * @cssproperty --mdc-combobox-border-color - The border color of the combobox\n * @cssproperty --mdc-combobox-icon-color - The icon color of the combobox\n * @cssproperty --mdc-combobox-listbox-height - The height of the listbox inside the combobox\n * @cssproperty --mdc-combobox-listbox-width - The width of the listbox inside the combobox\n * @cssproperty --mdc-combobox-width - The width of the combobox\n * @cssproperty --mdc-combobox-hover-background-color - The background color of the combobox when hovered\n * @cssproperty --mdc-combobox-focused-background-color - The background color of the combobox when focused\n * @cssproperty --mdc-combobox-error-border-color - The border color of the combobox when in error state\n * @cssproperty --mdc-combobox-warning-border-color - The border color of the combobox when in warning state\n * @cssproperty --mdc-combobox-success-border-color - The border color of the combobox when in success state\n * @cssproperty --mdc-combobox-primary-border-color - The border color of the combobox when in primary state\n * @cssproperty --mdc-combobox-text-color-disabled - The text color of the combobox when disabled\n * @cssproperty --mdc-combobox-focused-border-color - The border color of the combobox when focused\n *\n * @csspart internal-native-input - The internal native input element of the combobox.\n * @csspart mdc-input - The input element of the combobox.\n * @csspart no-result-text - The no result text element of the combobox.\n * @csspart combobox__base - The base container element of the combobox.\n * @csspart combobox__button - The button element of the combobox.\n * @csspart combobox__button-icon - The icon element of the button of the combobox.\n */",
+          "jsDoc": "/**\n * The Combobox component is a text-based dropdown control that allows users to select an option from a predefined list.\n * Users can type text to filter the options and select their desired choice.\n *\n * When the user starts typing, the filter uses a \"starts with\" search and displays options based on the text entered by the user.\n * If the user entered text that doesn't match with any of the options, then the text in the `no-result-text` attribute will be displayed.\n *\n * If there is no text in the `no-result-text` attribute then nothing will be shown.\n *\n * Combobox is designed to work with `mdc-option` for individual options and `mdc-optgroup` for grouping related options.\n * The component ensures accessibility and usability while handling various use cases, including long text truncation with tooltip support.\n *\n * Every mdc-option should have a `value` attribute set to ensure proper form submission.\n *\n * To set a default option, use the `selected` attribute on the `mdc-option` element.\n *\n * **Note:** Make sure to add `mdc-selectlistbox` as a child of `mdc-combobox` and wrap options/optgroup in it to ensure proper accessibility functionality. Read more about it in SelectListBox documentation.\n *\n * If you need to use `mdc-tooltip` with any options, make sure to place the tooltip component outside the `mdc-selectlistbox` element. Read more about it in Options documentation.\n *\n * To understand more about combobox and its patterns, refer to this [WCAG example](https://www.w3.org/WAI/ARIA/apg/patterns/combobox/examples/combobox-autocomplete-list/).\n *\n * @dependency mdc-buttonsimple\n * @dependency mdc-icon\n * @dependency mdc-input\n * @dependency mdc-listitem\n * @dependency mdc-popover\n *\n * @tagname mdc-combobox\n *\n * @slot default - This is a default/unnamed slot for Selectlistbox including options and/or option group.\n * @slot label - Slot for the label element. If not provided, the `label` property will be used to render the label.\n * @slot toggletip - Slot for the toggletip info icon button. If not provided, the `toggletip-text` property will be used to render the info icon button and toggletip.\n * @slot help-icon - Slot for the helper/validation icon. If not provided, the icon will be rendered based on the `helpTextType` property.\n * @slot help-text - Slot for the helper/validation text. If not provided, the `helpText` property will be used to render the helper/validation text.\n *\n * @event click - (React: onClick) This event is dispatched when the combobox is clicked.\n * @event change - (React: onChange) This event is dispatched when the combobox is changed.\n * @event input - (React: onInput) This event is dispatched when the combobox is changed.\n * @event keydown - (React: onKeyDown) This event is dispatched when a key is pressed down on the combobox.\n * @event focus - (React: onFocus) This event is dispatched when the combobox receives focus.\n *\n * @cssproperty --mdc-combobox-border-color - The border color of the combobox\n * @cssproperty --mdc-combobox-icon-color - The icon color of the combobox\n * @cssproperty --mdc-combobox-listbox-height - The height of the listbox inside the combobox\n * @cssproperty --mdc-combobox-listbox-width - The width of the listbox inside the combobox\n * @cssproperty --mdc-combobox-width - The width of the combobox\n * @cssproperty --mdc-combobox-hover-background-color - The background color of the combobox when hovered\n * @cssproperty --mdc-combobox-focused-background-color - The background color of the combobox when focused\n * @cssproperty --mdc-combobox-error-border-color - The border color of the combobox when in error state\n * @cssproperty --mdc-combobox-warning-border-color - The border color of the combobox when in warning state\n * @cssproperty --mdc-combobox-success-border-color - The border color of the combobox when in success state\n * @cssproperty --mdc-combobox-primary-border-color - The border color of the combobox when in primary state\n * @cssproperty --mdc-combobox-text-color-disabled - The text color of the combobox when disabled\n * @cssproperty --mdc-combobox-focused-border-color - The border color of the combobox when focused\n *\n * @csspart label - The label element.\n * @csspart label-text - The container for the label and required indicator elements.\n * @csspart required-indicator - The required indicator element that is displayed next to the label when the `required` property is set to true.\n * @csspart info-icon-btn - The info icon button element that is displayed next to the label when the `toggletip-text` property is set.\n * @csspart label-toggletip - The toggletip element that is displayed when the info icon button is clicked.\n * @csspart help-text - The helper/validation text element.\n * @csspart helper-icon - The helper/validation icon element that is displayed next to the helper/validation text.\n * @csspart help-text-container - The container for the helper/validation icon and text elements.\n * @csspart internal-native-input - The internal native input element of the combobox.\n * @csspart input-text - The input element of the combobox.\n * @csspart no-result-text - The no result text element of the combobox.\n * @csspart combobox__base - The base container element of the combobox.\n * @csspart combobox__button - The button element of the combobox.\n * @csspart combobox__button-icon - The icon element of the button of the combobox.\n */",
           "customElement": true
         }
       ],
@@ -16501,6 +16639,80 @@
           "kind": "class",
           "description": "`mdc-formfieldgroup` component, groups the form field components together.\nAll passed in children will have a gap of 12px (0.75rem) each applied.\n\nThis component is specifically for creating a `checkbox` group and a `toggle` group component.\nFor the radiogroup use the RadioGroup component instead.\n\nThe header text and description text are displayed above the items with accessible labels.<br/>\nThe consumer has to provide atleast the header-text or the aria-label,\nlike one of them <b>has</b> to be passed in always, otherwise its not accessible.\n\nThe role will be set to `group`.\nThe aria-label will be set with the data-aria-label property.\nThe aria-labelledby will be set with the header id which contains the header text information.\nThe aria-describedby will be set with the description id which contains the description text information.",
           "name": "FormfieldGroup",
+          "cssParts": [
+            {
+              "description": "The label element.",
+              "name": "label",
+              "inheritedFrom": {
+                "name": "FormfieldWrapper",
+                "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
+              }
+            },
+            {
+              "description": "The container for the label and required indicator elements.",
+              "name": "label-text",
+              "inheritedFrom": {
+                "name": "FormfieldWrapper",
+                "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
+              }
+            },
+            {
+              "description": "The required indicator element that is displayed next to the label when the `required` property is set to true.",
+              "name": "required-indicator",
+              "inheritedFrom": {
+                "name": "FormfieldWrapper",
+                "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
+              }
+            },
+            {
+              "description": "The info icon button element that is displayed next to the label when the `toggletip-text` property is set.",
+              "name": "info-icon-btn",
+              "inheritedFrom": {
+                "name": "FormfieldWrapper",
+                "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
+              }
+            },
+            {
+              "description": "The toggletip element that is displayed when the info icon button is clicked.",
+              "name": "label-toggletip",
+              "inheritedFrom": {
+                "name": "FormfieldWrapper",
+                "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
+              }
+            },
+            {
+              "description": "The helper/validation text element.",
+              "name": "help-text",
+              "inheritedFrom": {
+                "name": "FormfieldWrapper",
+                "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
+              }
+            },
+            {
+              "description": "The helper/validation icon element that is displayed next to the helper/validation text.",
+              "name": "helper-icon",
+              "inheritedFrom": {
+                "name": "FormfieldWrapper",
+                "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
+              }
+            },
+            {
+              "description": "The container for the helper/validation icon and text elements.",
+              "name": "help-text-container",
+              "inheritedFrom": {
+                "name": "FormfieldWrapper",
+                "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
+              }
+            },
+            {
+              "description": "Formfieldgroup host container",
+              "name": "container"
+            },
+            {
+              "description": "This contains the label and help text for the group",
+              "name": "group-header"
+            }
+          ],
           "slots": [
             {
               "description": "This is a default slot for checkbox or toggle components.",
@@ -16770,7 +16982,7 @@
             "module": "/src/components/formfieldwrapper/formfieldwrapper.component"
           },
           "tagName": "mdc-formfieldgroup",
-          "jsDoc": "/**\n * `mdc-formfieldgroup` component, groups the form field components together.\n * All passed in children will have a gap of 12px (0.75rem) each applied.\n *\n * This component is specifically for creating a `checkbox` group and a `toggle` group component.\n * For the radiogroup use the RadioGroup component instead.\n *\n * The header text and description text are displayed above the items with accessible labels.<br/>\n * The consumer has to provide atleast the header-text or the aria-label,\n * like one of them <b>has</b> to be passed in always, otherwise its not accessible.\n *\n * The role will be set to `group`.\n * The aria-label will be set with the data-aria-label property.\n * The aria-labelledby will be set with the header id which contains the header text information.\n * The aria-describedby will be set with the description id which contains the description text information.\n *\n * @tagname mdc-formfieldgroup\n *\n * @dependency mdc-button\n * @dependency mdc-icon\n * @dependency mdc-text\n * @dependency mdc-toggletip\n *\n * @slot default - This is a default slot for checkbox or toggle components.\n * @slot label - Slot for the label element. If not provided, the `label` property will be used to render the label.\n * @slot toggletip - Slot for the toggletip info icon button. If not provided, the `toggletip-text` property will be used to render the info icon button and toggletip.\n * @slot help-icon - Slot for the helper/validation icon. If not provided, the icon will be rendered based on the `helpTextType` property.\n * @slot help-text - Slot for the helper/validation text. If not provided, the `helpText` property will be used to render the helper/validation text.\n */",
+          "jsDoc": "/**\n * `mdc-formfieldgroup` component, groups the form field components together.\n * All passed in children will have a gap of 12px (0.75rem) each applied.\n *\n * This component is specifically for creating a `checkbox` group and a `toggle` group component.\n * For the radiogroup use the RadioGroup component instead.\n *\n * The header text and description text are displayed above the items with accessible labels.<br/>\n * The consumer has to provide atleast the header-text or the aria-label,\n * like one of them <b>has</b> to be passed in always, otherwise its not accessible.\n *\n * The role will be set to `group`.\n * The aria-label will be set with the data-aria-label property.\n * The aria-labelledby will be set with the header id which contains the header text information.\n * The aria-describedby will be set with the description id which contains the description text information.\n *\n * @tagname mdc-formfieldgroup\n *\n * @dependency mdc-button\n * @dependency mdc-icon\n * @dependency mdc-text\n * @dependency mdc-toggletip\n *\n * @slot default - This is a default slot for checkbox or toggle components.\n * @slot label - Slot for the label element. If not provided, the `label` property will be used to render the label.\n * @slot toggletip - Slot for the toggletip info icon button. If not provided, the `toggletip-text` property will be used to render the info icon button and toggletip.\n * @slot help-icon - Slot for the helper/validation icon. If not provided, the icon will be rendered based on the `helpTextType` property.\n * @slot help-text - Slot for the helper/validation text. If not provided, the `helpText` property will be used to render the helper/validation text.\n *\n * @csspart label - The label element.\n * @csspart label-text - The container for the label and required indicator elements.\n * @csspart required-indicator - The required indicator element that is displayed next to the label when the `required` property is set to true.\n * @csspart info-icon-btn - The info icon button element that is displayed next to the label when the `toggletip-text` property is set.\n * @csspart label-toggletip - The toggletip element that is displayed when the info icon button is clicked.\n * @csspart help-text - The helper/validation text element.\n * @csspart helper-icon - The helper/validation icon element that is displayed next to the helper/validation text.\n * @csspart help-text-container - The container for the helper/validation icon and text elements.\n * @csspart container - Formfieldgroup host container\n * @csspart group-header - This contains the label and help text for the group\n */",
           "customElement": true,
           "attributes": [
             {
@@ -16918,6 +17130,40 @@
           "kind": "class",
           "description": "formfieldwrapper is a component that contains the label and helper/validation text\n that can be configured in various ways to suit different use cases (most of the input related components).\nIt is used as an internal component and is not intended to be used directly by consumers.",
           "name": "FormfieldWrapper",
+          "cssParts": [
+            {
+              "description": "The label element.",
+              "name": "label"
+            },
+            {
+              "description": "The container for the label and required indicator elements.",
+              "name": "label-text"
+            },
+            {
+              "description": "The required indicator element that is displayed next to the label when the `required` property is set to true.",
+              "name": "required-indicator"
+            },
+            {
+              "description": "The info icon button element that is displayed next to the label when the `toggletip-text` property is set.",
+              "name": "info-icon-btn"
+            },
+            {
+              "description": "The toggletip element that is displayed when the info icon button is clicked.",
+              "name": "label-toggletip"
+            },
+            {
+              "description": "The helper/validation text element.",
+              "name": "help-text"
+            },
+            {
+              "description": "The helper/validation icon element that is displayed next to the helper/validation text.",
+              "name": "helper-icon"
+            },
+            {
+              "description": "The container for the helper/validation icon and text elements.",
+              "name": "help-text-container"
+            }
+          ],
           "slots": [
             {
               "description": "Slot for the label element. If not provided, the `label` property will be used to render the label.",
@@ -17180,7 +17426,7 @@
             "module": "/src/models"
           },
           "tagName": "mdc-formfieldwrapper",
-          "jsDoc": "/**\n * formfieldwrapper is a component that contains the label and helper/validation text\n *  that can be configured in various ways to suit different use cases (most of the input related components).\n * It is used as an internal component and is not intended to be used directly by consumers.\n *\n * @tagname mdc-formfieldwrapper\n *\n * @dependency mdc-text\n * @dependency mdc-icon\n * @dependency mdc-button\n * @dependency mdc-toggletip\n *\n * @slot label - Slot for the label element. If not provided, the `label` property will be used to render the label.\n * @slot toggletip - Slot for the toggletip info icon button. If not provided, the `toggletip-text` property will be used to render the info icon button and toggletip.\n * @slot help-icon - Slot for the helper/validation icon. If not provided, the icon will be rendered based on the `helpTextType` property.\n * @slot help-text - Slot for the helper/validation text. If not provided, the `helpText` property will be used to render the helper/validation text.\n */",
+          "jsDoc": "/**\n * formfieldwrapper is a component that contains the label and helper/validation text\n *  that can be configured in various ways to suit different use cases (most of the input related components).\n * It is used as an internal component and is not intended to be used directly by consumers.\n *\n * @tagname mdc-formfieldwrapper\n *\n * @dependency mdc-text\n * @dependency mdc-icon\n * @dependency mdc-button\n * @dependency mdc-toggletip\n *\n * @slot label - Slot for the label element. If not provided, the `label` property will be used to render the label.\n * @slot toggletip - Slot for the toggletip info icon button. If not provided, the `toggletip-text` property will be used to render the info icon button and toggletip.\n * @slot help-icon - Slot for the helper/validation icon. If not provided, the icon will be rendered based on the `helpTextType` property.\n * @slot help-text - Slot for the helper/validation text. If not provided, the `helpText` property will be used to render the helper/validation text.\n *\n * @csspart label - The label element.\n * @csspart label-text - The container for the label and required indicator elements.\n * @csspart required-indicator - The required indicator element that is displayed next to the label when the `required` property is set to true.\n * @csspart info-icon-btn - The info icon button element that is displayed next to the label when the `toggletip-text` property is set.\n * @csspart label-toggletip - The toggletip element that is displayed when the info icon button is clicked.\n * @csspart help-text - The helper/validation text element.\n * @csspart helper-icon - The helper/validation icon element that is displayed next to the helper/validation text.\n * @csspart help-text-container - The container for the helper/validation icon and text elements.\n */",
           "customElement": true
         }
       ],
@@ -18047,6 +18293,96 @@
               "name": "--mdc-input-primary-border-color"
             }
           ],
+          "cssParts": [
+            {
+              "description": "The label element.",
+              "name": "label",
+              "inheritedFrom": {
+                "name": "FormfieldWrapper",
+                "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
+              }
+            },
+            {
+              "description": "The container for the label and required indicator elements.",
+              "name": "label-text",
+              "inheritedFrom": {
+                "name": "FormfieldWrapper",
+                "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
+              }
+            },
+            {
+              "description": "The required indicator element that is displayed next to the label when the `required` property is set to true.",
+              "name": "required-indicator",
+              "inheritedFrom": {
+                "name": "FormfieldWrapper",
+                "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
+              }
+            },
+            {
+              "description": "The info icon button element that is displayed next to the label when the `toggletip-text` property is set.",
+              "name": "info-icon-btn",
+              "inheritedFrom": {
+                "name": "FormfieldWrapper",
+                "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
+              }
+            },
+            {
+              "description": "The toggletip element that is displayed when the info icon button is clicked.",
+              "name": "label-toggletip",
+              "inheritedFrom": {
+                "name": "FormfieldWrapper",
+                "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
+              }
+            },
+            {
+              "description": "The helper/validation text element.",
+              "name": "help-text",
+              "inheritedFrom": {
+                "name": "FormfieldWrapper",
+                "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
+              }
+            },
+            {
+              "description": "The helper/validation icon element that is displayed next to the helper/validation text.",
+              "name": "helper-icon",
+              "inheritedFrom": {
+                "name": "FormfieldWrapper",
+                "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
+              }
+            },
+            {
+              "description": "The container for the helper/validation icon and text elements.",
+              "name": "help-text-container",
+              "inheritedFrom": {
+                "name": "FormfieldWrapper",
+                "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
+              }
+            },
+            {
+              "description": "The leading icon element that is displayed before the input field.",
+              "name": "leading-icon"
+            },
+            {
+              "description": "The prefix text element that is displayed before the input field.",
+              "name": "prefix-text"
+            },
+            {
+              "description": "The container for the input field, leading icon, prefix text, and trailing button elements.",
+              "name": "input-container"
+            },
+            {
+              "description": "The container for the input field, leading icon, and prefix text elements.",
+              "name": "input-section"
+            },
+            {
+              "description": "The input field element.",
+              "name": "input-text"
+            },
+            {
+              "description": "The trailing button element that is displayed to clear the input field when the `trailingButton` property is set to true.",
+              "name": "trailing-button"
+            }
+          ],
           "slots": [
             {
               "description": "Slot for the label element. If not provided, the `label` property will be used to render the label.",
@@ -19028,7 +19364,7 @@
             "module": "/src/components/formfieldwrapper"
           },
           "tagName": "mdc-input",
-          "jsDoc": "/**\n * mdc-input is a component that allows users to input text.\n *  It contains:\n * - label field - describe the input field.\n * - input field - contains the value\n * - help text or validation message - displayed below the input field.\n * - trailing button - it displays a clear the input field.\n * - prefix text - displayed before the input field.\n * - leading icon - displayed before the input field.\n * - clear-aria-label - aria label for the trailing button.\n * - all the attributes of the input field.\n *\n * @tagname mdc-input\n *\n * @event input - (React: onInput) This event is dispatched when the value of the input field changes (every press).\n * @event change - (React: onChange) This event is dispatched when the value of the input field changes (on blur).\n * @event focus - (React: onFocus) This event is dispatched when the input receives focus.\n * @event blur - (React: onBlur) This event is dispatched when the input loses focus.\n * @event clear - (React: onClear) This event is dispatched when the input text is cleared.\n *\n * @dependency mdc-icon\n * @dependency mdc-text\n * @dependency mdc-button\n * @dependency mdc-toggletip\n *\n * @slot label - Slot for the label element. If not provided, the `label` property will be used to render the label.\n * @slot toggletip - Slot for the toggletip info icon button. If not provided, the `toggletip-text` property will be used to render the info icon button and toggletip.\n * @slot help-icon - Slot for the helper/validation icon. If not provided, the icon will be rendered based on the `helpTextType` property.\n * @slot help-text - Slot for the helper/validation text. If not provided, the `helpText` property will be used to render the helper/validation text.\n * @slot input - Slot for the input element. If not provided, the input field will be rendered.\n * @slot input-leading-icon - Slot for the leading icon before the input field. If not provided, the `leadingIcon` property will be used to render the leading icon.\n * @slot input-prefix-text - Slot for the prefix text before the input field. If not provided, the `prefixText` property will be used to render the prefix text.\n * @slot trailing-button - Slot for the trailing button to clear the input field. If not provided, the clear button will be rendered when `trailingButton` property is set to true.\n *\n * @cssproperty --mdc-input-disabled-border-color - Border color for the input container when disabled\n * @cssproperty --mdc-input-disabled-text-color - Text color for the input field when disabled\n * @cssproperty --mdc-input-disabled-background-color - Background color for the input field when disabled\n * @cssproperty --mdc-input-border-color - Border color for the input container\n * @cssproperty --mdc-input-text-color - Text color for the input field\n * @cssproperty --mdc-input-background-color - Background color for the input field\n * @cssproperty --mdc-input-selection-background-color - Background color for the selected text\n * @cssproperty --mdc-input-selection-text-color - Text color for the selected text\n * @cssproperty --mdc-input-support-text-color - Text color for the help text\n * @cssproperty --mdc-input-hover-background-color - Background color for the input field when hovered\n * @cssproperty --mdc-input-focused-background-color - Background color for the input field when focused\n * @cssproperty --mdc-input-focused-border-color - Border color for the input container when focused\n * @cssproperty --mdc-input-error-border-color - Border color for the input container when error\n * @cssproperty --mdc-input-warning-border-color - Border color for the input container when warning\n * @cssproperty --mdc-input-success-border-color - Border color for the input container when success\n * @cssproperty --mdc-input-primary-border-color - Border color for the input container when primary\n *\n */",
+          "jsDoc": "/**\n * mdc-input is a component that allows users to input text.\n *  It contains:\n * - label field - describe the input field.\n * - input field - contains the value\n * - help text or validation message - displayed below the input field.\n * - trailing button - it displays a clear the input field.\n * - prefix text - displayed before the input field.\n * - leading icon - displayed before the input field.\n * - clear-aria-label - aria label for the trailing button.\n * - all the attributes of the input field.\n *\n * @tagname mdc-input\n *\n * @event input - (React: onInput) This event is dispatched when the value of the input field changes (every press).\n * @event change - (React: onChange) This event is dispatched when the value of the input field changes (on blur).\n * @event focus - (React: onFocus) This event is dispatched when the input receives focus.\n * @event blur - (React: onBlur) This event is dispatched when the input loses focus.\n * @event clear - (React: onClear) This event is dispatched when the input text is cleared.\n *\n * @dependency mdc-icon\n * @dependency mdc-text\n * @dependency mdc-button\n * @dependency mdc-toggletip\n *\n * @slot label - Slot for the label element. If not provided, the `label` property will be used to render the label.\n * @slot toggletip - Slot for the toggletip info icon button. If not provided, the `toggletip-text` property will be used to render the info icon button and toggletip.\n * @slot help-icon - Slot for the helper/validation icon. If not provided, the icon will be rendered based on the `helpTextType` property.\n * @slot help-text - Slot for the helper/validation text. If not provided, the `helpText` property will be used to render the helper/validation text.\n * @slot input - Slot for the input element. If not provided, the input field will be rendered.\n * @slot input-leading-icon - Slot for the leading icon before the input field. If not provided, the `leadingIcon` property will be used to render the leading icon.\n * @slot input-prefix-text - Slot for the prefix text before the input field. If not provided, the `prefixText` property will be used to render the prefix text.\n * @slot trailing-button - Slot for the trailing button to clear the input field. If not provided, the clear button will be rendered when `trailingButton` property is set to true.\n *\n * @cssproperty --mdc-input-disabled-border-color - Border color for the input container when disabled\n * @cssproperty --mdc-input-disabled-text-color - Text color for the input field when disabled\n * @cssproperty --mdc-input-disabled-background-color - Background color for the input field when disabled\n * @cssproperty --mdc-input-border-color - Border color for the input container\n * @cssproperty --mdc-input-text-color - Text color for the input field\n * @cssproperty --mdc-input-background-color - Background color for the input field\n * @cssproperty --mdc-input-selection-background-color - Background color for the selected text\n * @cssproperty --mdc-input-selection-text-color - Text color for the selected text\n * @cssproperty --mdc-input-support-text-color - Text color for the help text\n * @cssproperty --mdc-input-hover-background-color - Background color for the input field when hovered\n * @cssproperty --mdc-input-focused-background-color - Background color for the input field when focused\n * @cssproperty --mdc-input-focused-border-color - Border color for the input container when focused\n * @cssproperty --mdc-input-error-border-color - Border color for the input container when error\n * @cssproperty --mdc-input-warning-border-color - Border color for the input container when warning\n * @cssproperty --mdc-input-success-border-color - Border color for the input container when success\n * @cssproperty --mdc-input-primary-border-color - Border color for the input container when primary\n *\n * @csspart label - The label element.\n * @csspart label-text - The container for the label and required indicator elements.\n * @csspart required-indicator - The required indicator element that is displayed next to the label when the `required` property is set to true.\n * @csspart info-icon-btn - The info icon button element that is displayed next to the label when the `toggletip-text` property is set.\n * @csspart label-toggletip - The toggletip element that is displayed when the info icon button is clicked.\n * @csspart help-text - The helper/validation text element.\n * @csspart helper-icon - The helper/validation icon element that is displayed next to the helper/validation text.\n * @csspart help-text-container - The container for the helper/validation icon and text elements.\n * @csspart leading-icon - The leading icon element that is displayed before the input field.\n * @csspart prefix-text - The prefix text element that is displayed before the input field.\n * @csspart input-container - The container for the input field, leading icon, prefix text, and trailing button elements.\n * @csspart input-section - The container for the input field, leading icon, and prefix text elements.\n * @csspart input-text - The input field element.\n * @csspart trailing-button - The trailing button element that is displayed to clear the input field when the `trailingButton` property is set to true.\n */",
           "customElement": true
         }
       ],
@@ -30057,6 +30393,120 @@
               }
             }
           ],
+          "cssParts": [
+            {
+              "description": "The label element.",
+              "name": "label",
+              "inheritedFrom": {
+                "name": "FormfieldWrapper",
+                "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
+              }
+            },
+            {
+              "description": "The container for the label and required indicator elements.",
+              "name": "label-text",
+              "inheritedFrom": {
+                "name": "FormfieldWrapper",
+                "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
+              }
+            },
+            {
+              "description": "The required indicator element that is displayed next to the label when the `required` property is set to true.",
+              "name": "required-indicator",
+              "inheritedFrom": {
+                "name": "FormfieldWrapper",
+                "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
+              }
+            },
+            {
+              "description": "The info icon button element that is displayed next to the label when the `toggletip-text` property is set.",
+              "name": "info-icon-btn",
+              "inheritedFrom": {
+                "name": "FormfieldWrapper",
+                "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
+              }
+            },
+            {
+              "description": "The toggletip element that is displayed when the info icon button is clicked.",
+              "name": "label-toggletip",
+              "inheritedFrom": {
+                "name": "FormfieldWrapper",
+                "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
+              }
+            },
+            {
+              "description": "The helper/validation text element.",
+              "name": "help-text",
+              "inheritedFrom": {
+                "name": "FormfieldWrapper",
+                "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
+              }
+            },
+            {
+              "description": "The helper/validation icon element that is displayed next to the helper/validation text.",
+              "name": "helper-icon",
+              "inheritedFrom": {
+                "name": "FormfieldWrapper",
+                "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
+              }
+            },
+            {
+              "description": "The container for the helper/validation icon and text elements.",
+              "name": "help-text-container",
+              "inheritedFrom": {
+                "name": "FormfieldWrapper",
+                "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
+              }
+            },
+            {
+              "description": "The container for the input field, leading icon, prefix text, and trailing button elements.",
+              "name": "input-container",
+              "inheritedFrom": {
+                "name": "Input",
+                "module": "src/components/input/input.component.ts"
+              }
+            },
+            {
+              "description": "The container for the input field, leading icon, and prefix text elements.",
+              "name": "input-section",
+              "inheritedFrom": {
+                "name": "Input",
+                "module": "src/components/input/input.component.ts"
+              }
+            },
+            {
+              "description": "The input field element.",
+              "name": "input-text",
+              "inheritedFrom": {
+                "name": "Input",
+                "module": "src/components/input/input.component.ts"
+              }
+            },
+            {
+              "description": "The trailing button element that is displayed to clear the input field when the `trailingButton` property is set to true.",
+              "name": "trailing-button",
+              "inheritedFrom": {
+                "name": "Input",
+                "module": "src/components/input/input.component.ts"
+              }
+            },
+            {
+              "description": "The leading icon element that is displayed before the input field.",
+              "name": "leading-icon",
+              "inheritedFrom": {
+                "name": "Input",
+                "module": "src/components/input/input.component.ts"
+              }
+            },
+            {
+              "description": "The prefix text element that is displayed before the input field.",
+              "name": "prefix-text",
+              "inheritedFrom": {
+                "name": "Input",
+                "module": "src/components/input/input.component.ts"
+              }
+            }
+          ],
           "members": [
             {
               "kind": "field",
@@ -31189,7 +31639,7 @@
             "module": "/src/components/input/input.component"
           },
           "tagName": "mdc-password",
-          "jsDoc": "/**\n * `mdc-password` is a component that allows users to input their password.\n *  It extends the `mdc-input` component and provides additional features specific to password fields.\n *  It contains:\n * - `label` field - describe the password field.\n * - `password` field - contains the value\n * - `help-text` or `validation-message` - displayed below the password field.\n * - `help-text-type` - type of the help text, can be 'default', 'error', 'warning', 'success', 'priority'.\n * - `show-hide-button-aria-label` - aria label for the trailing show/hide button.\n * - all the attributes of the native password field.\n *\n * @tagname mdc-password\n *\n * @event input - (React: onInput) This event is dispatched when the value of the password field changes (every press).\n * @event change - (React: onChange) This event is dispatched when the value of the password field changes (on blur).\n * @event focus - (React: onFocus) This event is dispatched when the password receives focus.\n * @event blur - (React: onBlur) This event is dispatched when the password loses focus.\n *\n * @dependency mdc-icon\n * @dependency mdc-text\n * @dependency mdc-button\n * @dependency mdc-toggletip\n *\n * @cssproperty --mdc-input-disabled-border-color - Border color for the password container when disabled\n * @cssproperty --mdc-input-disabled-text-color - Text color for the password field when disabled\n * @cssproperty --mdc-input-disabled-background-color - Background color for the password field when disabled\n * @cssproperty --mdc-input-border-color - Border color for the password container\n * @cssproperty --mdc-input-text-color - Text color for the password field\n * @cssproperty --mdc-input-background-color - Background color for the password field\n * @cssproperty --mdc-input-selection-background-color - Background color for the selected text\n * @cssproperty --mdc-input-selection-text-color - Text color for the selected text\n * @cssproperty --mdc-input-support-text-color - Text color for the help text\n * @cssproperty --mdc-input-hover-background-color - Background color for the password field when hovered\n * @cssproperty --mdc-input-focused-background-color - Background color for the password field when focused\n * @cssproperty --mdc-input-focused-border-color - Border color for the password container when focused\n * @cssproperty --mdc-input-error-border-color - Border color for the password container when error\n * @cssproperty --mdc-input-warning-border-color - Border color for the password container when warning\n * @cssproperty --mdc-input-success-border-color - Border color for the password container when success\n * @cssproperty --mdc-input-primary-border-color - Border color for the password container when primary\n *\n */",
+          "jsDoc": "/**\n * `mdc-password` is a component that allows users to input their password.\n *  It extends the `mdc-input` component and provides additional features specific to password fields.\n *  It contains:\n * - `label` field - describe the password field.\n * - `password` field - contains the value\n * - `help-text` or `validation-message` - displayed below the password field.\n * - `help-text-type` - type of the help text, can be 'default', 'error', 'warning', 'success', 'priority'.\n * - `show-hide-button-aria-label` - aria label for the trailing show/hide button.\n * - all the attributes of the native password field.\n *\n * @tagname mdc-password\n *\n * @event input - (React: onInput) This event is dispatched when the value of the password field changes (every press).\n * @event change - (React: onChange) This event is dispatched when the value of the password field changes (on blur).\n * @event focus - (React: onFocus) This event is dispatched when the password receives focus.\n * @event blur - (React: onBlur) This event is dispatched when the password loses focus.\n *\n * @dependency mdc-icon\n * @dependency mdc-text\n * @dependency mdc-button\n * @dependency mdc-toggletip\n *\n * @cssproperty --mdc-input-disabled-border-color - Border color for the password container when disabled\n * @cssproperty --mdc-input-disabled-text-color - Text color for the password field when disabled\n * @cssproperty --mdc-input-disabled-background-color - Background color for the password field when disabled\n * @cssproperty --mdc-input-border-color - Border color for the password container\n * @cssproperty --mdc-input-text-color - Text color for the password field\n * @cssproperty --mdc-input-background-color - Background color for the password field\n * @cssproperty --mdc-input-selection-background-color - Background color for the selected text\n * @cssproperty --mdc-input-selection-text-color - Text color for the selected text\n * @cssproperty --mdc-input-support-text-color - Text color for the help text\n * @cssproperty --mdc-input-hover-background-color - Background color for the password field when hovered\n * @cssproperty --mdc-input-focused-background-color - Background color for the password field when focused\n * @cssproperty --mdc-input-focused-border-color - Border color for the password container when focused\n * @cssproperty --mdc-input-error-border-color - Border color for the password container when error\n * @cssproperty --mdc-input-warning-border-color - Border color for the password container when warning\n * @cssproperty --mdc-input-success-border-color - Border color for the password container when success\n * @cssproperty --mdc-input-primary-border-color - Border color for the password container when primary\n *\n * @csspart label - The label element.\n * @csspart label-text - The container for the label and required indicator elements.\n * @csspart required-indicator - The required indicator element that is displayed next to the label when the `required` property is set to true.\n * @csspart info-icon-btn - The info icon button element that is displayed next to the label when the `toggletip-text` property is set.\n * @csspart label-toggletip - The toggletip element that is displayed when the info icon button is clicked.\n * @csspart help-text - The helper/validation text element.\n * @csspart helper-icon - The helper/validation icon element that is displayed next to the helper/validation text.\n * @csspart help-text-container - The container for the helper/validation icon and text elements.\n * @csspart input-container - The container for the input field, leading icon, prefix text, and trailing button elements.\n * @csspart input-section - The container for the input field, leading icon, and prefix text elements.\n * @csspart input-text - The input field element.\n * @csspart trailing-button - The trailing button element that is displayed to clear the input field when the `trailingButton` property is set to true.\n */",
           "customElement": true,
           "slots": [
             {
@@ -33136,6 +33586,54 @@
             }
           ],
           "cssParts": [
+            {
+              "description": "The label element.",
+              "name": "label",
+              "inheritedFrom": {
+                "name": "FormfieldWrapper",
+                "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
+              }
+            },
+            {
+              "description": "The container for the label and required indicator elements.",
+              "name": "label-text",
+              "inheritedFrom": {
+                "name": "FormfieldWrapper",
+                "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
+              }
+            },
+            {
+              "description": "The info icon button element that is displayed next to the label when the `toggletip-text` property is set.",
+              "name": "info-icon-btn",
+              "inheritedFrom": {
+                "name": "FormfieldWrapper",
+                "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
+              }
+            },
+            {
+              "description": "The helper/validation text element.",
+              "name": "help-text",
+              "inheritedFrom": {
+                "name": "FormfieldWrapper",
+                "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
+              }
+            },
+            {
+              "description": "The helper/validation icon element that is displayed next to the helper/validation text.",
+              "name": "helper-icon",
+              "inheritedFrom": {
+                "name": "FormfieldWrapper",
+                "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
+              }
+            },
+            {
+              "description": "The container for the helper/validation icon and text elements.",
+              "name": "help-text-container",
+              "inheritedFrom": {
+                "name": "FormfieldWrapper",
+                "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
+              }
+            },
             {
               "description": "The gap between the label and the progressbar.",
               "name": "gap"
@@ -33163,6 +33661,22 @@
             {
               "description": "The container of the remaining progressbar portion.",
               "name": "remaining"
+            },
+            {
+              "description": "The required indicator element that is displayed next to the label when the `required` property is set to true.",
+              "name": "required-indicator",
+              "inheritedFrom": {
+                "name": "FormfieldWrapper",
+                "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
+              }
+            },
+            {
+              "description": "The toggletip element that is displayed when the info icon button is clicked.",
+              "name": "label-toggletip",
+              "inheritedFrom": {
+                "name": "FormfieldWrapper",
+                "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
+              }
             }
           ],
           "members": [
@@ -33591,7 +34105,7 @@
             "module": "/src/components/formfieldwrapper"
           },
           "tagName": "mdc-progressbar",
-          "jsDoc": "/**\n * mdc-progressbar component visually represents a progress indicator, typically used to show\n * the completion state of an ongoing process (e.g., loading, file upload, etc.).\n * It contains an optional label and an optional helper text.\n *\n * - It supports mainly two types: Default and Inline\n * - It supports three validation variants: Default, Success and Error.\n *\n * This component is created by extending FormfieldWrapper.\n *\n * @tagname mdc-progressbar\n *\n * @dependency mdc-icon\n * @dependency mdc-text\n *\n * @cssproperty --mdc-progressbar-background-color - Background color of the remaining progressbar portion.\n * @cssproperty --mdc-progressbar-active-background-color - Background color of the elapsed progressbar portion.\n * @cssproperty --mdc-progressbar-success-color - Background color of the progressbar when in success state.\n * @cssproperty --mdc-progressbar-error-color - Background color of the progressbar when in error state.\n * @cssproperty --mdc-progressbar-height - The height of the progressbar.\n * @cssproperty --mdc-progressbar-border-radius - The border radius of the progressbar.\n * @cssproperty --mdc-progressbar-label-color - Color of the progressbar label text.\n * @cssproperty --mdc-progressbar-label-line-height - Line height of the label text.\n * @cssproperty --mdc-progressbar-label-font-size - Font size of the label text.\n * @cssproperty --mdc-progressbar-label-font-weight - Font weight of the label text.\n * @cssproperty --mdc-progressbar-help-text-color - Color of the help text.\n *\n * @csspart gap - The gap between the label and the progressbar.\n * @csspart inline-label-container - The container of the label in inline variant.\n * @csspart label-container - The container of the label in inline variant.\n * @csspart percentage - The container of the label in inline variant.\n * @csspart progress-bar - The container of the label in inline variant.\n * @csspart progress-container - The container of the label in inline variant.\n * @csspart remaining - The container of the remaining progressbar portion.\n */",
+          "jsDoc": "/**\n * mdc-progressbar component visually represents a progress indicator, typically used to show\n * the completion state of an ongoing process (e.g., loading, file upload, etc.).\n * It contains an optional label and an optional helper text.\n *\n * - It supports mainly two types: Default and Inline\n * - It supports three validation variants: Default, Success and Error.\n *\n * This component is created by extending FormfieldWrapper.\n *\n * @tagname mdc-progressbar\n *\n * @dependency mdc-icon\n * @dependency mdc-text\n *\n * @cssproperty --mdc-progressbar-background-color - Background color of the remaining progressbar portion.\n * @cssproperty --mdc-progressbar-active-background-color - Background color of the elapsed progressbar portion.\n * @cssproperty --mdc-progressbar-success-color - Background color of the progressbar when in success state.\n * @cssproperty --mdc-progressbar-error-color - Background color of the progressbar when in error state.\n * @cssproperty --mdc-progressbar-height - The height of the progressbar.\n * @cssproperty --mdc-progressbar-border-radius - The border radius of the progressbar.\n * @cssproperty --mdc-progressbar-label-color - Color of the progressbar label text.\n * @cssproperty --mdc-progressbar-label-line-height - Line height of the label text.\n * @cssproperty --mdc-progressbar-label-font-size - Font size of the label text.\n * @cssproperty --mdc-progressbar-label-font-weight - Font weight of the label text.\n * @cssproperty --mdc-progressbar-help-text-color - Color of the help text.\n *\n * @csspart label - The label element.\n * @csspart label-text - The container for the label and required indicator elements.\n * @csspart info-icon-btn - The info icon button element that is displayed next to the label when the `toggletip-text` property is set.\n * @csspart help-text - The helper/validation text element.\n * @csspart helper-icon - The helper/validation icon element that is displayed next to the helper/validation text.\n * @csspart help-text-container - The container for the helper/validation icon and text elements.\n * @csspart gap - The gap between the label and the progressbar.\n * @csspart inline-label-container - The container of the label in inline variant.\n * @csspart label-container - The container of the label in inline variant.\n * @csspart percentage - The container of the label in inline variant.\n * @csspart progress-bar - The container of the label in inline variant.\n * @csspart progress-container - The container of the label in inline variant.\n * @csspart remaining - The container of the remaining progressbar portion.\n */",
           "customElement": true,
           "slots": [
             {
@@ -33783,6 +34297,54 @@
               "description": "The success icon of the progressspinner.",
               "name": "success-icon"
             },
+            {
+              "description": "The label element.",
+              "name": "label",
+              "inheritedFrom": {
+                "name": "FormfieldWrapper",
+                "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
+              }
+            },
+            {
+              "description": "The container for the label and required indicator elements.",
+              "name": "label-text",
+              "inheritedFrom": {
+                "name": "FormfieldWrapper",
+                "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
+              }
+            },
+            {
+              "description": "The info icon button element that is displayed next to the label when the `toggletip-text` property is set.",
+              "name": "info-icon-btn",
+              "inheritedFrom": {
+                "name": "FormfieldWrapper",
+                "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
+              }
+            },
+            {
+              "description": "The helper/validation text element.",
+              "name": "help-text",
+              "inheritedFrom": {
+                "name": "FormfieldWrapper",
+                "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
+              }
+            },
+            {
+              "description": "The helper/validation icon element that is displayed next to the helper/validation text.",
+              "name": "helper-icon",
+              "inheritedFrom": {
+                "name": "FormfieldWrapper",
+                "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
+              }
+            },
+            {
+              "description": "The container for the helper/validation icon and text elements.",
+              "name": "help-text-container",
+              "inheritedFrom": {
+                "name": "FormfieldWrapper",
+                "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
+              }
+            },
             {
               "description": "The gap between the label and the progressbar.",
               "name": "gap",
@@ -33838,6 +34400,22 @@
                 "name": "Progressbar",
                 "module": "src/components/progressbar/progressbar.component.ts"
               }
+            },
+            {
+              "description": "The required indicator element that is displayed next to the label when the `required` property is set to true.",
+              "name": "required-indicator",
+              "inheritedFrom": {
+                "name": "FormfieldWrapper",
+                "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
+              }
+            },
+            {
+              "description": "The toggletip element that is displayed when the info icon button is clicked.",
+              "name": "label-toggletip",
+              "inheritedFrom": {
+                "name": "FormfieldWrapper",
+                "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
+              }
             }
           ],
           "members": [
@@ -34406,6 +34984,80 @@
               "name": "--mdc-radio-control-inactive-disabled-background"
             }
           ],
+          "cssParts": [
+            {
+              "description": "The label element.",
+              "name": "label",
+              "inheritedFrom": {
+                "name": "FormfieldWrapper",
+                "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
+              }
+            },
+            {
+              "description": "The container for the label and required indicator elements.",
+              "name": "label-text",
+              "inheritedFrom": {
+                "name": "FormfieldWrapper",
+                "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
+              }
+            },
+            {
+              "description": "The required indicator element that is displayed next to the label when the `required` property is set to true.",
+              "name": "required-indicator",
+              "inheritedFrom": {
+                "name": "FormfieldWrapper",
+                "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
+              }
+            },
+            {
+              "description": "The info icon button element that is displayed next to the label when the `toggletip-text` property is set.",
+              "name": "info-icon-btn",
+              "inheritedFrom": {
+                "name": "FormfieldWrapper",
+                "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
+              }
+            },
+            {
+              "description": "The toggletip element that is displayed when the info icon button is clicked.",
+              "name": "label-toggletip",
+              "inheritedFrom": {
+                "name": "FormfieldWrapper",
+                "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
+              }
+            },
+            {
+              "description": "The helper/validation text element.",
+              "name": "help-text",
+              "inheritedFrom": {
+                "name": "FormfieldWrapper",
+                "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
+              }
+            },
+            {
+              "description": "The helper/validation icon element that is displayed next to the helper/validation text.",
+              "name": "helper-icon",
+              "inheritedFrom": {
+                "name": "FormfieldWrapper",
+                "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
+              }
+            },
+            {
+              "description": "The container for the helper/validation icon and text elements.",
+              "name": "help-text-container",
+              "inheritedFrom": {
+                "name": "FormfieldWrapper",
+                "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
+              }
+            },
+            {
+              "description": "The native radio input element.",
+              "name": "radio-input"
+            },
+            {
+              "description": "The container for the label and helper text elements.",
+              "name": "text-container"
+            }
+          ],
           "members": [
             {
               "kind": "field",
@@ -35098,7 +35750,7 @@
             "module": "/src/components/formfieldwrapper/formfieldwrapper.component"
           },
           "tagName": "mdc-radio",
-          "jsDoc": "/**\n * Radio allow users to select single options from a list or turn an item/feature on or off.\n * These are often used in forms, settings, and selection in lists.\n *\n * A radio component contains an optional label, optional info icon and an optional helper text.\n *\n * @dependency mdc-button\n * @dependency mdc-icon\n * @dependency mdc-text\n * @dependency mdc-staticradio\n * @dependency mdc-toggletip\n *\n * @tagname mdc-radio\n *\n * @event change - (React: onChange) Event that gets dispatched when the radio state changes.\n * @event focus - (React: onFocus) Event that gets dispatched when the radio receives focus.\n *\n * @cssproperty --mdc-radio-text-disabled-color - color of the label when disabled\n * @cssproperty --mdc-radio-control-inactive-hover - color of the radio button when inactive and hovered\n * @cssproperty --mdc-radio-control-inactive-pressed-color - color of the radio button when inactive and pressed\n * @cssproperty --mdc-radio-control-active-hover-color - color of the radio button when active and hovered\n * @cssproperty --mdc-radio-control-active-pressed-color - color of the radio button when active and pressed\n * @cssproperty --mdc-radio-disabled-border-color - color of the radio button when disabled\n * @cssproperty --mdc-radio-control-active-disabled-background - color of the radio button when active and disabled\n * @cssproperty --mdc-radio-control-inactive-disabled-background - color of the radio button when inactive and disabled\n *\n */",
+          "jsDoc": "/**\n * Radio allow users to select single options from a list or turn an item/feature on or off.\n * These are often used in forms, settings, and selection in lists.\n *\n * A radio component contains an optional label, optional info icon and an optional helper text.\n *\n * @dependency mdc-button\n * @dependency mdc-icon\n * @dependency mdc-text\n * @dependency mdc-staticradio\n * @dependency mdc-toggletip\n *\n * @tagname mdc-radio\n *\n * @event change - (React: onChange) Event that gets dispatched when the radio state changes.\n * @event focus - (React: onFocus) Event that gets dispatched when the radio receives focus.\n *\n * @cssproperty --mdc-radio-text-disabled-color - color of the label when disabled\n * @cssproperty --mdc-radio-control-inactive-hover - color of the radio button when inactive and hovered\n * @cssproperty --mdc-radio-control-inactive-pressed-color - color of the radio button when inactive and pressed\n * @cssproperty --mdc-radio-control-active-hover-color - color of the radio button when active and hovered\n * @cssproperty --mdc-radio-control-active-pressed-color - color of the radio button when active and pressed\n * @cssproperty --mdc-radio-disabled-border-color - color of the radio button when disabled\n * @cssproperty --mdc-radio-control-active-disabled-background - color of the radio button when active and disabled\n * @cssproperty --mdc-radio-control-inactive-disabled-background - color of the radio button when inactive and disabled\n *\n * @csspart label - The label element.\n * @csspart label-text - The container for the label and required indicator elements.\n * @csspart required-indicator - The required indicator element that is displayed next to the label when the `required` property is set to true.\n * @csspart info-icon-btn - The info icon button element that is displayed next to the label when the `toggletip-text` property is set.\n * @csspart label-toggletip - The toggletip element that is displayed when the info icon button is clicked.\n * @csspart help-text - The helper/validation text element.\n * @csspart helper-icon - The helper/validation icon element that is displayed next to the helper/validation text.\n * @csspart help-text-container - The container for the helper/validation icon and text elements.\n * @csspart radio-input - The native radio input element.\n * @csspart text-container - The container for the label and helper text elements.\n */",
           "customElement": true,
           "slots": [
             {
@@ -35573,6 +36225,88 @@
                 "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
               }
             }
+          ],
+          "cssParts": [
+            {
+              "description": "The label element.",
+              "name": "label",
+              "inheritedFrom": {
+                "name": "FormfieldWrapper",
+                "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
+              }
+            },
+            {
+              "description": "The container for the label and required indicator elements.",
+              "name": "label-text",
+              "inheritedFrom": {
+                "name": "FormfieldWrapper",
+                "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
+              }
+            },
+            {
+              "description": "The required indicator element that is displayed next to the label when the `required` property is set to true.",
+              "name": "required-indicator",
+              "inheritedFrom": {
+                "name": "FormfieldWrapper",
+                "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
+              }
+            },
+            {
+              "description": "The info icon button element that is displayed next to the label when the `toggletip-text` property is set.",
+              "name": "info-icon-btn",
+              "inheritedFrom": {
+                "name": "FormfieldWrapper",
+                "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
+              }
+            },
+            {
+              "description": "The toggletip element that is displayed when the info icon button is clicked.",
+              "name": "label-toggletip",
+              "inheritedFrom": {
+                "name": "FormfieldWrapper",
+                "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
+              }
+            },
+            {
+              "description": "The helper/validation text element.",
+              "name": "help-text",
+              "inheritedFrom": {
+                "name": "FormfieldWrapper",
+                "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
+              }
+            },
+            {
+              "description": "The helper/validation icon element that is displayed next to the helper/validation text.",
+              "name": "helper-icon",
+              "inheritedFrom": {
+                "name": "FormfieldWrapper",
+                "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
+              }
+            },
+            {
+              "description": "The container for the helper/validation icon and text elements.",
+              "name": "help-text-container",
+              "inheritedFrom": {
+                "name": "FormfieldWrapper",
+                "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
+              }
+            },
+            {
+              "description": "Formfieldgroup host container",
+              "name": "container",
+              "inheritedFrom": {
+                "name": "FormfieldGroup",
+                "module": "src/components/formfieldgroup/formfieldgroup.component.ts"
+              }
+            },
+            {
+              "description": "This contains the label and help text for the group",
+              "name": "group-header",
+              "inheritedFrom": {
+                "name": "FormfieldGroup",
+                "module": "src/components/formfieldgroup/formfieldgroup.component.ts"
+              }
+            }
           ]
         }
       ],
@@ -35774,6 +36508,120 @@
           "kind": "class",
           "description": "`mdc-searchfield` component is used as an input field for search functionality.\n\nIt supports `mdc-inputchip` as filters.\n\nThis component is built by extending the `mdc-input` component.",
           "name": "Searchfield",
+          "cssParts": [
+            {
+              "description": "The label element.",
+              "name": "label",
+              "inheritedFrom": {
+                "name": "FormfieldWrapper",
+                "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
+              }
+            },
+            {
+              "description": "The container for the label and required indicator elements.",
+              "name": "label-text",
+              "inheritedFrom": {
+                "name": "FormfieldWrapper",
+                "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
+              }
+            },
+            {
+              "description": "The leading icon element that is displayed before the input field.",
+              "name": "leading-icon",
+              "inheritedFrom": {
+                "name": "Input",
+                "module": "src/components/input/input.component.ts"
+              }
+            },
+            {
+              "description": "The container for the input field, leading icon, prefix text, and trailing button elements.",
+              "name": "input-container",
+              "inheritedFrom": {
+                "name": "Input",
+                "module": "src/components/input/input.component.ts"
+              }
+            },
+            {
+              "description": "The container for the input field, leading icon, and prefix text elements.",
+              "name": "input-section",
+              "inheritedFrom": {
+                "name": "Input",
+                "module": "src/components/input/input.component.ts"
+              }
+            },
+            {
+              "description": "The input field element.",
+              "name": "input-text",
+              "inheritedFrom": {
+                "name": "Input",
+                "module": "src/components/input/input.component.ts"
+              }
+            },
+            {
+              "description": "The trailing button element that is displayed to clear the input field when the `trailingButton` property is set to true.",
+              "name": "trailing-button",
+              "inheritedFrom": {
+                "name": "Input",
+                "module": "src/components/input/input.component.ts"
+              }
+            },
+            {
+              "description": "The required indicator element that is displayed next to the label when the `required` property is set to true.",
+              "name": "required-indicator",
+              "inheritedFrom": {
+                "name": "FormfieldWrapper",
+                "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
+              }
+            },
+            {
+              "description": "The info icon button element that is displayed next to the label when the `toggletip-text` property is set.",
+              "name": "info-icon-btn",
+              "inheritedFrom": {
+                "name": "FormfieldWrapper",
+                "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
+              }
+            },
+            {
+              "description": "The toggletip element that is displayed when the info icon button is clicked.",
+              "name": "label-toggletip",
+              "inheritedFrom": {
+                "name": "FormfieldWrapper",
+                "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
+              }
+            },
+            {
+              "description": "The helper/validation text element.",
+              "name": "help-text",
+              "inheritedFrom": {
+                "name": "FormfieldWrapper",
+                "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
+              }
+            },
+            {
+              "description": "The helper/validation icon element that is displayed next to the helper/validation text.",
+              "name": "helper-icon",
+              "inheritedFrom": {
+                "name": "FormfieldWrapper",
+                "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
+              }
+            },
+            {
+              "description": "The container for the helper/validation icon and text elements.",
+              "name": "help-text-container",
+              "inheritedFrom": {
+                "name": "FormfieldWrapper",
+                "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
+              }
+            },
+            {
+              "description": "The prefix text element that is displayed before the input field.",
+              "name": "prefix-text",
+              "inheritedFrom": {
+                "name": "Input",
+                "module": "src/components/input/input.component.ts"
+              }
+            }
+          ],
           "slots": [
             {
               "description": "Slot for input chips",
@@ -36599,7 +37447,7 @@
             "module": "/src/components/input/input.component"
           },
           "tagName": "mdc-searchfield",
-          "jsDoc": "/**\n * `mdc-searchfield` component is used as an input field for search functionality.\n *\n * It supports `mdc-inputchip` as filters.\n *\n * This component is built by extending the `mdc-input` component.\n *\n * @tagname mdc-searchfield\n *\n * @event input - (React: onInput) This event is dispatched when the value of the input field changes (every press).\n * @event change - (React: onChange) This event is dispatched when the value of the input field changes (on blur).\n * @event focus - (React: onFocus) This event is dispatched when the input receives focus.\n * @event blur - (React: onBlur) This event is dispatched when the input loses focus.\n * @event clear - (React: onClear) This event is dispatched when the input text is cleared.\n *\n * @slot filters - Slot for input chips\n */",
+          "jsDoc": "/**\n * `mdc-searchfield` component is used as an input field for search functionality.\n *\n * It supports `mdc-inputchip` as filters.\n *\n * This component is built by extending the `mdc-input` component.\n *\n * @tagname mdc-searchfield\n *\n * @event input - (React: onInput) This event is dispatched when the value of the input field changes (every press).\n * @event change - (React: onChange) This event is dispatched when the value of the input field changes (on blur).\n * @event focus - (React: onFocus) This event is dispatched when the input receives focus.\n * @event blur - (React: onBlur) This event is dispatched when the input loses focus.\n * @event clear - (React: onClear) This event is dispatched when the input text is cleared.\n *\n * @slot filters - Slot for input chips\n *\n * @csspart label - The label element.\n * @csspart label-text - The container for the label and required indicator elements.\n * @csspart leading-icon - The leading icon element that is displayed before the input field.\n * @csspart input-container - The container for the input field, leading icon, prefix text, and trailing button elements.\n * @csspart input-section - The container for the input field, leading icon, and prefix text elements.\n * @csspart input-text - The input field element.\n * @csspart trailing-button - The trailing button element that is displayed to clear the input field when the `trailingButton` property is set to true.\n */",
           "customElement": true,
           "attributes": [
             {
@@ -37165,6 +38013,96 @@
               "name": "--mdc-select-listbox-width"
             }
           ],
+          "cssParts": [
+            {
+              "description": "The label element.",
+              "name": "label",
+              "inheritedFrom": {
+                "name": "FormfieldWrapper",
+                "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
+              }
+            },
+            {
+              "description": "The container for the label and required indicator elements.",
+              "name": "label-text",
+              "inheritedFrom": {
+                "name": "FormfieldWrapper",
+                "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
+              }
+            },
+            {
+              "description": "The required indicator element that is displayed next to the label when the `required` property is set to true.",
+              "name": "required-indicator",
+              "inheritedFrom": {
+                "name": "FormfieldWrapper",
+                "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
+              }
+            },
+            {
+              "description": "The info icon button element that is displayed next to the label when the `toggletip-text` property is set.",
+              "name": "info-icon-btn",
+              "inheritedFrom": {
+                "name": "FormfieldWrapper",
+                "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
+              }
+            },
+            {
+              "description": "The toggletip element that is displayed when the info icon button is clicked.",
+              "name": "label-toggletip",
+              "inheritedFrom": {
+                "name": "FormfieldWrapper",
+                "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
+              }
+            },
+            {
+              "description": "The helper/validation text element.",
+              "name": "help-text",
+              "inheritedFrom": {
+                "name": "FormfieldWrapper",
+                "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
+              }
+            },
+            {
+              "description": "The helper/validation icon element that is displayed next to the helper/validation text.",
+              "name": "helper-icon",
+              "inheritedFrom": {
+                "name": "FormfieldWrapper",
+                "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
+              }
+            },
+            {
+              "description": "The container for the helper/validation icon and text elements.",
+              "name": "help-text-container",
+              "inheritedFrom": {
+                "name": "FormfieldWrapper",
+                "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
+              }
+            },
+            {
+              "description": "The container element that wraps the visual combobox and the dropdown icon.",
+              "name": "container"
+            },
+            {
+              "description": "The container element that wraps the visual combobox, dropdown icon, and the popover.",
+              "name": "base-container"
+            },
+            {
+              "description": "The icon element that is displayed next to the selected option in the dropdown list.",
+              "name": "selected-icon"
+            },
+            {
+              "description": "The text element that displays the selected option or placeholder in the visual combobox.",
+              "name": "base-text"
+            },
+            {
+              "description": "The container element that wraps the dropdown icon.",
+              "name": "icon-container"
+            },
+            {
+              "description": "The native hidden input element.",
+              "name": "native-input"
+            }
+          ],
           "slots": [
             {
               "description": "This is a default/unnamed slot for Selectlistbox including options and/or option group.",
@@ -38195,7 +39133,7 @@
             "module": "/src/components/formfieldwrapper/formfieldwrapper.component"
           },
           "tagName": "mdc-select",
-          "jsDoc": "/**\n * The mdc-select component is a dropdown selection control that allows users to pick an option from a predefined list.\n * It is designed to work with `mdc-option` for individual options and `mdc-optgroup` for grouping related options.\n *\n * Every mdc-option should have a `value` attribute set to ensure proper form submission.\n *\n * To set a default option, use the `selected` attribute on the `mdc-option` element.\n * You can also set the `value` attribute on the `mdc-select` element to match the value of the desired option. The component will select the corresponding option automatically.\n *\n * **Note:** Make sure to add `mdc-selectlistbox` as a child of `mdc-select` and wrap options/optgroup in it to ensure proper accessibility functionality. Read more about it in SelectListBox documentation.\n *\n * If you need to use `mdc-tooltip` with any options, make sure to place the tooltip component outside the `mdc-select` element.\n *\n * @dependency mdc-button\n * @dependency mdc-icon\n * @dependency mdc-popover\n * @dependency mdc-text\n * @dependency mdc-toggletip\n *\n * @tagname mdc-select\n *\n * @slot default - This is a default/unnamed slot for Selectlistbox including options and/or option group.\n *\n * @event click - (React: onClick) This event is dispatched when the select is clicked.\n * @event change - (React: onChange) This event is dispatched when the select is changed.\n * @event input - (React: onInput) This event is dispatched when the select is changed.\n * @event keydown - (React: onKeyDown) This event is dispatched when a key is pressed down on the select.\n * @event focus - (React: onFocus) This event is dispatched when the select receives focus.\n *\n * @cssproperty --mdc-select-background-color - The background color of the combobox of select.\n * @cssproperty --mdc-select-background-color-hover - The background color of the combobox of select when hovered.\n * @cssproperty --mdc-select-background-color-active - The background color of the combobox of select when active.\n * @cssproperty --mdc-select-background-color-disabled - The background color of the combobox of select when disabled.\n * @cssproperty --mdc-select-text-color - The text color of the select.\n * @cssproperty --mdc-select-text-color-selected - The text color of the selected option in the select.\n * @cssproperty --mdc-select-text-color-disabled - The text color of the select when disabled.\n * @cssproperty --mdc-select-border-color - The border color of the select.\n * @cssproperty --mdc-select-border-color-disabled - The border color of the select when disabled.\n * @cssproperty --mdc-select-border-color-success - The border color of the select when in success state.\n * @cssproperty --mdc-select-border-color-warning - The border color of the select when in warning state.\n * @cssproperty --mdc-select-border-color-error - The border color of the select when in error state.\n * @cssproperty --mdc-select-width - The width of the select.\n * @cssproperty --mdc-select-listbox-height - The height of the listbox inside the select.\n * @cssproperty --mdc-select-listbox-width - The width of the listbox inside the select (default: `--mdc-select-width`).\n */",
+          "jsDoc": "/**\n * The mdc-select component is a dropdown selection control that allows users to pick an option from a predefined list.\n * It is designed to work with `mdc-option` for individual options and `mdc-optgroup` for grouping related options.\n *\n * Every mdc-option should have a `value` attribute set to ensure proper form submission.\n *\n * To set a default option, use the `selected` attribute on the `mdc-option` element.\n * You can also set the `value` attribute on the `mdc-select` element to match the value of the desired option. The component will select the corresponding option automatically.\n *\n * **Note:** Make sure to add `mdc-selectlistbox` as a child of `mdc-select` and wrap options/optgroup in it to ensure proper accessibility functionality. Read more about it in SelectListBox documentation.\n *\n * If you need to use `mdc-tooltip` with any options, make sure to place the tooltip component outside the `mdc-select` element.\n *\n * @dependency mdc-button\n * @dependency mdc-icon\n * @dependency mdc-popover\n * @dependency mdc-text\n * @dependency mdc-toggletip\n *\n * @tagname mdc-select\n *\n * @slot default - This is a default/unnamed slot for Selectlistbox including options and/or option group.\n *\n * @event click - (React: onClick) This event is dispatched when the select is clicked.\n * @event change - (React: onChange) This event is dispatched when the select is changed.\n * @event input - (React: onInput) This event is dispatched when the select is changed.\n * @event keydown - (React: onKeyDown) This event is dispatched when a key is pressed down on the select.\n * @event focus - (React: onFocus) This event is dispatched when the select receives focus.\n *\n * @cssproperty --mdc-select-background-color - The background color of the combobox of select.\n * @cssproperty --mdc-select-background-color-hover - The background color of the combobox of select when hovered.\n * @cssproperty --mdc-select-background-color-active - The background color of the combobox of select when active.\n * @cssproperty --mdc-select-background-color-disabled - The background color of the combobox of select when disabled.\n * @cssproperty --mdc-select-text-color - The text color of the select.\n * @cssproperty --mdc-select-text-color-selected - The text color of the selected option in the select.\n * @cssproperty --mdc-select-text-color-disabled - The text color of the select when disabled.\n * @cssproperty --mdc-select-border-color - The border color of the select.\n * @cssproperty --mdc-select-border-color-disabled - The border color of the select when disabled.\n * @cssproperty --mdc-select-border-color-success - The border color of the select when in success state.\n * @cssproperty --mdc-select-border-color-warning - The border color of the select when in warning state.\n * @cssproperty --mdc-select-border-color-error - The border color of the select when in error state.\n * @cssproperty --mdc-select-width - The width of the select.\n * @cssproperty --mdc-select-listbox-height - The height of the listbox inside the select.\n * @cssproperty --mdc-select-listbox-width - The width of the listbox inside the select (default: `--mdc-select-width`).\n *\n * @csspart label - The label element.\n * @csspart label-text - The container for the label and required indicator elements.\n * @csspart required-indicator - The required indicator element that is displayed next to the label when the `required` property is set to true.\n * @csspart info-icon-btn - The info icon button element that is displayed next to the label when the `toggletip-text` property is set.\n * @csspart label-toggletip - The toggletip element that is displayed when the info icon button is clicked.\n * @csspart help-text - The helper/validation text element.\n * @csspart helper-icon - The helper/validation icon element that is displayed next to the helper/validation text.\n * @csspart help-text-container - The container for the helper/validation icon and text elements.\n * @csspart container - The container element that wraps the visual combobox and the dropdown icon.\n * @csspart base-container - The container element that wraps the visual combobox, dropdown icon, and the popover.\n * @csspart selected-icon - The icon element that is displayed next to the selected option in the dropdown list.\n * @csspart base-text - The text element that displays the selected option or placeholder in the visual combobox.\n * @csspart icon-container - The container element that wraps the dropdown icon.\n * @csspart native-input - The native hidden input element.\n */",
           "customElement": true
         }
       ],
@@ -38210,6 +39148,41 @@
         }
       ]
     },
+    {
+      "kind": "javascript-module",
+      "path": "components/selectlistbox/selectlistbox.component.js",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "Selectlistbox component as Light DOM component to act as a simple wrapper\nfor mdc-option components to ensure accessibility and proper role assignment.\n\nOnce [ariaOwnsElements](https://developer.mozilla.org/en-US/docs/Web/API/ElementInternals/ariaOwnsElements) is supported in browsers, this component can be removed\nand mdc-option can be used directly in the select component with a listbox in a different\nshadow root and aria-owns attribute to connect them.",
+          "name": "Selectlistbox",
+          "slots": [
+            {
+              "description": "This is a default/unnamed slot, which can be used to insert mdc-option components.",
+              "name": "default"
+            }
+          ],
+          "members": [],
+          "superclass": {
+            "name": "Component",
+            "module": "/src/models"
+          },
+          "tagName": "mdc-selectlistbox",
+          "jsDoc": "/**\n * Selectlistbox component as Light DOM component to act as a simple wrapper\n * for mdc-option components to ensure accessibility and proper role assignment.\n *\n * Once [ariaOwnsElements](https://developer.mozilla.org/en-US/docs/Web/API/ElementInternals/ariaOwnsElements) is supported in browsers, this component can be removed\n * and mdc-option can be used directly in the select component with a listbox in a different\n * shadow root and aria-owns attribute to connect them.\n *\n * @tagname mdc-selectlistbox\n *\n * @slot default - This is a default/unnamed slot, which can be used to insert mdc-option components.\n */",
+          "customElement": true
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "default",
+          "declaration": {
+            "name": "Selectlistbox",
+            "module": "components/selectlistbox/selectlistbox.component.js"
+          }
+        }
+      ]
+    },
     {
       "kind": "javascript-module",
       "path": "components/sidenavigation/sidenavigation.component.js",
@@ -39296,41 +40269,6 @@
         }
       ]
     },
-    {
-      "kind": "javascript-module",
-      "path": "components/selectlistbox/selectlistbox.component.js",
-      "declarations": [
-        {
-          "kind": "class",
-          "description": "Selectlistbox component as Light DOM component to act as a simple wrapper\nfor mdc-option components to ensure accessibility and proper role assignment.\n\nOnce [ariaOwnsElements](https://developer.mozilla.org/en-US/docs/Web/API/ElementInternals/ariaOwnsElements) is supported in browsers, this component can be removed\nand mdc-option can be used directly in the select component with a listbox in a different\nshadow root and aria-owns attribute to connect them.",
-          "name": "Selectlistbox",
-          "slots": [
-            {
-              "description": "This is a default/unnamed slot, which can be used to insert mdc-option components.",
-              "name": "default"
-            }
-          ],
-          "members": [],
-          "superclass": {
-            "name": "Component",
-            "module": "/src/models"
-          },
-          "tagName": "mdc-selectlistbox",
-          "jsDoc": "/**\n * Selectlistbox component as Light DOM component to act as a simple wrapper\n * for mdc-option components to ensure accessibility and proper role assignment.\n *\n * Once [ariaOwnsElements](https://developer.mozilla.org/en-US/docs/Web/API/ElementInternals/ariaOwnsElements) is supported in browsers, this component can be removed\n * and mdc-option can be used directly in the select component with a listbox in a different\n * shadow root and aria-owns attribute to connect them.\n *\n * @tagname mdc-selectlistbox\n *\n * @slot default - This is a default/unnamed slot, which can be used to insert mdc-option components.\n */",
-          "customElement": true
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "default",
-          "declaration": {
-            "name": "Selectlistbox",
-            "module": "components/selectlistbox/selectlistbox.component.js"
-          }
-        }
-      ]
-    },
     {
       "kind": "javascript-module",
       "path": "components/spinner/spinner.component.js",
@@ -39520,6 +40458,16 @@
             {
               "description": "The container for the checkbox icon.",
               "name": "icon-container"
+            },
+            {
+              "description": "The checkbox icon.",
+              "name": "checkbox-icon"
+            }
+          ],
+          "slots": [
+            {
+              "description": "Default slot for adding label text.",
+              "name": ""
             }
           ],
           "members": [
@@ -39605,7 +40553,7 @@
             "module": "/src/models"
           },
           "tagName": "mdc-staticcheckbox",
-          "jsDoc": "/**\n * This is a decorative component that is styled to look as a checkbox.\n *\n * It has 3 properties - checked, indeterminate and disabled.\n *\n * We are using the same styling that has been created for the `mdc-checkbox` component.\n *\n * @tagname mdc-staticcheckbox\n *\n * @dependency mdc-icon\n *\n * @cssproperty --mdc-staticcheckbox-border-color - Border color in high contrast.\n * @cssproperty --mdc-staticcheckbox-checked-background-color - Background color for a selected checkbox.\n * @cssproperty --mdc-staticcheckbox-disabled-background-color - Background color for a disabled checkbox.\n * @cssproperty --mdc-checkbox-disabled-border-color - Border color for a disabled checkbox.\n * @cssproperty --mdc-checkbox-disabled-checked-icon-color - Background color for a disabled, selected checkbox.\n * @cssproperty --mdc-staticcheckbox-disabled-icon-color - Icon color for a disabled checkbox.\n * @cssproperty --mdc-staticcheckbox-icon-background-color - Background color for an unselected checkbox.\n * @cssproperty --mdc-staticcheckbox-icon-border-color - Default background color for an unselected checkbox.\n * @cssproperty --mdc-staticcheckbox-icon-color - Icon color for an unselected checkbox.\n *\n * @csspart icon-container - The container for the checkbox icon.\n */",
+          "jsDoc": "/**\n * This is a decorative component that is styled to look as a checkbox.\n *\n * It has 3 properties - checked, indeterminate and disabled.\n *\n * We are using the same styling that has been created for the `mdc-checkbox` component.\n *\n * @tagname mdc-staticcheckbox\n *\n * @dependency mdc-icon\n *\n * @cssproperty --mdc-staticcheckbox-border-color - Border color in high contrast.\n * @cssproperty --mdc-staticcheckbox-checked-background-color - Background color for a selected checkbox.\n * @cssproperty --mdc-staticcheckbox-disabled-background-color - Background color for a disabled checkbox.\n * @cssproperty --mdc-checkbox-disabled-border-color - Border color for a disabled checkbox.\n * @cssproperty --mdc-checkbox-disabled-checked-icon-color - Background color for a disabled, selected checkbox.\n * @cssproperty --mdc-staticcheckbox-disabled-icon-color - Icon color for a disabled checkbox.\n * @cssproperty --mdc-staticcheckbox-icon-background-color - Background color for an unselected checkbox.\n * @cssproperty --mdc-staticcheckbox-icon-border-color - Default background color for an unselected checkbox.\n * @cssproperty --mdc-staticcheckbox-icon-color - Icon color for an unselected checkbox.\n *\n * @csspart icon-container - The container for the checkbox icon.\n * @csspart checkbox-icon - The checkbox icon.\n *\n * @slot - Default slot for adding label text.\n */",
           "customElement": true
         }
       ],
@@ -39803,6 +40751,18 @@
               "name": "--mdc-staticradio-control-active-disabled-background"
             }
           ],
+          "cssParts": [
+            {
+              "description": "The radio icon.",
+              "name": "radio-icon"
+            }
+          ],
+          "slots": [
+            {
+              "description": "Default slot for the label of the radio.",
+              "name": ""
+            }
+          ],
           "members": [
             {
               "kind": "field",
@@ -39886,7 +40846,7 @@
             "module": "/src/models"
           },
           "tagName": "mdc-staticradio",
-          "jsDoc": "/**\n * This is a decorative component that is styled to look as a radio.\n * It has 2 properties - checked and disabled.\n *\n * We are using the same styling that has been created for the `mdc-radio` component.\n *\n * @tagname mdc-staticradio\n *\n * @cssproperty --mdc-staticradio-inner-circle-size - size of the inner circle\n * @cssproperty --mdc-staticradio-text-disabled-color - color of the label when disabled\n * @cssproperty --mdc-staticradio-normal-border-color - color of the radio button border when normal\n * @cssproperty --mdc-staticradio-disabled-border-color - color of the radio button border when disabled\n * @cssproperty --mdc-staticradio-inner-circle-normal-background - background color of the inner circle when normal\n * @cssproperty --mdc-staticradio-inner-circle-disabled-background - background color of the inner circle when disabled\n * @cssproperty --mdc-staticradio-control-inactive-color - color of the radio button when inactive\n * @cssproperty --mdc-staticradio-control-inactive-disabled-background - background color of the radio button when\n *  inactive and disabled\n * @cssproperty --mdc-staticradio-control-active-color - color of the radio button when active\n * @cssproperty --mdc-staticradio-control-active-disabled-background - background color of the radio button\n *  when active and disabled\n */",
+          "jsDoc": "/**\n * This is a decorative component that is styled to look as a radio.\n * It has 2 properties - checked and disabled.\n *\n * We are using the same styling that has been created for the `mdc-radio` component.\n *\n * @tagname mdc-staticradio\n *\n * @cssproperty --mdc-staticradio-inner-circle-size - size of the inner circle\n * @cssproperty --mdc-staticradio-text-disabled-color - color of the label when disabled\n * @cssproperty --mdc-staticradio-normal-border-color - color of the radio button border when normal\n * @cssproperty --mdc-staticradio-disabled-border-color - color of the radio button border when disabled\n * @cssproperty --mdc-staticradio-inner-circle-normal-background - background color of the inner circle when normal\n * @cssproperty --mdc-staticradio-inner-circle-disabled-background - background color of the inner circle when disabled\n * @cssproperty --mdc-staticradio-control-inactive-color - color of the radio button when inactive\n * @cssproperty --mdc-staticradio-control-inactive-disabled-background - background color of the radio button when\n *  inactive and disabled\n * @cssproperty --mdc-staticradio-control-active-color - color of the radio button when active\n * @cssproperty --mdc-staticradio-control-active-disabled-background - background color of the radio button\n *  when active and disabled\n *\n * @csspart radio-icon - The radio icon.\n *\n * @slot - Default slot for the label of the radio.\n */",
           "customElement": true
         }
       ],
@@ -39971,10 +40931,24 @@
               "name": "--mdc-statictoggle-icon-background-color-disabled"
             }
           ],
+          "cssParts": [
+            {
+              "description": "The slider part of the toggle",
+              "name": "slider"
+            },
+            {
+              "description": "The icon part of the toggle",
+              "name": "toggle-icon"
+            }
+          ],
           "slots": [
             {
               "description": "This is a default/unnamed slot",
               "name": "default"
+            },
+            {
+              "description": "Default slot for adding label text.",
+              "name": ""
             }
           ],
           "members": [
@@ -40060,7 +41034,7 @@
             "module": "/src/models"
           },
           "tagName": "mdc-statictoggle",
-          "jsDoc": "/**\n * This is a decorative component that is styled to look as a toggle. <br/>\n * It has 3 properties - checked, size and disabled. <br/>\n * We are using the same styling that has been created for the `mdc-toggle` component.\n *\n * @dependency mdc-icon\n *\n * @tagname mdc-statictoggle\n *\n * @slot default - This is a default/unnamed slot\n *\n * @cssproperty --mdc-statictoggle-width - Width of the toggle\n * @cssproperty --mdc-statictoggle-height - Height of the toggle\n * @cssproperty --mdc-statictoggle-width-compact - Width of the toggle when it's size is compact\n * @cssproperty --mdc-statictoggle-height-compact - Height of the toggle when it's size is compact\n * @cssproperty --mdc-statictoggle-border-radius - Border radius of the toggle\n * @cssproperty --mdc-statictoggle-border-radius-compact - Border radius of the toggle when it's size is compact\n * @cssproperty --mdc-statictoggle-border - Border of the toggle\n * @cssproperty --mdc-statictoggle-inactive-rest-color - Background color of the inactive toggle in rest state\n * @cssproperty --mdc-statictoggle-inactive-disabled-color - Background color of the inactive toggle in disabled state\n * @cssproperty --mdc-statictoggle-active-rest-color - Background color of the active toggle in rest state\n * @cssproperty --mdc-statictoggle-active-disabled-color - Background color of the active toggle in disabled state\n * @cssproperty --mdc-statictoggle-icon-color-normal - Color of the icon in normal state\n * @cssproperty --mdc-statictoggle-icon-color-disabled - Color of the icon in disabled state\n * @cssproperty --mdc-statictoggle-icon-background-color-normal - Background color of the icon in normal state\n * @cssproperty --mdc-statictoggle-icon-background-color-disabled - Background color of the icon in disabled state\n */",
+          "jsDoc": "/**\n * This is a decorative component that is styled to look as a toggle. <br/>\n * It has 3 properties - checked, size and disabled. <br/>\n * We are using the same styling that has been created for the `mdc-toggle` component.\n *\n * @dependency mdc-icon\n *\n * @tagname mdc-statictoggle\n *\n * @slot default - This is a default/unnamed slot\n *\n * @cssproperty --mdc-statictoggle-width - Width of the toggle\n * @cssproperty --mdc-statictoggle-height - Height of the toggle\n * @cssproperty --mdc-statictoggle-width-compact - Width of the toggle when it's size is compact\n * @cssproperty --mdc-statictoggle-height-compact - Height of the toggle when it's size is compact\n * @cssproperty --mdc-statictoggle-border-radius - Border radius of the toggle\n * @cssproperty --mdc-statictoggle-border-radius-compact - Border radius of the toggle when it's size is compact\n * @cssproperty --mdc-statictoggle-border - Border of the toggle\n * @cssproperty --mdc-statictoggle-inactive-rest-color - Background color of the inactive toggle in rest state\n * @cssproperty --mdc-statictoggle-inactive-disabled-color - Background color of the inactive toggle in disabled state\n * @cssproperty --mdc-statictoggle-active-rest-color - Background color of the active toggle in rest state\n * @cssproperty --mdc-statictoggle-active-disabled-color - Background color of the active toggle in disabled state\n * @cssproperty --mdc-statictoggle-icon-color-normal - Color of the icon in normal state\n * @cssproperty --mdc-statictoggle-icon-color-disabled - Color of the icon in disabled state\n * @cssproperty --mdc-statictoggle-icon-background-color-normal - Background color of the icon in normal state\n * @cssproperty --mdc-statictoggle-icon-background-color-disabled - Background color of the icon in disabled state\n *\n * @csspart slider - The slider part of the toggle\n * @csspart toggle-icon - The icon part of the toggle\n *\n * @slot - Default slot for adding label text.\n */",
           "customElement": true
         }
       ],
@@ -41442,6 +42416,106 @@
         }
       ]
     },
+    {
+      "kind": "javascript-module",
+      "path": "components/tablist/tablist.component.js",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "Tab list organizes tabs into a container.\n\nChildren of the tab list are `mdc-tab` elements, sent to the default slot.\n\nThe tabs can be navigated using the left/right arrow keys, and selected by clicking,\n or pressing the Enter and Space keys.\n\n**Implicit accessibility rules**\n\n- The element that serves as the container for the set of tabs has role `tablist`.\n- Each element that serves as a tab has role `tab` and is contained within the element with role `tablist`.\n- The active tab element has the state `aria-selected` set to `true`\n  and all other tab elements have it set to `false`.\n\n\n**Accessibility notes for consuming (have to be explicitly set when you consume the component)**\n\n- Each element that contains the `content panel` for a `tab` has role `tabpanel`.\n- The `tablist` element needs to have a label provided by `data-aria-label`.\n- Each element with role `tab` has the property `aria-controls`\n that should refer to its associated `tabpanel` element.\n- Each element with role `tabpanel` has the property `aria-labelledby` referring to its associated `tab` element.\n- If a `tab` element has a popup menu, it needs to have the property `aria-haspopup` set to either `menu` or `true`.",
+          "name": "TabList",
+          "cssProperties": [
+            {
+              "description": "Gap between tabs",
+              "name": "--mdc-tablist-gap"
+            },
+            {
+              "description": "Width of the tablist",
+              "name": "--mdc-tablist-width"
+            },
+            {
+              "description": "Margin value for the arrow button",
+              "name": "--mdc-tablist-arrow-button-margin"
+            }
+          ],
+          "cssParts": [
+            {
+              "description": "The tablist container.",
+              "name": "container"
+            }
+          ],
+          "slots": [
+            {
+              "description": "slot for mdc-tab elements.",
+              "name": "Default"
+            }
+          ],
+          "members": [
+            {
+              "kind": "field",
+              "name": "activeTabId",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "ID of the active tab, defaults to the first tab if not provided",
+              "attribute": "active-tab-id",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "dataAriaLabel",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "Label for the tablist.\nThis is used when the tablist does not have a visible label.",
+              "attribute": "data-aria-label"
+            }
+          ],
+          "events": [
+            {
+              "description": "(React: onChange) This event is dispatched when the tab is selected. Event that fires when user changes the active tab. The function sent as the argument will receive the fired event and the new tab id can be fetched from event.detail.tabId. `(event: CustomEvent) => handleTabChange(event.detail.tabId);`",
+              "name": "change",
+              "reactName": "onChange"
+            }
+          ],
+          "attributes": [
+            {
+              "name": "active-tab-id",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "ID of the active tab, defaults to the first tab if not provided",
+              "fieldName": "activeTabId"
+            },
+            {
+              "name": "data-aria-label",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "Label for the tablist.\nThis is used when the tablist does not have a visible label.",
+              "fieldName": "dataAriaLabel"
+            }
+          ],
+          "superclass": {
+            "name": "Component",
+            "module": "/src/models"
+          },
+          "tagName": "mdc-tablist",
+          "jsDoc": "/**\n * Tab list organizes tabs into a container.\n *\n * Children of the tab list are `mdc-tab` elements, sent to the default slot.\n *\n * The tabs can be navigated using the left/right arrow keys, and selected by clicking,\n *  or pressing the Enter and Space keys.\n *\n * **Implicit accessibility rules**\n *\n * - The element that serves as the container for the set of tabs has role `tablist`.\n * - Each element that serves as a tab has role `tab` and is contained within the element with role `tablist`.\n * - The active tab element has the state `aria-selected` set to `true`\n *   and all other tab elements have it set to `false`.\n *\n *\n * **Accessibility notes for consuming (have to be explicitly set when you consume the component)**\n *\n * - Each element that contains the `content panel` for a `tab` has role `tabpanel`.\n * - The `tablist` element needs to have a label provided by `data-aria-label`.\n * - Each element with role `tab` has the property `aria-controls`\n *  that should refer to its associated `tabpanel` element.\n * - Each element with role `tabpanel` has the property `aria-labelledby` referring to its associated `tab` element.\n * - If a `tab` element has a popup menu, it needs to have the property `aria-haspopup` set to either `menu` or `true`.\n *\n * @tagname mdc-tablist\n *\n * @dependency mdc-tab\n * @dependency mdc-button\n *\n * @event change - (React: onChange) This event is dispatched when the tab is selected.\n * Event that fires when user changes the active tab.\n *     The function sent as the argument will receive the fired event\n *      and the new tab id can be fetched from event.detail.tabId.\n *\n *    `(event: CustomEvent) => handleTabChange(event.detail.tabId);`\n *\n * @slot Default slot for mdc-tab elements.\n *\n * @cssproperty --mdc-tablist-gap - Gap between tabs\n * @cssproperty --mdc-tablist-width - Width of the tablist\n * @cssproperty --mdc-tablist-arrow-button-margin - Margin value for the arrow button\n *\n * @csspart container - The tablist container.\n */",
+          "customElement": true
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "default",
+          "declaration": {
+            "name": "TabList",
+            "module": "components/tablist/tablist.component.js"
+          }
+        }
+      ]
+    },
     {
       "kind": "javascript-module",
       "path": "components/text/text.component.js",
@@ -41593,9 +42667,85 @@
             }
           ],
           "cssParts": [
+            {
+              "description": "The label element.",
+              "name": "label",
+              "inheritedFrom": {
+                "name": "FormfieldWrapper",
+                "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
+              }
+            },
+            {
+              "description": "The container for the label and required indicator elements.",
+              "name": "label-text",
+              "inheritedFrom": {
+                "name": "FormfieldWrapper",
+                "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
+              }
+            },
+            {
+              "description": "The required indicator element that is displayed next to the label when the `required` property is set to true.",
+              "name": "required-indicator",
+              "inheritedFrom": {
+                "name": "FormfieldWrapper",
+                "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
+              }
+            },
+            {
+              "description": "The info icon button element that is displayed next to the label when the `toggletip-text` property is set.",
+              "name": "info-icon-btn",
+              "inheritedFrom": {
+                "name": "FormfieldWrapper",
+                "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
+              }
+            },
+            {
+              "description": "The toggletip element that is displayed when the info icon button is clicked.",
+              "name": "label-toggletip",
+              "inheritedFrom": {
+                "name": "FormfieldWrapper",
+                "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
+              }
+            },
+            {
+              "description": "The helper/validation text element.",
+              "name": "help-text",
+              "inheritedFrom": {
+                "name": "FormfieldWrapper",
+                "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
+              }
+            },
+            {
+              "description": "The helper/validation icon element that is displayed next to the helper/validation text.",
+              "name": "helper-icon",
+              "inheritedFrom": {
+                "name": "FormfieldWrapper",
+                "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
+              }
+            },
+            {
+              "description": "The container for the helper/validation icon and text elements.",
+              "name": "help-text-container",
+              "inheritedFrom": {
+                "name": "FormfieldWrapper",
+                "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
+              }
+            },
+            {
+              "description": "The character counter element that is displayed when the `max-character-limit` property is set.",
+              "name": "character-counter"
+            },
+            {
+              "description": "The container for the help text and character counter elements.",
+              "name": "textarea-footer"
+            },
             {
               "description": "The textarea container",
               "name": "textarea-container"
+            },
+            {
+              "description": "The textarea field element.",
+              "name": "textarea"
             }
           ],
           "members": [
@@ -42453,7 +43603,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: A boolean attribute depicting that the textarea field is required.\n * - Textarea: It is the multi-line text input field.\n * - helper-text: It is the text that provides additional information about the textarea field.\n * - max-character-limit: It is the text that shows the character count of the textarea field.\n * - Error, Warning, Success, Priority Help Text type: It is the text that provides additional information\n *   about the textarea field based on the validation state.\n * - limitexceeded: It is the event that is dispatched when the character limit exceeds or restored.\n *   This event exposes 3 properties:\n *   - currentCharacterCount - the current number of characters in the textarea field,\n *   - maxCharacterLimit - the maximum number of characters allowed in the textarea field,\n *   - value - the current value of the textarea field,\n *\n * **Note**: Consumers must set the help-text-type with 'error' and\n * help-text attribute with the error message using limitexceeded event.\n * The same help-text value will be used for the validation message to be displayed.\n *\n * @tagname mdc-textarea\n *\n * @event input - (React: onInput) This event is dispatched when the value of the textarea field changes (every press).\n * @event change - (React: onChange) This event is dispatched when the value of the textarea field changes (on blur).\n * @event focus - (React: onFocus) This event is dispatched when the textarea receives focus.\n * @event blur - (React: onBlur) This event is dispatched when the textarea loses focus.\n * @event limitexceeded - (React: onLimitExceeded) This event is dispatched once when the character limit\n * exceeds or restored.\n *\n * @dependency mdc-button\n * @dependency mdc-icon\n * @dependency mdc-text\n * @dependency mdc-toggletip\n *\n * @cssproperty --mdc-textarea-disabled-border-color - Border color for the textarea container when disabled\n * @cssproperty --mdc-textarea-disabled-text-color - Text color for the textarea field when disabled\n * @cssproperty --mdc-textarea-disabled-background-color - Background color for the textarea field when disabled\n * @cssproperty --mdc-textarea-text-color - Text color for the textarea field\n * @cssproperty --mdc-textarea-background-color - Background color for the textarea field\n * @cssproperty --mdc-textarea-border-color - Border color for the textarea field\n * @cssproperty --mdc-textarea-text-secondary-normal - Text color for the character counter\n * @cssproperty --mdc-textarea-error-border-color - Border color for the error related help text\n * @cssproperty --mdc-textarea-warning-border-color - Border color for the warning related help text\n * @cssproperty --mdc-textarea-success-border-color - Border color for the success related help text\n * @cssproperty --mdc-textarea-primary-border-color - Border color for the priority related help text\n * @cssproperty --mdc-textarea-hover-background-color - Background color for the textarea container when hover\n * @cssproperty --mdc-textarea-focused-background-color - Background color for the textarea container when focused\n * @cssproperty --mdc-textarea-focused-border-color - Border color for the textarea container when focused\n *\n * @csspart textarea-container - The textarea container\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 * @dependency mdc-button\n * @dependency mdc-icon\n * @dependency mdc-text\n * @dependency mdc-toggletip\n *\n * @cssproperty --mdc-textarea-disabled-border-color - Border color for the textarea container when disabled\n * @cssproperty --mdc-textarea-disabled-text-color - Text color for the textarea field when disabled\n * @cssproperty --mdc-textarea-disabled-background-color - Background color for the textarea field when disabled\n * @cssproperty --mdc-textarea-text-color - Text color for the textarea field\n * @cssproperty --mdc-textarea-background-color - Background color for the textarea field\n * @cssproperty --mdc-textarea-border-color - Border color for the textarea field\n * @cssproperty --mdc-textarea-text-secondary-normal - Text color for the character counter\n * @cssproperty --mdc-textarea-error-border-color - Border color for the error related help text\n * @cssproperty --mdc-textarea-warning-border-color - Border color for the warning related help text\n * @cssproperty --mdc-textarea-success-border-color - Border color for the success related help text\n * @cssproperty --mdc-textarea-primary-border-color - Border color for the priority related help text\n * @cssproperty --mdc-textarea-hover-background-color - Background color for the textarea container when hover\n * @cssproperty --mdc-textarea-focused-background-color - Background color for the textarea container when focused\n * @cssproperty --mdc-textarea-focused-border-color - Border color for the textarea container when focused\n *\n * @csspart label - The label element.\n * @csspart label-text - The container for the label and required indicator elements.\n * @csspart required-indicator - The required indicator element that is displayed next to the label when the `required` property is set to true.\n * @csspart info-icon-btn - The info icon button element that is displayed next to the label when the `toggletip-text` property is set.\n * @csspart label-toggletip - The toggletip element that is displayed when the info icon button is clicked.\n * @csspart help-text - The helper/validation text element.\n * @csspart helper-icon - The helper/validation icon element that is displayed next to the helper/validation text.\n * @csspart help-text-container - The container for the helper/validation icon and text elements.\n * @csspart character-counter - The character counter element that is displayed when the `max-character-limit` property is set.\n * @csspart textarea-footer - The container for the help text and character counter elements.\n * @csspart textarea-container - The textarea container\n * @csspart textarea - The textarea field element.\n */",
           "customElement": true,
           "slots": [
             {
@@ -42612,106 +43762,6 @@
         }
       ]
     },
-    {
-      "kind": "javascript-module",
-      "path": "components/tablist/tablist.component.js",
-      "declarations": [
-        {
-          "kind": "class",
-          "description": "Tab list organizes tabs into a container.\n\nChildren of the tab list are `mdc-tab` elements, sent to the default slot.\n\nThe tabs can be navigated using the left/right arrow keys, and selected by clicking,\n or pressing the Enter and Space keys.\n\n**Implicit accessibility rules**\n\n- The element that serves as the container for the set of tabs has role `tablist`.\n- Each element that serves as a tab has role `tab` and is contained within the element with role `tablist`.\n- The active tab element has the state `aria-selected` set to `true`\n  and all other tab elements have it set to `false`.\n\n\n**Accessibility notes for consuming (have to be explicitly set when you consume the component)**\n\n- Each element that contains the `content panel` for a `tab` has role `tabpanel`.\n- The `tablist` element needs to have a label provided by `data-aria-label`.\n- Each element with role `tab` has the property `aria-controls`\n that should refer to its associated `tabpanel` element.\n- Each element with role `tabpanel` has the property `aria-labelledby` referring to its associated `tab` element.\n- If a `tab` element has a popup menu, it needs to have the property `aria-haspopup` set to either `menu` or `true`.",
-          "name": "TabList",
-          "cssProperties": [
-            {
-              "description": "Gap between tabs",
-              "name": "--mdc-tablist-gap"
-            },
-            {
-              "description": "Width of the tablist",
-              "name": "--mdc-tablist-width"
-            },
-            {
-              "description": "Margin value for the arrow button",
-              "name": "--mdc-tablist-arrow-button-margin"
-            }
-          ],
-          "cssParts": [
-            {
-              "description": "The tablist container.",
-              "name": "container"
-            }
-          ],
-          "slots": [
-            {
-              "description": "slot for mdc-tab elements.",
-              "name": "Default"
-            }
-          ],
-          "members": [
-            {
-              "kind": "field",
-              "name": "activeTabId",
-              "type": {
-                "text": "string | undefined"
-              },
-              "description": "ID of the active tab, defaults to the first tab if not provided",
-              "attribute": "active-tab-id",
-              "reflects": true
-            },
-            {
-              "kind": "field",
-              "name": "dataAriaLabel",
-              "type": {
-                "text": "string | undefined"
-              },
-              "description": "Label for the tablist.\nThis is used when the tablist does not have a visible label.",
-              "attribute": "data-aria-label"
-            }
-          ],
-          "events": [
-            {
-              "description": "(React: onChange) This event is dispatched when the tab is selected. Event that fires when user changes the active tab. The function sent as the argument will receive the fired event and the new tab id can be fetched from event.detail.tabId. `(event: CustomEvent) => handleTabChange(event.detail.tabId);`",
-              "name": "change",
-              "reactName": "onChange"
-            }
-          ],
-          "attributes": [
-            {
-              "name": "active-tab-id",
-              "type": {
-                "text": "string | undefined"
-              },
-              "description": "ID of the active tab, defaults to the first tab if not provided",
-              "fieldName": "activeTabId"
-            },
-            {
-              "name": "data-aria-label",
-              "type": {
-                "text": "string | undefined"
-              },
-              "description": "Label for the tablist.\nThis is used when the tablist does not have a visible label.",
-              "fieldName": "dataAriaLabel"
-            }
-          ],
-          "superclass": {
-            "name": "Component",
-            "module": "/src/models"
-          },
-          "tagName": "mdc-tablist",
-          "jsDoc": "/**\n * Tab list organizes tabs into a container.\n *\n * Children of the tab list are `mdc-tab` elements, sent to the default slot.\n *\n * The tabs can be navigated using the left/right arrow keys, and selected by clicking,\n *  or pressing the Enter and Space keys.\n *\n * **Implicit accessibility rules**\n *\n * - The element that serves as the container for the set of tabs has role `tablist`.\n * - Each element that serves as a tab has role `tab` and is contained within the element with role `tablist`.\n * - The active tab element has the state `aria-selected` set to `true`\n *   and all other tab elements have it set to `false`.\n *\n *\n * **Accessibility notes for consuming (have to be explicitly set when you consume the component)**\n *\n * - Each element that contains the `content panel` for a `tab` has role `tabpanel`.\n * - The `tablist` element needs to have a label provided by `data-aria-label`.\n * - Each element with role `tab` has the property `aria-controls`\n *  that should refer to its associated `tabpanel` element.\n * - Each element with role `tabpanel` has the property `aria-labelledby` referring to its associated `tab` element.\n * - If a `tab` element has a popup menu, it needs to have the property `aria-haspopup` set to either `menu` or `true`.\n *\n * @tagname mdc-tablist\n *\n * @dependency mdc-tab\n * @dependency mdc-button\n *\n * @event change - (React: onChange) This event is dispatched when the tab is selected.\n * Event that fires when user changes the active tab.\n *     The function sent as the argument will receive the fired event\n *      and the new tab id can be fetched from event.detail.tabId.\n *\n *    `(event: CustomEvent) => handleTabChange(event.detail.tabId);`\n *\n * @slot Default slot for mdc-tab elements.\n *\n * @cssproperty --mdc-tablist-gap - Gap between tabs\n * @cssproperty --mdc-tablist-width - Width of the tablist\n * @cssproperty --mdc-tablist-arrow-button-margin - Margin value for the arrow button\n *\n * @csspart container - The tablist container.\n */",
-          "customElement": true
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "default",
-          "declaration": {
-            "name": "TabList",
-            "module": "components/tablist/tablist.component.js"
-          }
-        }
-      ]
-    },
     {
       "kind": "javascript-module",
       "path": "components/toast/toast.component.js",
@@ -42778,6 +43828,10 @@
             {
               "description": "The close button for the toast.",
               "name": "toast-close-btn"
+            },
+            {
+              "description": "Applied to the footer when it contains buttons or a toggle button.",
+              "name": "has-footer-buttons"
             }
           ],
           "slots": [
@@ -43083,7 +44137,7 @@
             "module": "/src/models"
           },
           "tagName": "mdc-toast",
-          "jsDoc": "/**\n * `mdc-toast` is a lightweight, non-blocking alert used to inform users about application processes.\n * It supports success, warning, error, and custom messages, and is designed to be controlled externally.\n *\n * **Note**: When using `slot=\"toast-body-normal\"` and `slot=\"toast-body-detailed\"`, it's strongly recommended to wrap the content with `<mdc-text tagname=\"span\">`.\n * If not used, ensure your custom content is styled appropriately to match the design and alignment expectations of the toast component.\n *\n * @dependency mdc-icon\n * @dependency mdc-text\n * @dependency mdc-button\n *\n * @slot content-prefix - Slot for custom content before the icon (only for custom variant).\n * @slot toast-body-normal - Slot for the main body content of the toast.\n * @slot toast-body-detailed - Slot for additional detailed content, shown when expanded.\n * @slot footer - Slot for custom footer content. Prefer using footer-button-primary and footer-button-secondary slots.\n * @slot footer-button-primary - Slot for passing the primary variant of `mdc-button` in the footer.\n * @slot footer-button-secondary - Slot for passing the secondary variant of `mdc-button` in the footer.\n *\n * @tagname mdc-toast\n *\n * @event close - (React: onClose) Dispatched when the Close Button is clicked using mouse or keyboard.\n *\n * @csspart content-container - The container for the toast's main content, including icon, text, and close button.\n * @csspart toast-prefix-icon - The icon shown at the start of the toast, styled by variant.\n * @csspart toast-content - The container for the header and body content of the toast.\n * @csspart toast-header - The header text of the toast.\n * @csspart footer - The container for the toast's footer, including toggle and action buttons.\n * @csspart footer-button-toggle - The toggle button for showing/hiding detailed content.\n * @csspart toast-close-btn - The close button for the toast.\n *\n * @cssproperty --mdc-toast-background-color - Background color of the toast.\n * @cssproperty --mdc-toast-border-color - Border color of the toast.\n * @cssproperty --mdc-toast-header-text-color - Color of the header text in the toast.\n * @cssproperty --mdc-toast-icon-color - Color of the icon in the toast.\n * @cssproperty --mdc-toast-elevation-3 - Elevation effect applied to the toast.\n * @cssproperty --mdc-toast-width - Width of the toast.\n * @cssproperty --mdc-toast-padding - Padding inside the toast.\n */",
+          "jsDoc": "/**\n * `mdc-toast` is a lightweight, non-blocking alert used to inform users about application processes.\n * It supports success, warning, error, and custom messages, and is designed to be controlled externally.\n *\n * **Note**: When using `slot=\"toast-body-normal\"` and `slot=\"toast-body-detailed\"`, it's strongly recommended to wrap the content with `<mdc-text tagname=\"span\">`.\n * If not used, ensure your custom content is styled appropriately to match the design and alignment expectations of the toast component.\n *\n * @dependency mdc-icon\n * @dependency mdc-text\n * @dependency mdc-button\n *\n * @slot content-prefix - Slot for custom content before the icon (only for custom variant).\n * @slot toast-body-normal - Slot for the main body content of the toast.\n * @slot toast-body-detailed - Slot for additional detailed content, shown when expanded.\n * @slot footer - Slot for custom footer content. Prefer using footer-button-primary and footer-button-secondary slots.\n * @slot footer-button-primary - Slot for passing the primary variant of `mdc-button` in the footer.\n * @slot footer-button-secondary - Slot for passing the secondary variant of `mdc-button` in the footer.\n *\n * @tagname mdc-toast\n *\n * @event close - (React: onClose) Dispatched when the Close Button is clicked using mouse or keyboard.\n *\n * @csspart content-container - The container for the toast's main content, including icon, text, and close button.\n * @csspart toast-prefix-icon - The icon shown at the start of the toast, styled by variant.\n * @csspart toast-content - The container for the header and body content of the toast.\n * @csspart toast-header - The header text of the toast.\n * @csspart footer - The container for the toast's footer, including toggle and action buttons.\n * @csspart footer-button-toggle - The toggle button for showing/hiding detailed content.\n * @csspart toast-close-btn - The close button for the toast.\n * @csspart has-footer-buttons - Applied to the footer when it contains buttons or a toggle button.\n *\n * @cssproperty --mdc-toast-background-color - Background color of the toast.\n * @cssproperty --mdc-toast-border-color - Border color of the toast.\n * @cssproperty --mdc-toast-header-text-color - Color of the header text in the toast.\n * @cssproperty --mdc-toast-icon-color - Color of the icon in the toast.\n * @cssproperty --mdc-toast-elevation-3 - Elevation effect applied to the toast.\n * @cssproperty --mdc-toast-width - Width of the toast.\n * @cssproperty --mdc-toast-padding - Padding inside the toast.\n */",
           "customElement": true
         }
       ],
@@ -43148,6 +44202,80 @@
               "name": "--mdc-toggle-inactive-pressed-color"
             }
           ],
+          "cssParts": [
+            {
+              "description": "The label element.",
+              "name": "label",
+              "inheritedFrom": {
+                "name": "FormfieldWrapper",
+                "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
+              }
+            },
+            {
+              "description": "The container for the label and required indicator elements.",
+              "name": "label-text",
+              "inheritedFrom": {
+                "name": "FormfieldWrapper",
+                "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
+              }
+            },
+            {
+              "description": "The required indicator element that is displayed next to the label when the `required` property is set to true.",
+              "name": "required-indicator",
+              "inheritedFrom": {
+                "name": "FormfieldWrapper",
+                "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
+              }
+            },
+            {
+              "description": "The info icon button element that is displayed next to the label when the `toggletip-text` property is set.",
+              "name": "info-icon-btn",
+              "inheritedFrom": {
+                "name": "FormfieldWrapper",
+                "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
+              }
+            },
+            {
+              "description": "The toggletip element that is displayed when the info icon button is clicked.",
+              "name": "label-toggletip",
+              "inheritedFrom": {
+                "name": "FormfieldWrapper",
+                "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
+              }
+            },
+            {
+              "description": "The helper/validation text element.",
+              "name": "help-text",
+              "inheritedFrom": {
+                "name": "FormfieldWrapper",
+                "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
+              }
+            },
+            {
+              "description": "The helper/validation icon element that is displayed next to the helper/validation text.",
+              "name": "helper-icon",
+              "inheritedFrom": {
+                "name": "FormfieldWrapper",
+                "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
+              }
+            },
+            {
+              "description": "The container for the helper/validation icon and text elements.",
+              "name": "help-text-container",
+              "inheritedFrom": {
+                "name": "FormfieldWrapper",
+                "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
+              }
+            },
+            {
+              "description": "The container element that wraps the toggle input.",
+              "name": "container"
+            },
+            {
+              "description": "The native checkbox input element styled as a toggle switch.",
+              "name": "toggle-input"
+            }
+          ],
           "members": [
             {
               "kind": "field",
@@ -43807,7 +44935,7 @@
             "module": "/src/components/formfieldwrapper"
           },
           "tagName": "mdc-toggle",
-          "jsDoc": "/**\n * Toggle Component is an interactive control used to switch between two mutually exclusive options,\n * such as On/Off, Active/Inactive. These are commonly used in settings panels, forms, and preference selections\n * where users need to enable or disable a feature.\n * It contains an optional label and an optional helper text.\n *\n * To create a group of toggles, use the FormFieldGroup component.\n *\n * Note: It internally renders a checkbox styled as a toggle switch.\n *\n * @dependency mdc-button\n * @dependency mdc-icon\n * @dependency mdc-statictoggle\n * @dependency mdc-text\n * @dependency mdc-toggletip\n *\n * @tagname mdc-toggle\n *\n * @event change - (React: onChange) Event that gets dispatched when the toggle state changes.\n * @event focus - (React: onFocus) Event that gets dispatched when the toggle receives focus.\n *\n * @cssproperty --mdc-toggle-width - Width of the toggle\n * @cssproperty --mdc-toggle-height - Height of the toggle\n * @cssproperty --mdc-toggle-width-compact - Width of the toggle when it's size is compact\n * @cssproperty --mdc-toggle-height-compact - Height of the toggle when it's size is compact\n * @cssproperty --mdc-toggle-label-color-disabled - Color of the toggle label and help text in disabled state\n * @cssproperty --mdc-toggle-help-text-color - Color of the help text label\n * @cssproperty --mdc-toggle-active-hover-color - Background color of the active toggle in hover state\n * @cssproperty --mdc-toggle-active-pressed-color - Background color of the active toggle in pressed state\n * @cssproperty --mdc-toggle-inactive-hover-color - Background color of the inactive toggle in hover state\n * @cssproperty --mdc-toggle-inactive-pressed-color - Background color of the inactive toggle in pressed state\n */",
+          "jsDoc": "/**\n * Toggle Component is an interactive control used to switch between two mutually exclusive options,\n * such as On/Off, Active/Inactive. These are commonly used in settings panels, forms, and preference selections\n * where users need to enable or disable a feature.\n * It contains an optional label and an optional helper text.\n *\n * To create a group of toggles, use the FormFieldGroup component.\n *\n * Note: It internally renders a checkbox styled as a toggle switch.\n *\n * @dependency mdc-button\n * @dependency mdc-icon\n * @dependency mdc-statictoggle\n * @dependency mdc-text\n * @dependency mdc-toggletip\n *\n * @tagname mdc-toggle\n *\n * @event change - (React: onChange) Event that gets dispatched when the toggle state changes.\n * @event focus - (React: onFocus) Event that gets dispatched when the toggle receives focus.\n *\n * @cssproperty --mdc-toggle-width - Width of the toggle\n * @cssproperty --mdc-toggle-height - Height of the toggle\n * @cssproperty --mdc-toggle-width-compact - Width of the toggle when it's size is compact\n * @cssproperty --mdc-toggle-height-compact - Height of the toggle when it's size is compact\n * @cssproperty --mdc-toggle-label-color-disabled - Color of the toggle label and help text in disabled state\n * @cssproperty --mdc-toggle-help-text-color - Color of the help text label\n * @cssproperty --mdc-toggle-active-hover-color - Background color of the active toggle in hover state\n * @cssproperty --mdc-toggle-active-pressed-color - Background color of the active toggle in pressed state\n * @cssproperty --mdc-toggle-inactive-hover-color - Background color of the inactive toggle in hover state\n * @cssproperty --mdc-toggle-inactive-pressed-color - Background color of the inactive toggle in pressed state\n *\n * @csspart label - The label element.\n * @csspart label-text - The container for the label and required indicator elements.\n * @csspart required-indicator - The required indicator element that is displayed next to the label when the `required` property is set to true.\n * @csspart info-icon-btn - The info icon button element that is displayed next to the label when the `toggletip-text` property is set.\n * @csspart label-toggletip - The toggletip element that is displayed when the info icon button is clicked.\n * @csspart help-text - The helper/validation text element.\n * @csspart helper-icon - The helper/validation icon element that is displayed next to the helper/validation text.\n * @csspart help-text-container - The container for the helper/validation icon and text elements.\n * @csspart container - The container element that wraps the toggle input.\n * @csspart toggle-input - The native checkbox input element styled as a toggle switch.\n */",
           "customElement": true,
           "slots": [
             {