@momentum-design/components 0.102.7 → 0.102.9

package/dist/custom-elements.json

@@ -30560,426 +30560,502 @@
     },
     {
       "kind": "javascript-module",
-      "path": "components/select/select.component.js",
+      "path": "components/searchfield/searchfield.component.js",
       "declarations": [
         {
           "kind": "class",
-          "description": "The mdc-select component is a dropdown selection control that allows users to pick an option from a predefined list.\nIt is designed to work with `mdc-option` for individual options and `mdc-optgroup` for grouping related options.\nThe component ensures accessibility and usability while handling various use cases,\nincluding long text truncation with tooltip support.\n\nEvery mdc-option should have a `value` attribute set to ensure proper form submission.\n\nTo set a default option, use the `selected` attribute on the `mdc-option` element.\n\n**Note:** Make sure to add `mdc-selectlistbox` as a child of `mdc-select` and wrap options/optgroup in it to ensure proper accessibility functionality. Read more about it in SelectListBox documentation.",
-          "name": "Select",
+          "description": "`mdc-searchfield` component is used as an input field for search functionality.\n\nIt supports `mdc-inputchip` as filters.\n\nThis component is built by extending the `mdc-input` component.",
+          "name": "Searchfield",
           "slots": [
             {
-              "description": "This is a default/unnamed slot for Selectlistbox including options and/or option group.",
-              "name": "default"
+              "description": "Slot for input chips",
+              "name": "filters"
             }
           ],
           "members": [
             {
               "kind": "field",
-              "name": "placeholder",
+              "name": "inputChips",
               "type": {
-                "text": "string | undefined"
-              },
-              "description": "The placeholder text which will be shown on the text if provided.",
-              "attribute": "placeholder"
+                "text": "Array<HTMLElement> | undefined"
+              }
+            },
+            {
+              "kind": "method",
+              "name": "handleKeyDown",
+              "privacy": "protected",
+              "parameters": [
+                {
+                  "name": "event",
+                  "type": {
+                    "text": "KeyboardEvent"
+                  },
+                  "description": "Keyboard event"
+                }
+              ],
+              "description": "Handles the keydown event of the search field.\nIf the key pressed is 'Enter', it submits the form.\nIf the key pressed is 'Escape', it clears the input text.",
+              "inheritedFrom": {
+                "name": "Input",
+                "module": "components/input/input.component.js"
+              }
+            },
+            {
+              "kind": "method",
+              "name": "renderInputChips",
+              "privacy": "private",
+              "description": "This method is used to render the input chips inside filters slot.\nIt will remove any elements that are not input chips."
+            },
+            {
+              "kind": "method",
+              "name": "clearInputText",
+              "privacy": "protected",
+              "description": "Clears the input field.",
+              "inheritedFrom": {
+                "name": "Input",
+                "module": "components/input/input.component.js"
+              }
             },
             {
               "kind": "field",
-              "name": "readonly",
+              "name": "name",
               "type": {
-                "text": "boolean"
+                "text": "string"
               },
-              "default": "false",
-              "description": "readonly attribute of the select field. If true, the select is read-only.",
-              "attribute": "readonly"
+              "default": "''",
+              "description": "Indicates the name of the component group.\nThey are used to group elements in a form together.",
+              "attribute": "name",
+              "reflects": true,
+              "inheritedFrom": {
+                "name": "FormInternalsMixin",
+                "module": "utils/mixins/FormInternalsMixin.js"
+              }
             },
             {
               "kind": "field",
-              "name": "height",
+              "name": "value",
               "type": {
                 "text": "string"
               },
-              "default": "'auto'",
-              "description": "height attribute of the select field. If set,\nthen a scroll bar will be visible when there more options than the adjusted height.",
-              "attribute": "height"
+              "default": "''",
+              "description": "Indicates the value of the component group (ex: input, checkbox, radio, select etc...)",
+              "attribute": "value",
+              "reflects": true,
+              "inheritedFrom": {
+                "name": "FormInternalsMixin",
+                "module": "utils/mixins/FormInternalsMixin.js"
+              }
             },
             {
               "kind": "field",
-              "name": "placement",
+              "name": "validationMessage",
               "type": {
-                "text": "Placement"
+                "text": "string | undefined"
               },
-              "description": "The placeholder text which will be shown on the text if provided.",
-              "attribute": "placement",
-              "reflects": true
+              "description": "Custom validation message that will override the default message and displayed when the input is invalid.\n\nTo display custom validation messages, you must listen for input events (or other relevant events)\non your component and update the `validationMessage` property with the desired message string.\nUpdating this property will ensure that new validation messages are shown to the user.\n- The `validationMessage` property overrides the default browser validation message when set.\n- Consumers are responsible for updating `validationMessage` in response to input or validation state changes.",
+              "attribute": "validation-message",
+              "reflects": true,
+              "inheritedFrom": {
+                "name": "FormInternalsMixin",
+                "module": "utils/mixins/FormInternalsMixin.js"
+              }
             },
             {
               "kind": "field",
-              "name": "softDisabled",
+              "name": "validity",
               "type": {
-                "text": "boolean | undefined"
+                "text": "ValidityState"
               },
-              "description": "Indicates whether the select is soft disabled.\nWhen set to `true`, the select appears visually disabled but still allows\nfocus.",
-              "default": "undefined",
-              "attribute": "soft-disabled"
+              "readonly": true,
+              "inheritedFrom": {
+                "name": "FormInternalsMixin",
+                "module": "utils/mixins/FormInternalsMixin.js"
+              }
             },
             {
-              "kind": "method",
-              "name": "getAllValidOptions",
-              "privacy": "private",
-              "return": {
-                "type": {
-                  "text": "Array<Option>"
-                }
+              "kind": "field",
+              "name": "willValidate",
+              "readonly": true,
+              "inheritedFrom": {
+                "name": "FormInternalsMixin",
+                "module": "utils/mixins/FormInternalsMixin.js"
               }
             },
             {
               "kind": "method",
-              "name": "getFirstValidOption",
-              "privacy": "private",
+              "name": "setValidity",
+              "description": "Sets the validity of the input field based on the input field's validity.",
               "return": {
                 "type": {
-                  "text": "Option | null"
+                  "text": ""
                 }
+              },
+              "inheritedFrom": {
+                "name": "FormInternalsMixin",
+                "module": "utils/mixins/FormInternalsMixin.js"
               }
             },
             {
               "kind": "method",
-              "name": "getLastValidOption",
-              "privacy": "private",
+              "name": "checkValidity",
               "return": {
                 "type": {
-                  "text": "Option | null"
+                  "text": "boolean"
                 }
+              },
+              "inheritedFrom": {
+                "name": "FormInternalsMixin",
+                "module": "utils/mixins/FormInternalsMixin.js"
               }
             },
             {
               "kind": "method",
-              "name": "getFirstSelectedOption",
-              "privacy": "private",
-              "return": {
-                "type": {
-                  "text": "Option | null"
-                }
+              "name": "reportValidity",
+              "inheritedFrom": {
+                "name": "FormInternalsMixin",
+                "module": "utils/mixins/FormInternalsMixin.js"
               }
             },
             {
-              "kind": "method",
-              "name": "modifyListBoxWrapper",
-              "privacy": "private",
-              "description": "Modifies the listbox wrapper to ensure it has the correct attributes\nand IDs for accessibility.\n\nOnce [ariaOwnsElements](https://developer.mozilla.org/en-US/docs/Web/API/ElementInternals/ariaOwnsElements) is supported in browsers,\nthis an be removed and mdc-option can be used directly in the select component with a listbox in a different\nshadow root and aria-owns attribute to connect them."
+              "kind": "field",
+              "name": "dataAriaLabel",
+              "type": {
+                "text": "string | null"
+              },
+              "default": "null",
+              "description": "Defines a string value that labels the current element.\nThe Aria-Label attribute to be set for accessibility.",
+              "attribute": "data-aria-label",
+              "reflects": true,
+              "inheritedFrom": {
+                "name": "DataAriaLabelMixin",
+                "module": "utils/mixins/DataAriaLabelMixin.js"
+              }
             },
             {
-              "kind": "method",
-              "name": "handleOptionsClick",
-              "privacy": "private",
-              "return": {
-                "type": {
-                  "text": "void"
-                }
+              "kind": "field",
+              "name": "placeholder",
+              "type": {
+                "text": "string"
               },
-              "parameters": [
-                {
-                  "name": "event",
-                  "type": {
-                    "text": "MouseEvent"
-                  },
-                  "description": "The event which triggered this function."
-                }
-              ],
-              "description": "A private method which is called when an option is clicked.\nIt sets the selected option, removes selected from other options, updates the tabindex for all options,\ncloses the popover, and fires the change and input events."
+              "default": "''",
+              "description": "The placeholder text that is displayed when the input field is empty.",
+              "attribute": "placeholder",
+              "inheritedFrom": {
+                "name": "Input",
+                "module": "components/input/input.component.js"
+              }
             },
             {
-              "kind": "method",
-              "name": "setSelectedOption",
-              "privacy": "private",
-              "return": {
-                "type": {
-                  "text": "void"
-                }
+              "kind": "field",
+              "name": "readonly",
+              "type": {
+                "text": "boolean"
               },
-              "parameters": [
-                {
-                  "name": "option",
-                  "type": {
-                    "text": "Option | null"
-                  },
-                  "description": "The option element in DOM which gets selected."
-                }
-              ],
-              "description": "Sets the selected option in the component state and updates the input element's value.\nThis method ensures that only the selected option is marked as selected in the DOM,\nand updates the tabindex for all options accordingly.\nIt also updates the validity of the input element based on the selected option.\nThis method is called when an option is selected."
+              "default": "false",
+              "description": "readonly attribute of the input field. If true, the input field is read-only.",
+              "attribute": "readonly",
+              "inheritedFrom": {
+                "name": "Input",
+                "module": "components/input/input.component.js"
+              }
             },
             {
-              "kind": "method",
-              "name": "updateTabIndexForAllOptions",
-              "privacy": "private",
-              "return": {
-                "type": {
-                  "text": "void"
-                }
+              "kind": "field",
+              "name": "prefixText",
+              "type": {
+                "text": "string | undefined"
               },
-              "parameters": [
-                {
-                  "name": "option",
-                  "optional": true,
-                  "type": {
-                    "text": "Option | null"
-                  },
-                  "description": "The option which tabIndex should be set to 0."
-                }
-              ],
-              "description": "Updates the tabindex of all options.\nSets the tabindex of the selected option to '0' and others to '-1'."
+              "description": "The prefix text that is displayed before the input field. It has a max length of 10 characters.\nWhen the prefix text is set, make sure to set the 'data-aria-label'\nattribute with the appropriate value for accessibility.",
+              "attribute": "prefix-text",
+              "inheritedFrom": {
+                "name": "Input",
+                "module": "components/input/input.component.js"
+              }
             },
             {
-              "kind": "method",
-              "name": "updateSelectedInChildOptions",
-              "privacy": "private",
-              "return": {
-                "type": {
-                  "text": "void"
-                }
+              "kind": "field",
+              "name": "leadingIcon",
+              "type": {
+                "text": "IconNames | undefined"
               },
-              "parameters": [
-                {
-                  "name": "selectedOption",
-                  "type": {
-                    "text": "Option | null"
-                  },
-                  "description": "The option which gets selected"
-                }
-              ],
-              "description": "Sets selected attribute on the selected option and removes it from all options"
+              "description": "The leading icon that is displayed before the input field.",
+              "attribute": "leading-icon",
+              "inheritedFrom": {
+                "name": "Input",
+                "module": "components/input/input.component.js"
+              }
             },
             {
-              "kind": "method",
-              "name": "fireEvents",
-              "privacy": "private",
-              "return": {
-                "type": {
-                  "text": "void"
-                }
+              "kind": "field",
+              "name": "trailingButton",
+              "type": {
+                "text": "boolean"
               },
-              "description": "A private method which is called to fire the change and input events.\nIt dispatches the input and change events with the selected option's value and label."
+              "default": "false",
+              "description": "The trailing button when set to true, shows a clear button that clears the input field.",
+              "attribute": "trailing-button",
+              "inheritedFrom": {
+                "name": "Input",
+                "module": "components/input/input.component.js"
+              }
             },
             {
-              "kind": "method",
-              "name": "dispatchChange",
-              "privacy": "private",
-              "return": {
-                "type": {
-                  "text": "void"
-                }
+              "kind": "field",
+              "name": "maxlength",
+              "type": {
+                "text": "number | undefined"
               },
-              "parameters": [
-                {
-                  "name": "option",
-                  "type": {
-                    "text": "Option"
-                  }
-                }
-              ]
+              "description": "The maximum number of characters that the input field can accept.",
+              "attribute": "maxlength",
+              "inheritedFrom": {
+                "name": "Input",
+                "module": "components/input/input.component.js"
+              }
             },
             {
-              "kind": "method",
-              "name": "dispatchInput",
-              "privacy": "private",
-              "return": {
-                "type": {
-                  "text": "void"
-                }
+              "kind": "field",
+              "name": "minlength",
+              "type": {
+                "text": "number | undefined"
               },
-              "parameters": [
-                {
-                  "name": "option",
-                  "type": {
-                    "text": "Option"
-                  }
-                }
-              ]
+              "description": "The minimum number of characters that the input field can accept.",
+              "attribute": "minlength",
+              "inheritedFrom": {
+                "name": "Input",
+                "module": "components/input/input.component.js"
+              }
             },
             {
-              "kind": "method",
-              "name": "handleClickCombobox",
-              "privacy": "private",
-              "return": {
-                "type": {
-                  "text": "void"
-                }
+              "kind": "field",
+              "name": "autocapitalize",
+              "type": {
+                "text": "AutoCapitalizeType"
               },
-              "parameters": [
-                {
-                  "name": "event",
-                  "type": {
-                    "text": "MouseEvent"
-                  },
-                  "description": "The mouse event which triggered this function."
-                }
-              ],
-              "description": "Handles the click event on the visual combobox.\nIf the select is disabled, soft-disabled or readonly, it does nothing.\nIf the popover is already open, it closes it.\nIf it is closed, it opens it."
+              "description": "The autocapitalize attribute of the input field.",
+              "default": "'off'",
+              "attribute": "autocapitalize",
+              "inheritedFrom": {
+                "name": "Input",
+                "module": "components/input/input.component.js"
+              }
             },
             {
-              "kind": "method",
-              "name": "handleKeydownCombobox",
-              "privacy": "private",
-              "return": {
-                "type": {
-                  "text": "void"
-                }
+              "kind": "field",
+              "name": "autocomplete",
+              "type": {
+                "text": "AutoCompleteType"
               },
-              "parameters": [
-                {
-                  "name": "event",
-                  "type": {
-                    "text": "KeyboardEvent"
-                  },
-                  "description": "The keyboard event."
-                }
-              ],
-              "description": "Handles the keydown event on the select element when the popover is closed.\nThe options are as follows:\n- ARROW_DOWN, ARROW_UP, SPACE: Opens the popover and prevents the default scrolling behavior.\n- ENTER: Opens the popover, prevents default scrolling, and submits the form if the popover is closed.\n- HOME: Opens the popover and sets focus and tabindex on the first option.\n- END: Opens the popover and sets focus and tabindex on the last option."
+              "description": "The autocomplete attribute of the input field.",
+              "default": "'off'",
+              "attribute": "autocomplete",
+              "inheritedFrom": {
+                "name": "Input",
+                "module": "components/input/input.component.js"
+              }
             },
             {
-              "kind": "method",
-              "name": "handlePopoverKeydown",
-              "privacy": "private",
-              "return": {
-                "type": {
-                  "text": "void"
-                }
+              "kind": "field",
+              "name": "autofocus",
+              "type": {
+                "text": "boolean"
               },
-              "parameters": [
-                {
-                  "name": "event",
-                  "type": {
-                    "text": "KeyboardEvent"
-                  },
-                  "description": "The keyboard event."
-                }
-              ],
-              "description": "Handles the keydown event on the select element when the popover is open.\nThe options are as follows:\n- HOME: Sets focus and tabindex on the first option.\n- END: Sets focus and tabindex on the last option.\n- ARROW_DOWN, ARROW_UP, PAGE_DOWN, PAGE_UP: Handles navigation between options."
+              "default": "false",
+              "description": "If true, the input field is focused when the component is rendered.",
+              "attribute": "autofocus",
+              "inheritedFrom": {
+                "name": "Input",
+                "module": "components/input/input.component.js"
+              }
             },
             {
-              "kind": "method",
-              "name": "updateState",
-              "privacy": "public",
-              "return": {
-                "type": {
-                  "text": "void"
-                }
+              "kind": "field",
+              "name": "dirname",
+              "type": {
+                "text": "string | undefined"
               },
-              "description": "Updates the state of the select component.\nThis public method should be fired when the selected on the option components is updated from the outside.\nIt ensures that the selected attribute is set correctly on the options\nand that the aria-selected attribute is updated accordingly."
+              "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": "name",
+              "name": "pattern",
               "type": {
-                "text": "string"
+                "text": "string | undefined"
               },
-              "default": "''",
-              "description": "Indicates the name of the component group.\nThey are used to group elements in a form together.",
-              "attribute": "name",
-              "reflects": true,
+              "description": "The pattern attribute of the input field.\nSpecifies a regular expression that the input value must match for validation purposes.",
+              "attribute": "pattern",
               "inheritedFrom": {
-                "name": "FormInternalsMixin",
-                "module": "utils/mixins/FormInternalsMixin.js"
+                "name": "Input",
+                "module": "components/input/input.component.js"
               }
             },
             {
               "kind": "field",
-              "name": "value",
+              "name": "list",
               "type": {
-                "text": "string"
+                "text": "string | undefined"
               },
-              "default": "''",
-              "description": "Indicates the value of the component group (ex: input, checkbox, radio, select etc...)",
-              "attribute": "value",
-              "reflects": true,
+              "description": "The list attribute of the input field.\nIdentifies a list of pre-defined options to suggest to the user.",
+              "attribute": "list",
               "inheritedFrom": {
-                "name": "FormInternalsMixin",
-                "module": "utils/mixins/FormInternalsMixin.js"
+                "name": "Input",
+                "module": "components/input/input.component.js"
               }
             },
             {
               "kind": "field",
-              "name": "validationMessage",
+              "name": "size",
               "type": {
-                "text": "string | undefined"
+                "text": "number | undefined | undefined"
               },
-              "description": "Custom validation message that will override the default message and displayed when the input is invalid.\n\nTo display custom validation messages, you must listen for input events (or other relevant events)\non your component and update the `validationMessage` property with the desired message string.\nUpdating this property will ensure that new validation messages are shown to the user.\n- The `validationMessage` property overrides the default browser validation message when set.\n- Consumers are responsible for updating `validationMessage` in response to input or validation state changes.",
-              "attribute": "validation-message",
-              "reflects": true,
+              "description": "The size attribute of the input field.\nSpecifies the width of the input field.",
+              "default": "undefined",
+              "attribute": "size",
               "inheritedFrom": {
-                "name": "FormInternalsMixin",
-                "module": "utils/mixins/FormInternalsMixin.js"
+                "name": "Input",
+                "module": "components/input/input.component.js"
               }
             },
             {
               "kind": "field",
-              "name": "validity",
+              "name": "clearAriaLabel",
               "type": {
-                "text": "ValidityState"
+                "text": "string"
               },
-              "readonly": true,
+              "default": "''",
+              "description": "Aria label for the trailing button. If trailing button is set to true, this label is used for the clear button.",
+              "attribute": "clear-aria-label",
               "inheritedFrom": {
-                "name": "FormInternalsMixin",
-                "module": "utils/mixins/FormInternalsMixin.js"
+                "name": "Input",
+                "module": "components/input/input.component.js"
               }
             },
             {
-              "kind": "field",
-              "name": "willValidate",
-              "readonly": true,
+              "kind": "method",
+              "name": "setInputValidity",
+              "privacy": "private",
               "inheritedFrom": {
-                "name": "FormInternalsMixin",
-                "module": "utils/mixins/FormInternalsMixin.js"
+                "name": "Input",
+                "module": "components/input/input.component.js"
               }
             },
             {
               "kind": "method",
-              "name": "setValidity",
-              "description": "Sets the validity of the input field based on the input field's validity.",
+              "name": "updateValue",
+              "privacy": "private",
+              "description": "Updates the value of the input field.\nSets the form value.",
               "return": {
                 "type": {
                   "text": ""
                 }
               },
               "inheritedFrom": {
-                "name": "FormInternalsMixin",
-                "module": "utils/mixins/FormInternalsMixin.js"
+                "name": "Input",
+                "module": "components/input/input.component.js"
               }
             },
             {
               "kind": "method",
-              "name": "checkValidity",
+              "name": "onInput",
+              "privacy": "private",
+              "description": "Handles the input event of the input field.\nUpdates the value and sets the validity of the input field.",
+              "inheritedFrom": {
+                "name": "Input",
+                "module": "components/input/input.component.js"
+              }
+            },
+            {
+              "kind": "method",
+              "name": "onChange",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "event",
+                  "type": {
+                    "text": "Event"
+                  },
+                  "description": "Event which contains information about the value change."
+                }
+              ],
+              "description": "Handles the change event of the input field.\nUpdates the value and sets the validity of the input field.\n\nThe 'change' event does not bubble up through the shadow DOM as it was not composed.\nTherefore, we need to re-dispatch the same event to ensure it is propagated correctly.\nRead more: https://developer.mozilla.org/en-US/docs/Web/API/Event/composed",
+              "inheritedFrom": {
+                "name": "Input",
+                "module": "components/input/input.component.js"
+              }
+            },
+            {
+              "kind": "method",
+              "name": "renderLeadingIcon",
+              "privacy": "protected",
+              "description": "Renders the leading icon before the input field.\nIf the leading icon is not set, it will not be displayed.",
+              "return": {
+                "type": {
+                  "text": ""
+                }
+              },
+              "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": "boolean"
+                  "text": ""
                 }
               },
               "inheritedFrom": {
-                "name": "FormInternalsMixin",
-                "module": "utils/mixins/FormInternalsMixin.js"
+                "name": "Input",
+                "module": "components/input/input.component.js"
               }
             },
             {
               "kind": "method",
-              "name": "reportValidity",
-              "inheritedFrom": {
-                "name": "FormInternalsMixin",
-                "module": "utils/mixins/FormInternalsMixin.js"
-              }
-            },
-            {
-              "kind": "field",
-              "name": "dataAriaLabel",
-              "type": {
-                "text": "string | null"
-              },
-              "default": "null",
-              "description": "Defines a string value that labels the current element.\nThe Aria-Label attribute to be set for accessibility.",
-              "attribute": "data-aria-label",
-              "reflects": true,
+              "name": "renderInputElement",
+              "privacy": "protected",
+              "parameters": [
+                {
+                  "name": "type",
+                  "type": {
+                    "text": "InputType"
+                  }
+                },
+                {
+                  "name": "hidePlaceholder",
+                  "default": "false"
+                }
+              ],
               "inheritedFrom": {
-                "name": "DataAriaLabelMixin",
-                "module": "utils/mixins/DataAriaLabelMixin.js"
+                "name": "Input",
+                "module": "components/input/input.component.js"
               }
             },
             {
@@ -31189,45 +31265,134 @@
           ],
           "events": [
             {
+              "description": "(React: onInput) This event is dispatched when the value of the input field changes (every press).",
+              "name": "input",
+              "reactName": "onInput",
+              "inheritedFrom": {
+                "name": "Input",
+                "module": "src/components/input/input.component.ts"
+              }
+            },
+            {
+              "description": "(React: onChange) This event is dispatched when the value of the input field changes (on blur).",
               "name": "change",
+              "reactName": "onChange",
+              "inheritedFrom": {
+                "name": "Input",
+                "module": "src/components/input/input.component.ts"
+              }
+            },
+            {
+              "description": "(React: onFocus) This event is dispatched when the input receives focus.",
+              "name": "focus",
+              "reactName": "onFocus",
+              "inheritedFrom": {
+                "name": "Input",
+                "module": "src/components/input/input.component.ts"
+              }
+            },
+            {
+              "description": "(React: onBlur) This event is dispatched when the input loses focus.",
+              "name": "blur",
+              "reactName": "onBlur",
+              "inheritedFrom": {
+                "name": "Input",
+                "module": "src/components/input/input.component.ts"
+              }
+            },
+            {
+              "name": "clear",
               "type": {
                 "text": "CustomEvent"
               },
-              "description": "(React: onChange) This event is dispatched when the select is changed.",
-              "reactName": "onChange"
+              "description": "(React: onClear) This event is dispatched when the input text is cleared.",
+              "reactName": "onClear",
+              "inheritedFrom": {
+                "name": "Input",
+                "module": "src/components/input/input.component.ts"
+              }
             },
             {
-              "name": "input",
               "type": {
-                "text": "CustomEvent"
+                "text": "EventConstructor"
               },
-              "description": "(React: onInput) This event is dispatched when the select is changed.",
-              "reactName": "onInput"
+              "inheritedFrom": {
+                "name": "Input",
+                "module": "src/components/input/input.component.ts"
+              }
+            }
+          ],
+          "superclass": {
+            "name": "Input",
+            "module": "/src/components/input/input.component"
+          },
+          "tagName": "mdc-searchfield",
+          "jsDoc": "/**\n * `mdc-searchfield` component is used as an input field for search functionality.\n *\n * It supports `mdc-inputchip` as filters.\n *\n * This component is built by extending the `mdc-input` component.\n *\n * @tagname mdc-searchfield\n * \n * @event input - (React: onInput) This event is dispatched when the value of the input field changes (every press).\n * @event change - (React: onChange) This event is dispatched when the value of the input field changes (on blur).\n * @event focus - (React: onFocus) This event is dispatched when the input receives focus.\n * @event blur - (React: onBlur) This event is dispatched when the input loses focus.\n * @event clear - (React: onClear) This event is dispatched when the input text is cleared.\n *\n * @slot filters - Slot for input chips\n */",
+          "customElement": true,
+          "attributes": [
+            {
+              "name": "name",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "description": "Indicates the name of the component group.\nThey are used to group elements in a form together.",
+              "fieldName": "name",
+              "inheritedFrom": {
+                "name": "FormInternalsMixin",
+                "module": "src/utils/mixins/FormInternalsMixin.ts"
+              }
             },
             {
-              "description": "(React: onClick) This event is dispatched when the select is clicked.",
-              "name": "click",
-              "reactName": "onClick"
+              "name": "value",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "description": "Indicates the value of the component group (ex: input, checkbox, radio, select etc...)",
+              "fieldName": "value",
+              "inheritedFrom": {
+                "name": "FormInternalsMixin",
+                "module": "src/utils/mixins/FormInternalsMixin.ts"
+              }
             },
             {
-              "description": "(React: onKeyDown) This event is dispatched when a key is pressed down on the select.",
-              "name": "keydown",
-              "reactName": "onKeyDown"
+              "name": "validation-message",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "Custom validation message that will override the default message and displayed when the input is invalid.\n\nTo display custom validation messages, you must listen for input events (or other relevant events)\non your component and update the `validationMessage` property with the desired message string.\nUpdating this property will ensure that new validation messages are shown to the user.\n- The `validationMessage` property overrides the default browser validation message when set.\n- Consumers are responsible for updating `validationMessage` in response to input or validation state changes.",
+              "fieldName": "validationMessage",
+              "inheritedFrom": {
+                "name": "FormInternalsMixin",
+                "module": "src/utils/mixins/FormInternalsMixin.ts"
+              }
             },
             {
-              "description": "(React: onFocus) This event is dispatched when the select receives focus.",
-              "name": "focus",
-              "reactName": "onFocus"
-            }
-          ],
-          "attributes": [
+              "name": "data-aria-label",
+              "type": {
+                "text": "string | null"
+              },
+              "default": "null",
+              "description": "Defines a string value that labels the current element.\nThe Aria-Label attribute to be set for accessibility.",
+              "fieldName": "dataAriaLabel",
+              "inheritedFrom": {
+                "name": "DataAriaLabelMixin",
+                "module": "src/utils/mixins/DataAriaLabelMixin.ts"
+              }
+            },
             {
               "name": "placeholder",
               "type": {
-                "text": "string | undefined"
+                "text": "string"
               },
-              "description": "The placeholder text which will be shown on the text if provided.",
-              "fieldName": "placeholder"
+              "default": "''",
+              "description": "The placeholder text that is displayed when the input field is empty.",
+              "fieldName": "placeholder",
+              "inheritedFrom": {
+                "name": "Input",
+                "module": "src/components/input/input.component.ts"
+              }
             },
             {
               "name": "readonly",
@@ -31235,84 +31400,173 @@
                 "text": "boolean"
               },
               "default": "false",
-              "description": "readonly attribute of the select field. If true, the select is read-only.",
-              "fieldName": "readonly"
+              "description": "readonly attribute of the input field. If true, the input field is read-only.",
+              "fieldName": "readonly",
+              "inheritedFrom": {
+                "name": "Input",
+                "module": "src/components/input/input.component.ts"
+              }
+            },
+            {
+              "name": "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": "height",
+              "name": "autocomplete",
               "type": {
-                "text": "string"
+                "text": "AutoCompleteType"
               },
-              "default": "'auto'",
-              "description": "height attribute of the select field. If set,\nthen a scroll bar will be visible when there more options than the adjusted height.",
-              "fieldName": "height"
+              "description": "The autocomplete attribute of the input field.",
+              "default": "'off'",
+              "fieldName": "autocomplete",
+              "inheritedFrom": {
+                "name": "Input",
+                "module": "src/components/input/input.component.ts"
+              }
             },
             {
-              "name": "placement",
+              "name": "autofocus",
               "type": {
-                "text": "Placement"
+                "text": "boolean"
               },
-              "description": "The placeholder text which will be shown on the text if provided.",
-              "fieldName": "placement"
+              "default": "false",
+              "description": "If true, the input field is focused when the component is rendered.",
+              "fieldName": "autofocus",
+              "inheritedFrom": {
+                "name": "Input",
+                "module": "src/components/input/input.component.ts"
+              }
             },
             {
-              "name": "soft-disabled",
+              "name": "dirname",
               "type": {
-                "text": "boolean | undefined"
+                "text": "string | undefined"
               },
-              "description": "Indicates whether the select is soft disabled.\nWhen set to `true`, the select appears visually disabled but still allows\nfocus.",
-              "default": "undefined",
-              "fieldName": "softDisabled"
+              "description": "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": "name",
+              "name": "pattern",
               "type": {
-                "text": "string"
+                "text": "string | undefined"
               },
-              "default": "''",
-              "description": "Indicates the name of the component group.\nThey are used to group elements in a form together.",
-              "fieldName": "name",
+              "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": "FormInternalsMixin",
-                "module": "src/utils/mixins/FormInternalsMixin.ts"
+                "name": "Input",
+                "module": "src/components/input/input.component.ts"
               }
             },
             {
-              "name": "value",
+              "name": "list",
               "type": {
-                "text": "string"
+                "text": "string | undefined"
               },
-              "default": "''",
-              "description": "Indicates the value of the component group (ex: input, checkbox, radio, select etc...)",
-              "fieldName": "value",
+              "description": "The list attribute of the input field.\nIdentifies a list of pre-defined options to suggest to the user.",
+              "fieldName": "list",
               "inheritedFrom": {
-                "name": "FormInternalsMixin",
-                "module": "src/utils/mixins/FormInternalsMixin.ts"
+                "name": "Input",
+                "module": "src/components/input/input.component.ts"
               }
             },
             {
-              "name": "validation-message",
+              "name": "size",
               "type": {
-                "text": "string | undefined"
+                "text": "number | undefined | undefined"
               },
-              "description": "Custom validation message that will override the default message and displayed when the input is invalid.\n\nTo display custom validation messages, you must listen for input events (or other relevant events)\non your component and update the `validationMessage` property with the desired message string.\nUpdating this property will ensure that new validation messages are shown to the user.\n- The `validationMessage` property overrides the default browser validation message when set.\n- Consumers are responsible for updating `validationMessage` in response to input or validation state changes.",
-              "fieldName": "validationMessage",
+              "description": "The size attribute of the input field.\nSpecifies the width of the input field.",
+              "default": "undefined",
+              "fieldName": "size",
               "inheritedFrom": {
-                "name": "FormInternalsMixin",
-                "module": "src/utils/mixins/FormInternalsMixin.ts"
+                "name": "Input",
+                "module": "src/components/input/input.component.ts"
               }
             },
             {
-              "name": "data-aria-label",
+              "name": "clear-aria-label",
               "type": {
-                "text": "string | null"
+                "text": "string"
               },
-              "default": "null",
-              "description": "Defines a string value that labels the current element.\nThe Aria-Label attribute to be set for accessibility.",
-              "fieldName": "dataAriaLabel",
+              "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": "DataAriaLabelMixin",
-                "module": "src/utils/mixins/DataAriaLabelMixin.ts"
+                "name": "Input",
+                "module": "src/components/input/input.component.ts"
               }
             },
             {
@@ -31428,1045 +31682,904 @@
               }
             }
           ],
-          "mixins": [
-            {
-              "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 * The component ensures accessibility and usability while handling various use cases,\n * including long text truncation with tooltip support.\n *\n * Every mdc-option should have a `value` attribute set to ensure proper form submission.\n *\n * To set a default option, use the `selected` attribute on the `mdc-option` element.\n *\n * **Note:** Make sure to add `mdc-selectlistbox` as a child of `mdc-select` and wrap options/optgroup in it to ensure proper accessibility functionality. Read more about it in SelectListBox documentation.\n *\n * @dependency mdc-button\n * @dependency mdc-icon\n * @dependency mdc-popover\n * @dependency mdc-text\n * @dependency mdc-toggletip\n *\n * @tagname mdc-select\n *\n * @slot default - This is a default/unnamed slot for Selectlistbox including options and/or option group.\n *\n * @event click - (React: onClick) This event is dispatched when the select is clicked.\n * @event change - (React: onChange) This event is dispatched when the select is changed.\n * @event input - (React: onInput) This event is dispatched when the select is changed.\n * @event keydown - (React: onKeyDown) This event is dispatched when a key is pressed down on the select.\n * @event focus - (React: onFocus) This event is dispatched when the select receives focus.\n */",
-          "customElement": true
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "default",
-          "declaration": {
-            "name": "Select",
-            "module": "components/select/select.component.js"
-          }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "components/searchfield/searchfield.component.js",
-      "declarations": [
-        {
-          "kind": "class",
-          "description": "`mdc-searchfield` component is used as an input field for search functionality.\n\nIt supports `mdc-inputchip` as filters.\n\nThis component is built by extending the `mdc-input` component.",
-          "name": "Searchfield",
-          "slots": [
-            {
-              "description": "Slot for input chips",
-              "name": "filters"
-            }
-          ],
-          "members": [
-            {
-              "kind": "field",
-              "name": "inputChips",
-              "type": {
-                "text": "Array<HTMLElement> | undefined"
-              }
-            },
+          "cssProperties": [
             {
-              "kind": "method",
-              "name": "handleKeyDown",
-              "privacy": "protected",
-              "parameters": [
-                {
-                  "name": "event",
-                  "type": {
-                    "text": "KeyboardEvent"
-                  },
-                  "description": "Keyboard event"
-                }
-              ],
-              "description": "Handles the keydown event of the search field.\nIf the key pressed is 'Enter', it submits the form.\nIf the key pressed is 'Escape', it clears the input text.",
+              "description": "Border color for the input container when disabled",
+              "name": "--mdc-input-disabled-border-color",
               "inheritedFrom": {
                 "name": "Input",
-                "module": "components/input/input.component.js"
+                "module": "src/components/input/input.component.ts"
               }
             },
             {
-              "kind": "method",
-              "name": "renderInputChips",
-              "privacy": "private",
-              "description": "This method is used to render the input chips inside filters slot.\nIt will remove any elements that are not input chips."
-            },
-            {
-              "kind": "method",
-              "name": "clearInputText",
-              "privacy": "protected",
-              "description": "Clears the input field.",
+              "description": "Text color for the input field when disabled",
+              "name": "--mdc-input-disabled-text-color",
               "inheritedFrom": {
                 "name": "Input",
-                "module": "components/input/input.component.js"
-              }
-            },
-            {
-              "kind": "field",
-              "name": "name",
-              "type": {
-                "text": "string"
-              },
-              "default": "''",
-              "description": "Indicates the name of the component group.\nThey are used to group elements in a form together.",
-              "attribute": "name",
-              "reflects": true,
-              "inheritedFrom": {
-                "name": "FormInternalsMixin",
-                "module": "utils/mixins/FormInternalsMixin.js"
-              }
-            },
-            {
-              "kind": "field",
-              "name": "value",
-              "type": {
-                "text": "string"
-              },
-              "default": "''",
-              "description": "Indicates the value of the component group (ex: input, checkbox, radio, select etc...)",
-              "attribute": "value",
-              "reflects": true,
-              "inheritedFrom": {
-                "name": "FormInternalsMixin",
-                "module": "utils/mixins/FormInternalsMixin.js"
-              }
-            },
-            {
-              "kind": "field",
-              "name": "validationMessage",
-              "type": {
-                "text": "string | undefined"
-              },
-              "description": "Custom validation message that will override the default message and displayed when the input is invalid.\n\nTo display custom validation messages, you must listen for input events (or other relevant events)\non your component and update the `validationMessage` property with the desired message string.\nUpdating this property will ensure that new validation messages are shown to the user.\n- The `validationMessage` property overrides the default browser validation message when set.\n- Consumers are responsible for updating `validationMessage` in response to input or validation state changes.",
-              "attribute": "validation-message",
-              "reflects": true,
-              "inheritedFrom": {
-                "name": "FormInternalsMixin",
-                "module": "utils/mixins/FormInternalsMixin.js"
-              }
-            },
-            {
-              "kind": "field",
-              "name": "validity",
-              "type": {
-                "text": "ValidityState"
-              },
-              "readonly": true,
-              "inheritedFrom": {
-                "name": "FormInternalsMixin",
-                "module": "utils/mixins/FormInternalsMixin.js"
-              }
-            },
-            {
-              "kind": "field",
-              "name": "willValidate",
-              "readonly": true,
-              "inheritedFrom": {
-                "name": "FormInternalsMixin",
-                "module": "utils/mixins/FormInternalsMixin.js"
-              }
-            },
-            {
-              "kind": "method",
-              "name": "setValidity",
-              "description": "Sets the validity of the input field based on the input field's validity.",
-              "return": {
-                "type": {
-                  "text": ""
-                }
-              },
-              "inheritedFrom": {
-                "name": "FormInternalsMixin",
-                "module": "utils/mixins/FormInternalsMixin.js"
+                "module": "src/components/input/input.component.ts"
               }
             },
             {
-              "kind": "method",
-              "name": "checkValidity",
-              "return": {
-                "type": {
-                  "text": "boolean"
-                }
-              },
+              "description": "Background color for the input field when disabled",
+              "name": "--mdc-input-disabled-background-color",
               "inheritedFrom": {
-                "name": "FormInternalsMixin",
-                "module": "utils/mixins/FormInternalsMixin.js"
+                "name": "Input",
+                "module": "src/components/input/input.component.ts"
               }
             },
             {
-              "kind": "method",
-              "name": "reportValidity",
+              "description": "Border color for the input container",
+              "name": "--mdc-input-border-color",
               "inheritedFrom": {
-                "name": "FormInternalsMixin",
-                "module": "utils/mixins/FormInternalsMixin.js"
+                "name": "Input",
+                "module": "src/components/input/input.component.ts"
               }
             },
             {
-              "kind": "field",
-              "name": "dataAriaLabel",
-              "type": {
-                "text": "string | null"
-              },
-              "default": "null",
-              "description": "Defines a string value that labels the current element.\nThe Aria-Label attribute to be set for accessibility.",
-              "attribute": "data-aria-label",
-              "reflects": true,
+              "description": "Text color for the input field",
+              "name": "--mdc-input-text-color",
               "inheritedFrom": {
-                "name": "DataAriaLabelMixin",
-                "module": "utils/mixins/DataAriaLabelMixin.js"
+                "name": "Input",
+                "module": "src/components/input/input.component.ts"
               }
             },
             {
-              "kind": "field",
-              "name": "placeholder",
-              "type": {
-                "text": "string"
-              },
-              "default": "''",
-              "description": "The placeholder text that is displayed when the input field is empty.",
-              "attribute": "placeholder",
+              "description": "Background color for the input field",
+              "name": "--mdc-input-background-color",
               "inheritedFrom": {
                 "name": "Input",
-                "module": "components/input/input.component.js"
+                "module": "src/components/input/input.component.ts"
               }
             },
             {
-              "kind": "field",
-              "name": "readonly",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "readonly attribute of the input field. If true, the input field is read-only.",
-              "attribute": "readonly",
+              "description": "Background color for the selected text",
+              "name": "--mdc-input-selection-background-color",
               "inheritedFrom": {
                 "name": "Input",
-                "module": "components/input/input.component.js"
+                "module": "src/components/input/input.component.ts"
               }
             },
             {
-              "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",
+              "description": "Text color for the selected text",
+              "name": "--mdc-input-selection-text-color",
               "inheritedFrom": {
                 "name": "Input",
-                "module": "components/input/input.component.js"
+                "module": "src/components/input/input.component.ts"
               }
             },
             {
-              "kind": "field",
-              "name": "leadingIcon",
-              "type": {
-                "text": "IconNames | undefined"
-              },
-              "description": "The leading icon that is displayed before the input field.",
-              "attribute": "leading-icon",
+              "description": "Text color for the help text",
+              "name": "--mdc-input-support-text-color",
               "inheritedFrom": {
                 "name": "Input",
-                "module": "components/input/input.component.js"
+                "module": "src/components/input/input.component.ts"
               }
             },
             {
-              "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",
+              "description": "Background color for the input field when hovered",
+              "name": "--mdc-input-hover-background-color",
               "inheritedFrom": {
                 "name": "Input",
-                "module": "components/input/input.component.js"
+                "module": "src/components/input/input.component.ts"
               }
             },
             {
-              "kind": "field",
-              "name": "maxlength",
-              "type": {
-                "text": "number | undefined"
-              },
-              "description": "The maximum number of characters that the input field can accept.",
-              "attribute": "maxlength",
+              "description": "Background color for the input field when focused",
+              "name": "--mdc-input-focused-background-color",
               "inheritedFrom": {
                 "name": "Input",
-                "module": "components/input/input.component.js"
+                "module": "src/components/input/input.component.ts"
               }
             },
             {
-              "kind": "field",
-              "name": "minlength",
-              "type": {
-                "text": "number | undefined"
-              },
-              "description": "The minimum number of characters that the input field can accept.",
-              "attribute": "minlength",
+              "description": "Border color for the input container when focused",
+              "name": "--mdc-input-focused-border-color",
               "inheritedFrom": {
                 "name": "Input",
-                "module": "components/input/input.component.js"
+                "module": "src/components/input/input.component.ts"
               }
             },
             {
-              "kind": "field",
-              "name": "autocapitalize",
-              "type": {
-                "text": "AutoCapitalizeType"
-              },
-              "description": "The autocapitalize attribute of the input field.",
-              "default": "'off'",
-              "attribute": "autocapitalize",
+              "description": "Border color for the input container when error",
+              "name": "--mdc-input-error-border-color",
               "inheritedFrom": {
                 "name": "Input",
-                "module": "components/input/input.component.js"
+                "module": "src/components/input/input.component.ts"
               }
             },
             {
-              "kind": "field",
-              "name": "autocomplete",
-              "type": {
-                "text": "AutoCompleteType"
-              },
-              "description": "The autocomplete attribute of the input field.",
-              "default": "'off'",
-              "attribute": "autocomplete",
+              "description": "Border color for the input container when warning",
+              "name": "--mdc-input-warning-border-color",
               "inheritedFrom": {
                 "name": "Input",
-                "module": "components/input/input.component.js"
+                "module": "src/components/input/input.component.ts"
               }
             },
             {
-              "kind": "field",
-              "name": "autofocus",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "If true, the input field is focused when the component is rendered.",
-              "attribute": "autofocus",
+              "description": "Border color for the input container when success",
+              "name": "--mdc-input-success-border-color",
               "inheritedFrom": {
                 "name": "Input",
-                "module": "components/input/input.component.js"
+                "module": "src/components/input/input.component.ts"
               }
             },
+            {
+              "description": "Border color for the input container when primary",
+              "name": "--mdc-input-primary-border-color",
+              "inheritedFrom": {
+                "name": "Input",
+                "module": "src/components/input/input.component.ts"
+              }
+            }
+          ]
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "default",
+          "declaration": {
+            "name": "Searchfield",
+            "module": "components/searchfield/searchfield.component.js"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "components/select/select.component.js",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "The mdc-select component is a dropdown selection control that allows users to pick an option from a predefined list.\nIt is designed to work with `mdc-option` for individual options and `mdc-optgroup` for grouping related options.\nThe component ensures accessibility and usability while handling various use cases,\nincluding long text truncation with tooltip support.\n\nEvery mdc-option should have a `value` attribute set to ensure proper form submission.\n\nTo set a default option, use the `selected` attribute on the `mdc-option` element.\n\n**Note:** Make sure to add `mdc-selectlistbox` as a child of `mdc-select` and wrap options/optgroup in it to ensure proper accessibility functionality. Read more about it in SelectListBox documentation.",
+          "name": "Select",
+          "slots": [
+            {
+              "description": "This is a default/unnamed slot for Selectlistbox including options and/or option group.",
+              "name": "default"
+            }
+          ],
+          "members": [
             {
               "kind": "field",
-              "name": "dirname",
+              "name": "placeholder",
               "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"
-              }
+              "description": "The placeholder text which will be shown on the text if provided.",
+              "attribute": "placeholder"
             },
             {
               "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",
-              "inheritedFrom": {
-                "name": "Input",
-                "module": "components/input/input.component.js"
-              }
+              "default": "false",
+              "description": "readonly attribute of the select field. If true, the select is read-only.",
+              "attribute": "readonly"
             },
             {
               "kind": "field",
-              "name": "list",
+              "name": "height",
               "type": {
-                "text": "string | undefined"
+                "text": "string"
               },
-              "description": "The list attribute of the input field.\nIdentifies a list of pre-defined options to suggest to the user.",
-              "attribute": "list",
-              "inheritedFrom": {
-                "name": "Input",
-                "module": "components/input/input.component.js"
-              }
+              "default": "'auto'",
+              "description": "height attribute of the select field. If set,\nthen a scroll bar will be visible when there more options than the adjusted height.",
+              "attribute": "height"
             },
             {
               "kind": "field",
-              "name": "size",
+              "name": "placement",
               "type": {
-                "text": "number | undefined | undefined"
+                "text": "Placement"
               },
-              "description": "The size attribute of the input field.\nSpecifies the width of the input field.",
+              "description": "The placeholder text which will be shown on the text if provided.",
+              "attribute": "placement",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "softDisabled",
+              "type": {
+                "text": "boolean | undefined"
+              },
+              "description": "Indicates whether the select is soft disabled.\nWhen set to `true`, the select appears visually disabled but still allows\nfocus.",
               "default": "undefined",
-              "attribute": "size",
-              "inheritedFrom": {
-                "name": "Input",
-                "module": "components/input/input.component.js"
+              "attribute": "soft-disabled"
+            },
+            {
+              "kind": "method",
+              "name": "getAllValidOptions",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "Array<Option>"
+                }
               }
             },
             {
-              "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": "getFirstValidOption",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "Option | null"
+                }
               }
             },
             {
               "kind": "method",
-              "name": "setInputValidity",
+              "name": "getLastValidOption",
               "privacy": "private",
-              "inheritedFrom": {
-                "name": "Input",
-                "module": "components/input/input.component.js"
+              "return": {
+                "type": {
+                  "text": "Option | null"
+                }
               }
             },
             {
               "kind": "method",
-              "name": "updateValue",
+              "name": "getFirstSelectedOption",
               "privacy": "private",
-              "description": "Updates the value of the input field.\nSets the form value.",
               "return": {
                 "type": {
-                  "text": ""
+                  "text": "Option | null"
                 }
-              },
-              "inheritedFrom": {
-                "name": "Input",
-                "module": "components/input/input.component.js"
               }
             },
             {
               "kind": "method",
-              "name": "onInput",
+              "name": "modifyListBoxWrapper",
               "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"
-              }
+              "description": "Modifies the listbox wrapper to ensure it has the correct attributes\nand IDs for accessibility.\n\nOnce [ariaOwnsElements](https://developer.mozilla.org/en-US/docs/Web/API/ElementInternals/ariaOwnsElements) is supported in browsers,\nthis an be removed and mdc-option can be used directly in the select component with a listbox in a different\nshadow root and aria-owns attribute to connect them."
             },
             {
               "kind": "method",
-              "name": "onChange",
+              "name": "handleOptionsClick",
               "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
               "parameters": [
                 {
                   "name": "event",
                   "type": {
-                    "text": "Event"
+                    "text": "MouseEvent"
                   },
-                  "description": "Event which contains information about the value change."
+                  "description": "The event which triggered this function."
                 }
               ],
-              "description": "Handles the change event of the input field.\nUpdates the value and sets the validity of the input field.\n\nThe 'change' event does not bubble up through the shadow DOM as it was not composed.\nTherefore, we need to re-dispatch the same event to ensure it is propagated correctly.\nRead more: https://developer.mozilla.org/en-US/docs/Web/API/Event/composed",
-              "inheritedFrom": {
-                "name": "Input",
-                "module": "components/input/input.component.js"
-              }
+              "description": "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": "renderLeadingIcon",
-              "privacy": "protected",
-              "description": "Renders the leading icon before the input field.\nIf the leading icon is not set, it will not be displayed.",
+              "name": "setSelectedOption",
+              "privacy": "private",
               "return": {
                 "type": {
-                  "text": ""
+                  "text": "void"
                 }
               },
-              "inheritedFrom": {
-                "name": "Input",
-                "module": "components/input/input.component.js"
-              }
+              "parameters": [
+                {
+                  "name": "option",
+                  "type": {
+                    "text": "Option | null"
+                  },
+                  "description": "The option element in DOM which gets selected."
+                }
+              ],
+              "description": "Sets the selected option in the component state and updates the input element's value.\nThis method ensures that only the selected option is marked as selected in the DOM,\nand updates the tabindex for all options accordingly.\nIt also updates the validity of the input element based on the selected option.\nThis method is called when an option is selected."
             },
             {
               "kind": "method",
-              "name": "renderPrefixText",
-              "privacy": "protected",
-              "description": "Renders the prefix text before the input field.\nIf the prefix text is more than 10 characters,\n- it will not be displayed.\n- the validation messsage will be displayed.\n\n Note: We are setting aria-hidden so that the screen reader does not read the prefix text.\n The consumers should set the appropriate aria-label for the input field using 'data-aria-label' attribute.",
+              "name": "updateTabIndexForAllOptions",
+              "privacy": "private",
               "return": {
                 "type": {
-                  "text": ""
+                  "text": "void"
                 }
               },
-              "inheritedFrom": {
-                "name": "Input",
-                "module": "components/input/input.component.js"
-              }
+              "parameters": [
+                {
+                  "name": "option",
+                  "optional": true,
+                  "type": {
+                    "text": "Option | null"
+                  },
+                  "description": "The option which tabIndex should be set to 0."
+                }
+              ],
+              "description": "Updates the tabindex of all options.\nSets the tabindex of the selected option to '0' and others to '-1'."
             },
             {
               "kind": "method",
-              "name": "renderTrailingButton",
-              "privacy": "protected",
+              "name": "updateSelectedInChildOptions",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
               "parameters": [
                 {
-                  "name": "show",
-                  "default": "false"
+                  "name": "selectedOption",
+                  "type": {
+                    "text": "Option | null"
+                  },
+                  "description": "The option which gets selected"
                 }
               ],
-              "description": "Renders the trailing button to clear the input field if the trailingButton is set to true.",
+              "description": "Sets selected attribute on the selected option and removes it from all options"
+            },
+            {
+              "kind": "method",
+              "name": "fireEvents",
+              "privacy": "private",
               "return": {
                 "type": {
-                  "text": ""
+                  "text": "void"
                 }
               },
-              "inheritedFrom": {
-                "name": "Input",
-                "module": "components/input/input.component.js"
-              }
+              "description": "A private method which is called to fire the change and input events.\nIt dispatches the input and change events with the selected option's value and label."
             },
             {
               "kind": "method",
-              "name": "renderInputElement",
-              "privacy": "protected",
+              "name": "dispatchChange",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
               "parameters": [
                 {
-                  "name": "type",
+                  "name": "option",
                   "type": {
-                    "text": "InputType"
+                    "text": "Option"
                   }
-                },
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "dispatchInput",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "parameters": [
                 {
-                  "name": "hidePlaceholder",
-                  "default": "false"
+                  "name": "option",
+                  "type": {
+                    "text": "Option"
+                  }
                 }
-              ],
-              "inheritedFrom": {
-                "name": "Input",
-                "module": "components/input/input.component.js"
-              }
+              ]
             },
             {
-              "kind": "field",
-              "name": "disabled",
-              "type": {
-                "text": "boolean | undefined"
+              "kind": "method",
+              "name": "handleClickCombobox",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
               },
-              "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"
-              }
+              "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": "field",
-              "name": "label",
-              "type": {
-                "text": "string | undefined"
+              "kind": "method",
+              "name": "handleKeydownCombobox",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
               },
-              "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"
-              }
+              "parameters": [
+                {
+                  "name": "event",
+                  "type": {
+                    "text": "KeyboardEvent"
+                  },
+                  "description": "The keyboard event."
+                }
+              ],
+              "description": "Handles the keydown event on the select element when the popover is closed.\nThe options are as follows:\n- ARROW_DOWN, ARROW_UP, SPACE: Opens the popover and prevents the default scrolling behavior.\n- ENTER: Opens the popover, prevents default scrolling, and submits the form if the popover is closed.\n- HOME: Opens the popover and sets focus and tabindex on the first option.\n- END: Opens the popover and sets focus and tabindex on the last option."
             },
             {
-              "kind": "field",
-              "name": "required",
-              "type": {
-                "text": "boolean"
+              "kind": "method",
+              "name": "handlePopoverKeydown",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
               },
-              "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"
-              }
+              "parameters": [
+                {
+                  "name": "event",
+                  "type": {
+                    "text": "KeyboardEvent"
+                  },
+                  "description": "The keyboard event."
+                }
+              ],
+              "description": "Handles the keydown event on the select element when the popover is open.\nThe options are as follows:\n- HOME: Sets focus and tabindex on the first option.\n- END: Sets focus and tabindex on the last option.\n- ARROW_DOWN, ARROW_UP, PAGE_DOWN, PAGE_UP: Handles navigation between options."
             },
             {
-              "kind": "field",
-              "name": "id",
-              "type": {
-                "text": "string"
+              "kind": "method",
+              "name": "updateState",
+              "privacy": "public",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
               },
-              "default": "''",
-              "description": "The unique id of the input field. It is used to link the input field with the label.",
-              "attribute": "id",
-              "inheritedFrom": {
-                "name": "FormfieldWrapper",
-                "module": "components/formfieldwrapper/formfieldwrapper.component.js"
-              }
+              "description": "Updates the state of the select component.\nThis public method should be fired when the selected on the option components is updated from the outside.\nIt ensures that the selected attribute is set correctly on the options\nand that the aria-selected attribute is updated accordingly."
             },
             {
               "kind": "field",
-              "name": "helpTextType",
+              "name": "name",
               "type": {
-                "text": "ValidationType"
+                "text": "string"
               },
-              "description": "The type of help text. It can be 'default', 'error', 'warning', 'success', 'priority'.",
-              "attribute": "help-text-type",
+              "default": "''",
+              "description": "Indicates the name of the component group.\nThey are used to group elements in a form together.",
+              "attribute": "name",
               "reflects": true,
               "inheritedFrom": {
-                "name": "FormfieldWrapper",
-                "module": "components/formfieldwrapper/formfieldwrapper.component.js"
+                "name": "FormInternalsMixin",
+                "module": "utils/mixins/FormInternalsMixin.js"
               }
             },
             {
               "kind": "field",
-              "name": "helpText",
+              "name": "value",
               "type": {
-                "text": "string | undefined"
+                "text": "string"
               },
-              "description": "The help text that is displayed below the input field.",
-              "attribute": "help-text",
+              "default": "''",
+              "description": "Indicates the value of the component group (ex: input, checkbox, radio, select etc...)",
+              "attribute": "value",
               "reflects": true,
               "inheritedFrom": {
-                "name": "FormfieldWrapper",
-                "module": "components/formfieldwrapper/formfieldwrapper.component.js"
+                "name": "FormInternalsMixin",
+                "module": "utils/mixins/FormInternalsMixin.js"
               }
             },
             {
               "kind": "field",
-              "name": "toggletipText",
+              "name": "validationMessage",
               "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",
+              "description": "Custom validation message that will override the default message and displayed when the input is invalid.\n\nTo display custom validation messages, you must listen for input events (or other relevant events)\non your component and update the `validationMessage` property with the desired message string.\nUpdating this property will ensure that new validation messages are shown to the user.\n- The `validationMessage` property overrides the default browser validation message when set.\n- Consumers are responsible for updating `validationMessage` in response to input or validation state changes.",
+              "attribute": "validation-message",
               "reflects": true,
               "inheritedFrom": {
-                "name": "FormfieldWrapper",
-                "module": "components/formfieldwrapper/formfieldwrapper.component.js"
+                "name": "FormInternalsMixin",
+                "module": "utils/mixins/FormInternalsMixin.js"
               }
             },
             {
               "kind": "field",
-              "name": "toggletipPlacement",
+              "name": "validity",
               "type": {
-                "text": "PopoverPlacement"
+                "text": "ValidityState"
               },
-              "description": "The placement of the toggletip that is displayed when the info icon is hovered.",
-              "default": "'top'",
-              "attribute": "toggletip-placement",
-              "reflects": true,
+              "readonly": true,
               "inheritedFrom": {
-                "name": "FormfieldWrapper",
-                "module": "components/formfieldwrapper/formfieldwrapper.component.js"
+                "name": "FormInternalsMixin",
+                "module": "utils/mixins/FormInternalsMixin.js"
               }
             },
             {
               "kind": "field",
-              "name": "infoIconAriaLabel",
-              "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.",
-              "attribute": "info-icon-aria-label",
-              "reflects": true,
+              "name": "willValidate",
+              "readonly": true,
               "inheritedFrom": {
-                "name": "FormfieldWrapper",
-                "module": "components/formfieldwrapper/formfieldwrapper.component.js"
+                "name": "FormInternalsMixin",
+                "module": "utils/mixins/FormInternalsMixin.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.",
+              "name": "setValidity",
+              "description": "Sets the validity of the input field based on the input field's validity.",
               "return": {
                 "type": {
                   "text": ""
                 }
               },
               "inheritedFrom": {
-                "name": "FormfieldWrapper",
-                "module": "components/formfieldwrapper/formfieldwrapper.component.js"
+                "name": "FormInternalsMixin",
+                "module": "utils/mixins/FormInternalsMixin.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.",
+              "name": "checkValidity",
               "return": {
                 "type": {
-                  "text": ""
+                  "text": "boolean"
                 }
               },
               "inheritedFrom": {
-                "name": "FormfieldWrapper",
-                "module": "components/formfieldwrapper/formfieldwrapper.component.js"
+                "name": "FormInternalsMixin",
+                "module": "utils/mixins/FormInternalsMixin.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": ""
-                }
-              },
+              "name": "reportValidity",
               "inheritedFrom": {
-                "name": "FormfieldWrapper",
-                "module": "components/formfieldwrapper/formfieldwrapper.component.js"
+                "name": "FormInternalsMixin",
+                "module": "utils/mixins/FormInternalsMixin.js"
               }
             },
             {
-              "kind": "method",
-              "name": "renderLabel",
-              "privacy": "protected",
-              "description": "renders the mdc-label-text container that contains the label and labelInfoToggleTip.",
-              "return": {
-                "type": {
-                  "text": ""
-                }
+              "kind": "field",
+              "name": "dataAriaLabel",
+              "type": {
+                "text": "string | null"
               },
+              "default": "null",
+              "description": "Defines a string value that labels the current element.\nThe Aria-Label attribute to be set for accessibility.",
+              "attribute": "data-aria-label",
+              "reflects": true,
               "inheritedFrom": {
-                "name": "FormfieldWrapper",
-                "module": "components/formfieldwrapper/formfieldwrapper.component.js"
+                "name": "DataAriaLabelMixin",
+                "module": "utils/mixins/DataAriaLabelMixin.js"
               }
             },
             {
-              "kind": "method",
-              "name": "renderHelperText",
-              "privacy": "protected",
-              "description": "renders the mdc-help-text container that contains the helpertext icon and helpertext.",
-              "return": {
-                "type": {
-                  "text": ""
-                }
+              "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": [
-            {
-              "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",
+              "kind": "field",
+              "name": "label",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "The label of the input field. It is linked to the input field using the `for` attribute.",
+              "attribute": "label",
+              "reflects": true,
               "inheritedFrom": {
-                "name": "Input",
-                "module": "src/components/input/input.component.ts"
+                "name": "FormfieldWrapper",
+                "module": "components/formfieldwrapper/formfieldwrapper.component.js"
               }
             },
             {
-              "name": "clear",
+              "kind": "field",
+              "name": "required",
               "type": {
-                "text": "CustomEvent"
+                "text": "boolean"
               },
-              "description": "(React: onClear) This event is dispatched when the input text is cleared.",
-              "reactName": "onClear",
+              "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": "src/components/input/input.component.ts"
+                "name": "FormfieldWrapper",
+                "module": "components/formfieldwrapper/formfieldwrapper.component.js"
               }
             },
             {
+              "kind": "field",
+              "name": "id",
               "type": {
-                "text": "EventConstructor"
+                "text": "string"
               },
+              "default": "''",
+              "description": "The unique id of the input field. It is used to link the input field with the label.",
+              "attribute": "id",
               "inheritedFrom": {
-                "name": "Input",
-                "module": "src/components/input/input.component.ts"
+                "name": "FormfieldWrapper",
+                "module": "components/formfieldwrapper/formfieldwrapper.component.js"
               }
-            }
-          ],
-          "superclass": {
-            "name": "Input",
-            "module": "/src/components/input/input.component"
-          },
-          "tagName": "mdc-searchfield",
-          "jsDoc": "/**\n * `mdc-searchfield` component is used as an input field for search functionality.\n *\n * It supports `mdc-inputchip` as filters.\n *\n * This component is built by extending the `mdc-input` component.\n *\n * @tagname mdc-searchfield\n * \n * @event input - (React: onInput) This event is dispatched when the value of the input field changes (every press).\n * @event change - (React: onChange) This event is dispatched when the value of the input field changes (on blur).\n * @event focus - (React: onFocus) This event is dispatched when the input receives focus.\n * @event blur - (React: onBlur) This event is dispatched when the input loses focus.\n * @event clear - (React: onClear) This event is dispatched when the input text is cleared.\n *\n * @slot filters - Slot for input chips\n */",
-          "customElement": true,
-          "attributes": [
+            },
             {
-              "name": "name",
+              "kind": "field",
+              "name": "helpTextType",
               "type": {
-                "text": "string"
+                "text": "ValidationType"
               },
-              "default": "''",
-              "description": "Indicates the name of the component group.\nThey are used to group elements in a form together.",
-              "fieldName": "name",
+              "description": "The type of help text. It can be 'default', 'error', 'warning', 'success', 'priority'.",
+              "attribute": "help-text-type",
+              "reflects": true,
               "inheritedFrom": {
-                "name": "FormInternalsMixin",
-                "module": "src/utils/mixins/FormInternalsMixin.ts"
+                "name": "FormfieldWrapper",
+                "module": "components/formfieldwrapper/formfieldwrapper.component.js"
               }
             },
             {
-              "name": "value",
+              "kind": "field",
+              "name": "helpText",
               "type": {
-                "text": "string"
+                "text": "string | undefined"
               },
-              "default": "''",
-              "description": "Indicates the value of the component group (ex: input, checkbox, radio, select etc...)",
-              "fieldName": "value",
+              "description": "The help text that is displayed below the input field.",
+              "attribute": "help-text",
+              "reflects": true,
               "inheritedFrom": {
-                "name": "FormInternalsMixin",
-                "module": "src/utils/mixins/FormInternalsMixin.ts"
+                "name": "FormfieldWrapper",
+                "module": "components/formfieldwrapper/formfieldwrapper.component.js"
               }
             },
             {
-              "name": "validation-message",
+              "kind": "field",
+              "name": "toggletipText",
               "type": {
                 "text": "string | undefined"
               },
-              "description": "Custom validation message that will override the default message and displayed when the input is invalid.\n\nTo display custom validation messages, you must listen for input events (or other relevant events)\non your component and update the `validationMessage` property with the desired message string.\nUpdating this property will ensure that new validation messages are shown to the user.\n- The `validationMessage` property overrides the default browser validation message when set.\n- Consumers are responsible for updating `validationMessage` in response to input or validation state changes.",
-              "fieldName": "validationMessage",
+              "description": "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": "FormInternalsMixin",
-                "module": "src/utils/mixins/FormInternalsMixin.ts"
+                "name": "FormfieldWrapper",
+                "module": "components/formfieldwrapper/formfieldwrapper.component.js"
               }
             },
             {
-              "name": "data-aria-label",
+              "kind": "field",
+              "name": "toggletipPlacement",
               "type": {
-                "text": "string | null"
+                "text": "PopoverPlacement"
               },
-              "default": "null",
-              "description": "Defines a string value that labels the current element.\nThe Aria-Label attribute to be set for accessibility.",
-              "fieldName": "dataAriaLabel",
+              "description": "The placement of the toggletip that is displayed when the info icon is hovered.",
+              "default": "'top'",
+              "attribute": "toggletip-placement",
+              "reflects": true,
               "inheritedFrom": {
-                "name": "DataAriaLabelMixin",
-                "module": "src/utils/mixins/DataAriaLabelMixin.ts"
+                "name": "FormfieldWrapper",
+                "module": "components/formfieldwrapper/formfieldwrapper.component.js"
               }
             },
             {
-              "name": "placeholder",
+              "kind": "field",
+              "name": "infoIconAriaLabel",
               "type": {
-                "text": "string"
+                "text": "string | undefined"
               },
-              "default": "''",
-              "description": "The placeholder text that is displayed when the input field is empty.",
-              "fieldName": "placeholder",
+              "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": "src/components/input/input.component.ts"
+                "name": "FormfieldWrapper",
+                "module": "components/formfieldwrapper/formfieldwrapper.component.js"
               }
             },
             {
-              "name": "readonly",
-              "type": {
-                "text": "boolean"
+              "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": ""
+                }
               },
-              "default": "false",
-              "description": "readonly attribute of the input field. If true, the input field is read-only.",
-              "fieldName": "readonly",
               "inheritedFrom": {
-                "name": "Input",
-                "module": "src/components/input/input.component.ts"
+                "name": "FormfieldWrapper",
+                "module": "components/formfieldwrapper/formfieldwrapper.component.js"
               }
             },
             {
-              "name": "prefix-text",
-              "type": {
-                "text": "string | undefined"
+              "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": ""
+                }
               },
-              "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": "FormfieldWrapper",
+                "module": "components/formfieldwrapper/formfieldwrapper.component.js"
               }
             },
             {
-              "name": "leading-icon",
-              "type": {
-                "text": "IconNames | undefined"
+              "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": ""
+                }
               },
-              "description": "The leading icon that is displayed before the input field.",
-              "fieldName": "leadingIcon",
               "inheritedFrom": {
-                "name": "Input",
-                "module": "src/components/input/input.component.ts"
+                "name": "FormfieldWrapper",
+                "module": "components/formfieldwrapper/formfieldwrapper.component.js"
               }
             },
             {
-              "name": "trailing-button",
-              "type": {
-                "text": "boolean"
+              "kind": "method",
+              "name": "renderLabel",
+              "privacy": "protected",
+              "description": "renders the mdc-label-text container that contains the label and labelInfoToggleTip.",
+              "return": {
+                "type": {
+                  "text": ""
+                }
               },
-              "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": "FormfieldWrapper",
+                "module": "components/formfieldwrapper/formfieldwrapper.component.js"
               }
             },
             {
-              "name": "maxlength",
-              "type": {
-                "text": "number | undefined"
+              "kind": "method",
+              "name": "renderHelperText",
+              "privacy": "protected",
+              "description": "renders the mdc-help-text container that contains the helpertext icon and helpertext.",
+              "return": {
+                "type": {
+                  "text": ""
+                }
               },
-              "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": "FormfieldWrapper",
+                "module": "components/formfieldwrapper/formfieldwrapper.component.js"
               }
-            },
+            }
+          ],
+          "events": [
             {
-              "name": "minlength",
+              "name": "change",
               "type": {
-                "text": "number | undefined"
+                "text": "CustomEvent"
               },
-              "description": "The minimum number of characters that the input field can accept.",
-              "fieldName": "minlength",
-              "inheritedFrom": {
-                "name": "Input",
-                "module": "src/components/input/input.component.ts"
-              }
+              "description": "(React: onChange) This event is dispatched when the select is changed.",
+              "reactName": "onChange"
             },
             {
-              "name": "autocapitalize",
+              "name": "input",
               "type": {
-                "text": "AutoCapitalizeType"
+                "text": "CustomEvent"
               },
-              "description": "The autocapitalize attribute of the input field.",
-              "default": "'off'",
-              "fieldName": "autocapitalize",
-              "inheritedFrom": {
-                "name": "Input",
-                "module": "src/components/input/input.component.ts"
-              }
+              "description": "(React: onInput) This event is dispatched when the select is changed.",
+              "reactName": "onInput"
             },
             {
-              "name": "autocomplete",
+              "description": "(React: onClick) This event is dispatched when the select is clicked.",
+              "name": "click",
+              "reactName": "onClick"
+            },
+            {
+              "description": "(React: onKeyDown) This event is dispatched when a key is pressed down on the select.",
+              "name": "keydown",
+              "reactName": "onKeyDown"
+            },
+            {
+              "description": "(React: onFocus) This event is dispatched when the select receives focus.",
+              "name": "focus",
+              "reactName": "onFocus"
+            }
+          ],
+          "attributes": [
+            {
+              "name": "placeholder",
               "type": {
-                "text": "AutoCompleteType"
+                "text": "string | undefined"
               },
-              "description": "The autocomplete attribute of the input field.",
-              "default": "'off'",
-              "fieldName": "autocomplete",
-              "inheritedFrom": {
-                "name": "Input",
-                "module": "src/components/input/input.component.ts"
-              }
+              "description": "The placeholder text which will be shown on the text if provided.",
+              "fieldName": "placeholder"
             },
             {
-              "name": "autofocus",
+              "name": "readonly",
               "type": {
                 "text": "boolean"
               },
               "default": "false",
-              "description": "If true, the input field is focused when the component is rendered.",
-              "fieldName": "autofocus",
-              "inheritedFrom": {
-                "name": "Input",
-                "module": "src/components/input/input.component.ts"
-              }
+              "description": "readonly attribute of the select field. If true, the select is read-only.",
+              "fieldName": "readonly"
             },
             {
-              "name": "dirname",
+              "name": "height",
               "type": {
-                "text": "string | undefined"
+                "text": "string"
               },
-              "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"
-              }
+              "default": "'auto'",
+              "description": "height attribute of the select field. If set,\nthen a scroll bar will be visible when there more options than the adjusted height.",
+              "fieldName": "height"
             },
             {
-              "name": "pattern",
+              "name": "placement",
               "type": {
-                "text": "string | undefined"
+                "text": "Placement"
               },
-              "description": "The pattern attribute of the input field.\nSpecifies a regular expression that the input value must match for validation purposes.",
-              "fieldName": "pattern",
+              "description": "The placeholder text which will be shown on the text if provided.",
+              "fieldName": "placement"
+            },
+            {
+              "name": "soft-disabled",
+              "type": {
+                "text": "boolean | undefined"
+              },
+              "description": "Indicates whether the select is soft disabled.\nWhen set to `true`, the select appears visually disabled but still allows\nfocus.",
+              "default": "undefined",
+              "fieldName": "softDisabled"
+            },
+            {
+              "name": "name",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "description": "Indicates the name of the component group.\nThey are used to group elements in a form together.",
+              "fieldName": "name",
               "inheritedFrom": {
-                "name": "Input",
-                "module": "src/components/input/input.component.ts"
+                "name": "FormInternalsMixin",
+                "module": "src/utils/mixins/FormInternalsMixin.ts"
               }
             },
             {
-              "name": "list",
+              "name": "value",
               "type": {
-                "text": "string | undefined"
+                "text": "string"
               },
-              "description": "The list attribute of the input field.\nIdentifies a list of pre-defined options to suggest to the user.",
-              "fieldName": "list",
+              "default": "''",
+              "description": "Indicates the value of the component group (ex: input, checkbox, radio, select etc...)",
+              "fieldName": "value",
               "inheritedFrom": {
-                "name": "Input",
-                "module": "src/components/input/input.component.ts"
+                "name": "FormInternalsMixin",
+                "module": "src/utils/mixins/FormInternalsMixin.ts"
               }
             },
             {
-              "name": "size",
+              "name": "validation-message",
               "type": {
-                "text": "number | undefined | undefined"
+                "text": "string | undefined"
               },
-              "description": "The size attribute of the input field.\nSpecifies the width of the input field.",
-              "default": "undefined",
-              "fieldName": "size",
+              "description": "Custom validation message that will override the default message and displayed when the input is invalid.\n\nTo display custom validation messages, you must listen for input events (or other relevant events)\non your component and update the `validationMessage` property with the desired message string.\nUpdating this property will ensure that new validation messages are shown to the user.\n- The `validationMessage` property overrides the default browser validation message when set.\n- Consumers are responsible for updating `validationMessage` in response to input or validation state changes.",
+              "fieldName": "validationMessage",
               "inheritedFrom": {
-                "name": "Input",
-                "module": "src/components/input/input.component.ts"
+                "name": "FormInternalsMixin",
+                "module": "src/utils/mixins/FormInternalsMixin.ts"
               }
             },
             {
-              "name": "clear-aria-label",
+              "name": "data-aria-label",
               "type": {
-                "text": "string"
+                "text": "string | null"
               },
-              "default": "''",
-              "description": "Aria label for the trailing button. If trailing button is set to true, this label is used for the clear button.",
-              "fieldName": "clearAriaLabel",
+              "default": "null",
+              "description": "Defines a string value that labels the current element.\nThe Aria-Label attribute to be set for accessibility.",
+              "fieldName": "dataAriaLabel",
               "inheritedFrom": {
-                "name": "Input",
-                "module": "src/components/input/input.component.ts"
+                "name": "DataAriaLabelMixin",
+                "module": "src/utils/mixins/DataAriaLabelMixin.ts"
               }
             },
             {
@@ -32582,136 +32695,23 @@
               }
             }
           ],
-          "cssProperties": [
-            {
-              "description": "Border color for the input container when disabled",
-              "name": "--mdc-input-disabled-border-color",
-              "inheritedFrom": {
-                "name": "Input",
-                "module": "src/components/input/input.component.ts"
-              }
-            },
-            {
-              "description": "Text color for the input field when disabled",
-              "name": "--mdc-input-disabled-text-color",
-              "inheritedFrom": {
-                "name": "Input",
-                "module": "src/components/input/input.component.ts"
-              }
-            },
-            {
-              "description": "Background color for the input field when disabled",
-              "name": "--mdc-input-disabled-background-color",
-              "inheritedFrom": {
-                "name": "Input",
-                "module": "src/components/input/input.component.ts"
-              }
-            },
-            {
-              "description": "Border color for the input container",
-              "name": "--mdc-input-border-color",
-              "inheritedFrom": {
-                "name": "Input",
-                "module": "src/components/input/input.component.ts"
-              }
-            },
-            {
-              "description": "Text color for the input field",
-              "name": "--mdc-input-text-color",
-              "inheritedFrom": {
-                "name": "Input",
-                "module": "src/components/input/input.component.ts"
-              }
-            },
-            {
-              "description": "Background color for the input field",
-              "name": "--mdc-input-background-color",
-              "inheritedFrom": {
-                "name": "Input",
-                "module": "src/components/input/input.component.ts"
-              }
-            },
-            {
-              "description": "Background color for the selected text",
-              "name": "--mdc-input-selection-background-color",
-              "inheritedFrom": {
-                "name": "Input",
-                "module": "src/components/input/input.component.ts"
-              }
-            },
-            {
-              "description": "Text color for the selected text",
-              "name": "--mdc-input-selection-text-color",
-              "inheritedFrom": {
-                "name": "Input",
-                "module": "src/components/input/input.component.ts"
-              }
-            },
-            {
-              "description": "Text color for the help text",
-              "name": "--mdc-input-support-text-color",
-              "inheritedFrom": {
-                "name": "Input",
-                "module": "src/components/input/input.component.ts"
-              }
-            },
-            {
-              "description": "Background color for the input field when hovered",
-              "name": "--mdc-input-hover-background-color",
-              "inheritedFrom": {
-                "name": "Input",
-                "module": "src/components/input/input.component.ts"
-              }
-            },
-            {
-              "description": "Background color for the input field when focused",
-              "name": "--mdc-input-focused-background-color",
-              "inheritedFrom": {
-                "name": "Input",
-                "module": "src/components/input/input.component.ts"
-              }
-            },
-            {
-              "description": "Border color for the input container when focused",
-              "name": "--mdc-input-focused-border-color",
-              "inheritedFrom": {
-                "name": "Input",
-                "module": "src/components/input/input.component.ts"
-              }
-            },
-            {
-              "description": "Border color for the input container when error",
-              "name": "--mdc-input-error-border-color",
-              "inheritedFrom": {
-                "name": "Input",
-                "module": "src/components/input/input.component.ts"
-              }
-            },
-            {
-              "description": "Border color for the input container when warning",
-              "name": "--mdc-input-warning-border-color",
-              "inheritedFrom": {
-                "name": "Input",
-                "module": "src/components/input/input.component.ts"
-              }
-            },
+          "mixins": [
             {
-              "description": "Border color for the input container when success",
-              "name": "--mdc-input-success-border-color",
-              "inheritedFrom": {
-                "name": "Input",
-                "module": "src/components/input/input.component.ts"
-              }
+              "name": "FormInternalsMixin",
+              "module": "/src/utils/mixins/FormInternalsMixin"
             },
             {
-              "description": "Border color for the input container when primary",
-              "name": "--mdc-input-primary-border-color",
-              "inheritedFrom": {
-                "name": "Input",
-                "module": "src/components/input/input.component.ts"
-              }
+              "name": "DataAriaLabelMixin",
+              "module": "/src/utils/mixins/DataAriaLabelMixin"
             }
-          ]
+          ],
+          "superclass": {
+            "name": "FormfieldWrapper",
+            "module": "/src/components/formfieldwrapper/formfieldwrapper.component"
+          },
+          "tagName": "mdc-select",
+          "jsDoc": "/**\n * The mdc-select component is a dropdown selection control that allows users to pick an option from a predefined list.\n * It is designed to work with `mdc-option` for individual options and `mdc-optgroup` for grouping related options.\n * The component ensures accessibility and usability while handling various use cases,\n * including long text truncation with tooltip support.\n *\n * Every mdc-option should have a `value` attribute set to ensure proper form submission.\n *\n * To set a default option, use the `selected` attribute on the `mdc-option` element.\n *\n * **Note:** Make sure to add `mdc-selectlistbox` as a child of `mdc-select` and wrap options/optgroup in it to ensure proper accessibility functionality. Read more about it in SelectListBox documentation.\n *\n * @dependency mdc-button\n * @dependency mdc-icon\n * @dependency mdc-popover\n * @dependency mdc-text\n * @dependency mdc-toggletip\n *\n * @tagname mdc-select\n *\n * @slot default - This is a default/unnamed slot for Selectlistbox including options and/or option group.\n *\n * @event click - (React: onClick) This event is dispatched when the select is clicked.\n * @event change - (React: onChange) This event is dispatched when the select is changed.\n * @event input - (React: onInput) This event is dispatched when the select is changed.\n * @event keydown - (React: onKeyDown) This event is dispatched when a key is pressed down on the select.\n * @event focus - (React: onFocus) This event is dispatched when the select receives focus.\n */",
+          "customElement": true
         }
       ],
       "exports": [
@@ -32719,8 +32719,8 @@
           "kind": "js",
           "name": "default",
           "declaration": {
-            "name": "Searchfield",
-            "module": "components/searchfield/searchfield.component.js"
+            "name": "Select",
+            "module": "components/select/select.component.js"
           }
         }
       ]
@@ -32759,8 +32759,90 @@
           "kind": "js",
           "name": "default",
           "declaration": {
-            "name": "Selectlistbox",
-            "module": "components/selectlistbox/selectlistbox.component.js"
+            "name": "Selectlistbox",
+            "module": "components/selectlistbox/selectlistbox.component.js"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "components/skeleton/skeleton.component.js",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "`mdc-skeleton` is a component that shows a grey placeholder area.\nIt provides visual feedback to users that content is being loaded.\n\n**Skeleton Variants:**\n- **rectangular**: Default variant with 0.25rem border radius\n- **rounded**: Has 0.5rem border radius\n- **circular**: Has 50% border radius for circular shapes\n- **button**: Optimized for button placeholders with 1.25rem border radius\n\n**Sizing Behavior:**\n1. If wrapping content, takes dimensions of wrapped content\n2. Otherwise grows to fill parent container",
+          "name": "Skeleton",
+          "cssProperties": [
+            {
+              "description": "background color of the skeleton",
+              "name": "--mdc-skeleton-background-color"
+            },
+            {
+              "description": "height of the skeleton",
+              "name": "--mdc-skeleton-height"
+            },
+            {
+              "description": "width of the skeleton",
+              "name": "--mdc-skeleton-width"
+            }
+          ],
+          "slots": [
+            {
+              "description": "Content to wrap (optional). When provided, skeleton takes dimensions of this content.",
+              "name": ""
+            }
+          ],
+          "members": [
+            {
+              "kind": "field",
+              "name": "variant",
+              "type": {
+                "text": "SkeletonVariant"
+              },
+              "description": "The variant of skeleton to display\n- **rectangular**: Default rectangular shape with 0.25rem border radius\n- **rounded**: Rounded rectangle with 0.5rem border radius\n- **circular**: Circular shape with 50% border radius\n- **button**: Button placeholder with 1.25rem border radius",
+              "default": "rectangular",
+              "attribute": "variant",
+              "reflects": true
+            },
+            {
+              "kind": "method",
+              "name": "checkSlotContent",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              }
+            }
+          ],
+          "attributes": [
+            {
+              "name": "variant",
+              "type": {
+                "text": "SkeletonVariant"
+              },
+              "description": "The variant of skeleton to display\n- **rectangular**: Default rectangular shape with 0.25rem border radius\n- **rounded**: Rounded rectangle with 0.5rem border radius\n- **circular**: Circular shape with 50% border radius\n- **button**: Button placeholder with 1.25rem border radius",
+              "default": "rectangular",
+              "fieldName": "variant"
+            }
+          ],
+          "superclass": {
+            "name": "Component",
+            "module": "/src/models"
+          },
+          "tagName": "mdc-skeleton",
+          "jsDoc": "/**\n * `mdc-skeleton` is a component that shows a grey placeholder area.\n * It provides visual feedback to users that content is being loaded.\n *\n * **Skeleton Variants:**\n * - **rectangular**: Default variant with 0.25rem border radius\n * - **rounded**: Has 0.5rem border radius\n * - **circular**: Has 50% border radius for circular shapes\n * - **button**: Optimized for button placeholders with 1.25rem border radius\n *\n * **Sizing Behavior:**\n * 1. If wrapping content, takes dimensions of wrapped content\n * 2. Otherwise grows to fill parent container\n *\n * @tagname mdc-skeleton\n *\n * @slot - Content to wrap (optional). When provided, skeleton takes dimensions of this content.\n *\n * @cssproperty --mdc-skeleton-background-color - background color of the skeleton\n * @cssproperty --mdc-skeleton-height - height of the skeleton\n * @cssproperty --mdc-skeleton-width - width of the skeleton\n */",
+          "customElement": true
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "default",
+          "declaration": {
+            "name": "Skeleton",
+            "module": "components/skeleton/skeleton.component.js"
           }
         }
       ]
@@ -32952,88 +33034,6 @@
         }
       ]
     },
-    {
-      "kind": "javascript-module",
-      "path": "components/skeleton/skeleton.component.js",
-      "declarations": [
-        {
-          "kind": "class",
-          "description": "`mdc-skeleton` is a component that shows a grey placeholder area.\nIt provides visual feedback to users that content is being loaded.\n\n**Skeleton Variants:**\n- **rectangular**: Default variant with 0.25rem border radius\n- **rounded**: Has 0.5rem border radius\n- **circular**: Has 50% border radius for circular shapes\n- **button**: Optimized for button placeholders with 1.25rem border radius\n\n**Sizing Behavior:**\n1. If wrapping content, takes dimensions of wrapped content\n2. Otherwise grows to fill parent container",
-          "name": "Skeleton",
-          "cssProperties": [
-            {
-              "description": "background color of the skeleton",
-              "name": "--mdc-skeleton-background-color"
-            },
-            {
-              "description": "height of the skeleton",
-              "name": "--mdc-skeleton-height"
-            },
-            {
-              "description": "width of the skeleton",
-              "name": "--mdc-skeleton-width"
-            }
-          ],
-          "slots": [
-            {
-              "description": "Content to wrap (optional). When provided, skeleton takes dimensions of this content.",
-              "name": ""
-            }
-          ],
-          "members": [
-            {
-              "kind": "field",
-              "name": "variant",
-              "type": {
-                "text": "SkeletonVariant"
-              },
-              "description": "The variant of skeleton to display\n- **rectangular**: Default rectangular shape with 0.25rem border radius\n- **rounded**: Rounded rectangle with 0.5rem border radius\n- **circular**: Circular shape with 50% border radius\n- **button**: Button placeholder with 1.25rem border radius",
-              "default": "rectangular",
-              "attribute": "variant",
-              "reflects": true
-            },
-            {
-              "kind": "method",
-              "name": "checkSlotContent",
-              "privacy": "private",
-              "return": {
-                "type": {
-                  "text": "void"
-                }
-              }
-            }
-          ],
-          "attributes": [
-            {
-              "name": "variant",
-              "type": {
-                "text": "SkeletonVariant"
-              },
-              "description": "The variant of skeleton to display\n- **rectangular**: Default rectangular shape with 0.25rem border radius\n- **rounded**: Rounded rectangle with 0.5rem border radius\n- **circular**: Circular shape with 50% border radius\n- **button**: Button placeholder with 1.25rem border radius",
-              "default": "rectangular",
-              "fieldName": "variant"
-            }
-          ],
-          "superclass": {
-            "name": "Component",
-            "module": "/src/models"
-          },
-          "tagName": "mdc-skeleton",
-          "jsDoc": "/**\n * `mdc-skeleton` is a component that shows a grey placeholder area.\n * It provides visual feedback to users that content is being loaded.\n *\n * **Skeleton Variants:**\n * - **rectangular**: Default variant with 0.25rem border radius\n * - **rounded**: Has 0.5rem border radius\n * - **circular**: Has 50% border radius for circular shapes\n * - **button**: Optimized for button placeholders with 1.25rem border radius\n *\n * **Sizing Behavior:**\n * 1. If wrapping content, takes dimensions of wrapped content\n * 2. Otherwise grows to fill parent container\n *\n * @tagname mdc-skeleton\n *\n * @slot - Content to wrap (optional). When provided, skeleton takes dimensions of this content.\n *\n * @cssproperty --mdc-skeleton-background-color - background color of the skeleton\n * @cssproperty --mdc-skeleton-height - height of the skeleton\n * @cssproperty --mdc-skeleton-width - width of the skeleton\n */",
-          "customElement": true
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "default",
-          "declaration": {
-            "name": "Skeleton",
-            "module": "components/skeleton/skeleton.component.js"
-          }
-        }
-      ]
-    },
     {
       "kind": "javascript-module",
       "path": "components/spinner/spinner.component.js",
@@ -35030,90 +35030,6 @@
         }
       ]
     },
-    {
-      "kind": "javascript-module",
-      "path": "components/text/text.component.js",
-      "declarations": [
-        {
-          "kind": "class",
-          "description": "Text component for creating styled text elements.\nIt has to be mounted within the ThemeProvider to access color and font tokens.\n\nThe `type` attribute allows changing the text style.\nThe `tagname` attribute allows changing the tag name of the text element.\nThe default tag name is `p`.\n\nThe `tagname` attribute should be a valid HTML tag name.\nIf the `tagname` attribute is not a valid HTML tag name, the default tag name will be used.\n\nThe styling is applied based on the `type` attribute.",
-          "name": "Text",
-          "cssParts": [
-            {
-              "description": "The text element",
-              "name": "text"
-            }
-          ],
-          "slots": [
-            {
-              "description": "Default slot for text content",
-              "name": ""
-            }
-          ],
-          "members": [
-            {
-              "kind": "field",
-              "name": "type",
-              "type": {
-                "text": "TextType"
-              },
-              "privacy": "public",
-              "description": "Specifies the text style to be applied.\n\nAcceptable values include:\n\n- 'body-small-regular'\n- 'body-small-medium'\n- 'body-small-bold'\n- 'body-midsize-regular'\n- 'body-midsize-medium'\n- 'body-midsize-bold'\n- 'body-large-regular'\n- 'body-large-medium'\n- 'body-large-bold'\n- 'body-small-regular-underline'\n- 'body-small-medium-underline'\n- 'body-midsize-regular-underline'\n- 'body-midsize-medium-underline'\n- 'body-large-regular-underline'\n- 'body-large-medium-underline'\n- 'heading-small-regular'\n- 'heading-small-medium'\n- 'heading-small-bold'\n- 'heading-midsize-regular'\n- 'heading-midsize-medium'\n- 'heading-midsize-bold'\n- 'heading-large-regular'\n- 'heading-large-medium'\n- 'heading-large-bold'\n- 'heading-xlarge-regular'\n- 'heading-xlarge-medium'\n- 'heading-xlarge-bold'\n- 'headline-small-light'\n- 'headline-small-regular'",
-              "default": "body-large-regular",
-              "attribute": "type",
-              "reflects": true
-            },
-            {
-              "kind": "field",
-              "name": "tagname",
-              "type": {
-                "text": "TagName | undefined"
-              },
-              "privacy": "public",
-              "description": "Specifies the HTML tag name for the text element. The default tag name is `p`.\nThis attribute is optional. When set, it changes the tag name of the text element.\n\nAcceptable values include:\n\n- 'h1'\n- 'h2'\n- 'h3'\n- 'h4'\n- 'h5'\n- 'h6'\n- 'p'\n- 'small'\n- 'span'\n- 'div'\n\nFor instance, setting this attribute to `h2` will render the text element as an `h2` element.\nNote that the styling is determined by the `type` attribute.",
-              "attribute": "tagname",
-              "reflects": true
-            }
-          ],
-          "attributes": [
-            {
-              "name": "type",
-              "type": {
-                "text": "TextType"
-              },
-              "description": "Specifies the text style to be applied.\n\nAcceptable values include:\n\n- 'body-small-regular'\n- 'body-small-medium'\n- 'body-small-bold'\n- 'body-midsize-regular'\n- 'body-midsize-medium'\n- 'body-midsize-bold'\n- 'body-large-regular'\n- 'body-large-medium'\n- 'body-large-bold'\n- 'body-small-regular-underline'\n- 'body-small-medium-underline'\n- 'body-midsize-regular-underline'\n- 'body-midsize-medium-underline'\n- 'body-large-regular-underline'\n- 'body-large-medium-underline'\n- 'heading-small-regular'\n- 'heading-small-medium'\n- 'heading-small-bold'\n- 'heading-midsize-regular'\n- 'heading-midsize-medium'\n- 'heading-midsize-bold'\n- 'heading-large-regular'\n- 'heading-large-medium'\n- 'heading-large-bold'\n- 'heading-xlarge-regular'\n- 'heading-xlarge-medium'\n- 'heading-xlarge-bold'\n- 'headline-small-light'\n- 'headline-small-regular'",
-              "default": "body-large-regular",
-              "fieldName": "type"
-            },
-            {
-              "name": "tagname",
-              "type": {
-                "text": "TagName | undefined"
-              },
-              "description": "Specifies the HTML tag name for the text element. The default tag name is `p`.\nThis attribute is optional. When set, it changes the tag name of the text element.\n\nAcceptable values include:\n\n- 'h1'\n- 'h2'\n- 'h3'\n- 'h4'\n- 'h5'\n- 'h6'\n- 'p'\n- 'small'\n- 'span'\n- 'div'\n\nFor instance, setting this attribute to `h2` will render the text element as an `h2` element.\nNote that the styling is determined by the `type` attribute.",
-              "fieldName": "tagname"
-            }
-          ],
-          "superclass": {
-            "name": "Component",
-            "module": "/src/models"
-          },
-          "tagName": "mdc-text",
-          "jsDoc": "/**\n * Text component for creating styled text elements.\n * It has to be mounted within the ThemeProvider to access color and font tokens.\n *\n * The `type` attribute allows changing the text style.\n * The `tagname` attribute allows changing the tag name of the text element.\n * The default tag name is `p`.\n *\n * The `tagname` attribute should be a valid HTML tag name.\n * If the `tagname` attribute is not a valid HTML tag name, the default tag name will be used.\n *\n * The styling is applied based on the `type` attribute.\n *\n * @tagname mdc-text\n * @slot - Default slot for text content\n *\n * @csspart text - The text element\n */",
-          "customElement": true
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "default",
-          "declaration": {
-            "name": "Text",
-            "module": "components/text/text.component.js"
-          }
-        }
-      ]
-    },
     {
       "kind": "javascript-module",
       "path": "components/textarea/textarea.component.js",
@@ -36150,6 +36066,90 @@
         }
       ]
     },
+    {
+      "kind": "javascript-module",
+      "path": "components/text/text.component.js",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "Text component for creating styled text elements.\nIt has to be mounted within the ThemeProvider to access color and font tokens.\n\nThe `type` attribute allows changing the text style.\nThe `tagname` attribute allows changing the tag name of the text element.\nThe default tag name is `p`.\n\nThe `tagname` attribute should be a valid HTML tag name.\nIf the `tagname` attribute is not a valid HTML tag name, the default tag name will be used.\n\nThe styling is applied based on the `type` attribute.",
+          "name": "Text",
+          "cssParts": [
+            {
+              "description": "The text element",
+              "name": "text"
+            }
+          ],
+          "slots": [
+            {
+              "description": "Default slot for text content",
+              "name": ""
+            }
+          ],
+          "members": [
+            {
+              "kind": "field",
+              "name": "type",
+              "type": {
+                "text": "TextType"
+              },
+              "privacy": "public",
+              "description": "Specifies the text style to be applied.\n\nAcceptable values include:\n\n- 'body-small-regular'\n- 'body-small-medium'\n- 'body-small-bold'\n- 'body-midsize-regular'\n- 'body-midsize-medium'\n- 'body-midsize-bold'\n- 'body-large-regular'\n- 'body-large-medium'\n- 'body-large-bold'\n- 'body-small-regular-underline'\n- 'body-small-medium-underline'\n- 'body-midsize-regular-underline'\n- 'body-midsize-medium-underline'\n- 'body-large-regular-underline'\n- 'body-large-medium-underline'\n- 'heading-small-regular'\n- 'heading-small-medium'\n- 'heading-small-bold'\n- 'heading-midsize-regular'\n- 'heading-midsize-medium'\n- 'heading-midsize-bold'\n- 'heading-large-regular'\n- 'heading-large-medium'\n- 'heading-large-bold'\n- 'heading-xlarge-regular'\n- 'heading-xlarge-medium'\n- 'heading-xlarge-bold'\n- 'headline-small-light'\n- 'headline-small-regular'",
+              "default": "body-large-regular",
+              "attribute": "type",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "tagname",
+              "type": {
+                "text": "TagName | undefined"
+              },
+              "privacy": "public",
+              "description": "Specifies the HTML tag name for the text element. The default tag name is `p`.\nThis attribute is optional. When set, it changes the tag name of the text element.\n\nAcceptable values include:\n\n- 'h1'\n- 'h2'\n- 'h3'\n- 'h4'\n- 'h5'\n- 'h6'\n- 'p'\n- 'small'\n- 'span'\n- 'div'\n\nFor instance, setting this attribute to `h2` will render the text element as an `h2` element.\nNote that the styling is determined by the `type` attribute.",
+              "attribute": "tagname",
+              "reflects": true
+            }
+          ],
+          "attributes": [
+            {
+              "name": "type",
+              "type": {
+                "text": "TextType"
+              },
+              "description": "Specifies the text style to be applied.\n\nAcceptable values include:\n\n- 'body-small-regular'\n- 'body-small-medium'\n- 'body-small-bold'\n- 'body-midsize-regular'\n- 'body-midsize-medium'\n- 'body-midsize-bold'\n- 'body-large-regular'\n- 'body-large-medium'\n- 'body-large-bold'\n- 'body-small-regular-underline'\n- 'body-small-medium-underline'\n- 'body-midsize-regular-underline'\n- 'body-midsize-medium-underline'\n- 'body-large-regular-underline'\n- 'body-large-medium-underline'\n- 'heading-small-regular'\n- 'heading-small-medium'\n- 'heading-small-bold'\n- 'heading-midsize-regular'\n- 'heading-midsize-medium'\n- 'heading-midsize-bold'\n- 'heading-large-regular'\n- 'heading-large-medium'\n- 'heading-large-bold'\n- 'heading-xlarge-regular'\n- 'heading-xlarge-medium'\n- 'heading-xlarge-bold'\n- 'headline-small-light'\n- 'headline-small-regular'",
+              "default": "body-large-regular",
+              "fieldName": "type"
+            },
+            {
+              "name": "tagname",
+              "type": {
+                "text": "TagName | undefined"
+              },
+              "description": "Specifies the HTML tag name for the text element. The default tag name is `p`.\nThis attribute is optional. When set, it changes the tag name of the text element.\n\nAcceptable values include:\n\n- 'h1'\n- 'h2'\n- 'h3'\n- 'h4'\n- 'h5'\n- 'h6'\n- 'p'\n- 'small'\n- 'span'\n- 'div'\n\nFor instance, setting this attribute to `h2` will render the text element as an `h2` element.\nNote that the styling is determined by the `type` attribute.",
+              "fieldName": "tagname"
+            }
+          ],
+          "superclass": {
+            "name": "Component",
+            "module": "/src/models"
+          },
+          "tagName": "mdc-text",
+          "jsDoc": "/**\n * Text component for creating styled text elements.\n * It has to be mounted within the ThemeProvider to access color and font tokens.\n *\n * The `type` attribute allows changing the text style.\n * The `tagname` attribute allows changing the tag name of the text element.\n * The default tag name is `p`.\n *\n * The `tagname` attribute should be a valid HTML tag name.\n * If the `tagname` attribute is not a valid HTML tag name, the default tag name will be used.\n *\n * The styling is applied based on the `type` attribute.\n *\n * @tagname mdc-text\n * @slot - Default slot for text content\n *\n * @csspart text - The text element\n */",
+          "customElement": true
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "default",
+          "declaration": {
+            "name": "Text",
+            "module": "components/text/text.component.js"
+          }
+        }
+      ]
+    },
     {
       "kind": "javascript-module",
       "path": "components/toast/toast.component.js",