@momentum-design/components 0.104.3 → 0.104.5

package/dist/custom-elements.json

@@ -6394,12 +6394,12 @@
     },
     {
       "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",
@@ -6576,76 +6576,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",
@@ -6677,6 +6621,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",
@@ -6950,13 +6905,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",
@@ -7115,8 +7070,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
         }
       ],
@@ -7125,20 +7080,20 @@
           "kind": "js",
           "name": "default",
           "declaration": {
-            "name": "CardRadio",
-            "module": "components/cardradio/cardradio.component.js"
+            "name": "CardCheckbox",
+            "module": "components/cardcheckbox/cardcheckbox.component.js"
           }
         }
       ]
     },
     {
       "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",
@@ -7315,20 +7270,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",
@@ -7360,17 +7371,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",
@@ -7644,13 +7644,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",
@@ -7809,8 +7809,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
         }
       ],
@@ -7819,8 +7819,8 @@
           "kind": "js",
           "name": "default",
           "declaration": {
-            "name": "CardCheckbox",
-            "module": "components/cardcheckbox/cardcheckbox.component.js"
+            "name": "CardRadio",
+            "module": "components/cardradio/cardradio.component.js"
           }
         }
       ]
@@ -9239,6 +9239,21 @@
                 "module": "components/popover/popover.component.js"
               }
             },
+            {
+              "kind": "field",
+              "name": "zIndex",
+              "type": {
+                "text": "number"
+              },
+              "description": "IMPLEMENT THIS IN YOUR COMPONENT.\n\nThe z-index of the component where the backdrop will be attached to.\nThe backdrop itself will have a z-index of `zIndex - 1`.",
+              "default": "1000",
+              "attribute": "z-index",
+              "reflects": true,
+              "inheritedFrom": {
+                "name": "Popover",
+                "module": "components/popover/popover.component.js"
+              }
+            },
             {
               "kind": "field",
               "name": "preventScroll",
@@ -10042,13 +10057,13 @@
             },
             {
               "kind": "field",
-              "name": "flip",
+              "name": "backdropAppendTo",
               "type": {
-                "text": "boolean"
+                "text": "string | undefined"
               },
-              "description": "Changes the placement of popover to keep it in view when scrolling.",
-              "default": "true",
-              "attribute": "flip",
+              "description": "Element ID the backdrop will be a append to (if `backdrop` is true).",
+              "default": "''",
+              "attribute": "backdrop-append-to",
               "reflects": true,
               "inheritedFrom": {
                 "name": "Popover",
@@ -10057,13 +10072,13 @@
             },
             {
               "kind": "field",
-              "name": "size",
+              "name": "isBackdropInvisible",
               "type": {
-                "text": "boolean"
+                "text": "boolean | undefined"
               },
-              "description": "Changes the size of popover to keep it in view when scrolling.",
+              "description": "Set this property to true to make the backdrop invisible (if `backdrop` is true).\nThis is useful for components that do want a backdrop which stops interaction,\nbut do not want the backdrop to be visible as a overlay.",
               "default": "false",
-              "attribute": "size",
+              "attribute": "is-backdrop-invisible",
               "reflects": true,
               "inheritedFrom": {
                 "name": "Popover",
@@ -10072,13 +10087,28 @@
             },
             {
               "kind": "field",
-              "name": "zIndex",
+              "name": "flip",
               "type": {
-                "text": "number"
+                "text": "boolean"
               },
-              "description": "The z-index of the popover.",
-              "default": "1000",
-              "attribute": "z-index",
+              "description": "Changes the placement of popover to keep it in view when scrolling.",
+              "default": "true",
+              "attribute": "flip",
+              "reflects": true,
+              "inheritedFrom": {
+                "name": "Popover",
+                "module": "components/popover/popover.component.js"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "size",
+              "type": {
+                "text": "boolean"
+              },
+              "description": "Changes the size of popover to keep it in view when scrolling.",
+              "default": "false",
+              "attribute": "size",
               "reflects": true,
               "inheritedFrom": {
                 "name": "Popover",
@@ -10838,6 +10868,32 @@
                 "module": "src/components/popover/popover.component.ts"
               }
             },
+            {
+              "name": "backdrop-append-to",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "Element ID the backdrop will be a append to (if `backdrop` is true).",
+              "default": "''",
+              "fieldName": "backdropAppendTo",
+              "inheritedFrom": {
+                "name": "Popover",
+                "module": "src/components/popover/popover.component.ts"
+              }
+            },
+            {
+              "name": "is-backdrop-invisible",
+              "type": {
+                "text": "boolean | undefined"
+              },
+              "description": "Set this property to true to make the backdrop invisible (if `backdrop` is true).\nThis is useful for components that do want a backdrop which stops interaction,\nbut do not want the backdrop to be visible as a overlay.",
+              "default": "false",
+              "fieldName": "isBackdropInvisible",
+              "inheritedFrom": {
+                "name": "Popover",
+                "module": "src/components/popover/popover.component.ts"
+              }
+            },
             {
               "name": "flip",
               "type": {
@@ -11104,7 +11160,11 @@
               "description": "The z-index of the dialog\n\nThe backdrop will have z-index of `zIndex - 1`",
               "default": "1000",
               "attribute": "z-index",
-              "reflects": true
+              "reflects": true,
+              "inheritedFrom": {
+                "name": "BackdropMixin",
+                "module": "utils/mixins/BackdropMixin.js"
+              }
             },
             {
               "kind": "field",
@@ -12032,6 +12092,10 @@
             }
           ],
           "mixins": [
+            {
+              "name": "BackdropMixin",
+              "module": "/src/utils/mixins/BackdropMixin"
+            },
             {
               "name": "PreventScrollMixin",
               "module": "/src/utils/mixins/PreventScrollMixin"
@@ -21036,6 +21100,21 @@
                 }
               }
             },
+            {
+              "kind": "field",
+              "name": "zIndex",
+              "type": {
+                "text": "number"
+              },
+              "description": "IMPLEMENT THIS IN YOUR COMPONENT.\n\nThe z-index of the component where the backdrop will be attached to.\nThe backdrop itself will have a z-index of `zIndex - 1`.",
+              "default": "1000",
+              "attribute": "z-index",
+              "reflects": true,
+              "inheritedFrom": {
+                "name": "Popover",
+                "module": "components/popover/popover.component.js"
+              }
+            },
             {
               "kind": "field",
               "name": "preventScroll",
@@ -21869,13 +21948,13 @@
             },
             {
               "kind": "field",
-              "name": "flip",
+              "name": "backdropAppendTo",
               "type": {
-                "text": "boolean"
+                "text": "string | undefined"
               },
-              "description": "Changes the placement of popover to keep it in view when scrolling.",
-              "default": "true",
-              "attribute": "flip",
+              "description": "Element ID the backdrop will be a append to (if `backdrop` is true).",
+              "default": "''",
+              "attribute": "backdrop-append-to",
               "reflects": true,
               "inheritedFrom": {
                 "name": "Popover",
@@ -21884,13 +21963,13 @@
             },
             {
               "kind": "field",
-              "name": "size",
+              "name": "isBackdropInvisible",
               "type": {
-                "text": "boolean"
+                "text": "boolean | undefined"
               },
-              "description": "Changes the size of popover to keep it in view when scrolling.",
+              "description": "Set this property to true to make the backdrop invisible (if `backdrop` is true).\nThis is useful for components that do want a backdrop which stops interaction,\nbut do not want the backdrop to be visible as a overlay.",
               "default": "false",
-              "attribute": "size",
+              "attribute": "is-backdrop-invisible",
               "reflects": true,
               "inheritedFrom": {
                 "name": "Popover",
@@ -21899,13 +21978,28 @@
             },
             {
               "kind": "field",
-              "name": "zIndex",
+              "name": "flip",
               "type": {
-                "text": "number"
+                "text": "boolean"
               },
-              "description": "The z-index of the popover.",
-              "default": "1000",
-              "attribute": "z-index",
+              "description": "Changes the placement of popover to keep it in view when scrolling.",
+              "default": "true",
+              "attribute": "flip",
+              "reflects": true,
+              "inheritedFrom": {
+                "name": "Popover",
+                "module": "components/popover/popover.component.js"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "size",
+              "type": {
+                "text": "boolean"
+              },
+              "description": "Changes the size of popover to keep it in view when scrolling.",
+              "default": "false",
+              "attribute": "size",
               "reflects": true,
               "inheritedFrom": {
                 "name": "Popover",
@@ -22625,6 +22719,32 @@
                 "module": "src/components/popover/popover.component.ts"
               }
             },
+            {
+              "name": "backdrop-append-to",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "Element ID the backdrop will be a append to (if `backdrop` is true).",
+              "default": "''",
+              "fieldName": "backdropAppendTo",
+              "inheritedFrom": {
+                "name": "Popover",
+                "module": "src/components/popover/popover.component.ts"
+              }
+            },
+            {
+              "name": "is-backdrop-invisible",
+              "type": {
+                "text": "boolean | undefined"
+              },
+              "description": "Set this property to true to make the backdrop invisible (if `backdrop` is true).\nThis is useful for components that do want a backdrop which stops interaction,\nbut do not want the backdrop to be visible as a overlay.",
+              "default": "false",
+              "fieldName": "isBackdropInvisible",
+              "inheritedFrom": {
+                "name": "Popover",
+                "module": "src/components/popover/popover.component.ts"
+              }
+            },
             {
               "name": "flip",
               "type": {
@@ -26907,6 +27027,28 @@
               "attribute": "backdrop",
               "reflects": true
             },
+            {
+              "kind": "field",
+              "name": "backdropAppendTo",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "Element ID the backdrop will be a append to (if `backdrop` is true).",
+              "default": "''",
+              "attribute": "backdrop-append-to",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "isBackdropInvisible",
+              "type": {
+                "text": "boolean | undefined"
+              },
+              "description": "Set this property to true to make the backdrop invisible (if `backdrop` is true).\nThis is useful for components that do want a backdrop which stops interaction,\nbut do not want the backdrop to be visible as a overlay.",
+              "default": "false",
+              "attribute": "is-backdrop-invisible",
+              "reflects": true
+            },
             {
               "kind": "field",
               "name": "flip",
@@ -26938,7 +27080,11 @@
               "description": "The z-index of the popover.",
               "default": "1000",
               "attribute": "z-index",
-              "reflects": true
+              "reflects": true,
+              "inheritedFrom": {
+                "name": "BackdropMixin",
+                "module": "utils/mixins/BackdropMixin.js"
+              }
             },
             {
               "kind": "field",
@@ -27960,6 +28106,24 @@
               "default": "false",
               "fieldName": "backdrop"
             },
+            {
+              "name": "backdrop-append-to",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "Element ID the backdrop will be a append to (if `backdrop` is true).",
+              "default": "''",
+              "fieldName": "backdropAppendTo"
+            },
+            {
+              "name": "is-backdrop-invisible",
+              "type": {
+                "text": "boolean | undefined"
+              },
+              "description": "Set this property to true to make the backdrop invisible (if `backdrop` is true).\nThis is useful for components that do want a backdrop which stops interaction,\nbut do not want the backdrop to be visible as a overlay.",
+              "default": "false",
+              "fieldName": "isBackdropInvisible"
+            },
             {
               "name": "flip",
               "type": {
@@ -28082,6 +28246,10 @@
             }
           ],
           "mixins": [
+            {
+              "name": "BackdropMixin",
+              "module": "/src/utils/mixins/BackdropMixin"
+            },
             {
               "name": "PreventScrollMixin",
               "module": "/src/utils/mixins/PreventScrollMixin"
@@ -30722,386 +30890,60 @@
     },
     {
       "kind": "javascript-module",
-      "path": "components/select/select.component.js",
+      "path": "components/searchfield/searchfield.component.js",
       "declarations": [
         {
           "kind": "class",
-          "description": "The mdc-select component is a dropdown selection control that allows users to pick an option from a predefined list.\nIt is designed to work with `mdc-option` for individual options and `mdc-optgroup` for grouping related options.\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": "The border color of the select when in error state.",
-              "name": "--mdc-select-border-color-error"
-            },
-            {
-              "description": "The width of the select.",
-              "name": "--mdc-select-width"
-            },
-            {
-              "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"
-            }
-          ],
+          "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",
-              "type": {
-                "text": "string | undefined"
-              },
-              "description": "The placeholder text which will be shown on the text if provided.",
-              "attribute": "placeholder"
-            },
-            {
-              "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": "field",
-              "name": "placement",
-              "type": {
-                "text": "Placement"
-              },
-              "description": "The placeholder text which will be shown on the text if provided.",
-              "attribute": "placement",
-              "reflects": true
-            },
-            {
-              "kind": "field",
-              "name": "softDisabled",
-              "type": {
-                "text": "boolean | undefined"
-              },
-              "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": "boundary",
-              "type": {
-                "text": "'clippingAncestors' | string"
-              },
-              "description": "This describes the clipping element(s) or area that overflow of the used popover will be checked relative to.\nThe default is 'clippingAncestors', which are the overflow ancestors which will cause the\nelement to be clipped.\n\nPossible values:\n - 'clippingAncestors'\n - any css selector",
-              "default": "'clippingAncestors'",
-              "attribute": "boundary",
-              "reflects": true
-            },
-            {
-              "kind": "field",
-              "name": "strategy",
+              "name": "inputChips",
               "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",
-              "attribute": "strategy",
-              "reflects": true
-            },
-            {
-              "kind": "method",
-              "name": "getAllValidOptions",
-              "privacy": "private",
-              "return": {
-                "type": {
-                  "text": "Array<Option>"
-                }
-              }
-            },
-            {
-              "kind": "method",
-              "name": "getFirstValidOption",
-              "privacy": "private",
-              "return": {
-                "type": {
-                  "text": "Option | null"
-                }
-              }
-            },
-            {
-              "kind": "method",
-              "name": "getLastValidOption",
-              "privacy": "private",
-              "return": {
-                "type": {
-                  "text": "Option | null"
-                }
-              }
-            },
-            {
-              "kind": "method",
-              "name": "getFirstSelectedOption",
-              "privacy": "private",
-              "return": {
-                "type": {
-                  "text": "Option | null"
-                }
+                "text": "Array<HTMLElement> | undefined"
               }
             },
             {
               "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"
-                }
-              },
-              "parameters": [
-                {
-                  "name": "event",
-                  "type": {
-                    "text": "MouseEvent"
-                  },
-                  "description": "The event which triggered this function."
-                }
-              ],
-              "description": "A private method which is called when an option is clicked.\nIt sets the selected option, removes selected from other options, updates the tabindex for all options,\ncloses the popover, and fires the change and input events."
-            },
-            {
-              "kind": "method",
-              "name": "setSelectedOption",
-              "privacy": "private",
-              "return": {
-                "type": {
-                  "text": "void"
-                }
-              },
-              "parameters": [
-                {
-                  "name": "option",
-                  "type": {
-                    "text": "Option | null"
-                  },
-                  "description": "The option element in DOM which gets selected."
-                }
-              ],
-              "description": "Sets the selected option in the component state and updates the input element's value.\nThis method ensures that only the selected option is marked as selected in the DOM,\nand updates the tabindex for all options accordingly.\nIt also updates the validity of the input element based on the selected option.\nThis method is called when an option is selected."
-            },
-            {
-              "kind": "method",
-              "name": "updateTabIndexForAllOptions",
-              "privacy": "private",
-              "return": {
-                "type": {
-                  "text": "void"
-                }
-              },
-              "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": "method",
-              "name": "updateSelectedInChildOptions",
-              "privacy": "private",
-              "return": {
-                "type": {
-                  "text": "void"
-                }
-              },
-              "parameters": [
-                {
-                  "name": "selectedOption",
-                  "type": {
-                    "text": "Option | null"
-                  },
-                  "description": "The option which gets selected"
-                }
-              ],
-              "description": "Sets selected attribute on the selected option and removes it from all options"
-            },
-            {
-              "kind": "method",
-              "name": "fireEvents",
-              "privacy": "private",
-              "return": {
-                "type": {
-                  "text": "void"
-                }
-              },
-              "description": "A private method which is called to fire the change and input events.\nIt dispatches the input and change events with the selected option's value and label."
-            },
-            {
-              "kind": "method",
-              "name": "dispatchChange",
-              "privacy": "private",
-              "return": {
-                "type": {
-                  "text": "void"
-                }
-              },
-              "parameters": [
-                {
-                  "name": "option",
-                  "type": {
-                    "text": "Option"
-                  }
-                }
-              ]
-            },
-            {
-              "kind": "method",
-              "name": "dispatchInput",
-              "privacy": "private",
-              "return": {
-                "type": {
-                  "text": "void"
-                }
-              },
-              "parameters": [
-                {
-                  "name": "option",
-                  "type": {
-                    "text": "Option"
-                  }
-                }
-              ]
-            },
-            {
-              "kind": "method",
-              "name": "handleClickCombobox",
-              "privacy": "private",
-              "return": {
-                "type": {
-                  "text": "void"
-                }
-              },
-              "parameters": [
-                {
-                  "name": "event",
-                  "type": {
-                    "text": "MouseEvent"
-                  },
-                  "description": "The mouse event which triggered this function."
-                }
-              ],
-              "description": "Handles the click event on the visual combobox.\nIf the select is disabled, soft-disabled or readonly, it does nothing.\nIf the popover is already open, it closes it.\nIf it is closed, it opens it."
-            },
-            {
-              "kind": "method",
-              "name": "handleKeydownCombobox",
-              "privacy": "private",
-              "return": {
-                "type": {
-                  "text": "void"
-                }
-              },
+              "name": "handleKeyDown",
+              "privacy": "protected",
               "parameters": [
                 {
                   "name": "event",
                   "type": {
                     "text": "KeyboardEvent"
                   },
-                  "description": "The keyboard event."
+                  "description": "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": "Handles the keydown event of the search field.\nIf the key pressed is 'Enter', it submits the form.\nIf the key pressed is 'Escape', it clears the input text.",
+              "inheritedFrom": {
+                "name": "Input",
+                "module": "components/input/input.component.js"
+              }
             },
             {
               "kind": "method",
-              "name": "handlePopoverKeydown",
+              "name": "renderInputChips",
               "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."
+              "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": "updateState",
-              "privacy": "public",
-              "return": {
-                "type": {
-                  "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."
+              "name": "clearInputText",
+              "privacy": "protected",
+              "description": "Clears the input field.",
+              "inheritedFrom": {
+                "name": "Input",
+                "module": "components/input/input.component.js"
+              }
             },
             {
               "kind": "field",
@@ -31218,6 +31060,334 @@
                 "module": "utils/mixins/DataAriaLabelMixin.js"
               }
             },
+            {
+              "kind": "field",
+              "name": "placeholder",
+              "type": {
+                "text": "string"
+              },
+              "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": "field",
+              "name": "readonly",
+              "type": {
+                "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"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "prefixText",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "The prefix text that is displayed before the input field. It has a max length of 10 characters.\nWhen the prefix text is set, make sure to set the 'data-aria-label'\nattribute with the appropriate value for accessibility.",
+              "attribute": "prefix-text",
+              "inheritedFrom": {
+                "name": "Input",
+                "module": "components/input/input.component.js"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "leadingIcon",
+              "type": {
+                "text": "IconNames | undefined"
+              },
+              "description": "The leading icon that is displayed before the input field.",
+              "attribute": "leading-icon",
+              "inheritedFrom": {
+                "name": "Input",
+                "module": "components/input/input.component.js"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "trailingButton",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "The trailing button when set to true, shows a clear button that clears the input field.",
+              "attribute": "trailing-button",
+              "inheritedFrom": {
+                "name": "Input",
+                "module": "components/input/input.component.js"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "maxlength",
+              "type": {
+                "text": "number | undefined"
+              },
+              "description": "The maximum number of characters that the input field can accept.",
+              "attribute": "maxlength",
+              "inheritedFrom": {
+                "name": "Input",
+                "module": "components/input/input.component.js"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "minlength",
+              "type": {
+                "text": "number | undefined"
+              },
+              "description": "The minimum number of characters that the input field can accept.",
+              "attribute": "minlength",
+              "inheritedFrom": {
+                "name": "Input",
+                "module": "components/input/input.component.js"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "autocapitalize",
+              "type": {
+                "text": "AutoCapitalizeType"
+              },
+              "description": "The autocapitalize attribute of the input field.",
+              "default": "'off'",
+              "attribute": "autocapitalize",
+              "inheritedFrom": {
+                "name": "Input",
+                "module": "components/input/input.component.js"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "autocomplete",
+              "type": {
+                "text": "AutoCompleteType"
+              },
+              "description": "The autocomplete attribute of the input field.",
+              "default": "'off'",
+              "attribute": "autocomplete",
+              "inheritedFrom": {
+                "name": "Input",
+                "module": "components/input/input.component.js"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "autofocus",
+              "type": {
+                "text": "boolean"
+              },
+              "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": "dirname",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "Specifies the name of the directionality of text for submission purposes (e.g., \"rtl\" for right-to-left).",
+              "attribute": "dirname",
+              "inheritedFrom": {
+                "name": "Input",
+                "module": "components/input/input.component.js"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "pattern",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "The pattern attribute of the input field.\nSpecifies a regular expression that the input value must match for validation purposes.",
+              "attribute": "pattern",
+              "inheritedFrom": {
+                "name": "Input",
+                "module": "components/input/input.component.js"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "list",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "The list attribute of the input field.\nIdentifies a list of pre-defined options to suggest to the user.",
+              "attribute": "list",
+              "inheritedFrom": {
+                "name": "Input",
+                "module": "components/input/input.component.js"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "size",
+              "type": {
+                "text": "number | undefined | undefined"
+              },
+              "description": "The size attribute of the input field.\nSpecifies the width of the input field.",
+              "default": "undefined",
+              "attribute": "size",
+              "inheritedFrom": {
+                "name": "Input",
+                "module": "components/input/input.component.js"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "clearAriaLabel",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "description": "Aria label for the trailing button. If trailing button is set to true, this label is used for the clear button.",
+              "attribute": "clear-aria-label",
+              "inheritedFrom": {
+                "name": "Input",
+                "module": "components/input/input.component.js"
+              }
+            },
+            {
+              "kind": "method",
+              "name": "setInputValidity",
+              "privacy": "private",
+              "inheritedFrom": {
+                "name": "Input",
+                "module": "components/input/input.component.js"
+              }
+            },
+            {
+              "kind": "method",
+              "name": "updateValue",
+              "privacy": "private",
+              "description": "Updates the value of the input field.\nSets the form value.",
+              "return": {
+                "type": {
+                  "text": ""
+                }
+              },
+              "inheritedFrom": {
+                "name": "Input",
+                "module": "components/input/input.component.js"
+              }
+            },
+            {
+              "kind": "method",
+              "name": "onInput",
+              "privacy": "private",
+              "description": "Handles the input event of the input field.\nUpdates the value and sets the validity of the input field.",
+              "inheritedFrom": {
+                "name": "Input",
+                "module": "components/input/input.component.js"
+              }
+            },
+            {
+              "kind": "method",
+              "name": "onChange",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "event",
+                  "type": {
+                    "text": "Event"
+                  },
+                  "description": "Event which contains information about the value change."
+                }
+              ],
+              "description": "Handles the change event of the input field.\nUpdates the value and sets the validity of the input field.\n\nThe 'change' event does not bubble up through the shadow DOM as it was not composed.\nTherefore, we need to re-dispatch the same event to ensure it is propagated correctly.\nRead more: https://developer.mozilla.org/en-US/docs/Web/API/Event/composed",
+              "inheritedFrom": {
+                "name": "Input",
+                "module": "components/input/input.component.js"
+              }
+            },
+            {
+              "kind": "method",
+              "name": "renderLeadingIcon",
+              "privacy": "protected",
+              "description": "Renders the leading icon before the input field.\nIf the leading icon is not set, it will not be displayed.",
+              "return": {
+                "type": {
+                  "text": ""
+                }
+              },
+              "inheritedFrom": {
+                "name": "Input",
+                "module": "components/input/input.component.js"
+              }
+            },
+            {
+              "kind": "method",
+              "name": "renderPrefixText",
+              "privacy": "protected",
+              "description": "Renders the prefix text before the input field.\nIf the prefix text is more than 10 characters,\n- it will not be displayed.\n- the validation messsage will be displayed.\n\n Note: We are setting aria-hidden so that the screen reader does not read the prefix text.\n The consumers should set the appropriate aria-label for the input field using 'data-aria-label' attribute.",
+              "return": {
+                "type": {
+                  "text": ""
+                }
+              },
+              "inheritedFrom": {
+                "name": "Input",
+                "module": "components/input/input.component.js"
+              }
+            },
+            {
+              "kind": "method",
+              "name": "renderTrailingButton",
+              "privacy": "protected",
+              "parameters": [
+                {
+                  "name": "show",
+                  "default": "false"
+                }
+              ],
+              "description": "Renders the trailing button to clear the input field if the trailingButton is set to true.",
+              "return": {
+                "type": {
+                  "text": ""
+                }
+              },
+              "inheritedFrom": {
+                "name": "Input",
+                "module": "components/input/input.component.js"
+              }
+            },
+            {
+              "kind": "method",
+              "name": "renderInputElement",
+              "privacy": "protected",
+              "parameters": [
+                {
+                  "name": "type",
+                  "type": {
+                    "text": "InputType"
+                  }
+                },
+                {
+                  "name": "hidePlaceholder",
+                  "default": "false"
+                }
+              ],
+              "inheritedFrom": {
+                "name": "Input",
+                "module": "components/input/input.component.js"
+              }
+            },
             {
               "kind": "field",
               "name": "disabled",
@@ -31425,90 +31595,71 @@
           ],
           "events": [
             {
-              "name": "change",
-              "type": {
-                "text": "CustomEvent"
-              },
-              "description": "(React: onChange) This event is dispatched when the select is changed.",
-              "reactName": "onChange"
-            },
-            {
+              "description": "(React: onInput) This event is dispatched when the value of the input field changes (every press).",
               "name": "input",
-              "type": {
-                "text": "CustomEvent"
-              },
-              "description": "(React: onInput) This event is dispatched when the select is changed.",
-              "reactName": "onInput"
-            },
-            {
-              "description": "(React: onClick) This event is dispatched when the select is clicked.",
-              "name": "click",
-              "reactName": "onClick"
+              "reactName": "onInput",
+              "inheritedFrom": {
+                "name": "Input",
+                "module": "src/components/input/input.component.ts"
+              }
             },
             {
-              "description": "(React: onKeyDown) This event is dispatched when a key is pressed down on the select.",
-              "name": "keydown",
-              "reactName": "onKeyDown"
+              "description": "(React: onChange) This event is dispatched when the value of the input field changes (on blur).",
+              "name": "change",
+              "reactName": "onChange",
+              "inheritedFrom": {
+                "name": "Input",
+                "module": "src/components/input/input.component.ts"
+              }
             },
             {
-              "description": "(React: onFocus) This event is dispatched when the select receives focus.",
+              "description": "(React: onFocus) This event is dispatched when the input receives focus.",
               "name": "focus",
-              "reactName": "onFocus"
-            }
-          ],
-          "attributes": [
-            {
-              "name": "placeholder",
-              "type": {
-                "text": "string | undefined"
-              },
-              "description": "The placeholder text which will be shown on the text if provided.",
-              "fieldName": "placeholder"
-            },
-            {
-              "name": "readonly",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "readonly attribute of the select field. If true, the select is read-only.",
-              "fieldName": "readonly"
-            },
-            {
-              "name": "placement",
-              "type": {
-                "text": "Placement"
-              },
-              "description": "The placeholder text which will be shown on the text if provided.",
-              "fieldName": "placement"
+              "reactName": "onFocus",
+              "inheritedFrom": {
+                "name": "Input",
+                "module": "src/components/input/input.component.ts"
+              }
             },
             {
-              "name": "soft-disabled",
-              "type": {
-                "text": "boolean | undefined"
-              },
-              "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"
+              "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": "boundary",
+              "name": "clear",
               "type": {
-                "text": "'clippingAncestors' | string"
+                "text": "CustomEvent"
               },
-              "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": "(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": "strategy",
               "type": {
-                "text": "'absolute' | 'fixed'"
+                "text": "EventConstructor"
               },
-              "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"
-            },
+              "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": {
@@ -31561,70 +31712,258 @@
               }
             },
             {
-              "name": "disabled",
+              "name": "placeholder",
               "type": {
-                "text": "boolean | undefined"
+                "text": "string"
               },
-              "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",
+              "default": "''",
+              "description": "The placeholder text that is displayed when the input field is empty.",
+              "fieldName": "placeholder",
               "inheritedFrom": {
-                "name": "FormfieldWrapper",
-                "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
+                "name": "Input",
+                "module": "src/components/input/input.component.ts"
               }
             },
             {
-              "name": "label",
+              "name": "readonly",
               "type": {
-                "text": "string | undefined"
+                "text": "boolean"
               },
-              "description": "The label of the input field. It is linked to the input field using the `for` attribute.",
-              "fieldName": "label",
+              "default": "false",
+              "description": "readonly attribute of the input field. If true, the input field is read-only.",
+              "fieldName": "readonly",
               "inheritedFrom": {
-                "name": "FormfieldWrapper",
-                "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
+                "name": "Input",
+                "module": "src/components/input/input.component.ts"
               }
             },
             {
-              "name": "required",
+              "name": "prefix-text",
               "type": {
-                "text": "boolean"
+                "text": "string | undefined"
               },
-              "default": "false",
-              "description": "The required attribute to indicate that the input field is required.\nIt is used to append a required indicator (*) to the label.",
-              "fieldName": "required",
+              "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": "FormfieldWrapper",
-                "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
+                "name": "Input",
+                "module": "src/components/input/input.component.ts"
               }
             },
             {
-              "name": "id",
+              "name": "leading-icon",
               "type": {
-                "text": "string"
+                "text": "IconNames | undefined"
               },
-              "default": "''",
-              "description": "The unique id of the input field. It is used to link the input field with the label.",
-              "fieldName": "id",
+              "description": "The leading icon that is displayed before the input field.",
+              "fieldName": "leadingIcon",
               "inheritedFrom": {
-                "name": "FormfieldWrapper",
-                "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
+                "name": "Input",
+                "module": "src/components/input/input.component.ts"
               }
             },
             {
-              "name": "help-text-type",
+              "name": "trailing-button",
               "type": {
-                "text": "ValidationType"
+                "text": "boolean"
               },
-              "description": "The type of help text. It can be 'default', 'error', 'warning', 'success', 'priority'.",
-              "fieldName": "helpTextType",
+              "default": "false",
+              "description": "The trailing button when set to true, shows a clear button that clears the input field.",
+              "fieldName": "trailingButton",
               "inheritedFrom": {
-                "name": "FormfieldWrapper",
-                "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
+                "name": "Input",
+                "module": "src/components/input/input.component.ts"
               }
             },
             {
-              "name": "help-text",
+              "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",
+              "inheritedFrom": {
+                "name": "FormfieldWrapper",
+                "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
+              }
+            },
+            {
+              "name": "label",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "The label of the input field. It is linked to the input field using the `for` attribute.",
+              "fieldName": "label",
+              "inheritedFrom": {
+                "name": "FormfieldWrapper",
+                "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
+              }
+            },
+            {
+              "name": "required",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "The required attribute to indicate that the input field is required.\nIt is used to append a required indicator (*) to the label.",
+              "fieldName": "required",
+              "inheritedFrom": {
+                "name": "FormfieldWrapper",
+                "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
+              }
+            },
+            {
+              "name": "id",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "description": "The unique id of the input field. It is used to link the input field with the label.",
+              "fieldName": "id",
+              "inheritedFrom": {
+                "name": "FormfieldWrapper",
+                "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
+              }
+            },
+            {
+              "name": "help-text-type",
+              "type": {
+                "text": "ValidationType"
+              },
+              "description": "The type of help text. It can be 'default', 'error', 'warning', 'success', 'priority'.",
+              "fieldName": "helpTextType",
+              "inheritedFrom": {
+                "name": "FormfieldWrapper",
+                "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
+              }
+            },
+            {
+              "name": "help-text",
               "type": {
                 "text": "string | undefined"
               },
@@ -31673,23 +32012,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"
+              "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"
+              }
+            },
+            {
+              "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": "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": [
@@ -31697,8 +32149,8 @@
           "kind": "js",
           "name": "default",
           "declaration": {
-            "name": "Select",
-            "module": "components/select/select.component.js"
+            "name": "Searchfield",
+            "module": "components/searchfield/searchfield.component.js"
           }
         }
       ]
@@ -31745,60 +32197,408 @@
     },
     {
       "kind": "javascript-module",
-      "path": "components/searchfield/searchfield.component.js",
+      "path": "components/select/select.component.js",
       "declarations": [
         {
           "kind": "class",
-          "description": "`mdc-searchfield` component is used as an input field for search functionality.\n\nIt supports `mdc-inputchip` as filters.\n\nThis component is built by extending the `mdc-input` component.",
-          "name": "Searchfield",
+          "description": "The mdc-select component is a dropdown selection control that allows users to pick an option from a predefined list.\nIt is designed to work with `mdc-option` for individual options and `mdc-optgroup` for grouping related options.\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": "The border color of the select when in error state.",
+              "name": "--mdc-select-border-color-error"
+            },
+            {
+              "description": "The width of the select.",
+              "name": "--mdc-select-width"
+            },
+            {
+              "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": "Slot for input chips",
-              "name": "filters"
+              "description": "This is a default/unnamed slot for Selectlistbox including options and/or option group.",
+              "name": "default"
             }
           ],
           "members": [
             {
               "kind": "field",
-              "name": "inputChips",
+              "name": "placeholder",
               "type": {
-                "text": "Array<HTMLElement> | undefined"
+                "text": "string | undefined"
+              },
+              "description": "The placeholder text which will be shown on the text if provided.",
+              "attribute": "placeholder"
+            },
+            {
+              "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": "field",
+              "name": "placement",
+              "type": {
+                "text": "Placement"
+              },
+              "description": "The placeholder text which will be shown on the text if provided.",
+              "attribute": "placement",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "softDisabled",
+              "type": {
+                "text": "boolean | undefined"
+              },
+              "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",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "boundary",
+              "type": {
+                "text": "'clippingAncestors' | string"
+              },
+              "description": "This describes the clipping element(s) or area that overflow of the used popover will be checked relative to.\nThe default is 'clippingAncestors', which are the overflow ancestors which will cause the\nelement to be clipped.\n\nPossible values:\n - 'clippingAncestors'\n - any css selector",
+              "default": "'clippingAncestors'",
+              "attribute": "boundary",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "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",
+              "attribute": "strategy",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "popoverZIndex",
+              "type": {
+                "text": "number"
+              },
+              "description": "The z-index of the popover within Select.\n\nOverride this to make sure this stays on top of other components.",
+              "default": "1000",
+              "attribute": "popover-z-index",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "backdropAppendTo",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "ID of the element where the backdrop will be appended to.\nThis is useful to ensure that the backdrop is appended to the correct element in the DOM.\nIf not set, the backdrop will be appended to the parent element of the select.",
+              "attribute": "backdrop-append-to",
+              "reflects": true
+            },
+            {
+              "kind": "method",
+              "name": "getAllValidOptions",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "Array<Option>"
+                }
               }
             },
             {
               "kind": "method",
-              "name": "handleKeyDown",
-              "privacy": "protected",
+              "name": "getFirstValidOption",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "Option | null"
+                }
+              }
+            },
+            {
+              "kind": "method",
+              "name": "getLastValidOption",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "Option | null"
+                }
+              }
+            },
+            {
+              "kind": "method",
+              "name": "getFirstSelectedOption",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "Option | null"
+                }
+              }
+            },
+            {
+              "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"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "event",
+                  "type": {
+                    "text": "MouseEvent"
+                  },
+                  "description": "The event which triggered this function."
+                }
+              ],
+              "description": "A private method which is called when an option is clicked.\nIt sets the selected option, removes selected from other options, updates the tabindex for all options,\ncloses the popover, and fires the change and input events."
+            },
+            {
+              "kind": "method",
+              "name": "setSelectedOption",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "option",
+                  "type": {
+                    "text": "Option | null"
+                  },
+                  "description": "The option element in DOM which gets selected."
+                }
+              ],
+              "description": "Sets the selected option in the component state and updates the input element's value.\nThis method ensures that only the selected option is marked as selected in the DOM,\nand updates the tabindex for all options accordingly.\nIt also updates the validity of the input element based on the selected option.\nThis method is called when an option is selected."
+            },
+            {
+              "kind": "method",
+              "name": "updateTabIndexForAllOptions",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "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": "method",
+              "name": "updateSelectedInChildOptions",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "selectedOption",
+                  "type": {
+                    "text": "Option | null"
+                  },
+                  "description": "The option which gets selected"
+                }
+              ],
+              "description": "Sets selected attribute on the selected option and removes it from all options"
+            },
+            {
+              "kind": "method",
+              "name": "fireEvents",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "description": "A private method which is called to fire the change and input events.\nIt dispatches the input and change events with the selected option's value and label."
+            },
+            {
+              "kind": "method",
+              "name": "dispatchChange",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "option",
+                  "type": {
+                    "text": "Option"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "dispatchInput",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "option",
+                  "type": {
+                    "text": "Option"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "handleClickCombobox",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "event",
+                  "type": {
+                    "text": "MouseEvent"
+                  },
+                  "description": "The mouse event which triggered this function."
+                }
+              ],
+              "description": "Handles the click event on the visual combobox.\nIf the select is disabled, soft-disabled or readonly, it does nothing.\nIf the popover is already open, it closes it.\nIf it is closed, it opens it."
+            },
+            {
+              "kind": "method",
+              "name": "handleKeydownCombobox",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
               "parameters": [
                 {
                   "name": "event",
                   "type": {
                     "text": "KeyboardEvent"
                   },
-                  "description": "Keyboard event"
+                  "description": "The keyboard event."
                 }
               ],
-              "description": "Handles the keydown event of the search field.\nIf the key pressed is 'Enter', it submits the form.\nIf the key pressed is 'Escape', it clears the input text.",
-              "inheritedFrom": {
-                "name": "Input",
-                "module": "components/input/input.component.js"
-              }
+              "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": "renderInputChips",
+              "name": "handlePopoverKeydown",
               "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."
+              "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": "method",
-              "name": "clearInputText",
-              "privacy": "protected",
-              "description": "Clears the input field.",
-              "inheritedFrom": {
-                "name": "Input",
-                "module": "components/input/input.component.js"
-              }
+              "name": "updateState",
+              "privacy": "public",
+              "return": {
+                "type": {
+                  "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",
@@ -31915,334 +32715,6 @@
                 "module": "utils/mixins/DataAriaLabelMixin.js"
               }
             },
-            {
-              "kind": "field",
-              "name": "placeholder",
-              "type": {
-                "text": "string"
-              },
-              "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": "field",
-              "name": "readonly",
-              "type": {
-                "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"
-              }
-            },
-            {
-              "kind": "field",
-              "name": "prefixText",
-              "type": {
-                "text": "string | undefined"
-              },
-              "description": "The prefix text that is displayed before the input field. It has a max length of 10 characters.\nWhen the prefix text is set, make sure to set the 'data-aria-label'\nattribute with the appropriate value for accessibility.",
-              "attribute": "prefix-text",
-              "inheritedFrom": {
-                "name": "Input",
-                "module": "components/input/input.component.js"
-              }
-            },
-            {
-              "kind": "field",
-              "name": "leadingIcon",
-              "type": {
-                "text": "IconNames | undefined"
-              },
-              "description": "The leading icon that is displayed before the input field.",
-              "attribute": "leading-icon",
-              "inheritedFrom": {
-                "name": "Input",
-                "module": "components/input/input.component.js"
-              }
-            },
-            {
-              "kind": "field",
-              "name": "trailingButton",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "The trailing button when set to true, shows a clear button that clears the input field.",
-              "attribute": "trailing-button",
-              "inheritedFrom": {
-                "name": "Input",
-                "module": "components/input/input.component.js"
-              }
-            },
-            {
-              "kind": "field",
-              "name": "maxlength",
-              "type": {
-                "text": "number | undefined"
-              },
-              "description": "The maximum number of characters that the input field can accept.",
-              "attribute": "maxlength",
-              "inheritedFrom": {
-                "name": "Input",
-                "module": "components/input/input.component.js"
-              }
-            },
-            {
-              "kind": "field",
-              "name": "minlength",
-              "type": {
-                "text": "number | undefined"
-              },
-              "description": "The minimum number of characters that the input field can accept.",
-              "attribute": "minlength",
-              "inheritedFrom": {
-                "name": "Input",
-                "module": "components/input/input.component.js"
-              }
-            },
-            {
-              "kind": "field",
-              "name": "autocapitalize",
-              "type": {
-                "text": "AutoCapitalizeType"
-              },
-              "description": "The autocapitalize attribute of the input field.",
-              "default": "'off'",
-              "attribute": "autocapitalize",
-              "inheritedFrom": {
-                "name": "Input",
-                "module": "components/input/input.component.js"
-              }
-            },
-            {
-              "kind": "field",
-              "name": "autocomplete",
-              "type": {
-                "text": "AutoCompleteType"
-              },
-              "description": "The autocomplete attribute of the input field.",
-              "default": "'off'",
-              "attribute": "autocomplete",
-              "inheritedFrom": {
-                "name": "Input",
-                "module": "components/input/input.component.js"
-              }
-            },
-            {
-              "kind": "field",
-              "name": "autofocus",
-              "type": {
-                "text": "boolean"
-              },
-              "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": "dirname",
-              "type": {
-                "text": "string | undefined"
-              },
-              "description": "Specifies the name of the directionality of text for submission purposes (e.g., \"rtl\" for right-to-left).",
-              "attribute": "dirname",
-              "inheritedFrom": {
-                "name": "Input",
-                "module": "components/input/input.component.js"
-              }
-            },
-            {
-              "kind": "field",
-              "name": "pattern",
-              "type": {
-                "text": "string | undefined"
-              },
-              "description": "The pattern attribute of the input field.\nSpecifies a regular expression that the input value must match for validation purposes.",
-              "attribute": "pattern",
-              "inheritedFrom": {
-                "name": "Input",
-                "module": "components/input/input.component.js"
-              }
-            },
-            {
-              "kind": "field",
-              "name": "list",
-              "type": {
-                "text": "string | undefined"
-              },
-              "description": "The list attribute of the input field.\nIdentifies a list of pre-defined options to suggest to the user.",
-              "attribute": "list",
-              "inheritedFrom": {
-                "name": "Input",
-                "module": "components/input/input.component.js"
-              }
-            },
-            {
-              "kind": "field",
-              "name": "size",
-              "type": {
-                "text": "number | undefined | undefined"
-              },
-              "description": "The size attribute of the input field.\nSpecifies the width of the input field.",
-              "default": "undefined",
-              "attribute": "size",
-              "inheritedFrom": {
-                "name": "Input",
-                "module": "components/input/input.component.js"
-              }
-            },
-            {
-              "kind": "field",
-              "name": "clearAriaLabel",
-              "type": {
-                "text": "string"
-              },
-              "default": "''",
-              "description": "Aria label for the trailing button. If trailing button is set to true, this label is used for the clear button.",
-              "attribute": "clear-aria-label",
-              "inheritedFrom": {
-                "name": "Input",
-                "module": "components/input/input.component.js"
-              }
-            },
-            {
-              "kind": "method",
-              "name": "setInputValidity",
-              "privacy": "private",
-              "inheritedFrom": {
-                "name": "Input",
-                "module": "components/input/input.component.js"
-              }
-            },
-            {
-              "kind": "method",
-              "name": "updateValue",
-              "privacy": "private",
-              "description": "Updates the value of the input field.\nSets the form value.",
-              "return": {
-                "type": {
-                  "text": ""
-                }
-              },
-              "inheritedFrom": {
-                "name": "Input",
-                "module": "components/input/input.component.js"
-              }
-            },
-            {
-              "kind": "method",
-              "name": "onInput",
-              "privacy": "private",
-              "description": "Handles the input event of the input field.\nUpdates the value and sets the validity of the input field.",
-              "inheritedFrom": {
-                "name": "Input",
-                "module": "components/input/input.component.js"
-              }
-            },
-            {
-              "kind": "method",
-              "name": "onChange",
-              "privacy": "private",
-              "parameters": [
-                {
-                  "name": "event",
-                  "type": {
-                    "text": "Event"
-                  },
-                  "description": "Event which contains information about the value change."
-                }
-              ],
-              "description": "Handles the change event of the input field.\nUpdates the value and sets the validity of the input field.\n\nThe 'change' event does not bubble up through the shadow DOM as it was not composed.\nTherefore, we need to re-dispatch the same event to ensure it is propagated correctly.\nRead more: https://developer.mozilla.org/en-US/docs/Web/API/Event/composed",
-              "inheritedFrom": {
-                "name": "Input",
-                "module": "components/input/input.component.js"
-              }
-            },
-            {
-              "kind": "method",
-              "name": "renderLeadingIcon",
-              "privacy": "protected",
-              "description": "Renders the leading icon before the input field.\nIf the leading icon is not set, it will not be displayed.",
-              "return": {
-                "type": {
-                  "text": ""
-                }
-              },
-              "inheritedFrom": {
-                "name": "Input",
-                "module": "components/input/input.component.js"
-              }
-            },
-            {
-              "kind": "method",
-              "name": "renderPrefixText",
-              "privacy": "protected",
-              "description": "Renders the prefix text before the input field.\nIf the prefix text is more than 10 characters,\n- it will not be displayed.\n- the validation messsage will be displayed.\n\n Note: We are setting aria-hidden so that the screen reader does not read the prefix text.\n The consumers should set the appropriate aria-label for the input field using 'data-aria-label' attribute.",
-              "return": {
-                "type": {
-                  "text": ""
-                }
-              },
-              "inheritedFrom": {
-                "name": "Input",
-                "module": "components/input/input.component.js"
-              }
-            },
-            {
-              "kind": "method",
-              "name": "renderTrailingButton",
-              "privacy": "protected",
-              "parameters": [
-                {
-                  "name": "show",
-                  "default": "false"
-                }
-              ],
-              "description": "Renders the trailing button to clear the input field if the trailingButton is set to true.",
-              "return": {
-                "type": {
-                  "text": ""
-                }
-              },
-              "inheritedFrom": {
-                "name": "Input",
-                "module": "components/input/input.component.js"
-              }
-            },
-            {
-              "kind": "method",
-              "name": "renderInputElement",
-              "privacy": "protected",
-              "parameters": [
-                {
-                  "name": "type",
-                  "type": {
-                    "text": "InputType"
-                  }
-                },
-                {
-                  "name": "hidePlaceholder",
-                  "default": "false"
-                }
-              ],
-              "inheritedFrom": {
-                "name": "Input",
-                "module": "components/input/input.component.js"
-              }
-            },
             {
               "kind": "field",
               "name": "disabled",
@@ -32447,311 +32919,159 @@
                 "module": "components/formfieldwrapper/formfieldwrapper.component.js"
               }
             }
-          ],
-          "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: onClear) This event is dispatched when the input text is cleared.",
-              "reactName": "onClear",
-              "inheritedFrom": {
-                "name": "Input",
-                "module": "src/components/input/input.component.ts"
-              }
-            },
-            {
-              "type": {
-                "text": "EventConstructor"
-              },
-              "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"
-              }
-            },
-            {
-              "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"
-              }
-            },
-            {
-              "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"
-              }
-            },
-            {
-              "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"
-              },
-              "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"
-              }
-            },
+          ],
+          "events": [
             {
-              "name": "readonly",
+              "name": "change",
               "type": {
-                "text": "boolean"
+                "text": "CustomEvent"
               },
-              "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"
-              }
+              "description": "(React: onChange) This event is dispatched when the select is changed.",
+              "reactName": "onChange"
             },
             {
-              "name": "prefix-text",
+              "name": "input",
               "type": {
-                "text": "string | undefined"
+                "text": "CustomEvent"
               },
-              "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"
-              }
+              "description": "(React: onInput) This event is dispatched when the select is changed.",
+              "reactName": "onInput"
             },
             {
-              "name": "leading-icon",
+              "description": "(React: onClick) This event is dispatched when the select is clicked.",
+              "name": "click",
+              "reactName": "onClick"
+            },
+            {
+              "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"
+            }
+          ],
+          "attributes": [
+            {
+              "name": "placeholder",
               "type": {
-                "text": "IconNames | undefined"
+                "text": "string | undefined"
               },
-              "description": "The leading icon that is displayed before the input field.",
-              "fieldName": "leadingIcon",
-              "inheritedFrom": {
-                "name": "Input",
-                "module": "src/components/input/input.component.ts"
-              }
+              "description": "The placeholder text which will be shown on the text if provided.",
+              "fieldName": "placeholder"
             },
             {
-              "name": "trailing-button",
+              "name": "readonly",
               "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"
-              }
+              "description": "readonly attribute of the select field. If true, the select is read-only.",
+              "fieldName": "readonly"
             },
             {
-              "name": "maxlength",
+              "name": "placement",
               "type": {
-                "text": "number | undefined"
+                "text": "Placement"
               },
-              "description": "The maximum number of characters that the input field can accept.",
-              "fieldName": "maxlength",
-              "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": "minlength",
+              "name": "soft-disabled",
               "type": {
-                "text": "number | undefined"
+                "text": "boolean | 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"
-              }
+              "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": "autocapitalize",
+              "name": "boundary",
               "type": {
-                "text": "AutoCapitalizeType"
+                "text": "'clippingAncestors' | string"
               },
-              "description": "The autocapitalize attribute of the input field.",
-              "default": "'off'",
-              "fieldName": "autocapitalize",
-              "inheritedFrom": {
-                "name": "Input",
-                "module": "src/components/input/input.component.ts"
-              }
+              "description": "This describes the clipping element(s) or area that overflow of the used popover will be checked relative to.\nThe default is 'clippingAncestors', which are the overflow ancestors which will cause the\nelement to be clipped.\n\nPossible values:\n - 'clippingAncestors'\n - any css selector",
+              "default": "'clippingAncestors'",
+              "fieldName": "boundary"
             },
             {
-              "name": "autocomplete",
+              "name": "strategy",
               "type": {
-                "text": "AutoCompleteType"
+                "text": "'absolute' | 'fixed'"
               },
-              "description": "The autocomplete attribute of the input field.",
-              "default": "'off'",
-              "fieldName": "autocomplete",
-              "inheritedFrom": {
-                "name": "Input",
-                "module": "src/components/input/input.component.ts"
-              }
+              "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": "autofocus",
+              "name": "popover-z-index",
               "type": {
-                "text": "boolean"
+                "text": "number"
               },
-              "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"
-              }
+              "description": "The z-index of the popover within Select.\n\nOverride this to make sure this stays on top of other components.",
+              "default": "1000",
+              "fieldName": "popoverZIndex"
             },
             {
-              "name": "dirname",
+              "name": "backdrop-append-to",
               "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"
-              }
+              "description": "ID of the element where the backdrop will be appended to.\nThis is useful to ensure that the backdrop is appended to the correct element in the DOM.\nIf not set, the backdrop will be appended to the parent element of the select.",
+              "fieldName": "backdropAppendTo"
             },
             {
-              "name": "pattern",
+              "name": "name",
               "type": {
-                "text": "string | undefined"
+                "text": "string"
               },
-              "description": "The pattern attribute of the input field.\nSpecifies a regular expression that the input value must match for validation purposes.",
-              "fieldName": "pattern",
+              "default": "''",
+              "description": "Indicates the name of the component group.\nThey are used to group elements in a form together.",
+              "fieldName": "name",
               "inheritedFrom": {
-                "name": "Input",
-                "module": "src/components/input/input.component.ts"
+                "name": "FormInternalsMixin",
+                "module": "src/utils/mixins/FormInternalsMixin.ts"
               }
             },
             {
-              "name": "list",
+              "name": "value",
               "type": {
-                "text": "string | undefined"
+                "text": "string"
               },
-              "description": "The list attribute of the input field.\nIdentifies a list of pre-defined options to suggest to the user.",
-              "fieldName": "list",
+              "default": "''",
+              "description": "Indicates the value of the component group (ex: input, checkbox, radio, select etc...)",
+              "fieldName": "value",
               "inheritedFrom": {
-                "name": "Input",
-                "module": "src/components/input/input.component.ts"
+                "name": "FormInternalsMixin",
+                "module": "src/utils/mixins/FormInternalsMixin.ts"
               }
             },
             {
-              "name": "size",
+              "name": "validation-message",
               "type": {
-                "text": "number | undefined | undefined"
+                "text": "string | undefined"
               },
-              "description": "The size attribute of the input field.\nSpecifies the width of the input field.",
-              "default": "undefined",
-              "fieldName": "size",
+              "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": "Input",
-                "module": "src/components/input/input.component.ts"
+                "name": "FormInternalsMixin",
+                "module": "src/utils/mixins/FormInternalsMixin.ts"
               }
             },
             {
-              "name": "clear-aria-label",
+              "name": "data-aria-label",
               "type": {
-                "text": "string"
+                "text": "string | null"
               },
-              "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",
+              "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": "Input",
-                "module": "src/components/input/input.component.ts"
+                "name": "DataAriaLabelMixin",
+                "module": "src/utils/mixins/DataAriaLabelMixin.ts"
               }
             },
             {
@@ -32867,322 +33187,22 @@
               }
             }
           ],
-          "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"
-              }
-            },
-            {
-              "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"
-              }
-            }
-          ]
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "default",
-          "declaration": {
-            "name": "Searchfield",
-            "module": "components/searchfield/searchfield.component.js"
-          }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "components/sidenavigation/sidenavigation.component.js",
-      "declarations": [
-        {
-          "kind": "class",
-          "description": "The `mdc-sidenavigation` component provides a vertically stacked navigation experience,\ntypically used in layouts with persistent or collapsible sidebars.\n\n## Features:\n- Supports four layout variants: `fixed-collapsed`, `fixed-expanded`, `flexible`, and `hidden`\n- Toggleable expand/collapse behavior\n- Displays brand logo and customer name\n- Serves as a context provider for descendant components - `mdc-menubar` and `mdc-navmenuitem`\n\n### Usage:\nIn a sidenavigation, navmenuitems can be used in the following ways:\n\n1. **Simple navmenuitem** – No submenu or interaction beyond selection.\n\n2. **NavMenuItem with submenu**:\n   - Provide an `id` on the `mdc-navmenuitem`\n   - Set the `triggerId` on the corresponding `mdc-menupopover` to match the navmenuitem's `id`\n   - Set `parent-nav-tooltip-text` with appropriate text that will display when a child menu item\n     inside the nested menupopover is active, conveying which submenu item is currently selected\n\n3. **Actionable navmenuitem (no submenu)**:\n   - Performs an action such as navigation or alert trigger\n   - Set `disable-aria-current=\"true\"` to maintain visual active state without navigation behavior\n\n### Recommendations:\n- Use `mdc-text` for section headers\n- Use `mdc-divider` with the attribute `variant=\"gradient\"` for section dividers\n- For the brand logo, use an informative icon. Refer to `Momentum Informative Icons`\n\n#### Accessibility Notes:\n- Always provide meaningful `aria-label` attributes for both `mdc-navmenuitem` and `mdc-menubar`\nto ensure screen reader support\n- Set `grabber-btn-aria-label` to provide accessible labels for the expand/collapse grabber button",
-          "name": "SideNavigation",
-          "cssProperties": [
-            {
-              "description": "width of the sideNavigation when expanded",
-              "name": "--mdc-sidenavigation-expanded-width"
-            },
-            {
-              "description": "width of the sideNavigation when collpased",
-              "name": "--mdc-sidenavigation-collapsed-width"
-            }
-          ],
-          "slots": [
-            {
-              "description": "Slot for the scrollable content area of the side navigation.",
-              "name": "scrollable-section"
-            },
-            {
-              "description": "Slot for the fixed content area of the side navigation.",
-              "name": "fixed-section"
-            },
-            {
-              "description": "Slot for the brand logo (e.g., icon or img).",
-              "name": "brand-logo"
-            }
-          ],
-          "members": [
-            {
-              "kind": "field",
-              "name": "Context",
-              "privacy": "public",
-              "static": true,
-              "readonly": true
-            },
-            {
-              "kind": "field",
-              "name": "variant",
-              "type": {
-                "text": "SideNavigationVariant"
-              },
-              "description": "Four variants of the sideNavigation\n- **fixed-collapsed**: Shows icons without labels and has fixed width, 4.5rem.\n- **fixed-expanded**: Shows icons with labels and has fixed width, 15rem.\n- **flexible**: Toggles between collapsed/expanded states.\n- **hidden**: Removes the sidenavigation from the DOM.",
-              "default": "flexible",
-              "attribute": "variant",
-              "reflects": true
-            },
-            {
-              "kind": "field",
-              "name": "footerText",
-              "type": {
-                "text": "string"
-              },
-              "default": "''",
-              "description": "Displays footer text in the bottom section of the sidenavigation.",
-              "attribute": "footer-text",
-              "reflects": true
-            },
-            {
-              "kind": "field",
-              "name": "grabberBtnAriaLabel",
-              "type": {
-                "text": "string | undefined"
-              },
-              "description": "Provides an accessible label for the grabber button.\nThis value is used to set the `aria-label` attribute for the button.",
-              "default": "''",
-              "attribute": "grabber-btn-aria-label",
-              "reflects": true
-            },
-            {
-              "kind": "field",
-              "name": "parentNavTooltipText",
-              "type": {
-                "text": "string | undefined"
-              },
-              "description": "Tooltip text shown on parent nav items when a child is active.",
-              "attribute": "parent-nav-tooltip-text",
-              "reflects": true
-            },
-            {
-              "kind": "method",
-              "name": "updateContext",
-              "privacy": "protected",
-              "return": {
-                "type": {
-                  "text": "void"
-                }
-              },
-              "description": "Update all observing components of this\nprovider to update the values\n\nIs called on every re-render, see Provider class"
-            },
-            {
-              "kind": "field",
-              "name": "navMenuItems",
-              "type": {
-                "text": "NavMenuItem[]"
-              },
-              "privacy": "private",
-              "description": "Returns all nested, non-disabled mdc-navmenuitem elements inside this component.",
-              "readonly": true
-            },
-            {
-              "kind": "method",
-              "name": "preventScrollOnSpace",
-              "privacy": "private",
-              "return": {
-                "type": {
-                  "text": "void"
-                }
-              },
-              "parameters": [
-                {
-                  "name": "event",
-                  "type": {
-                    "text": "KeyboardEvent"
-                  }
-                }
-              ]
-            }
-          ],
-          "events": [
-            {
-              "description": "(React: onActiveChange) Dispatched when the active state of the navmenuitem changes.",
-              "name": "activechange",
-              "reactName": "onActiveChange"
-            }
-          ],
-          "attributes": [
-            {
-              "name": "variant",
-              "type": {
-                "text": "SideNavigationVariant"
-              },
-              "description": "Four variants of the sideNavigation\n- **fixed-collapsed**: Shows icons without labels and has fixed width, 4.5rem.\n- **fixed-expanded**: Shows icons with labels and has fixed width, 15rem.\n- **flexible**: Toggles between collapsed/expanded states.\n- **hidden**: Removes the sidenavigation from the DOM.",
-              "default": "flexible",
-              "fieldName": "variant"
-            },
-            {
-              "name": "footer-text",
-              "type": {
-                "text": "string"
-              },
-              "default": "''",
-              "description": "Displays footer text in the bottom section of the sidenavigation.",
-              "fieldName": "footerText"
-            },
+          "mixins": [
             {
-              "name": "grabber-btn-aria-label",
-              "type": {
-                "text": "string | undefined"
-              },
-              "description": "Provides an accessible label for the grabber button.\nThis value is used to set the `aria-label` attribute for the button.",
-              "default": "''",
-              "fieldName": "grabberBtnAriaLabel"
+              "name": "FormInternalsMixin",
+              "module": "/src/utils/mixins/FormInternalsMixin"
             },
             {
-              "name": "parent-nav-tooltip-text",
-              "type": {
-                "text": "string | undefined"
-              },
-              "description": "Tooltip text shown on parent nav items when a child is active.",
-              "fieldName": "parentNavTooltipText"
+              "name": "DataAriaLabelMixin",
+              "module": "/src/utils/mixins/DataAriaLabelMixin"
             }
           ],
           "superclass": {
-            "name": "Provider",
-            "module": "/src/models"
+            "name": "FormfieldWrapper",
+            "module": "/src/components/formfieldwrapper/formfieldwrapper.component"
           },
-          "tagName": "mdc-sidenavigation",
-          "jsDoc": "/**\n * The `mdc-sidenavigation` component provides a vertically stacked navigation experience,\n * typically used in layouts with persistent or collapsible sidebars.\n *\n * ## Features:\n * - Supports four layout variants: `fixed-collapsed`, `fixed-expanded`, `flexible`, and `hidden`\n * - Toggleable expand/collapse behavior\n * - Displays brand logo and customer name\n * - Serves as a context provider for descendant components - `mdc-menubar` and `mdc-navmenuitem`\n *\n * ### Usage:\n * In a sidenavigation, navmenuitems can be used in the following ways:\n *\n * 1. **Simple navmenuitem** – No submenu or interaction beyond selection.\n *\n * 2. **NavMenuItem with submenu**:\n *    - Provide an `id` on the `mdc-navmenuitem`\n *    - Set the `triggerId` on the corresponding `mdc-menupopover` to match the navmenuitem's `id`\n *    - Set `parent-nav-tooltip-text` with appropriate text that will display when a child menu item\n *      inside the nested menupopover is active, conveying which submenu item is currently selected\n *\n * 3. **Actionable navmenuitem (no submenu)**:\n *    - Performs an action such as navigation or alert trigger\n *    - Set `disable-aria-current=\"true\"` to maintain visual active state without navigation behavior\n *\n * ### Recommendations:\n * - Use `mdc-text` for section headers\n * - Use `mdc-divider` with the attribute `variant=\"gradient\"` for section dividers\n * - For the brand logo, use an informative icon. Refer to `Momentum Informative Icons`\n *\n * #### Accessibility Notes:\n * - Always provide meaningful `aria-label` attributes for both `mdc-navmenuitem` and `mdc-menubar`\n * to ensure screen reader support\n * - Set `grabber-btn-aria-label` to provide accessible labels for the expand/collapse grabber button\n *\n * @dependency mdc-text\n * @dependency mdc-button\n * @dependency mdc-divider\n * @dependency mdc-menubar\n *\n * @event activechange - (React: onActiveChange) Dispatched when the active state of the navmenuitem changes.\n *\n * @tagname mdc-sidenavigation\n *\n * @slot scrollable-section - Slot for the scrollable content area of the side navigation.\n * @slot fixed-section - Slot for the fixed content area of the side navigation.\n * @slot brand-logo - Slot for the brand logo (e.g., icon or img).\n *\n * @cssproperty --mdc-sidenavigation-expanded-width - width of the sideNavigation when expanded\n * @cssproperty --mdc-sidenavigation-collapsed-width - width of the sideNavigation when collpased\n */",
+          "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
         }
       ],
@@ -33191,8 +33211,8 @@
           "kind": "js",
           "name": "default",
           "declaration": {
-            "name": "SideNavigation",
-            "module": "components/sidenavigation/sidenavigation.component.js"
+            "name": "Select",
+            "module": "components/select/select.component.js"
           }
         }
       ]
@@ -33279,6 +33299,193 @@
         }
       ]
     },
+    {
+      "kind": "javascript-module",
+      "path": "components/sidenavigation/sidenavigation.component.js",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "The `mdc-sidenavigation` component provides a vertically stacked navigation experience,\ntypically used in layouts with persistent or collapsible sidebars.\n\n## Features:\n- Supports four layout variants: `fixed-collapsed`, `fixed-expanded`, `flexible`, and `hidden`\n- Toggleable expand/collapse behavior\n- Displays brand logo and customer name\n- Serves as a context provider for descendant components - `mdc-menubar` and `mdc-navmenuitem`\n\n### Usage:\nIn a sidenavigation, navmenuitems can be used in the following ways:\n\n1. **Simple navmenuitem** – No submenu or interaction beyond selection.\n\n2. **NavMenuItem with submenu**:\n   - Provide an `id` on the `mdc-navmenuitem`\n   - Set the `triggerId` on the corresponding `mdc-menupopover` to match the navmenuitem's `id`\n   - Set `parent-nav-tooltip-text` with appropriate text that will display when a child menu item\n     inside the nested menupopover is active, conveying which submenu item is currently selected\n\n3. **Actionable navmenuitem (no submenu)**:\n   - Performs an action such as navigation or alert trigger\n   - Set `disable-aria-current=\"true\"` to maintain visual active state without navigation behavior\n\n### Recommendations:\n- Use `mdc-text` for section headers\n- Use `mdc-divider` with the attribute `variant=\"gradient\"` for section dividers\n- For the brand logo, use an informative icon. Refer to `Momentum Informative Icons`\n\n#### Accessibility Notes:\n- Always provide meaningful `aria-label` attributes for both `mdc-navmenuitem` and `mdc-menubar`\nto ensure screen reader support\n- Set `grabber-btn-aria-label` to provide accessible labels for the expand/collapse grabber button",
+          "name": "SideNavigation",
+          "cssProperties": [
+            {
+              "description": "width of the sideNavigation when expanded",
+              "name": "--mdc-sidenavigation-expanded-width"
+            },
+            {
+              "description": "width of the sideNavigation when collpased",
+              "name": "--mdc-sidenavigation-collapsed-width"
+            }
+          ],
+          "slots": [
+            {
+              "description": "Slot for the scrollable content area of the side navigation.",
+              "name": "scrollable-section"
+            },
+            {
+              "description": "Slot for the fixed content area of the side navigation.",
+              "name": "fixed-section"
+            },
+            {
+              "description": "Slot for the brand logo (e.g., icon or img).",
+              "name": "brand-logo"
+            }
+          ],
+          "members": [
+            {
+              "kind": "field",
+              "name": "Context",
+              "privacy": "public",
+              "static": true,
+              "readonly": true
+            },
+            {
+              "kind": "field",
+              "name": "variant",
+              "type": {
+                "text": "SideNavigationVariant"
+              },
+              "description": "Four variants of the sideNavigation\n- **fixed-collapsed**: Shows icons without labels and has fixed width, 4.5rem.\n- **fixed-expanded**: Shows icons with labels and has fixed width, 15rem.\n- **flexible**: Toggles between collapsed/expanded states.\n- **hidden**: Removes the sidenavigation from the DOM.",
+              "default": "flexible",
+              "attribute": "variant",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "footerText",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "description": "Displays footer text in the bottom section of the sidenavigation.",
+              "attribute": "footer-text",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "grabberBtnAriaLabel",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "Provides an accessible label for the grabber button.\nThis value is used to set the `aria-label` attribute for the button.",
+              "default": "''",
+              "attribute": "grabber-btn-aria-label",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "parentNavTooltipText",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "Tooltip text shown on parent nav items when a child is active.",
+              "attribute": "parent-nav-tooltip-text",
+              "reflects": true
+            },
+            {
+              "kind": "method",
+              "name": "updateContext",
+              "privacy": "protected",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "description": "Update all observing components of this\nprovider to update the values\n\nIs called on every re-render, see Provider class"
+            },
+            {
+              "kind": "field",
+              "name": "navMenuItems",
+              "type": {
+                "text": "NavMenuItem[]"
+              },
+              "privacy": "private",
+              "description": "Returns all nested, non-disabled mdc-navmenuitem elements inside this component.",
+              "readonly": true
+            },
+            {
+              "kind": "method",
+              "name": "preventScrollOnSpace",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "event",
+                  "type": {
+                    "text": "KeyboardEvent"
+                  }
+                }
+              ]
+            }
+          ],
+          "events": [
+            {
+              "description": "(React: onActiveChange) Dispatched when the active state of the navmenuitem changes.",
+              "name": "activechange",
+              "reactName": "onActiveChange"
+            }
+          ],
+          "attributes": [
+            {
+              "name": "variant",
+              "type": {
+                "text": "SideNavigationVariant"
+              },
+              "description": "Four variants of the sideNavigation\n- **fixed-collapsed**: Shows icons without labels and has fixed width, 4.5rem.\n- **fixed-expanded**: Shows icons with labels and has fixed width, 15rem.\n- **flexible**: Toggles between collapsed/expanded states.\n- **hidden**: Removes the sidenavigation from the DOM.",
+              "default": "flexible",
+              "fieldName": "variant"
+            },
+            {
+              "name": "footer-text",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "description": "Displays footer text in the bottom section of the sidenavigation.",
+              "fieldName": "footerText"
+            },
+            {
+              "name": "grabber-btn-aria-label",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "Provides an accessible label for the grabber button.\nThis value is used to set the `aria-label` attribute for the button.",
+              "default": "''",
+              "fieldName": "grabberBtnAriaLabel"
+            },
+            {
+              "name": "parent-nav-tooltip-text",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "Tooltip text shown on parent nav items when a child is active.",
+              "fieldName": "parentNavTooltipText"
+            }
+          ],
+          "superclass": {
+            "name": "Provider",
+            "module": "/src/models"
+          },
+          "tagName": "mdc-sidenavigation",
+          "jsDoc": "/**\n * The `mdc-sidenavigation` component provides a vertically stacked navigation experience,\n * typically used in layouts with persistent or collapsible sidebars.\n *\n * ## Features:\n * - Supports four layout variants: `fixed-collapsed`, `fixed-expanded`, `flexible`, and `hidden`\n * - Toggleable expand/collapse behavior\n * - Displays brand logo and customer name\n * - Serves as a context provider for descendant components - `mdc-menubar` and `mdc-navmenuitem`\n *\n * ### Usage:\n * In a sidenavigation, navmenuitems can be used in the following ways:\n *\n * 1. **Simple navmenuitem** – No submenu or interaction beyond selection.\n *\n * 2. **NavMenuItem with submenu**:\n *    - Provide an `id` on the `mdc-navmenuitem`\n *    - Set the `triggerId` on the corresponding `mdc-menupopover` to match the navmenuitem's `id`\n *    - Set `parent-nav-tooltip-text` with appropriate text that will display when a child menu item\n *      inside the nested menupopover is active, conveying which submenu item is currently selected\n *\n * 3. **Actionable navmenuitem (no submenu)**:\n *    - Performs an action such as navigation or alert trigger\n *    - Set `disable-aria-current=\"true\"` to maintain visual active state without navigation behavior\n *\n * ### Recommendations:\n * - Use `mdc-text` for section headers\n * - Use `mdc-divider` with the attribute `variant=\"gradient\"` for section dividers\n * - For the brand logo, use an informative icon. Refer to `Momentum Informative Icons`\n *\n * #### Accessibility Notes:\n * - Always provide meaningful `aria-label` attributes for both `mdc-navmenuitem` and `mdc-menubar`\n * to ensure screen reader support\n * - Set `grabber-btn-aria-label` to provide accessible labels for the expand/collapse grabber button\n *\n * @dependency mdc-text\n * @dependency mdc-button\n * @dependency mdc-divider\n * @dependency mdc-menubar\n *\n * @event activechange - (React: onActiveChange) Dispatched when the active state of the navmenuitem changes.\n *\n * @tagname mdc-sidenavigation\n *\n * @slot scrollable-section - Slot for the scrollable content area of the side navigation.\n * @slot fixed-section - Slot for the fixed content area of the side navigation.\n * @slot brand-logo - Slot for the brand logo (e.g., icon or img).\n *\n * @cssproperty --mdc-sidenavigation-expanded-width - width of the sideNavigation when expanded\n * @cssproperty --mdc-sidenavigation-collapsed-width - width of the sideNavigation when collpased\n */",
+          "customElement": true
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "default",
+          "declaration": {
+            "name": "SideNavigation",
+            "module": "components/sidenavigation/sidenavigation.component.js"
+          }
+        }
+      ]
+    },
     {
       "kind": "javascript-module",
       "path": "components/spinner/spinner.component.js",
@@ -33420,52 +33627,48 @@
     },
     {
       "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": [
@@ -33476,19 +33679,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
             },
             {
@@ -33514,17 +33717,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",
@@ -33550,8 +33753,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
         }
       ],
@@ -33560,56 +33763,60 @@
           "kind": "js",
           "name": "default",
           "declaration": {
-            "name": "StaticRadio",
-            "module": "components/staticradio/staticradio.component.js"
+            "name": "StaticCheckbox",
+            "module": "components/staticcheckbox/staticcheckbox.component.js"
           }
         }
       ]
     },
     {
       "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": [
@@ -33620,19 +33827,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
             },
             {
@@ -33658,17 +33865,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",
@@ -33694,8 +33901,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
         }
       ],
@@ -33704,8 +33911,8 @@
           "kind": "js",
           "name": "default",
           "declaration": {
-            "name": "StaticCheckbox",
-            "module": "components/staticcheckbox/staticcheckbox.component.js"
+            "name": "StaticRadio",
+            "module": "components/staticradio/staticradio.component.js"
           }
         }
       ]
@@ -37675,6 +37882,21 @@
               },
               "description": "Updates the placement attribute if it is not a valid placement.\nDefault placement for toggle tip is top."
             },
+            {
+              "kind": "field",
+              "name": "zIndex",
+              "type": {
+                "text": "number"
+              },
+              "description": "IMPLEMENT THIS IN YOUR COMPONENT.\n\nThe z-index of the component where the backdrop will be attached to.\nThe backdrop itself will have a z-index of `zIndex - 1`.",
+              "default": "1000",
+              "attribute": "z-index",
+              "reflects": true,
+              "inheritedFrom": {
+                "name": "Popover",
+                "module": "components/popover/popover.component.js"
+              }
+            },
             {
               "kind": "field",
               "name": "preventScroll",
@@ -38508,13 +38730,13 @@
             },
             {
               "kind": "field",
-              "name": "flip",
+              "name": "backdropAppendTo",
               "type": {
-                "text": "boolean"
+                "text": "string | undefined"
               },
-              "description": "Changes the placement of popover to keep it in view when scrolling.",
-              "default": "true",
-              "attribute": "flip",
+              "description": "Element ID the backdrop will be a append to (if `backdrop` is true).",
+              "default": "''",
+              "attribute": "backdrop-append-to",
               "reflects": true,
               "inheritedFrom": {
                 "name": "Popover",
@@ -38523,13 +38745,13 @@
             },
             {
               "kind": "field",
-              "name": "size",
+              "name": "isBackdropInvisible",
               "type": {
-                "text": "boolean"
+                "text": "boolean | undefined"
               },
-              "description": "Changes the size of popover to keep it in view when scrolling.",
+              "description": "Set this property to true to make the backdrop invisible (if `backdrop` is true).\nThis is useful for components that do want a backdrop which stops interaction,\nbut do not want the backdrop to be visible as a overlay.",
               "default": "false",
-              "attribute": "size",
+              "attribute": "is-backdrop-invisible",
               "reflects": true,
               "inheritedFrom": {
                 "name": "Popover",
@@ -38538,13 +38760,28 @@
             },
             {
               "kind": "field",
-              "name": "zIndex",
+              "name": "flip",
               "type": {
-                "text": "number"
+                "text": "boolean"
               },
-              "description": "The z-index of the popover.",
-              "default": "1000",
-              "attribute": "z-index",
+              "description": "Changes the placement of popover to keep it in view when scrolling.",
+              "default": "true",
+              "attribute": "flip",
+              "reflects": true,
+              "inheritedFrom": {
+                "name": "Popover",
+                "module": "components/popover/popover.component.js"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "size",
+              "type": {
+                "text": "boolean"
+              },
+              "description": "Changes the size of popover to keep it in view when scrolling.",
+              "default": "false",
+              "attribute": "size",
               "reflects": true,
               "inheritedFrom": {
                 "name": "Popover",
@@ -39314,6 +39551,32 @@
                 "module": "src/components/popover/popover.component.ts"
               }
             },
+            {
+              "name": "backdrop-append-to",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "Element ID the backdrop will be a append to (if `backdrop` is true).",
+              "default": "''",
+              "fieldName": "backdropAppendTo",
+              "inheritedFrom": {
+                "name": "Popover",
+                "module": "src/components/popover/popover.component.ts"
+              }
+            },
+            {
+              "name": "is-backdrop-invisible",
+              "type": {
+                "text": "boolean | undefined"
+              },
+              "description": "Set this property to true to make the backdrop invisible (if `backdrop` is true).\nThis is useful for components that do want a backdrop which stops interaction,\nbut do not want the backdrop to be visible as a overlay.",
+              "default": "false",
+              "fieldName": "isBackdropInvisible",
+              "inheritedFrom": {
+                "name": "Popover",
+                "module": "src/components/popover/popover.component.ts"
+              }
+            },
             {
               "name": "flip",
               "type": {
@@ -39688,6 +39951,21 @@
               ],
               "description": "Updates the tooltip type attribute and sets the appropriate aria props on the trigger component."
             },
+            {
+              "kind": "field",
+              "name": "zIndex",
+              "type": {
+                "text": "number"
+              },
+              "description": "IMPLEMENT THIS IN YOUR COMPONENT.\n\nThe z-index of the component where the backdrop will be attached to.\nThe backdrop itself will have a z-index of `zIndex - 1`.",
+              "default": "1000",
+              "attribute": "z-index",
+              "reflects": true,
+              "inheritedFrom": {
+                "name": "Popover",
+                "module": "components/popover/popover.component.js"
+              }
+            },
             {
               "kind": "field",
               "name": "preventScroll",
@@ -40536,13 +40814,13 @@
             },
             {
               "kind": "field",
-              "name": "flip",
+              "name": "backdropAppendTo",
               "type": {
-                "text": "boolean"
+                "text": "string | undefined"
               },
-              "description": "Changes the placement of popover to keep it in view when scrolling.",
-              "default": "true",
-              "attribute": "flip",
+              "description": "Element ID the backdrop will be a append to (if `backdrop` is true).",
+              "default": "''",
+              "attribute": "backdrop-append-to",
               "reflects": true,
               "inheritedFrom": {
                 "name": "Popover",
@@ -40551,13 +40829,13 @@
             },
             {
               "kind": "field",
-              "name": "size",
+              "name": "isBackdropInvisible",
               "type": {
-                "text": "boolean"
+                "text": "boolean | undefined"
               },
-              "description": "Changes the size of popover to keep it in view when scrolling.",
+              "description": "Set this property to true to make the backdrop invisible (if `backdrop` is true).\nThis is useful for components that do want a backdrop which stops interaction,\nbut do not want the backdrop to be visible as a overlay.",
               "default": "false",
-              "attribute": "size",
+              "attribute": "is-backdrop-invisible",
               "reflects": true,
               "inheritedFrom": {
                 "name": "Popover",
@@ -40566,13 +40844,28 @@
             },
             {
               "kind": "field",
-              "name": "zIndex",
+              "name": "flip",
               "type": {
-                "text": "number"
+                "text": "boolean"
               },
-              "description": "The z-index of the popover.",
-              "default": "1000",
-              "attribute": "z-index",
+              "description": "Changes the placement of popover to keep it in view when scrolling.",
+              "default": "true",
+              "attribute": "flip",
+              "reflects": true,
+              "inheritedFrom": {
+                "name": "Popover",
+                "module": "components/popover/popover.component.js"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "size",
+              "type": {
+                "text": "boolean"
+              },
+              "description": "Changes the size of popover to keep it in view when scrolling.",
+              "default": "false",
+              "attribute": "size",
               "reflects": true,
               "inheritedFrom": {
                 "name": "Popover",
@@ -41343,6 +41636,32 @@
                 "module": "src/components/popover/popover.component.ts"
               }
             },
+            {
+              "name": "backdrop-append-to",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "Element ID the backdrop will be a append to (if `backdrop` is true).",
+              "default": "''",
+              "fieldName": "backdropAppendTo",
+              "inheritedFrom": {
+                "name": "Popover",
+                "module": "src/components/popover/popover.component.ts"
+              }
+            },
+            {
+              "name": "is-backdrop-invisible",
+              "type": {
+                "text": "boolean | undefined"
+              },
+              "description": "Set this property to true to make the backdrop invisible (if `backdrop` is true).\nThis is useful for components that do want a backdrop which stops interaction,\nbut do not want the backdrop to be visible as a overlay.",
+              "default": "false",
+              "fieldName": "isBackdropInvisible",
+              "inheritedFrom": {
+                "name": "Popover",
+                "module": "src/components/popover/popover.component.ts"
+              }
+            },
             {
               "name": "flip",
               "type": {
@@ -42192,6 +42511,157 @@
         }
       ]
     },
+    {
+      "kind": "javascript-module",
+      "path": "utils/mixins/BackdropMixin.js",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "",
+          "name": "BackdropMixinInterface",
+          "members": [
+            {
+              "kind": "field",
+              "name": "zIndex",
+              "type": {
+                "text": "number"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "backdropElement",
+              "type": {
+                "text": "HTMLElement | null"
+              },
+              "privacy": "protected"
+            },
+            {
+              "kind": "field",
+              "name": "isBackdropInvisible",
+              "type": {
+                "text": "boolean | undefined"
+              },
+              "privacy": "protected"
+            },
+            {
+              "kind": "field",
+              "name": "backdropAppendTo",
+              "type": {
+                "text": "string | undefined"
+              },
+              "privacy": "protected"
+            },
+            {
+              "kind": "method",
+              "name": "createBackdrop",
+              "privacy": "protected",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "classNamePrefix",
+                  "type": {
+                    "text": "string"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "removeBackdrop",
+              "privacy": "protected",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              }
+            },
+            {
+              "kind": "method",
+              "name": "keepElementAboveBackdrop",
+              "privacy": "protected",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "element",
+                  "optional": true,
+                  "type": {
+                    "text": "HTMLElement | null"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "moveElementBackAfterBackdropRemoval",
+              "privacy": "protected",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "element",
+                  "optional": true,
+                  "type": {
+                    "text": "HTMLElement | null"
+                  }
+                }
+              ]
+            }
+          ]
+        },
+        {
+          "kind": "mixin",
+          "description": "",
+          "name": "BackdropMixin",
+          "members": [
+            {
+              "kind": "field",
+              "name": "zIndex",
+              "type": {
+                "text": "number"
+              },
+              "description": "IMPLEMENT THIS IN YOUR COMPONENT.\n\nThe z-index of the component where the backdrop will be attached to.\nThe backdrop itself will have a z-index of `zIndex - 1`."
+            }
+          ],
+          "parameters": [
+            {
+              "name": "superClass",
+              "type": {
+                "text": "T"
+              }
+            }
+          ]
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "BackdropMixinInterface",
+          "declaration": {
+            "name": "BackdropMixinInterface",
+            "module": "utils/mixins/BackdropMixin.js"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "BackdropMixin",
+          "declaration": {
+            "name": "BackdropMixin",
+            "module": "utils/mixins/BackdropMixin.js"
+          }
+        }
+      ]
+    },
     {
       "kind": "javascript-module",
       "path": "utils/mixins/ButtonComponentMixin.js",