@momentum-design/components 0.106.4 → 0.106.5

package/dist/custom-elements.json

@@ -13775,257 +13775,6 @@
         }
       ]
     },
-    {
-      "kind": "javascript-module",
-      "path": "components/formfieldwrapper/formfieldwrapper.component.js",
-      "declarations": [
-        {
-          "kind": "class",
-          "description": "formfieldwrapper is a component that contains the label and helper/validation text\n that can be configured in various ways to suit different use cases (most of the input related components).\nIt is used as an internal component and is not intended to be used directly by consumers.",
-          "name": "FormfieldWrapper",
-          "members": [
-            {
-              "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
-            },
-            {
-              "kind": "field",
-              "name": "required",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "The required attribute to indicate that the input field is required.\nIt is used to append a required indicator (*) to the label.",
-              "attribute": "required",
-              "reflects": true
-            },
-            {
-              "kind": "field",
-              "name": "helpTextType",
-              "type": {
-                "text": "ValidationType"
-              },
-              "description": "The type of help text. It can be 'default', 'error', 'warning', 'success', 'priority'.",
-              "attribute": "help-text-type",
-              "reflects": true
-            },
-            {
-              "kind": "field",
-              "name": "helpText",
-              "type": {
-                "text": "string | undefined"
-              },
-              "description": "The help text that is displayed below the input field.",
-              "attribute": "help-text",
-              "reflects": true
-            },
-            {
-              "kind": "field",
-              "name": "toggletipText",
-              "type": {
-                "text": "string | undefined"
-              },
-              "description": "The toggletip text that is displayed when the label is hovered.\nIt is used to provide additional information about the label.",
-              "attribute": "toggletip-text",
-              "reflects": true
-            },
-            {
-              "kind": "field",
-              "name": "toggletipPlacement",
-              "type": {
-                "text": "PopoverPlacement"
-              },
-              "description": "The placement of the toggletip that is displayed when the info icon is hovered.",
-              "default": "'top'",
-              "attribute": "toggletip-placement",
-              "reflects": true
-            },
-            {
-              "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
-            },
-            {
-              "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": ""
-                }
-              }
-            },
-            {
-              "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": ""
-                }
-              }
-            },
-            {
-              "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": ""
-                }
-              }
-            },
-            {
-              "kind": "method",
-              "name": "renderLabel",
-              "privacy": "protected",
-              "description": "renders the mdc-label-text container that contains the label and labelInfoToggleTip.",
-              "return": {
-                "type": {
-                  "text": ""
-                }
-              }
-            },
-            {
-              "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": "DisabledMixin",
-                "module": "utils/mixins/DisabledMixin.js"
-              }
-            }
-          ],
-          "attributes": [
-            {
-              "name": "label",
-              "type": {
-                "text": "string | undefined"
-              },
-              "description": "The label of the input field. It is linked to the input field using the `for` attribute.",
-              "fieldName": "label"
-            },
-            {
-              "name": "required",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "The required attribute to indicate that the input field is required.\nIt is used to append a required indicator (*) to the label.",
-              "fieldName": "required"
-            },
-            {
-              "name": "help-text-type",
-              "type": {
-                "text": "ValidationType"
-              },
-              "description": "The type of help text. It can be 'default', 'error', 'warning', 'success', 'priority'.",
-              "fieldName": "helpTextType"
-            },
-            {
-              "name": "help-text",
-              "type": {
-                "text": "string | undefined"
-              },
-              "description": "The help text that is displayed below the input field.",
-              "fieldName": "helpText"
-            },
-            {
-              "name": "toggletip-text",
-              "type": {
-                "text": "string | undefined"
-              },
-              "description": "The toggletip text that is displayed when the label is hovered.\nIt is used to provide additional information about the label.",
-              "fieldName": "toggletipText"
-            },
-            {
-              "name": "toggletip-placement",
-              "type": {
-                "text": "PopoverPlacement"
-              },
-              "description": "The placement of the toggletip that is displayed when the info icon is hovered.",
-              "default": "'top'",
-              "fieldName": "toggletipPlacement"
-            },
-            {
-              "name": "info-icon-aria-label",
-              "type": {
-                "text": "string | undefined"
-              },
-              "description": "Aria label for the info icon that is displayed next to the label when `toggletipText` is set.\nThis is used for accessibility purposes to provide a description of the icon.",
-              "fieldName": "infoIconAriaLabel"
-            },
-            {
-              "name": "disabled",
-              "type": {
-                "text": "boolean | undefined"
-              },
-              "description": "Indicates whether the component is disabled.\nWhen the component is disabled for user interaction; it is not focusable or clickable.",
-              "default": "undefined",
-              "fieldName": "disabled",
-              "inheritedFrom": {
-                "name": "DisabledMixin",
-                "module": "src/utils/mixins/DisabledMixin.ts"
-              }
-            }
-          ],
-          "mixins": [
-            {
-              "name": "DisabledMixin",
-              "module": "/src/utils/mixins/DisabledMixin"
-            }
-          ],
-          "superclass": {
-            "name": "Component",
-            "module": "/src/models"
-          },
-          "tagName": "mdc-formfieldwrapper",
-          "jsDoc": "/**\n * formfieldwrapper is a component that contains the label and helper/validation text\n *  that can be configured in various ways to suit different use cases (most of the input related components).\n * It is used as an internal component and is not intended to be used directly by consumers.\n *\n * @tagname mdc-formfieldwrapper\n *\n * @dependency mdc-text\n * @dependency mdc-icon\n * @dependency mdc-button\n * @dependency mdc-toggletip\n *\n *\n */",
-          "customElement": true
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "default",
-          "declaration": {
-            "name": "FormfieldWrapper",
-            "module": "components/formfieldwrapper/formfieldwrapper.component.js"
-          }
-        }
-      ]
-    },
     {
       "kind": "javascript-module",
       "path": "components/icon/icon.component.js",
@@ -14222,44 +13971,295 @@
             {
               "name": "size",
               "type": {
-                "text": "number | undefined"
+                "text": "number | undefined"
+              },
+              "description": "Size of the icon (works in combination with length unit)",
+              "fieldName": "size"
+            },
+            {
+              "name": "length-unit",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "Length unit attribute for overriding length-unit from `IconProvider`",
+              "fieldName": "lengthUnit"
+            },
+            {
+              "name": "aria-label",
+              "type": {
+                "text": "string | null"
+              },
+              "default": "null",
+              "description": "Aria-label attribute to be set for accessibility",
+              "fieldName": "ariaLabel"
+            },
+            {
+              "name": "aria-labelledby",
+              "type": {
+                "text": "string | null"
+              },
+              "default": "null",
+              "description": "Aria-labelledby attribute to be set for accessibility",
+              "fieldName": "ariaLabelledBy"
+            }
+          ],
+          "superclass": {
+            "name": "Component",
+            "module": "/src/models"
+          },
+          "tagName": "mdc-icon",
+          "jsDoc": "/**\n * Icon component that dynamically displays SVG icons based on a valid name.\n *\n * This component must be mounted within an `IconProvider` component.\n *\n * The `IconProvider` defines the source URL from which icons are consumed.\n * The `Icon` component accepts a `name` attribute, which corresponds to\n * the file name of the icon to be loaded from the specified URL.\n *\n * Once fetched, the icon will be rendered. If the fetching process is unsuccessful,\n * no icon will be displayed.\n *\n * The `size` attribute allows for dynamic sizing of the icon based on the provided\n * `length-unit` attribute. This unit can either come from the `IconProvider`\n * or can be overridden for each individual icon. For example:\n * if `size = 1` and `length-unit = 'em'`, the dimensions of the icon will be\n * `width: 1em; height: 1em`.\n *\n * Regarding accessibility, there are three types of icons: decorative, informative and informative standalone.\n *\n * ### Decorative Icons\n * - Decorative icons do not convey any essential information to the content of a page.\n * - They should be hidden from screen readers (SR) to prevent confusion for users.\n * - For decorative icons, an `aria-label` is not required, and the `role` will be set to null.\n *\n * ### Informative Icons\n * - Informative icons convey important information that is not adequately represented\n *   by surrounding text or components.\n * - They provide valuable context and must be announced by assistive technologies.\n * - For informative icons, an `aria-label` is required, and the `role` will be set to \"img\" automatically.\n * - If an `aria-label` is provided, the role will be set to 'img'; if it is absent,\n *   the role will be unset.\n *\n * ### Informative Standalone Icons\n * - If an icon is informative (as mentioned above) and does not belong to a button (=standalone), it must\n * have a Tooltip that describes what it means.\n * - For informative standalone icons, an `aria-label` & `tabindex=\"0\"` is required,\n * and the `role` will be set to \"img\" automatically.\n * - **Only use this when a Icon is standalone and is not part of a button or other interactive elements.**\n *\n * @tagname mdc-icon\n *\n * @cssproperty --mdc-icon-fill-color - Allows customization of the default fill color.\n * @cssproperty --mdc-icon-size - Allows customization of the icon size.\n * @cssproperty --mdc-icon-border-radius - Allows customization of the icon border radius.\n *\n * @csspart icon - The svg inside the icon element.\n */",
+          "customElement": true
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "default",
+          "declaration": {
+            "name": "Icon",
+            "module": "components/icon/icon.component.js"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "components/formfieldwrapper/formfieldwrapper.component.js",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "formfieldwrapper is a component that contains the label and helper/validation text\n that can be configured in various ways to suit different use cases (most of the input related components).\nIt is used as an internal component and is not intended to be used directly by consumers.",
+          "name": "FormfieldWrapper",
+          "members": [
+            {
+              "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
+            },
+            {
+              "kind": "field",
+              "name": "required",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "The required attribute to indicate that the input field is required.\nIt is used to append a required indicator (*) to the label.",
+              "attribute": "required",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "helpTextType",
+              "type": {
+                "text": "ValidationType"
+              },
+              "description": "The type of help text. It can be 'default', 'error', 'warning', 'success', 'priority'.",
+              "attribute": "help-text-type",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "helpText",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "The help text that is displayed below the input field.",
+              "attribute": "help-text",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "toggletipText",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "The toggletip text that is displayed when the label is hovered.\nIt is used to provide additional information about the label.",
+              "attribute": "toggletip-text",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "toggletipPlacement",
+              "type": {
+                "text": "PopoverPlacement"
+              },
+              "description": "The placement of the toggletip that is displayed when the info icon is hovered.",
+              "default": "'top'",
+              "attribute": "toggletip-placement",
+              "reflects": true
+            },
+            {
+              "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
+            },
+            {
+              "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": ""
+                }
+              }
+            },
+            {
+              "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": ""
+                }
+              }
+            },
+            {
+              "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": ""
+                }
+              }
+            },
+            {
+              "kind": "method",
+              "name": "renderLabel",
+              "privacy": "protected",
+              "description": "renders the mdc-label-text container that contains the label and labelInfoToggleTip.",
+              "return": {
+                "type": {
+                  "text": ""
+                }
+              }
+            },
+            {
+              "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": "DisabledMixin",
+                "module": "utils/mixins/DisabledMixin.js"
+              }
+            }
+          ],
+          "attributes": [
+            {
+              "name": "label",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "The label of the input field. It is linked to the input field using the `for` attribute.",
+              "fieldName": "label"
+            },
+            {
+              "name": "required",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "The required attribute to indicate that the input field is required.\nIt is used to append a required indicator (*) to the label.",
+              "fieldName": "required"
+            },
+            {
+              "name": "help-text-type",
+              "type": {
+                "text": "ValidationType"
+              },
+              "description": "The type of help text. It can be 'default', 'error', 'warning', 'success', 'priority'.",
+              "fieldName": "helpTextType"
+            },
+            {
+              "name": "help-text",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "The help text that is displayed below the input field.",
+              "fieldName": "helpText"
+            },
+            {
+              "name": "toggletip-text",
+              "type": {
+                "text": "string | undefined"
               },
-              "description": "Size of the icon (works in combination with length unit)",
-              "fieldName": "size"
+              "description": "The toggletip text that is displayed when the label is hovered.\nIt is used to provide additional information about the label.",
+              "fieldName": "toggletipText"
             },
             {
-              "name": "length-unit",
+              "name": "toggletip-placement",
               "type": {
-                "text": "string | undefined"
+                "text": "PopoverPlacement"
               },
-              "description": "Length unit attribute for overriding length-unit from `IconProvider`",
-              "fieldName": "lengthUnit"
+              "description": "The placement of the toggletip that is displayed when the info icon is hovered.",
+              "default": "'top'",
+              "fieldName": "toggletipPlacement"
             },
             {
-              "name": "aria-label",
+              "name": "info-icon-aria-label",
               "type": {
-                "text": "string | null"
+                "text": "string | undefined"
               },
-              "default": "null",
-              "description": "Aria-label attribute to be set for accessibility",
-              "fieldName": "ariaLabel"
+              "description": "Aria label for the info icon that is displayed next to the label when `toggletipText` is set.\nThis is used for accessibility purposes to provide a description of the icon.",
+              "fieldName": "infoIconAriaLabel"
             },
             {
-              "name": "aria-labelledby",
+              "name": "disabled",
               "type": {
-                "text": "string | null"
+                "text": "boolean | undefined"
               },
-              "default": "null",
-              "description": "Aria-labelledby attribute to be set for accessibility",
-              "fieldName": "ariaLabelledBy"
+              "description": "Indicates whether the component is disabled.\nWhen the component is disabled for user interaction; it is not focusable or clickable.",
+              "default": "undefined",
+              "fieldName": "disabled",
+              "inheritedFrom": {
+                "name": "DisabledMixin",
+                "module": "src/utils/mixins/DisabledMixin.ts"
+              }
+            }
+          ],
+          "mixins": [
+            {
+              "name": "DisabledMixin",
+              "module": "/src/utils/mixins/DisabledMixin"
             }
           ],
           "superclass": {
             "name": "Component",
             "module": "/src/models"
           },
-          "tagName": "mdc-icon",
-          "jsDoc": "/**\n * Icon component that dynamically displays SVG icons based on a valid name.\n *\n * This component must be mounted within an `IconProvider` component.\n *\n * The `IconProvider` defines the source URL from which icons are consumed.\n * The `Icon` component accepts a `name` attribute, which corresponds to\n * the file name of the icon to be loaded from the specified URL.\n *\n * Once fetched, the icon will be rendered. If the fetching process is unsuccessful,\n * no icon will be displayed.\n *\n * The `size` attribute allows for dynamic sizing of the icon based on the provided\n * `length-unit` attribute. This unit can either come from the `IconProvider`\n * or can be overridden for each individual icon. For example:\n * if `size = 1` and `length-unit = 'em'`, the dimensions of the icon will be\n * `width: 1em; height: 1em`.\n *\n * Regarding accessibility, there are three types of icons: decorative, informative and informative standalone.\n *\n * ### Decorative Icons\n * - Decorative icons do not convey any essential information to the content of a page.\n * - They should be hidden from screen readers (SR) to prevent confusion for users.\n * - For decorative icons, an `aria-label` is not required, and the `role` will be set to null.\n *\n * ### Informative Icons\n * - Informative icons convey important information that is not adequately represented\n *   by surrounding text or components.\n * - They provide valuable context and must be announced by assistive technologies.\n * - For informative icons, an `aria-label` is required, and the `role` will be set to \"img\" automatically.\n * - If an `aria-label` is provided, the role will be set to 'img'; if it is absent,\n *   the role will be unset.\n *\n * ### Informative Standalone Icons\n * - If an icon is informative (as mentioned above) and does not belong to a button (=standalone), it must\n * have a Tooltip that describes what it means.\n * - For informative standalone icons, an `aria-label` & `tabindex=\"0\"` is required,\n * and the `role` will be set to \"img\" automatically.\n * - **Only use this when a Icon is standalone and is not part of a button or other interactive elements.**\n *\n * @tagname mdc-icon\n *\n * @cssproperty --mdc-icon-fill-color - Allows customization of the default fill color.\n * @cssproperty --mdc-icon-size - Allows customization of the icon size.\n * @cssproperty --mdc-icon-border-radius - Allows customization of the icon border radius.\n *\n * @csspart icon - The svg inside the icon element.\n */",
+          "tagName": "mdc-formfieldwrapper",
+          "jsDoc": "/**\n * formfieldwrapper is a component that contains the label and helper/validation text\n *  that can be configured in various ways to suit different use cases (most of the input related components).\n * It is used as an internal component and is not intended to be used directly by consumers.\n *\n * @tagname mdc-formfieldwrapper\n *\n * @dependency mdc-text\n * @dependency mdc-icon\n * @dependency mdc-button\n * @dependency mdc-toggletip\n *\n *\n */",
           "customElement": true
         }
       ],
@@ -14268,8 +14268,8 @@
           "kind": "js",
           "name": "default",
           "declaration": {
-            "name": "Icon",
-            "module": "components/icon/icon.component.js"
+            "name": "FormfieldWrapper",
+            "module": "components/formfieldwrapper/formfieldwrapper.component.js"
           }
         }
       ]
@@ -17613,7 +17613,7 @@
       "declarations": [
         {
           "kind": "class",
-          "description": "mdc-listitem component is used to display a label with different types of controls.\nThere can be three types of controls, a radio button, a checkbox on the\nleading side and a toggle on the trailing side.\nThe list item can contain an avatar on the leading side and a badge on the trailing side.\nAdditionally, the list item can contain a side header and a subline text.\n\nThe leading and trailing slots can be used to display controls and text. <br/>\nBased on the leading/trailing slot, the position of the controls and text can be adjusted. <br/>\nPlease use mdc-list as a parent element even when there is only listitem for a11y purpose.\n\nBy providing the tooltip-text attribute, a tooltip will be displayed on hover of the listitem.\nThe placement of the tooltip can be adjusted using the tooltip-placement attribute.\nThis will be helpful when the listitem text is truncated or\nwhen you want to display additional information about the listitem.",
+          "description": "mdc-listitem component is used to display a label with different types of controls.\nThere can be three types of controls, a radio button, a checkbox on the\nleading side and a toggle on the trailing side.\nThe list item can contain an avatar on the leading side and a badge on the trailing side.\nAdditionally, the list item can contain a side header and a subline text.\n\nThe leading and trailing slots can be used to display controls and text. <br/>\nBased on the leading/trailing slot, the position of the controls and text can be adjusted. <br/>\nPlease use mdc-list as a parent element even when there is only listitem for a11y purpose.\n\n**Note**: If a listitem contains a long text, it is recommended to create a tooltip for the listitem that displays the full text on hover.\nConsumers need to add a unique ID to this listitem and use that ID in the tooltip's `triggerID` attribute. We are not creating the tooltip automatically, consumers need to add `<mdc-tooltip>` element manually and associate it with the listitem using the `triggerID` attribute.",
           "name": "ListItem",
           "cssProperties": [
             {
@@ -17772,31 +17772,10 @@
               "attribute": "soft-disabled",
               "reflects": true
             },
-            {
-              "kind": "field",
-              "name": "tooltipText",
-              "type": {
-                "text": "string | undefined"
-              },
-              "description": "The tooltip text is displayed on hover of the list item.",
-              "attribute": "tooltip-text",
-              "reflects": true
-            },
-            {
-              "kind": "field",
-              "name": "tooltipPlacement",
-              "type": {
-                "text": "PopoverPlacement"
-              },
-              "description": "The tooltip placement of the list item. If the tooltip text is present,\nthen this tooltip placement will be applied.",
-              "default": "'top'",
-              "attribute": "tooltip-placement",
-              "reflects": true
-            },
             {
               "kind": "method",
-              "name": "handleKeyDown",
-              "privacy": "protected",
+              "name": "handleClick",
+              "privacy": "private",
               "return": {
                 "type": {
                   "text": "void"
@@ -17806,23 +17785,17 @@
                 {
                   "name": "event",
                   "type": {
-                    "text": "KeyboardEvent"
+                    "text": "MouseEvent"
                   },
-                  "description": "The keyboard event triggered when a key is pressed down."
+                  "description": "The mouse event triggered when the list item is clicked."
                 }
               ],
-              "description": "Fires the click event when the enter or space key is pressed down.\nThis behavior is similar to a button click and key interaction."
+              "description": "Handles the click event on the list item.\nPrevents click when listitem is disabled"
             },
             {
               "kind": "method",
-              "name": "triggerClickEvent",
+              "name": "handleKeyDown",
               "privacy": "protected",
-              "description": "Triggers a click event on the list item."
-            },
-            {
-              "kind": "method",
-              "name": "handleClick",
-              "privacy": "private",
               "return": {
                 "type": {
                   "text": "void"
@@ -17832,33 +17805,18 @@
                 {
                   "name": "event",
                   "type": {
-                    "text": "MouseEvent"
-                  }
+                    "text": "KeyboardEvent"
+                  },
+                  "description": "The keyboard event triggered when a key is pressed down."
                 }
               ],
-              "description": "Handles the click event on the list item.\nIf the tooltip is open, it has to be closed first."
-            },
-            {
-              "kind": "method",
-              "name": "displayTooltipForLongText",
-              "privacy": "private",
-              "return": {
-                "type": {
-                  "text": "void"
-                }
-              },
-              "description": "Display a tooltip for the listitem.\nCreate the tooltip programmatically after the nearest parent element."
+              "description": "Fires the click event when the enter or space key is pressed down.\nThis behavior is similar to a button click and key interaction."
             },
             {
               "kind": "method",
-              "name": "hideTooltipOnLeave",
-              "privacy": "private",
-              "return": {
-                "type": {
-                  "text": "void"
-                }
-              },
-              "description": "Removes the dynamically created tooltip for long text label on focus or mouse leave.\nThis is triggered on focusout and mouseout events."
+              "name": "triggerClickEvent",
+              "privacy": "protected",
+              "description": "Triggers a click event on the list item."
             },
             {
               "kind": "method",
@@ -18090,23 +18048,6 @@
               "default": "undefined",
               "fieldName": "softDisabled"
             },
-            {
-              "name": "tooltip-text",
-              "type": {
-                "text": "string | undefined"
-              },
-              "description": "The tooltip text is displayed on hover of the list item.",
-              "fieldName": "tooltipText"
-            },
-            {
-              "name": "tooltip-placement",
-              "type": {
-                "text": "PopoverPlacement"
-              },
-              "description": "The tooltip placement of the list item. If the tooltip text is present,\nthen this tooltip placement will be applied.",
-              "default": "'top'",
-              "fieldName": "tooltipPlacement"
-            },
             {
               "name": "disabled",
               "type": {
@@ -18153,7 +18094,7 @@
             "module": "/src/models"
           },
           "tagName": "mdc-listitem",
-          "jsDoc": "/**\n * mdc-listitem component is used to display a label with different types of controls.\n * There can be three types of controls, a radio button, a checkbox on the\n * leading side and a toggle on the trailing side.\n * The list item can contain an avatar on the leading side and a badge on the trailing side.\n * Additionally, the list item can contain a side header and a subline text.\n *\n * The leading and trailing slots can be used to display controls and text. <br/>\n * Based on the leading/trailing slot, the position of the controls and text can be adjusted. <br/>\n * Please use mdc-list as a parent element even when there is only listitem for a11y purpose.\n *\n * By providing the tooltip-text attribute, a tooltip will be displayed on hover of the listitem.\n * The placement of the tooltip can be adjusted using the tooltip-placement attribute.\n * This will be helpful when the listitem text is truncated or\n * when you want to display additional information about the listitem.\n *\n * @tagname mdc-listitem\n *\n * @dependency mdc-text\n * @dependency mdc-tooltip\n *\n * @slot leading-controls - slot for list item controls to appear of leading end.\n * @slot leading-text-primary-label - slot for list item primary label.\n * @slot leading-text-secondary-label - slot for list item secondary label.\n * @slot leading-text-tertiary-label - slot for list item tertiary label.\n * @slot trailing-text-side-header - slot for list item side header text.\n * @slot trailing-text-subline - slot for list item subline text.\n * @slot trailing-controls - slot for list item controls to appear of trailing end.\n * @slot content - content slot can be used to override the content completely. Be aware that\n * this will override the default content of the list item.\n *\n * @cssproperty --mdc-listitem-default-background-color - Allows customization of the default background color.\n * @cssproperty --mdc-listitem-background-color-hover - Allows customization of the background color on hover.\n * @cssproperty --mdc-listitem-background-color-active - Allows customization of the background color when pressed.\n * @cssproperty --mdc-listitem-primary-label-color\n *  - Allows customization of the primary label, side header and subline text slot color.\n * @cssproperty --mdc-listitem-secondary-label-color\n *  - Allows customization of the secondary and tertiary label text slot color.\n * @cssproperty --mdc-listitem-disabled-color - Allows customization of the disabled color.\n * @cssproperty --mdc-listitem-column-gap - Allows customization of column gap.\n * @cssproperty --mdc-listitem-padding-left-right - Allows customization of padding left and right.\n * @cssproperty --mdc-listitem-padding-top-bottom - Allows customization of padding top and bottom.\n * @cssproperty --mdc-listitem-cursor - Allows customization of the cursor.\n * @cssproperty --mdc-listitem-width - Allows customization of the width of the list item.\n * @cssproperty --mdc-listitem-height - Allows customization of the height of the list item.\n *\n * @event click - (React: onClick) This event is dispatched when the listitem is clicked.\n * @event keydown - (React: onKeyDown) This event is dispatched when a key is pressed down on the listitem.\n * @event keyup - (React: onKeyUp) This event is dispatched when a key is released on the listitem.\n * @event focus - (React: onFocus) This event is dispatched when the listitem receives focus.\n * @event enabled - (React: onEnabled) This event is dispatched after the listitem is enabled\n * @event disabled - (React: onDisabled) This event is dispatched after the listitem is disabled\n * @event created - (React: onCreated) This event is dispatched after the listitem is created (added to the DOM)\n * @event destroyed - (React: onDestroyed) This event is dispatched after the listitem is destroyed (removed from the DOM)\n */",
+          "jsDoc": "/**\n * mdc-listitem component is used to display a label with different types of controls.\n * There can be three types of controls, a radio button, a checkbox on the\n * leading side and a toggle on the trailing side.\n * The list item can contain an avatar on the leading side and a badge on the trailing side.\n * Additionally, the list item can contain a side header and a subline text.\n *\n * The leading and trailing slots can be used to display controls and text. <br/>\n * Based on the leading/trailing slot, the position of the controls and text can be adjusted. <br/>\n * Please use mdc-list as a parent element even when there is only listitem for a11y purpose.\n *\n * **Note**: If a listitem contains a long text, it is recommended to create a tooltip for the listitem that displays the full text on hover.\n * Consumers need to add a unique ID to this listitem and use that ID in the tooltip's `triggerID` attribute. We are not creating the tooltip automatically, consumers need to add `<mdc-tooltip>` element manually and associate it with the listitem using the `triggerID` attribute.\n *\n * @tagname mdc-listitem\n *\n * @dependency mdc-text\n *\n * @slot leading-controls - slot for list item controls to appear of leading end.\n * @slot leading-text-primary-label - slot for list item primary label.\n * @slot leading-text-secondary-label - slot for list item secondary label.\n * @slot leading-text-tertiary-label - slot for list item tertiary label.\n * @slot trailing-text-side-header - slot for list item side header text.\n * @slot trailing-text-subline - slot for list item subline text.\n * @slot trailing-controls - slot for list item controls to appear of trailing end.\n * @slot content - content slot can be used to override the content completely. Be aware that\n * this will override the default content of the list item.\n *\n * @cssproperty --mdc-listitem-default-background-color - Allows customization of the default background color.\n * @cssproperty --mdc-listitem-background-color-hover - Allows customization of the background color on hover.\n * @cssproperty --mdc-listitem-background-color-active - Allows customization of the background color when pressed.\n * @cssproperty --mdc-listitem-primary-label-color\n *  - Allows customization of the primary label, side header and subline text slot color.\n * @cssproperty --mdc-listitem-secondary-label-color\n *  - Allows customization of the secondary and tertiary label text slot color.\n * @cssproperty --mdc-listitem-disabled-color - Allows customization of the disabled color.\n * @cssproperty --mdc-listitem-column-gap - Allows customization of column gap.\n * @cssproperty --mdc-listitem-padding-left-right - Allows customization of padding left and right.\n * @cssproperty --mdc-listitem-padding-top-bottom - Allows customization of padding top and bottom.\n * @cssproperty --mdc-listitem-cursor - Allows customization of the cursor.\n * @cssproperty --mdc-listitem-width - Allows customization of the width of the list item.\n * @cssproperty --mdc-listitem-height - Allows customization of the height of the list item.\n *\n * @event click - (React: onClick) This event is dispatched when the listitem is clicked.\n * @event keydown - (React: onKeyDown) This event is dispatched when a key is pressed down on the listitem.\n * @event keyup - (React: onKeyUp) This event is dispatched when a key is released on the listitem.\n * @event focus - (React: onFocus) This event is dispatched when the listitem receives focus.\n * @event enabled - (React: onEnabled) This event is dispatched after the listitem is enabled\n * @event disabled - (React: onDisabled) This event is dispatched after the listitem is disabled\n * @event created - (React: onCreated) This event is dispatched after the listitem is created (added to the DOM)\n * @event destroyed - (React: onDestroyed) This event is dispatched after the listitem is destroyed (removed from the DOM)\n */",
           "customElement": true
         }
       ],
@@ -18603,7 +18544,7 @@
       "declarations": [
         {
           "kind": "class",
-          "description": "menuitem component is inherited by listitem component with the role set `menuitem`.<br/>\nA menu item can contain an icon on the leading or trailing side.\n\nThe leading and trailing slots can be used to display controls and text.<br/>\nBased on the leading/trailing slot, the position of the controls and text can be adjusted.\n\nPlease use element with role=menu as a parent element even when there is only menuitem for a11y purpose.\nFor example mdc-menupopover or mdc-menubar.\n\nMenu item has `name` and `value` attribute that can be used to identify the menu item when it is selected.",
+          "description": "menuitem component is inherited by listitem component with the role set `menuitem`.<br/>\nA menu item can contain an icon on the leading or trailing side.\n\nThe leading and trailing slots can be used to display controls and text.<br/>\nBased on the leading/trailing slot, the position of the controls and text can be adjusted.\n\nPlease use element with role=menu as a parent element even when there is only menuitem for a11y purpose.\nFor example mdc-menupopover or mdc-menubar.\n\nMenu item has `name` and `value` attribute that can be used to identify the menu item when it is selected.\n\n**Note**: If a menuitem contains a long text, it is recommended to create a tooltip for the menuitem that displays the full text on hover.\nConsumers need to add a unique ID to this menuitem and use that ID in the tooltip's `triggerID` attribute. We are not creating the tooltip automatically, consumers need to add `<mdc-tooltip>` element manually and associate it with the menuitem using the `triggerID` attribute.",
           "name": "MenuItem",
           "slots": [
             {
@@ -18916,45 +18857,6 @@
                 "module": "components/listitem/listitem.component.js"
               }
             },
-            {
-              "kind": "field",
-              "name": "tooltipText",
-              "type": {
-                "text": "string | undefined"
-              },
-              "description": "The tooltip text is displayed on hover of the list item.",
-              "attribute": "tooltip-text",
-              "reflects": true,
-              "inheritedFrom": {
-                "name": "ListItem",
-                "module": "components/listitem/listitem.component.js"
-              }
-            },
-            {
-              "kind": "field",
-              "name": "tooltipPlacement",
-              "type": {
-                "text": "PopoverPlacement"
-              },
-              "description": "The tooltip placement of the list item. If the tooltip text is present,\nthen this tooltip placement will be applied.",
-              "default": "'top'",
-              "attribute": "tooltip-placement",
-              "reflects": true,
-              "inheritedFrom": {
-                "name": "ListItem",
-                "module": "components/listitem/listitem.component.js"
-              }
-            },
-            {
-              "kind": "method",
-              "name": "triggerClickEvent",
-              "privacy": "protected",
-              "description": "Triggers a click event on the list item.",
-              "inheritedFrom": {
-                "name": "ListItem",
-                "module": "components/listitem/listitem.component.js"
-              }
-            },
             {
               "kind": "method",
               "name": "handleClick",
@@ -18969,25 +18871,11 @@
                   "name": "event",
                   "type": {
                     "text": "MouseEvent"
-                  }
+                  },
+                  "description": "The mouse event triggered when the list item is clicked."
                 }
               ],
-              "description": "Handles the click event on the list item.\nIf the tooltip is open, it has to be closed first.",
-              "inheritedFrom": {
-                "name": "ListItem",
-                "module": "components/listitem/listitem.component.js"
-              }
-            },
-            {
-              "kind": "method",
-              "name": "displayTooltipForLongText",
-              "privacy": "private",
-              "return": {
-                "type": {
-                  "text": "void"
-                }
-              },
-              "description": "Display a tooltip for the listitem.\nCreate the tooltip programmatically after the nearest parent element.",
+              "description": "Handles the click event on the list item.\nPrevents click when listitem is disabled",
               "inheritedFrom": {
                 "name": "ListItem",
                 "module": "components/listitem/listitem.component.js"
@@ -18995,14 +18883,9 @@
             },
             {
               "kind": "method",
-              "name": "hideTooltipOnLeave",
-              "privacy": "private",
-              "return": {
-                "type": {
-                  "text": "void"
-                }
-              },
-              "description": "Removes the dynamically created tooltip for long text label on focus or mouse leave.\nThis is triggered on focusout and mouseout events.",
+              "name": "triggerClickEvent",
+              "privacy": "protected",
+              "description": "Triggers a click event on the list item.",
               "inheritedFrom": {
                 "name": "ListItem",
                 "module": "components/listitem/listitem.component.js"
@@ -19315,31 +19198,6 @@
                 "name": "ListItem",
                 "module": "src/components/listitem/listitem.component.ts"
               }
-            },
-            {
-              "name": "tooltip-text",
-              "type": {
-                "text": "string | undefined"
-              },
-              "description": "The tooltip text is displayed on hover of the list item.",
-              "fieldName": "tooltipText",
-              "inheritedFrom": {
-                "name": "ListItem",
-                "module": "src/components/listitem/listitem.component.ts"
-              }
-            },
-            {
-              "name": "tooltip-placement",
-              "type": {
-                "text": "PopoverPlacement"
-              },
-              "description": "The tooltip placement of the list item. If the tooltip text is present,\nthen this tooltip placement will be applied.",
-              "default": "'top'",
-              "fieldName": "tooltipPlacement",
-              "inheritedFrom": {
-                "name": "ListItem",
-                "module": "src/components/listitem/listitem.component.ts"
-              }
             }
           ],
           "superclass": {
@@ -19347,7 +19205,7 @@
             "module": "/src/components/listitem/listitem.component"
           },
           "tagName": "mdc-menuitem",
-          "jsDoc": "/**\n * menuitem component is inherited by listitem component with the role set `menuitem`.<br/>\n * A menu item can contain an icon on the leading or trailing side.\n *\n * The leading and trailing slots can be used to display controls and text.<br/>\n * Based on the leading/trailing slot, the position of the controls and text can be adjusted.\n *\n * Please use element with role=menu as a parent element even when there is only menuitem for a11y purpose.\n * For example mdc-menupopover or mdc-menubar.\n *\n * Menu item has `name` and `value` attribute that can be used to identify the menu item when it is selected.\n *\n * @dependency mdc-text\n * @dependency mdc-icon\n * @dependency mdc-tooltip\n *\n * @tagname mdc-menuitem\n *\n * @slot leading-controls - slot for menu item controls to appear of leading end.\n * @slot leading-text-primary-label - slot for menu item primary label.\n * @slot leading-text-secondary-label - slot for menu item secondary label.\n * @slot leading-text-tertiary-label - slot for menu item tertiary label.\n * @slot trailing-text-side-header - slot for menu item side header text.\n * @slot trailing-text-subline - slot for menu item subline text.\n * @slot trailing-controls - slot for menu item controls to appear of trailing end.\n *\n * @event click - (React: onClick) This event is dispatched when the menuitem is clicked.\n * @event keydown - (React: onKeyDown) This event is dispatched when a key is pressed down on the menuitem.\n * @event keyup - (React: onKeyUp) This event is dispatched when a key is released on the menuitem.\n * @event focus - (React: onFocus) This event is dispatched when the menuitem receives focus.\n * @event enabled - (React: onEnabled) This event is dispatched after the menuitem is enabled\n * @event disabled - (React: onDisabled) This event is dispatched after the menuitem is disabled\n * @event created - (React: onCreated) This event is dispatched after the menuitem is created (added to the DOM)\n * @event destroyed - (React: onDestroyed) This event is dispatched after the menuitem is destroyed (removed from the DOM)\n */",
+          "jsDoc": "/**\n * menuitem component is inherited by listitem component with the role set `menuitem`.<br/>\n * A menu item can contain an icon on the leading or trailing side.\n *\n * The leading and trailing slots can be used to display controls and text.<br/>\n * Based on the leading/trailing slot, the position of the controls and text can be adjusted.\n *\n * Please use element with role=menu as a parent element even when there is only menuitem for a11y purpose.\n * For example mdc-menupopover or mdc-menubar.\n *\n * Menu item has `name` and `value` attribute that can be used to identify the menu item when it is selected.\n *\n * **Note**: If a menuitem contains a long text, it is recommended to create a tooltip for the menuitem that displays the full text on hover.\n * Consumers need to add a unique ID to this menuitem and use that ID in the tooltip's `triggerID` attribute. We are not creating the tooltip automatically, consumers need to add `<mdc-tooltip>` element manually and associate it with the menuitem using the `triggerID` attribute.\n *\n * @dependency mdc-text\n * @dependency mdc-icon\n *\n * @tagname mdc-menuitem\n *\n * @slot leading-controls - slot for menu item controls to appear of leading end.\n * @slot leading-text-primary-label - slot for menu item primary label.\n * @slot leading-text-secondary-label - slot for menu item secondary label.\n * @slot leading-text-tertiary-label - slot for menu item tertiary label.\n * @slot trailing-text-side-header - slot for menu item side header text.\n * @slot trailing-text-subline - slot for menu item subline text.\n * @slot trailing-controls - slot for menu item controls to appear of trailing end.\n *\n * @event click - (React: onClick) This event is dispatched when the menuitem is clicked.\n * @event keydown - (React: onKeyDown) This event is dispatched when a key is pressed down on the menuitem.\n * @event keyup - (React: onKeyUp) This event is dispatched when a key is released on the menuitem.\n * @event focus - (React: onFocus) This event is dispatched when the menuitem receives focus.\n * @event enabled - (React: onEnabled) This event is dispatched after the menuitem is enabled\n * @event disabled - (React: onDisabled) This event is dispatched after the menuitem is disabled\n * @event created - (React: onCreated) This event is dispatched after the menuitem is created (added to the DOM)\n * @event destroyed - (React: onDestroyed) This event is dispatched after the menuitem is destroyed (removed from the DOM)\n */",
           "customElement": true,
           "cssProperties": [
             {
@@ -19860,45 +19718,6 @@
                 "module": "components/listitem/listitem.component.js"
               }
             },
-            {
-              "kind": "field",
-              "name": "tooltipText",
-              "type": {
-                "text": "string | undefined"
-              },
-              "description": "The tooltip text is displayed on hover of the list item.",
-              "attribute": "tooltip-text",
-              "reflects": true,
-              "inheritedFrom": {
-                "name": "ListItem",
-                "module": "components/listitem/listitem.component.js"
-              }
-            },
-            {
-              "kind": "field",
-              "name": "tooltipPlacement",
-              "type": {
-                "text": "PopoverPlacement"
-              },
-              "description": "The tooltip placement of the list item. If the tooltip text is present,\nthen this tooltip placement will be applied.",
-              "default": "'top'",
-              "attribute": "tooltip-placement",
-              "reflects": true,
-              "inheritedFrom": {
-                "name": "ListItem",
-                "module": "components/listitem/listitem.component.js"
-              }
-            },
-            {
-              "kind": "method",
-              "name": "triggerClickEvent",
-              "privacy": "protected",
-              "description": "Triggers a click event on the list item.",
-              "inheritedFrom": {
-                "name": "ListItem",
-                "module": "components/listitem/listitem.component.js"
-              }
-            },
             {
               "kind": "method",
               "name": "handleClick",
@@ -19912,26 +19731,12 @@
                 {
                   "name": "event",
                   "type": {
-                    "text": "MouseEvent"
-                  }
-                }
-              ],
-              "description": "Handles the click event on the list item.\nIf the tooltip is open, it has to be closed first.",
-              "inheritedFrom": {
-                "name": "ListItem",
-                "module": "components/listitem/listitem.component.js"
-              }
-            },
-            {
-              "kind": "method",
-              "name": "displayTooltipForLongText",
-              "privacy": "private",
-              "return": {
-                "type": {
-                  "text": "void"
+                    "text": "MouseEvent"
+                  },
+                  "description": "The mouse event triggered when the list item is clicked."
                 }
-              },
-              "description": "Display a tooltip for the listitem.\nCreate the tooltip programmatically after the nearest parent element.",
+              ],
+              "description": "Handles the click event on the list item.\nPrevents click when listitem is disabled",
               "inheritedFrom": {
                 "name": "ListItem",
                 "module": "components/listitem/listitem.component.js"
@@ -19939,14 +19744,9 @@
             },
             {
               "kind": "method",
-              "name": "hideTooltipOnLeave",
-              "privacy": "private",
-              "return": {
-                "type": {
-                  "text": "void"
-                }
-              },
-              "description": "Removes the dynamically created tooltip for long text label on focus or mouse leave.\nThis is triggered on focusout and mouseout events.",
+              "name": "triggerClickEvent",
+              "privacy": "protected",
+              "description": "Triggers a click event on the list item.",
               "inheritedFrom": {
                 "name": "ListItem",
                 "module": "components/listitem/listitem.component.js"
@@ -20301,31 +20101,6 @@
                 "name": "ListItem",
                 "module": "src/components/listitem/listitem.component.ts"
               }
-            },
-            {
-              "name": "tooltip-text",
-              "type": {
-                "text": "string | undefined"
-              },
-              "description": "The tooltip text is displayed on hover of the list item.",
-              "fieldName": "tooltipText",
-              "inheritedFrom": {
-                "name": "ListItem",
-                "module": "src/components/listitem/listitem.component.ts"
-              }
-            },
-            {
-              "name": "tooltip-placement",
-              "type": {
-                "text": "PopoverPlacement"
-              },
-              "description": "The tooltip placement of the list item. If the tooltip text is present,\nthen this tooltip placement will be applied.",
-              "default": "'top'",
-              "fieldName": "tooltipPlacement",
-              "inheritedFrom": {
-                "name": "ListItem",
-                "module": "src/components/listitem/listitem.component.ts"
-              }
             }
           ],
           "superclass": {
@@ -20857,45 +20632,6 @@
                 "module": "components/listitem/listitem.component.js"
               }
             },
-            {
-              "kind": "field",
-              "name": "tooltipText",
-              "type": {
-                "text": "string | undefined"
-              },
-              "description": "The tooltip text is displayed on hover of the list item.",
-              "attribute": "tooltip-text",
-              "reflects": true,
-              "inheritedFrom": {
-                "name": "ListItem",
-                "module": "components/listitem/listitem.component.js"
-              }
-            },
-            {
-              "kind": "field",
-              "name": "tooltipPlacement",
-              "type": {
-                "text": "PopoverPlacement"
-              },
-              "description": "The tooltip placement of the list item. If the tooltip text is present,\nthen this tooltip placement will be applied.",
-              "default": "'top'",
-              "attribute": "tooltip-placement",
-              "reflects": true,
-              "inheritedFrom": {
-                "name": "ListItem",
-                "module": "components/listitem/listitem.component.js"
-              }
-            },
-            {
-              "kind": "method",
-              "name": "triggerClickEvent",
-              "privacy": "protected",
-              "description": "Triggers a click event on the list item.",
-              "inheritedFrom": {
-                "name": "ListItem",
-                "module": "components/listitem/listitem.component.js"
-              }
-            },
             {
               "kind": "method",
               "name": "handleClick",
@@ -20910,25 +20646,11 @@
                   "name": "event",
                   "type": {
                     "text": "MouseEvent"
-                  }
+                  },
+                  "description": "The mouse event triggered when the list item is clicked."
                 }
               ],
-              "description": "Handles the click event on the list item.\nIf the tooltip is open, it has to be closed first.",
-              "inheritedFrom": {
-                "name": "ListItem",
-                "module": "components/listitem/listitem.component.js"
-              }
-            },
-            {
-              "kind": "method",
-              "name": "displayTooltipForLongText",
-              "privacy": "private",
-              "return": {
-                "type": {
-                  "text": "void"
-                }
-              },
-              "description": "Display a tooltip for the listitem.\nCreate the tooltip programmatically after the nearest parent element.",
+              "description": "Handles the click event on the list item.\nPrevents click when listitem is disabled",
               "inheritedFrom": {
                 "name": "ListItem",
                 "module": "components/listitem/listitem.component.js"
@@ -20936,14 +20658,9 @@
             },
             {
               "kind": "method",
-              "name": "hideTooltipOnLeave",
-              "privacy": "private",
-              "return": {
-                "type": {
-                  "text": "void"
-                }
-              },
-              "description": "Removes the dynamically created tooltip for long text label on focus or mouse leave.\nThis is triggered on focusout and mouseout events.",
+              "name": "triggerClickEvent",
+              "privacy": "protected",
+              "description": "Triggers a click event on the list item.",
               "inheritedFrom": {
                 "name": "ListItem",
                 "module": "components/listitem/listitem.component.js"
@@ -21298,31 +21015,6 @@
                 "name": "ListItem",
                 "module": "src/components/listitem/listitem.component.ts"
               }
-            },
-            {
-              "name": "tooltip-text",
-              "type": {
-                "text": "string | undefined"
-              },
-              "description": "The tooltip text is displayed on hover of the list item.",
-              "fieldName": "tooltipText",
-              "inheritedFrom": {
-                "name": "ListItem",
-                "module": "src/components/listitem/listitem.component.ts"
-              }
-            },
-            {
-              "name": "tooltip-placement",
-              "type": {
-                "text": "PopoverPlacement"
-              },
-              "description": "The tooltip placement of the list item. If the tooltip text is present,\nthen this tooltip placement will be applied.",
-              "default": "'top'",
-              "fieldName": "tooltipPlacement",
-              "inheritedFrom": {
-                "name": "ListItem",
-                "module": "src/components/listitem/listitem.component.ts"
-              }
             }
           ],
           "superclass": {
@@ -23833,7 +23525,7 @@
       "declarations": [
         {
           "kind": "class",
-          "description": "`mdc-navmenuitem` is a menuitem styled to work as a navigation tab.\nIt supports a leading icon, optional badge and dynamic text rendering.\n\nNote: `mdc-navmenuitem` is intended to be used inside `mdc-menubar` as part of the sideNavigation\ncomponent. Its structure, spacing, and interactions are designed to align with\nthe visual and functional requirements of side navigation layouts.",
+          "description": "`mdc-navmenuitem` is a menuitem styled to work as a navigation tab.\nIt supports a leading icon, optional badge and dynamic text rendering.\n\nNote: `mdc-navmenuitem` is intended to be used inside `mdc-menubar` as part of the sideNavigation\ncomponent. Its structure, spacing, and interactions are designed to align with\nthe visual and functional requirements of side navigation layouts.\n\nBy providing the tooltip-text attribute, a tooltip will be displayed on hover of the navmenuitem. This tooltip is useful when an active navmenuitem is present within a submenu of the sidenavigation component.",
           "name": "NavMenuItem",
           "cssProperties": [
             {
@@ -24051,6 +23743,31 @@
               "attribute": "disable-aria-current",
               "reflects": true
             },
+            {
+              "kind": "field",
+              "name": "tooltipText",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "The tooltip text is displayed on hover of the list item.",
+              "attribute": "tooltip-text",
+              "reflects": true
+            },
+            {
+              "kind": "method",
+              "name": "removeTooltip",
+              "privacy": "private"
+            },
+            {
+              "kind": "method",
+              "name": "renderDynamicTooltip",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              }
+            },
             {
               "kind": "method",
               "name": "isNested",
@@ -24388,45 +24105,6 @@
                 "module": "components/listitem/listitem.component.js"
               }
             },
-            {
-              "kind": "field",
-              "name": "tooltipText",
-              "type": {
-                "text": "string | undefined"
-              },
-              "description": "The tooltip text is displayed on hover of the list item.",
-              "attribute": "tooltip-text",
-              "reflects": true,
-              "inheritedFrom": {
-                "name": "ListItem",
-                "module": "components/listitem/listitem.component.js"
-              }
-            },
-            {
-              "kind": "field",
-              "name": "tooltipPlacement",
-              "type": {
-                "text": "PopoverPlacement"
-              },
-              "description": "The tooltip placement of the list item. If the tooltip text is present,\nthen this tooltip placement will be applied.",
-              "default": "'top'",
-              "attribute": "tooltip-placement",
-              "reflects": true,
-              "inheritedFrom": {
-                "name": "ListItem",
-                "module": "components/listitem/listitem.component.js"
-              }
-            },
-            {
-              "kind": "method",
-              "name": "triggerClickEvent",
-              "privacy": "protected",
-              "description": "Triggers a click event on the list item.",
-              "inheritedFrom": {
-                "name": "ListItem",
-                "module": "components/listitem/listitem.component.js"
-              }
-            },
             {
               "kind": "method",
               "name": "handleClick",
@@ -24441,10 +24119,11 @@
                   "name": "event",
                   "type": {
                     "text": "MouseEvent"
-                  }
+                  },
+                  "description": "The mouse event triggered when the list item is clicked."
                 }
               ],
-              "description": "Handles the click event on the list item.\nIf the tooltip is open, it has to be closed first.",
+              "description": "Handles the click event on the list item.\nPrevents click when listitem is disabled",
               "inheritedFrom": {
                 "name": "ListItem",
                 "module": "components/listitem/listitem.component.js"
@@ -24452,29 +24131,9 @@
             },
             {
               "kind": "method",
-              "name": "displayTooltipForLongText",
-              "privacy": "private",
-              "return": {
-                "type": {
-                  "text": "void"
-                }
-              },
-              "description": "Display a tooltip for the listitem.\nCreate the tooltip programmatically after the nearest parent element.",
-              "inheritedFrom": {
-                "name": "ListItem",
-                "module": "components/listitem/listitem.component.js"
-              }
-            },
-            {
-              "kind": "method",
-              "name": "hideTooltipOnLeave",
-              "privacy": "private",
-              "return": {
-                "type": {
-                  "text": "void"
-                }
-              },
-              "description": "Removes the dynamically created tooltip for long text label on focus or mouse leave.\nThis is triggered on focusout and mouseout events.",
+              "name": "triggerClickEvent",
+              "privacy": "protected",
+              "description": "Triggers a click event on the list item.",
               "inheritedFrom": {
                 "name": "ListItem",
                 "module": "components/listitem/listitem.component.js"
@@ -24709,6 +24368,14 @@
               "description": "When set to true, prevents the automatic setting of the `aria-current` attribute on the navmenuitem\nwhen it becomes active. This is useful for cases where you want to maintain the visual active styling\nbut need to handle aria-current attribute differently or not at all.\nThe active button styling will still be applied regardless of this setting.",
               "fieldName": "disableAriaCurrent"
             },
+            {
+              "name": "tooltip-text",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "The tooltip text is displayed on hover of the list item.",
+              "fieldName": "tooltipText"
+            },
             {
               "name": "icon-name",
               "type": {
@@ -24880,31 +24547,6 @@
                 "name": "ListItem",
                 "module": "src/components/listitem/listitem.component.ts"
               }
-            },
-            {
-              "name": "tooltip-text",
-              "type": {
-                "text": "string | undefined"
-              },
-              "description": "The tooltip text is displayed on hover of the list item.",
-              "fieldName": "tooltipText",
-              "inheritedFrom": {
-                "name": "ListItem",
-                "module": "src/components/listitem/listitem.component.ts"
-              }
-            },
-            {
-              "name": "tooltip-placement",
-              "type": {
-                "text": "PopoverPlacement"
-              },
-              "description": "The tooltip placement of the list item. If the tooltip text is present,\nthen this tooltip placement will be applied.",
-              "default": "'top'",
-              "fieldName": "tooltipPlacement",
-              "inheritedFrom": {
-                "name": "ListItem",
-                "module": "src/components/listitem/listitem.component.ts"
-              }
             }
           ],
           "mixins": [
@@ -24918,7 +24560,7 @@
             "module": "/src/components/menuitem/menuitem.component"
           },
           "tagName": "mdc-navmenuitem",
-          "jsDoc": "/**\n * `mdc-navmenuitem` is a menuitem styled to work as a navigation tab.\n * It supports a leading icon, optional badge and dynamic text rendering.\n *\n * Note: `mdc-navmenuitem` is intended to be used inside `mdc-menubar` as part of the sideNavigation\n * component. Its structure, spacing, and interactions are designed to align with\n * the visual and functional requirements of side navigation layouts.\n *\n * @tagname mdc-navmenuitem\n *\n * @dependency mdc-icon\n * @dependency mdc-text\n * @dependency mdc-badge\n * @dependency mdc-tooltip\n *\n * @event click - (React: onClick) This event is dispatched when the navmenuitem is clicked.\n * @event keydown - (React: onKeyDown) This event is dispatched when a key is pressed down on the navmenuitem.\n * @event keyup - (React: onKeyUp) This event is dispatched when a key is released on the navmenuitem.\n * @event focus - (React: onFocus) This event is dispatched when the navmenuitem receives focus.\n * @event activechange - (React: onActiveChange) Dispatched when the active state of the navmenuitem changes.\n *\n * @cssproperty --mdc-navmenuitem-color - Text color of the navmenuitem in its normal state.\n * @cssproperty --mdc-navmenuitem-border-color - Border color of the navmenuitem in its normal state.\n * @cssproperty --mdc-navmenuitem-disabled-color - Text color of the navmenuitem when disabled.\n * @cssproperty --mdc-navmenuitem-expanded-width - Width of the navmenuitem when expanded.\n * @cssproperty --mdc-navmenuitem-hover-background-color - Background color of the navmenuitem when hovered.\n * @cssproperty --mdc-navmenuitem-hover-active-background-color - Background color of the active navmenuitem when hovered.\n * @cssproperty --mdc-navmenuitem-pressed-background-color - Background color of the navmenuitem when pressed.\n * @cssproperty --mdc-navmenuitem-pressed-active-background-color - Background color of the active navmenuitem when pressed.\n * @cssproperty --mdc-navmenuitem-disabled-background-color - Background color of the navmenuitem when disabled.\n * @cssproperty --mdc-navmenuitem-disabled-active-background-color - Background color of the active navmenuitem when disabled.\n * @cssproperty --mdc-navmenuitem-rest-active-background-color - Background color of the active nav item in its rest state.\n */",
+          "jsDoc": "/**\n * `mdc-navmenuitem` is a menuitem styled to work as a navigation tab.\n * It supports a leading icon, optional badge and dynamic text rendering.\n *\n * Note: `mdc-navmenuitem` is intended to be used inside `mdc-menubar` as part of the sideNavigation\n * component. Its structure, spacing, and interactions are designed to align with\n * the visual and functional requirements of side navigation layouts.\n *\n * By providing the tooltip-text attribute, a tooltip will be displayed on hover of the navmenuitem. This tooltip is useful when an active navmenuitem is present within a submenu of the sidenavigation component.\n *\n * @tagname mdc-navmenuitem\n *\n * @dependency mdc-icon\n * @dependency mdc-text\n * @dependency mdc-badge\n * @dependency mdc-tooltip\n *\n * @event click - (React: onClick) This event is dispatched when the navmenuitem is clicked.\n * @event keydown - (React: onKeyDown) This event is dispatched when a key is pressed down on the navmenuitem.\n * @event keyup - (React: onKeyUp) This event is dispatched when a key is released on the navmenuitem.\n * @event focus - (React: onFocus) This event is dispatched when the navmenuitem receives focus.\n * @event activechange - (React: onActiveChange) Dispatched when the active state of the navmenuitem changes.\n *\n * @cssproperty --mdc-navmenuitem-color - Text color of the navmenuitem in its normal state.\n * @cssproperty --mdc-navmenuitem-border-color - Border color of the navmenuitem in its normal state.\n * @cssproperty --mdc-navmenuitem-disabled-color - Text color of the navmenuitem when disabled.\n * @cssproperty --mdc-navmenuitem-expanded-width - Width of the navmenuitem when expanded.\n * @cssproperty --mdc-navmenuitem-hover-background-color - Background color of the navmenuitem when hovered.\n * @cssproperty --mdc-navmenuitem-hover-active-background-color - Background color of the active navmenuitem when hovered.\n * @cssproperty --mdc-navmenuitem-pressed-background-color - Background color of the navmenuitem when pressed.\n * @cssproperty --mdc-navmenuitem-pressed-active-background-color - Background color of the active navmenuitem when pressed.\n * @cssproperty --mdc-navmenuitem-disabled-background-color - Background color of the navmenuitem when disabled.\n * @cssproperty --mdc-navmenuitem-disabled-active-background-color - Background color of the active navmenuitem when disabled.\n * @cssproperty --mdc-navmenuitem-rest-active-background-color - Background color of the active nav item in its rest state.\n */",
           "customElement": true,
           "slots": [
             {
@@ -25143,7 +24785,7 @@
       "declarations": [
         {
           "kind": "class",
-          "description": "Option component, which is used within Selectlistbox within Select component.\n\nThe label and secondary label of the option can be set using the `label` and `secondaryLabel` properties respectively.\nThe `label` is the primary text displayed in the option, while the `secondaryLabel` is the secondary text displayed below the primary label.\n\nThe `selected` property is used to indicate whether the option is selected or not.\nWhen the `selected` property is set to true, a checkmark icon will be displayed\non the right side of the option to indicate that it is selected.\n\nThe `prefixIcon` property can be used to display an icon on the left side of the option label.\nWe can show a tooltip by setting `tooltip-text` attribute. This will be displayed on hover or focus of the option.\nThe tooltip will be helpful for a long label text which is truncated with ellipsis.",
+          "description": "Option component, which is used within Selectlistbox within Select component.\n\nThe label and secondary label of the option can be set using the `label` and `secondaryLabel` properties respectively.\nThe `label` is the primary text displayed in the option, while the `secondaryLabel` is the secondary text displayed below the primary label.\n\nThe `selected` property is used to indicate whether the option is selected or not.\nWhen the `selected` property is set to true, a checkmark icon will be displayed\non the right side of the option to indicate that it is selected.\n\nThe `prefixIcon` property can be used to display an icon on the left side of the option label.\n\n**Note**: If an option contains a long text, it is recommended to create a tooltip for the option that displays the full text on hover.\nConsumers need to add a unique ID to this option and use that ID in the tooltip's `triggerID` attribute. We are not creating the tooltip automatically, consumers need to add `<mdc-tooltip>` element manually and associate it with the option using the `triggerID` attribute.",
           "name": "Option",
           "members": [
             {
@@ -25358,35 +25000,7 @@
                 "text": "string | undefined"
               },
               "description": "The tertiary label of the list item.\nThis appears on the leading side of the list item.",
-              "attribute": "tertiary-label",
-              "reflects": true,
-              "inheritedFrom": {
-                "name": "ListItem",
-                "module": "components/listitem/listitem.component.js"
-              }
-            },
-            {
-              "kind": "field",
-              "name": "sideHeaderText",
-              "type": {
-                "text": "string | undefined"
-              },
-              "description": "The header text of the list item.\nThis appears on the trailing side of the list item.",
-              "attribute": "side-header-text",
-              "reflects": true,
-              "inheritedFrom": {
-                "name": "ListItem",
-                "module": "components/listitem/listitem.component.js"
-              }
-            },
-            {
-              "kind": "field",
-              "name": "sublineText",
-              "type": {
-                "text": "string | undefined"
-              },
-              "description": "The subline text of the list item.\nThis appears on the trailing side of the list item.",
-              "attribute": "subline-text",
+              "attribute": "tertiary-label",
               "reflects": true,
               "inheritedFrom": {
                 "name": "ListItem",
@@ -25395,13 +25009,12 @@
             },
             {
               "kind": "field",
-              "name": "softDisabled",
+              "name": "sideHeaderText",
               "type": {
-                "text": "boolean | undefined"
+                "text": "string | undefined"
               },
-              "description": "Indicates whether the element is soft disabled.\nWhen set to `true`, the element appears visually disabled but still allows\nfocus, click, and keyboard actions to be passed through.\n\n**Important:** When using soft disabled, consumers must ensure that\nthe element behaves like a disabled element, allowing only focus and\npreventing any interactions (clicks or keyboard actions) from triggering unintended actions.",
-              "default": "undefined",
-              "attribute": "soft-disabled",
+              "description": "The header text of the list item.\nThis appears on the trailing side of the list item.",
+              "attribute": "side-header-text",
               "reflects": true,
               "inheritedFrom": {
                 "name": "ListItem",
@@ -25410,12 +25023,12 @@
             },
             {
               "kind": "field",
-              "name": "tooltipText",
+              "name": "sublineText",
               "type": {
                 "text": "string | undefined"
               },
-              "description": "The tooltip text is displayed on hover of the list item.",
-              "attribute": "tooltip-text",
+              "description": "The subline text of the list item.\nThis appears on the trailing side of the list item.",
+              "attribute": "subline-text",
               "reflects": true,
               "inheritedFrom": {
                 "name": "ListItem",
@@ -25424,13 +25037,13 @@
             },
             {
               "kind": "field",
-              "name": "tooltipPlacement",
+              "name": "softDisabled",
               "type": {
-                "text": "PopoverPlacement"
+                "text": "boolean | undefined"
               },
-              "description": "The tooltip placement of the list item. If the tooltip text is present,\nthen this tooltip placement will be applied.",
-              "default": "'top'",
-              "attribute": "tooltip-placement",
+              "description": "Indicates whether the element is soft disabled.\nWhen set to `true`, the element appears visually disabled but still allows\nfocus, click, and keyboard actions to be passed through.\n\n**Important:** When using soft disabled, consumers must ensure that\nthe element behaves like a disabled element, allowing only focus and\npreventing any interactions (clicks or keyboard actions) from triggering unintended actions.",
+              "default": "undefined",
+              "attribute": "soft-disabled",
               "reflects": true,
               "inheritedFrom": {
                 "name": "ListItem",
@@ -25439,8 +25052,8 @@
             },
             {
               "kind": "method",
-              "name": "handleKeyDown",
-              "privacy": "protected",
+              "name": "handleClick",
+              "privacy": "private",
               "return": {
                 "type": {
                   "text": "void"
@@ -25450,12 +25063,12 @@
                 {
                   "name": "event",
                   "type": {
-                    "text": "KeyboardEvent"
+                    "text": "MouseEvent"
                   },
-                  "description": "The keyboard event triggered when a key is pressed down."
+                  "description": "The mouse event triggered when the list item is clicked."
                 }
               ],
-              "description": "Fires the click event when the enter or space key is pressed down.\nThis behavior is similar to a button click and key interaction.",
+              "description": "Handles the click event on the list item.\nPrevents click when listitem is disabled",
               "inheritedFrom": {
                 "name": "ListItem",
                 "module": "components/listitem/listitem.component.js"
@@ -25463,18 +25076,8 @@
             },
             {
               "kind": "method",
-              "name": "triggerClickEvent",
+              "name": "handleKeyDown",
               "privacy": "protected",
-              "description": "Triggers a click event on the list item.",
-              "inheritedFrom": {
-                "name": "ListItem",
-                "module": "components/listitem/listitem.component.js"
-              }
-            },
-            {
-              "kind": "method",
-              "name": "handleClick",
-              "privacy": "private",
               "return": {
                 "type": {
                   "text": "void"
@@ -25484,26 +25087,12 @@
                 {
                   "name": "event",
                   "type": {
-                    "text": "MouseEvent"
-                  }
+                    "text": "KeyboardEvent"
+                  },
+                  "description": "The keyboard event triggered when a key is pressed down."
                 }
               ],
-              "description": "Handles the click event on the list item.\nIf the tooltip is open, it has to be closed first.",
-              "inheritedFrom": {
-                "name": "ListItem",
-                "module": "components/listitem/listitem.component.js"
-              }
-            },
-            {
-              "kind": "method",
-              "name": "displayTooltipForLongText",
-              "privacy": "private",
-              "return": {
-                "type": {
-                  "text": "void"
-                }
-              },
-              "description": "Display a tooltip for the listitem.\nCreate the tooltip programmatically after the nearest parent element.",
+              "description": "Fires the click event when the enter or space key is pressed down.\nThis behavior is similar to a button click and key interaction.",
               "inheritedFrom": {
                 "name": "ListItem",
                 "module": "components/listitem/listitem.component.js"
@@ -25511,14 +25100,9 @@
             },
             {
               "kind": "method",
-              "name": "hideTooltipOnLeave",
-              "privacy": "private",
-              "return": {
-                "type": {
-                  "text": "void"
-                }
-              },
-              "description": "Removes the dynamically created tooltip for long text label on focus or mouse leave.\nThis is triggered on focusout and mouseout events.",
+              "name": "triggerClickEvent",
+              "privacy": "protected",
+              "description": "Triggers a click event on the list item.",
               "inheritedFrom": {
                 "name": "ListItem",
                 "module": "components/listitem/listitem.component.js"
@@ -25893,31 +25477,6 @@
                 "name": "ListItem",
                 "module": "src/components/listitem/listitem.component.ts"
               }
-            },
-            {
-              "name": "tooltip-text",
-              "type": {
-                "text": "string | undefined"
-              },
-              "description": "The tooltip text is displayed on hover of the list item.",
-              "fieldName": "tooltipText",
-              "inheritedFrom": {
-                "name": "ListItem",
-                "module": "src/components/listitem/listitem.component.ts"
-              }
-            },
-            {
-              "name": "tooltip-placement",
-              "type": {
-                "text": "PopoverPlacement"
-              },
-              "description": "The tooltip placement of the list item. If the tooltip text is present,\nthen this tooltip placement will be applied.",
-              "default": "'top'",
-              "fieldName": "tooltipPlacement",
-              "inheritedFrom": {
-                "name": "ListItem",
-                "module": "src/components/listitem/listitem.component.ts"
-              }
             }
           ],
           "mixins": [
@@ -25931,7 +25490,7 @@
             "module": "/src/components/listitem/listitem.component"
           },
           "tagName": "mdc-option",
-          "jsDoc": "/**\n * Option component, which is used within Selectlistbox within Select component.\n *\n * The label and secondary label of the option can be set using the `label` and `secondaryLabel` properties respectively.\n * The `label` is the primary text displayed in the option, while the `secondaryLabel` is the secondary text displayed below the primary label.\n *\n * The `selected` property is used to indicate whether the option is selected or not.\n * When the `selected` property is set to true, a checkmark icon will be displayed\n * on the right side of the option to indicate that it is selected.\n *\n * The `prefixIcon` property can be used to display an icon on the left side of the option label.\n * We can show a tooltip by setting `tooltip-text` attribute. This will be displayed on hover or focus of the option.\n * The tooltip will be helpful for a long label text which is truncated with ellipsis.\n *\n * @dependency mdc-icon\n * @dependency mdc-text\n * @dependency mdc-tooltip\n *\n * @tagname mdc-option\n *\n * @event click - (React: onClick) This event is dispatched when the option is clicked.\n * @event keydown - (React: onKeyDown) This event is dispatched when a key is pressed down on the option.\n * @event keyup - (React: onKeyUp) This event is dispatched when a key is released on the option.\n * @event focus - (React: onFocus) This event is dispatched when the option receives focus.\n */",
+          "jsDoc": "/**\n * Option component, which is used within Selectlistbox within Select component.\n *\n * The label and secondary label of the option can be set using the `label` and `secondaryLabel` properties respectively.\n * The `label` is the primary text displayed in the option, while the `secondaryLabel` is the secondary text displayed below the primary label.\n *\n * The `selected` property is used to indicate whether the option is selected or not.\n * When the `selected` property is set to true, a checkmark icon will be displayed\n * on the right side of the option to indicate that it is selected.\n *\n * The `prefixIcon` property can be used to display an icon on the left side of the option label.\n *\n * **Note**: If an option contains a long text, it is recommended to create a tooltip for the option that displays the full text on hover.\n * Consumers need to add a unique ID to this option and use that ID in the tooltip's `triggerID` attribute. We are not creating the tooltip automatically, consumers need to add `<mdc-tooltip>` element manually and associate it with the option using the `triggerID` attribute.\n *\n * @dependency mdc-icon\n * @dependency mdc-text\n *\n * @tagname mdc-option\n *\n * @event click - (React: onClick) This event is dispatched when the option is clicked.\n * @event keydown - (React: onKeyDown) This event is dispatched when a key is pressed down on the option.\n * @event keyup - (React: onKeyUp) This event is dispatched when a key is released on the option.\n * @event focus - (React: onFocus) This event is dispatched when the option receives focus.\n */",
           "customElement": true,
           "slots": [
             {
@@ -32703,7 +32262,7 @@
       "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.",
+          "description": "The mdc-select component is a dropdown selection control that allows users to pick an option from a predefined list.\nIt is designed to work with `mdc-option` for individual options and `mdc-optgroup` for grouping related options.\n\nEvery mdc-option should have a `value` attribute set to ensure proper form submission.\n\nTo set a default option, use the `selected` attribute on the `mdc-option` element.\n\n**Note:** Make sure to add `mdc-selectlistbox` as a child of `mdc-select` and wrap options/optgroup in it to ensure proper accessibility functionality. Read more about it in SelectListBox documentation.\n\nIf you need to use `mdc-tooltip` with any options, make sure to place the tooltip component outside the `mdc-select` element.",
           "name": "Select",
           "cssProperties": [
             {
@@ -33709,7 +33268,7 @@
             "module": "/src/components/formfieldwrapper/formfieldwrapper.component"
           },
           "tagName": "mdc-select",
-          "jsDoc": "/**\n * The mdc-select component is a dropdown selection control that allows users to pick an option from a predefined list.\n * It is designed to work with `mdc-option` for individual options and `mdc-optgroup` for grouping related options.\n * The component ensures accessibility and usability while handling various use cases,\n * including long text truncation with tooltip support.\n *\n * Every mdc-option should have a `value` attribute set to ensure proper form submission.\n *\n * To set a default option, use the `selected` attribute on the `mdc-option` element.\n *\n * **Note:** Make sure to add `mdc-selectlistbox` as a child of `mdc-select` and wrap options/optgroup in it to ensure proper accessibility functionality. Read more about it in SelectListBox documentation.\n *\n * @dependency mdc-button\n * @dependency mdc-icon\n * @dependency mdc-popover\n * @dependency mdc-text\n * @dependency mdc-toggletip\n *\n * @tagname mdc-select\n *\n * @slot default - This is a default/unnamed slot for Selectlistbox including options and/or option group.\n *\n * @event click - (React: onClick) This event is dispatched when the select is clicked.\n * @event change - (React: onChange) This event is dispatched when the select is changed.\n * @event input - (React: onInput) This event is dispatched when the select is changed.\n * @event keydown - (React: onKeyDown) This event is dispatched when a key is pressed down on the select.\n * @event focus - (React: onFocus) This event is dispatched when the select receives focus.\n *\n * @cssproperty --mdc-select-background-color - The background color of the combobox of select.\n * @cssproperty --mdc-select-background-color-hover - The background color of the combobox of select when hovered.\n * @cssproperty --mdc-select-background-color-active - The background color of the combobox of select when active.\n * @cssproperty --mdc-select-background-color-disabled - The background color of the combobox of select when disabled.\n * @cssproperty --mdc-select-text-color - The text color of the select.\n * @cssproperty --mdc-select-text-color-selected - The text color of the selected option in the select.\n * @cssproperty --mdc-select-text-color-disabled - The text color of the select when disabled.\n * @cssproperty --mdc-select-border-color - The border color of the select.\n * @cssproperty --mdc-select-border-color-disabled - The border color of the select when disabled.\n * @cssproperty --mdc-select-border-color-success - The border color of the select when in success state.\n * @cssproperty --mdc-select-border-color-warning - The border color of the select when in warning state.\n * @cssproperty --mdc-select-border-color-error - The border color of the select when in error state.\n * @cssproperty --mdc-select-width - The width of the select.\n * @cssproperty --mdc-select-listbox-height - The height of the listbox inside the select.\n * @cssproperty --mdc-select-listbox-width - The width of the listbox inside the select (default: `--mdc-select-width`).\n */",
+          "jsDoc": "/**\n * The mdc-select component is a dropdown selection control that allows users to pick an option from a predefined list.\n * It is designed to work with `mdc-option` for individual options and `mdc-optgroup` for grouping related options.\n *\n * Every mdc-option should have a `value` attribute set to ensure proper form submission.\n *\n * To set a default option, use the `selected` attribute on the `mdc-option` element.\n *\n * **Note:** Make sure to add `mdc-selectlistbox` as a child of `mdc-select` and wrap options/optgroup in it to ensure proper accessibility functionality. Read more about it in SelectListBox documentation.\n *\n * If you need to use `mdc-tooltip` with any options, make sure to place the tooltip component outside the `mdc-select` element.\n *\n * @dependency mdc-button\n * @dependency mdc-icon\n * @dependency mdc-popover\n * @dependency mdc-text\n * @dependency mdc-toggletip\n *\n * @tagname mdc-select\n *\n * @slot default - This is a default/unnamed slot for Selectlistbox including options and/or option group.\n *\n * @event click - (React: onClick) This event is dispatched when the select is clicked.\n * @event change - (React: onChange) This event is dispatched when the select is changed.\n * @event input - (React: onInput) This event is dispatched when the select is changed.\n * @event keydown - (React: onKeyDown) This event is dispatched when a key is pressed down on the select.\n * @event focus - (React: onFocus) This event is dispatched when the select receives focus.\n *\n * @cssproperty --mdc-select-background-color - The background color of the combobox of select.\n * @cssproperty --mdc-select-background-color-hover - The background color of the combobox of select when hovered.\n * @cssproperty --mdc-select-background-color-active - The background color of the combobox of select when active.\n * @cssproperty --mdc-select-background-color-disabled - The background color of the combobox of select when disabled.\n * @cssproperty --mdc-select-text-color - The text color of the select.\n * @cssproperty --mdc-select-text-color-selected - The text color of the selected option in the select.\n * @cssproperty --mdc-select-text-color-disabled - The text color of the select when disabled.\n * @cssproperty --mdc-select-border-color - The border color of the select.\n * @cssproperty --mdc-select-border-color-disabled - The border color of the select when disabled.\n * @cssproperty --mdc-select-border-color-success - The border color of the select when in success state.\n * @cssproperty --mdc-select-border-color-warning - The border color of the select when in warning state.\n * @cssproperty --mdc-select-border-color-error - The border color of the select when in error state.\n * @cssproperty --mdc-select-width - The width of the select.\n * @cssproperty --mdc-select-listbox-height - The height of the listbox inside the select.\n * @cssproperty --mdc-select-listbox-width - The width of the listbox inside the select (default: `--mdc-select-width`).\n */",
           "customElement": true
         }
       ],
@@ -33982,6 +33541,88 @@
         }
       ]
     },
+    {
+      "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/slider/slider.component.js",
@@ -34494,88 +34135,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",