@momentum-design/components 0.120.30 → 0.120.32

package/dist/custom-elements.json

@@ -3253,10 +3253,6 @@
             }
           ],
           "cssParts": [
-            {
-              "description": "The main content of the avatar.",
-              "name": "content"
-            },
             {
               "description": "The photo of the avatar.",
               "name": "photo"
@@ -3385,7 +3381,7 @@
             "module": "/src/models"
           },
           "tagName": "mdc-avatar",
-          "jsDoc": "/**\n * The `mdc-avatar` component is used to represent a person or a space.\n * An avatar can be an icon, initials, counter and photo.\n *\n * To set the photo of an avatar,\n * you need to set \"src\" attribute.\n *\n * While the avatar image is loading, as a placeholder,\n * we will show the initials text.\n * If the initials are not specified then,\n * we will show `user-regular` icon as a placeholder.\n *\n * By default, if there are no attributes specified,\n * then the default avatar will be an icon with `user-regular` name.\n *\n * The avatar component is non clickable and non interactive/focusable component.\n * If the avatar is typing, then the loading indicator will be displayed.\n * If the counter type avatar is set to a negative number, then we will display 0.\n * The presence indicator will be hidden when the counter property is set.\n *\n * @dependency mdc-icon\n * @dependency mdc-presence\n * @dependency mdc-text\n *\n * @tagname mdc-avatar\n *\n * @cssproperty --mdc-avatar-default-background-color - Allows customization of the default background color.\n * @cssproperty --mdc-avatar-default-foreground-color - Allows customization of the default foreground color.\n * @cssproperty --mdc-avatar-loading-indicator-background-color -\n *  Allows customization of the loading indicator background color.\n * @cssproperty --mdc-avatar-loading-indicator-foreground-color -\n *  Allows customization of the loading indicator foreground color.\n * @cssproperty --mdc-avatar-loading-overlay-background-color -\n *  Allows customization of the loading overlay background color.\n *\n * @csspart content - The main content of the avatar.\n * @csspart photo - The photo of the avatar.\n * @csspart presence - The presence indicator of the avatar.\n * @csspart loading-wrapper - The wrapper for the loading indicator.\n * @csspart loader - The loading indicator of the avatar.\n */",
+          "jsDoc": "/**\n * The `mdc-avatar` component is used to represent a person or a space.\n * An avatar can be an icon, initials, counter and photo.\n *\n * To set the photo of an avatar,\n * you need to set \"src\" attribute.\n *\n * While the avatar image is loading, as a placeholder,\n * we will show the initials text.\n * If the initials are not specified then,\n * we will show `user-regular` icon as a placeholder.\n *\n * By default, if there are no attributes specified,\n * then the default avatar will be an icon with `user-regular` name.\n *\n * The avatar component is non clickable and non interactive/focusable component.\n * If the avatar is typing, then the loading indicator will be displayed.\n * If the counter type avatar is set to a negative number, then we will display 0.\n * The presence indicator will be hidden when the counter property is set.\n *\n * @dependency mdc-icon\n * @dependency mdc-presence\n * @dependency mdc-text\n *\n * @tagname mdc-avatar\n *\n * @cssproperty --mdc-avatar-default-background-color - Allows customization of the default background color.\n * @cssproperty --mdc-avatar-default-foreground-color - Allows customization of the default foreground color.\n * @cssproperty --mdc-avatar-loading-indicator-background-color -\n *  Allows customization of the loading indicator background color.\n * @cssproperty --mdc-avatar-loading-indicator-foreground-color -\n *  Allows customization of the loading indicator foreground color.\n * @cssproperty --mdc-avatar-loading-overlay-background-color -\n *  Allows customization of the loading overlay background color.\n *\n * @csspart photo - The photo of the avatar.\n * @csspart presence - The presence indicator of the avatar.\n * @csspart loading-wrapper - The wrapper for the loading indicator.\n * @csspart loader - The loading indicator of the avatar.\n */",
           "customElement": true,
           "attributes": [
             {
@@ -10132,6 +10128,14 @@
                 "name": "FormfieldWrapper",
                 "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
               }
+            },
+            {
+              "description": "Color for the required indicator text.",
+              "name": "--mdc-required-indicator-color",
+              "inheritedFrom": {
+                "name": "FormfieldWrapper",
+                "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
+              }
             }
           ],
           "cssParts": [
@@ -10206,6 +10210,10 @@
             {
               "description": "The container for the label and helper text elements.",
               "name": "text-container"
+            },
+            {
+              "description": "The static checkbox element.",
+              "name": "static-checkbox"
             }
           ],
           "slots": [
@@ -10972,7 +10980,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 * @cssproperty --mdc-label-font-size - Font size for the label text.\n * @cssproperty --mdc-label-font-weight - Font weight for the label text.\n * @cssproperty --mdc-label-line-height - Line height for the label text.\n * @cssproperty --mdc-label-color - Color for the label text.\n * @cssproperty --mdc-help-text-font-size - Font size for the help text.\n * @cssproperty --mdc-help-text-font-weight - Font weight for the help text.\n * @cssproperty --mdc-help-text-line-height - Line height for the help text.\n * @cssproperty --mdc-help-text-color - Color for the help text.\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 */",
+          "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 * @cssproperty --mdc-label-font-size - Font size for the label text.\n * @cssproperty --mdc-label-font-weight - Font weight for the label text.\n * @cssproperty --mdc-label-line-height - Line height for the label text.\n * @cssproperty --mdc-label-color - Color for the label text.\n * @cssproperty --mdc-help-text-font-size - Font size for the help text.\n * @cssproperty --mdc-help-text-font-weight - Font weight for the help text.\n * @cssproperty --mdc-help-text-line-height - Line height for the help text.\n * @cssproperty --mdc-help-text-color - Color for the help text.\n * @cssproperty --mdc-required-indicator-color - Color for the required indicator text.\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 * @csspart static-checkbox - The static checkbox element.\n */",
           "customElement": true
         }
       ],
@@ -13706,6 +13714,14 @@
                 "name": "FormfieldWrapper",
                 "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
               }
+            },
+            {
+              "description": "Color for the required indicator text.",
+              "name": "--mdc-required-indicator-color",
+              "inheritedFrom": {
+                "name": "FormfieldWrapper",
+                "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
+              }
             }
           ],
           "cssParts": [
@@ -14980,7 +14996,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-text-color-disabled - The text color of the combobox when disabled\n * @cssproperty --mdc-label-font-size - Font size for the label text.\n * @cssproperty --mdc-label-font-weight - Font weight for the label text.\n * @cssproperty --mdc-label-line-height - Line height for the label text.\n * @cssproperty --mdc-label-color - Color for the label text.\n * @cssproperty --mdc-help-text-font-size - Font size for the help text.\n * @cssproperty --mdc-help-text-font-weight - Font weight for the help text.\n * @cssproperty --mdc-help-text-line-height - Line height for the help text.\n * @cssproperty --mdc-help-text-color - Color for 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 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 */",
+          "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-text-color-disabled - The text color of the combobox when disabled\n * @cssproperty --mdc-label-font-size - Font size for the label text.\n * @cssproperty --mdc-label-font-weight - Font weight for the label text.\n * @cssproperty --mdc-label-line-height - Line height for the label text.\n * @cssproperty --mdc-label-color - Color for the label text.\n * @cssproperty --mdc-help-text-font-size - Font size for the help text.\n * @cssproperty --mdc-help-text-font-weight - Font weight for the help text.\n * @cssproperty --mdc-help-text-line-height - Line height for the help text.\n * @cssproperty --mdc-help-text-color - Color for the help text.\n * @cssproperty --mdc-required-indicator-color - Color for the required indicator 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 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
         }
       ],
@@ -17197,6 +17213,14 @@
                 "name": "FormfieldWrapper",
                 "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
               }
+            },
+            {
+              "description": "Color for the required indicator text.",
+              "name": "--mdc-required-indicator-color",
+              "inheritedFrom": {
+                "name": "FormfieldWrapper",
+                "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
+              }
             }
           ],
           "cssParts": [
@@ -17572,7 +17596,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 *\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 *\n * @cssproperty --mdc-label-font-size - Font size for the label text.\n * @cssproperty --mdc-label-font-weight - Font weight for the label text.\n * @cssproperty --mdc-label-line-height - Line height for the label text.\n * @cssproperty --mdc-label-color - Color for the label text.\n * @cssproperty --mdc-help-text-font-size - Font size for the help text.\n * @cssproperty --mdc-help-text-font-weight - Font weight for the help text.\n * @cssproperty --mdc-help-text-line-height - Line height for the help text.\n * @cssproperty --mdc-help-text-color - Color for the help 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 *\n * @cssproperty --mdc-label-font-size - Font size for the label text.\n * @cssproperty --mdc-label-font-weight - Font weight for the label text.\n * @cssproperty --mdc-label-line-height - Line height for the label text.\n * @cssproperty --mdc-label-color - Color for the label text.\n * @cssproperty --mdc-help-text-font-size - Font size for the help text.\n * @cssproperty --mdc-help-text-font-weight - Font weight for the help text.\n * @cssproperty --mdc-help-text-line-height - Line height for the help text.\n * @cssproperty --mdc-help-text-color - Color for the help text.\n * @cssproperty --mdc-required-indicator-color - Color for the required indicator text.\n */",
           "customElement": true,
           "attributes": [
             {
@@ -17778,6 +17802,10 @@
             {
               "description": "Color for the help text.",
               "name": "--mdc-help-text-color"
+            },
+            {
+              "description": "Color for the required indicator text.",
+              "name": "--mdc-required-indicator-color"
             }
           ],
           "cssParts": [
@@ -18116,7 +18144,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 *\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 *\n * @cssproperty --mdc-label-font-size - Font size for the label text.\n * @cssproperty --mdc-label-font-weight - Font weight for the label text.\n * @cssproperty --mdc-label-line-height - Line height for the label text.\n * @cssproperty --mdc-label-color - Color for the label text.\n * @cssproperty --mdc-help-text-font-size - Font size for the help text.\n * @cssproperty --mdc-help-text-font-weight - Font weight for the help text.\n * @cssproperty --mdc-help-text-line-height - Line height for the help text.\n * @cssproperty --mdc-help-text-color - Color for the help 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 *\n * @cssproperty --mdc-label-font-size - Font size for the label text.\n * @cssproperty --mdc-label-font-weight - Font weight for the label text.\n * @cssproperty --mdc-label-line-height - Line height for the label text.\n * @cssproperty --mdc-label-color - Color for the label text.\n * @cssproperty --mdc-help-text-font-size - Font size for the help text.\n * @cssproperty --mdc-help-text-font-weight - Font weight for the help text.\n * @cssproperty --mdc-help-text-line-height - Line height for the help text.\n * @cssproperty --mdc-help-text-color - Color for the help text.\n * @cssproperty --mdc-required-indicator-color - Color for the required indicator text.\n */",
           "customElement": true
         }
       ],
@@ -18982,6 +19010,14 @@
                 "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
               }
             },
+            {
+              "description": "Color for the required indicator text.",
+              "name": "--mdc-required-indicator-color",
+              "inheritedFrom": {
+                "name": "FormfieldWrapper",
+                "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
+              }
+            },
             {
               "description": "Text color for the input field",
               "name": "--mdc-input-text-color"
@@ -20115,7 +20151,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-label-font-size - Font size for the label text.\n * @cssproperty --mdc-label-font-weight - Font weight for the label text.\n * @cssproperty --mdc-label-line-height - Line height for the label text.\n * @cssproperty --mdc-label-color - Color for the label text.\n * @cssproperty --mdc-help-text-font-size - Font size for the help text.\n * @cssproperty --mdc-help-text-font-weight - Font weight for the help text.\n * @cssproperty --mdc-help-text-line-height - Line height for the help text.\n * @cssproperty --mdc-help-text-color - Color for the help text.\n * @cssproperty --mdc-input-text-color - Text color for the input field\n * @cssproperty --mdc-input-border-color - Border color for the input container\n * @cssproperty --mdc-input-background-color - Background color for the input field\n * @cssproperty --mdc-input-support-text-color - Text color for the help text\n * @cssproperty --mdc-input-selection-text-color - Text color for the selected text\n * @cssproperty --mdc-input-selection-background-color - Background color for the selected 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 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 */",
+          "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-label-font-size - Font size for the label text.\n * @cssproperty --mdc-label-font-weight - Font weight for the label text.\n * @cssproperty --mdc-label-line-height - Line height for the label text.\n * @cssproperty --mdc-label-color - Color for the label text.\n * @cssproperty --mdc-help-text-font-size - Font size for the help text.\n * @cssproperty --mdc-help-text-font-weight - Font weight for the help text.\n * @cssproperty --mdc-help-text-line-height - Line height for the help text.\n * @cssproperty --mdc-help-text-color - Color for the help text.\n * @cssproperty --mdc-required-indicator-color - Color for the required indicator text.\n * @cssproperty --mdc-input-text-color - Text color for the input field\n * @cssproperty --mdc-input-border-color - Border color for the input container\n * @cssproperty --mdc-input-background-color - Background color for the input field\n * @cssproperty --mdc-input-support-text-color - Text color for the help text\n * @cssproperty --mdc-input-selection-text-color - Text color for the selected text\n * @cssproperty --mdc-input-selection-background-color - Background color for the selected 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 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
         }
       ],
@@ -21613,6 +21649,231 @@
         }
       ]
     },
+    {
+      "kind": "javascript-module",
+      "path": "components/list/list.component.js",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "mdc-list component is used to display a group of list items. It is used as a container to wrap other list items.\n\nTo add a header to the list, use the `mdc-listheader` component and place it in the `list-header` slot.\n`mdc-listitem` components can be placed in the default slot.",
+          "name": "List",
+          "cssParts": [
+            {
+              "description": "The container slot around the list items",
+              "name": "container"
+            }
+          ],
+          "slots": [
+            {
+              "description": "This is a default/unnamed slot, where listitems can be placed.",
+              "name": "default"
+            },
+            {
+              "description": "This slot is used to pass a header for the list, which can be a `mdc-listheader` component.",
+              "name": "list-header"
+            }
+          ],
+          "members": [
+            {
+              "kind": "field",
+              "name": "loop",
+              "type": {
+                "text": "'true' | 'false'"
+              },
+              "privacy": "public",
+              "description": "Whether to loop navigation when reaching the end of the list.\nIf 'true', pressing the down arrow on the last item will focus the first item,\nand pressing the up arrow on the first item will focus the last item.\nIf 'false', navigation will stop at the first or last item.",
+              "default": "''",
+              "attribute": "loop",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "initialFocus",
+              "type": {
+                "text": "number"
+              },
+              "privacy": "public",
+              "description": "The index of the item that should receive focus when the list is first rendered.\nIf the index is out of bounds, the first item (index 0) will receive focus.",
+              "default": "0",
+              "attribute": "initial-focus",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "itemsStore",
+              "default": "new ElementStore<ListItem>(this, { isValidItem: this.isValidItem, })"
+            },
+            {
+              "kind": "method",
+              "name": "getCurrentIndex",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": ""
+                }
+              },
+              "parameters": [
+                {
+                  "name": "target",
+                  "type": {
+                    "text": "HTMLElement | null"
+                  },
+                  "description": "The target element that triggered the event."
+                }
+              ],
+              "description": "Retrieves the current index of the item that triggered the event.",
+              "inheritedFrom": {
+                "name": "ListNavigationMixin",
+                "module": "utils/mixins/ListNavigationMixin.js"
+              }
+            },
+            {
+              "kind": "method",
+              "name": "resetTabIndexes",
+              "privacy": "protected",
+              "parameters": [
+                {
+                  "name": "index",
+                  "type": {
+                    "text": "number"
+                  },
+                  "description": "The index of the currently focused item."
+                }
+              ],
+              "description": "Reset all tabindex to -1 and set the tabindex of the current item to 0",
+              "inheritedFrom": {
+                "name": "ListNavigationMixin",
+                "module": "utils/mixins/ListNavigationMixin.js"
+              }
+            },
+            {
+              "kind": "method",
+              "name": "resetTabIndexAndSetFocus",
+              "privacy": "protected",
+              "parameters": [
+                {
+                  "name": "newIndex",
+                  "type": {
+                    "text": "number"
+                  },
+                  "description": "The index of the new item to focus."
+                },
+                {
+                  "name": "oldIndex",
+                  "optional": true,
+                  "type": {
+                    "text": "number"
+                  },
+                  "description": "The index of the currently focused item."
+                },
+                {
+                  "name": "focusNewItem",
+                  "default": "true",
+                  "description": "Call focus() on the new item or not. It should be false during firstUpdate"
+                }
+              ],
+              "description": "Resets the tabindex of the currently focused item and sets focus to a new item.",
+              "return": {
+                "type": {
+                  "text": ""
+                }
+              },
+              "inheritedFrom": {
+                "name": "ListNavigationMixin",
+                "module": "utils/mixins/ListNavigationMixin.js"
+              }
+            },
+            {
+              "kind": "method",
+              "name": "resolveDirectionKey",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "key",
+                  "type": {
+                    "text": "string"
+                  },
+                  "description": "The key pressed by the user."
+                },
+                {
+                  "name": "isRtl",
+                  "type": {
+                    "text": "boolean"
+                  },
+                  "description": "A boolean indicating if the layout is right-to-left (RTL)."
+                }
+              ],
+              "description": "Resolves the key pressed by the user based on the direction of the layout.\nThis method is used to handle keyboard navigation in a right-to-left (RTL) layout.\nIt checks if the layout is RTL and adjusts the arrow keys accordingly.\nFor example, in RTL, the left arrow key behaves like the right arrow key and vice versa.",
+              "return": {
+                "type": {
+                  "text": ""
+                }
+              },
+              "inheritedFrom": {
+                "name": "ListNavigationMixin",
+                "module": "utils/mixins/ListNavigationMixin.js"
+              }
+            },
+            {
+              "kind": "method",
+              "name": "shouldLoop",
+              "privacy": "private",
+              "inheritedFrom": {
+                "name": "ListNavigationMixin",
+                "module": "utils/mixins/ListNavigationMixin.js"
+              }
+            }
+          ],
+          "attributes": [
+            {
+              "name": "loop",
+              "type": {
+                "text": "'true' | 'false'"
+              },
+              "description": "Whether to loop navigation when reaching the end of the list.\nIf 'true', pressing the down arrow on the last item will focus the first item,\nand pressing the up arrow on the first item will focus the last item.\nIf 'false', navigation will stop at the first or last item.",
+              "default": "''",
+              "fieldName": "loop"
+            },
+            {
+              "name": "initial-focus",
+              "type": {
+                "text": "number"
+              },
+              "description": "The index of the item that should receive focus when the list is first rendered.\nIf the index is out of bounds, the first item (index 0) will receive focus.",
+              "default": "0",
+              "fieldName": "initialFocus"
+            }
+          ],
+          "mixins": [
+            {
+              "name": "ListNavigationMixin",
+              "module": "/src/utils/mixins/ListNavigationMixin"
+            },
+            {
+              "name": "CaptureDestroyEventForChildElement",
+              "module": "/src/utils/mixins/lifecycle/CaptureDestroyEventForChildElement"
+            }
+          ],
+          "superclass": {
+            "name": "Component",
+            "module": "/src/models"
+          },
+          "tagName": "mdc-list",
+          "jsDoc": "/**\n * mdc-list component is used to display a group of list items. It is used as a container to wrap other list items.\n *\n * To add a header to the list, use the `mdc-listheader` component and place it in the `list-header` slot.\n * `mdc-listitem` components can be placed in the default slot.\n *\n * @tagname mdc-list\n *\n * @slot default - This is a default/unnamed slot, where listitems can be placed.\n * @slot list-header - This slot is used to pass a header for the list, which can be a `mdc-listheader` component.\n *\n * @csspart container - The container slot around the list items\n */",
+          "customElement": true
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "default",
+          "declaration": {
+            "name": "List",
+            "module": "components/list/list.component.js"
+          }
+        }
+      ]
+    },
     {
       "kind": "javascript-module",
       "path": "components/linksimple/linksimple.component.js",
@@ -21996,231 +22257,6 @@
         }
       ]
     },
-    {
-      "kind": "javascript-module",
-      "path": "components/list/list.component.js",
-      "declarations": [
-        {
-          "kind": "class",
-          "description": "mdc-list component is used to display a group of list items. It is used as a container to wrap other list items.\n\nTo add a header to the list, use the `mdc-listheader` component and place it in the `list-header` slot.\n`mdc-listitem` components can be placed in the default slot.",
-          "name": "List",
-          "cssParts": [
-            {
-              "description": "The container slot around the list items",
-              "name": "container"
-            }
-          ],
-          "slots": [
-            {
-              "description": "This is a default/unnamed slot, where listitems can be placed.",
-              "name": "default"
-            },
-            {
-              "description": "This slot is used to pass a header for the list, which can be a `mdc-listheader` component.",
-              "name": "list-header"
-            }
-          ],
-          "members": [
-            {
-              "kind": "field",
-              "name": "loop",
-              "type": {
-                "text": "'true' | 'false'"
-              },
-              "privacy": "public",
-              "description": "Whether to loop navigation when reaching the end of the list.\nIf 'true', pressing the down arrow on the last item will focus the first item,\nand pressing the up arrow on the first item will focus the last item.\nIf 'false', navigation will stop at the first or last item.",
-              "default": "''",
-              "attribute": "loop",
-              "reflects": true
-            },
-            {
-              "kind": "field",
-              "name": "initialFocus",
-              "type": {
-                "text": "number"
-              },
-              "privacy": "public",
-              "description": "The index of the item that should receive focus when the list is first rendered.\nIf the index is out of bounds, the first item (index 0) will receive focus.",
-              "default": "0",
-              "attribute": "initial-focus",
-              "reflects": true
-            },
-            {
-              "kind": "field",
-              "name": "itemsStore",
-              "default": "new ElementStore<ListItem>(this, { isValidItem: this.isValidItem, })"
-            },
-            {
-              "kind": "method",
-              "name": "getCurrentIndex",
-              "privacy": "private",
-              "return": {
-                "type": {
-                  "text": ""
-                }
-              },
-              "parameters": [
-                {
-                  "name": "target",
-                  "type": {
-                    "text": "HTMLElement | null"
-                  },
-                  "description": "The target element that triggered the event."
-                }
-              ],
-              "description": "Retrieves the current index of the item that triggered the event.",
-              "inheritedFrom": {
-                "name": "ListNavigationMixin",
-                "module": "utils/mixins/ListNavigationMixin.js"
-              }
-            },
-            {
-              "kind": "method",
-              "name": "resetTabIndexes",
-              "privacy": "protected",
-              "parameters": [
-                {
-                  "name": "index",
-                  "type": {
-                    "text": "number"
-                  },
-                  "description": "The index of the currently focused item."
-                }
-              ],
-              "description": "Reset all tabindex to -1 and set the tabindex of the current item to 0",
-              "inheritedFrom": {
-                "name": "ListNavigationMixin",
-                "module": "utils/mixins/ListNavigationMixin.js"
-              }
-            },
-            {
-              "kind": "method",
-              "name": "resetTabIndexAndSetFocus",
-              "privacy": "protected",
-              "parameters": [
-                {
-                  "name": "newIndex",
-                  "type": {
-                    "text": "number"
-                  },
-                  "description": "The index of the new item to focus."
-                },
-                {
-                  "name": "oldIndex",
-                  "optional": true,
-                  "type": {
-                    "text": "number"
-                  },
-                  "description": "The index of the currently focused item."
-                },
-                {
-                  "name": "focusNewItem",
-                  "default": "true",
-                  "description": "Call focus() on the new item or not. It should be false during firstUpdate"
-                }
-              ],
-              "description": "Resets the tabindex of the currently focused item and sets focus to a new item.",
-              "return": {
-                "type": {
-                  "text": ""
-                }
-              },
-              "inheritedFrom": {
-                "name": "ListNavigationMixin",
-                "module": "utils/mixins/ListNavigationMixin.js"
-              }
-            },
-            {
-              "kind": "method",
-              "name": "resolveDirectionKey",
-              "privacy": "private",
-              "parameters": [
-                {
-                  "name": "key",
-                  "type": {
-                    "text": "string"
-                  },
-                  "description": "The key pressed by the user."
-                },
-                {
-                  "name": "isRtl",
-                  "type": {
-                    "text": "boolean"
-                  },
-                  "description": "A boolean indicating if the layout is right-to-left (RTL)."
-                }
-              ],
-              "description": "Resolves the key pressed by the user based on the direction of the layout.\nThis method is used to handle keyboard navigation in a right-to-left (RTL) layout.\nIt checks if the layout is RTL and adjusts the arrow keys accordingly.\nFor example, in RTL, the left arrow key behaves like the right arrow key and vice versa.",
-              "return": {
-                "type": {
-                  "text": ""
-                }
-              },
-              "inheritedFrom": {
-                "name": "ListNavigationMixin",
-                "module": "utils/mixins/ListNavigationMixin.js"
-              }
-            },
-            {
-              "kind": "method",
-              "name": "shouldLoop",
-              "privacy": "private",
-              "inheritedFrom": {
-                "name": "ListNavigationMixin",
-                "module": "utils/mixins/ListNavigationMixin.js"
-              }
-            }
-          ],
-          "attributes": [
-            {
-              "name": "loop",
-              "type": {
-                "text": "'true' | 'false'"
-              },
-              "description": "Whether to loop navigation when reaching the end of the list.\nIf 'true', pressing the down arrow on the last item will focus the first item,\nand pressing the up arrow on the first item will focus the last item.\nIf 'false', navigation will stop at the first or last item.",
-              "default": "''",
-              "fieldName": "loop"
-            },
-            {
-              "name": "initial-focus",
-              "type": {
-                "text": "number"
-              },
-              "description": "The index of the item that should receive focus when the list is first rendered.\nIf the index is out of bounds, the first item (index 0) will receive focus.",
-              "default": "0",
-              "fieldName": "initialFocus"
-            }
-          ],
-          "mixins": [
-            {
-              "name": "ListNavigationMixin",
-              "module": "/src/utils/mixins/ListNavigationMixin"
-            },
-            {
-              "name": "CaptureDestroyEventForChildElement",
-              "module": "/src/utils/mixins/lifecycle/CaptureDestroyEventForChildElement"
-            }
-          ],
-          "superclass": {
-            "name": "Component",
-            "module": "/src/models"
-          },
-          "tagName": "mdc-list",
-          "jsDoc": "/**\n * mdc-list component is used to display a group of list items. It is used as a container to wrap other list items.\n *\n * To add a header to the list, use the `mdc-listheader` component and place it in the `list-header` slot.\n * `mdc-listitem` components can be placed in the default slot.\n *\n * @tagname mdc-list\n *\n * @slot default - This is a default/unnamed slot, where listitems can be placed.\n * @slot list-header - This slot is used to pass a header for the list, which can be a `mdc-listheader` component.\n *\n * @csspart container - The container slot around the list items\n */",
-          "customElement": true
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "default",
-          "declaration": {
-            "name": "List",
-            "module": "components/list/list.component.js"
-          }
-        }
-      ]
-    },
     {
       "kind": "javascript-module",
       "path": "components/listbox/listbox.component.js",
@@ -31230,6 +31266,14 @@
                 "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
               }
             },
+            {
+              "description": "Color for the required indicator text.",
+              "name": "--mdc-required-indicator-color",
+              "inheritedFrom": {
+                "name": "FormfieldWrapper",
+                "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
+              }
+            },
             {
               "description": "Text color for the input field",
               "name": "--mdc-input-text-color",
@@ -32632,7 +32676,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 * @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 * @csspart input-container - The container that wraps the input field, leading icon, prefix text, and trailing button.\n * @csspart input-section - The container that wraps the input field and prefix text.\n * @csspart input-text - The input field element.\n * @csspart trailing-button - The trailing button element.\n * @csspart label - The label element.\n * @csspart helper-text - The helper/validation text element.\n * @csspart helper-icon - The helper/validation icon element.\n * @csspart toggletip - The toggletip icon button element.\n * @csspart toggletip-text - The toggletip text element.\n *\n * @cssproperty --mdc-label-font-size - Font size for the label text.\n * @cssproperty --mdc-label-font-weight - Font weight for the label text.\n * @cssproperty --mdc-label-line-height - Line height for the label text.\n * @cssproperty --mdc-label-color - Color for the label text.\n * @cssproperty --mdc-help-text-font-size - Font size for the help text.\n * @cssproperty --mdc-help-text-font-weight - Font weight for the help text.\n * @cssproperty --mdc-help-text-line-height - Line height for the help text.\n * @cssproperty --mdc-help-text-color - Color for the help text.\n * @cssproperty --mdc-input-text-color - Text color for the input field\n * @cssproperty --mdc-input-border-color - Border color for the input container\n * @cssproperty --mdc-input-background-color - Background color for the input field\n * @cssproperty --mdc-input-selection-text-color - Text color for the selected text\n * @cssproperty --mdc-input-selection-background-color - Background color for the selected text\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 * @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 * @csspart input-container - The container that wraps the input field, leading icon, prefix text, and trailing button.\n * @csspart input-section - The container that wraps the input field and prefix text.\n * @csspart input-text - The input field element.\n * @csspart trailing-button - The trailing button element.\n * @csspart label - The label element.\n * @csspart helper-text - The helper/validation text element.\n * @csspart helper-icon - The helper/validation icon element.\n * @csspart toggletip - The toggletip icon button element.\n * @csspart toggletip-text - The toggletip text element.\n *\n * @cssproperty --mdc-label-font-size - Font size for the label text.\n * @cssproperty --mdc-label-font-weight - Font weight for the label text.\n * @cssproperty --mdc-label-line-height - Line height for the label text.\n * @cssproperty --mdc-label-color - Color for the label text.\n * @cssproperty --mdc-help-text-font-size - Font size for the help text.\n * @cssproperty --mdc-help-text-font-weight - Font weight for the help text.\n * @cssproperty --mdc-help-text-line-height - Line height for the help text.\n * @cssproperty --mdc-help-text-color - Color for the help text.\n * @cssproperty --mdc-required-indicator-color - Color for the required indicator text.\n * @cssproperty --mdc-input-text-color - Text color for the input field\n * @cssproperty --mdc-input-border-color - Border color for the input container\n * @cssproperty --mdc-input-background-color - Background color for the input field\n * @cssproperty --mdc-input-selection-text-color - Text color for the selected text\n * @cssproperty --mdc-input-selection-background-color - Background color for the selected text\n *\n */",
           "customElement": true
         }
       ],
@@ -34531,6 +34575,14 @@
                 "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
               }
             },
+            {
+              "description": "Color for the required indicator text.",
+              "name": "--mdc-required-indicator-color",
+              "inheritedFrom": {
+                "name": "FormfieldWrapper",
+                "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
+              }
+            },
             {
               "description": "Background color of the remaining progressbar portion.",
               "name": "--mdc-progressbar-background-color"
@@ -35130,7 +35182,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 * @slot label - Slot for the label element. If not provided, the `label` property will be used to render the label.\n * @slot help-icon - Slot for the helper/validation icon. If not provided, the icon will be rendered based on the `helpTextType` property.\n *\n * @csspart label - The label element.\n * @csspart label-text - The container for the label and required indicator elements.\n * @csspart help-text - The helper/validation text element.\n * @csspart help-text-container - The container for the helper/validation icon and text elements.\n *\n * @cssproperty --mdc-label-font-size - Font size for the label text.\n * @cssproperty --mdc-label-font-weight - Font weight for the label text.\n * @cssproperty --mdc-label-line-height - Line height for the label text.\n * @cssproperty --mdc-label-color - Color for the label text.\n * @cssproperty --mdc-help-text-font-size - Font size for the help text.\n * @cssproperty --mdc-help-text-font-weight - Font weight for the help text.\n * @cssproperty --mdc-help-text-line-height - Line height for the help text.\n * @cssproperty --mdc-help-text-color - Color for the help text.\n * @cssproperty --mdc-progressbar-background-color - Background color of the remaining progressbar portion.\n * @cssproperty --mdc-progressbar-progress-background-color - Background color of the elapsed progressbar portion.\n * @cssproperty --mdc-progressbar-height - The height of the progressbar.\n * @cssproperty --mdc-progressbar-border-radius - The border radius of the progressbar.\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 * @slot label - Slot for the label element. If not provided, the `label` property will be used to render the label.\n * @slot help-icon - Slot for the helper/validation icon. If not provided, the icon will be rendered based on the `helpTextType` property.\n *\n * @csspart label - The label element.\n * @csspart label-text - The container for the label and required indicator elements.\n * @csspart help-text - The helper/validation text element.\n * @csspart help-text-container - The container for the helper/validation icon and text elements.\n *\n * @cssproperty --mdc-label-font-size - Font size for the label text.\n * @cssproperty --mdc-label-font-weight - Font weight for the label text.\n * @cssproperty --mdc-label-line-height - Line height for the label text.\n * @cssproperty --mdc-label-color - Color for the label text.\n * @cssproperty --mdc-help-text-font-size - Font size for the help text.\n * @cssproperty --mdc-help-text-font-weight - Font weight for the help text.\n * @cssproperty --mdc-help-text-line-height - Line height for the help text.\n * @cssproperty --mdc-help-text-color - Color for the help text.\n * @cssproperty --mdc-required-indicator-color - Color for the required indicator text.\n * @cssproperty --mdc-progressbar-background-color - Background color of the remaining progressbar portion.\n * @cssproperty --mdc-progressbar-progress-background-color - Background color of the elapsed progressbar portion.\n * @cssproperty --mdc-progressbar-height - The height of the progressbar.\n * @cssproperty --mdc-progressbar-border-radius - The border radius of the progressbar.\n */",
           "customElement": true
         }
       ],
@@ -35238,6 +35290,14 @@
                 "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
               }
             },
+            {
+              "description": "Color for the required indicator text.",
+              "name": "--mdc-required-indicator-color",
+              "inheritedFrom": {
+                "name": "FormfieldWrapper",
+                "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
+              }
+            },
             {
               "description": "Background color of the remaining progressbar portion.",
               "name": "--mdc-progressbar-background-color",
@@ -35951,36 +36011,24 @@
           "name": "Radio",
           "cssProperties": [
             {
-              "description": "color of the label when disabled",
-              "name": "--mdc-radio-text-disabled-color"
-            },
-            {
-              "description": "color of the radio button when inactive and hovered",
-              "name": "--mdc-radio-control-inactive-hover"
-            },
-            {
-              "description": "color of the radio button when inactive and pressed",
-              "name": "--mdc-radio-control-inactive-pressed-color"
-            },
-            {
-              "description": "color of the radio button when active and hovered",
-              "name": "--mdc-radio-control-active-hover-color"
+              "description": "size of the inner circle",
+              "name": "--mdc-radio-inner-circle-size"
             },
             {
-              "description": "color of the radio button when active and pressed",
-              "name": "--mdc-radio-control-active-pressed-color"
+              "description": "size of the outer circle",
+              "name": "--mdc-radio-outer-circle-size"
             },
             {
-              "description": "color of the radio button when disabled",
-              "name": "--mdc-radio-disabled-border-color"
+              "description": "background color of the inner circle",
+              "name": "--mdc-radio-inner-circle-background-color"
             },
             {
-              "description": "color of the radio button when active and disabled",
-              "name": "--mdc-radio-control-active-disabled-background"
+              "description": "border color of the outer circle",
+              "name": "--mdc-radio-outer-circle-border-color"
             },
             {
-              "description": "color of the radio button when inactive and disabled",
-              "name": "--mdc-radio-control-inactive-disabled-background"
+              "description": "background color of the outer circle",
+              "name": "--mdc-radio-outer-circle-background-color"
             },
             {
               "description": "Font size for the label text.",
@@ -36045,6 +36093,14 @@
                 "name": "FormfieldWrapper",
                 "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
               }
+            },
+            {
+              "description": "Color for the required indicator text.",
+              "name": "--mdc-required-indicator-color",
+              "inheritedFrom": {
+                "name": "FormfieldWrapper",
+                "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
+              }
             }
           ],
           "cssParts": [
@@ -36849,7 +36905,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 * @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 */",
+          "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-inner-circle-size - size of the inner circle\n * @cssproperty --mdc-radio-outer-circle-size - size of the outer circle\n * @cssproperty --mdc-radio-inner-circle-background-color - background color of the inner circle\n * @cssproperty --mdc-radio-outer-circle-border-color - border color of the outer circle\n * @cssproperty --mdc-radio-outer-circle-background-color - background color of the outer circle\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": [
             {
@@ -36974,6 +37030,14 @@
                 "name": "FormfieldWrapper",
                 "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
               }
+            },
+            {
+              "description": "Color for the required indicator text.",
+              "name": "--mdc-required-indicator-color",
+              "inheritedFrom": {
+                "name": "FormfieldWrapper",
+                "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
+              }
             }
           ],
           "members": [
@@ -37747,12 +37811,12 @@
     },
     {
       "kind": "javascript-module",
-      "path": "components/searchfield/searchfield.component.js",
+      "path": "components/select/select.component.js",
       "declarations": [
         {
           "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",
+          "description": "The mdc-select component is a dropdown selection control that allows users to pick an option from a predefined list.\nIt is designed to work with `mdc-option` for individual options and `mdc-optgroup` for grouping related options.\n\nEvery mdc-option should have a `value` attribute set to ensure proper form submission.\n\nTo set a default option, use the `selected` attribute on the `mdc-option` element.\nYou 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\nIf you need to use `mdc-tooltip` with any options, make sure to place the tooltip component outside the `mdc-select` element.",
+          "name": "Select",
           "cssProperties": [
             {
               "description": "Font size for the label text.",
@@ -37819,52 +37883,36 @@
               }
             },
             {
-              "description": "Text color for the input field",
-              "name": "--mdc-input-text-color",
+              "description": "Color for the required indicator text.",
+              "name": "--mdc-required-indicator-color",
               "inheritedFrom": {
-                "name": "Input",
-                "module": "src/components/input/input.component.ts"
+                "name": "FormfieldWrapper",
+                "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
               }
             },
             {
-              "description": "Border color for the input container",
-              "name": "--mdc-input-border-color",
-              "inheritedFrom": {
-                "name": "Input",
-                "module": "src/components/input/input.component.ts"
-              }
+              "description": "The background color of the combobox of select.",
+              "name": "--mdc-select-background-color"
             },
             {
-              "description": "Background color for the input field",
-              "name": "--mdc-input-background-color",
-              "inheritedFrom": {
-                "name": "Input",
-                "module": "src/components/input/input.component.ts"
-              }
+              "description": "The text color of the select.",
+              "name": "--mdc-select-text-color"
             },
             {
-              "description": "Text color for the help text",
-              "name": "--mdc-input-support-text-color",
-              "inheritedFrom": {
-                "name": "Input",
-                "module": "src/components/input/input.component.ts"
-              }
+              "description": "The border color of the select.",
+              "name": "--mdc-select-border-color"
             },
             {
-              "description": "Text color for the selected text",
-              "name": "--mdc-input-selection-text-color",
-              "inheritedFrom": {
-                "name": "Input",
-                "module": "src/components/input/input.component.ts"
-              }
+              "description": "The width of the select.",
+              "name": "--mdc-select-width"
             },
             {
-              "description": "Background color for the selected text",
-              "name": "--mdc-input-selection-background-color",
-              "inheritedFrom": {
-                "name": "Input",
-                "module": "src/components/input/input.component.ts"
-              }
+              "description": "The height of the listbox inside the select.",
+              "name": "--mdc-select-listbox-height"
+            },
+            {
+              "description": "The width of the listbox inside the select (default: `--mdc-select-width`).",
+              "name": "--mdc-select-listbox-width"
             }
           ],
           "cssParts": [
@@ -37931,60 +37979,12 @@
                 "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 prefix text element that is displayed before the input field.",
-              "name": "prefix-text",
-              "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"
-              }
             }
           ],
           "slots": [
             {
-              "description": "Slot for input chips",
-              "name": "filters"
+              "description": "This is a default/unnamed slot for Selectlistbox including options and/or option group.",
+              "name": "default"
             },
             {
               "description": "Slot for the label element. If not provided, the `label` property will be used to render the label.",
@@ -38017,81 +38017,337 @@
                 "name": "FormfieldWrapper",
                 "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
               }
+            }
+          ],
+          "members": [
+            {
+              "kind": "field",
+              "name": "placeholder",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "The placeholder text which will be shown on the text if provided.",
+              "attribute": "placeholder"
             },
             {
-              "description": "Slot for the input element. If not provided, the input field will be rendered.",
-              "name": "input",
-              "inheritedFrom": {
-                "name": "Input",
-                "module": "src/components/input/input.component.ts"
-              }
+              "kind": "field",
+              "name": "placement",
+              "type": {
+                "text": "Placement"
+              },
+              "description": "The placement of the popover within Select component.\nThis defines the position of the popover relative to the select input field.\n\nPossible values:\n - 'top-start'\n - 'bottom-start'",
+              "default": "'bottom-start'",
+              "attribute": "placement",
+              "reflects": true
             },
             {
-              "description": "Slot for the leading icon before the input field. If not provided, the `leadingIcon` property will be used to render the leading icon.",
-              "name": "input-leading-icon",
-              "inheritedFrom": {
-                "name": "Input",
-                "module": "src/components/input/input.component.ts"
-              }
+              "kind": "field",
+              "name": "boundary",
+              "type": {
+                "text": "'clippingAncestors' | string"
+              },
+              "description": "This describes the clipping element(s) or area that overflow of the used popover will be checked relative to.\nThe default is 'clippingAncestors', which are the overflow ancestors which will cause the\nelement to be clipped.\n\nPossible values:\n - 'clippingAncestors'\n - any css selector",
+              "default": "'clippingAncestors'",
+              "attribute": "boundary",
+              "reflects": true
             },
             {
-              "description": "Slot for the prefix text before the input field. If not provided, the `prefixText` property will be used to render the prefix text.",
-              "name": "input-prefix-text",
-              "inheritedFrom": {
-                "name": "Input",
-                "module": "src/components/input/input.component.ts"
-              }
+              "kind": "field",
+              "name": "strategy",
+              "type": {
+                "text": "PopoverStrategy"
+              },
+              "description": "The strategy of the popover within Select.\nThis determines how the popover is positioned in the DOM.\n\nIn case `boundary` is set to something other than 'clippingAncestors',\nit might be necessary to set the `strategy` to 'fixed' to ensure that the popover\nis not getting clipped by scrollable containers enclosing the select.",
+              "default": "absolute",
+              "attribute": "strategy",
+              "reflects": true
             },
             {
-              "description": "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.",
-              "name": "trailing-button",
-              "inheritedFrom": {
-                "name": "Input",
-                "module": "src/components/input/input.component.ts"
-              }
-            }
-          ],
-          "members": [
+              "kind": "field",
+              "name": "popoverZIndex",
+              "type": {
+                "text": "number"
+              },
+              "description": "The z-index of the popover within Select.\n\nOverride this to make sure this stays on top of other components.",
+              "default": "1000",
+              "attribute": "popover-z-index",
+              "reflects": true
+            },
             {
               "kind": "field",
-              "name": "inputChips",
+              "name": "backdropAppendTo",
               "type": {
-                "text": "Array<HTMLElement> | undefined"
-              }
+                "text": "string | undefined"
+              },
+              "description": "ID of the element where the backdrop will be appended to.\nThis is useful to ensure that the backdrop is appended to the correct element in the DOM.\nIf not set, the backdrop will be appended to the parent element of the select.",
+              "attribute": "backdrop-append-to",
+              "reflects": true
             },
             {
               "kind": "method",
-              "name": "handleKeyDown",
-              "privacy": "protected",
+              "name": "handleOptionsClick",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "event",
+                  "type": {
+                    "text": "MouseEvent"
+                  },
+                  "description": "The event which triggered this function."
+                }
+              ],
+              "description": "A private method which is called when an option is clicked.\nIt sets the selected option, removes selected from other options, updates the tabindex for all options,\ncloses the popover, and fires the change and input events."
+            },
+            {
+              "kind": "method",
+              "name": "setSelectedOption",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "option",
+                  "type": {
+                    "text": "Option | null"
+                  },
+                  "description": "The option element in DOM which gets selected."
+                }
+              ],
+              "description": "Sets the selected option in the component state and updates the input element's value.\nThis method ensures that only the selected option is marked as selected in the DOM,\nand updates the tabindex for all options accordingly.\nIt also updates the validity of the input element based on the selected option.\nThis method is called when an option is selected."
+            },
+            {
+              "kind": "method",
+              "name": "updateSelectedInChildOptions",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "selectedOption",
+                  "type": {
+                    "text": "Option | null"
+                  },
+                  "description": "The option which gets selected"
+                }
+              ],
+              "description": "Sets selected attribute on the selected option and removes it from all options"
+            },
+            {
+              "kind": "method",
+              "name": "fireEvents",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "description": "A private method which is called to fire the change and input events.\nIt dispatches the input and change events with the selected option's value and label."
+            },
+            {
+              "kind": "method",
+              "name": "dispatchChange",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "option",
+                  "type": {
+                    "text": "Option"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "dispatchInput",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "option",
+                  "type": {
+                    "text": "Option"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "handleClickCombobox",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "event",
+                  "type": {
+                    "text": "MouseEvent"
+                  },
+                  "description": "The mouse event which triggered this function."
+                }
+              ],
+              "description": "Handles the click event on the visual combobox.\nIf the select is disabled, soft-disabled or readonly, it does nothing.\nIf the popover is already open, it closes it.\nIf it is closed, it opens it."
+            },
+            {
+              "kind": "method",
+              "name": "handleKeydownCombobox",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
               "parameters": [
                 {
                   "name": "event",
                   "type": {
                     "text": "KeyboardEvent"
                   },
-                  "description": "Keyboard event"
+                  "description": "The keyboard event."
                 }
               ],
-              "description": "Handles the keydown event of the search field.\nIf the key pressed is 'Enter', it submits the form.\nIf the key pressed is 'Escape', it clears the input text.",
+              "description": "Handles the keydown event on the select element when the popover is closed.\nThe options are as follows:\n- ARROW_DOWN, ARROW_UP, SPACE: Opens the popover and prevents the default scrolling behavior.\n- ENTER: Opens the popover, prevents default scrolling, and submits the form if the popover is closed.\n- HOME: Opens the popover and sets focus and tabindex on the first option.\n- END: Opens the popover and sets focus and tabindex on the last option."
+            },
+            {
+              "kind": "method",
+              "name": "getCurrentIndex",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": ""
+                }
+              },
+              "parameters": [
+                {
+                  "name": "target",
+                  "type": {
+                    "text": "HTMLElement | null"
+                  },
+                  "description": "The target element that triggered the event."
+                }
+              ],
+              "description": "Retrieves the current index of the item that triggered the event.",
               "inheritedFrom": {
-                "name": "Input",
-                "module": "components/input/input.component.js"
+                "name": "ListNavigationMixin",
+                "module": "utils/mixins/ListNavigationMixin.js"
               }
             },
             {
               "kind": "method",
-              "name": "renderInputChips",
-              "privacy": "private",
-              "description": "This method is used to render the input chips inside filters slot.\nIt will remove any elements that are not input chips."
+              "name": "resetTabIndexes",
+              "privacy": "protected",
+              "parameters": [
+                {
+                  "name": "index",
+                  "type": {
+                    "text": "number"
+                  },
+                  "description": "The index of the currently focused item."
+                }
+              ],
+              "description": "Reset all tabindex to -1 and set the tabindex of the current item to 0",
+              "inheritedFrom": {
+                "name": "ListNavigationMixin",
+                "module": "utils/mixins/ListNavigationMixin.js"
+              }
             },
             {
               "kind": "method",
-              "name": "clearInputText",
+              "name": "resetTabIndexAndSetFocus",
               "privacy": "protected",
-              "description": "Clears the input field.",
+              "parameters": [
+                {
+                  "name": "newIndex",
+                  "type": {
+                    "text": "number"
+                  },
+                  "description": "The index of the new item to focus."
+                },
+                {
+                  "name": "oldIndex",
+                  "optional": true,
+                  "type": {
+                    "text": "number"
+                  },
+                  "description": "The index of the currently focused item."
+                },
+                {
+                  "name": "focusNewItem",
+                  "default": "true",
+                  "description": "Call focus() on the new item or not. It should be false during firstUpdate"
+                }
+              ],
+              "description": "Resets the tabindex of the currently focused item and sets focus to a new item.",
+              "return": {
+                "type": {
+                  "text": ""
+                }
+              },
               "inheritedFrom": {
-                "name": "Input",
-                "module": "components/input/input.component.js"
+                "name": "ListNavigationMixin",
+                "module": "utils/mixins/ListNavigationMixin.js"
+              }
+            },
+            {
+              "kind": "method",
+              "name": "resolveDirectionKey",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "key",
+                  "type": {
+                    "text": "string"
+                  },
+                  "description": "The key pressed by the user."
+                },
+                {
+                  "name": "isRtl",
+                  "type": {
+                    "text": "boolean"
+                  },
+                  "description": "A boolean indicating if the layout is right-to-left (RTL)."
+                }
+              ],
+              "description": "Resolves the key pressed by the user based on the direction of the layout.\nThis method is used to handle keyboard navigation in a right-to-left (RTL) layout.\nIt checks if the layout is RTL and adjusts the arrow keys accordingly.\nFor example, in RTL, the left arrow key behaves like the right arrow key and vice versa.",
+              "return": {
+                "type": {
+                  "text": ""
+                }
+              },
+              "inheritedFrom": {
+                "name": "ListNavigationMixin",
+                "module": "utils/mixins/ListNavigationMixin.js"
+              }
+            },
+            {
+              "kind": "method",
+              "name": "shouldLoop",
+              "privacy": "private",
+              "inheritedFrom": {
+                "name": "ListNavigationMixin",
+                "module": "utils/mixins/ListNavigationMixin.js"
               }
             },
             {
@@ -38226,367 +38482,67 @@
             },
             {
               "kind": "field",
-              "name": "placeholder",
+              "name": "disabled",
               "type": {
-                "text": "string"
+                "text": "boolean | undefined"
               },
-              "default": "''",
-              "description": "The placeholder text that is displayed when the input field is empty.",
-              "attribute": "placeholder",
+              "description": "Indicates whether the component is disabled.\nWhen the component is disabled for user interaction; it is not focusable or clickable.",
+              "default": "undefined",
+              "attribute": "disabled",
+              "reflects": true,
               "inheritedFrom": {
-                "name": "Input",
-                "module": "components/input/input.component.js"
+                "name": "FormfieldWrapper",
+                "module": "components/formfieldwrapper/formfieldwrapper.component.js"
               }
             },
             {
               "kind": "field",
-              "name": "prefixText",
+              "name": "label",
               "type": {
                 "text": "string | undefined"
               },
-              "description": "The prefix text that is displayed before the input field. It has a max length of 10 characters.\nWhen the prefix text is set, make sure to set the 'data-aria-label'\nattribute with the appropriate value for accessibility.",
-              "attribute": "prefix-text",
+              "description": "The label of the input field. It is linked to the input field using the `for` attribute.",
+              "attribute": "label",
+              "reflects": true,
               "inheritedFrom": {
-                "name": "Input",
-                "module": "components/input/input.component.js"
+                "name": "FormfieldWrapper",
+                "module": "components/formfieldwrapper/formfieldwrapper.component.js"
               }
             },
             {
               "kind": "field",
-              "name": "leadingIcon",
+              "name": "required",
               "type": {
-                "text": "IconNames | undefined"
+                "text": "boolean"
               },
-              "description": "The leading icon that is displayed before the input field.",
-              "attribute": "leading-icon",
+              "default": "false",
+              "description": "The required attribute to indicate that the input field is required.\nIt is used to append a required indicator (*) to the label.",
+              "attribute": "required",
+              "reflects": true,
               "inheritedFrom": {
-                "name": "Input",
-                "module": "components/input/input.component.js"
+                "name": "FormfieldWrapper",
+                "module": "components/formfieldwrapper/formfieldwrapper.component.js"
               }
             },
             {
               "kind": "field",
-              "name": "trailingButton",
+              "name": "helpTextType",
               "type": {
-                "text": "boolean"
+                "text": "ValidationType"
               },
-              "default": "false",
-              "description": "The trailing button when set to true, shows a clear button that clears the input field.",
-              "attribute": "trailing-button",
+              "description": "The type of help text. It can be 'default', 'error', 'warning', 'success', 'priority'.",
+              "attribute": "help-text-type",
+              "reflects": true,
               "inheritedFrom": {
-                "name": "Input",
-                "module": "components/input/input.component.js"
+                "name": "FormfieldWrapper",
+                "module": "components/formfieldwrapper/formfieldwrapper.component.js"
               }
             },
             {
               "kind": "field",
-              "name": "maxlength",
+              "name": "helpText",
               "type": {
-                "text": "number | undefined"
-              },
-              "description": "The maximum number of characters that the input field can accept.",
-              "attribute": "maxlength",
-              "inheritedFrom": {
-                "name": "Input",
-                "module": "components/input/input.component.js"
-              }
-            },
-            {
-              "kind": "field",
-              "name": "minlength",
-              "type": {
-                "text": "number | undefined"
-              },
-              "description": "The minimum number of characters that the input field can accept.",
-              "attribute": "minlength",
-              "inheritedFrom": {
-                "name": "Input",
-                "module": "components/input/input.component.js"
-              }
-            },
-            {
-              "kind": "field",
-              "name": "autocapitalize",
-              "type": {
-                "text": "AutoCapitalizeType"
-              },
-              "description": "The autocapitalize attribute of the input field.",
-              "default": "'off'",
-              "attribute": "autocapitalize",
-              "inheritedFrom": {
-                "name": "Input",
-                "module": "components/input/input.component.js"
-              }
-            },
-            {
-              "kind": "field",
-              "name": "autocomplete",
-              "type": {
-                "text": "AutoCompleteType"
-              },
-              "description": "The autocomplete attribute of the input field.",
-              "default": "'off'",
-              "attribute": "autocomplete",
-              "inheritedFrom": {
-                "name": "Input",
-                "module": "components/input/input.component.js"
-              }
-            },
-            {
-              "kind": "field",
-              "name": "dirname",
-              "type": {
-                "text": "string | undefined"
-              },
-              "description": "Specifies the name of the directionality of text for submission purposes (e.g., \"rtl\" for right-to-left).",
-              "attribute": "dirname",
-              "inheritedFrom": {
-                "name": "Input",
-                "module": "components/input/input.component.js"
-              }
-            },
-            {
-              "kind": "field",
-              "name": "pattern",
-              "type": {
-                "text": "string | undefined"
-              },
-              "description": "The pattern attribute of the input field.\nSpecifies a regular expression that the input value must match for validation purposes.",
-              "attribute": "pattern",
-              "inheritedFrom": {
-                "name": "Input",
-                "module": "components/input/input.component.js"
-              }
-            },
-            {
-              "kind": "field",
-              "name": "list",
-              "type": {
-                "text": "string | undefined"
-              },
-              "description": "The list attribute of the input field.\nIdentifies a list of pre-defined options to suggest to the user.",
-              "attribute": "list",
-              "inheritedFrom": {
-                "name": "Input",
-                "module": "components/input/input.component.js"
-              }
-            },
-            {
-              "kind": "field",
-              "name": "size",
-              "type": {
-                "text": "number | undefined | undefined"
-              },
-              "description": "The size attribute of the input field.\nSpecifies the width of the input field.",
-              "default": "undefined",
-              "attribute": "size",
-              "inheritedFrom": {
-                "name": "Input",
-                "module": "components/input/input.component.js"
-              }
-            },
-            {
-              "kind": "field",
-              "name": "clearAriaLabel",
-              "type": {
-                "text": "string"
-              },
-              "default": "''",
-              "description": "Aria label for the trailing button. If trailing button is set to true, this label is used for the clear button.",
-              "attribute": "clear-aria-label",
-              "inheritedFrom": {
-                "name": "Input",
-                "module": "components/input/input.component.js"
-              }
-            },
-            {
-              "kind": "method",
-              "name": "setInputValidity",
-              "privacy": "private",
-              "inheritedFrom": {
-                "name": "Input",
-                "module": "components/input/input.component.js"
-              }
-            },
-            {
-              "kind": "method",
-              "name": "updateValue",
-              "privacy": "private",
-              "description": "Updates the value of the input field.\nSets the form value.",
-              "return": {
-                "type": {
-                  "text": ""
-                }
-              },
-              "inheritedFrom": {
-                "name": "Input",
-                "module": "components/input/input.component.js"
-              }
-            },
-            {
-              "kind": "method",
-              "name": "onInput",
-              "privacy": "private",
-              "description": "Handles the input event of the input field.\nUpdates the value and sets the validity of the input field.",
-              "inheritedFrom": {
-                "name": "Input",
-                "module": "components/input/input.component.js"
-              }
-            },
-            {
-              "kind": "method",
-              "name": "onChange",
-              "privacy": "private",
-              "parameters": [
-                {
-                  "name": "event",
-                  "type": {
-                    "text": "Event"
-                  },
-                  "description": "Event which contains information about the value change."
-                }
-              ],
-              "description": "Handles the change event of the input field.\nUpdates the value and sets the validity of the input field.\n\nThe 'change' event does not bubble up through the shadow DOM as it was not composed.\nTherefore, we need to re-dispatch the same event to ensure it is propagated correctly.\nRead more: https://developer.mozilla.org/en-US/docs/Web/API/Event/composed",
-              "inheritedFrom": {
-                "name": "Input",
-                "module": "components/input/input.component.js"
-              }
-            },
-            {
-              "kind": "method",
-              "name": "renderLeadingIcon",
-              "privacy": "protected",
-              "description": "Renders the leading icon before the input field.\nIf the leading icon is not set, it will not be displayed.",
-              "return": {
-                "type": {
-                  "text": ""
-                }
-              },
-              "inheritedFrom": {
-                "name": "Input",
-                "module": "components/input/input.component.js"
-              }
-            },
-            {
-              "kind": "method",
-              "name": "renderPrefixText",
-              "privacy": "protected",
-              "description": "Renders the prefix text before the input field.\nIf the prefix text is more than 10 characters,\n- it will not be displayed.\n- the validation messsage will be displayed.\n\n Note: We are setting aria-hidden so that the screen reader does not read the prefix text.\n The consumers should set the appropriate aria-label for the input field using 'data-aria-label' attribute.",
-              "return": {
-                "type": {
-                  "text": ""
-                }
-              },
-              "inheritedFrom": {
-                "name": "Input",
-                "module": "components/input/input.component.js"
-              }
-            },
-            {
-              "kind": "method",
-              "name": "renderTrailingButton",
-              "privacy": "protected",
-              "parameters": [
-                {
-                  "name": "show",
-                  "default": "false"
-                }
-              ],
-              "description": "Renders the trailing button to clear the input field if the trailingButton is set to true.",
-              "return": {
-                "type": {
-                  "text": ""
-                }
-              },
-              "inheritedFrom": {
-                "name": "Input",
-                "module": "components/input/input.component.js"
-              }
-            },
-            {
-              "kind": "method",
-              "name": "renderInputElement",
-              "privacy": "protected",
-              "parameters": [
-                {
-                  "name": "type",
-                  "type": {
-                    "text": "InputType"
-                  }
-                },
-                {
-                  "name": "hidePlaceholder",
-                  "default": "false"
-                }
-              ],
-              "inheritedFrom": {
-                "name": "Input",
-                "module": "components/input/input.component.js"
-              }
-            },
-            {
-              "kind": "field",
-              "name": "disabled",
-              "type": {
-                "text": "boolean | undefined"
-              },
-              "description": "Indicates whether the component is disabled.\nWhen the component is disabled for user interaction; it is not focusable or clickable.",
-              "default": "undefined",
-              "attribute": "disabled",
-              "reflects": true,
-              "inheritedFrom": {
-                "name": "FormfieldWrapper",
-                "module": "components/formfieldwrapper/formfieldwrapper.component.js"
-              }
-            },
-            {
-              "kind": "field",
-              "name": "label",
-              "type": {
-                "text": "string | undefined"
-              },
-              "description": "The label of the input field. It is linked to the input field using the `for` attribute.",
-              "attribute": "label",
-              "reflects": true,
-              "inheritedFrom": {
-                "name": "FormfieldWrapper",
-                "module": "components/formfieldwrapper/formfieldwrapper.component.js"
-              }
-            },
-            {
-              "kind": "field",
-              "name": "required",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "The required attribute to indicate that the input field is required.\nIt is used to append a required indicator (*) to the label.",
-              "attribute": "required",
-              "reflects": true,
-              "inheritedFrom": {
-                "name": "FormfieldWrapper",
-                "module": "components/formfieldwrapper/formfieldwrapper.component.js"
-              }
-            },
-            {
-              "kind": "field",
-              "name": "helpTextType",
-              "type": {
-                "text": "ValidationType"
-              },
-              "description": "The type of help text. It can be 'default', 'error', 'warning', 'success', 'priority'.",
-              "attribute": "help-text-type",
-              "reflects": true,
-              "inheritedFrom": {
-                "name": "FormfieldWrapper",
-                "module": "components/formfieldwrapper/formfieldwrapper.component.js"
-              }
-            },
-            {
-              "kind": "field",
-              "name": "helpText",
-              "type": {
-                "text": "string | undefined"
+                "text": "string | undefined"
               },
               "description": "The help text that is displayed below the input field.",
               "attribute": "help-text",
@@ -38760,71 +38716,90 @@
           ],
           "events": [
             {
-              "description": "(React: onInput) This event is dispatched when the value of the input field changes (every press).",
+              "name": "change",
+              "type": {
+                "text": "CustomEvent"
+              },
+              "description": "(React: onChange) This event is dispatched when the select is changed.",
+              "reactName": "onChange"
+            },
+            {
               "name": "input",
-              "reactName": "onInput",
-              "inheritedFrom": {
-                "name": "Input",
-                "module": "src/components/input/input.component.ts"
-              }
+              "type": {
+                "text": "CustomEvent"
+              },
+              "description": "(React: onInput) This event is dispatched when the select is changed.",
+              "reactName": "onInput"
             },
             {
-              "description": "(React: onChange) This event is dispatched when the value of the input field changes (on blur).",
-              "name": "change",
-              "reactName": "onChange",
-              "inheritedFrom": {
-                "name": "Input",
-                "module": "src/components/input/input.component.ts"
-              }
+              "description": "(React: onClick) This event is dispatched when the select is clicked.",
+              "name": "click",
+              "reactName": "onClick"
             },
             {
-              "description": "(React: onFocus) This event is dispatched when the input receives focus.",
+              "description": "(React: onKeyDown) This event is dispatched when a key is pressed down on the select.",
+              "name": "keydown",
+              "reactName": "onKeyDown"
+            },
+            {
+              "description": "(React: onFocus) This event is dispatched when the select receives focus.",
               "name": "focus",
-              "reactName": "onFocus",
-              "inheritedFrom": {
-                "name": "Input",
-                "module": "src/components/input/input.component.ts"
-              }
+              "reactName": "onFocus"
+            }
+          ],
+          "attributes": [
+            {
+              "name": "placeholder",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "The placeholder text which will be shown on the text if provided.",
+              "fieldName": "placeholder"
             },
             {
-              "description": "(React: onBlur) This event is dispatched when the input loses focus.",
-              "name": "blur",
-              "reactName": "onBlur",
-              "inheritedFrom": {
-                "name": "Input",
-                "module": "src/components/input/input.component.ts"
-              }
+              "name": "placement",
+              "type": {
+                "text": "Placement"
+              },
+              "description": "The placement of the popover within Select component.\nThis defines the position of the popover relative to the select input field.\n\nPossible values:\n - 'top-start'\n - 'bottom-start'",
+              "default": "'bottom-start'",
+              "fieldName": "placement"
             },
             {
-              "name": "clear",
+              "name": "boundary",
               "type": {
-                "text": "CustomEvent"
+                "text": "'clippingAncestors' | string"
               },
-              "description": "(React: onClear) This event is dispatched when the input text is cleared.",
-              "reactName": "onClear",
-              "inheritedFrom": {
-                "name": "Input",
-                "module": "src/components/input/input.component.ts"
-              }
+              "description": "This describes the clipping element(s) or area that overflow of the used popover will be checked relative to.\nThe default is 'clippingAncestors', which are the overflow ancestors which will cause the\nelement to be clipped.\n\nPossible values:\n - 'clippingAncestors'\n - any css selector",
+              "default": "'clippingAncestors'",
+              "fieldName": "boundary"
             },
             {
+              "name": "strategy",
               "type": {
-                "text": "EventConstructor"
+                "text": "PopoverStrategy"
               },
-              "inheritedFrom": {
-                "name": "Input",
-                "module": "src/components/input/input.component.ts"
-              }
-            }
-          ],
-          "superclass": {
-            "name": "Input",
-            "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 * @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-label-font-size - Font size for the label text.\n * @cssproperty --mdc-label-font-weight - Font weight for the label text.\n * @cssproperty --mdc-label-line-height - Line height for the label text.\n * @cssproperty --mdc-label-color - Color for the label text.\n * @cssproperty --mdc-help-text-font-size - Font size for the help text.\n * @cssproperty --mdc-help-text-font-weight - Font weight for the help text.\n * @cssproperty --mdc-help-text-line-height - Line height for the help text.\n * @cssproperty --mdc-help-text-color - Color for the help text.\n * @cssproperty --mdc-input-text-color - Text color for the input field\n * @cssproperty --mdc-input-border-color - Border color for the input container\n * @cssproperty --mdc-input-background-color - Background color for the input field\n * @cssproperty --mdc-input-support-text-color - Text color for the help text\n * @cssproperty --mdc-input-selection-text-color - Text color for the selected text\n * @cssproperty --mdc-input-selection-background-color - Background color for the selected 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 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,
-          "attributes": [
+              "description": "The strategy of the popover within Select.\nThis determines how the popover is positioned in the DOM.\n\nIn case `boundary` is set to something other than 'clippingAncestors',\nit might be necessary to set the `strategy` to 'fixed' to ensure that the popover\nis not getting clipped by scrollable containers enclosing the select.",
+              "default": "absolute",
+              "fieldName": "strategy"
+            },
+            {
+              "name": "popover-z-index",
+              "type": {
+                "text": "number"
+              },
+              "description": "The z-index of the popover within Select.\n\nOverride this to make sure this stays on top of other components.",
+              "default": "1000",
+              "fieldName": "popoverZIndex"
+            },
+            {
+              "name": "backdrop-append-to",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "ID of the element where the backdrop will be appended to.\nThis is useful to ensure that the backdrop is appended to the correct element in the DOM.\nIf not set, the backdrop will be appended to the parent element of the select.",
+              "fieldName": "backdropAppendTo"
+            },
             {
               "name": "auto-focus-on-mount",
               "type": {
@@ -38890,260 +38865,98 @@
               }
             },
             {
-              "name": "placeholder",
+              "name": "disabled",
               "type": {
-                "text": "string"
+                "text": "boolean | undefined"
               },
-              "default": "''",
-              "description": "The placeholder text that is displayed when the input field is empty.",
-              "fieldName": "placeholder",
+              "description": "Indicates whether the component is disabled.\nWhen the component is disabled for user interaction; it is not focusable or clickable.",
+              "default": "undefined",
+              "fieldName": "disabled",
               "inheritedFrom": {
-                "name": "Input",
-                "module": "src/components/input/input.component.ts"
+                "name": "FormfieldWrapper",
+                "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
               }
             },
             {
-              "name": "prefix-text",
+              "name": "label",
               "type": {
                 "text": "string | undefined"
               },
-              "description": "The prefix text that is displayed before the input field. It has a max length of 10 characters.\nWhen the prefix text is set, make sure to set the 'data-aria-label'\nattribute with the appropriate value for accessibility.",
-              "fieldName": "prefixText",
+              "description": "The label of the input field. It is linked to the input field using the `for` attribute.",
+              "fieldName": "label",
               "inheritedFrom": {
-                "name": "Input",
-                "module": "src/components/input/input.component.ts"
+                "name": "FormfieldWrapper",
+                "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
               }
             },
             {
-              "name": "leading-icon",
+              "name": "required",
               "type": {
-                "text": "IconNames | undefined"
+                "text": "boolean"
               },
-              "description": "The leading icon that is displayed before the input field.",
-              "fieldName": "leadingIcon",
+              "default": "false",
+              "description": "The required attribute to indicate that the input field is required.\nIt is used to append a required indicator (*) to the label.",
+              "fieldName": "required",
               "inheritedFrom": {
-                "name": "Input",
-                "module": "src/components/input/input.component.ts"
+                "name": "FormfieldWrapper",
+                "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
               }
             },
             {
-              "name": "trailing-button",
+              "name": "help-text-type",
               "type": {
-                "text": "boolean"
+                "text": "ValidationType"
               },
-              "default": "false",
-              "description": "The trailing button when set to true, shows a clear button that clears the input field.",
-              "fieldName": "trailingButton",
+              "description": "The type of help text. It can be 'default', 'error', 'warning', 'success', 'priority'.",
+              "fieldName": "helpTextType",
               "inheritedFrom": {
-                "name": "Input",
-                "module": "src/components/input/input.component.ts"
+                "name": "FormfieldWrapper",
+                "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
               }
             },
             {
-              "name": "maxlength",
+              "name": "help-text",
               "type": {
-                "text": "number | undefined"
+                "text": "string | undefined"
               },
-              "description": "The maximum number of characters that the input field can accept.",
-              "fieldName": "maxlength",
+              "description": "The help text that is displayed below the input field.",
+              "fieldName": "helpText",
               "inheritedFrom": {
-                "name": "Input",
-                "module": "src/components/input/input.component.ts"
+                "name": "FormfieldWrapper",
+                "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
               }
             },
             {
-              "name": "minlength",
+              "name": "toggletip-text",
               "type": {
-                "text": "number | undefined"
+                "text": "string | undefined"
               },
-              "description": "The minimum number of characters that the input field can accept.",
-              "fieldName": "minlength",
+              "description": "The toggletip text that is displayed when the label is hovered.\nIt is used to provide additional information about the label.",
+              "fieldName": "toggletipText",
               "inheritedFrom": {
-                "name": "Input",
-                "module": "src/components/input/input.component.ts"
+                "name": "FormfieldWrapper",
+                "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
               }
             },
             {
-              "name": "autocapitalize",
+              "name": "toggletip-placement",
               "type": {
-                "text": "AutoCapitalizeType"
+                "text": "PopoverPlacement"
               },
-              "description": "The autocapitalize attribute of the input field.",
-              "default": "'off'",
-              "fieldName": "autocapitalize",
+              "description": "The placement of the toggletip that is displayed when the info icon is hovered.",
+              "default": "'top'",
+              "fieldName": "toggletipPlacement",
               "inheritedFrom": {
-                "name": "Input",
-                "module": "src/components/input/input.component.ts"
+                "name": "FormfieldWrapper",
+                "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
               }
             },
             {
-              "name": "autocomplete",
+              "name": "toggletip-strategy",
               "type": {
-                "text": "AutoCompleteType"
+                "text": "PopoverStrategy"
               },
-              "description": "The autocomplete attribute of the input field.",
-              "default": "'off'",
-              "fieldName": "autocomplete",
-              "inheritedFrom": {
-                "name": "Input",
-                "module": "src/components/input/input.component.ts"
-              }
-            },
-            {
-              "name": "dirname",
-              "type": {
-                "text": "string | undefined"
-              },
-              "description": "Specifies the name of the directionality of text for submission purposes (e.g., \"rtl\" for right-to-left).",
-              "fieldName": "dirname",
-              "inheritedFrom": {
-                "name": "Input",
-                "module": "src/components/input/input.component.ts"
-              }
-            },
-            {
-              "name": "pattern",
-              "type": {
-                "text": "string | undefined"
-              },
-              "description": "The pattern attribute of the input field.\nSpecifies a regular expression that the input value must match for validation purposes.",
-              "fieldName": "pattern",
-              "inheritedFrom": {
-                "name": "Input",
-                "module": "src/components/input/input.component.ts"
-              }
-            },
-            {
-              "name": "list",
-              "type": {
-                "text": "string | undefined"
-              },
-              "description": "The list attribute of the input field.\nIdentifies a list of pre-defined options to suggest to the user.",
-              "fieldName": "list",
-              "inheritedFrom": {
-                "name": "Input",
-                "module": "src/components/input/input.component.ts"
-              }
-            },
-            {
-              "name": "size",
-              "type": {
-                "text": "number | undefined | undefined"
-              },
-              "description": "The size attribute of the input field.\nSpecifies the width of the input field.",
-              "default": "undefined",
-              "fieldName": "size",
-              "inheritedFrom": {
-                "name": "Input",
-                "module": "src/components/input/input.component.ts"
-              }
-            },
-            {
-              "name": "clear-aria-label",
-              "type": {
-                "text": "string"
-              },
-              "default": "''",
-              "description": "Aria label for the trailing button. If trailing button is set to true, this label is used for the clear button.",
-              "fieldName": "clearAriaLabel",
-              "inheritedFrom": {
-                "name": "Input",
-                "module": "src/components/input/input.component.ts"
-              }
-            },
-            {
-              "name": "disabled",
-              "type": {
-                "text": "boolean | undefined"
-              },
-              "description": "Indicates whether the component is disabled.\nWhen the component is disabled for user interaction; it is not focusable or clickable.",
-              "default": "undefined",
-              "fieldName": "disabled",
-              "inheritedFrom": {
-                "name": "FormfieldWrapper",
-                "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
-              }
-            },
-            {
-              "name": "label",
-              "type": {
-                "text": "string | undefined"
-              },
-              "description": "The label of the input field. It is linked to the input field using the `for` attribute.",
-              "fieldName": "label",
-              "inheritedFrom": {
-                "name": "FormfieldWrapper",
-                "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
-              }
-            },
-            {
-              "name": "required",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "The required attribute to indicate that the input field is required.\nIt is used to append a required indicator (*) to the label.",
-              "fieldName": "required",
-              "inheritedFrom": {
-                "name": "FormfieldWrapper",
-                "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
-              }
-            },
-            {
-              "name": "help-text-type",
-              "type": {
-                "text": "ValidationType"
-              },
-              "description": "The type of help text. It can be 'default', 'error', 'warning', 'success', 'priority'.",
-              "fieldName": "helpTextType",
-              "inheritedFrom": {
-                "name": "FormfieldWrapper",
-                "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
-              }
-            },
-            {
-              "name": "help-text",
-              "type": {
-                "text": "string | undefined"
-              },
-              "description": "The help text that is displayed below the input field.",
-              "fieldName": "helpText",
-              "inheritedFrom": {
-                "name": "FormfieldWrapper",
-                "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
-              }
-            },
-            {
-              "name": "toggletip-text",
-              "type": {
-                "text": "string | undefined"
-              },
-              "description": "The toggletip text that is displayed when the label is hovered.\nIt is used to provide additional information about the label.",
-              "fieldName": "toggletipText",
-              "inheritedFrom": {
-                "name": "FormfieldWrapper",
-                "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
-              }
-            },
-            {
-              "name": "toggletip-placement",
-              "type": {
-                "text": "PopoverPlacement"
-              },
-              "description": "The placement of the toggletip that is displayed when the info icon is hovered.",
-              "default": "'top'",
-              "fieldName": "toggletipPlacement",
-              "inheritedFrom": {
-                "name": "FormfieldWrapper",
-                "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
-              }
-            },
-            {
-              "name": "toggletip-strategy",
-              "type": {
-                "text": "PopoverStrategy"
-              },
-              "fieldName": "toggletipStrategy",
+              "fieldName": "toggletipStrategy",
               "inheritedFrom": {
                 "name": "FormfieldWrapper",
                 "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
@@ -39187,7 +39000,36 @@
                 "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
               }
             }
-          ]
+          ],
+          "mixins": [
+            {
+              "name": "ListNavigationMixin",
+              "module": "/src/utils/mixins/ListNavigationMixin"
+            },
+            {
+              "name": "CaptureDestroyEventForChildElement",
+              "module": "/src/utils/mixins/lifecycle/CaptureDestroyEventForChildElement"
+            },
+            {
+              "name": "AutoFocusOnMountMixin",
+              "module": "/src/utils/mixins/AutoFocusOnMountMixin"
+            },
+            {
+              "name": "FormInternalsMixin",
+              "module": "/src/utils/mixins/FormInternalsMixin"
+            },
+            {
+              "name": "DataAriaLabelMixin",
+              "module": "/src/utils/mixins/DataAriaLabelMixin"
+            }
+          ],
+          "superclass": {
+            "name": "FormfieldWrapper",
+            "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 * @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 *\n * @cssproperty --mdc-label-font-size - Font size for the label text.\n * @cssproperty --mdc-label-font-weight - Font weight for the label text.\n * @cssproperty --mdc-label-line-height - Line height for the label text.\n * @cssproperty --mdc-label-color - Color for the label text.\n * @cssproperty --mdc-help-text-font-size - Font size for the help text.\n * @cssproperty --mdc-help-text-font-weight - Font weight for the help text.\n * @cssproperty --mdc-help-text-line-height - Line height for the help text.\n * @cssproperty --mdc-help-text-color - Color for the help text.\n * @cssproperty --mdc-required-indicator-color - Color for the required indicator text.\n * @cssproperty --mdc-select-background-color - The background color of the combobox of select.\n * @cssproperty --mdc-select-text-color - The text color of the select.\n * @cssproperty --mdc-select-border-color - The border color of the select.\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 */",
+          "customElement": true
         }
       ],
       "exports": [
@@ -39195,20 +39037,20 @@
           "kind": "js",
           "name": "default",
           "declaration": {
-            "name": "Searchfield",
-            "module": "components/searchfield/searchfield.component.js"
+            "name": "Select",
+            "module": "components/select/select.component.js"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "components/select/select.component.js",
+      "path": "components/searchfield/searchfield.component.js",
       "declarations": [
         {
           "kind": "class",
-          "description": "The mdc-select component is a dropdown selection control that allows users to pick an option from a predefined list.\nIt is designed to work with `mdc-option` for individual options and `mdc-optgroup` for grouping related options.\n\nEvery mdc-option should have a `value` attribute set to ensure proper form submission.\n\nTo set a default option, use the `selected` attribute on the `mdc-option` element.\nYou 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\nIf you need to use `mdc-tooltip` with any options, make sure to place the tooltip component outside the `mdc-select` element.",
-          "name": "Select",
+          "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",
           "cssProperties": [
             {
               "description": "Font size for the label text.",
@@ -39275,28 +39117,60 @@
               }
             },
             {
-              "description": "The background color of the combobox of select.",
-              "name": "--mdc-select-background-color"
+              "description": "Color for the required indicator text.",
+              "name": "--mdc-required-indicator-color",
+              "inheritedFrom": {
+                "name": "FormfieldWrapper",
+                "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
+              }
             },
             {
-              "description": "The text color of the select.",
-              "name": "--mdc-select-text-color"
+              "description": "Text color for the input field",
+              "name": "--mdc-input-text-color",
+              "inheritedFrom": {
+                "name": "Input",
+                "module": "src/components/input/input.component.ts"
+              }
             },
             {
-              "description": "The border color of the select.",
-              "name": "--mdc-select-border-color"
+              "description": "Border color for the input container",
+              "name": "--mdc-input-border-color",
+              "inheritedFrom": {
+                "name": "Input",
+                "module": "src/components/input/input.component.ts"
+              }
             },
             {
-              "description": "The width of the select.",
-              "name": "--mdc-select-width"
+              "description": "Background color for the input field",
+              "name": "--mdc-input-background-color",
+              "inheritedFrom": {
+                "name": "Input",
+                "module": "src/components/input/input.component.ts"
+              }
             },
             {
-              "description": "The height of the listbox inside the select.",
-              "name": "--mdc-select-listbox-height"
+              "description": "Text color for the help text",
+              "name": "--mdc-input-support-text-color",
+              "inheritedFrom": {
+                "name": "Input",
+                "module": "src/components/input/input.component.ts"
+              }
             },
             {
-              "description": "The width of the listbox inside the select (default: `--mdc-select-width`).",
-              "name": "--mdc-select-listbox-width"
+              "description": "Text color for the selected text",
+              "name": "--mdc-input-selection-text-color",
+              "inheritedFrom": {
+                "name": "Input",
+                "module": "src/components/input/input.component.ts"
+              }
+            },
+            {
+              "description": "Background color for the selected text",
+              "name": "--mdc-input-selection-background-color",
+              "inheritedFrom": {
+                "name": "Input",
+                "module": "src/components/input/input.component.ts"
+              }
             }
           ],
           "cssParts": [
@@ -39363,12 +39237,60 @@
                 "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 prefix text element that is displayed before the input field.",
+              "name": "prefix-text",
+              "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"
+              }
             }
           ],
           "slots": [
             {
-              "description": "This is a default/unnamed slot for Selectlistbox including options and/or option group.",
-              "name": "default"
+              "description": "Slot for input chips",
+              "name": "filters"
             },
             {
               "description": "Slot for the label element. If not provided, the `label` property will be used to render the label.",
@@ -39401,467 +39323,511 @@
                 "name": "FormfieldWrapper",
                 "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
               }
+            },
+            {
+              "description": "Slot for the input element. If not provided, the input field will be rendered.",
+              "name": "input",
+              "inheritedFrom": {
+                "name": "Input",
+                "module": "src/components/input/input.component.ts"
+              }
+            },
+            {
+              "description": "Slot for the leading icon before the input field. If not provided, the `leadingIcon` property will be used to render the leading icon.",
+              "name": "input-leading-icon",
+              "inheritedFrom": {
+                "name": "Input",
+                "module": "src/components/input/input.component.ts"
+              }
+            },
+            {
+              "description": "Slot for the prefix text before the input field. If not provided, the `prefixText` property will be used to render the prefix text.",
+              "name": "input-prefix-text",
+              "inheritedFrom": {
+                "name": "Input",
+                "module": "src/components/input/input.component.ts"
+              }
+            },
+            {
+              "description": "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.",
+              "name": "trailing-button",
+              "inheritedFrom": {
+                "name": "Input",
+                "module": "src/components/input/input.component.ts"
+              }
             }
           ],
           "members": [
             {
               "kind": "field",
-              "name": "placeholder",
+              "name": "inputChips",
               "type": {
-                "text": "string | undefined"
-              },
-              "description": "The placeholder text which will be shown on the text if provided.",
-              "attribute": "placeholder"
+                "text": "Array<HTMLElement> | undefined"
+              }
             },
             {
-              "kind": "field",
-              "name": "placement",
-              "type": {
-                "text": "Placement"
-              },
-              "description": "The placement of the popover within Select component.\nThis defines the position of the popover relative to the select input field.\n\nPossible values:\n - 'top-start'\n - 'bottom-start'",
-              "default": "'bottom-start'",
-              "attribute": "placement",
-              "reflects": true
+              "kind": "method",
+              "name": "handleKeyDown",
+              "privacy": "protected",
+              "parameters": [
+                {
+                  "name": "event",
+                  "type": {
+                    "text": "KeyboardEvent"
+                  },
+                  "description": "Keyboard event"
+                }
+              ],
+              "description": "Handles the keydown event of the search field.\nIf the key pressed is 'Enter', it submits the form.\nIf the key pressed is 'Escape', it clears the input text.",
+              "inheritedFrom": {
+                "name": "Input",
+                "module": "components/input/input.component.js"
+              }
+            },
+            {
+              "kind": "method",
+              "name": "renderInputChips",
+              "privacy": "private",
+              "description": "This method is used to render the input chips inside filters slot.\nIt will remove any elements that are not input chips."
+            },
+            {
+              "kind": "method",
+              "name": "clearInputText",
+              "privacy": "protected",
+              "description": "Clears the input field.",
+              "inheritedFrom": {
+                "name": "Input",
+                "module": "components/input/input.component.js"
+              }
             },
             {
               "kind": "field",
-              "name": "boundary",
+              "name": "autoFocusOnMount",
               "type": {
-                "text": "'clippingAncestors' | string"
+                "text": "boolean"
               },
-              "description": "This describes the clipping element(s) or area that overflow of the used popover will be checked relative to.\nThe default is 'clippingAncestors', which are the overflow ancestors which will cause the\nelement to be clipped.\n\nPossible values:\n - 'clippingAncestors'\n - any css selector",
-              "default": "'clippingAncestors'",
-              "attribute": "boundary",
-              "reflects": true
+              "default": "false",
+              "description": "This property indicates whether the element should receive focus automatically when it is mounted.\n\nIt will not focus if the element is re-attached to the DOM after being removed.",
+              "attribute": "auto-focus-on-mount",
+              "reflects": true,
+              "inheritedFrom": {
+                "name": "AutoFocusOnMountMixin",
+                "module": "utils/mixins/AutoFocusOnMountMixin.js"
+              }
             },
             {
               "kind": "field",
-              "name": "strategy",
+              "name": "name",
               "type": {
-                "text": "PopoverStrategy"
+                "text": "string"
               },
-              "description": "The strategy of the popover within Select.\nThis determines how the popover is positioned in the DOM.\n\nIn case `boundary` is set to something other than 'clippingAncestors',\nit might be necessary to set the `strategy` to 'fixed' to ensure that the popover\nis not getting clipped by scrollable containers enclosing the select.",
-              "default": "absolute",
-              "attribute": "strategy",
-              "reflects": true
+              "default": "''",
+              "description": "Indicates the name of the component group.\nThey are used to group elements in a form together.",
+              "attribute": "name",
+              "reflects": true,
+              "inheritedFrom": {
+                "name": "FormInternalsMixin",
+                "module": "utils/mixins/FormInternalsMixin.js"
+              }
             },
             {
               "kind": "field",
-              "name": "popoverZIndex",
+              "name": "value",
               "type": {
-                "text": "number"
+                "text": "string"
               },
-              "description": "The z-index of the popover within Select.\n\nOverride this to make sure this stays on top of other components.",
-              "default": "1000",
-              "attribute": "popover-z-index",
-              "reflects": true
+              "default": "''",
+              "description": "Indicates the value of the component group (ex: input, checkbox, radio, select etc...)",
+              "attribute": "value",
+              "reflects": true,
+              "inheritedFrom": {
+                "name": "FormInternalsMixin",
+                "module": "utils/mixins/FormInternalsMixin.js"
+              }
             },
             {
               "kind": "field",
-              "name": "backdropAppendTo",
+              "name": "validationMessage",
               "type": {
                 "text": "string | undefined"
               },
-              "description": "ID of the element where the backdrop will be appended to.\nThis is useful to ensure that the backdrop is appended to the correct element in the DOM.\nIf not set, the backdrop will be appended to the parent element of the select.",
-              "attribute": "backdrop-append-to",
-              "reflects": true
+              "description": "Custom validation message that will override the default message and displayed when the input is invalid.\n\nTo display custom validation messages, you must listen for input events (or other relevant events)\non your component and update the `validationMessage` property with the desired message string.\nUpdating this property will ensure that new validation messages are shown to the user.\n- The `validationMessage` property overrides the default browser validation message when set.\n- Consumers are responsible for updating `validationMessage` in response to input or validation state changes.",
+              "attribute": "validation-message",
+              "reflects": true,
+              "inheritedFrom": {
+                "name": "FormInternalsMixin",
+                "module": "utils/mixins/FormInternalsMixin.js"
+              }
             },
             {
-              "kind": "method",
-              "name": "handleOptionsClick",
-              "privacy": "private",
-              "return": {
-                "type": {
-                  "text": "void"
-                }
+              "kind": "field",
+              "name": "validity",
+              "type": {
+                "text": "ValidityState"
               },
-              "parameters": [
-                {
-                  "name": "event",
-                  "type": {
-                    "text": "MouseEvent"
-                  },
-                  "description": "The event which triggered this function."
-                }
-              ],
-              "description": "A private method which is called when an option is clicked.\nIt sets the selected option, removes selected from other options, updates the tabindex for all options,\ncloses the popover, and fires the change and input events."
+              "readonly": true,
+              "inheritedFrom": {
+                "name": "FormInternalsMixin",
+                "module": "utils/mixins/FormInternalsMixin.js"
+              }
             },
             {
-              "kind": "method",
-              "name": "setSelectedOption",
-              "privacy": "private",
-              "return": {
-                "type": {
-                  "text": "void"
-                }
-              },
-              "parameters": [
-                {
-                  "name": "option",
-                  "type": {
-                    "text": "Option | null"
-                  },
-                  "description": "The option element in DOM which gets selected."
-                }
-              ],
-              "description": "Sets the selected option in the component state and updates the input element's value.\nThis method ensures that only the selected option is marked as selected in the DOM,\nand updates the tabindex for all options accordingly.\nIt also updates the validity of the input element based on the selected option.\nThis method is called when an option is selected."
+              "kind": "field",
+              "name": "willValidate",
+              "readonly": true,
+              "inheritedFrom": {
+                "name": "FormInternalsMixin",
+                "module": "utils/mixins/FormInternalsMixin.js"
+              }
             },
             {
               "kind": "method",
-              "name": "updateSelectedInChildOptions",
-              "privacy": "private",
+              "name": "setValidity",
+              "description": "Sets the validity of the input field based on the input field's validity.",
               "return": {
                 "type": {
-                  "text": "void"
+                  "text": ""
                 }
               },
-              "parameters": [
-                {
-                  "name": "selectedOption",
-                  "type": {
-                    "text": "Option | null"
-                  },
-                  "description": "The option which gets selected"
-                }
-              ],
-              "description": "Sets selected attribute on the selected option and removes it from all options"
+              "inheritedFrom": {
+                "name": "FormInternalsMixin",
+                "module": "utils/mixins/FormInternalsMixin.js"
+              }
             },
             {
               "kind": "method",
-              "name": "fireEvents",
-              "privacy": "private",
+              "name": "checkValidity",
               "return": {
                 "type": {
-                  "text": "void"
+                  "text": "boolean"
                 }
               },
-              "description": "A private method which is called to fire the change and input events.\nIt dispatches the input and change events with the selected option's value and label."
+              "inheritedFrom": {
+                "name": "FormInternalsMixin",
+                "module": "utils/mixins/FormInternalsMixin.js"
+              }
             },
             {
               "kind": "method",
-              "name": "dispatchChange",
-              "privacy": "private",
-              "return": {
-                "type": {
-                  "text": "void"
-                }
-              },
-              "parameters": [
-                {
-                  "name": "option",
-                  "type": {
-                    "text": "Option"
-                  }
-                }
-              ]
+              "name": "reportValidity",
+              "inheritedFrom": {
+                "name": "FormInternalsMixin",
+                "module": "utils/mixins/FormInternalsMixin.js"
+              }
             },
             {
-              "kind": "method",
-              "name": "dispatchInput",
-              "privacy": "private",
-              "return": {
-                "type": {
-                  "text": "void"
-                }
+              "kind": "field",
+              "name": "dataAriaLabel",
+              "type": {
+                "text": "string | null"
               },
-              "parameters": [
-                {
-                  "name": "option",
-                  "type": {
-                    "text": "Option"
-                  }
-                }
-              ]
+              "default": "null",
+              "description": "Defines a string value that labels the current element.\nThe Aria-Label attribute to be set for accessibility.",
+              "attribute": "data-aria-label",
+              "reflects": true,
+              "inheritedFrom": {
+                "name": "DataAriaLabelMixin",
+                "module": "utils/mixins/DataAriaLabelMixin.js"
+              }
             },
             {
-              "kind": "method",
-              "name": "handleClickCombobox",
-              "privacy": "private",
-              "return": {
-                "type": {
-                  "text": "void"
-                }
+              "kind": "field",
+              "name": "placeholder",
+              "type": {
+                "text": "string"
               },
-              "parameters": [
-                {
-                  "name": "event",
-                  "type": {
-                    "text": "MouseEvent"
-                  },
-                  "description": "The mouse event which triggered this function."
-                }
-              ],
-              "description": "Handles the click event on the visual combobox.\nIf the select is disabled, soft-disabled or readonly, it does nothing.\nIf the popover is already open, it closes it.\nIf it is closed, it opens it."
+              "default": "''",
+              "description": "The placeholder text that is displayed when the input field is empty.",
+              "attribute": "placeholder",
+              "inheritedFrom": {
+                "name": "Input",
+                "module": "components/input/input.component.js"
+              }
             },
             {
-              "kind": "method",
-              "name": "handleKeydownCombobox",
-              "privacy": "private",
-              "return": {
-                "type": {
-                  "text": "void"
-                }
+              "kind": "field",
+              "name": "prefixText",
+              "type": {
+                "text": "string | undefined"
               },
-              "parameters": [
-                {
-                  "name": "event",
-                  "type": {
-                    "text": "KeyboardEvent"
-                  },
-                  "description": "The keyboard event."
-                }
-              ],
-              "description": "Handles the keydown event on the select element when the popover is closed.\nThe options are as follows:\n- ARROW_DOWN, ARROW_UP, SPACE: Opens the popover and prevents the default scrolling behavior.\n- ENTER: Opens the popover, prevents default scrolling, and submits the form if the popover is closed.\n- HOME: Opens the popover and sets focus and tabindex on the first option.\n- END: Opens the popover and sets focus and tabindex on the last option."
+              "description": "The prefix text that is displayed before the input field. It has a max length of 10 characters.\nWhen the prefix text is set, make sure to set the 'data-aria-label'\nattribute with the appropriate value for accessibility.",
+              "attribute": "prefix-text",
+              "inheritedFrom": {
+                "name": "Input",
+                "module": "components/input/input.component.js"
+              }
             },
             {
-              "kind": "method",
-              "name": "getCurrentIndex",
-              "privacy": "private",
-              "return": {
-                "type": {
-                  "text": ""
-                }
+              "kind": "field",
+              "name": "leadingIcon",
+              "type": {
+                "text": "IconNames | undefined"
               },
-              "parameters": [
-                {
-                  "name": "target",
-                  "type": {
-                    "text": "HTMLElement | null"
-                  },
-                  "description": "The target element that triggered the event."
-                }
-              ],
-              "description": "Retrieves the current index of the item that triggered the event.",
+              "description": "The leading icon that is displayed before the input field.",
+              "attribute": "leading-icon",
               "inheritedFrom": {
-                "name": "ListNavigationMixin",
-                "module": "utils/mixins/ListNavigationMixin.js"
+                "name": "Input",
+                "module": "components/input/input.component.js"
               }
             },
             {
-              "kind": "method",
-              "name": "resetTabIndexes",
-              "privacy": "protected",
-              "parameters": [
-                {
-                  "name": "index",
-                  "type": {
-                    "text": "number"
-                  },
-                  "description": "The index of the currently focused item."
-                }
-              ],
-              "description": "Reset all tabindex to -1 and set the tabindex of the current item to 0",
+              "kind": "field",
+              "name": "trailingButton",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "The trailing button when set to true, shows a clear button that clears the input field.",
+              "attribute": "trailing-button",
               "inheritedFrom": {
-                "name": "ListNavigationMixin",
-                "module": "utils/mixins/ListNavigationMixin.js"
+                "name": "Input",
+                "module": "components/input/input.component.js"
               }
             },
             {
-              "kind": "method",
-              "name": "resetTabIndexAndSetFocus",
-              "privacy": "protected",
-              "parameters": [
-                {
-                  "name": "newIndex",
-                  "type": {
-                    "text": "number"
-                  },
-                  "description": "The index of the new item to focus."
-                },
-                {
-                  "name": "oldIndex",
-                  "optional": true,
-                  "type": {
-                    "text": "number"
-                  },
-                  "description": "The index of the currently focused item."
-                },
-                {
-                  "name": "focusNewItem",
-                  "default": "true",
-                  "description": "Call focus() on the new item or not. It should be false during firstUpdate"
-                }
-              ],
-              "description": "Resets the tabindex of the currently focused item and sets focus to a new item.",
-              "return": {
-                "type": {
-                  "text": ""
-                }
+              "kind": "field",
+              "name": "maxlength",
+              "type": {
+                "text": "number | undefined"
               },
+              "description": "The maximum number of characters that the input field can accept.",
+              "attribute": "maxlength",
               "inheritedFrom": {
-                "name": "ListNavigationMixin",
-                "module": "utils/mixins/ListNavigationMixin.js"
+                "name": "Input",
+                "module": "components/input/input.component.js"
               }
             },
             {
-              "kind": "method",
-              "name": "resolveDirectionKey",
-              "privacy": "private",
-              "parameters": [
-                {
-                  "name": "key",
-                  "type": {
-                    "text": "string"
-                  },
-                  "description": "The key pressed by the user."
-                },
-                {
-                  "name": "isRtl",
-                  "type": {
-                    "text": "boolean"
-                  },
-                  "description": "A boolean indicating if the layout is right-to-left (RTL)."
-                }
-              ],
-              "description": "Resolves the key pressed by the user based on the direction of the layout.\nThis method is used to handle keyboard navigation in a right-to-left (RTL) layout.\nIt checks if the layout is RTL and adjusts the arrow keys accordingly.\nFor example, in RTL, the left arrow key behaves like the right arrow key and vice versa.",
-              "return": {
-                "type": {
-                  "text": ""
-                }
+              "kind": "field",
+              "name": "minlength",
+              "type": {
+                "text": "number | undefined"
               },
+              "description": "The minimum number of characters that the input field can accept.",
+              "attribute": "minlength",
               "inheritedFrom": {
-                "name": "ListNavigationMixin",
-                "module": "utils/mixins/ListNavigationMixin.js"
+                "name": "Input",
+                "module": "components/input/input.component.js"
               }
             },
             {
-              "kind": "method",
-              "name": "shouldLoop",
-              "privacy": "private",
+              "kind": "field",
+              "name": "autocapitalize",
+              "type": {
+                "text": "AutoCapitalizeType"
+              },
+              "description": "The autocapitalize attribute of the input field.",
+              "default": "'off'",
+              "attribute": "autocapitalize",
               "inheritedFrom": {
-                "name": "ListNavigationMixin",
-                "module": "utils/mixins/ListNavigationMixin.js"
+                "name": "Input",
+                "module": "components/input/input.component.js"
               }
             },
             {
               "kind": "field",
-              "name": "autoFocusOnMount",
+              "name": "autocomplete",
               "type": {
-                "text": "boolean"
+                "text": "AutoCompleteType"
               },
-              "default": "false",
-              "description": "This property indicates whether the element should receive focus automatically when it is mounted.\n\nIt will not focus if the element is re-attached to the DOM after being removed.",
-              "attribute": "auto-focus-on-mount",
-              "reflects": true,
+              "description": "The autocomplete attribute of the input field.",
+              "default": "'off'",
+              "attribute": "autocomplete",
               "inheritedFrom": {
-                "name": "AutoFocusOnMountMixin",
-                "module": "utils/mixins/AutoFocusOnMountMixin.js"
+                "name": "Input",
+                "module": "components/input/input.component.js"
               }
             },
             {
               "kind": "field",
-              "name": "name",
+              "name": "dirname",
               "type": {
-                "text": "string"
+                "text": "string | undefined"
               },
-              "default": "''",
-              "description": "Indicates the name of the component group.\nThey are used to group elements in a form together.",
-              "attribute": "name",
-              "reflects": true,
+              "description": "Specifies the name of the directionality of text for submission purposes (e.g., \"rtl\" for right-to-left).",
+              "attribute": "dirname",
               "inheritedFrom": {
-                "name": "FormInternalsMixin",
-                "module": "utils/mixins/FormInternalsMixin.js"
+                "name": "Input",
+                "module": "components/input/input.component.js"
               }
             },
             {
               "kind": "field",
-              "name": "value",
+              "name": "pattern",
               "type": {
-                "text": "string"
+                "text": "string | undefined"
               },
-              "default": "''",
-              "description": "Indicates the value of the component group (ex: input, checkbox, radio, select etc...)",
-              "attribute": "value",
-              "reflects": true,
+              "description": "The pattern attribute of the input field.\nSpecifies a regular expression that the input value must match for validation purposes.",
+              "attribute": "pattern",
               "inheritedFrom": {
-                "name": "FormInternalsMixin",
-                "module": "utils/mixins/FormInternalsMixin.js"
+                "name": "Input",
+                "module": "components/input/input.component.js"
               }
             },
             {
               "kind": "field",
-              "name": "validationMessage",
+              "name": "list",
               "type": {
                 "text": "string | undefined"
               },
-              "description": "Custom validation message that will override the default message and displayed when the input is invalid.\n\nTo display custom validation messages, you must listen for input events (or other relevant events)\non your component and update the `validationMessage` property with the desired message string.\nUpdating this property will ensure that new validation messages are shown to the user.\n- The `validationMessage` property overrides the default browser validation message when set.\n- Consumers are responsible for updating `validationMessage` in response to input or validation state changes.",
-              "attribute": "validation-message",
-              "reflects": true,
+              "description": "The list attribute of the input field.\nIdentifies a list of pre-defined options to suggest to the user.",
+              "attribute": "list",
               "inheritedFrom": {
-                "name": "FormInternalsMixin",
-                "module": "utils/mixins/FormInternalsMixin.js"
+                "name": "Input",
+                "module": "components/input/input.component.js"
               }
             },
             {
               "kind": "field",
-              "name": "validity",
+              "name": "size",
               "type": {
-                "text": "ValidityState"
+                "text": "number | undefined | undefined"
               },
-              "readonly": true,
+              "description": "The size attribute of the input field.\nSpecifies the width of the input field.",
+              "default": "undefined",
+              "attribute": "size",
               "inheritedFrom": {
-                "name": "FormInternalsMixin",
-                "module": "utils/mixins/FormInternalsMixin.js"
+                "name": "Input",
+                "module": "components/input/input.component.js"
               }
             },
             {
               "kind": "field",
-              "name": "willValidate",
-              "readonly": true,
+              "name": "clearAriaLabel",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "description": "Aria label for the trailing button. If trailing button is set to true, this label is used for the clear button.",
+              "attribute": "clear-aria-label",
               "inheritedFrom": {
-                "name": "FormInternalsMixin",
-                "module": "utils/mixins/FormInternalsMixin.js"
+                "name": "Input",
+                "module": "components/input/input.component.js"
               }
             },
             {
               "kind": "method",
-              "name": "setValidity",
-              "description": "Sets the validity of the input field based on the input field's validity.",
+              "name": "setInputValidity",
+              "privacy": "private",
+              "inheritedFrom": {
+                "name": "Input",
+                "module": "components/input/input.component.js"
+              }
+            },
+            {
+              "kind": "method",
+              "name": "updateValue",
+              "privacy": "private",
+              "description": "Updates the value of the input field.\nSets the form value.",
               "return": {
                 "type": {
                   "text": ""
                 }
               },
               "inheritedFrom": {
-                "name": "FormInternalsMixin",
-                "module": "utils/mixins/FormInternalsMixin.js"
+                "name": "Input",
+                "module": "components/input/input.component.js"
               }
             },
             {
               "kind": "method",
-              "name": "checkValidity",
+              "name": "onInput",
+              "privacy": "private",
+              "description": "Handles the input event of the input field.\nUpdates the value and sets the validity of the input field.",
+              "inheritedFrom": {
+                "name": "Input",
+                "module": "components/input/input.component.js"
+              }
+            },
+            {
+              "kind": "method",
+              "name": "onChange",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "event",
+                  "type": {
+                    "text": "Event"
+                  },
+                  "description": "Event which contains information about the value change."
+                }
+              ],
+              "description": "Handles the change event of the input field.\nUpdates the value and sets the validity of the input field.\n\nThe 'change' event does not bubble up through the shadow DOM as it was not composed.\nTherefore, we need to re-dispatch the same event to ensure it is propagated correctly.\nRead more: https://developer.mozilla.org/en-US/docs/Web/API/Event/composed",
+              "inheritedFrom": {
+                "name": "Input",
+                "module": "components/input/input.component.js"
+              }
+            },
+            {
+              "kind": "method",
+              "name": "renderLeadingIcon",
+              "privacy": "protected",
+              "description": "Renders the leading icon before the input field.\nIf the leading icon is not set, it will not be displayed.",
               "return": {
                 "type": {
-                  "text": "boolean"
+                  "text": ""
                 }
               },
               "inheritedFrom": {
-                "name": "FormInternalsMixin",
-                "module": "utils/mixins/FormInternalsMixin.js"
+                "name": "Input",
+                "module": "components/input/input.component.js"
               }
             },
             {
               "kind": "method",
-              "name": "reportValidity",
+              "name": "renderPrefixText",
+              "privacy": "protected",
+              "description": "Renders the prefix text before the input field.\nIf the prefix text is more than 10 characters,\n- it will not be displayed.\n- the validation messsage will be displayed.\n\n Note: We are setting aria-hidden so that the screen reader does not read the prefix text.\n The consumers should set the appropriate aria-label for the input field using 'data-aria-label' attribute.",
+              "return": {
+                "type": {
+                  "text": ""
+                }
+              },
               "inheritedFrom": {
-                "name": "FormInternalsMixin",
-                "module": "utils/mixins/FormInternalsMixin.js"
+                "name": "Input",
+                "module": "components/input/input.component.js"
               }
             },
             {
-              "kind": "field",
-              "name": "dataAriaLabel",
-              "type": {
-                "text": "string | null"
+              "kind": "method",
+              "name": "renderTrailingButton",
+              "privacy": "protected",
+              "parameters": [
+                {
+                  "name": "show",
+                  "default": "false"
+                }
+              ],
+              "description": "Renders the trailing button to clear the input field if the trailingButton is set to true.",
+              "return": {
+                "type": {
+                  "text": ""
+                }
               },
-              "default": "null",
-              "description": "Defines a string value that labels the current element.\nThe Aria-Label attribute to be set for accessibility.",
-              "attribute": "data-aria-label",
-              "reflects": true,
               "inheritedFrom": {
-                "name": "DataAriaLabelMixin",
-                "module": "utils/mixins/DataAriaLabelMixin.js"
+                "name": "Input",
+                "module": "components/input/input.component.js"
+              }
+            },
+            {
+              "kind": "method",
+              "name": "renderInputElement",
+              "privacy": "protected",
+              "parameters": [
+                {
+                  "name": "type",
+                  "type": {
+                    "text": "InputType"
+                  }
+                },
+                {
+                  "name": "hidePlaceholder",
+                  "default": "false"
+                }
+              ],
+              "inheritedFrom": {
+                "name": "Input",
+                "module": "components/input/input.component.js"
               }
             },
             {
@@ -40100,90 +40066,71 @@
           ],
           "events": [
             {
-              "name": "change",
-              "type": {
-                "text": "CustomEvent"
-              },
-              "description": "(React: onChange) This event is dispatched when the select is changed.",
-              "reactName": "onChange"
-            },
-            {
+              "description": "(React: onInput) This event is dispatched when the value of the input field changes (every press).",
               "name": "input",
-              "type": {
-                "text": "CustomEvent"
-              },
-              "description": "(React: onInput) This event is dispatched when the select is changed.",
-              "reactName": "onInput"
-            },
-            {
-              "description": "(React: onClick) This event is dispatched when the select is clicked.",
-              "name": "click",
-              "reactName": "onClick"
+              "reactName": "onInput",
+              "inheritedFrom": {
+                "name": "Input",
+                "module": "src/components/input/input.component.ts"
+              }
             },
             {
-              "description": "(React: onKeyDown) This event is dispatched when a key is pressed down on the select.",
-              "name": "keydown",
-              "reactName": "onKeyDown"
+              "description": "(React: onChange) This event is dispatched when the value of the input field changes (on blur).",
+              "name": "change",
+              "reactName": "onChange",
+              "inheritedFrom": {
+                "name": "Input",
+                "module": "src/components/input/input.component.ts"
+              }
             },
             {
-              "description": "(React: onFocus) This event is dispatched when the select receives focus.",
+              "description": "(React: onFocus) This event is dispatched when the input receives focus.",
               "name": "focus",
-              "reactName": "onFocus"
-            }
-          ],
-          "attributes": [
-            {
-              "name": "placeholder",
-              "type": {
-                "text": "string | undefined"
-              },
-              "description": "The placeholder text which will be shown on the text if provided.",
-              "fieldName": "placeholder"
-            },
-            {
-              "name": "placement",
-              "type": {
-                "text": "Placement"
-              },
-              "description": "The placement of the popover within Select component.\nThis defines the position of the popover relative to the select input field.\n\nPossible values:\n - 'top-start'\n - 'bottom-start'",
-              "default": "'bottom-start'",
-              "fieldName": "placement"
-            },
-            {
-              "name": "boundary",
-              "type": {
-                "text": "'clippingAncestors' | string"
-              },
-              "description": "This describes the clipping element(s) or area that overflow of the used popover will be checked relative to.\nThe default is 'clippingAncestors', which are the overflow ancestors which will cause the\nelement to be clipped.\n\nPossible values:\n - 'clippingAncestors'\n - any css selector",
-              "default": "'clippingAncestors'",
-              "fieldName": "boundary"
+              "reactName": "onFocus",
+              "inheritedFrom": {
+                "name": "Input",
+                "module": "src/components/input/input.component.ts"
+              }
             },
             {
-              "name": "strategy",
-              "type": {
-                "text": "PopoverStrategy"
-              },
-              "description": "The strategy of the popover within Select.\nThis determines how the popover is positioned in the DOM.\n\nIn case `boundary` is set to something other than 'clippingAncestors',\nit might be necessary to set the `strategy` to 'fixed' to ensure that the popover\nis not getting clipped by scrollable containers enclosing the select.",
-              "default": "absolute",
-              "fieldName": "strategy"
+              "description": "(React: onBlur) This event is dispatched when the input loses focus.",
+              "name": "blur",
+              "reactName": "onBlur",
+              "inheritedFrom": {
+                "name": "Input",
+                "module": "src/components/input/input.component.ts"
+              }
             },
             {
-              "name": "popover-z-index",
+              "name": "clear",
               "type": {
-                "text": "number"
+                "text": "CustomEvent"
               },
-              "description": "The z-index of the popover within Select.\n\nOverride this to make sure this stays on top of other components.",
-              "default": "1000",
-              "fieldName": "popoverZIndex"
+              "description": "(React: onClear) This event is dispatched when the input text is cleared.",
+              "reactName": "onClear",
+              "inheritedFrom": {
+                "name": "Input",
+                "module": "src/components/input/input.component.ts"
+              }
             },
             {
-              "name": "backdrop-append-to",
               "type": {
-                "text": "string | undefined"
+                "text": "EventConstructor"
               },
-              "description": "ID of the element where the backdrop will be appended to.\nThis is useful to ensure that the backdrop is appended to the correct element in the DOM.\nIf not set, the backdrop will be appended to the parent element of the select.",
-              "fieldName": "backdropAppendTo"
-            },
+              "inheritedFrom": {
+                "name": "Input",
+                "module": "src/components/input/input.component.ts"
+              }
+            }
+          ],
+          "superclass": {
+            "name": "Input",
+            "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 * @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-label-font-size - Font size for the label text.\n * @cssproperty --mdc-label-font-weight - Font weight for the label text.\n * @cssproperty --mdc-label-line-height - Line height for the label text.\n * @cssproperty --mdc-label-color - Color for the label text.\n * @cssproperty --mdc-help-text-font-size - Font size for the help text.\n * @cssproperty --mdc-help-text-font-weight - Font weight for the help text.\n * @cssproperty --mdc-help-text-line-height - Line height for the help text.\n * @cssproperty --mdc-help-text-color - Color for the help text.\n * @cssproperty --mdc-required-indicator-color - Color for the required indicator text.\n * @cssproperty --mdc-input-text-color - Text color for the input field\n * @cssproperty --mdc-input-border-color - Border color for the input container\n * @cssproperty --mdc-input-background-color - Background color for the input field\n * @cssproperty --mdc-input-support-text-color - Text color for the help text\n * @cssproperty --mdc-input-selection-text-color - Text color for the selected text\n * @cssproperty --mdc-input-selection-background-color - Background color for the selected 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 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,
+          "attributes": [
             {
               "name": "auto-focus-on-mount",
               "type": {
@@ -40248,6 +40195,168 @@
                 "module": "src/utils/mixins/DataAriaLabelMixin.ts"
               }
             },
+            {
+              "name": "placeholder",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "description": "The placeholder text that is displayed when the input field is empty.",
+              "fieldName": "placeholder",
+              "inheritedFrom": {
+                "name": "Input",
+                "module": "src/components/input/input.component.ts"
+              }
+            },
+            {
+              "name": "prefix-text",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "The prefix text that is displayed before the input field. It has a max length of 10 characters.\nWhen the prefix text is set, make sure to set the 'data-aria-label'\nattribute with the appropriate value for accessibility.",
+              "fieldName": "prefixText",
+              "inheritedFrom": {
+                "name": "Input",
+                "module": "src/components/input/input.component.ts"
+              }
+            },
+            {
+              "name": "leading-icon",
+              "type": {
+                "text": "IconNames | undefined"
+              },
+              "description": "The leading icon that is displayed before the input field.",
+              "fieldName": "leadingIcon",
+              "inheritedFrom": {
+                "name": "Input",
+                "module": "src/components/input/input.component.ts"
+              }
+            },
+            {
+              "name": "trailing-button",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "The trailing button when set to true, shows a clear button that clears the input field.",
+              "fieldName": "trailingButton",
+              "inheritedFrom": {
+                "name": "Input",
+                "module": "src/components/input/input.component.ts"
+              }
+            },
+            {
+              "name": "maxlength",
+              "type": {
+                "text": "number | undefined"
+              },
+              "description": "The maximum number of characters that the input field can accept.",
+              "fieldName": "maxlength",
+              "inheritedFrom": {
+                "name": "Input",
+                "module": "src/components/input/input.component.ts"
+              }
+            },
+            {
+              "name": "minlength",
+              "type": {
+                "text": "number | undefined"
+              },
+              "description": "The minimum number of characters that the input field can accept.",
+              "fieldName": "minlength",
+              "inheritedFrom": {
+                "name": "Input",
+                "module": "src/components/input/input.component.ts"
+              }
+            },
+            {
+              "name": "autocapitalize",
+              "type": {
+                "text": "AutoCapitalizeType"
+              },
+              "description": "The autocapitalize attribute of the input field.",
+              "default": "'off'",
+              "fieldName": "autocapitalize",
+              "inheritedFrom": {
+                "name": "Input",
+                "module": "src/components/input/input.component.ts"
+              }
+            },
+            {
+              "name": "autocomplete",
+              "type": {
+                "text": "AutoCompleteType"
+              },
+              "description": "The autocomplete attribute of the input field.",
+              "default": "'off'",
+              "fieldName": "autocomplete",
+              "inheritedFrom": {
+                "name": "Input",
+                "module": "src/components/input/input.component.ts"
+              }
+            },
+            {
+              "name": "dirname",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "Specifies the name of the directionality of text for submission purposes (e.g., \"rtl\" for right-to-left).",
+              "fieldName": "dirname",
+              "inheritedFrom": {
+                "name": "Input",
+                "module": "src/components/input/input.component.ts"
+              }
+            },
+            {
+              "name": "pattern",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "The pattern attribute of the input field.\nSpecifies a regular expression that the input value must match for validation purposes.",
+              "fieldName": "pattern",
+              "inheritedFrom": {
+                "name": "Input",
+                "module": "src/components/input/input.component.ts"
+              }
+            },
+            {
+              "name": "list",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "The list attribute of the input field.\nIdentifies a list of pre-defined options to suggest to the user.",
+              "fieldName": "list",
+              "inheritedFrom": {
+                "name": "Input",
+                "module": "src/components/input/input.component.ts"
+              }
+            },
+            {
+              "name": "size",
+              "type": {
+                "text": "number | undefined | undefined"
+              },
+              "description": "The size attribute of the input field.\nSpecifies the width of the input field.",
+              "default": "undefined",
+              "fieldName": "size",
+              "inheritedFrom": {
+                "name": "Input",
+                "module": "src/components/input/input.component.ts"
+              }
+            },
+            {
+              "name": "clear-aria-label",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "description": "Aria label for the trailing button. If trailing button is set to true, this label is used for the clear button.",
+              "fieldName": "clearAriaLabel",
+              "inheritedFrom": {
+                "name": "Input",
+                "module": "src/components/input/input.component.ts"
+              }
+            },
             {
               "name": "disabled",
               "type": {
@@ -40384,36 +40493,7 @@
                 "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
               }
             }
-          ],
-          "mixins": [
-            {
-              "name": "ListNavigationMixin",
-              "module": "/src/utils/mixins/ListNavigationMixin"
-            },
-            {
-              "name": "CaptureDestroyEventForChildElement",
-              "module": "/src/utils/mixins/lifecycle/CaptureDestroyEventForChildElement"
-            },
-            {
-              "name": "AutoFocusOnMountMixin",
-              "module": "/src/utils/mixins/AutoFocusOnMountMixin"
-            },
-            {
-              "name": "FormInternalsMixin",
-              "module": "/src/utils/mixins/FormInternalsMixin"
-            },
-            {
-              "name": "DataAriaLabelMixin",
-              "module": "/src/utils/mixins/DataAriaLabelMixin"
-            }
-          ],
-          "superclass": {
-            "name": "FormfieldWrapper",
-            "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 * @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 *\n * @cssproperty --mdc-label-font-size - Font size for the label text.\n * @cssproperty --mdc-label-font-weight - Font weight for the label text.\n * @cssproperty --mdc-label-line-height - Line height for the label text.\n * @cssproperty --mdc-label-color - Color for the label text.\n * @cssproperty --mdc-help-text-font-size - Font size for the help text.\n * @cssproperty --mdc-help-text-font-weight - Font weight for the help text.\n * @cssproperty --mdc-help-text-line-height - Line height for the help text.\n * @cssproperty --mdc-help-text-color - Color for the help text.\n * @cssproperty --mdc-select-background-color - The background color of the combobox of select.\n * @cssproperty --mdc-select-text-color - The text color of the select.\n * @cssproperty --mdc-select-border-color - The border color of the select.\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 */",
-          "customElement": true
+          ]
         }
       ],
       "exports": [
@@ -40421,8 +40501,8 @@
           "kind": "js",
           "name": "default",
           "declaration": {
-            "name": "Select",
-            "module": "components/select/select.component.js"
+            "name": "Searchfield",
+            "module": "components/searchfield/searchfield.component.js"
           }
         }
       ]
@@ -41697,40 +41777,20 @@
           "name": "StaticCheckbox",
           "cssProperties": [
             {
-              "description": "Border color in high contrast.",
-              "name": "--mdc-staticcheckbox-border-color"
+              "description": "Controls the border color of the checkbox.",
+              "name": "--mdc-checkbox-border-color"
             },
             {
-              "description": "Background color for a selected checkbox.",
-              "name": "--mdc-staticcheckbox-checked-background-color"
+              "description": "Controls the background color of the checkbox.",
+              "name": "--mdc-checkbox-background-color"
             },
             {
-              "description": "Background color for a disabled checkbox.",
-              "name": "--mdc-staticcheckbox-disabled-background-color"
+              "description": "Controls the icon color of the checkbox.",
+              "name": "--mdc-checkbox-icon-color"
             },
             {
-              "description": "Border color for a disabled checkbox.",
-              "name": "--mdc-checkbox-disabled-border-color"
-            },
-            {
-              "description": "Background color for a disabled, selected checkbox.",
-              "name": "--mdc-checkbox-disabled-checked-icon-color"
-            },
-            {
-              "description": "Icon color for a disabled checkbox.",
-              "name": "--mdc-staticcheckbox-disabled-icon-color"
-            },
-            {
-              "description": "Background color for an unselected checkbox.",
-              "name": "--mdc-staticcheckbox-icon-background-color"
-            },
-            {
-              "description": "Default background color for an unselected checkbox.",
-              "name": "--mdc-staticcheckbox-icon-border-color"
-            },
-            {
-              "description": "Icon color for an unselected checkbox.",
-              "name": "--mdc-staticcheckbox-icon-color"
+              "description": "Controls the size of the checkbox.",
+              "name": "--mdc-checkbox-size"
             }
           ],
           "cssParts": [
@@ -41872,7 +41932,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 5 properties - checked, indeterminate, disabled, readonly and soft-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 */",
+          "jsDoc": "/**\n * This is a decorative component that is styled to look as a checkbox.\n *\n * It has 5 properties - checked, indeterminate, disabled, readonly and soft-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-checkbox-border-color - Controls the border color of the checkbox.\n * @cssproperty --mdc-checkbox-background-color - Controls the background color of the checkbox.\n * @cssproperty --mdc-checkbox-icon-color - Controls the icon color of the checkbox.\n * @cssproperty --mdc-checkbox-size - Controls the size of the 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
         }
       ],
@@ -42031,43 +42091,23 @@
           "cssProperties": [
             {
               "description": "size of the inner circle",
-              "name": "--mdc-staticradio-inner-circle-size"
-            },
-            {
-              "description": "color of the label when disabled",
-              "name": "--mdc-staticradio-text-disabled-color"
-            },
-            {
-              "description": "color of the radio button border when normal",
-              "name": "--mdc-staticradio-normal-border-color"
-            },
-            {
-              "description": "color of the radio button border when disabled",
-              "name": "--mdc-staticradio-disabled-border-color"
+              "name": "--mdc-radio-inner-circle-size"
             },
             {
-              "description": "background color of the inner circle when normal",
-              "name": "--mdc-staticradio-inner-circle-normal-background"
+              "description": "size of the outer circle",
+              "name": "--mdc-radio-outer-circle-size"
             },
             {
-              "description": "background color of the inner circle when disabled",
-              "name": "--mdc-staticradio-inner-circle-disabled-background"
+              "description": "background color of the inner circle",
+              "name": "--mdc-radio-inner-circle-background-color"
             },
             {
-              "description": "color of the radio button when inactive",
-              "name": "--mdc-staticradio-control-inactive-color"
+              "description": "border color of the outer circle",
+              "name": "--mdc-radio-outer-circle-border-color"
             },
             {
-              "description": "background color of the radio button when inactive and disabled",
-              "name": "--mdc-staticradio-control-inactive-disabled-background"
-            },
-            {
-              "description": "color of the radio button when active",
-              "name": "--mdc-staticradio-control-active-color"
-            },
-            {
-              "description": "background color of the radio button when active and disabled",
-              "name": "--mdc-staticradio-control-active-disabled-background"
+              "description": "background color of the outer circle",
+              "name": "--mdc-radio-outer-circle-background-color"
             }
           ],
           "cssParts": [
@@ -42185,7 +42225,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 4 properties - checked, disabled, readonly and soft-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 */",
+          "jsDoc": "/**\n * This is a decorative component that is styled to look as a radio.\n * It has 4 properties - checked, disabled, readonly and soft-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-radio-inner-circle-size - size of the inner circle\n * @cssproperty --mdc-radio-outer-circle-size - size of the outer circle\n * @cssproperty --mdc-radio-inner-circle-background-color - background color of the inner circle\n * @cssproperty --mdc-radio-outer-circle-border-color - border color of the outer circle\n * @cssproperty --mdc-radio-outer-circle-background-color - background color of the outer circle\n *\n * @csspart radio-icon - The radio icon.\n *\n * @slot - Default slot for the label of the radio.\n */",
           "customElement": true
         }
       ],
@@ -42210,64 +42250,32 @@
           "name": "StaticToggle",
           "cssProperties": [
             {
-              "description": "Width of the toggle",
-              "name": "--mdc-statictoggle-width"
-            },
-            {
-              "description": "Height of the toggle",
-              "name": "--mdc-statictoggle-height"
-            },
-            {
-              "description": "Width of the toggle when it's size is compact",
-              "name": "--mdc-statictoggle-width-compact"
-            },
-            {
-              "description": "Height of the toggle when it's size is compact",
-              "name": "--mdc-statictoggle-height-compact"
-            },
-            {
-              "description": "Border radius of the toggle",
-              "name": "--mdc-statictoggle-border-radius"
-            },
-            {
-              "description": "Border radius of the toggle when it's size is compact",
-              "name": "--mdc-statictoggle-border-radius-compact"
-            },
-            {
-              "description": "Border of the toggle",
-              "name": "--mdc-statictoggle-border"
-            },
-            {
-              "description": "Background color of the inactive toggle in rest state",
-              "name": "--mdc-statictoggle-inactive-rest-color"
-            },
-            {
-              "description": "Background color of the inactive toggle in disabled state",
-              "name": "--mdc-statictoggle-inactive-disabled-color"
+              "description": "The width of the toggle",
+              "name": "--mdc-toggle-width"
             },
             {
-              "description": "Background color of the active toggle in rest state",
-              "name": "--mdc-statictoggle-active-rest-color"
+              "description": "The height of the toggle",
+              "name": "--mdc-toggle-height"
             },
             {
-              "description": "Background color of the active toggle in disabled state",
-              "name": "--mdc-statictoggle-active-disabled-color"
+              "description": "The border radius of the toggle",
+              "name": "--mdc-toggle-border-radius"
             },
             {
-              "description": "Color of the icon in normal state",
-              "name": "--mdc-statictoggle-icon-color-normal"
+              "description": "The border color of the toggle",
+              "name": "--mdc-toggle-border-color"
             },
             {
-              "description": "Color of the icon in disabled state",
-              "name": "--mdc-statictoggle-icon-color-disabled"
+              "description": "The background color of the toggle",
+              "name": "--mdc-toggle-background-color"
             },
             {
-              "description": "Background color of the icon in normal state",
-              "name": "--mdc-statictoggle-icon-background-color-normal"
+              "description": "The icon color of the toggle",
+              "name": "--mdc-toggle-icon-color"
             },
             {
-              "description": "Background color of the icon in disabled state",
-              "name": "--mdc-statictoggle-icon-background-color-disabled"
+              "description": "The icon background color of the toggle",
+              "name": "--mdc-toggle-icon-background-color"
             }
           ],
           "cssParts": [
@@ -42413,7 +42421,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 5 properties - checked, size, disabled, readonly and soft-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 */",
+          "jsDoc": "/**\n * This is a decorative component that is styled to look as a toggle. <br/>\n * It has 5 properties - checked, size, disabled, readonly and soft-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-toggle-width - The width of the toggle\n * @cssproperty --mdc-toggle-height - The height of the toggle\n * @cssproperty --mdc-toggle-border-radius - The border radius of the toggle\n * @cssproperty --mdc-toggle-border-color - The border color of the toggle\n * @cssproperty --mdc-toggle-background-color - The background color of the toggle\n * @cssproperty --mdc-toggle-icon-color - The icon color of the toggle\n * @cssproperty --mdc-toggle-icon-background-color - The icon background color of the toggle\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
         }
       ],
@@ -42910,106 +42918,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/tab/tab.component.js",
@@ -43927,6 +43835,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",
@@ -44084,6 +44092,14 @@
                 "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
               }
             },
+            {
+              "description": "Color for the required indicator text.",
+              "name": "--mdc-required-indicator-color",
+              "inheritedFrom": {
+                "name": "FormfieldWrapper",
+                "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
+              }
+            },
             {
               "description": "Text color for the textarea field",
               "name": "--mdc-textarea-text-color"
@@ -45119,7 +45135,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 * @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 *\n * @cssproperty --mdc-label-font-size - Font size for the label text.\n * @cssproperty --mdc-label-font-weight - Font weight for the label text.\n * @cssproperty --mdc-label-line-height - Line height for the label text.\n * @cssproperty --mdc-label-color - Color for the label text.\n * @cssproperty --mdc-help-text-font-size - Font size for the help text.\n * @cssproperty --mdc-help-text-font-weight - Font weight for the help text.\n * @cssproperty --mdc-help-text-line-height - Line height for the help text.\n * @cssproperty --mdc-help-text-color - Color for the help text.\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-text-font-size - Font size for the textarea field\n * @cssproperty --mdc-textarea-text-line-height - Line height for the textarea field\n * @cssproperty --mdc-textarea-container-background-color - Background color for 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 * @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 *\n * @cssproperty --mdc-label-font-size - Font size for the label text.\n * @cssproperty --mdc-label-font-weight - Font weight for the label text.\n * @cssproperty --mdc-label-line-height - Line height for the label text.\n * @cssproperty --mdc-label-color - Color for the label text.\n * @cssproperty --mdc-help-text-font-size - Font size for the help text.\n * @cssproperty --mdc-help-text-font-weight - Font weight for the help text.\n * @cssproperty --mdc-help-text-line-height - Line height for the help text.\n * @cssproperty --mdc-help-text-color - Color for the help text.\n * @cssproperty --mdc-required-indicator-color - Color for the required indicator text.\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-text-font-size - Font size for the textarea field\n * @cssproperty --mdc-textarea-text-line-height - Line height for the textarea field\n * @cssproperty --mdc-textarea-container-background-color - Background color for the textarea container\n */",
           "customElement": true
         }
       ],
@@ -45644,44 +45660,32 @@
           "name": "Toggle",
           "cssProperties": [
             {
-              "description": "Width of the toggle",
+              "description": "The width of the toggle",
               "name": "--mdc-toggle-width"
             },
             {
-              "description": "Height of the toggle",
+              "description": "The height of the toggle",
               "name": "--mdc-toggle-height"
             },
             {
-              "description": "Width of the toggle when it's size is compact",
-              "name": "--mdc-toggle-width-compact"
-            },
-            {
-              "description": "Height of the toggle when it's size is compact",
-              "name": "--mdc-toggle-height-compact"
-            },
-            {
-              "description": "Color of the toggle label and help text in disabled state",
-              "name": "--mdc-toggle-label-color-disabled"
-            },
-            {
-              "description": "Color of the help text label",
-              "name": "--mdc-toggle-help-text-color"
+              "description": "The border radius of the toggle",
+              "name": "--mdc-toggle-border-radius"
             },
             {
-              "description": "Background color of the active toggle in hover state",
-              "name": "--mdc-toggle-active-hover-color"
+              "description": "The border color of the toggle",
+              "name": "--mdc-toggle-border-color"
             },
             {
-              "description": "Background color of the active toggle in pressed state",
-              "name": "--mdc-toggle-active-pressed-color"
+              "description": "The background color of the toggle",
+              "name": "--mdc-toggle-background-color"
             },
             {
-              "description": "Background color of the inactive toggle in hover state",
-              "name": "--mdc-toggle-inactive-hover-color"
+              "description": "The icon color of the toggle",
+              "name": "--mdc-toggle-icon-color"
             },
             {
-              "description": "Background color of the inactive toggle in pressed state",
-              "name": "--mdc-toggle-inactive-pressed-color"
+              "description": "The icon background color of the toggle",
+              "name": "--mdc-toggle-icon-background-color"
             },
             {
               "description": "Font size for the label text.",
@@ -45746,6 +45750,14 @@
                 "name": "FormfieldWrapper",
                 "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
               }
+            },
+            {
+              "description": "Color for the required indicator text.",
+              "name": "--mdc-required-indicator-color",
+              "inheritedFrom": {
+                "name": "FormfieldWrapper",
+                "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
+              }
             }
           ],
           "cssParts": [
@@ -45814,8 +45826,8 @@
               }
             },
             {
-              "description": "The container element that wraps the toggle input.",
-              "name": "container"
+              "description": "The static-toggle element that wraps the toggle input.",
+              "name": "static-toggle"
             },
             {
               "description": "The native checkbox input element styled as a toggle switch.",
@@ -46537,7 +46549,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 *\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 */",
+          "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 - The width of the toggle\n * @cssproperty --mdc-toggle-height - The height of the toggle\n * @cssproperty --mdc-toggle-border-radius - The border radius of the toggle\n * @cssproperty --mdc-toggle-border-color - The border color of the toggle\n * @cssproperty --mdc-toggle-background-color - The background color of the toggle\n * @cssproperty --mdc-toggle-icon-color - The icon color of the toggle\n * @cssproperty --mdc-toggle-icon-background-color - The icon background color of the toggle\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 static-toggle - The static-toggle element that wraps the toggle input.\n * @csspart toggle-input - The native checkbox input element styled as a toggle switch.\n */",
           "customElement": true,
           "slots": [
             {