@momentum-design/components 0.104.2 → 0.104.3

package/dist/custom-elements.json

@@ -477,157 +477,6 @@
         }
       ]
     },
-    {
-      "kind": "javascript-module",
-      "path": "components/accordiongroup/accordiongroup.component.js",
-      "declarations": [
-        {
-          "kind": "class",
-          "description": "An accordion group is a vertically stacked set of interactive headings that each contain a header and body content.\nEach heading of the accordion acts as a control that enable users to expand or hide their associated body sections of content.\nAccordions are commonly used to reduce the need to scroll when presenting multiple sections of content on a single page.\n\n- Default Slot: The accordion group component only accepts, `accordion` and `accordionbutton` components as the children, rest are ignored.\n\nThere are three types of variants:\n- Stacked - Each accordion will have a gap of 1.5rem (24px).\n- Borderless - Each accordion will not have any border and the group will also not have any border.\n- Contained - Each accordion will have no gap in between them and the border of the entire accordiongroup will be continuous.\n\nThere are two types of sizes:\n- Small: Small size has a padding of 1rem (16px) for both heading and body sections.\n- Large: Large size has a padding of 1.5rem (24px) for both heading and body sections.\n\nThe variant and size will be applied to all accordions inside this accordion group.\nTo show/expand more than one accordion at any given time, then set `allow-multiple` to `true`. By default, it's `false`.\n\nIf you don't need any controls on your accordion heading, then it's advised to use `accordionbutton` component.\n\nIf the first accordion of the accordion group is expanded by default, then the screen reader might loose focus when toggling the visibilty of the first accordion.",
-          "name": "AccordionGroup",
-          "cssProperties": [
-            {
-              "description": "The border color of the entire accordiongroup",
-              "name": "--mdc-accordiongroup-border-color"
-            }
-          ],
-          "slots": [
-            {
-              "description": "The default slot can contain the `accordion` or `accordionbutton` components.",
-              "name": "default"
-            }
-          ],
-          "members": [
-            {
-              "kind": "field",
-              "name": "size",
-              "type": {
-                "text": "Size"
-              },
-              "description": "The size of the accordion item.",
-              "default": "'small'",
-              "attribute": "size",
-              "reflects": true
-            },
-            {
-              "kind": "field",
-              "name": "variant",
-              "type": {
-                "text": "Variant"
-              },
-              "description": "The variant of the accordion item. Based on the variant, the styling of the accordion gets changed.",
-              "default": "'stacked'",
-              "attribute": "variant",
-              "reflects": true
-            },
-            {
-              "kind": "field",
-              "name": "allowMultiple",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "If true, multiple accordion items can be visible at the same time.",
-              "attribute": "allow-multiple",
-              "reflects": true
-            },
-            {
-              "kind": "method",
-              "name": "handleAccordionExpanded",
-              "privacy": "private",
-              "return": {
-                "type": {
-                  "text": "void"
-                }
-              },
-              "parameters": [
-                {
-                  "name": "event",
-                  "type": {
-                    "text": "Event"
-                  },
-                  "description": "The event object from the 'shown' event."
-                }
-              ],
-              "description": "Handles the 'shown' event for accordion items.\nIf `allowMultiple` is false, ensures that only one accordion item\nremains expanded by collapsing all other expanded items when a new item is expanded."
-            },
-            {
-              "kind": "method",
-              "name": "setChildrenAccordionAttributes",
-              "privacy": "private",
-              "return": {
-                "type": {
-                  "text": "void"
-                }
-              },
-              "parameters": [
-                {
-                  "name": "attributeName",
-                  "type": {
-                    "text": "string"
-                  },
-                  "description": "The name of the attribute to set."
-                },
-                {
-                  "name": "attributeValue",
-                  "type": {
-                    "text": "string"
-                  },
-                  "description": "The value to set the attribute to."
-                }
-              ],
-              "description": "Sets the given attribute on all child accordion or accordionbutton components."
-            }
-          ],
-          "attributes": [
-            {
-              "name": "size",
-              "type": {
-                "text": "Size"
-              },
-              "description": "The size of the accordion item.",
-              "default": "'small'",
-              "fieldName": "size"
-            },
-            {
-              "name": "variant",
-              "type": {
-                "text": "Variant"
-              },
-              "description": "The variant of the accordion item. Based on the variant, the styling of the accordion gets changed.",
-              "default": "'stacked'",
-              "fieldName": "variant"
-            },
-            {
-              "name": "allow-multiple",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "If true, multiple accordion items can be visible at the same time.",
-              "fieldName": "allowMultiple"
-            }
-          ],
-          "superclass": {
-            "name": "Component",
-            "module": "/src/models"
-          },
-          "tagName": "mdc-accordiongroup",
-          "jsDoc": "/**\n * An accordion group is a vertically stacked set of interactive headings that each contain a header and body content.\n * Each heading of the accordion acts as a control that enable users to expand or hide their associated body sections of content.\n * Accordions are commonly used to reduce the need to scroll when presenting multiple sections of content on a single page.\n *\n * - Default Slot: The accordion group component only accepts, `accordion` and `accordionbutton` components as the children, rest are ignored.\n *\n * There are three types of variants:\n * - Stacked - Each accordion will have a gap of 1.5rem (24px).\n * - Borderless - Each accordion will not have any border and the group will also not have any border.\n * - Contained - Each accordion will have no gap in between them and the border of the entire accordiongroup will be continuous.\n *\n * There are two types of sizes:\n * - Small: Small size has a padding of 1rem (16px) for both heading and body sections.\n * - Large: Large size has a padding of 1.5rem (24px) for both heading and body sections.\n *\n * The variant and size will be applied to all accordions inside this accordion group.\n * To show/expand more than one accordion at any given time, then set `allow-multiple` to `true`. By default, it's `false`.\n *\n * If you don't need any controls on your accordion heading, then it's advised to use `accordionbutton` component.\n *\n * If the first accordion of the accordion group is expanded by default, then the screen reader might loose focus when toggling the visibilty of the first accordion.\n *\n * @tagname mdc-accordiongroup\n *\n * @slot default - The default slot can contain the `accordion` or `accordionbutton` components.\n *\n * @cssproperty --mdc-accordiongroup-border-color - The border color of the entire accordiongroup\n */",
-          "customElement": true
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "default",
-          "declaration": {
-            "name": "AccordionGroup",
-            "module": "components/accordiongroup/accordiongroup.component.js"
-          }
-        }
-      ]
-    },
     {
       "kind": "javascript-module",
       "path": "components/accordionbutton/accordionbutton.component.js",
@@ -968,6 +817,157 @@
         }
       ]
     },
+    {
+      "kind": "javascript-module",
+      "path": "components/accordiongroup/accordiongroup.component.js",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "An accordion group is a vertically stacked set of interactive headings that each contain a header and body content.\nEach heading of the accordion acts as a control that enable users to expand or hide their associated body sections of content.\nAccordions are commonly used to reduce the need to scroll when presenting multiple sections of content on a single page.\n\n- Default Slot: The accordion group component only accepts, `accordion` and `accordionbutton` components as the children, rest are ignored.\n\nThere are three types of variants:\n- Stacked - Each accordion will have a gap of 1.5rem (24px).\n- Borderless - Each accordion will not have any border and the group will also not have any border.\n- Contained - Each accordion will have no gap in between them and the border of the entire accordiongroup will be continuous.\n\nThere are two types of sizes:\n- Small: Small size has a padding of 1rem (16px) for both heading and body sections.\n- Large: Large size has a padding of 1.5rem (24px) for both heading and body sections.\n\nThe variant and size will be applied to all accordions inside this accordion group.\nTo show/expand more than one accordion at any given time, then set `allow-multiple` to `true`. By default, it's `false`.\n\nIf you don't need any controls on your accordion heading, then it's advised to use `accordionbutton` component.\n\nIf the first accordion of the accordion group is expanded by default, then the screen reader might loose focus when toggling the visibilty of the first accordion.",
+          "name": "AccordionGroup",
+          "cssProperties": [
+            {
+              "description": "The border color of the entire accordiongroup",
+              "name": "--mdc-accordiongroup-border-color"
+            }
+          ],
+          "slots": [
+            {
+              "description": "The default slot can contain the `accordion` or `accordionbutton` components.",
+              "name": "default"
+            }
+          ],
+          "members": [
+            {
+              "kind": "field",
+              "name": "size",
+              "type": {
+                "text": "Size"
+              },
+              "description": "The size of the accordion item.",
+              "default": "'small'",
+              "attribute": "size",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "variant",
+              "type": {
+                "text": "Variant"
+              },
+              "description": "The variant of the accordion item. Based on the variant, the styling of the accordion gets changed.",
+              "default": "'stacked'",
+              "attribute": "variant",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "allowMultiple",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "If true, multiple accordion items can be visible at the same time.",
+              "attribute": "allow-multiple",
+              "reflects": true
+            },
+            {
+              "kind": "method",
+              "name": "handleAccordionExpanded",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "event",
+                  "type": {
+                    "text": "Event"
+                  },
+                  "description": "The event object from the 'shown' event."
+                }
+              ],
+              "description": "Handles the 'shown' event for accordion items.\nIf `allowMultiple` is false, ensures that only one accordion item\nremains expanded by collapsing all other expanded items when a new item is expanded."
+            },
+            {
+              "kind": "method",
+              "name": "setChildrenAccordionAttributes",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "attributeName",
+                  "type": {
+                    "text": "string"
+                  },
+                  "description": "The name of the attribute to set."
+                },
+                {
+                  "name": "attributeValue",
+                  "type": {
+                    "text": "string"
+                  },
+                  "description": "The value to set the attribute to."
+                }
+              ],
+              "description": "Sets the given attribute on all child accordion or accordionbutton components."
+            }
+          ],
+          "attributes": [
+            {
+              "name": "size",
+              "type": {
+                "text": "Size"
+              },
+              "description": "The size of the accordion item.",
+              "default": "'small'",
+              "fieldName": "size"
+            },
+            {
+              "name": "variant",
+              "type": {
+                "text": "Variant"
+              },
+              "description": "The variant of the accordion item. Based on the variant, the styling of the accordion gets changed.",
+              "default": "'stacked'",
+              "fieldName": "variant"
+            },
+            {
+              "name": "allow-multiple",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "If true, multiple accordion items can be visible at the same time.",
+              "fieldName": "allowMultiple"
+            }
+          ],
+          "superclass": {
+            "name": "Component",
+            "module": "/src/models"
+          },
+          "tagName": "mdc-accordiongroup",
+          "jsDoc": "/**\n * An accordion group is a vertically stacked set of interactive headings that each contain a header and body content.\n * Each heading of the accordion acts as a control that enable users to expand or hide their associated body sections of content.\n * Accordions are commonly used to reduce the need to scroll when presenting multiple sections of content on a single page.\n *\n * - Default Slot: The accordion group component only accepts, `accordion` and `accordionbutton` components as the children, rest are ignored.\n *\n * There are three types of variants:\n * - Stacked - Each accordion will have a gap of 1.5rem (24px).\n * - Borderless - Each accordion will not have any border and the group will also not have any border.\n * - Contained - Each accordion will have no gap in between them and the border of the entire accordiongroup will be continuous.\n *\n * There are two types of sizes:\n * - Small: Small size has a padding of 1rem (16px) for both heading and body sections.\n * - Large: Large size has a padding of 1.5rem (24px) for both heading and body sections.\n *\n * The variant and size will be applied to all accordions inside this accordion group.\n * To show/expand more than one accordion at any given time, then set `allow-multiple` to `true`. By default, it's `false`.\n *\n * If you don't need any controls on your accordion heading, then it's advised to use `accordionbutton` component.\n *\n * If the first accordion of the accordion group is expanded by default, then the screen reader might loose focus when toggling the visibilty of the first accordion.\n *\n * @tagname mdc-accordiongroup\n *\n * @slot default - The default slot can contain the `accordion` or `accordionbutton` components.\n *\n * @cssproperty --mdc-accordiongroup-border-color - The border color of the entire accordiongroup\n */",
+          "customElement": true
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "default",
+          "declaration": {
+            "name": "AccordionGroup",
+            "module": "components/accordiongroup/accordiongroup.component.js"
+          }
+        }
+      ]
+    },
     {
       "kind": "javascript-module",
       "path": "components/alertchip/alertchip.component.js",
@@ -6394,12 +6394,12 @@
     },
     {
       "kind": "javascript-module",
-      "path": "components/cardcheckbox/cardcheckbox.component.js",
+      "path": "components/cardradio/cardradio.component.js",
       "declarations": [
         {
           "kind": "class",
-          "description": "cardcheckbox component extends `mdc-card` and supports checkbox selection interaction addtionally.\n\nWhile using this component within a form or group of cards, make sure cards are in a role = \"checkbox-group\".\nThis card would have events for selected and unselected (similar to checkbox)\n\n**Note**: This is a single selection card i.e. interacting anywhere on the card would toggle the checked state.\nMake sure to pass only non-interactable elements within the slots.\n\nMake sure to pass the `card-title` mandatorily for this card.",
-          "name": "CardCheckbox",
+          "description": "cardradio component extends `mdc-card` and supports radio selection interaction addtionally.\n\nWhile using this component within a form or group of cards, make sure cards are in a role = \"radio-group\".\nThis card would have events for selected and unselected (similar to radio)\n\n**Note**: This is a single selection card i.e. interacting anywhere on the card would toggle the checked state.\nMake sure to pass only non-interactable elements within the slots.\n\nMake sure to pass the `card-title` mandatorily for this card.",
+          "name": "CardRadio",
           "cssProperties": [
             {
               "description": "The width of the card",
@@ -6576,20 +6576,76 @@
             },
             {
               "kind": "field",
-              "name": "selectionType",
+              "name": "name",
               "type": {
-                "text": "SelectionType"
+                "text": "string"
               },
-              "description": "The selection type of the card. It can either be set to 'check' or 'checkbox'",
-              "default": "'check'",
-              "attribute": "selection-type",
-              "reflects": true
+              "default": "''",
+              "description": "The name of the radio.",
+              "attribute": "name"
+            },
+            {
+              "kind": "method",
+              "name": "getAllCardsWithinSameGroup",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "CardRadio[]"
+                }
+              },
+              "description": "Returns all cards within the same group (name)."
             },
             {
               "kind": "method",
               "name": "toggleChecked",
               "privacy": "private",
-              "description": "Toggles the checked state"
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "description": "Handles the change event on the radio element.\nThis will toggle the state of the radio element.\nDispatches the change event."
+            },
+            {
+              "kind": "method",
+              "name": "setDisabled",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "disabled",
+                  "type": {
+                    "text": "boolean"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "updateCardRadio",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "cards",
+                  "type": {
+                    "text": "CardRadio[]"
+                  }
+                },
+                {
+                  "name": "index",
+                  "type": {
+                    "text": "number"
+                  }
+                }
+              ]
             },
             {
               "kind": "method",
@@ -6621,17 +6677,6 @@
               ],
               "description": "Toggles the checked state when space key is used"
             },
-            {
-              "kind": "method",
-              "name": "renderSelection",
-              "privacy": "private",
-              "description": "Renders the selection icon or checkbox based on the selection type",
-              "return": {
-                "type": {
-                  "text": ""
-                }
-              }
-            },
             {
               "kind": "method",
               "name": "renderHeader",
@@ -6905,13 +6950,13 @@
               "fieldName": "checked"
             },
             {
-              "name": "selection-type",
+              "name": "name",
               "type": {
-                "text": "SelectionType"
+                "text": "string"
               },
-              "description": "The selection type of the card. It can either be set to 'check' or 'checkbox'",
-              "default": "'check'",
-              "fieldName": "selectionType"
+              "default": "''",
+              "description": "The name of the radio.",
+              "fieldName": "name"
             },
             {
               "name": "disabled",
@@ -7070,8 +7115,8 @@
             "name": "Card",
             "module": "/src/components/card/card.component"
           },
-          "tagName": "mdc-cardcheckbox",
-          "jsDoc": "/**\n * cardcheckbox component extends `mdc-card` and supports checkbox selection interaction addtionally.\n *\n * While using this component within a form or group of cards, make sure cards are in a role = \"checkbox-group\".\n * This card would have events for selected and unselected (similar to checkbox)\n *\n * **Note**: This is a single selection card i.e. interacting anywhere on the card would toggle the checked state.\n * Make sure to pass only non-interactable elements within the slots.\n *\n * Make sure to pass the `card-title` mandatorily for this card.\n *\n * @tagname mdc-cardcheckbox\n *\n * @dependency mdc-icon\n * @dependency mdc-staticcheckbox\n * @dependency mdc-text\n *\n * @slot before-body - This slot is for passing the content before the body\n * @slot body - This slot is for passing the text content for the card\n * @slot after-body - This slot is for passing the content after the body\n * @slot footer-link - This slot is for passing `mdc-link` component within the footer section.\n * @slot footer-button-primary - This slot is for passing primary variant of `mdc-button` component within the footer section.\n *\n * @csspart header - The header part of the card\n * @csspart icon - The icon part of the card header\n * @csspart body - The body part of the card\n * @csspart image - The image part of the card\n * @csspart footer - The footer part of the card\n * @csspart footer-link - The link part of the card footer\n * @csspart footer-button-primary - The primary button part of the card footer\n * @csspart footer-button-secondary - The secondary button part of the card footer\n * @csspart icon-button - The icon button part of the card header\n * @csspart text - The text part of the card\n * @csspart check - The check part of the card\n * @csspart check-icon - The check icon part of the card\n * @csspart check-icon-button - The check icon button part of the card\n *\n * @cssproperty --mdc-card-width - The width of the card\n *\n * @event click - (React: onClick) Event that gets dispatched when the card is clicked. It toggles the checked state.\n * @event keydown - (React: onKeyDown) This event is dispatched when a key is pressed down on the card.\n * It toggles the checked state when enter key is used.\n * @event keyup - (React: onKeyUp) This event is dispatched when a key is released on the card.\n * It toggles the checked state when space key is used.\n * @event focus - (React: onFocus) Event that gets dispatched when the card receives focus.\n *\n */",
+          "tagName": "mdc-cardradio",
+          "jsDoc": "/**\n * cardradio component extends `mdc-card` and supports radio selection interaction addtionally.\n *\n * While using this component within a form or group of cards, make sure cards are in a role = \"radio-group\".\n * This card would have events for selected and unselected (similar to radio)\n *\n * **Note**: This is a single selection card i.e. interacting anywhere on the card would toggle the checked state.\n * Make sure to pass only non-interactable elements within the slots.\n *\n * Make sure to pass the `card-title` mandatorily for this card.\n *\n * @tagname mdc-cardradio\n *\n * @dependency mdc-icon\n * @dependency mdc-staticradio\n * @dependency mdc-text\n *\n * @slot before-body - This slot is for passing the content before the body\n * @slot body - This slot is for passing the text content for the card\n * @slot after-body - This slot is for passing the content after the body\n * @slot footer-link - This slot is for passing `mdc-link` component within the footer section.\n * @slot footer-button-primary - This slot is for passing primary variant of `mdc-button` component within the footer section.\n *\n * @csspart header - The header part of the card\n * @csspart icon - The icon part of the card header\n * @csspart body - The body part of the card\n * @csspart image - The image part of the card\n * @csspart footer - The footer part of the card\n * @csspart footer-link - The link part of the card footer\n * @csspart footer-button-primary - The primary button part of the card footer\n * @csspart footer-button-secondary - The secondary button part of the card footer\n * @csspart icon-button - The icon button part of the card header\n * @csspart text - The text part of the card\n * @csspart check - The check part of the card\n * @csspart check-icon - The check icon part of the card\n * @csspart check-icon-button - The check icon button part of the card\n *\n * @cssproperty --mdc-card-width - The width of the card\n *\n * @event click - (React: onClick) Event that gets dispatched when the card is clicked. It toggles the checked state.\n * @event keydown - (React: onKeyDown) This event is dispatched when a key is pressed down on the card.\n * It toggles the checked state when enter key is used.\n * @event keyup - (React: onKeyUp) This event is dispatched when a key is released on the card.\n * It toggles the checked state when space key is used.\n * @event focus - (React: onFocus) Event that gets dispatched when the card receives focus.\n *\n */",
           "customElement": true
         }
       ],
@@ -7080,20 +7125,20 @@
           "kind": "js",
           "name": "default",
           "declaration": {
-            "name": "CardCheckbox",
-            "module": "components/cardcheckbox/cardcheckbox.component.js"
+            "name": "CardRadio",
+            "module": "components/cardradio/cardradio.component.js"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "components/cardradio/cardradio.component.js",
+      "path": "components/cardcheckbox/cardcheckbox.component.js",
       "declarations": [
         {
           "kind": "class",
-          "description": "cardradio component extends `mdc-card` and supports radio selection interaction addtionally.\n\nWhile using this component within a form or group of cards, make sure cards are in a role = \"radio-group\".\nThis card would have events for selected and unselected (similar to radio)\n\n**Note**: This is a single selection card i.e. interacting anywhere on the card would toggle the checked state.\nMake sure to pass only non-interactable elements within the slots.\n\nMake sure to pass the `card-title` mandatorily for this card.",
-          "name": "CardRadio",
+          "description": "cardcheckbox component extends `mdc-card` and supports checkbox selection interaction addtionally.\n\nWhile using this component within a form or group of cards, make sure cards are in a role = \"checkbox-group\".\nThis card would have events for selected and unselected (similar to checkbox)\n\n**Note**: This is a single selection card i.e. interacting anywhere on the card would toggle the checked state.\nMake sure to pass only non-interactable elements within the slots.\n\nMake sure to pass the `card-title` mandatorily for this card.",
+          "name": "CardCheckbox",
           "cssProperties": [
             {
               "description": "The width of the card",
@@ -7270,76 +7315,20 @@
             },
             {
               "kind": "field",
-              "name": "name",
+              "name": "selectionType",
               "type": {
-                "text": "string"
-              },
-              "default": "''",
-              "description": "The name of the radio.",
-              "attribute": "name"
-            },
-            {
-              "kind": "method",
-              "name": "getAllCardsWithinSameGroup",
-              "privacy": "private",
-              "return": {
-                "type": {
-                  "text": "CardRadio[]"
-                }
+                "text": "SelectionType"
               },
-              "description": "Returns all cards within the same group (name)."
+              "description": "The selection type of the card. It can either be set to 'check' or 'checkbox'",
+              "default": "'check'",
+              "attribute": "selection-type",
+              "reflects": true
             },
             {
               "kind": "method",
               "name": "toggleChecked",
               "privacy": "private",
-              "return": {
-                "type": {
-                  "text": "void"
-                }
-              },
-              "description": "Handles the change event on the radio element.\nThis will toggle the state of the radio element.\nDispatches the change event."
-            },
-            {
-              "kind": "method",
-              "name": "setDisabled",
-              "return": {
-                "type": {
-                  "text": "void"
-                }
-              },
-              "parameters": [
-                {
-                  "name": "disabled",
-                  "type": {
-                    "text": "boolean"
-                  }
-                }
-              ]
-            },
-            {
-              "kind": "method",
-              "name": "updateCardRadio",
-              "privacy": "private",
-              "return": {
-                "type": {
-                  "text": "void"
-                }
-              },
-              "parameters": [
-                {
-                  "name": "cards",
-                  "type": {
-                    "text": "CardRadio[]"
-                  }
-                },
-                {
-                  "name": "index",
-                  "type": {
-                    "text": "number"
-                  }
-                }
-              ]
+              "description": "Toggles the checked state"
             },
             {
               "kind": "method",
@@ -7371,6 +7360,17 @@
               ],
               "description": "Toggles the checked state when space key is used"
             },
+            {
+              "kind": "method",
+              "name": "renderSelection",
+              "privacy": "private",
+              "description": "Renders the selection icon or checkbox based on the selection type",
+              "return": {
+                "type": {
+                  "text": ""
+                }
+              }
+            },
             {
               "kind": "method",
               "name": "renderHeader",
@@ -7644,13 +7644,13 @@
               "fieldName": "checked"
             },
             {
-              "name": "name",
+              "name": "selection-type",
               "type": {
-                "text": "string"
+                "text": "SelectionType"
               },
-              "default": "''",
-              "description": "The name of the radio.",
-              "fieldName": "name"
+              "description": "The selection type of the card. It can either be set to 'check' or 'checkbox'",
+              "default": "'check'",
+              "fieldName": "selectionType"
             },
             {
               "name": "disabled",
@@ -7809,8 +7809,8 @@
             "name": "Card",
             "module": "/src/components/card/card.component"
           },
-          "tagName": "mdc-cardradio",
-          "jsDoc": "/**\n * cardradio component extends `mdc-card` and supports radio selection interaction addtionally.\n *\n * While using this component within a form or group of cards, make sure cards are in a role = \"radio-group\".\n * This card would have events for selected and unselected (similar to radio)\n *\n * **Note**: This is a single selection card i.e. interacting anywhere on the card would toggle the checked state.\n * Make sure to pass only non-interactable elements within the slots.\n *\n * Make sure to pass the `card-title` mandatorily for this card.\n *\n * @tagname mdc-cardradio\n *\n * @dependency mdc-icon\n * @dependency mdc-staticradio\n * @dependency mdc-text\n *\n * @slot before-body - This slot is for passing the content before the body\n * @slot body - This slot is for passing the text content for the card\n * @slot after-body - This slot is for passing the content after the body\n * @slot footer-link - This slot is for passing `mdc-link` component within the footer section.\n * @slot footer-button-primary - This slot is for passing primary variant of `mdc-button` component within the footer section.\n *\n * @csspart header - The header part of the card\n * @csspart icon - The icon part of the card header\n * @csspart body - The body part of the card\n * @csspart image - The image part of the card\n * @csspart footer - The footer part of the card\n * @csspart footer-link - The link part of the card footer\n * @csspart footer-button-primary - The primary button part of the card footer\n * @csspart footer-button-secondary - The secondary button part of the card footer\n * @csspart icon-button - The icon button part of the card header\n * @csspart text - The text part of the card\n * @csspart check - The check part of the card\n * @csspart check-icon - The check icon part of the card\n * @csspart check-icon-button - The check icon button part of the card\n *\n * @cssproperty --mdc-card-width - The width of the card\n *\n * @event click - (React: onClick) Event that gets dispatched when the card is clicked. It toggles the checked state.\n * @event keydown - (React: onKeyDown) This event is dispatched when a key is pressed down on the card.\n * It toggles the checked state when enter key is used.\n * @event keyup - (React: onKeyUp) This event is dispatched when a key is released on the card.\n * It toggles the checked state when space key is used.\n * @event focus - (React: onFocus) Event that gets dispatched when the card receives focus.\n *\n */",
+          "tagName": "mdc-cardcheckbox",
+          "jsDoc": "/**\n * cardcheckbox component extends `mdc-card` and supports checkbox selection interaction addtionally.\n *\n * While using this component within a form or group of cards, make sure cards are in a role = \"checkbox-group\".\n * This card would have events for selected and unselected (similar to checkbox)\n *\n * **Note**: This is a single selection card i.e. interacting anywhere on the card would toggle the checked state.\n * Make sure to pass only non-interactable elements within the slots.\n *\n * Make sure to pass the `card-title` mandatorily for this card.\n *\n * @tagname mdc-cardcheckbox\n *\n * @dependency mdc-icon\n * @dependency mdc-staticcheckbox\n * @dependency mdc-text\n *\n * @slot before-body - This slot is for passing the content before the body\n * @slot body - This slot is for passing the text content for the card\n * @slot after-body - This slot is for passing the content after the body\n * @slot footer-link - This slot is for passing `mdc-link` component within the footer section.\n * @slot footer-button-primary - This slot is for passing primary variant of `mdc-button` component within the footer section.\n *\n * @csspart header - The header part of the card\n * @csspart icon - The icon part of the card header\n * @csspart body - The body part of the card\n * @csspart image - The image part of the card\n * @csspart footer - The footer part of the card\n * @csspart footer-link - The link part of the card footer\n * @csspart footer-button-primary - The primary button part of the card footer\n * @csspart footer-button-secondary - The secondary button part of the card footer\n * @csspart icon-button - The icon button part of the card header\n * @csspart text - The text part of the card\n * @csspart check - The check part of the card\n * @csspart check-icon - The check icon part of the card\n * @csspart check-icon-button - The check icon button part of the card\n *\n * @cssproperty --mdc-card-width - The width of the card\n *\n * @event click - (React: onClick) Event that gets dispatched when the card is clicked. It toggles the checked state.\n * @event keydown - (React: onKeyDown) This event is dispatched when a key is pressed down on the card.\n * It toggles the checked state when enter key is used.\n * @event keyup - (React: onKeyUp) This event is dispatched when a key is released on the card.\n * It toggles the checked state when space key is used.\n * @event focus - (React: onFocus) Event that gets dispatched when the card receives focus.\n *\n */",
           "customElement": true
         }
       ],
@@ -7819,8 +7819,8 @@
           "kind": "js",
           "name": "default",
           "declaration": {
-            "name": "CardRadio",
-            "module": "components/cardradio/cardradio.component.js"
+            "name": "CardCheckbox",
+            "module": "components/cardcheckbox/cardcheckbox.component.js"
           }
         }
       ]
@@ -30722,189 +30722,89 @@
     },
     {
       "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",
-          "slots": [
+          "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.\nThe component ensures accessibility and usability while handling various use cases,\nincluding long text truncation with tooltip support.\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.\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.",
+          "name": "Select",
+          "cssProperties": [
             {
-              "description": "Slot for input chips",
-              "name": "filters"
-            }
-          ],
-          "members": [
+              "description": "The background color of the combobox of select.",
+              "name": "--mdc-select-background-color"
+            },
             {
-              "kind": "field",
-              "name": "inputChips",
-              "type": {
-                "text": "Array<HTMLElement> | undefined"
-              }
+              "description": "The background color of the combobox of select when hovered.",
+              "name": "--mdc-select-background-color-hover"
             },
             {
-              "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"
-              }
+              "description": "The background color of the combobox of select when active.",
+              "name": "--mdc-select-background-color-active"
             },
             {
-              "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."
+              "description": "The background color of the combobox of select when disabled.",
+              "name": "--mdc-select-background-color-disabled"
             },
             {
-              "kind": "method",
-              "name": "clearInputText",
-              "privacy": "protected",
-              "description": "Clears the input field.",
-              "inheritedFrom": {
-                "name": "Input",
-                "module": "components/input/input.component.js"
-              }
+              "description": "The text color of the select.",
+              "name": "--mdc-select-text-color"
             },
             {
-              "kind": "field",
-              "name": "name",
-              "type": {
-                "text": "string"
-              },
-              "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"
-              }
+              "description": "The text color of the selected option in the select.",
+              "name": "--mdc-select-text-color-selected"
             },
             {
-              "kind": "field",
-              "name": "value",
-              "type": {
-                "text": "string"
-              },
-              "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"
-              }
+              "description": "The text color of the select when disabled.",
+              "name": "--mdc-select-text-color-disabled"
             },
             {
-              "kind": "field",
-              "name": "validationMessage",
-              "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,
-              "inheritedFrom": {
-                "name": "FormInternalsMixin",
-                "module": "utils/mixins/FormInternalsMixin.js"
-              }
+              "description": "The border color of the select.",
+              "name": "--mdc-select-border-color"
             },
             {
-              "kind": "field",
-              "name": "validity",
-              "type": {
-                "text": "ValidityState"
-              },
-              "readonly": true,
-              "inheritedFrom": {
-                "name": "FormInternalsMixin",
-                "module": "utils/mixins/FormInternalsMixin.js"
-              }
+              "description": "The border color of the select when disabled.",
+              "name": "--mdc-select-border-color-disabled"
             },
             {
-              "kind": "field",
-              "name": "willValidate",
-              "readonly": true,
-              "inheritedFrom": {
-                "name": "FormInternalsMixin",
-                "module": "utils/mixins/FormInternalsMixin.js"
-              }
+              "description": "The border color of the select when in success state.",
+              "name": "--mdc-select-border-color-success"
             },
             {
-              "kind": "method",
-              "name": "setValidity",
-              "description": "Sets the validity of the input field based on the input field's validity.",
-              "return": {
-                "type": {
-                  "text": ""
-                }
-              },
-              "inheritedFrom": {
-                "name": "FormInternalsMixin",
-                "module": "utils/mixins/FormInternalsMixin.js"
-              }
+              "description": "The border color of the select when in warning state.",
+              "name": "--mdc-select-border-color-warning"
             },
             {
-              "kind": "method",
-              "name": "checkValidity",
-              "return": {
-                "type": {
-                  "text": "boolean"
-                }
-              },
-              "inheritedFrom": {
-                "name": "FormInternalsMixin",
-                "module": "utils/mixins/FormInternalsMixin.js"
-              }
+              "description": "The border color of the select when in error state.",
+              "name": "--mdc-select-border-color-error"
             },
             {
-              "kind": "method",
-              "name": "reportValidity",
-              "inheritedFrom": {
-                "name": "FormInternalsMixin",
-                "module": "utils/mixins/FormInternalsMixin.js"
-              }
+              "description": "The width of the select.",
+              "name": "--mdc-select-width"
             },
             {
-              "kind": "field",
-              "name": "dataAriaLabel",
-              "type": {
-                "text": "string | null"
-              },
-              "default": "null",
-              "description": "Defines a string value that labels the current element.\nThe Aria-Label attribute to be set for accessibility.",
-              "attribute": "data-aria-label",
-              "reflects": true,
-              "inheritedFrom": {
-                "name": "DataAriaLabelMixin",
-                "module": "utils/mixins/DataAriaLabelMixin.js"
-              }
+              "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"
+            }
+          ],
+          "slots": [
+            {
+              "description": "This is a default/unnamed slot for Selectlistbox including options and/or option group.",
+              "name": "default"
+            }
+          ],
+          "members": [
             {
               "kind": "field",
               "name": "placeholder",
               "type": {
-                "text": "string"
+                "text": "string | undefined"
               },
-              "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"
-              }
+              "description": "The placeholder text which will be shown on the text if provided.",
+              "attribute": "placeholder"
             },
             {
               "kind": "field",
@@ -30913,311 +30813,409 @@
                 "text": "boolean"
               },
               "default": "false",
-              "description": "readonly attribute of the input field. If true, the input field is read-only.",
-              "attribute": "readonly",
-              "inheritedFrom": {
-                "name": "Input",
-                "module": "components/input/input.component.js"
-              }
+              "description": "readonly attribute of the select field. If true, the select is read-only.",
+              "attribute": "readonly"
             },
             {
               "kind": "field",
-              "name": "prefixText",
+              "name": "placement",
               "type": {
-                "text": "string | undefined"
+                "text": "Placement"
               },
-              "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"
-              }
+              "description": "The placeholder text which will be shown on the text if provided.",
+              "attribute": "placement",
+              "reflects": true
             },
             {
               "kind": "field",
-              "name": "leadingIcon",
+              "name": "softDisabled",
               "type": {
-                "text": "IconNames | undefined"
+                "text": "boolean | undefined"
               },
-              "description": "The leading icon that is displayed before the input field.",
-              "attribute": "leading-icon",
-              "inheritedFrom": {
-                "name": "Input",
-                "module": "components/input/input.component.js"
-              }
+              "description": "Indicates whether the select is soft disabled.\nWhen set to `true`, the select appears visually disabled but still allows\nfocus.",
+              "default": "undefined",
+              "attribute": "soft-disabled"
             },
             {
               "kind": "field",
-              "name": "trailingButton",
+              "name": "boundary",
               "type": {
-                "text": "boolean"
+                "text": "'clippingAncestors' | string"
               },
-              "default": "false",
-              "description": "The trailing button when set to true, shows a clear button that clears the input field.",
-              "attribute": "trailing-button",
-              "inheritedFrom": {
-                "name": "Input",
-                "module": "components/input/input.component.js"
-              }
+              "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
             },
             {
               "kind": "field",
-              "name": "maxlength",
+              "name": "strategy",
               "type": {
-                "text": "number | undefined"
+                "text": "'absolute' | 'fixed'"
               },
-              "description": "The maximum number of characters that the input field can accept.",
-              "attribute": "maxlength",
-              "inheritedFrom": {
-                "name": "Input",
-                "module": "components/input/input.component.js"
+              "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
+            },
+            {
+              "kind": "method",
+              "name": "getAllValidOptions",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "Array<Option>"
+                }
               }
             },
             {
-              "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": "method",
+              "name": "getFirstValidOption",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "Option | null"
+                }
               }
             },
             {
-              "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": "method",
+              "name": "getLastValidOption",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "Option | null"
+                }
               }
             },
             {
-              "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": "method",
+              "name": "getFirstSelectedOption",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "Option | null"
+                }
               }
             },
             {
-              "kind": "field",
-              "name": "autofocus",
-              "type": {
-                "text": "boolean"
+              "kind": "method",
+              "name": "modifyListBoxWrapper",
+              "privacy": "private",
+              "description": "Modifies the listbox wrapper to ensure it has the correct attributes\nand IDs for accessibility.\n\nOnce [ariaOwnsElements](https://developer.mozilla.org/en-US/docs/Web/API/ElementInternals/ariaOwnsElements) is supported in browsers,\nthis an be removed and mdc-option can be used directly in the select component with a listbox in a different\nshadow root and aria-owns attribute to connect them."
+            },
+            {
+              "kind": "method",
+              "name": "handleOptionsClick",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
               },
-              "default": "false",
-              "description": "If true, the input field is focused when the component is rendered.",
-              "attribute": "autofocus",
-              "inheritedFrom": {
-                "name": "Input",
-                "module": "components/input/input.component.js"
-              }
+              "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": "field",
-              "name": "dirname",
-              "type": {
-                "text": "string | undefined"
+              "kind": "method",
+              "name": "setSelectedOption",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
               },
-              "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"
-              }
+              "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": "pattern",
-              "type": {
-                "text": "string | undefined"
+              "kind": "method",
+              "name": "updateTabIndexForAllOptions",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
               },
-              "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"
-              }
+              "parameters": [
+                {
+                  "name": "option",
+                  "optional": true,
+                  "type": {
+                    "text": "Option | null"
+                  },
+                  "description": "The option which tabIndex should be set to 0."
+                }
+              ],
+              "description": "Updates the tabindex of all options.\nSets the tabindex of the selected option to '0' and others to '-1'."
             },
             {
-              "kind": "field",
-              "name": "list",
-              "type": {
-                "text": "string | undefined"
+              "kind": "method",
+              "name": "updateSelectedInChildOptions",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
               },
-              "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"
-              }
+              "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": "field",
-              "name": "size",
-              "type": {
-                "text": "number | undefined | undefined"
+              "kind": "method",
+              "name": "fireEvents",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
               },
-              "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"
-              }
+              "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": "field",
-              "name": "clearAriaLabel",
-              "type": {
-                "text": "string"
+              "kind": "method",
+              "name": "dispatchChange",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
               },
-              "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"
-              }
+              "parameters": [
+                {
+                  "name": "option",
+                  "type": {
+                    "text": "Option"
+                  }
+                }
+              ]
             },
             {
               "kind": "method",
-              "name": "setInputValidity",
+              "name": "dispatchInput",
               "privacy": "private",
-              "inheritedFrom": {
-                "name": "Input",
-                "module": "components/input/input.component.js"
-              }
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "option",
+                  "type": {
+                    "text": "Option"
+                  }
+                }
+              ]
             },
             {
               "kind": "method",
-              "name": "updateValue",
+              "name": "handleClickCombobox",
               "privacy": "private",
-              "description": "Updates the value of the input field.\nSets the form value.",
               "return": {
                 "type": {
-                  "text": ""
+                  "text": "void"
                 }
               },
-              "inheritedFrom": {
-                "name": "Input",
-                "module": "components/input/input.component.js"
-              }
+              "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": "onInput",
+              "name": "handleKeydownCombobox",
               "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"
-              }
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "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."
             },
             {
               "kind": "method",
-              "name": "onChange",
+              "name": "handlePopoverKeydown",
               "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
               "parameters": [
                 {
                   "name": "event",
                   "type": {
-                    "text": "Event"
+                    "text": "KeyboardEvent"
                   },
-                  "description": "Event which contains information about the value change."
+                  "description": "The keyboard event."
                 }
               ],
-              "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"
-              }
+              "description": "Handles the keydown event on the select element when the popover is open.\nThe options are as follows:\n- HOME: Sets focus and tabindex on the first option.\n- END: Sets focus and tabindex on the last option.\n- ARROW_DOWN, ARROW_UP, PAGE_DOWN, PAGE_UP: Handles navigation between options."
             },
             {
               "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.",
+              "name": "updateState",
+              "privacy": "public",
               "return": {
                 "type": {
-                  "text": ""
+                  "text": "void"
                 }
               },
+              "description": "Updates the state of the select component.\nThis public method should be fired when the selected on the option components is updated from the outside.\nIt ensures that the selected attribute is set correctly on the options\nand that the aria-selected attribute is updated accordingly."
+            },
+            {
+              "kind": "field",
+              "name": "name",
+              "type": {
+                "text": "string"
+              },
+              "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": "Input",
-                "module": "components/input/input.component.js"
+                "name": "FormInternalsMixin",
+                "module": "utils/mixins/FormInternalsMixin.js"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "value",
+              "type": {
+                "text": "string"
+              },
+              "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": "validationMessage",
+              "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,
+              "inheritedFrom": {
+                "name": "FormInternalsMixin",
+                "module": "utils/mixins/FormInternalsMixin.js"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "validity",
+              "type": {
+                "text": "ValidityState"
+              },
+              "readonly": true,
+              "inheritedFrom": {
+                "name": "FormInternalsMixin",
+                "module": "utils/mixins/FormInternalsMixin.js"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "willValidate",
+              "readonly": true,
+              "inheritedFrom": {
+                "name": "FormInternalsMixin",
+                "module": "utils/mixins/FormInternalsMixin.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.",
+              "name": "setValidity",
+              "description": "Sets the validity of the input field based on the input field's validity.",
               "return": {
                 "type": {
                   "text": ""
                 }
               },
               "inheritedFrom": {
-                "name": "Input",
-                "module": "components/input/input.component.js"
+                "name": "FormInternalsMixin",
+                "module": "utils/mixins/FormInternalsMixin.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.",
+              "name": "checkValidity",
               "return": {
                 "type": {
-                  "text": ""
+                  "text": "boolean"
                 }
               },
               "inheritedFrom": {
-                "name": "Input",
-                "module": "components/input/input.component.js"
+                "name": "FormInternalsMixin",
+                "module": "utils/mixins/FormInternalsMixin.js"
               }
             },
             {
               "kind": "method",
-              "name": "renderInputElement",
-              "privacy": "protected",
-              "parameters": [
-                {
-                  "name": "type",
-                  "type": {
-                    "text": "InputType"
-                  }
-                },
-                {
-                  "name": "hidePlaceholder",
-                  "default": "false"
-                }
-              ],
+              "name": "reportValidity",
               "inheritedFrom": {
-                "name": "Input",
-                "module": "components/input/input.component.js"
+                "name": "FormInternalsMixin",
+                "module": "utils/mixins/FormInternalsMixin.js"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "dataAriaLabel",
+              "type": {
+                "text": "string | null"
+              },
+              "default": "null",
+              "description": "Defines a string value that labels the current element.\nThe Aria-Label attribute to be set for accessibility.",
+              "attribute": "data-aria-label",
+              "reflects": true,
+              "inheritedFrom": {
+                "name": "DataAriaLabelMixin",
+                "module": "utils/mixins/DataAriaLabelMixin.js"
               }
             },
             {
@@ -31427,71 +31425,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": "readonly",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "readonly attribute of the select field. If true, the select is read-only.",
+              "fieldName": "readonly"
             },
             {
-              "name": "clear",
+              "name": "placement",
               "type": {
-                "text": "CustomEvent"
+                "text": "Placement"
               },
-              "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": "The placeholder text which will be shown on the text if provided.",
+              "fieldName": "placement"
             },
             {
+              "name": "soft-disabled",
               "type": {
-                "text": "EventConstructor"
+                "text": "boolean | undefined"
               },
-              "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 */",
-          "customElement": true,
-          "attributes": [
+              "description": "Indicates whether the select is soft disabled.\nWhen set to `true`, the select appears visually disabled but still allows\nfocus.",
+              "default": "undefined",
+              "fieldName": "softDisabled"
+            },
+            {
+              "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"
+            },
+            {
+              "name": "strategy",
+              "type": {
+                "text": "'absolute' | 'fixed'"
+              },
+              "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": "name",
               "type": {
@@ -31544,201 +31561,13 @@
               }
             },
             {
-              "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",
-              "inheritedFrom": {
-                "name": "Input",
-                "module": "src/components/input/input.component.ts"
-              }
-            },
-            {
-              "name": "readonly",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "readonly attribute of the input field. If true, the input field is read-only.",
-              "fieldName": "readonly",
-              "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": "autofocus",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "If true, the input field is focused when the component is rendered.",
-              "fieldName": "autofocus",
-              "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",
+              "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"
@@ -31844,136 +31673,23 @@
               }
             }
           ],
-          "cssProperties": [
-            {
-              "description": "Border color for the input container when disabled",
-              "name": "--mdc-input-disabled-border-color",
-              "inheritedFrom": {
-                "name": "Input",
-                "module": "src/components/input/input.component.ts"
-              }
-            },
-            {
-              "description": "Text color for the input field when disabled",
-              "name": "--mdc-input-disabled-text-color",
-              "inheritedFrom": {
-                "name": "Input",
-                "module": "src/components/input/input.component.ts"
-              }
-            },
-            {
-              "description": "Background color for the input field when disabled",
-              "name": "--mdc-input-disabled-background-color",
-              "inheritedFrom": {
-                "name": "Input",
-                "module": "src/components/input/input.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": "Text color for the input field",
-              "name": "--mdc-input-text-color",
-              "inheritedFrom": {
-                "name": "Input",
-                "module": "src/components/input/input.component.ts"
-              }
-            },
-            {
-              "description": "Background color for the input field",
-              "name": "--mdc-input-background-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"
-              }
-            },
-            {
-              "description": "Text color for the selected text",
-              "name": "--mdc-input-selection-text-color",
-              "inheritedFrom": {
-                "name": "Input",
-                "module": "src/components/input/input.component.ts"
-              }
-            },
-            {
-              "description": "Text color for the help text",
-              "name": "--mdc-input-support-text-color",
-              "inheritedFrom": {
-                "name": "Input",
-                "module": "src/components/input/input.component.ts"
-              }
-            },
-            {
-              "description": "Background color for the input field when hovered",
-              "name": "--mdc-input-hover-background-color",
-              "inheritedFrom": {
-                "name": "Input",
-                "module": "src/components/input/input.component.ts"
-              }
-            },
-            {
-              "description": "Background color for the input field when focused",
-              "name": "--mdc-input-focused-background-color",
-              "inheritedFrom": {
-                "name": "Input",
-                "module": "src/components/input/input.component.ts"
-              }
-            },
-            {
-              "description": "Border color for the input container when focused",
-              "name": "--mdc-input-focused-border-color",
-              "inheritedFrom": {
-                "name": "Input",
-                "module": "src/components/input/input.component.ts"
-              }
-            },
-            {
-              "description": "Border color for the input container when error",
-              "name": "--mdc-input-error-border-color",
-              "inheritedFrom": {
-                "name": "Input",
-                "module": "src/components/input/input.component.ts"
-              }
-            },
-            {
-              "description": "Border color for the input container when warning",
-              "name": "--mdc-input-warning-border-color",
-              "inheritedFrom": {
-                "name": "Input",
-                "module": "src/components/input/input.component.ts"
-              }
-            },
+          "mixins": [
             {
-              "description": "Border color for the input container when success",
-              "name": "--mdc-input-success-border-color",
-              "inheritedFrom": {
-                "name": "Input",
-                "module": "src/components/input/input.component.ts"
-              }
+              "name": "FormInternalsMixin",
+              "module": "/src/utils/mixins/FormInternalsMixin"
             },
             {
-              "description": "Border color for the input container when primary",
-              "name": "--mdc-input-primary-border-color",
-              "inheritedFrom": {
-                "name": "Input",
-                "module": "src/components/input/input.component.ts"
-              }
+              "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 * The component ensures accessibility and usability while handling various use cases,\n * 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-select` and wrap options/optgroup in it to ensure proper accessibility functionality. Read more about it in SelectListBox documentation.\n *\n * @dependency mdc-button\n * @dependency mdc-icon\n * @dependency mdc-popover\n * @dependency mdc-text\n * @dependency mdc-toggletip\n *\n * @tagname mdc-select\n *\n * @slot default - This is a default/unnamed slot for Selectlistbox including options and/or option group.\n *\n * @event click - (React: onClick) This event is dispatched when the select is clicked.\n * @event change - (React: onChange) This event is dispatched when the select is changed.\n * @event input - (React: onInput) This event is dispatched when the select is changed.\n * @event keydown - (React: onKeyDown) This event is dispatched when a key is pressed down on the select.\n * @event focus - (React: onFocus) This event is dispatched when the select receives focus.\n *\n * @cssproperty --mdc-select-background-color - The background color of the combobox of select.\n * @cssproperty --mdc-select-background-color-hover - The background color of the combobox of select when hovered.\n * @cssproperty --mdc-select-background-color-active - The background color of the combobox of select when active.\n * @cssproperty --mdc-select-background-color-disabled - The background color of the combobox of select when disabled.\n * @cssproperty --mdc-select-text-color - The text color of the select.\n * @cssproperty --mdc-select-text-color-selected - The text color of the selected option in the select.\n * @cssproperty --mdc-select-text-color-disabled - The text color of the select when disabled.\n * @cssproperty --mdc-select-border-color - The border color of the select.\n * @cssproperty --mdc-select-border-color-disabled - The border color of the select when disabled.\n * @cssproperty --mdc-select-border-color-success - The border color of the select when in success state.\n * @cssproperty --mdc-select-border-color-warning - The border color of the select when in warning state.\n * @cssproperty --mdc-select-border-color-error - The border color of the select when in error state.\n * @cssproperty --mdc-select-width - The width of the select.\n * @cssproperty --mdc-select-listbox-height - The height of the listbox inside the select.\n * @cssproperty --mdc-select-listbox-width - The width of the listbox inside the select (default: `--mdc-select-width`).\n */",
+          "customElement": true
         }
       ],
       "exports": [
@@ -31981,510 +31697,550 @@
           "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/selectlistbox/selectlistbox.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.\nThe component ensures accessibility and usability while handling various use cases,\nincluding long text truncation with tooltip support.\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.\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.",
-          "name": "Select",
-          "cssProperties": [
-            {
-              "description": "The background color of the combobox of select.",
-              "name": "--mdc-select-background-color"
-            },
-            {
-              "description": "The background color of the combobox of select when hovered.",
-              "name": "--mdc-select-background-color-hover"
-            },
-            {
-              "description": "The background color of the combobox of select when active.",
-              "name": "--mdc-select-background-color-active"
-            },
-            {
-              "description": "The background color of the combobox of select when disabled.",
-              "name": "--mdc-select-background-color-disabled"
-            },
-            {
-              "description": "The text color of the select.",
-              "name": "--mdc-select-text-color"
-            },
-            {
-              "description": "The text color of the selected option in the select.",
-              "name": "--mdc-select-text-color-selected"
-            },
-            {
-              "description": "The text color of the select when disabled.",
-              "name": "--mdc-select-text-color-disabled"
-            },
-            {
-              "description": "The border color of the select.",
-              "name": "--mdc-select-border-color"
-            },
-            {
-              "description": "The border color of the select when disabled.",
-              "name": "--mdc-select-border-color-disabled"
-            },
-            {
-              "description": "The border color of the select when in success state.",
-              "name": "--mdc-select-border-color-success"
-            },
-            {
-              "description": "The border color of the select when in warning state.",
-              "name": "--mdc-select-border-color-warning"
-            },
+          "description": "Selectlistbox component as Light DOM component to act as a simple wrapper\nfor mdc-option components to ensure accessibility and proper role assignment.\n\nOnce [ariaOwnsElements](https://developer.mozilla.org/en-US/docs/Web/API/ElementInternals/ariaOwnsElements) is supported in browsers, this component can be removed\nand mdc-option can be used directly in the select component with a listbox in a different\nshadow root and aria-owns attribute to connect them.",
+          "name": "Selectlistbox",
+          "slots": [
             {
-              "description": "The border color of the select when in error state.",
-              "name": "--mdc-select-border-color-error"
-            },
+              "description": "This is a default/unnamed slot, which can be used to insert mdc-option components.",
+              "name": "default"
+            }
+          ],
+          "members": [
             {
-              "description": "The width of the select.",
-              "name": "--mdc-select-width"
+              "kind": "field",
+              "name": "role"
             }
           ],
+          "superclass": {
+            "name": "Component",
+            "module": "/src/models"
+          },
+          "tagName": "mdc-selectlistbox",
+          "jsDoc": "/**\n * Selectlistbox component as Light DOM component to act as a simple wrapper\n * for mdc-option components to ensure accessibility and proper role assignment.\n *\n * Once [ariaOwnsElements](https://developer.mozilla.org/en-US/docs/Web/API/ElementInternals/ariaOwnsElements) is supported in browsers, this component can be removed\n * and mdc-option can be used directly in the select component with a listbox in a different\n * shadow root and aria-owns attribute to connect them.\n *\n * @tagname mdc-selectlistbox\n *\n * @slot default - This is a default/unnamed slot, which can be used to insert mdc-option components.\n */",
+          "customElement": true
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "default",
+          "declaration": {
+            "name": "Selectlistbox",
+            "module": "components/selectlistbox/selectlistbox.component.js"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "components/searchfield/searchfield.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",
           "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"
             }
           ],
           "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": "readonly",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "readonly attribute of the select field. If true, the select is read-only.",
-              "attribute": "readonly"
+              "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": "field",
-              "name": "height",
-              "type": {
-                "text": "string"
-              },
-              "default": "'auto'",
-              "description": "height attribute of the select field. If set,\nthen a scroll bar will be visible when there more options than the adjusted height.",
-              "attribute": "height"
+              "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": "placement",
+              "name": "name",
               "type": {
-                "text": "Placement"
+                "text": "string"
               },
-              "description": "The placeholder text which will be shown on the text if provided.",
-              "attribute": "placement",
-              "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": "softDisabled",
+              "name": "value",
               "type": {
-                "text": "boolean | undefined"
+                "text": "string"
               },
-              "description": "Indicates whether the select is soft disabled.\nWhen set to `true`, the select appears visually disabled but still allows\nfocus.",
-              "default": "undefined",
-              "attribute": "soft-disabled"
+              "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": "boundary",
+              "name": "validationMessage",
               "type": {
-                "text": "'clippingAncestors' | string"
+                "text": "string | undefined"
               },
-              "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": "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": "field",
-              "name": "strategy",
+              "name": "validity",
               "type": {
-                "text": "'absolute' | 'fixed'"
+                "text": "ValidityState"
               },
-              "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
-            },
-            {
-              "kind": "method",
-              "name": "getAllValidOptions",
-              "privacy": "private",
-              "return": {
-                "type": {
-                  "text": "Array<Option>"
-                }
+              "readonly": true,
+              "inheritedFrom": {
+                "name": "FormInternalsMixin",
+                "module": "utils/mixins/FormInternalsMixin.js"
               }
             },
             {
-              "kind": "method",
-              "name": "getFirstValidOption",
-              "privacy": "private",
-              "return": {
-                "type": {
-                  "text": "Option | null"
-                }
+              "kind": "field",
+              "name": "willValidate",
+              "readonly": true,
+              "inheritedFrom": {
+                "name": "FormInternalsMixin",
+                "module": "utils/mixins/FormInternalsMixin.js"
               }
             },
             {
               "kind": "method",
-              "name": "getLastValidOption",
-              "privacy": "private",
+              "name": "setValidity",
+              "description": "Sets the validity of the input field based on the input field's validity.",
               "return": {
                 "type": {
-                  "text": "Option | null"
+                  "text": ""
                 }
+              },
+              "inheritedFrom": {
+                "name": "FormInternalsMixin",
+                "module": "utils/mixins/FormInternalsMixin.js"
               }
             },
             {
               "kind": "method",
-              "name": "getFirstSelectedOption",
-              "privacy": "private",
+              "name": "checkValidity",
               "return": {
                 "type": {
-                  "text": "Option | null"
+                  "text": "boolean"
                 }
+              },
+              "inheritedFrom": {
+                "name": "FormInternalsMixin",
+                "module": "utils/mixins/FormInternalsMixin.js"
               }
             },
             {
               "kind": "method",
-              "name": "modifyListBoxWrapper",
-              "privacy": "private",
-              "description": "Modifies the listbox wrapper to ensure it has the correct attributes\nand IDs for accessibility.\n\nOnce [ariaOwnsElements](https://developer.mozilla.org/en-US/docs/Web/API/ElementInternals/ariaOwnsElements) is supported in browsers,\nthis an be removed and mdc-option can be used directly in the select component with a listbox in a different\nshadow root and aria-owns attribute to connect them."
+              "name": "reportValidity",
+              "inheritedFrom": {
+                "name": "FormInternalsMixin",
+                "module": "utils/mixins/FormInternalsMixin.js"
+              }
             },
             {
-              "kind": "method",
-              "name": "handleOptionsClick",
-              "privacy": "private",
-              "return": {
-                "type": {
-                  "text": "void"
-                }
+              "kind": "field",
+              "name": "dataAriaLabel",
+              "type": {
+                "text": "string | null"
               },
-              "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."
+              "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": "setSelectedOption",
-              "privacy": "private",
-              "return": {
-                "type": {
-                  "text": "void"
-                }
+              "kind": "field",
+              "name": "placeholder",
+              "type": {
+                "text": "string"
               },
-              "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."
+              "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": "updateTabIndexForAllOptions",
-              "privacy": "private",
-              "return": {
-                "type": {
-                  "text": "void"
-                }
+              "kind": "field",
+              "name": "readonly",
+              "type": {
+                "text": "boolean"
               },
-              "parameters": [
-                {
-                  "name": "option",
-                  "optional": true,
-                  "type": {
-                    "text": "Option | null"
-                  },
-                  "description": "The option which tabIndex should be set to 0."
-                }
-              ],
-              "description": "Updates the tabindex of all options.\nSets the tabindex of the selected option to '0' and others to '-1'."
+              "default": "false",
+              "description": "readonly attribute of the input field. If true, the input field is read-only.",
+              "attribute": "readonly",
+              "inheritedFrom": {
+                "name": "Input",
+                "module": "components/input/input.component.js"
+              }
             },
             {
-              "kind": "method",
-              "name": "updateSelectedInChildOptions",
-              "privacy": "private",
-              "return": {
-                "type": {
-                  "text": "void"
-                }
+              "kind": "field",
+              "name": "prefixText",
+              "type": {
+                "text": "string | undefined"
               },
-              "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"
+              "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": "fireEvents",
-              "privacy": "private",
-              "return": {
-                "type": {
-                  "text": "void"
-                }
+              "kind": "field",
+              "name": "leadingIcon",
+              "type": {
+                "text": "IconNames | undefined"
               },
-              "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."
+              "description": "The leading icon that is displayed before the input field.",
+              "attribute": "leading-icon",
+              "inheritedFrom": {
+                "name": "Input",
+                "module": "components/input/input.component.js"
+              }
             },
             {
-              "kind": "method",
-              "name": "dispatchChange",
-              "privacy": "private",
-              "return": {
-                "type": {
-                  "text": "void"
-                }
+              "kind": "field",
+              "name": "trailingButton",
+              "type": {
+                "text": "boolean"
               },
-              "parameters": [
-                {
-                  "name": "option",
-                  "type": {
-                    "text": "Option"
-                  }
-                }
-              ]
+              "default": "false",
+              "description": "The trailing button when set to true, shows a clear button that clears the input field.",
+              "attribute": "trailing-button",
+              "inheritedFrom": {
+                "name": "Input",
+                "module": "components/input/input.component.js"
+              }
             },
             {
-              "kind": "method",
-              "name": "dispatchInput",
-              "privacy": "private",
-              "return": {
-                "type": {
-                  "text": "void"
-                }
+              "kind": "field",
+              "name": "maxlength",
+              "type": {
+                "text": "number | undefined"
               },
-              "parameters": [
-                {
-                  "name": "option",
-                  "type": {
-                    "text": "Option"
-                  }
-                }
-              ]
+              "description": "The maximum number of characters that the input field can accept.",
+              "attribute": "maxlength",
+              "inheritedFrom": {
+                "name": "Input",
+                "module": "components/input/input.component.js"
+              }
             },
             {
-              "kind": "method",
-              "name": "handleClickCombobox",
-              "privacy": "private",
-              "return": {
-                "type": {
-                  "text": "void"
-                }
+              "kind": "field",
+              "name": "minlength",
+              "type": {
+                "text": "number | undefined"
               },
-              "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."
+              "description": "The minimum number of characters that the input field can accept.",
+              "attribute": "minlength",
+              "inheritedFrom": {
+                "name": "Input",
+                "module": "components/input/input.component.js"
+              }
             },
             {
-              "kind": "method",
-              "name": "handleKeydownCombobox",
-              "privacy": "private",
-              "return": {
-                "type": {
-                  "text": "void"
-                }
+              "kind": "field",
+              "name": "autocapitalize",
+              "type": {
+                "text": "AutoCapitalizeType"
               },
-              "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 autocapitalize attribute of the input field.",
+              "default": "'off'",
+              "attribute": "autocapitalize",
+              "inheritedFrom": {
+                "name": "Input",
+                "module": "components/input/input.component.js"
+              }
             },
             {
-              "kind": "method",
-              "name": "handlePopoverKeydown",
-              "privacy": "private",
-              "return": {
-                "type": {
-                  "text": "void"
-                }
-              },
-              "parameters": [
-                {
-                  "name": "event",
-                  "type": {
-                    "text": "KeyboardEvent"
-                  },
-                  "description": "The keyboard event."
-                }
-              ],
-              "description": "Handles the keydown event on the select element when the popover is open.\nThe options are as follows:\n- HOME: Sets focus and tabindex on the first option.\n- END: Sets focus and tabindex on the last option.\n- ARROW_DOWN, ARROW_UP, PAGE_DOWN, PAGE_UP: Handles navigation between options."
+              "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": "method",
-              "name": "updateState",
-              "privacy": "public",
-              "return": {
-                "type": {
-                  "text": "void"
-                }
+              "kind": "field",
+              "name": "autofocus",
+              "type": {
+                "text": "boolean"
               },
-              "description": "Updates the state of the select component.\nThis public method should be fired when the selected on the option components is updated from the outside.\nIt ensures that the selected attribute is set correctly on the options\nand that the aria-selected attribute is updated accordingly."
+              "default": "false",
+              "description": "If true, the input field is focused when the component is rendered.",
+              "attribute": "autofocus",
+              "inheritedFrom": {
+                "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"
               }
             },
             {
@@ -32694,45 +32450,134 @@
           ],
           "events": [
             {
+              "description": "(React: onInput) This event is dispatched when the value of the input field changes (every press).",
+              "name": "input",
+              "reactName": "onInput",
+              "inheritedFrom": {
+                "name": "Input",
+                "module": "src/components/input/input.component.ts"
+              }
+            },
+            {
+              "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 input receives focus.",
+              "name": "focus",
+              "reactName": "onFocus",
+              "inheritedFrom": {
+                "name": "Input",
+                "module": "src/components/input/input.component.ts"
+              }
+            },
+            {
+              "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": "clear",
               "type": {
                 "text": "CustomEvent"
               },
-              "description": "(React: onChange) This event is dispatched when the select is changed.",
-              "reactName": "onChange"
+              "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": "input",
               "type": {
-                "text": "CustomEvent"
+                "text": "EventConstructor"
               },
-              "description": "(React: onInput) This event is dispatched when the select is changed.",
-              "reactName": "onInput"
+              "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 */",
+          "customElement": true,
+          "attributes": [
+            {
+              "name": "name",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "description": "Indicates the name of the component group.\nThey are used to group elements in a form together.",
+              "fieldName": "name",
+              "inheritedFrom": {
+                "name": "FormInternalsMixin",
+                "module": "src/utils/mixins/FormInternalsMixin.ts"
+              }
             },
             {
-              "description": "(React: onClick) This event is dispatched when the select is clicked.",
-              "name": "click",
-              "reactName": "onClick"
+              "name": "value",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "description": "Indicates the value of the component group (ex: input, checkbox, radio, select etc...)",
+              "fieldName": "value",
+              "inheritedFrom": {
+                "name": "FormInternalsMixin",
+                "module": "src/utils/mixins/FormInternalsMixin.ts"
+              }
             },
             {
-              "description": "(React: onKeyDown) This event is dispatched when a key is pressed down on the select.",
-              "name": "keydown",
-              "reactName": "onKeyDown"
+              "name": "validation-message",
+              "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.",
+              "fieldName": "validationMessage",
+              "inheritedFrom": {
+                "name": "FormInternalsMixin",
+                "module": "src/utils/mixins/FormInternalsMixin.ts"
+              }
             },
             {
-              "description": "(React: onFocus) This event is dispatched when the select receives focus.",
-              "name": "focus",
-              "reactName": "onFocus"
-            }
-          ],
-          "attributes": [
+              "name": "data-aria-label",
+              "type": {
+                "text": "string | null"
+              },
+              "default": "null",
+              "description": "Defines a string value that labels the current element.\nThe Aria-Label attribute to be set for accessibility.",
+              "fieldName": "dataAriaLabel",
+              "inheritedFrom": {
+                "name": "DataAriaLabelMixin",
+                "module": "src/utils/mixins/DataAriaLabelMixin.ts"
+              }
+            },
             {
               "name": "placeholder",
               "type": {
-                "text": "string | undefined"
+                "text": "string"
               },
-              "description": "The placeholder text which will be shown on the text if provided.",
-              "fieldName": "placeholder"
+              "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": "readonly",
@@ -32740,102 +32585,173 @@
                 "text": "boolean"
               },
               "default": "false",
-              "description": "readonly attribute of the select field. If true, the select is read-only.",
-              "fieldName": "readonly"
+              "description": "readonly attribute of the input field. If true, the input field is read-only.",
+              "fieldName": "readonly",
+              "inheritedFrom": {
+                "name": "Input",
+                "module": "src/components/input/input.component.ts"
+              }
             },
             {
-              "name": "height",
+              "name": "prefix-text",
               "type": {
-                "text": "string"
+                "text": "string | undefined"
               },
-              "default": "'auto'",
-              "description": "height attribute of the select field. If set,\nthen a scroll bar will be visible when there more options than the adjusted height.",
-              "fieldName": "height"
+              "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": "placement",
+              "name": "leading-icon",
               "type": {
-                "text": "Placement"
+                "text": "IconNames | undefined"
               },
-              "description": "The placeholder text which will be shown on the text if provided.",
-              "fieldName": "placement"
+              "description": "The leading icon that is displayed before the input field.",
+              "fieldName": "leadingIcon",
+              "inheritedFrom": {
+                "name": "Input",
+                "module": "src/components/input/input.component.ts"
+              }
             },
             {
-              "name": "soft-disabled",
+              "name": "trailing-button",
               "type": {
-                "text": "boolean | undefined"
+                "text": "boolean"
               },
-              "description": "Indicates whether the select is soft disabled.\nWhen set to `true`, the select appears visually disabled but still allows\nfocus.",
-              "default": "undefined",
-              "fieldName": "softDisabled"
+              "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": "boundary",
+              "name": "maxlength",
               "type": {
-                "text": "'clippingAncestors' | string"
+                "text": "number | undefined"
               },
-              "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"
+              "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": "strategy",
+              "name": "minlength",
               "type": {
-                "text": "'absolute' | 'fixed'"
+                "text": "number | undefined"
               },
-              "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": "The minimum number of characters that the input field can accept.",
+              "fieldName": "minlength",
+              "inheritedFrom": {
+                "name": "Input",
+                "module": "src/components/input/input.component.ts"
+              }
             },
             {
-              "name": "name",
+              "name": "autocapitalize",
               "type": {
-                "text": "string"
+                "text": "AutoCapitalizeType"
               },
-              "default": "''",
-              "description": "Indicates the name of the component group.\nThey are used to group elements in a form together.",
-              "fieldName": "name",
+              "description": "The autocapitalize attribute of the input field.",
+              "default": "'off'",
+              "fieldName": "autocapitalize",
               "inheritedFrom": {
-                "name": "FormInternalsMixin",
-                "module": "src/utils/mixins/FormInternalsMixin.ts"
+                "name": "Input",
+                "module": "src/components/input/input.component.ts"
               }
             },
             {
-              "name": "value",
+              "name": "autocomplete",
               "type": {
-                "text": "string"
+                "text": "AutoCompleteType"
               },
-              "default": "''",
-              "description": "Indicates the value of the component group (ex: input, checkbox, radio, select etc...)",
-              "fieldName": "value",
+              "description": "The autocomplete attribute of the input field.",
+              "default": "'off'",
+              "fieldName": "autocomplete",
               "inheritedFrom": {
-                "name": "FormInternalsMixin",
-                "module": "src/utils/mixins/FormInternalsMixin.ts"
+                "name": "Input",
+                "module": "src/components/input/input.component.ts"
               }
             },
             {
-              "name": "validation-message",
+              "name": "autofocus",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "If true, the input field is focused when the component is rendered.",
+              "fieldName": "autofocus",
+              "inheritedFrom": {
+                "name": "Input",
+                "module": "src/components/input/input.component.ts"
+              }
+            },
+            {
+              "name": "dirname",
               "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.",
-              "fieldName": "validationMessage",
+              "description": "Specifies the name of the directionality of text for submission purposes (e.g., \"rtl\" for right-to-left).",
+              "fieldName": "dirname",
               "inheritedFrom": {
-                "name": "FormInternalsMixin",
-                "module": "src/utils/mixins/FormInternalsMixin.ts"
+                "name": "Input",
+                "module": "src/components/input/input.component.ts"
               }
             },
             {
-              "name": "data-aria-label",
+              "name": "pattern",
               "type": {
-                "text": "string | null"
+                "text": "string | undefined"
               },
-              "default": "null",
-              "description": "Defines a string value that labels the current element.\nThe Aria-Label attribute to be set for accessibility.",
-              "fieldName": "dataAriaLabel",
+              "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": "DataAriaLabelMixin",
-                "module": "src/utils/mixins/DataAriaLabelMixin.ts"
+                "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"
               }
             },
             {
@@ -32951,63 +32867,136 @@
               }
             }
           ],
-          "mixins": [
+          "cssProperties": [
             {
-              "name": "FormInternalsMixin",
-              "module": "/src/utils/mixins/FormInternalsMixin"
+              "description": "Border color for the input container when disabled",
+              "name": "--mdc-input-disabled-border-color",
+              "inheritedFrom": {
+                "name": "Input",
+                "module": "src/components/input/input.component.ts"
+              }
             },
             {
-              "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 * The component ensures accessibility and usability while handling various use cases,\n * 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-select` and wrap options/optgroup in it to ensure proper accessibility functionality. Read more about it in SelectListBox documentation.\n *\n * @dependency mdc-button\n * @dependency mdc-icon\n * @dependency mdc-popover\n * @dependency mdc-text\n * @dependency mdc-toggletip\n *\n * @tagname mdc-select\n *\n * @slot default - This is a default/unnamed slot for Selectlistbox including options and/or option group.\n *\n * @event click - (React: onClick) This event is dispatched when the select is clicked.\n * @event change - (React: onChange) This event is dispatched when the select is changed.\n * @event input - (React: onInput) This event is dispatched when the select is changed.\n * @event keydown - (React: onKeyDown) This event is dispatched when a key is pressed down on the select.\n * @event focus - (React: onFocus) This event is dispatched when the select receives focus.\n *\n * @cssproperty --mdc-select-background-color - The background color of the combobox of select.\n * @cssproperty --mdc-select-background-color-hover - The background color of the combobox of select when hovered.\n * @cssproperty --mdc-select-background-color-active - The background color of the combobox of select when active.\n * @cssproperty --mdc-select-background-color-disabled - The background color of the combobox of select when disabled.\n * @cssproperty --mdc-select-text-color - The text color of the select.\n * @cssproperty --mdc-select-text-color-selected - The text color of the selected option in the select.\n * @cssproperty --mdc-select-text-color-disabled - The text color of the select when disabled.\n * @cssproperty --mdc-select-border-color - The border color of the select.\n * @cssproperty --mdc-select-border-color-disabled - The border color of the select when disabled.\n * @cssproperty --mdc-select-border-color-success - The border color of the select when in success state.\n * @cssproperty --mdc-select-border-color-warning - The border color of the select when in warning state.\n * @cssproperty --mdc-select-border-color-error - The border color of the select when in error state.\n * @cssproperty --mdc-select-width - The width of the select.\n */",
-          "customElement": true
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "default",
-          "declaration": {
-            "name": "Select",
-            "module": "components/select/select.component.js"
-          }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "components/selectlistbox/selectlistbox.component.js",
-      "declarations": [
-        {
-          "kind": "class",
-          "description": "Selectlistbox component as Light DOM component to act as a simple wrapper\nfor mdc-option components to ensure accessibility and proper role assignment.\n\nOnce [ariaOwnsElements](https://developer.mozilla.org/en-US/docs/Web/API/ElementInternals/ariaOwnsElements) is supported in browsers, this component can be removed\nand mdc-option can be used directly in the select component with a listbox in a different\nshadow root and aria-owns attribute to connect them.",
-          "name": "Selectlistbox",
-          "slots": [
+              "description": "Text color for the input field when disabled",
+              "name": "--mdc-input-disabled-text-color",
+              "inheritedFrom": {
+                "name": "Input",
+                "module": "src/components/input/input.component.ts"
+              }
+            },
             {
-              "description": "This is a default/unnamed slot, which can be used to insert mdc-option components.",
-              "name": "default"
-            }
-          ],
-          "members": [
+              "description": "Background color for the input field when disabled",
+              "name": "--mdc-input-disabled-background-color",
+              "inheritedFrom": {
+                "name": "Input",
+                "module": "src/components/input/input.component.ts"
+              }
+            },
             {
-              "kind": "field",
-              "name": "role"
+              "description": "Border color for the input container",
+              "name": "--mdc-input-border-color",
+              "inheritedFrom": {
+                "name": "Input",
+                "module": "src/components/input/input.component.ts"
+              }
+            },
+            {
+              "description": "Text color for the input field",
+              "name": "--mdc-input-text-color",
+              "inheritedFrom": {
+                "name": "Input",
+                "module": "src/components/input/input.component.ts"
+              }
+            },
+            {
+              "description": "Background color for the input field",
+              "name": "--mdc-input-background-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"
+              }
+            },
+            {
+              "description": "Text color for the selected text",
+              "name": "--mdc-input-selection-text-color",
+              "inheritedFrom": {
+                "name": "Input",
+                "module": "src/components/input/input.component.ts"
+              }
+            },
+            {
+              "description": "Text color for the help text",
+              "name": "--mdc-input-support-text-color",
+              "inheritedFrom": {
+                "name": "Input",
+                "module": "src/components/input/input.component.ts"
+              }
+            },
+            {
+              "description": "Background color for the input field when hovered",
+              "name": "--mdc-input-hover-background-color",
+              "inheritedFrom": {
+                "name": "Input",
+                "module": "src/components/input/input.component.ts"
+              }
+            },
+            {
+              "description": "Background color for the input field when focused",
+              "name": "--mdc-input-focused-background-color",
+              "inheritedFrom": {
+                "name": "Input",
+                "module": "src/components/input/input.component.ts"
+              }
+            },
+            {
+              "description": "Border color for the input container when focused",
+              "name": "--mdc-input-focused-border-color",
+              "inheritedFrom": {
+                "name": "Input",
+                "module": "src/components/input/input.component.ts"
+              }
+            },
+            {
+              "description": "Border color for the input container when error",
+              "name": "--mdc-input-error-border-color",
+              "inheritedFrom": {
+                "name": "Input",
+                "module": "src/components/input/input.component.ts"
+              }
+            },
+            {
+              "description": "Border color for the input container when warning",
+              "name": "--mdc-input-warning-border-color",
+              "inheritedFrom": {
+                "name": "Input",
+                "module": "src/components/input/input.component.ts"
+              }
+            },
+            {
+              "description": "Border color for the input container when success",
+              "name": "--mdc-input-success-border-color",
+              "inheritedFrom": {
+                "name": "Input",
+                "module": "src/components/input/input.component.ts"
+              }
+            },
+            {
+              "description": "Border color for the input container when primary",
+              "name": "--mdc-input-primary-border-color",
+              "inheritedFrom": {
+                "name": "Input",
+                "module": "src/components/input/input.component.ts"
+              }
             }
-          ],
-          "superclass": {
-            "name": "Component",
-            "module": "/src/models"
-          },
-          "tagName": "mdc-selectlistbox",
-          "jsDoc": "/**\n * Selectlistbox component as Light DOM component to act as a simple wrapper\n * for mdc-option components to ensure accessibility and proper role assignment.\n *\n * Once [ariaOwnsElements](https://developer.mozilla.org/en-US/docs/Web/API/ElementInternals/ariaOwnsElements) is supported in browsers, this component can be removed\n * and mdc-option can be used directly in the select component with a listbox in a different\n * shadow root and aria-owns attribute to connect them.\n *\n * @tagname mdc-selectlistbox\n *\n * @slot default - This is a default/unnamed slot, which can be used to insert mdc-option components.\n */",
-          "customElement": true
+          ]
         }
       ],
       "exports": [
@@ -33015,8 +33004,8 @@
           "kind": "js",
           "name": "default",
           "declaration": {
-            "name": "Selectlistbox",
-            "module": "components/selectlistbox/selectlistbox.component.js"
+            "name": "Searchfield",
+            "module": "components/searchfield/searchfield.component.js"
           }
         }
       ]
@@ -33431,48 +33420,52 @@
     },
     {
       "kind": "javascript-module",
-      "path": "components/staticcheckbox/staticcheckbox.component.js",
+      "path": "components/staticradio/staticradio.component.js",
       "declarations": [
         {
           "kind": "class",
-          "description": "This is a decorative component that is styled to look as a checkbox.\n\nIt has 3 properties - checked, indeterminate and disabled.\n\nWe are using the same styling that has been created for the `mdc-checkbox` component.",
-          "name": "StaticCheckbox",
+          "description": "This is a decorative component that is styled to look as a radio.\nIt has 2 properties - checked and disabled.\n\nWe are using the same styling that has been created for the `mdc-radio` component.",
+          "name": "StaticRadio",
           "cssProperties": [
             {
-              "description": "Border color in high contrast.",
-              "name": "--mdc-staticcheckbox-border-color"
+              "description": "size of the inner circle",
+              "name": "--mdc-staticradio-inner-circle-size"
             },
             {
-              "description": "Background color for a selected checkbox.",
-              "name": "--mdc-staticcheckbox-checked-background-color"
+              "description": "color of the label when disabled",
+              "name": "--mdc-staticradio-text-disabled-color"
             },
             {
-              "description": "Background color for a disabled checkbox.",
-              "name": "--mdc-staticcheckbox-disabled-background-color"
+              "description": "color of the radio button border when normal",
+              "name": "--mdc-staticradio-normal-border-color"
             },
             {
-              "description": "Border color for a disabled checkbox.",
-              "name": "--mdc-checkbox-disabled-border-color"
+              "description": "color of the radio button border when disabled",
+              "name": "--mdc-staticradio-disabled-border-color"
             },
             {
-              "description": "Background color for a disabled, selected checkbox.",
-              "name": "--mdc-checkbox-disabled-checked-icon-color"
+              "description": "background color of the inner circle when normal",
+              "name": "--mdc-staticradio-inner-circle-normal-background"
             },
             {
-              "description": "Icon color for a disabled checkbox.",
-              "name": "--mdc-staticcheckbox-disabled-icon-color"
+              "description": "background color of the inner circle when disabled",
+              "name": "--mdc-staticradio-inner-circle-disabled-background"
             },
             {
-              "description": "Background color for an unselected checkbox.",
-              "name": "--mdc-staticcheckbox-icon-background-color"
+              "description": "color of the radio button when inactive",
+              "name": "--mdc-staticradio-control-inactive-color"
             },
             {
-              "description": "Default background color for an unselected checkbox.",
-              "name": "--mdc-staticcheckbox-icon-border-color"
+              "description": "background color of the radio button when inactive and disabled",
+              "name": "--mdc-staticradio-control-inactive-disabled-background"
             },
             {
-              "description": "Icon color for an unselected checkbox.",
-              "name": "--mdc-staticcheckbox-icon-color"
+              "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"
             }
           ],
           "members": [
@@ -33483,19 +33476,19 @@
                 "text": "boolean"
               },
               "default": "false",
-              "description": "Determines whether the checkbox is selected or unselected.",
+              "description": "Determines whether the radio is selected or unselected.",
               "attribute": "checked",
               "reflects": true
             },
             {
               "kind": "field",
-              "name": "indeterminate",
+              "name": "readonly",
               "type": {
                 "text": "boolean"
               },
               "default": "false",
-              "description": "Determines whether the checkbox is in an indeterminate state.",
-              "attribute": "indeterminate",
+              "description": "Determines whether the radio is read-only.",
+              "attribute": "readonly",
               "reflects": true
             },
             {
@@ -33521,17 +33514,17 @@
                 "text": "boolean"
               },
               "default": "false",
-              "description": "Determines whether the checkbox is selected or unselected.",
+              "description": "Determines whether the radio is selected or unselected.",
               "fieldName": "checked"
             },
             {
-              "name": "indeterminate",
+              "name": "readonly",
               "type": {
                 "text": "boolean"
               },
               "default": "false",
-              "description": "Determines whether the checkbox is in an indeterminate state.",
-              "fieldName": "indeterminate"
+              "description": "Determines whether the radio is read-only.",
+              "fieldName": "readonly"
             },
             {
               "name": "disabled",
@@ -33557,8 +33550,8 @@
             "name": "Component",
             "module": "/src/models"
           },
-          "tagName": "mdc-staticcheckbox",
-          "jsDoc": "/**\n * This is a decorative component that is styled to look as a checkbox.\n *\n * It has 3 properties - checked, indeterminate and disabled.\n *\n * We are using the same styling that has been created for the `mdc-checkbox` component.\n *\n * @tagname mdc-staticcheckbox\n *\n * @dependency mdc-icon\n *\n * @cssproperty --mdc-staticcheckbox-border-color - Border color in high contrast.\n * @cssproperty --mdc-staticcheckbox-checked-background-color - Background color for a selected checkbox.\n * @cssproperty --mdc-staticcheckbox-disabled-background-color - Background color for a disabled checkbox.\n * @cssproperty --mdc-checkbox-disabled-border-color - Border color for a disabled checkbox.\n * @cssproperty --mdc-checkbox-disabled-checked-icon-color - Background color for a disabled, selected checkbox.\n * @cssproperty --mdc-staticcheckbox-disabled-icon-color - Icon color for a disabled checkbox.\n * @cssproperty --mdc-staticcheckbox-icon-background-color - Background color for an unselected checkbox.\n * @cssproperty --mdc-staticcheckbox-icon-border-color - Default background color for an unselected checkbox.\n * @cssproperty --mdc-staticcheckbox-icon-color - Icon color for an unselected checkbox.\n *\n */",
+          "tagName": "mdc-staticradio",
+          "jsDoc": "/**\n * This is a decorative component that is styled to look as a radio.\n * It has 2 properties - checked and disabled.\n *\n * We are using the same styling that has been created for the `mdc-radio` component.\n *\n * @tagname mdc-staticradio\n *\n * @cssproperty --mdc-staticradio-inner-circle-size - size of the inner circle\n * @cssproperty --mdc-staticradio-text-disabled-color - color of the label when disabled\n * @cssproperty --mdc-staticradio-normal-border-color - color of the radio button border when normal\n * @cssproperty --mdc-staticradio-disabled-border-color - color of the radio button border when disabled\n * @cssproperty --mdc-staticradio-inner-circle-normal-background - background color of the inner circle when normal\n * @cssproperty --mdc-staticradio-inner-circle-disabled-background - background color of the inner circle when disabled\n * @cssproperty --mdc-staticradio-control-inactive-color - color of the radio button when inactive\n * @cssproperty --mdc-staticradio-control-inactive-disabled-background - background color of the radio button when\n *  inactive and disabled\n * @cssproperty --mdc-staticradio-control-active-color - color of the radio button when active\n * @cssproperty --mdc-staticradio-control-active-disabled-background - background color of the radio button\n *  when active and disabled\n */",
           "customElement": true
         }
       ],
@@ -33567,60 +33560,56 @@
           "kind": "js",
           "name": "default",
           "declaration": {
-            "name": "StaticCheckbox",
-            "module": "components/staticcheckbox/staticcheckbox.component.js"
+            "name": "StaticRadio",
+            "module": "components/staticradio/staticradio.component.js"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "components/staticradio/staticradio.component.js",
+      "path": "components/staticcheckbox/staticcheckbox.component.js",
       "declarations": [
         {
           "kind": "class",
-          "description": "This is a decorative component that is styled to look as a radio.\nIt has 2 properties - checked and disabled.\n\nWe are using the same styling that has been created for the `mdc-radio` component.",
-          "name": "StaticRadio",
+          "description": "This is a decorative component that is styled to look as a checkbox.\n\nIt has 3 properties - checked, indeterminate and disabled.\n\nWe are using the same styling that has been created for the `mdc-checkbox` component.",
+          "name": "StaticCheckbox",
           "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": "Border color in high contrast.",
+              "name": "--mdc-staticcheckbox-border-color"
             },
             {
-              "description": "color of the radio button border when normal",
-              "name": "--mdc-staticradio-normal-border-color"
+              "description": "Background color for a selected checkbox.",
+              "name": "--mdc-staticcheckbox-checked-background-color"
             },
             {
-              "description": "color of the radio button border when disabled",
-              "name": "--mdc-staticradio-disabled-border-color"
+              "description": "Background color for a disabled checkbox.",
+              "name": "--mdc-staticcheckbox-disabled-background-color"
             },
             {
-              "description": "background color of the inner circle when normal",
-              "name": "--mdc-staticradio-inner-circle-normal-background"
+              "description": "Border color for a disabled checkbox.",
+              "name": "--mdc-checkbox-disabled-border-color"
             },
             {
-              "description": "background color of the inner circle when disabled",
-              "name": "--mdc-staticradio-inner-circle-disabled-background"
+              "description": "Background color for a disabled, selected checkbox.",
+              "name": "--mdc-checkbox-disabled-checked-icon-color"
             },
             {
-              "description": "color of the radio button when inactive",
-              "name": "--mdc-staticradio-control-inactive-color"
+              "description": "Icon color for a disabled checkbox.",
+              "name": "--mdc-staticcheckbox-disabled-icon-color"
             },
             {
-              "description": "background color of the radio button when inactive and disabled",
-              "name": "--mdc-staticradio-control-inactive-disabled-background"
+              "description": "Background color for an unselected checkbox.",
+              "name": "--mdc-staticcheckbox-icon-background-color"
             },
             {
-              "description": "color of the radio button when active",
-              "name": "--mdc-staticradio-control-active-color"
+              "description": "Default background color for an unselected checkbox.",
+              "name": "--mdc-staticcheckbox-icon-border-color"
             },
             {
-              "description": "background color of the radio button when active and disabled",
-              "name": "--mdc-staticradio-control-active-disabled-background"
+              "description": "Icon color for an unselected checkbox.",
+              "name": "--mdc-staticcheckbox-icon-color"
             }
           ],
           "members": [
@@ -33631,19 +33620,19 @@
                 "text": "boolean"
               },
               "default": "false",
-              "description": "Determines whether the radio is selected or unselected.",
+              "description": "Determines whether the checkbox is selected or unselected.",
               "attribute": "checked",
               "reflects": true
             },
             {
               "kind": "field",
-              "name": "readonly",
+              "name": "indeterminate",
               "type": {
                 "text": "boolean"
               },
               "default": "false",
-              "description": "Determines whether the radio is read-only.",
-              "attribute": "readonly",
+              "description": "Determines whether the checkbox is in an indeterminate state.",
+              "attribute": "indeterminate",
               "reflects": true
             },
             {
@@ -33669,17 +33658,17 @@
                 "text": "boolean"
               },
               "default": "false",
-              "description": "Determines whether the radio is selected or unselected.",
+              "description": "Determines whether the checkbox is selected or unselected.",
               "fieldName": "checked"
             },
             {
-              "name": "readonly",
+              "name": "indeterminate",
               "type": {
                 "text": "boolean"
               },
               "default": "false",
-              "description": "Determines whether the radio is read-only.",
-              "fieldName": "readonly"
+              "description": "Determines whether the checkbox is in an indeterminate state.",
+              "fieldName": "indeterminate"
             },
             {
               "name": "disabled",
@@ -33705,8 +33694,8 @@
             "name": "Component",
             "module": "/src/models"
           },
-          "tagName": "mdc-staticradio",
-          "jsDoc": "/**\n * This is a decorative component that is styled to look as a radio.\n * It has 2 properties - checked and disabled.\n *\n * We are using the same styling that has been created for the `mdc-radio` component.\n *\n * @tagname mdc-staticradio\n *\n * @cssproperty --mdc-staticradio-inner-circle-size - size of the inner circle\n * @cssproperty --mdc-staticradio-text-disabled-color - color of the label when disabled\n * @cssproperty --mdc-staticradio-normal-border-color - color of the radio button border when normal\n * @cssproperty --mdc-staticradio-disabled-border-color - color of the radio button border when disabled\n * @cssproperty --mdc-staticradio-inner-circle-normal-background - background color of the inner circle when normal\n * @cssproperty --mdc-staticradio-inner-circle-disabled-background - background color of the inner circle when disabled\n * @cssproperty --mdc-staticradio-control-inactive-color - color of the radio button when inactive\n * @cssproperty --mdc-staticradio-control-inactive-disabled-background - background color of the radio button when\n *  inactive and disabled\n * @cssproperty --mdc-staticradio-control-active-color - color of the radio button when active\n * @cssproperty --mdc-staticradio-control-active-disabled-background - background color of the radio button\n *  when active and disabled\n */",
+          "tagName": "mdc-staticcheckbox",
+          "jsDoc": "/**\n * This is a decorative component that is styled to look as a checkbox.\n *\n * It has 3 properties - checked, indeterminate and disabled.\n *\n * We are using the same styling that has been created for the `mdc-checkbox` component.\n *\n * @tagname mdc-staticcheckbox\n *\n * @dependency mdc-icon\n *\n * @cssproperty --mdc-staticcheckbox-border-color - Border color in high contrast.\n * @cssproperty --mdc-staticcheckbox-checked-background-color - Background color for a selected checkbox.\n * @cssproperty --mdc-staticcheckbox-disabled-background-color - Background color for a disabled checkbox.\n * @cssproperty --mdc-checkbox-disabled-border-color - Border color for a disabled checkbox.\n * @cssproperty --mdc-checkbox-disabled-checked-icon-color - Background color for a disabled, selected checkbox.\n * @cssproperty --mdc-staticcheckbox-disabled-icon-color - Icon color for a disabled checkbox.\n * @cssproperty --mdc-staticcheckbox-icon-background-color - Background color for an unselected checkbox.\n * @cssproperty --mdc-staticcheckbox-icon-border-color - Default background color for an unselected checkbox.\n * @cssproperty --mdc-staticcheckbox-icon-color - Icon color for an unselected checkbox.\n *\n */",
           "customElement": true
         }
       ],
@@ -33715,8 +33704,8 @@
           "kind": "js",
           "name": "default",
           "declaration": {
-            "name": "StaticRadio",
-            "module": "components/staticradio/staticradio.component.js"
+            "name": "StaticCheckbox",
+            "module": "components/staticcheckbox/staticcheckbox.component.js"
           }
         }
       ]