@momentum-design/components 0.120.23 → 0.120.24

package/dist/custom-elements.json

@@ -4274,166 +4274,6 @@
         }
       ]
     },
-    {
-      "kind": "javascript-module",
-      "path": "components/banner/banner.component.js",
-      "declarations": [
-        {
-          "kind": "class",
-          "description": "`mdc-banner` is a component that allows applications to communicate important messages to users \nand requires user action to dismiss them. It supports different message types with appropriate styling \nand icons, and provides flexibility for customization through label, secondary label, icons, and actions.\n\nThey are designed to be noticeable yet non-intrusive, helping users stay informed without interrupting their workflow.\n\nThis component supports both structured content via properties and flexible customization via slots:\n- Use the properties (`label`, `secondaryLabel`, `variant`) for standard banner layouts with automatic icon selection.\n- Use slots for custom content and complete layout control.\n- Combine both approaches for maximum flexibility.\n- Create custom orientations and actions using CSS parts and slots.",
-          "name": "Banner",
-          "cssProperties": [
-            {
-              "description": "Background color of the banner.",
-              "name": "--mdc-banner-background-color"
-            },
-            {
-              "description": "Border color of the banner.",
-              "name": "--mdc-banner-border-color"
-            },
-            {
-              "description": "Color of the icon in the banner.",
-              "name": "--mdc-banner-icon-color"
-            },
-            {
-              "description": "Elevation/shadow of the banner.",
-              "name": "--mdc-banner-elevation"
-            },
-            {
-              "description": "Padding inside the banner.",
-              "name": "--mdc-banner-padding"
-            },
-            {
-              "description": "Gap between banner elements.",
-              "name": "--mdc-banner-gap"
-            }
-          ],
-          "cssParts": [
-            {
-              "description": "The leading section containing the icon and text.",
-              "name": "leading"
-            },
-            {
-              "description": "The icon displayed for variants or custom icon slot.",
-              "name": "leading-icon"
-            },
-            {
-              "description": "The leading section containing label and secondary label text.",
-              "name": "leading-text"
-            },
-            {
-              "description": "The trailing section containing action buttons and controls.",
-              "name": "trailing"
-            },
-            {
-              "description": "The label text of the banner.",
-              "name": "leading-label"
-            },
-            {
-              "description": "The secondary label text of the banner.",
-              "name": "leading-secondary-label"
-            }
-          ],
-          "slots": [
-            {
-              "description": "Complete content override. When used, it replaces all default banner content including icon, label, secondary label, and actions.",
-              "name": "content"
-            },
-            {
-              "description": "Custom icon content. Overrides the default variant-based icon.",
-              "name": "leading-icon"
-            },
-            {
-              "description": "Custom text content. Overrides the label and secondaryLabel properties.",
-              "name": "leading-text"
-            },
-            {
-              "description": "Custom action buttons and controls. Use this for dismiss buttons, reset buttons, or any other actions.",
-              "name": "trailing-actions"
-            }
-          ],
-          "members": [
-            {
-              "kind": "field",
-              "name": "variant",
-              "type": {
-                "text": "BannerVariant"
-              },
-              "description": "The type of banner variant.\n- Can be `custom`, `informational`, `warning`, `error`, or `success`.\n\nNote: When using the `custom` variant, provide your own icon via the `leading-icon` slot; otherwise, no icon will be shown.",
-              "default": "'custom'",
-              "attribute": "variant",
-              "reflects": true
-            },
-            {
-              "kind": "field",
-              "name": "label",
-              "type": {
-                "text": "string"
-              },
-              "default": "''",
-              "description": "Banner label text",
-              "attribute": "label",
-              "reflects": true
-            },
-            {
-              "kind": "field",
-              "name": "secondaryLabel",
-              "type": {
-                "text": "string | undefined"
-              },
-              "description": "Banner secondary label text\n\nNote: Optional supporting text that appears below the label. Only rendered when label is also provided.",
-              "attribute": "secondary-label",
-              "reflects": true
-            }
-          ],
-          "attributes": [
-            {
-              "name": "variant",
-              "type": {
-                "text": "BannerVariant"
-              },
-              "description": "The type of banner variant.\n- Can be `custom`, `informational`, `warning`, `error`, or `success`.\n\nNote: When using the `custom` variant, provide your own icon via the `leading-icon` slot; otherwise, no icon will be shown.",
-              "default": "'custom'",
-              "fieldName": "variant"
-            },
-            {
-              "name": "label",
-              "type": {
-                "text": "string"
-              },
-              "default": "''",
-              "description": "Banner label text",
-              "fieldName": "label"
-            },
-            {
-              "name": "secondary-label",
-              "type": {
-                "text": "string | undefined"
-              },
-              "description": "Banner secondary label text\n\nNote: Optional supporting text that appears below the label. Only rendered when label is also provided.",
-              "fieldName": "secondaryLabel"
-            }
-          ],
-          "superclass": {
-            "name": "Component",
-            "module": "/src/models"
-          },
-          "tagName": "mdc-banner",
-          "jsDoc": "/**\n * `mdc-banner` is a component that allows applications to communicate important messages to users \n * and requires user action to dismiss them. It supports different message types with appropriate styling \n * and icons, and provides flexibility for customization through label, secondary label, icons, and actions.\n * \n * They are designed to be noticeable yet non-intrusive, helping users stay informed without interrupting their workflow.\n *\n * This component supports both structured content via properties and flexible customization via slots:\n * - Use the properties (`label`, `secondaryLabel`, `variant`) for standard banner layouts with automatic icon selection.\n * - Use slots for custom content and complete layout control.\n * - Combine both approaches for maximum flexibility.\n * - Create custom orientations and actions using CSS parts and slots.\n * \n * @dependency mdc-icon\n * @dependency mdc-text\n *\n * @slot content - Complete content override. When used, it replaces all default banner content including icon, label, secondary label, and actions.\n * @slot leading-icon - Custom icon content. Overrides the default variant-based icon.\n * @slot leading-text - Custom text content. Overrides the label and secondaryLabel properties.\n * @slot trailing-actions - Custom action buttons and controls. Use this for dismiss buttons, reset buttons, or any other actions.\n *\n * @tagname mdc-banner\n *\n * @csspart leading - The leading section containing the icon and text.\n * @csspart leading-icon - The icon displayed for variants or custom icon slot.\n * @csspart leading-text - The leading section containing label and secondary label text.\n * @csspart trailing - The trailing section containing action buttons and controls.\n * @csspart leading-label - The label text of the banner.\n * @csspart leading-secondary-label - The secondary label text of the banner.\n *\n * @cssproperty --mdc-banner-background-color - Background color of the banner.\n * @cssproperty --mdc-banner-border-color - Border color of the banner.\n * @cssproperty --mdc-banner-icon-color - Color of the icon in the banner.\n * @cssproperty --mdc-banner-elevation - Elevation/shadow of the banner.\n * @cssproperty --mdc-banner-padding - Padding inside the banner.\n * @cssproperty --mdc-banner-gap - Gap between banner elements.\n */",
-          "customElement": true
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "default",
-          "declaration": {
-            "name": "Banner",
-            "module": "components/banner/banner.component.js"
-          }
-        }
-      ]
-    },
     {
       "kind": "javascript-module",
       "path": "components/badge/badge.component.js",
@@ -4766,6 +4606,166 @@
         }
       ]
     },
+    {
+      "kind": "javascript-module",
+      "path": "components/banner/banner.component.js",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "`mdc-banner` is a component that allows applications to communicate important messages to users \nand requires user action to dismiss them. It supports different message types with appropriate styling \nand icons, and provides flexibility for customization through label, secondary label, icons, and actions.\n\nThey are designed to be noticeable yet non-intrusive, helping users stay informed without interrupting their workflow.\n\nThis component supports both structured content via properties and flexible customization via slots:\n- Use the properties (`label`, `secondaryLabel`, `variant`) for standard banner layouts with automatic icon selection.\n- Use slots for custom content and complete layout control.\n- Combine both approaches for maximum flexibility.\n- Create custom orientations and actions using CSS parts and slots.",
+          "name": "Banner",
+          "cssProperties": [
+            {
+              "description": "Background color of the banner.",
+              "name": "--mdc-banner-background-color"
+            },
+            {
+              "description": "Border color of the banner.",
+              "name": "--mdc-banner-border-color"
+            },
+            {
+              "description": "Color of the icon in the banner.",
+              "name": "--mdc-banner-icon-color"
+            },
+            {
+              "description": "Elevation/shadow of the banner.",
+              "name": "--mdc-banner-elevation"
+            },
+            {
+              "description": "Padding inside the banner.",
+              "name": "--mdc-banner-padding"
+            },
+            {
+              "description": "Gap between banner elements.",
+              "name": "--mdc-banner-gap"
+            }
+          ],
+          "cssParts": [
+            {
+              "description": "The leading section containing the icon and text.",
+              "name": "leading"
+            },
+            {
+              "description": "The icon displayed for variants or custom icon slot.",
+              "name": "leading-icon"
+            },
+            {
+              "description": "The leading section containing label and secondary label text.",
+              "name": "leading-text"
+            },
+            {
+              "description": "The trailing section containing action buttons and controls.",
+              "name": "trailing"
+            },
+            {
+              "description": "The label text of the banner.",
+              "name": "leading-label"
+            },
+            {
+              "description": "The secondary label text of the banner.",
+              "name": "leading-secondary-label"
+            }
+          ],
+          "slots": [
+            {
+              "description": "Complete content override. When used, it replaces all default banner content including icon, label, secondary label, and actions.",
+              "name": "content"
+            },
+            {
+              "description": "Custom icon content. Overrides the default variant-based icon.",
+              "name": "leading-icon"
+            },
+            {
+              "description": "Custom text content. Overrides the label and secondaryLabel properties.",
+              "name": "leading-text"
+            },
+            {
+              "description": "Custom action buttons and controls. Use this for dismiss buttons, reset buttons, or any other actions.",
+              "name": "trailing-actions"
+            }
+          ],
+          "members": [
+            {
+              "kind": "field",
+              "name": "variant",
+              "type": {
+                "text": "BannerVariant"
+              },
+              "description": "The type of banner variant.\n- Can be `custom`, `informational`, `warning`, `error`, or `success`.\n\nNote: When using the `custom` variant, provide your own icon via the `leading-icon` slot; otherwise, no icon will be shown.",
+              "default": "'custom'",
+              "attribute": "variant",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "label",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "description": "Banner label text",
+              "attribute": "label",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "secondaryLabel",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "Banner secondary label text\n\nNote: Optional supporting text that appears below the label. Only rendered when label is also provided.",
+              "attribute": "secondary-label",
+              "reflects": true
+            }
+          ],
+          "attributes": [
+            {
+              "name": "variant",
+              "type": {
+                "text": "BannerVariant"
+              },
+              "description": "The type of banner variant.\n- Can be `custom`, `informational`, `warning`, `error`, or `success`.\n\nNote: When using the `custom` variant, provide your own icon via the `leading-icon` slot; otherwise, no icon will be shown.",
+              "default": "'custom'",
+              "fieldName": "variant"
+            },
+            {
+              "name": "label",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "description": "Banner label text",
+              "fieldName": "label"
+            },
+            {
+              "name": "secondary-label",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "Banner secondary label text\n\nNote: Optional supporting text that appears below the label. Only rendered when label is also provided.",
+              "fieldName": "secondaryLabel"
+            }
+          ],
+          "superclass": {
+            "name": "Component",
+            "module": "/src/models"
+          },
+          "tagName": "mdc-banner",
+          "jsDoc": "/**\n * `mdc-banner` is a component that allows applications to communicate important messages to users \n * and requires user action to dismiss them. It supports different message types with appropriate styling \n * and icons, and provides flexibility for customization through label, secondary label, icons, and actions.\n * \n * They are designed to be noticeable yet non-intrusive, helping users stay informed without interrupting their workflow.\n *\n * This component supports both structured content via properties and flexible customization via slots:\n * - Use the properties (`label`, `secondaryLabel`, `variant`) for standard banner layouts with automatic icon selection.\n * - Use slots for custom content and complete layout control.\n * - Combine both approaches for maximum flexibility.\n * - Create custom orientations and actions using CSS parts and slots.\n * \n * @dependency mdc-icon\n * @dependency mdc-text\n *\n * @slot content - Complete content override. When used, it replaces all default banner content including icon, label, secondary label, and actions.\n * @slot leading-icon - Custom icon content. Overrides the default variant-based icon.\n * @slot leading-text - Custom text content. Overrides the label and secondaryLabel properties.\n * @slot trailing-actions - Custom action buttons and controls. Use this for dismiss buttons, reset buttons, or any other actions.\n *\n * @tagname mdc-banner\n *\n * @csspart leading - The leading section containing the icon and text.\n * @csspart leading-icon - The icon displayed for variants or custom icon slot.\n * @csspart leading-text - The leading section containing label and secondary label text.\n * @csspart trailing - The trailing section containing action buttons and controls.\n * @csspart leading-label - The label text of the banner.\n * @csspart leading-secondary-label - The secondary label text of the banner.\n *\n * @cssproperty --mdc-banner-background-color - Background color of the banner.\n * @cssproperty --mdc-banner-border-color - Border color of the banner.\n * @cssproperty --mdc-banner-icon-color - Color of the icon in the banner.\n * @cssproperty --mdc-banner-elevation - Elevation/shadow of the banner.\n * @cssproperty --mdc-banner-padding - Padding inside the banner.\n * @cssproperty --mdc-banner-gap - Gap between banner elements.\n */",
+          "customElement": true
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "default",
+          "declaration": {
+            "name": "Banner",
+            "module": "components/banner/banner.component.js"
+          }
+        }
+      ]
+    },
     {
       "kind": "javascript-module",
       "path": "components/brandvisual/brandvisual.component.js",
@@ -30368,6 +30368,30 @@
               "attribute": "aria-label",
               "reflects": true
             },
+            {
+              "kind": "method",
+              "name": "renderIcon",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "TemplateResult"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "slotName",
+                  "type": {
+                    "text": "string"
+                  }
+                },
+                {
+                  "name": "iconName",
+                  "type": {
+                    "text": "string"
+                  }
+                }
+              ]
+            },
             {
               "kind": "field",
               "name": "name",
@@ -37697,12 +37721,12 @@
     },
     {
       "kind": "javascript-module",
-      "path": "components/select/select.component.js",
+      "path": "components/searchfield/searchfield.component.js",
       "declarations": [
         {
           "kind": "class",
-          "description": "The mdc-select component is a dropdown selection control that allows users to pick an option from a predefined list.\nIt is designed to work with `mdc-option` for individual options and `mdc-optgroup` for grouping related options.\n\nEvery mdc-option should have a `value` attribute set to ensure proper form submission.\n\nTo set a default option, use the `selected` attribute on the `mdc-option` element.\nYou can also set the `value` attribute on the `mdc-select` element to match the value of the desired option. The component will select the corresponding option automatically.\n\n**Note:** Make sure to add `mdc-selectlistbox` as a child of `mdc-select` and wrap options/optgroup in it to ensure proper accessibility functionality. Read more about it in SelectListBox documentation.\n\nIf you need to use `mdc-tooltip` with any options, make sure to place the tooltip component outside the `mdc-select` element.",
-          "name": "Select",
+          "description": "`mdc-searchfield` component is used as an input field for search functionality.\n\nIt supports `mdc-inputchip` as filters.\n\nThis component is built by extending the `mdc-input` component.",
+          "name": "Searchfield",
           "cssProperties": [
             {
               "description": "Font size for the label text.",
@@ -37769,28 +37793,52 @@
               }
             },
             {
-              "description": "The background color of the combobox of select.",
-              "name": "--mdc-select-background-color"
+              "description": "Text color for the input field",
+              "name": "--mdc-input-text-color",
+              "inheritedFrom": {
+                "name": "Input",
+                "module": "src/components/input/input.component.ts"
+              }
             },
             {
-              "description": "The text color of the select.",
-              "name": "--mdc-select-text-color"
+              "description": "Border color for the input container",
+              "name": "--mdc-input-border-color",
+              "inheritedFrom": {
+                "name": "Input",
+                "module": "src/components/input/input.component.ts"
+              }
             },
             {
-              "description": "The border color of the select.",
-              "name": "--mdc-select-border-color"
+              "description": "Background color for the input field",
+              "name": "--mdc-input-background-color",
+              "inheritedFrom": {
+                "name": "Input",
+                "module": "src/components/input/input.component.ts"
+              }
             },
             {
-              "description": "The width of the select.",
-              "name": "--mdc-select-width"
+              "description": "Text color for the help text",
+              "name": "--mdc-input-support-text-color",
+              "inheritedFrom": {
+                "name": "Input",
+                "module": "src/components/input/input.component.ts"
+              }
             },
             {
-              "description": "The height of the listbox inside the select.",
-              "name": "--mdc-select-listbox-height"
+              "description": "Text color for the selected text",
+              "name": "--mdc-input-selection-text-color",
+              "inheritedFrom": {
+                "name": "Input",
+                "module": "src/components/input/input.component.ts"
+              }
             },
             {
-              "description": "The width of the listbox inside the select (default: `--mdc-select-width`).",
-              "name": "--mdc-select-listbox-width"
+              "description": "Background color for the selected text",
+              "name": "--mdc-input-selection-background-color",
+              "inheritedFrom": {
+                "name": "Input",
+                "module": "src/components/input/input.component.ts"
+              }
             }
           ],
           "cssParts": [
@@ -37857,12 +37905,60 @@
                 "name": "FormfieldWrapper",
                 "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
               }
+            },
+            {
+              "description": "The leading icon element that is displayed before the input field.",
+              "name": "leading-icon",
+              "inheritedFrom": {
+                "name": "Input",
+                "module": "src/components/input/input.component.ts"
+              }
+            },
+            {
+              "description": "The prefix text element that is displayed before the input field.",
+              "name": "prefix-text",
+              "inheritedFrom": {
+                "name": "Input",
+                "module": "src/components/input/input.component.ts"
+              }
+            },
+            {
+              "description": "The container for the input field, leading icon, prefix text, and trailing button elements.",
+              "name": "input-container",
+              "inheritedFrom": {
+                "name": "Input",
+                "module": "src/components/input/input.component.ts"
+              }
+            },
+            {
+              "description": "The container for the input field, leading icon, and prefix text elements.",
+              "name": "input-section",
+              "inheritedFrom": {
+                "name": "Input",
+                "module": "src/components/input/input.component.ts"
+              }
+            },
+            {
+              "description": "The input field element.",
+              "name": "input-text",
+              "inheritedFrom": {
+                "name": "Input",
+                "module": "src/components/input/input.component.ts"
+              }
+            },
+            {
+              "description": "The trailing button element that is displayed to clear the input field when the `trailingButton` property is set to true.",
+              "name": "trailing-button",
+              "inheritedFrom": {
+                "name": "Input",
+                "module": "src/components/input/input.component.ts"
+              }
             }
           ],
           "slots": [
             {
-              "description": "This is a default/unnamed slot for Selectlistbox including options and/or option group.",
-              "name": "default"
+              "description": "Slot for input chips",
+              "name": "filters"
             },
             {
               "description": "Slot for the label element. If not provided, the `label` property will be used to render the label.",
@@ -37895,337 +37991,81 @@
                 "name": "FormfieldWrapper",
                 "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
               }
-            }
-          ],
-          "members": [
-            {
-              "kind": "field",
-              "name": "placeholder",
-              "type": {
-                "text": "string | undefined"
-              },
-              "description": "The placeholder text which will be shown on the text if provided.",
-              "attribute": "placeholder"
-            },
-            {
-              "kind": "field",
-              "name": "placement",
-              "type": {
-                "text": "Placement"
-              },
-              "description": "The placement of the popover within Select component.\nThis defines the position of the popover relative to the select input field.\n\nPossible values:\n - 'top-start'\n - 'bottom-start'",
-              "default": "'bottom-start'",
-              "attribute": "placement",
-              "reflects": true
-            },
-            {
-              "kind": "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": "PopoverStrategy"
-              },
-              "description": "The strategy of the popover within Select.\nThis determines how the popover is positioned in the DOM.\n\nIn case `boundary` is set to something other than 'clippingAncestors',\nit might be necessary to set the `strategy` to 'fixed' to ensure that the popover\nis not getting clipped by scrollable containers enclosing the select.",
-              "default": "absolute",
-              "attribute": "strategy",
-              "reflects": true
-            },
-            {
-              "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": "handleOptionsClick",
-              "privacy": "private",
-              "return": {
-                "type": {
-                  "text": "void"
-                }
-              },
-              "parameters": [
-                {
-                  "name": "event",
-                  "type": {
-                    "text": "MouseEvent"
-                  },
-                  "description": "The event which triggered this function."
-                }
-              ],
-              "description": "A private method which is called when an option is clicked.\nIt sets the selected option, removes selected from other options, updates the tabindex for all options,\ncloses the popover, and fires the change and input events."
-            },
-            {
-              "kind": "method",
-              "name": "setSelectedOption",
-              "privacy": "private",
-              "return": {
-                "type": {
-                  "text": "void"
-                }
-              },
-              "parameters": [
-                {
-                  "name": "option",
-                  "type": {
-                    "text": "Option | null"
-                  },
-                  "description": "The option element in DOM which gets selected."
-                }
-              ],
-              "description": "Sets the selected option in the component state and updates the input element's value.\nThis method ensures that only the selected option is marked as selected in the DOM,\nand updates the tabindex for all options accordingly.\nIt also updates the validity of the input element based on the selected option.\nThis method is called when an option is selected."
-            },
-            {
-              "kind": "method",
-              "name": "updateSelectedInChildOptions",
-              "privacy": "private",
-              "return": {
-                "type": {
-                  "text": "void"
-                }
-              },
-              "parameters": [
-                {
-                  "name": "selectedOption",
-                  "type": {
-                    "text": "Option | null"
-                  },
-                  "description": "The option which gets selected"
-                }
-              ],
-              "description": "Sets selected attribute on the selected option and removes it from all options"
-            },
-            {
-              "kind": "method",
-              "name": "fireEvents",
-              "privacy": "private",
-              "return": {
-                "type": {
-                  "text": "void"
-                }
-              },
-              "description": "A private method which is called to fire the change and input events.\nIt dispatches the input and change events with the selected option's value and label."
-            },
-            {
-              "kind": "method",
-              "name": "dispatchChange",
-              "privacy": "private",
-              "return": {
-                "type": {
-                  "text": "void"
-                }
-              },
-              "parameters": [
-                {
-                  "name": "option",
-                  "type": {
-                    "text": "Option"
-                  }
-                }
-              ]
-            },
-            {
-              "kind": "method",
-              "name": "dispatchInput",
-              "privacy": "private",
-              "return": {
-                "type": {
-                  "text": "void"
-                }
-              },
-              "parameters": [
-                {
-                  "name": "option",
-                  "type": {
-                    "text": "Option"
-                  }
-                }
-              ]
             },
             {
-              "kind": "method",
-              "name": "handleClickCombobox",
-              "privacy": "private",
-              "return": {
-                "type": {
-                  "text": "void"
-                }
-              },
-              "parameters": [
-                {
-                  "name": "event",
-                  "type": {
-                    "text": "MouseEvent"
-                  },
-                  "description": "The mouse event which triggered this function."
-                }
-              ],
-              "description": "Handles the click event on the visual combobox.\nIf the select is disabled, soft-disabled or readonly, it does nothing.\nIf the popover is already open, it closes it.\nIf it is closed, it opens it."
+              "description": "Slot for the input element. If not provided, the input field will be rendered.",
+              "name": "input",
+              "inheritedFrom": {
+                "name": "Input",
+                "module": "src/components/input/input.component.ts"
+              }
             },
             {
-              "kind": "method",
-              "name": "handleKeydownCombobox",
-              "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 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": "Slot for the leading icon before the input field. If not provided, the `leadingIcon` property will be used to render the leading icon.",
+              "name": "input-leading-icon",
+              "inheritedFrom": {
+                "name": "Input",
+                "module": "src/components/input/input.component.ts"
+              }
             },
             {
-              "kind": "method",
-              "name": "getCurrentIndex",
-              "privacy": "private",
-              "return": {
-                "type": {
-                  "text": ""
-                }
-              },
-              "parameters": [
-                {
-                  "name": "target",
-                  "type": {
-                    "text": "HTMLElement | null"
-                  },
-                  "description": "The target element that triggered the event."
-                }
-              ],
-              "description": "Retrieves the current index of the item that triggered the event.",
+              "description": "Slot for the prefix text before the input field. If not provided, the `prefixText` property will be used to render the prefix text.",
+              "name": "input-prefix-text",
               "inheritedFrom": {
-                "name": "ListNavigationMixin",
-                "module": "utils/mixins/ListNavigationMixin.js"
+                "name": "Input",
+                "module": "src/components/input/input.component.ts"
               }
             },
             {
-              "kind": "method",
-              "name": "resetTabIndexes",
-              "privacy": "protected",
-              "parameters": [
-                {
-                  "name": "index",
-                  "type": {
-                    "text": "number"
-                  },
-                  "description": "The index of the currently focused item."
-                }
-              ],
-              "description": "Reset all tabindex to -1 and set the tabindex of the current item to 0",
+              "description": "Slot for the trailing button to clear the input field. If not provided, the clear button will be rendered when `trailingButton` property is set to true.",
+              "name": "trailing-button",
               "inheritedFrom": {
-                "name": "ListNavigationMixin",
-                "module": "utils/mixins/ListNavigationMixin.js"
+                "name": "Input",
+                "module": "src/components/input/input.component.ts"
+              }
+            }
+          ],
+          "members": [
+            {
+              "kind": "field",
+              "name": "inputChips",
+              "type": {
+                "text": "Array<HTMLElement> | undefined"
               }
             },
             {
               "kind": "method",
-              "name": "resetTabIndexAndSetFocus",
+              "name": "handleKeyDown",
               "privacy": "protected",
               "parameters": [
                 {
-                  "name": "newIndex",
-                  "type": {
-                    "text": "number"
-                  },
-                  "description": "The index of the new item to focus."
-                },
-                {
-                  "name": "oldIndex",
-                  "optional": true,
+                  "name": "event",
                   "type": {
-                    "text": "number"
+                    "text": "KeyboardEvent"
                   },
-                  "description": "The index of the currently focused item."
-                },
-                {
-                  "name": "focusNewItem",
-                  "default": "true",
-                  "description": "Call focus() on the new item or not. It should be false during firstUpdate"
+                  "description": "Keyboard event"
                 }
               ],
-              "description": "Resets the tabindex of the currently focused item and sets focus to a new item.",
-              "return": {
-                "type": {
-                  "text": ""
-                }
-              },
+              "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": "ListNavigationMixin",
-                "module": "utils/mixins/ListNavigationMixin.js"
+                "name": "Input",
+                "module": "components/input/input.component.js"
               }
             },
             {
               "kind": "method",
-              "name": "resolveDirectionKey",
+              "name": "renderInputChips",
               "privacy": "private",
-              "parameters": [
-                {
-                  "name": "key",
-                  "type": {
-                    "text": "string"
-                  },
-                  "description": "The key pressed by the user."
-                },
-                {
-                  "name": "isRtl",
-                  "type": {
-                    "text": "boolean"
-                  },
-                  "description": "A boolean indicating if the layout is right-to-left (RTL)."
-                }
-              ],
-              "description": "Resolves the key pressed by the user based on the direction of the layout.\nThis method is used to handle keyboard navigation in a right-to-left (RTL) layout.\nIt checks if the layout is RTL and adjusts the arrow keys accordingly.\nFor example, in RTL, the left arrow key behaves like the right arrow key and vice versa.",
-              "return": {
-                "type": {
-                  "text": ""
-                }
-              },
-              "inheritedFrom": {
-                "name": "ListNavigationMixin",
-                "module": "utils/mixins/ListNavigationMixin.js"
-              }
+              "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": "shouldLoop",
-              "privacy": "private",
+              "name": "clearInputText",
+              "privacy": "protected",
+              "description": "Clears the input field.",
               "inheritedFrom": {
-                "name": "ListNavigationMixin",
-                "module": "utils/mixins/ListNavigationMixin.js"
+                "name": "Input",
+                "module": "components/input/input.component.js"
               }
             },
             {
@@ -38358,6 +38198,306 @@
                 "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": "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": "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",
@@ -38594,90 +38734,71 @@
           ],
           "events": [
             {
-              "name": "change",
-              "type": {
-                "text": "CustomEvent"
-              },
-              "description": "(React: onChange) This event is dispatched when the select is changed.",
-              "reactName": "onChange"
-            },
-            {
+              "description": "(React: onInput) This event is dispatched when the value of the input field changes (every press).",
               "name": "input",
-              "type": {
-                "text": "CustomEvent"
-              },
-              "description": "(React: onInput) This event is dispatched when the select is changed.",
-              "reactName": "onInput"
-            },
-            {
-              "description": "(React: onClick) This event is dispatched when the select is clicked.",
-              "name": "click",
-              "reactName": "onClick"
+              "reactName": "onInput",
+              "inheritedFrom": {
+                "name": "Input",
+                "module": "src/components/input/input.component.ts"
+              }
             },
             {
-              "description": "(React: onKeyDown) This event is dispatched when a key is pressed down on the select.",
-              "name": "keydown",
-              "reactName": "onKeyDown"
+              "description": "(React: onChange) This event is dispatched when the value of the input field changes (on blur).",
+              "name": "change",
+              "reactName": "onChange",
+              "inheritedFrom": {
+                "name": "Input",
+                "module": "src/components/input/input.component.ts"
+              }
             },
             {
-              "description": "(React: onFocus) This event is dispatched when the select receives focus.",
+              "description": "(React: onFocus) This event is dispatched when the input receives focus.",
               "name": "focus",
-              "reactName": "onFocus"
-            }
-          ],
-          "attributes": [
-            {
-              "name": "placeholder",
-              "type": {
-                "text": "string | undefined"
-              },
-              "description": "The placeholder text which will be shown on the text if provided.",
-              "fieldName": "placeholder"
-            },
-            {
-              "name": "placement",
-              "type": {
-                "text": "Placement"
-              },
-              "description": "The placement of the popover within Select component.\nThis defines the position of the popover relative to the select input field.\n\nPossible values:\n - 'top-start'\n - 'bottom-start'",
-              "default": "'bottom-start'",
-              "fieldName": "placement"
-            },
-            {
-              "name": "boundary",
-              "type": {
-                "text": "'clippingAncestors' | string"
-              },
-              "description": "This describes the clipping element(s) or area that overflow of the used popover will be checked relative to.\nThe default is 'clippingAncestors', which are the overflow ancestors which will cause the\nelement to be clipped.\n\nPossible values:\n - 'clippingAncestors'\n - any css selector",
-              "default": "'clippingAncestors'",
-              "fieldName": "boundary"
+              "reactName": "onFocus",
+              "inheritedFrom": {
+                "name": "Input",
+                "module": "src/components/input/input.component.ts"
+              }
             },
             {
-              "name": "strategy",
-              "type": {
-                "text": "PopoverStrategy"
-              },
-              "description": "The strategy of the popover within Select.\nThis determines how the popover is positioned in the DOM.\n\nIn case `boundary` is set to something other than 'clippingAncestors',\nit might be necessary to set the `strategy` to 'fixed' to ensure that the popover\nis not getting clipped by scrollable containers enclosing the select.",
-              "default": "absolute",
-              "fieldName": "strategy"
+              "description": "(React: onBlur) This event is dispatched when the input loses focus.",
+              "name": "blur",
+              "reactName": "onBlur",
+              "inheritedFrom": {
+                "name": "Input",
+                "module": "src/components/input/input.component.ts"
+              }
             },
             {
-              "name": "popover-z-index",
+              "name": "clear",
               "type": {
-                "text": "number"
+                "text": "CustomEvent"
               },
-              "description": "The z-index of the popover within Select.\n\nOverride this to make sure this stays on top of other components.",
-              "default": "1000",
-              "fieldName": "popoverZIndex"
+              "description": "(React: onClear) This event is dispatched when the input text is cleared.",
+              "reactName": "onClear",
+              "inheritedFrom": {
+                "name": "Input",
+                "module": "src/components/input/input.component.ts"
+              }
             },
             {
-              "name": "backdrop-append-to",
               "type": {
-                "text": "string | undefined"
+                "text": "EventConstructor"
               },
-              "description": "ID of the element where the backdrop will be appended to.\nThis is useful to ensure that the backdrop is appended to the correct element in the DOM.\nIf not set, the backdrop will be appended to the parent element of the select.",
-              "fieldName": "backdropAppendTo"
-            },
+              "inheritedFrom": {
+                "name": "Input",
+                "module": "src/components/input/input.component.ts"
+              }
+            }
+          ],
+          "superclass": {
+            "name": "Input",
+            "module": "/src/components/input/input.component"
+          },
+          "tagName": "mdc-searchfield",
+          "jsDoc": "/**\n * `mdc-searchfield` component is used as an input field for search functionality.\n *\n * It supports `mdc-inputchip` as filters.\n *\n * This component is built by extending the `mdc-input` component.\n *\n * @tagname mdc-searchfield\n *\n * @event input - (React: onInput) This event is dispatched when the value of the input field changes (every press).\n * @event change - (React: onChange) This event is dispatched when the value of the input field changes (on blur).\n * @event focus - (React: onFocus) This event is dispatched when the input receives focus.\n * @event blur - (React: onBlur) This event is dispatched when the input loses focus.\n * @event clear - (React: onClear) This event is dispatched when the input text is cleared.\n *\n * @slot filters - Slot for input chips\n * @slot label - Slot for the label element. If not provided, the `label` property will be used to render the label.\n * @slot toggletip - Slot for the toggletip info icon button. If not provided, the `toggletip-text` property will be used to render the info icon button and toggletip.\n * @slot help-icon - Slot for the helper/validation icon. If not provided, the icon will be rendered based on the `helpTextType` property.\n * @slot help-text - Slot for the helper/validation text. If not provided, the `helpText` property will be used to render the helper/validation text.\n * @slot input - Slot for the input element. If not provided, the input field will be rendered.\n * @slot input-leading-icon - Slot for the leading icon before the input field. If not provided, the `leadingIcon` property will be used to render the leading icon.\n * @slot input-prefix-text - Slot for the prefix text before the input field. If not provided, the `prefixText` property will be used to render the prefix text.\n * @slot trailing-button - Slot for the trailing button to clear the input field. If not provided, the clear button will be rendered when `trailingButton` property is set to true.\n *\n * @cssproperty --mdc-label-font-size - Font size for the label text.\n * @cssproperty --mdc-label-font-weight - Font weight for the label text.\n * @cssproperty --mdc-label-line-height - Line height for the label text.\n * @cssproperty --mdc-label-color - Color for the label text.\n * @cssproperty --mdc-help-text-font-size - Font size for the help text.\n * @cssproperty --mdc-help-text-font-weight - Font weight for the help text.\n * @cssproperty --mdc-help-text-line-height - Line height for the help text.\n * @cssproperty --mdc-help-text-color - Color for the help text.\n * @cssproperty --mdc-input-text-color - Text color for the input field\n * @cssproperty --mdc-input-border-color - Border color for the input container\n * @cssproperty --mdc-input-background-color - Background color for the input field\n * @cssproperty --mdc-input-support-text-color - Text color for the help text\n * @cssproperty --mdc-input-selection-text-color - Text color for the selected text\n * @cssproperty --mdc-input-selection-background-color - Background color for the selected text\n *\n * @csspart label - The label element.\n * @csspart label-text - The container for the label and required indicator elements.\n * @csspart required-indicator - The required indicator element that is displayed next to the label when the `required` property is set to true.\n * @csspart info-icon-btn - The info icon button element that is displayed next to the label when the `toggletip-text` property is set.\n * @csspart label-toggletip - The toggletip element that is displayed when the info icon button is clicked.\n * @csspart help-text - The helper/validation text element.\n * @csspart helper-icon - The helper/validation icon element that is displayed next to the helper/validation text.\n * @csspart help-text-container - The container for the helper/validation icon and text elements.\n * @csspart leading-icon - The leading icon element that is displayed before the input field.\n * @csspart prefix-text - The prefix text element that is displayed before the input field.\n * @csspart input-container - The container for the input field, leading icon, prefix text, and trailing button elements.\n * @csspart input-section - The container for the input field, leading icon, and prefix text elements.\n * @csspart input-text - The input field element.\n * @csspart trailing-button - The trailing button element that is displayed to clear the input field when the `trailingButton` property is set to true.\n */",
+          "customElement": true,
+          "attributes": [
             {
               "name": "auto-focus-on-mount",
               "type": {
@@ -38743,429 +38864,304 @@
               }
             },
             {
-              "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": "prefix-text",
               "type": {
                 "text": "string | undefined"
               },
-              "description": "The label of the input field. It is linked to the input field using the `for` attribute.",
-              "fieldName": "label",
+              "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": "required",
+              "name": "leading-icon",
               "type": {
-                "text": "boolean"
+                "text": "IconNames | 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 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": "string | undefined"
+                "text": "number | undefined"
               },
-              "description": "The help text that is displayed below the input field.",
-              "fieldName": "helpText",
+              "description": "The maximum number of characters that the input field can accept.",
+              "fieldName": "maxlength",
               "inheritedFrom": {
-                "name": "FormfieldWrapper",
-                "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
+                "name": "Input",
+                "module": "src/components/input/input.component.ts"
               }
             },
             {
-              "name": "toggletip-text",
+              "name": "minlength",
               "type": {
-                "text": "string | undefined"
+                "text": "number | undefined"
               },
-              "description": "The toggletip text that is displayed when the label is hovered.\nIt is used to provide additional information about the label.",
-              "fieldName": "toggletipText",
+              "description": "The minimum number of characters that the input field can accept.",
+              "fieldName": "minlength",
               "inheritedFrom": {
-                "name": "FormfieldWrapper",
-                "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
+                "name": "Input",
+                "module": "src/components/input/input.component.ts"
               }
             },
             {
-              "name": "toggletip-placement",
+              "name": "autocapitalize",
               "type": {
-                "text": "PopoverPlacement"
+                "text": "AutoCapitalizeType"
               },
-              "description": "The placement of the toggletip that is displayed when the info icon is hovered.",
-              "default": "'top'",
-              "fieldName": "toggletipPlacement",
+              "description": "The autocapitalize attribute of the input field.",
+              "default": "'off'",
+              "fieldName": "autocapitalize",
               "inheritedFrom": {
-                "name": "FormfieldWrapper",
-                "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
+                "name": "Input",
+                "module": "src/components/input/input.component.ts"
               }
             },
             {
-              "name": "toggletip-strategy",
+              "name": "autocomplete",
               "type": {
-                "text": "PopoverStrategy"
+                "text": "AutoCompleteType"
               },
-              "fieldName": "toggletipStrategy",
-              "inheritedFrom": {
-                "name": "FormfieldWrapper",
-                "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
+              "description": "The autocomplete attribute of the input field.",
+              "default": "'off'",
+              "fieldName": "autocomplete",
+              "inheritedFrom": {
+                "name": "Input",
+                "module": "src/components/input/input.component.ts"
               }
             },
             {
-              "name": "info-icon-aria-label",
+              "name": "dirname",
               "type": {
                 "text": "string | undefined"
               },
-              "description": "Aria label for the info icon that is displayed next to the label when `toggletipText` is set.\nThis is used for accessibility purposes to provide a description of the icon.",
-              "fieldName": "infoIconAriaLabel",
+              "description": "Specifies the name of the directionality of text for submission purposes (e.g., \"rtl\" for right-to-left).",
+              "fieldName": "dirname",
               "inheritedFrom": {
-                "name": "FormfieldWrapper",
-                "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
+                "name": "Input",
+                "module": "src/components/input/input.component.ts"
               }
             },
             {
-              "name": "readonly",
+              "name": "pattern",
               "type": {
-                "text": "boolean"
+                "text": "string | undefined"
               },
-              "default": "false",
-              "description": "Determines whether the form field is read-only.",
-              "fieldName": "readonly",
+              "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": "FormfieldWrapper",
-                "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
+                "name": "Input",
+                "module": "src/components/input/input.component.ts"
               }
             },
             {
-              "name": "soft-disabled",
+              "name": "list",
               "type": {
-                "text": "boolean"
+                "text": "string | undefined"
               },
-              "default": "false",
-              "description": "Determines whether the form field is soft-disabled.",
-              "fieldName": "softDisabled",
+              "description": "The list attribute of the input field.\nIdentifies a list of pre-defined options to suggest to the user.",
+              "fieldName": "list",
               "inheritedFrom": {
-                "name": "FormfieldWrapper",
-                "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
+                "name": "Input",
+                "module": "src/components/input/input.component.ts"
               }
-            }
-          ],
-          "mixins": [
-            {
-              "name": "ListNavigationMixin",
-              "module": "/src/utils/mixins/ListNavigationMixin"
-            },
-            {
-              "name": "CaptureDestroyEventForChildElement",
-              "module": "/src/utils/mixins/lifecycle/CaptureDestroyEventForChildElement"
-            },
-            {
-              "name": "AutoFocusOnMountMixin",
-              "module": "/src/utils/mixins/AutoFocusOnMountMixin"
-            },
-            {
-              "name": "FormInternalsMixin",
-              "module": "/src/utils/mixins/FormInternalsMixin"
-            },
-            {
-              "name": "DataAriaLabelMixin",
-              "module": "/src/utils/mixins/DataAriaLabelMixin"
-            }
-          ],
-          "superclass": {
-            "name": "FormfieldWrapper",
-            "module": "/src/components/formfieldwrapper/formfieldwrapper.component"
-          },
-          "tagName": "mdc-select",
-          "jsDoc": "/**\n * The mdc-select component is a dropdown selection control that allows users to pick an option from a predefined list.\n * It is designed to work with `mdc-option` for individual options and `mdc-optgroup` for grouping related options.\n *\n * Every mdc-option should have a `value` attribute set to ensure proper form submission.\n *\n * To set a default option, use the `selected` attribute on the `mdc-option` element.\n * You can also set the `value` attribute on the `mdc-select` element to match the value of the desired option. The component will select the corresponding option automatically.\n *\n * **Note:** Make sure to add `mdc-selectlistbox` as a child of `mdc-select` and wrap options/optgroup in it to ensure proper accessibility functionality. Read more about it in SelectListBox documentation.\n *\n * If you need to use `mdc-tooltip` with any options, make sure to place the tooltip component outside the `mdc-select` element.\n *\n * @dependency mdc-button\n * @dependency mdc-icon\n * @dependency mdc-popover\n * @dependency mdc-text\n * @dependency mdc-toggletip\n *\n * @tagname mdc-select\n *\n * @slot default - This is a default/unnamed slot for Selectlistbox including options and/or option group.\n *\n * @event click - (React: onClick) This event is dispatched when the select is clicked.\n * @event change - (React: onChange) This event is dispatched when the select is changed.\n * @event input - (React: onInput) This event is dispatched when the select is changed.\n * @event keydown - (React: onKeyDown) This event is dispatched when a key is pressed down on the select.\n * @event focus - (React: onFocus) This event is dispatched when the select receives focus.\n *\n * @slot label - Slot for the label element. If not provided, the `label` property will be used to render the label.\n * @slot toggletip - Slot for the toggletip info icon button. If not provided, the `toggletip-text` property will be used to render the info icon button and toggletip.\n * @slot help-icon - Slot for the helper/validation icon. If not provided, the icon will be rendered based on the `helpTextType` property.\n * @slot help-text - Slot for the helper/validation text. If not provided, the `helpText` property will be used to render the helper/validation text.\n *\n * @csspart label - The label element.\n * @csspart label-text - The container for the label and required indicator elements.\n * @csspart required-indicator - The required indicator element that is displayed next to the label when the `required` property is set to true.\n * @csspart info-icon-btn - The info icon button element that is displayed next to the label when the `toggletip-text` property is set.\n * @csspart label-toggletip - The toggletip element that is displayed when the info icon button is clicked.\n * @csspart help-text - The helper/validation text element.\n * @csspart helper-icon - The helper/validation icon element that is displayed next to the helper/validation text.\n * @csspart help-text-container - The container for the helper/validation icon and text elements.\n *\n * @cssproperty --mdc-label-font-size - Font size for the label text.\n * @cssproperty --mdc-label-font-weight - Font weight for the label text.\n * @cssproperty --mdc-label-line-height - Line height for the label text.\n * @cssproperty --mdc-label-color - Color for the label text.\n * @cssproperty --mdc-help-text-font-size - Font size for the help text.\n * @cssproperty --mdc-help-text-font-weight - Font weight for the help text.\n * @cssproperty --mdc-help-text-line-height - Line height for the help text.\n * @cssproperty --mdc-help-text-color - Color for the help text.\n * @cssproperty --mdc-select-background-color - The background color of the combobox of select.\n * @cssproperty --mdc-select-text-color - The text color of the select.\n * @cssproperty --mdc-select-border-color - The border color of the select.\n * @cssproperty --mdc-select-width - The width of the select.\n * @cssproperty --mdc-select-listbox-height - The height of the listbox inside the select.\n * @cssproperty --mdc-select-listbox-width - The width of the listbox inside the select (default: `--mdc-select-width`).\n */",
-          "customElement": true
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "default",
-          "declaration": {
-            "name": "Select",
-            "module": "components/select/select.component.js"
-          }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "components/selectlistbox/selectlistbox.component.js",
-      "declarations": [
-        {
-          "kind": "class",
-          "description": "Selectlistbox component as Light DOM component to act as a simple wrapper\nfor mdc-option components to ensure accessibility and proper role assignment.\n\nOnce [ariaOwnsElements](https://developer.mozilla.org/en-US/docs/Web/API/ElementInternals/ariaOwnsElements) is supported in browsers, this component can be removed\nand mdc-option can be used directly in the select component with a listbox in a different\nshadow root and aria-owns attribute to connect them.",
-          "name": "Selectlistbox",
-          "slots": [
-            {
-              "description": "This is a default/unnamed slot, which can be used to insert mdc-option components.",
-              "name": "default"
-            }
-          ],
-          "members": [],
-          "superclass": {
-            "name": "Component",
-            "module": "/src/models"
-          },
-          "tagName": "mdc-selectlistbox",
-          "jsDoc": "/**\n * Selectlistbox component as Light DOM component to act as a simple wrapper\n * for mdc-option components to ensure accessibility and proper role assignment.\n *\n * Once [ariaOwnsElements](https://developer.mozilla.org/en-US/docs/Web/API/ElementInternals/ariaOwnsElements) is supported in browsers, this component can be removed\n * and mdc-option can be used directly in the select component with a listbox in a different\n * shadow root and aria-owns attribute to connect them.\n *\n * @tagname mdc-selectlistbox\n *\n * @slot default - This is a default/unnamed slot, which can be used to insert mdc-option components.\n */",
-          "customElement": true
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "default",
-          "declaration": {
-            "name": "Selectlistbox",
-            "module": "components/selectlistbox/selectlistbox.component.js"
-          }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "components/sidenavigation/sidenavigation.component.js",
-      "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 collapsed",
-              "name": "--mdc-sidenavigation-collapsed-width"
-            },
-            {
-              "description": "z-index of the vertical divider button",
-              "name": "--mdc-sidenavigation-vertical-divider-button-z-index"
-            }
-          ],
-          "cssParts": [
-            {
-              "description": "The main container wrapping the entire side navigation.",
-              "name": "side-navigation-container"
-            },
-            {
-              "description": "The scrollable section of the side navigation.",
-              "name": "scrollable-section"
-            },
-            {
-              "description": "The fixed section of the side navigation.",
-              "name": "fixed-section"
-            },
-            {
-              "description": "The divider between the scrollable and fixed sections.",
-              "name": "separator"
             },
             {
-              "description": "The container wrapping the brand logo and footer text.",
-              "name": "brand-logo-container"
-            },
-            {
-              "description": "The footer text label in the fixed section.",
-              "name": "footer-text"
-            },
-            {
-              "description": "The vertical divider between the scrollable and fixed sections.",
-              "name": "vertical-divider"
-            },
-            {
-              "description": "The button inside the vertical divider used to toggle expand/collapse.",
-              "name": "vertical-divider-button"
-            }
-          ],
-          "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": "variant",
+              "name": "size",
               "type": {
-                "text": "SideNavigationVariant"
+                "text": "number | undefined | undefined"
               },
-              "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
+              "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"
+              }
             },
             {
-              "kind": "field",
-              "name": "footerText",
+              "name": "clear-aria-label",
               "type": {
                 "text": "string"
               },
               "default": "''",
-              "description": "Displays footer text in the bottom section of the sidenavigation.",
-              "attribute": "footer-text",
-              "reflects": true
+              "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"
+              }
             },
             {
-              "kind": "field",
-              "name": "grabberBtnAriaLabel",
+              "name": "disabled",
               "type": {
-                "text": "string | undefined"
+                "text": "boolean | 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
+              "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"
+              }
             },
             {
-              "kind": "field",
-              "name": "parentNavTooltipText",
+              "name": "label",
               "type": {
                 "text": "string | undefined"
               },
-              "description": "Tooltip text shown on parent nav items when a child is active.",
-              "attribute": "parent-nav-tooltip-text",
-              "reflects": true
+              "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"
+              }
             },
             {
-              "kind": "field",
-              "name": "Context",
-              "privacy": "public",
-              "static": true,
-              "readonly": true
+              "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"
+              }
             },
             {
-              "kind": "method",
-              "name": "updateContext",
-              "privacy": "protected",
-              "return": {
-                "type": {
-                  "text": "void"
-                }
+              "name": "help-text-type",
+              "type": {
+                "text": "ValidationType"
               },
-              "description": "Update all observing components of this\nprovider to update the values\n\nIs called on every re-render, see Provider class"
+              "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"
+              }
             },
             {
-              "kind": "method",
-              "name": "preventScrollOnSpace",
-              "privacy": "private",
-              "return": {
-                "type": {
-                  "text": "void"
-                }
+              "name": "help-text",
+              "type": {
+                "text": "string | undefined"
               },
-              "parameters": [
-                {
-                  "name": "event",
-                  "type": {
-                    "text": "KeyboardEvent"
-                  }
-                }
-              ]
-            }
-          ],
-          "events": [
+              "description": "The help text that is displayed below the input field.",
+              "fieldName": "helpText",
+              "inheritedFrom": {
+                "name": "FormfieldWrapper",
+                "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
+              }
+            },
             {
-              "name": "toggle",
+              "name": "toggletip-text",
               "type": {
-                "text": "CustomEvent"
+                "text": "string | undefined"
               },
-              "description": "(React: onToggle) Dispatched when the grabber button is clicked to expand/collapse the sidenavigation.",
-              "reactName": "onToggle"
+              "description": "The toggletip text that is displayed when the label is hovered.\nIt is used to provide additional information about the label.",
+              "fieldName": "toggletipText",
+              "inheritedFrom": {
+                "name": "FormfieldWrapper",
+                "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
+              }
             },
             {
-              "description": "(React: onActiveChange) Dispatched when the active state of a nested navmenuitem changes.",
-              "name": "activechange",
-              "reactName": "onActiveChange"
-            }
-          ],
-          "attributes": [
-            {
-              "name": "variant",
+              "name": "toggletip-placement",
               "type": {
-                "text": "SideNavigationVariant"
+                "text": "PopoverPlacement"
               },
-              "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"
+              "description": "The placement of the toggletip that is displayed when the info icon is hovered.",
+              "default": "'top'",
+              "fieldName": "toggletipPlacement",
+              "inheritedFrom": {
+                "name": "FormfieldWrapper",
+                "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
+              }
             },
             {
-              "name": "footer-text",
+              "name": "toggletip-strategy",
               "type": {
-                "text": "string"
+                "text": "PopoverStrategy"
               },
-              "default": "''",
-              "description": "Displays footer text in the bottom section of the sidenavigation.",
-              "fieldName": "footerText"
+              "fieldName": "toggletipStrategy",
+              "inheritedFrom": {
+                "name": "FormfieldWrapper",
+                "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
+              }
             },
             {
-              "name": "grabber-btn-aria-label",
+              "name": "info-icon-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"
+              "description": "Aria label for the info icon that is displayed next to the label when `toggletipText` is set.\nThis is used for accessibility purposes to provide a description of the icon.",
+              "fieldName": "infoIconAriaLabel",
+              "inheritedFrom": {
+                "name": "FormfieldWrapper",
+                "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
+              }
             },
             {
-              "name": "parent-nav-tooltip-text",
+              "name": "readonly",
               "type": {
-                "text": "string | undefined"
+                "text": "boolean"
               },
-              "description": "Tooltip text shown on parent nav items when a child is active.",
-              "fieldName": "parentNavTooltipText"
+              "default": "false",
+              "description": "Determines whether the form field is read-only.",
+              "fieldName": "readonly",
+              "inheritedFrom": {
+                "name": "FormfieldWrapper",
+                "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
+              }
+            },
+            {
+              "name": "soft-disabled",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Determines whether the form field is soft-disabled.",
+              "fieldName": "softDisabled",
+              "inheritedFrom": {
+                "name": "FormfieldWrapper",
+                "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
+              }
             }
-          ],
-          "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 * @csspart side-navigation-container - The main container wrapping the entire side navigation.\n * @csspart scrollable-section - The scrollable section of the side navigation.\n * @csspart fixed-section - The fixed section of the side navigation.\n * @csspart separator - The divider between the scrollable and fixed sections.\n * @csspart brand-logo-container - The container wrapping the brand logo and footer text.\n * @csspart footer-text - The footer text label in the fixed section.\n * @csspart vertical-divider - The vertical divider between the scrollable and fixed sections.\n * @csspart vertical-divider-button - The button inside the vertical divider used to toggle expand/collapse.\n *\n * @event toggle - (React: onToggle) Dispatched when the grabber button is clicked to expand/collapse the sidenavigation.\n * @event activechange - (React: onActiveChange) Dispatched when the active state of a nested navmenuitem changes.\n *\n * @cssproperty --mdc-sidenavigation-expanded-width - width of the sideNavigation when expanded\n * @cssproperty --mdc-sidenavigation-collapsed-width - width of the sideNavigation when collapsed\n * @cssproperty --mdc-sidenavigation-vertical-divider-button-z-index - z-index of the vertical divider button\n */",
-          "customElement": true
+          ]
         }
       ],
       "exports": [
@@ -39173,20 +39169,20 @@
           "kind": "js",
           "name": "default",
           "declaration": {
-            "name": "SideNavigation",
-            "module": "components/sidenavigation/sidenavigation.component.js"
+            "name": "Searchfield",
+            "module": "components/searchfield/searchfield.component.js"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "components/searchfield/searchfield.component.js",
+      "path": "components/select/select.component.js",
       "declarations": [
         {
           "kind": "class",
-          "description": "`mdc-searchfield` component is used as an input field for search functionality.\n\nIt supports `mdc-inputchip` as filters.\n\nThis component is built by extending the `mdc-input` component.",
-          "name": "Searchfield",
+          "description": "The mdc-select component is a dropdown selection control that allows users to pick an option from a predefined list.\nIt is designed to work with `mdc-option` for individual options and `mdc-optgroup` for grouping related options.\n\nEvery mdc-option should have a `value` attribute set to ensure proper form submission.\n\nTo set a default option, use the `selected` attribute on the `mdc-option` element.\nYou can also set the `value` attribute on the `mdc-select` element to match the value of the desired option. The component will select the corresponding option automatically.\n\n**Note:** Make sure to add `mdc-selectlistbox` as a child of `mdc-select` and wrap options/optgroup in it to ensure proper accessibility functionality. Read more about it in SelectListBox documentation.\n\nIf you need to use `mdc-tooltip` with any options, make sure to place the tooltip component outside the `mdc-select` element.",
+          "name": "Select",
           "cssProperties": [
             {
               "description": "Font size for the label text.",
@@ -39253,52 +39249,28 @@
               }
             },
             {
-              "description": "Text color for the input field",
-              "name": "--mdc-input-text-color",
-              "inheritedFrom": {
-                "name": "Input",
-                "module": "src/components/input/input.component.ts"
-              }
+              "description": "The background color of the combobox of select.",
+              "name": "--mdc-select-background-color"
             },
             {
-              "description": "Border color for the input container",
-              "name": "--mdc-input-border-color",
-              "inheritedFrom": {
-                "name": "Input",
-                "module": "src/components/input/input.component.ts"
-              }
+              "description": "The text color of the select.",
+              "name": "--mdc-select-text-color"
             },
             {
-              "description": "Background color for the input field",
-              "name": "--mdc-input-background-color",
-              "inheritedFrom": {
-                "name": "Input",
-                "module": "src/components/input/input.component.ts"
-              }
+              "description": "The border color of the select.",
+              "name": "--mdc-select-border-color"
             },
             {
-              "description": "Text color for the help text",
-              "name": "--mdc-input-support-text-color",
-              "inheritedFrom": {
-                "name": "Input",
-                "module": "src/components/input/input.component.ts"
-              }
+              "description": "The width of the select.",
+              "name": "--mdc-select-width"
             },
             {
-              "description": "Text color for the selected text",
-              "name": "--mdc-input-selection-text-color",
-              "inheritedFrom": {
-                "name": "Input",
-                "module": "src/components/input/input.component.ts"
-              }
+              "description": "The height of the listbox inside the select.",
+              "name": "--mdc-select-listbox-height"
             },
             {
-              "description": "Background color for the selected text",
-              "name": "--mdc-input-selection-background-color",
-              "inheritedFrom": {
-                "name": "Input",
-                "module": "src/components/input/input.component.ts"
-              }
+              "description": "The width of the listbox inside the select (default: `--mdc-select-width`).",
+              "name": "--mdc-select-listbox-width"
             }
           ],
           "cssParts": [
@@ -39365,60 +39337,12 @@
                 "name": "FormfieldWrapper",
                 "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
               }
-            },
-            {
-              "description": "The leading icon element that is displayed before the input field.",
-              "name": "leading-icon",
-              "inheritedFrom": {
-                "name": "Input",
-                "module": "src/components/input/input.component.ts"
-              }
-            },
-            {
-              "description": "The prefix text element that is displayed before the input field.",
-              "name": "prefix-text",
-              "inheritedFrom": {
-                "name": "Input",
-                "module": "src/components/input/input.component.ts"
-              }
-            },
-            {
-              "description": "The container for the input field, leading icon, prefix text, and trailing button elements.",
-              "name": "input-container",
-              "inheritedFrom": {
-                "name": "Input",
-                "module": "src/components/input/input.component.ts"
-              }
-            },
-            {
-              "description": "The container for the input field, leading icon, and prefix text elements.",
-              "name": "input-section",
-              "inheritedFrom": {
-                "name": "Input",
-                "module": "src/components/input/input.component.ts"
-              }
-            },
-            {
-              "description": "The input field element.",
-              "name": "input-text",
-              "inheritedFrom": {
-                "name": "Input",
-                "module": "src/components/input/input.component.ts"
-              }
-            },
-            {
-              "description": "The trailing button element that is displayed to clear the input field when the `trailingButton` property is set to true.",
-              "name": "trailing-button",
-              "inheritedFrom": {
-                "name": "Input",
-                "module": "src/components/input/input.component.ts"
-              }
             }
           ],
           "slots": [
             {
-              "description": "Slot for input chips",
-              "name": "filters"
+              "description": "This is a default/unnamed slot for Selectlistbox including options and/or option group.",
+              "name": "default"
             },
             {
               "description": "Slot for the label element. If not provided, the `label` property will be used to render the label.",
@@ -39451,81 +39375,337 @@
                 "name": "FormfieldWrapper",
                 "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
               }
+            }
+          ],
+          "members": [
+            {
+              "kind": "field",
+              "name": "placeholder",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "The placeholder text which will be shown on the text if provided.",
+              "attribute": "placeholder"
             },
             {
-              "description": "Slot for the input element. If not provided, the input field will be rendered.",
-              "name": "input",
-              "inheritedFrom": {
-                "name": "Input",
-                "module": "src/components/input/input.component.ts"
-              }
-            },
-            {
-              "description": "Slot for the leading icon before the input field. If not provided, the `leadingIcon` property will be used to render the leading icon.",
-              "name": "input-leading-icon",
-              "inheritedFrom": {
-                "name": "Input",
-                "module": "src/components/input/input.component.ts"
-              }
+              "kind": "field",
+              "name": "placement",
+              "type": {
+                "text": "Placement"
+              },
+              "description": "The placement of the popover within Select component.\nThis defines the position of the popover relative to the select input field.\n\nPossible values:\n - 'top-start'\n - 'bottom-start'",
+              "default": "'bottom-start'",
+              "attribute": "placement",
+              "reflects": true
             },
             {
-              "description": "Slot for the prefix text before the input field. If not provided, the `prefixText` property will be used to render the prefix text.",
-              "name": "input-prefix-text",
-              "inheritedFrom": {
-                "name": "Input",
-                "module": "src/components/input/input.component.ts"
-              }
+              "kind": "field",
+              "name": "boundary",
+              "type": {
+                "text": "'clippingAncestors' | string"
+              },
+              "description": "This describes the clipping element(s) or area that overflow of the used popover will be checked relative to.\nThe default is 'clippingAncestors', which are the overflow ancestors which will cause the\nelement to be clipped.\n\nPossible values:\n - 'clippingAncestors'\n - any css selector",
+              "default": "'clippingAncestors'",
+              "attribute": "boundary",
+              "reflects": true
             },
             {
-              "description": "Slot for the trailing button to clear the input field. If not provided, the clear button will be rendered when `trailingButton` property is set to true.",
-              "name": "trailing-button",
-              "inheritedFrom": {
-                "name": "Input",
-                "module": "src/components/input/input.component.ts"
-              }
-            }
-          ],
-          "members": [
+              "kind": "field",
+              "name": "strategy",
+              "type": {
+                "text": "PopoverStrategy"
+              },
+              "description": "The strategy of the popover within Select.\nThis determines how the popover is positioned in the DOM.\n\nIn case `boundary` is set to something other than 'clippingAncestors',\nit might be necessary to set the `strategy` to 'fixed' to ensure that the popover\nis not getting clipped by scrollable containers enclosing the select.",
+              "default": "absolute",
+              "attribute": "strategy",
+              "reflects": true
+            },
             {
               "kind": "field",
-              "name": "inputChips",
+              "name": "popoverZIndex",
               "type": {
-                "text": "Array<HTMLElement> | undefined"
-              }
+                "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": "handleKeyDown",
-              "privacy": "protected",
+              "name": "handleOptionsClick",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "event",
+                  "type": {
+                    "text": "MouseEvent"
+                  },
+                  "description": "The event which triggered this function."
+                }
+              ],
+              "description": "A private method which is called when an option is clicked.\nIt sets the selected option, removes selected from other options, updates the tabindex for all options,\ncloses the popover, and fires the change and input events."
+            },
+            {
+              "kind": "method",
+              "name": "setSelectedOption",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "option",
+                  "type": {
+                    "text": "Option | null"
+                  },
+                  "description": "The option element in DOM which gets selected."
+                }
+              ],
+              "description": "Sets the selected option in the component state and updates the input element's value.\nThis method ensures that only the selected option is marked as selected in the DOM,\nand updates the tabindex for all options accordingly.\nIt also updates the validity of the input element based on the selected option.\nThis method is called when an option is selected."
+            },
+            {
+              "kind": "method",
+              "name": "updateSelectedInChildOptions",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "selectedOption",
+                  "type": {
+                    "text": "Option | null"
+                  },
+                  "description": "The option which gets selected"
+                }
+              ],
+              "description": "Sets selected attribute on the selected option and removes it from all options"
+            },
+            {
+              "kind": "method",
+              "name": "fireEvents",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "description": "A private method which is called to fire the change and input events.\nIt dispatches the input and change events with the selected option's value and label."
+            },
+            {
+              "kind": "method",
+              "name": "dispatchChange",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "option",
+                  "type": {
+                    "text": "Option"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "dispatchInput",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "option",
+                  "type": {
+                    "text": "Option"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "handleClickCombobox",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "event",
+                  "type": {
+                    "text": "MouseEvent"
+                  },
+                  "description": "The mouse event which triggered this function."
+                }
+              ],
+              "description": "Handles the click event on the visual combobox.\nIf the select is disabled, soft-disabled or readonly, it does nothing.\nIf the popover is already open, it closes it.\nIf it is closed, it opens it."
+            },
+            {
+              "kind": "method",
+              "name": "handleKeydownCombobox",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
               "parameters": [
                 {
                   "name": "event",
                   "type": {
                     "text": "KeyboardEvent"
                   },
-                  "description": "Keyboard event"
+                  "description": "The keyboard event."
                 }
               ],
-              "description": "Handles the keydown event of the search field.\nIf the key pressed is 'Enter', it submits the form.\nIf the key pressed is 'Escape', it clears the input text.",
+              "description": "Handles the keydown event on the select element when the popover is closed.\nThe options are as follows:\n- ARROW_DOWN, ARROW_UP, SPACE: Opens the popover and prevents the default scrolling behavior.\n- ENTER: Opens the popover, prevents default scrolling, and submits the form if the popover is closed.\n- HOME: Opens the popover and sets focus and tabindex on the first option.\n- END: Opens the popover and sets focus and tabindex on the last option."
+            },
+            {
+              "kind": "method",
+              "name": "getCurrentIndex",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": ""
+                }
+              },
+              "parameters": [
+                {
+                  "name": "target",
+                  "type": {
+                    "text": "HTMLElement | null"
+                  },
+                  "description": "The target element that triggered the event."
+                }
+              ],
+              "description": "Retrieves the current index of the item that triggered the event.",
               "inheritedFrom": {
-                "name": "Input",
-                "module": "components/input/input.component.js"
+                "name": "ListNavigationMixin",
+                "module": "utils/mixins/ListNavigationMixin.js"
               }
             },
             {
               "kind": "method",
-              "name": "renderInputChips",
-              "privacy": "private",
-              "description": "This method is used to render the input chips inside filters slot.\nIt will remove any elements that are not input chips."
+              "name": "resetTabIndexes",
+              "privacy": "protected",
+              "parameters": [
+                {
+                  "name": "index",
+                  "type": {
+                    "text": "number"
+                  },
+                  "description": "The index of the currently focused item."
+                }
+              ],
+              "description": "Reset all tabindex to -1 and set the tabindex of the current item to 0",
+              "inheritedFrom": {
+                "name": "ListNavigationMixin",
+                "module": "utils/mixins/ListNavigationMixin.js"
+              }
             },
             {
               "kind": "method",
-              "name": "clearInputText",
+              "name": "resetTabIndexAndSetFocus",
               "privacy": "protected",
-              "description": "Clears the input field.",
+              "parameters": [
+                {
+                  "name": "newIndex",
+                  "type": {
+                    "text": "number"
+                  },
+                  "description": "The index of the new item to focus."
+                },
+                {
+                  "name": "oldIndex",
+                  "optional": true,
+                  "type": {
+                    "text": "number"
+                  },
+                  "description": "The index of the currently focused item."
+                },
+                {
+                  "name": "focusNewItem",
+                  "default": "true",
+                  "description": "Call focus() on the new item or not. It should be false during firstUpdate"
+                }
+              ],
+              "description": "Resets the tabindex of the currently focused item and sets focus to a new item.",
+              "return": {
+                "type": {
+                  "text": ""
+                }
+              },
               "inheritedFrom": {
-                "name": "Input",
-                "module": "components/input/input.component.js"
+                "name": "ListNavigationMixin",
+                "module": "utils/mixins/ListNavigationMixin.js"
+              }
+            },
+            {
+              "kind": "method",
+              "name": "resolveDirectionKey",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "key",
+                  "type": {
+                    "text": "string"
+                  },
+                  "description": "The key pressed by the user."
+                },
+                {
+                  "name": "isRtl",
+                  "type": {
+                    "text": "boolean"
+                  },
+                  "description": "A boolean indicating if the layout is right-to-left (RTL)."
+                }
+              ],
+              "description": "Resolves the key pressed by the user based on the direction of the layout.\nThis method is used to handle keyboard navigation in a right-to-left (RTL) layout.\nIt checks if the layout is RTL and adjusts the arrow keys accordingly.\nFor example, in RTL, the left arrow key behaves like the right arrow key and vice versa.",
+              "return": {
+                "type": {
+                  "text": ""
+                }
+              },
+              "inheritedFrom": {
+                "name": "ListNavigationMixin",
+                "module": "utils/mixins/ListNavigationMixin.js"
+              }
+            },
+            {
+              "kind": "method",
+              "name": "shouldLoop",
+              "privacy": "private",
+              "inheritedFrom": {
+                "name": "ListNavigationMixin",
+                "module": "utils/mixins/ListNavigationMixin.js"
               }
             },
             {
@@ -39660,605 +39840,324 @@
             },
             {
               "kind": "field",
-              "name": "placeholder",
+              "name": "disabled",
               "type": {
-                "text": "string"
+                "text": "boolean | undefined"
               },
-              "default": "''",
-              "description": "The placeholder text that is displayed when the input field is empty.",
-              "attribute": "placeholder",
+              "description": "Indicates whether the component is disabled.\nWhen the component is disabled for user interaction; it is not focusable or clickable.",
+              "default": "undefined",
+              "attribute": "disabled",
+              "reflects": true,
               "inheritedFrom": {
-                "name": "Input",
-                "module": "components/input/input.component.js"
+                "name": "FormfieldWrapper",
+                "module": "components/formfieldwrapper/formfieldwrapper.component.js"
               }
             },
             {
               "kind": "field",
-              "name": "prefixText",
+              "name": "label",
               "type": {
                 "text": "string | undefined"
               },
-              "description": "The prefix text that is displayed before the input field. It has a max length of 10 characters.\nWhen the prefix text is set, make sure to set the 'data-aria-label'\nattribute with the appropriate value for accessibility.",
-              "attribute": "prefix-text",
+              "description": "The label of the input field. It is linked to the input field using the `for` attribute.",
+              "attribute": "label",
+              "reflects": true,
               "inheritedFrom": {
-                "name": "Input",
-                "module": "components/input/input.component.js"
+                "name": "FormfieldWrapper",
+                "module": "components/formfieldwrapper/formfieldwrapper.component.js"
               }
             },
             {
               "kind": "field",
-              "name": "leadingIcon",
+              "name": "required",
               "type": {
-                "text": "IconNames | undefined"
+                "text": "boolean"
               },
-              "description": "The leading icon that is displayed before the input field.",
-              "attribute": "leading-icon",
+              "default": "false",
+              "description": "The required attribute to indicate that the input field is required.\nIt is used to append a required indicator (*) to the label.",
+              "attribute": "required",
+              "reflects": true,
               "inheritedFrom": {
-                "name": "Input",
-                "module": "components/input/input.component.js"
+                "name": "FormfieldWrapper",
+                "module": "components/formfieldwrapper/formfieldwrapper.component.js"
               }
             },
             {
               "kind": "field",
-              "name": "trailingButton",
+              "name": "helpTextType",
               "type": {
-                "text": "boolean"
+                "text": "ValidationType"
               },
-              "default": "false",
-              "description": "The trailing button when set to true, shows a clear button that clears the input field.",
-              "attribute": "trailing-button",
+              "description": "The type of help text. It can be 'default', 'error', 'warning', 'success', 'priority'.",
+              "attribute": "help-text-type",
+              "reflects": true,
               "inheritedFrom": {
-                "name": "Input",
-                "module": "components/input/input.component.js"
+                "name": "FormfieldWrapper",
+                "module": "components/formfieldwrapper/formfieldwrapper.component.js"
               }
             },
             {
               "kind": "field",
-              "name": "maxlength",
+              "name": "helpText",
               "type": {
-                "text": "number | undefined"
+                "text": "string | undefined"
               },
-              "description": "The maximum number of characters that the input field can accept.",
-              "attribute": "maxlength",
+              "description": "The help text that is displayed below the input field.",
+              "attribute": "help-text",
+              "reflects": true,
               "inheritedFrom": {
-                "name": "Input",
-                "module": "components/input/input.component.js"
+                "name": "FormfieldWrapper",
+                "module": "components/formfieldwrapper/formfieldwrapper.component.js"
               }
             },
             {
               "kind": "field",
-              "name": "minlength",
+              "name": "toggletipText",
               "type": {
-                "text": "number | undefined"
+                "text": "string | undefined"
               },
-              "description": "The minimum number of characters that the input field can accept.",
-              "attribute": "minlength",
+              "description": "The toggletip text that is displayed when the label is hovered.\nIt is used to provide additional information about the label.",
+              "attribute": "toggletip-text",
+              "reflects": true,
               "inheritedFrom": {
-                "name": "Input",
-                "module": "components/input/input.component.js"
+                "name": "FormfieldWrapper",
+                "module": "components/formfieldwrapper/formfieldwrapper.component.js"
               }
             },
             {
               "kind": "field",
-              "name": "autocapitalize",
+              "name": "toggletipPlacement",
               "type": {
-                "text": "AutoCapitalizeType"
+                "text": "PopoverPlacement"
               },
-              "description": "The autocapitalize attribute of the input field.",
-              "default": "'off'",
-              "attribute": "autocapitalize",
+              "description": "The placement of the toggletip that is displayed when the info icon is hovered.",
+              "default": "'top'",
+              "attribute": "toggletip-placement",
+              "reflects": true,
               "inheritedFrom": {
-                "name": "Input",
-                "module": "components/input/input.component.js"
+                "name": "FormfieldWrapper",
+                "module": "components/formfieldwrapper/formfieldwrapper.component.js"
               }
             },
             {
               "kind": "field",
-              "name": "autocomplete",
+              "name": "toggletipStrategy",
               "type": {
-                "text": "AutoCompleteType"
+                "text": "PopoverStrategy"
               },
-              "description": "The autocomplete attribute of the input field.",
-              "default": "'off'",
-              "attribute": "autocomplete",
+              "attribute": "toggletip-strategy",
+              "reflects": true,
               "inheritedFrom": {
-                "name": "Input",
-                "module": "components/input/input.component.js"
+                "name": "FormfieldWrapper",
+                "module": "components/formfieldwrapper/formfieldwrapper.component.js"
               }
             },
             {
               "kind": "field",
-              "name": "dirname",
+              "name": "infoIconAriaLabel",
               "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",
+              "description": "Aria label for the info icon that is displayed next to the label when `toggletipText` is set.\nThis is used for accessibility purposes to provide a description of the icon.",
+              "attribute": "info-icon-aria-label",
+              "reflects": true,
               "inheritedFrom": {
-                "name": "Input",
-                "module": "components/input/input.component.js"
+                "name": "FormfieldWrapper",
+                "module": "components/formfieldwrapper/formfieldwrapper.component.js"
               }
             },
             {
               "kind": "field",
-              "name": "pattern",
+              "name": "readonly",
               "type": {
-                "text": "string | undefined"
+                "text": "boolean"
               },
-              "description": "The pattern attribute of the input field.\nSpecifies a regular expression that the input value must match for validation purposes.",
-              "attribute": "pattern",
+              "default": "false",
+              "description": "Determines whether the form field is read-only.",
+              "attribute": "readonly",
+              "reflects": true,
               "inheritedFrom": {
-                "name": "Input",
-                "module": "components/input/input.component.js"
+                "name": "FormfieldWrapper",
+                "module": "components/formfieldwrapper/formfieldwrapper.component.js"
               }
             },
             {
               "kind": "field",
-              "name": "list",
+              "name": "softDisabled",
               "type": {
-                "text": "string | undefined"
+                "text": "boolean"
               },
-              "description": "The list attribute of the input field.\nIdentifies a list of pre-defined options to suggest to the user.",
-              "attribute": "list",
+              "default": "false",
+              "description": "Determines whether the form field is soft-disabled.",
+              "attribute": "soft-disabled",
+              "reflects": true,
               "inheritedFrom": {
-                "name": "Input",
-                "module": "components/input/input.component.js"
+                "name": "FormfieldWrapper",
+                "module": "components/formfieldwrapper/formfieldwrapper.component.js"
               }
             },
             {
-              "kind": "field",
-              "name": "size",
-              "type": {
-                "text": "number | undefined | undefined"
+              "kind": "method",
+              "name": "renderLabelElement",
+              "privacy": "protected",
+              "description": "creates the label element when the label property is set.\nid is used to link the label with the input field.",
+              "return": {
+                "type": {
+                  "text": ""
+                }
               },
-              "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"
+                "name": "FormfieldWrapper",
+                "module": "components/formfieldwrapper/formfieldwrapper.component.js"
               }
             },
             {
               "kind": "method",
-              "name": "updateValue",
-              "privacy": "private",
-              "description": "Updates the value of the input field.\nSets the form value.",
+              "name": "renderHelpTextIcon",
+              "privacy": "protected",
+              "description": "creates the helpertext icon based on the helpTextType for validation.\nIf the helpTextType is not set, it defaults to 'default' and it doesn't display any icon.",
               "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"
+                "name": "FormfieldWrapper",
+                "module": "components/formfieldwrapper/formfieldwrapper.component.js"
               }
             },
             {
               "kind": "method",
-              "name": "renderLeadingIcon",
+              "name": "renderHelpText",
               "privacy": "protected",
-              "description": "Renders the leading icon before the input field.\nIf the leading icon is not set, it will not be displayed.",
+              "description": "creates the helper text component when the helpertext value is set.\nIt is also used to display the validation message based on the helpTextType.",
               "return": {
                 "type": {
                   "text": ""
                 }
               },
               "inheritedFrom": {
-                "name": "Input",
-                "module": "components/input/input.component.js"
+                "name": "FormfieldWrapper",
+                "module": "components/formfieldwrapper/formfieldwrapper.component.js"
               }
             },
             {
               "kind": "method",
-              "name": "renderPrefixText",
+              "name": "renderLabel",
               "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.",
+              "description": "renders the label container that contains the label and labelInfoToggleTip.",
               "return": {
                 "type": {
                   "text": ""
                 }
               },
               "inheritedFrom": {
-                "name": "Input",
-                "module": "components/input/input.component.js"
+                "name": "FormfieldWrapper",
+                "module": "components/formfieldwrapper/formfieldwrapper.component.js"
               }
             },
             {
               "kind": "method",
-              "name": "renderTrailingButton",
+              "name": "renderHelperText",
               "privacy": "protected",
-              "parameters": [
-                {
-                  "name": "show",
-                  "default": "false"
-                }
-              ],
-              "description": "Renders the trailing button to clear the input field if the trailingButton is set to true.",
+              "description": "renders the help-text container that contains the helpertext icon and helpertext.",
               "return": {
                 "type": {
                   "text": ""
                 }
               },
-              "inheritedFrom": {
-                "name": "Input",
-                "module": "components/input/input.component.js"
-              }
-            },
-            {
-              "kind": "method",
-              "name": "renderInputElement",
-              "privacy": "protected",
-              "parameters": [
-                {
-                  "name": "type",
-                  "type": {
-                    "text": "InputType"
-                  }
-                },
-                {
-                  "name": "hidePlaceholder",
-                  "default": "false"
-                }
-              ],
-              "inheritedFrom": {
-                "name": "Input",
-                "module": "components/input/input.component.js"
-              }
-            },
-            {
-              "kind": "field",
-              "name": "disabled",
-              "type": {
-                "text": "boolean | undefined"
-              },
-              "description": "Indicates whether the component is disabled.\nWhen the component is disabled for user interaction; it is not focusable or clickable.",
-              "default": "undefined",
-              "attribute": "disabled",
-              "reflects": true,
               "inheritedFrom": {
                 "name": "FormfieldWrapper",
                 "module": "components/formfieldwrapper/formfieldwrapper.component.js"
               }
-            },
+            }
+          ],
+          "events": [
             {
-              "kind": "field",
-              "name": "label",
+              "name": "change",
               "type": {
-                "text": "string | undefined"
+                "text": "CustomEvent"
               },
-              "description": "The label of the input field. It is linked to the input field using the `for` attribute.",
-              "attribute": "label",
-              "reflects": true,
-              "inheritedFrom": {
-                "name": "FormfieldWrapper",
-                "module": "components/formfieldwrapper/formfieldwrapper.component.js"
-              }
+              "description": "(React: onChange) This event is dispatched when the select is changed.",
+              "reactName": "onChange"
             },
             {
-              "kind": "field",
-              "name": "required",
+              "name": "input",
               "type": {
-                "text": "boolean"
+                "text": "CustomEvent"
               },
-              "default": "false",
-              "description": "The required attribute to indicate that the input field is required.\nIt is used to append a required indicator (*) to the label.",
-              "attribute": "required",
-              "reflects": true,
-              "inheritedFrom": {
-                "name": "FormfieldWrapper",
-                "module": "components/formfieldwrapper/formfieldwrapper.component.js"
-              }
+              "description": "(React: onInput) This event is dispatched when the select is changed.",
+              "reactName": "onInput"
             },
             {
-              "kind": "field",
-              "name": "helpTextType",
-              "type": {
-                "text": "ValidationType"
-              },
-              "description": "The type of help text. It can be 'default', 'error', 'warning', 'success', 'priority'.",
-              "attribute": "help-text-type",
-              "reflects": true,
-              "inheritedFrom": {
-                "name": "FormfieldWrapper",
-                "module": "components/formfieldwrapper/formfieldwrapper.component.js"
-              }
+              "description": "(React: onClick) This event is dispatched when the select is clicked.",
+              "name": "click",
+              "reactName": "onClick"
             },
             {
-              "kind": "field",
-              "name": "helpText",
-              "type": {
-                "text": "string | undefined"
-              },
-              "description": "The help text that is displayed below the input field.",
-              "attribute": "help-text",
-              "reflects": true,
-              "inheritedFrom": {
-                "name": "FormfieldWrapper",
-                "module": "components/formfieldwrapper/formfieldwrapper.component.js"
-              }
+              "description": "(React: onKeyDown) This event is dispatched when a key is pressed down on the select.",
+              "name": "keydown",
+              "reactName": "onKeyDown"
             },
             {
-              "kind": "field",
-              "name": "toggletipText",
-              "type": {
-                "text": "string | undefined"
-              },
-              "description": "The toggletip text that is displayed when the label is hovered.\nIt is used to provide additional information about the label.",
-              "attribute": "toggletip-text",
-              "reflects": true,
-              "inheritedFrom": {
-                "name": "FormfieldWrapper",
-                "module": "components/formfieldwrapper/formfieldwrapper.component.js"
-              }
-            },
+              "description": "(React: onFocus) This event is dispatched when the select receives focus.",
+              "name": "focus",
+              "reactName": "onFocus"
+            }
+          ],
+          "attributes": [
             {
-              "kind": "field",
-              "name": "toggletipPlacement",
+              "name": "placeholder",
               "type": {
-                "text": "PopoverPlacement"
+                "text": "string | undefined"
               },
-              "description": "The placement of the toggletip that is displayed when the info icon is hovered.",
-              "default": "'top'",
-              "attribute": "toggletip-placement",
-              "reflects": true,
-              "inheritedFrom": {
-                "name": "FormfieldWrapper",
-                "module": "components/formfieldwrapper/formfieldwrapper.component.js"
-              }
+              "description": "The placeholder text which will be shown on the text if provided.",
+              "fieldName": "placeholder"
             },
             {
-              "kind": "field",
-              "name": "toggletipStrategy",
+              "name": "placement",
               "type": {
-                "text": "PopoverStrategy"
+                "text": "Placement"
               },
-              "attribute": "toggletip-strategy",
-              "reflects": true,
-              "inheritedFrom": {
-                "name": "FormfieldWrapper",
-                "module": "components/formfieldwrapper/formfieldwrapper.component.js"
-              }
+              "description": "The placement of the popover within Select component.\nThis defines the position of the popover relative to the select input field.\n\nPossible values:\n - 'top-start'\n - 'bottom-start'",
+              "default": "'bottom-start'",
+              "fieldName": "placement"
             },
             {
-              "kind": "field",
-              "name": "infoIconAriaLabel",
+              "name": "boundary",
               "type": {
-                "text": "string | undefined"
+                "text": "'clippingAncestors' | string"
               },
-              "description": "Aria label for the info icon that is displayed next to the label when `toggletipText` is set.\nThis is used for accessibility purposes to provide a description of the icon.",
-              "attribute": "info-icon-aria-label",
-              "reflects": true,
-              "inheritedFrom": {
-                "name": "FormfieldWrapper",
-                "module": "components/formfieldwrapper/formfieldwrapper.component.js"
-              }
+              "description": "This describes the clipping element(s) or area that overflow of the used popover will be checked relative to.\nThe default is 'clippingAncestors', which are the overflow ancestors which will cause the\nelement to be clipped.\n\nPossible values:\n - 'clippingAncestors'\n - any css selector",
+              "default": "'clippingAncestors'",
+              "fieldName": "boundary"
             },
             {
-              "kind": "field",
-              "name": "readonly",
+              "name": "strategy",
               "type": {
-                "text": "boolean"
+                "text": "PopoverStrategy"
               },
-              "default": "false",
-              "description": "Determines whether the form field is read-only.",
-              "attribute": "readonly",
-              "reflects": true,
-              "inheritedFrom": {
-                "name": "FormfieldWrapper",
-                "module": "components/formfieldwrapper/formfieldwrapper.component.js"
-              }
+              "description": "The strategy of the popover within Select.\nThis determines how the popover is positioned in the DOM.\n\nIn case `boundary` is set to something other than 'clippingAncestors',\nit might be necessary to set the `strategy` to 'fixed' to ensure that the popover\nis not getting clipped by scrollable containers enclosing the select.",
+              "default": "absolute",
+              "fieldName": "strategy"
             },
             {
-              "kind": "field",
-              "name": "softDisabled",
+              "name": "popover-z-index",
               "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "Determines whether the form field is soft-disabled.",
-              "attribute": "soft-disabled",
-              "reflects": true,
-              "inheritedFrom": {
-                "name": "FormfieldWrapper",
-                "module": "components/formfieldwrapper/formfieldwrapper.component.js"
-              }
-            },
-            {
-              "kind": "method",
-              "name": "renderLabelElement",
-              "privacy": "protected",
-              "description": "creates the label element when the label property is set.\nid is used to link the label with the input field.",
-              "return": {
-                "type": {
-                  "text": ""
-                }
-              },
-              "inheritedFrom": {
-                "name": "FormfieldWrapper",
-                "module": "components/formfieldwrapper/formfieldwrapper.component.js"
-              }
-            },
-            {
-              "kind": "method",
-              "name": "renderHelpTextIcon",
-              "privacy": "protected",
-              "description": "creates the helpertext icon based on the helpTextType for validation.\nIf the helpTextType is not set, it defaults to 'default' and it doesn't display any icon.",
-              "return": {
-                "type": {
-                  "text": ""
-                }
-              },
-              "inheritedFrom": {
-                "name": "FormfieldWrapper",
-                "module": "components/formfieldwrapper/formfieldwrapper.component.js"
-              }
-            },
-            {
-              "kind": "method",
-              "name": "renderHelpText",
-              "privacy": "protected",
-              "description": "creates the helper text component when the helpertext value is set.\nIt is also used to display the validation message based on the helpTextType.",
-              "return": {
-                "type": {
-                  "text": ""
-                }
-              },
-              "inheritedFrom": {
-                "name": "FormfieldWrapper",
-                "module": "components/formfieldwrapper/formfieldwrapper.component.js"
-              }
-            },
-            {
-              "kind": "method",
-              "name": "renderLabel",
-              "privacy": "protected",
-              "description": "renders the label container that contains the label and labelInfoToggleTip.",
-              "return": {
-                "type": {
-                  "text": ""
-                }
-              },
-              "inheritedFrom": {
-                "name": "FormfieldWrapper",
-                "module": "components/formfieldwrapper/formfieldwrapper.component.js"
-              }
-            },
-            {
-              "kind": "method",
-              "name": "renderHelperText",
-              "privacy": "protected",
-              "description": "renders the help-text container that contains the helpertext icon and helpertext.",
-              "return": {
-                "type": {
-                  "text": ""
-                }
+                "text": "number"
               },
-              "inheritedFrom": {
-                "name": "FormfieldWrapper",
-                "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"
-              }
+              "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": "clear",
+              "name": "backdrop-append-to",
               "type": {
-                "text": "CustomEvent"
+                "text": "string | undefined"
               },
-              "description": "(React: onClear) This event is dispatched when the input text is cleared.",
-              "reactName": "onClear",
-              "inheritedFrom": {
-                "name": "Input",
-                "module": "src/components/input/input.component.ts"
-              }
+              "description": "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"
             },
-            {
-              "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 * @slot label - Slot for the label element. If not provided, the `label` property will be used to render the label.\n * @slot toggletip - Slot for the toggletip info icon button. If not provided, the `toggletip-text` property will be used to render the info icon button and toggletip.\n * @slot help-icon - Slot for the helper/validation icon. If not provided, the icon will be rendered based on the `helpTextType` property.\n * @slot help-text - Slot for the helper/validation text. If not provided, the `helpText` property will be used to render the helper/validation text.\n * @slot input - Slot for the input element. If not provided, the input field will be rendered.\n * @slot input-leading-icon - Slot for the leading icon before the input field. If not provided, the `leadingIcon` property will be used to render the leading icon.\n * @slot input-prefix-text - Slot for the prefix text before the input field. If not provided, the `prefixText` property will be used to render the prefix text.\n * @slot trailing-button - Slot for the trailing button to clear the input field. If not provided, the clear button will be rendered when `trailingButton` property is set to true.\n *\n * @cssproperty --mdc-label-font-size - Font size for the label text.\n * @cssproperty --mdc-label-font-weight - Font weight for the label text.\n * @cssproperty --mdc-label-line-height - Line height for the label text.\n * @cssproperty --mdc-label-color - Color for the label text.\n * @cssproperty --mdc-help-text-font-size - Font size for the help text.\n * @cssproperty --mdc-help-text-font-weight - Font weight for the help text.\n * @cssproperty --mdc-help-text-line-height - Line height for the help text.\n * @cssproperty --mdc-help-text-color - Color for the help text.\n * @cssproperty --mdc-input-text-color - Text color for the input field\n * @cssproperty --mdc-input-border-color - Border color for the input container\n * @cssproperty --mdc-input-background-color - Background color for the input field\n * @cssproperty --mdc-input-support-text-color - Text color for the help text\n * @cssproperty --mdc-input-selection-text-color - Text color for the selected text\n * @cssproperty --mdc-input-selection-background-color - Background color for the selected text\n *\n * @csspart label - The label element.\n * @csspart label-text - The container for the label and required indicator elements.\n * @csspart required-indicator - The required indicator element that is displayed next to the label when the `required` property is set to true.\n * @csspart info-icon-btn - The info icon button element that is displayed next to the label when the `toggletip-text` property is set.\n * @csspart label-toggletip - The toggletip element that is displayed when the info icon button is clicked.\n * @csspart help-text - The helper/validation text element.\n * @csspart helper-icon - The helper/validation icon element that is displayed next to the helper/validation text.\n * @csspart help-text-container - The container for the helper/validation icon and text elements.\n * @csspart leading-icon - The leading icon element that is displayed before the input field.\n * @csspart prefix-text - The prefix text element that is displayed before the input field.\n * @csspart input-container - The container for the input field, leading icon, prefix text, and trailing button elements.\n * @csspart input-section - The container for the input field, leading icon, and prefix text elements.\n * @csspart input-text - The input field element.\n * @csspart trailing-button - The trailing button element that is displayed to clear the input field when the `trailingButton` property is set to true.\n */",
-          "customElement": true,
-          "attributes": [
             {
               "name": "auto-focus-on-mount",
               "type": {
@@ -40323,168 +40222,6 @@
                 "module": "src/utils/mixins/DataAriaLabelMixin.ts"
               }
             },
-            {
-              "name": "placeholder",
-              "type": {
-                "text": "string"
-              },
-              "default": "''",
-              "description": "The placeholder text that is displayed when the input field is empty.",
-              "fieldName": "placeholder",
-              "inheritedFrom": {
-                "name": "Input",
-                "module": "src/components/input/input.component.ts"
-              }
-            },
-            {
-              "name": "prefix-text",
-              "type": {
-                "text": "string | undefined"
-              },
-              "description": "The prefix text that is displayed before the input field. It has a max length of 10 characters.\nWhen the prefix text is set, make sure to set the 'data-aria-label'\nattribute with the appropriate value for accessibility.",
-              "fieldName": "prefixText",
-              "inheritedFrom": {
-                "name": "Input",
-                "module": "src/components/input/input.component.ts"
-              }
-            },
-            {
-              "name": "leading-icon",
-              "type": {
-                "text": "IconNames | undefined"
-              },
-              "description": "The leading icon that is displayed before the input field.",
-              "fieldName": "leadingIcon",
-              "inheritedFrom": {
-                "name": "Input",
-                "module": "src/components/input/input.component.ts"
-              }
-            },
-            {
-              "name": "trailing-button",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "The trailing button when set to true, shows a clear button that clears the input field.",
-              "fieldName": "trailingButton",
-              "inheritedFrom": {
-                "name": "Input",
-                "module": "src/components/input/input.component.ts"
-              }
-            },
-            {
-              "name": "maxlength",
-              "type": {
-                "text": "number | undefined"
-              },
-              "description": "The maximum number of characters that the input field can accept.",
-              "fieldName": "maxlength",
-              "inheritedFrom": {
-                "name": "Input",
-                "module": "src/components/input/input.component.ts"
-              }
-            },
-            {
-              "name": "minlength",
-              "type": {
-                "text": "number | undefined"
-              },
-              "description": "The minimum number of characters that the input field can accept.",
-              "fieldName": "minlength",
-              "inheritedFrom": {
-                "name": "Input",
-                "module": "src/components/input/input.component.ts"
-              }
-            },
-            {
-              "name": "autocapitalize",
-              "type": {
-                "text": "AutoCapitalizeType"
-              },
-              "description": "The autocapitalize attribute of the input field.",
-              "default": "'off'",
-              "fieldName": "autocapitalize",
-              "inheritedFrom": {
-                "name": "Input",
-                "module": "src/components/input/input.component.ts"
-              }
-            },
-            {
-              "name": "autocomplete",
-              "type": {
-                "text": "AutoCompleteType"
-              },
-              "description": "The autocomplete attribute of the input field.",
-              "default": "'off'",
-              "fieldName": "autocomplete",
-              "inheritedFrom": {
-                "name": "Input",
-                "module": "src/components/input/input.component.ts"
-              }
-            },
-            {
-              "name": "dirname",
-              "type": {
-                "text": "string | undefined"
-              },
-              "description": "Specifies the name of the directionality of text for submission purposes (e.g., \"rtl\" for right-to-left).",
-              "fieldName": "dirname",
-              "inheritedFrom": {
-                "name": "Input",
-                "module": "src/components/input/input.component.ts"
-              }
-            },
-            {
-              "name": "pattern",
-              "type": {
-                "text": "string | undefined"
-              },
-              "description": "The pattern attribute of the input field.\nSpecifies a regular expression that the input value must match for validation purposes.",
-              "fieldName": "pattern",
-              "inheritedFrom": {
-                "name": "Input",
-                "module": "src/components/input/input.component.ts"
-              }
-            },
-            {
-              "name": "list",
-              "type": {
-                "text": "string | undefined"
-              },
-              "description": "The list attribute of the input field.\nIdentifies a list of pre-defined options to suggest to the user.",
-              "fieldName": "list",
-              "inheritedFrom": {
-                "name": "Input",
-                "module": "src/components/input/input.component.ts"
-              }
-            },
-            {
-              "name": "size",
-              "type": {
-                "text": "number | undefined | undefined"
-              },
-              "description": "The size attribute of the input field.\nSpecifies the width of the input field.",
-              "default": "undefined",
-              "fieldName": "size",
-              "inheritedFrom": {
-                "name": "Input",
-                "module": "src/components/input/input.component.ts"
-              }
-            },
-            {
-              "name": "clear-aria-label",
-              "type": {
-                "text": "string"
-              },
-              "default": "''",
-              "description": "Aria label for the trailing button. If trailing button is set to true, this label is used for the clear button.",
-              "fieldName": "clearAriaLabel",
-              "inheritedFrom": {
-                "name": "Input",
-                "module": "src/components/input/input.component.ts"
-              }
-            },
             {
               "name": "disabled",
               "type": {
@@ -40621,7 +40358,36 @@
                 "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
               }
             }
-          ]
+          ],
+          "mixins": [
+            {
+              "name": "ListNavigationMixin",
+              "module": "/src/utils/mixins/ListNavigationMixin"
+            },
+            {
+              "name": "CaptureDestroyEventForChildElement",
+              "module": "/src/utils/mixins/lifecycle/CaptureDestroyEventForChildElement"
+            },
+            {
+              "name": "AutoFocusOnMountMixin",
+              "module": "/src/utils/mixins/AutoFocusOnMountMixin"
+            },
+            {
+              "name": "FormInternalsMixin",
+              "module": "/src/utils/mixins/FormInternalsMixin"
+            },
+            {
+              "name": "DataAriaLabelMixin",
+              "module": "/src/utils/mixins/DataAriaLabelMixin"
+            }
+          ],
+          "superclass": {
+            "name": "FormfieldWrapper",
+            "module": "/src/components/formfieldwrapper/formfieldwrapper.component"
+          },
+          "tagName": "mdc-select",
+          "jsDoc": "/**\n * The mdc-select component is a dropdown selection control that allows users to pick an option from a predefined list.\n * It is designed to work with `mdc-option` for individual options and `mdc-optgroup` for grouping related options.\n *\n * Every mdc-option should have a `value` attribute set to ensure proper form submission.\n *\n * To set a default option, use the `selected` attribute on the `mdc-option` element.\n * You can also set the `value` attribute on the `mdc-select` element to match the value of the desired option. The component will select the corresponding option automatically.\n *\n * **Note:** Make sure to add `mdc-selectlistbox` as a child of `mdc-select` and wrap options/optgroup in it to ensure proper accessibility functionality. Read more about it in SelectListBox documentation.\n *\n * If you need to use `mdc-tooltip` with any options, make sure to place the tooltip component outside the `mdc-select` element.\n *\n * @dependency mdc-button\n * @dependency mdc-icon\n * @dependency mdc-popover\n * @dependency mdc-text\n * @dependency mdc-toggletip\n *\n * @tagname mdc-select\n *\n * @slot default - This is a default/unnamed slot for Selectlistbox including options and/or option group.\n *\n * @event click - (React: onClick) This event is dispatched when the select is clicked.\n * @event change - (React: onChange) This event is dispatched when the select is changed.\n * @event input - (React: onInput) This event is dispatched when the select is changed.\n * @event keydown - (React: onKeyDown) This event is dispatched when a key is pressed down on the select.\n * @event focus - (React: onFocus) This event is dispatched when the select receives focus.\n *\n * @slot label - Slot for the label element. If not provided, the `label` property will be used to render the label.\n * @slot toggletip - Slot for the toggletip info icon button. If not provided, the `toggletip-text` property will be used to render the info icon button and toggletip.\n * @slot help-icon - Slot for the helper/validation icon. If not provided, the icon will be rendered based on the `helpTextType` property.\n * @slot help-text - Slot for the helper/validation text. If not provided, the `helpText` property will be used to render the helper/validation text.\n *\n * @csspart label - The label element.\n * @csspart label-text - The container for the label and required indicator elements.\n * @csspart required-indicator - The required indicator element that is displayed next to the label when the `required` property is set to true.\n * @csspart info-icon-btn - The info icon button element that is displayed next to the label when the `toggletip-text` property is set.\n * @csspart label-toggletip - The toggletip element that is displayed when the info icon button is clicked.\n * @csspart help-text - The helper/validation text element.\n * @csspart helper-icon - The helper/validation icon element that is displayed next to the helper/validation text.\n * @csspart help-text-container - The container for the helper/validation icon and text elements.\n *\n * @cssproperty --mdc-label-font-size - Font size for the label text.\n * @cssproperty --mdc-label-font-weight - Font weight for the label text.\n * @cssproperty --mdc-label-line-height - Line height for the label text.\n * @cssproperty --mdc-label-color - Color for the label text.\n * @cssproperty --mdc-help-text-font-size - Font size for the help text.\n * @cssproperty --mdc-help-text-font-weight - Font weight for the help text.\n * @cssproperty --mdc-help-text-line-height - Line height for the help text.\n * @cssproperty --mdc-help-text-color - Color for the help text.\n * @cssproperty --mdc-select-background-color - The background color of the combobox of select.\n * @cssproperty --mdc-select-text-color - The text color of the select.\n * @cssproperty --mdc-select-border-color - The border color of the select.\n * @cssproperty --mdc-select-width - The width of the select.\n * @cssproperty --mdc-select-listbox-height - The height of the listbox inside the select.\n * @cssproperty --mdc-select-listbox-width - The width of the listbox inside the select (default: `--mdc-select-width`).\n */",
+          "customElement": true
         }
       ],
       "exports": [
@@ -40629,8 +40395,266 @@
           "kind": "js",
           "name": "default",
           "declaration": {
-            "name": "Searchfield",
-            "module": "components/searchfield/searchfield.component.js"
+            "name": "Select",
+            "module": "components/select/select.component.js"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "components/selectlistbox/selectlistbox.component.js",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "Selectlistbox component as Light DOM component to act as a simple wrapper\nfor mdc-option components to ensure accessibility and proper role assignment.\n\nOnce [ariaOwnsElements](https://developer.mozilla.org/en-US/docs/Web/API/ElementInternals/ariaOwnsElements) is supported in browsers, this component can be removed\nand mdc-option can be used directly in the select component with a listbox in a different\nshadow root and aria-owns attribute to connect them.",
+          "name": "Selectlistbox",
+          "slots": [
+            {
+              "description": "This is a default/unnamed slot, which can be used to insert mdc-option components.",
+              "name": "default"
+            }
+          ],
+          "members": [],
+          "superclass": {
+            "name": "Component",
+            "module": "/src/models"
+          },
+          "tagName": "mdc-selectlistbox",
+          "jsDoc": "/**\n * Selectlistbox component as Light DOM component to act as a simple wrapper\n * for mdc-option components to ensure accessibility and proper role assignment.\n *\n * Once [ariaOwnsElements](https://developer.mozilla.org/en-US/docs/Web/API/ElementInternals/ariaOwnsElements) is supported in browsers, this component can be removed\n * and mdc-option can be used directly in the select component with a listbox in a different\n * shadow root and aria-owns attribute to connect them.\n *\n * @tagname mdc-selectlistbox\n *\n * @slot default - This is a default/unnamed slot, which can be used to insert mdc-option components.\n */",
+          "customElement": true
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "default",
+          "declaration": {
+            "name": "Selectlistbox",
+            "module": "components/selectlistbox/selectlistbox.component.js"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "components/sidenavigation/sidenavigation.component.js",
+      "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 collapsed",
+              "name": "--mdc-sidenavigation-collapsed-width"
+            },
+            {
+              "description": "z-index of the vertical divider button",
+              "name": "--mdc-sidenavigation-vertical-divider-button-z-index"
+            }
+          ],
+          "cssParts": [
+            {
+              "description": "The main container wrapping the entire side navigation.",
+              "name": "side-navigation-container"
+            },
+            {
+              "description": "The scrollable section of the side navigation.",
+              "name": "scrollable-section"
+            },
+            {
+              "description": "The fixed section of the side navigation.",
+              "name": "fixed-section"
+            },
+            {
+              "description": "The divider between the scrollable and fixed sections.",
+              "name": "separator"
+            },
+            {
+              "description": "The container wrapping the brand logo and footer text.",
+              "name": "brand-logo-container"
+            },
+            {
+              "description": "The footer text label in the fixed section.",
+              "name": "footer-text"
+            },
+            {
+              "description": "The vertical divider between the scrollable and fixed sections.",
+              "name": "vertical-divider"
+            },
+            {
+              "description": "The button inside the vertical divider used to toggle expand/collapse.",
+              "name": "vertical-divider-button"
+            }
+          ],
+          "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": "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": "field",
+              "name": "Context",
+              "privacy": "public",
+              "static": true,
+              "readonly": 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": "method",
+              "name": "preventScrollOnSpace",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "event",
+                  "type": {
+                    "text": "KeyboardEvent"
+                  }
+                }
+              ]
+            }
+          ],
+          "events": [
+            {
+              "name": "toggle",
+              "type": {
+                "text": "CustomEvent"
+              },
+              "description": "(React: onToggle) Dispatched when the grabber button is clicked to expand/collapse the sidenavigation.",
+              "reactName": "onToggle"
+            },
+            {
+              "description": "(React: onActiveChange) Dispatched when the active state of a nested 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 * @csspart side-navigation-container - The main container wrapping the entire side navigation.\n * @csspart scrollable-section - The scrollable section of the side navigation.\n * @csspart fixed-section - The fixed section of the side navigation.\n * @csspart separator - The divider between the scrollable and fixed sections.\n * @csspart brand-logo-container - The container wrapping the brand logo and footer text.\n * @csspart footer-text - The footer text label in the fixed section.\n * @csspart vertical-divider - The vertical divider between the scrollable and fixed sections.\n * @csspart vertical-divider-button - The button inside the vertical divider used to toggle expand/collapse.\n *\n * @event toggle - (React: onToggle) Dispatched when the grabber button is clicked to expand/collapse the sidenavigation.\n * @event activechange - (React: onActiveChange) Dispatched when the active state of a nested navmenuitem changes.\n *\n * @cssproperty --mdc-sidenavigation-expanded-width - width of the sideNavigation when expanded\n * @cssproperty --mdc-sidenavigation-collapsed-width - width of the sideNavigation when collapsed\n * @cssproperty --mdc-sidenavigation-vertical-divider-button-z-index - z-index of the vertical divider button\n */",
+          "customElement": true
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "default",
+          "declaration": {
+            "name": "SideNavigation",
+            "module": "components/sidenavigation/sidenavigation.component.js"
           }
         }
       ]
@@ -41837,139 +41861,6 @@
         }
       ]
     },
-    {
-      "kind": "javascript-module",
-      "path": "components/staticchip/staticchip.component.js",
-      "declarations": [
-        {
-          "kind": "class",
-          "description": "mdc-staticchip is an static element that can be used to represent a chip. It supports a leading icon along with label.\n\nIt is recommended to keep the label text for the chip component concise and compact.\nFor best results, we recommend limiting the <b>maximum length of the label text to 20 characters</b>, including empty spaces to split words.",
-          "name": "StaticChip",
-          "cssProperties": [
-            {
-              "description": "The color of the static chip.",
-              "name": "--mdc-chip-color"
-            },
-            {
-              "description": "The border color of the static chip.",
-              "name": "--mdc-chip-border-color"
-            },
-            {
-              "description": "The background color of the static chip.",
-              "name": "--mdc-chip-background-color"
-            }
-          ],
-          "cssParts": [
-            {
-              "description": "The label of the static chip.",
-              "name": "label"
-            }
-          ],
-          "members": [
-            {
-              "kind": "field",
-              "name": "color",
-              "type": {
-                "text": "ColorType"
-              },
-              "description": "The color of the chip. It supports the following colors\n- default\n- cobalt\n- gold\n- lime\n- mint\n- orange\n- pink\n- purple\n- slate\n- violet",
-              "default": "default",
-              "attribute": "color",
-              "reflects": true
-            },
-            {
-              "kind": "field",
-              "name": "label",
-              "type": {
-                "text": "string"
-              },
-              "default": "''",
-              "description": "The visible label text of the chip.\n\nWe recommend limiting the <b>maximum length of the label text to 20 characters</b>,\nincluding empty spaces to split words.",
-              "attribute": "label"
-            },
-            {
-              "kind": "method",
-              "name": "renderIcon",
-              "privacy": "private",
-              "description": "Renders the icon element if available.",
-              "return": {
-                "type": {
-                  "text": ""
-                }
-              }
-            },
-            {
-              "kind": "field",
-              "name": "iconName",
-              "type": {
-                "text": "IconNames | undefined"
-              },
-              "description": "Name of the icon (= filename).\n\nIf no `icon-name` is provided, no icon will be rendered.",
-              "attribute": "icon-name",
-              "inheritedFrom": {
-                "name": "IconNameMixin",
-                "module": "utils/mixins/IconNameMixin.js"
-              }
-            }
-          ],
-          "attributes": [
-            {
-              "name": "color",
-              "type": {
-                "text": "ColorType"
-              },
-              "description": "The color of the chip. It supports the following colors\n- default\n- cobalt\n- gold\n- lime\n- mint\n- orange\n- pink\n- purple\n- slate\n- violet",
-              "default": "default",
-              "fieldName": "color"
-            },
-            {
-              "name": "label",
-              "type": {
-                "text": "string"
-              },
-              "default": "''",
-              "description": "The visible label text of the chip.\n\nWe recommend limiting the <b>maximum length of the label text to 20 characters</b>,\nincluding empty spaces to split words.",
-              "fieldName": "label"
-            },
-            {
-              "name": "icon-name",
-              "type": {
-                "text": "IconNames | undefined"
-              },
-              "description": "Name of the icon (= filename).\n\nIf no `icon-name` is provided, no icon will be rendered.",
-              "fieldName": "iconName",
-              "inheritedFrom": {
-                "name": "IconNameMixin",
-                "module": "src/utils/mixins/IconNameMixin.ts"
-              }
-            }
-          ],
-          "mixins": [
-            {
-              "name": "IconNameMixin",
-              "module": "/src/utils/mixins/IconNameMixin"
-            }
-          ],
-          "superclass": {
-            "name": "Component",
-            "module": "/src/models"
-          },
-          "tagName": "mdc-staticchip",
-          "jsDoc": "/**\n * mdc-staticchip is an static element that can be used to represent a chip. It supports a leading icon along with label.\n *\n * It is recommended to keep the label text for the chip component concise and compact.\n * For best results, we recommend limiting the <b>maximum length of the label text to 20 characters</b>, including empty spaces to split words.\n *\n *\n * @tagname mdc-staticchip\n *\n * @dependency mdc-icon\n * @dependency mdc-text\n *\n * @cssproperty --mdc-chip-color - The color of the static chip.\n * @cssproperty --mdc-chip-border-color - The border color of the static chip.\n * @cssproperty --mdc-chip-background-color - The background color of the static chip.\n *\n * @csspart label - The label of the static chip.\n */",
-          "customElement": true
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "default",
-          "declaration": {
-            "name": "StaticChip",
-            "module": "components/staticchip/staticchip.component.js"
-          }
-        }
-      ]
-    },
     {
       "kind": "javascript-module",
       "path": "components/staticradio/staticradio.component.js",
@@ -42150,6 +42041,139 @@
         }
       ]
     },
+    {
+      "kind": "javascript-module",
+      "path": "components/staticchip/staticchip.component.js",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "mdc-staticchip is an static element that can be used to represent a chip. It supports a leading icon along with label.\n\nIt is recommended to keep the label text for the chip component concise and compact.\nFor best results, we recommend limiting the <b>maximum length of the label text to 20 characters</b>, including empty spaces to split words.",
+          "name": "StaticChip",
+          "cssProperties": [
+            {
+              "description": "The color of the static chip.",
+              "name": "--mdc-chip-color"
+            },
+            {
+              "description": "The border color of the static chip.",
+              "name": "--mdc-chip-border-color"
+            },
+            {
+              "description": "The background color of the static chip.",
+              "name": "--mdc-chip-background-color"
+            }
+          ],
+          "cssParts": [
+            {
+              "description": "The label of the static chip.",
+              "name": "label"
+            }
+          ],
+          "members": [
+            {
+              "kind": "field",
+              "name": "color",
+              "type": {
+                "text": "ColorType"
+              },
+              "description": "The color of the chip. It supports the following colors\n- default\n- cobalt\n- gold\n- lime\n- mint\n- orange\n- pink\n- purple\n- slate\n- violet",
+              "default": "default",
+              "attribute": "color",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "label",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "description": "The visible label text of the chip.\n\nWe recommend limiting the <b>maximum length of the label text to 20 characters</b>,\nincluding empty spaces to split words.",
+              "attribute": "label"
+            },
+            {
+              "kind": "method",
+              "name": "renderIcon",
+              "privacy": "private",
+              "description": "Renders the icon element if available.",
+              "return": {
+                "type": {
+                  "text": ""
+                }
+              }
+            },
+            {
+              "kind": "field",
+              "name": "iconName",
+              "type": {
+                "text": "IconNames | undefined"
+              },
+              "description": "Name of the icon (= filename).\n\nIf no `icon-name` is provided, no icon will be rendered.",
+              "attribute": "icon-name",
+              "inheritedFrom": {
+                "name": "IconNameMixin",
+                "module": "utils/mixins/IconNameMixin.js"
+              }
+            }
+          ],
+          "attributes": [
+            {
+              "name": "color",
+              "type": {
+                "text": "ColorType"
+              },
+              "description": "The color of the chip. It supports the following colors\n- default\n- cobalt\n- gold\n- lime\n- mint\n- orange\n- pink\n- purple\n- slate\n- violet",
+              "default": "default",
+              "fieldName": "color"
+            },
+            {
+              "name": "label",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "description": "The visible label text of the chip.\n\nWe recommend limiting the <b>maximum length of the label text to 20 characters</b>,\nincluding empty spaces to split words.",
+              "fieldName": "label"
+            },
+            {
+              "name": "icon-name",
+              "type": {
+                "text": "IconNames | undefined"
+              },
+              "description": "Name of the icon (= filename).\n\nIf no `icon-name` is provided, no icon will be rendered.",
+              "fieldName": "iconName",
+              "inheritedFrom": {
+                "name": "IconNameMixin",
+                "module": "src/utils/mixins/IconNameMixin.ts"
+              }
+            }
+          ],
+          "mixins": [
+            {
+              "name": "IconNameMixin",
+              "module": "/src/utils/mixins/IconNameMixin"
+            }
+          ],
+          "superclass": {
+            "name": "Component",
+            "module": "/src/models"
+          },
+          "tagName": "mdc-staticchip",
+          "jsDoc": "/**\n * mdc-staticchip is an static element that can be used to represent a chip. It supports a leading icon along with label.\n *\n * It is recommended to keep the label text for the chip component concise and compact.\n * For best results, we recommend limiting the <b>maximum length of the label text to 20 characters</b>, including empty spaces to split words.\n *\n *\n * @tagname mdc-staticchip\n *\n * @dependency mdc-icon\n * @dependency mdc-text\n *\n * @cssproperty --mdc-chip-color - The color of the static chip.\n * @cssproperty --mdc-chip-border-color - The border color of the static chip.\n * @cssproperty --mdc-chip-background-color - The background color of the static chip.\n *\n * @csspart label - The label of the static chip.\n */",
+          "customElement": true
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "default",
+          "declaration": {
+            "name": "StaticChip",
+            "module": "components/staticchip/staticchip.component.js"
+          }
+        }
+      ]
+    },
     {
       "kind": "javascript-module",
       "path": "components/statictoggle/statictoggle.component.js",