@momentum-design/components 0.120.29 → 0.120.31

package/dist/custom-elements.json

@@ -3253,10 +3253,6 @@
             }
           ],
           "cssParts": [
-            {
-              "description": "The main content of the avatar.",
-              "name": "content"
-            },
             {
               "description": "The photo of the avatar.",
               "name": "photo"
@@ -3385,7 +3381,7 @@
             "module": "/src/models"
           },
           "tagName": "mdc-avatar",
-          "jsDoc": "/**\n * The `mdc-avatar` component is used to represent a person or a space.\n * An avatar can be an icon, initials, counter and photo.\n *\n * To set the photo of an avatar,\n * you need to set \"src\" attribute.\n *\n * While the avatar image is loading, as a placeholder,\n * we will show the initials text.\n * If the initials are not specified then,\n * we will show `user-regular` icon as a placeholder.\n *\n * By default, if there are no attributes specified,\n * then the default avatar will be an icon with `user-regular` name.\n *\n * The avatar component is non clickable and non interactive/focusable component.\n * If the avatar is typing, then the loading indicator will be displayed.\n * If the counter type avatar is set to a negative number, then we will display 0.\n * The presence indicator will be hidden when the counter property is set.\n *\n * @dependency mdc-icon\n * @dependency mdc-presence\n * @dependency mdc-text\n *\n * @tagname mdc-avatar\n *\n * @cssproperty --mdc-avatar-default-background-color - Allows customization of the default background color.\n * @cssproperty --mdc-avatar-default-foreground-color - Allows customization of the default foreground color.\n * @cssproperty --mdc-avatar-loading-indicator-background-color -\n *  Allows customization of the loading indicator background color.\n * @cssproperty --mdc-avatar-loading-indicator-foreground-color -\n *  Allows customization of the loading indicator foreground color.\n * @cssproperty --mdc-avatar-loading-overlay-background-color -\n *  Allows customization of the loading overlay background color.\n *\n * @csspart content - The main content of the avatar.\n * @csspart photo - The photo of the avatar.\n * @csspart presence - The presence indicator of the avatar.\n * @csspart loading-wrapper - The wrapper for the loading indicator.\n * @csspart loader - The loading indicator of the avatar.\n */",
+          "jsDoc": "/**\n * The `mdc-avatar` component is used to represent a person or a space.\n * An avatar can be an icon, initials, counter and photo.\n *\n * To set the photo of an avatar,\n * you need to set \"src\" attribute.\n *\n * While the avatar image is loading, as a placeholder,\n * we will show the initials text.\n * If the initials are not specified then,\n * we will show `user-regular` icon as a placeholder.\n *\n * By default, if there are no attributes specified,\n * then the default avatar will be an icon with `user-regular` name.\n *\n * The avatar component is non clickable and non interactive/focusable component.\n * If the avatar is typing, then the loading indicator will be displayed.\n * If the counter type avatar is set to a negative number, then we will display 0.\n * The presence indicator will be hidden when the counter property is set.\n *\n * @dependency mdc-icon\n * @dependency mdc-presence\n * @dependency mdc-text\n *\n * @tagname mdc-avatar\n *\n * @cssproperty --mdc-avatar-default-background-color - Allows customization of the default background color.\n * @cssproperty --mdc-avatar-default-foreground-color - Allows customization of the default foreground color.\n * @cssproperty --mdc-avatar-loading-indicator-background-color -\n *  Allows customization of the loading indicator background color.\n * @cssproperty --mdc-avatar-loading-indicator-foreground-color -\n *  Allows customization of the loading indicator foreground color.\n * @cssproperty --mdc-avatar-loading-overlay-background-color -\n *  Allows customization of the loading overlay background color.\n *\n * @csspart photo - The photo of the avatar.\n * @csspart presence - The presence indicator of the avatar.\n * @csspart loading-wrapper - The wrapper for the loading indicator.\n * @csspart loader - The loading indicator of the avatar.\n */",
           "customElement": true,
           "attributes": [
             {
@@ -4766,182 +4762,6 @@
         }
       ]
     },
-    {
-      "kind": "javascript-module",
-      "path": "components/brandvisual/brandvisual.component.js",
-      "declarations": [
-        {
-          "kind": "class",
-          "description": "The `mdc-brandvisual` component is responsible for rendering logos dynamically & ensures they are\ndisplayed correctly within applications.\n\nFeatures:\n- Dynamically loads brandvisuals based on the `name` attribute.\n- Emits a `load` event when the brandvisual is successfully fetched.\n- Emits an `error` event when the brandvisual import fails.\n- Supports accessibility best practices.\n- Used for brand representation within the design system.",
-          "name": "Brandvisual",
-          "members": [
-            {
-              "kind": "field",
-              "name": "brandVisualData",
-              "type": {
-                "text": "Element | TemplateResult | undefined"
-              },
-              "privacy": "private"
-            },
-            {
-              "kind": "field",
-              "name": "name",
-              "type": {
-                "text": "BrandVisualNames | undefined"
-              },
-              "description": "Name of the brandVisual (= filename)",
-              "attribute": "name",
-              "reflects": true
-            },
-            {
-              "kind": "field",
-              "name": "altText",
-              "type": {
-                "text": "string | undefined"
-              },
-              "description": "Alt text for the brandvisual image for accessibility.\nThis will only be set if the brandvisual is an image (png).",
-              "attribute": "altText",
-              "reflects": true
-            },
-            {
-              "kind": "method",
-              "name": "getBrandVisualData",
-              "privacy": "private"
-            },
-            {
-              "kind": "method",
-              "name": "injectTemplateAttributes",
-              "privacy": "private",
-              "return": {
-                "type": {
-                  "text": "Element | TemplateResult"
-                }
-              },
-              "parameters": [
-                {
-                  "name": "litTemplate",
-                  "type": {
-                    "text": "TemplateResult"
-                  }
-                },
-                {
-                  "name": "tag",
-                  "type": {
-                    "text": "string"
-                  }
-                },
-                {
-                  "name": "props",
-                  "type": {
-                    "text": "any"
-                  }
-                }
-              ]
-            },
-            {
-              "kind": "method",
-              "name": "injectHtmlAttributes",
-              "privacy": "private",
-              "return": {
-                "type": {
-                  "text": "Element"
-                }
-              },
-              "parameters": [
-                {
-                  "name": "html",
-                  "type": {
-                    "text": "Element"
-                  }
-                },
-                {
-                  "name": "props",
-                  "type": {
-                    "text": "imageProps"
-                  }
-                }
-              ]
-            },
-            {
-              "kind": "method",
-              "name": "handleBrandVisualLoadedSuccess",
-              "privacy": "private",
-              "parameters": [
-                {
-                  "name": "brandVisualHtml",
-                  "type": {
-                    "text": "TemplateResult"
-                  },
-                  "description": "The brandvisual html element which has been fetched from the brandvisual provider."
-                }
-              ],
-              "description": "Sets the brandVisualData state to the fetched brandvisual.\nDispatches a 'load' event on the component once the brandvisual has been successfully loaded."
-            },
-            {
-              "kind": "method",
-              "name": "handleBrandVisualLoadedFailure",
-              "privacy": "private",
-              "parameters": [
-                {
-                  "name": "error",
-                  "type": {
-                    "text": "unknown"
-                  }
-                }
-              ],
-              "description": "Dispatches an 'error' event on the component when the brandvisual import has failed.\nThis event bubbles and is cancelable.\nThe error detail is set to the error object."
-            }
-          ],
-          "events": [
-            {
-              "description": "(React: onLoad) This event is dispatched when the brandvisual has been successfully loaded.",
-              "name": "load",
-              "reactName": "onLoad"
-            },
-            {
-              "description": "(React: onError) This event is dispatched when the brandvisual fetching has failed.",
-              "name": "error",
-              "reactName": "onError"
-            }
-          ],
-          "attributes": [
-            {
-              "name": "name",
-              "type": {
-                "text": "BrandVisualNames | undefined"
-              },
-              "description": "Name of the brandVisual (= filename)",
-              "fieldName": "name"
-            },
-            {
-              "name": "altText",
-              "type": {
-                "text": "string | undefined"
-              },
-              "description": "Alt text for the brandvisual image for accessibility.\nThis will only be set if the brandvisual is an image (png).",
-              "fieldName": "altText"
-            }
-          ],
-          "superclass": {
-            "name": "Component",
-            "module": "/src/models"
-          },
-          "tagName": "mdc-brandvisual",
-          "jsDoc": "/**\n * The `mdc-brandvisual` component is responsible for rendering logos dynamically & ensures they are\n * displayed correctly within applications.\n *\n * Features:\n * - Dynamically loads brandvisuals based on the `name` attribute.\n * - Emits a `load` event when the brandvisual is successfully fetched.\n * - Emits an `error` event when the brandvisual import fails.\n * - Supports accessibility best practices.\n * - Used for brand representation within the design system.\n *\n * @tagname mdc-brandvisual\n *\n * @event load - (React: onLoad) This event is dispatched when the brandvisual has been successfully loaded.\n * @event error - (React: onError) This event is dispatched when the brandvisual fetching has failed.\n *\n */",
-          "customElement": true
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "default",
-          "declaration": {
-            "name": "Brandvisual",
-            "module": "components/brandvisual/brandvisual.component.js"
-          }
-        }
-      ]
-    },
     {
       "kind": "javascript-module",
       "path": "components/bullet/bullet.component.js",
@@ -5828,6 +5648,182 @@
         }
       ]
     },
+    {
+      "kind": "javascript-module",
+      "path": "components/brandvisual/brandvisual.component.js",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "The `mdc-brandvisual` component is responsible for rendering logos dynamically & ensures they are\ndisplayed correctly within applications.\n\nFeatures:\n- Dynamically loads brandvisuals based on the `name` attribute.\n- Emits a `load` event when the brandvisual is successfully fetched.\n- Emits an `error` event when the brandvisual import fails.\n- Supports accessibility best practices.\n- Used for brand representation within the design system.",
+          "name": "Brandvisual",
+          "members": [
+            {
+              "kind": "field",
+              "name": "brandVisualData",
+              "type": {
+                "text": "Element | TemplateResult | undefined"
+              },
+              "privacy": "private"
+            },
+            {
+              "kind": "field",
+              "name": "name",
+              "type": {
+                "text": "BrandVisualNames | undefined"
+              },
+              "description": "Name of the brandVisual (= filename)",
+              "attribute": "name",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "altText",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "Alt text for the brandvisual image for accessibility.\nThis will only be set if the brandvisual is an image (png).",
+              "attribute": "altText",
+              "reflects": true
+            },
+            {
+              "kind": "method",
+              "name": "getBrandVisualData",
+              "privacy": "private"
+            },
+            {
+              "kind": "method",
+              "name": "injectTemplateAttributes",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "Element | TemplateResult"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "litTemplate",
+                  "type": {
+                    "text": "TemplateResult"
+                  }
+                },
+                {
+                  "name": "tag",
+                  "type": {
+                    "text": "string"
+                  }
+                },
+                {
+                  "name": "props",
+                  "type": {
+                    "text": "any"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "injectHtmlAttributes",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "Element"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "html",
+                  "type": {
+                    "text": "Element"
+                  }
+                },
+                {
+                  "name": "props",
+                  "type": {
+                    "text": "imageProps"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "handleBrandVisualLoadedSuccess",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "brandVisualHtml",
+                  "type": {
+                    "text": "TemplateResult"
+                  },
+                  "description": "The brandvisual html element which has been fetched from the brandvisual provider."
+                }
+              ],
+              "description": "Sets the brandVisualData state to the fetched brandvisual.\nDispatches a 'load' event on the component once the brandvisual has been successfully loaded."
+            },
+            {
+              "kind": "method",
+              "name": "handleBrandVisualLoadedFailure",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "error",
+                  "type": {
+                    "text": "unknown"
+                  }
+                }
+              ],
+              "description": "Dispatches an 'error' event on the component when the brandvisual import has failed.\nThis event bubbles and is cancelable.\nThe error detail is set to the error object."
+            }
+          ],
+          "events": [
+            {
+              "description": "(React: onLoad) This event is dispatched when the brandvisual has been successfully loaded.",
+              "name": "load",
+              "reactName": "onLoad"
+            },
+            {
+              "description": "(React: onError) This event is dispatched when the brandvisual fetching has failed.",
+              "name": "error",
+              "reactName": "onError"
+            }
+          ],
+          "attributes": [
+            {
+              "name": "name",
+              "type": {
+                "text": "BrandVisualNames | undefined"
+              },
+              "description": "Name of the brandVisual (= filename)",
+              "fieldName": "name"
+            },
+            {
+              "name": "altText",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "Alt text for the brandvisual image for accessibility.\nThis will only be set if the brandvisual is an image (png).",
+              "fieldName": "altText"
+            }
+          ],
+          "superclass": {
+            "name": "Component",
+            "module": "/src/models"
+          },
+          "tagName": "mdc-brandvisual",
+          "jsDoc": "/**\n * The `mdc-brandvisual` component is responsible for rendering logos dynamically & ensures they are\n * displayed correctly within applications.\n *\n * Features:\n * - Dynamically loads brandvisuals based on the `name` attribute.\n * - Emits a `load` event when the brandvisual is successfully fetched.\n * - Emits an `error` event when the brandvisual import fails.\n * - Supports accessibility best practices.\n * - Used for brand representation within the design system.\n *\n * @tagname mdc-brandvisual\n *\n * @event load - (React: onLoad) This event is dispatched when the brandvisual has been successfully loaded.\n * @event error - (React: onError) This event is dispatched when the brandvisual fetching has failed.\n *\n */",
+          "customElement": true
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "default",
+          "declaration": {
+            "name": "Brandvisual",
+            "module": "components/brandvisual/brandvisual.component.js"
+          }
+        }
+      ]
+    },
     {
       "kind": "javascript-module",
       "path": "components/buttongroup/buttongroup.component.js",
@@ -46588,24 +46584,28 @@
     },
     {
       "kind": "javascript-module",
-      "path": "components/toggletip/toggletip.component.js",
+      "path": "components/tooltip/tooltip.component.js",
       "declarations": [
         {
           "kind": "class",
-          "description": "A toggletip is triggered by clicking a trigger element.\n\nIt can contain interactive content and can be closed by\nclicking outside the toggletip or pressing the escape key.\n\nIt can have optional close button to close the toggletip.\n\nToggletip component uses `mdc-screenreaderannouncer` internally to\nannounce the toggletip text content with screen readers when the toggletip is shown.\n\n`screenreader-announcer-identity` attribute can be used to provide ID of an element\nin DOM to which announcement elements are added. If not set, a visually hidden\ndiv element is created in DOM to which announcement elements are added.\n\nPlease refer to the `mdc-screenreaderannouncer` component for more details.",
-          "name": "ToggleTip",
+          "description": "A tooltip is triggered by mouse hover or by keyboard focus\nand will disappear upon mouse exit or focus change.\n\nNote: Tooltips cannot contain content that can be focused or interacted with.",
+          "name": "Tooltip",
           "cssProperties": [
             {
-              "description": "The maximum width of the toggletip.",
-              "name": "--mdc-toggletip-max-width"
+              "description": "The maximum width of the tooltip.",
+              "name": "--mdc-tooltip-max-width"
             },
             {
-              "description": "The text color of the toggletip.",
-              "name": "--mdc-toggletip-text-color"
+              "description": "The padding of the tooltip.",
+              "name": "--mdc-tooltip-padding"
             },
             {
-              "description": "The text color of the toggletip when the color is contrast.",
-              "name": "--mdc-toggletip-text-color-contrast"
+              "description": "The text color of the tooltip.",
+              "name": "--mdc-tooltip-text-color"
+            },
+            {
+              "description": "The text color of the tooltip when the color is contrast.",
+              "name": "--mdc-tooltip-text-color-contrast"
             },
             {
               "description": "radius of the arrow border",
@@ -46696,53 +46696,29 @@
               }
             }
           ],
-          "slots": [
-            {
-              "description": "Default slot for the toggletip content",
-              "name": "",
-              "inheritedFrom": {
-                "name": "Popover",
-                "module": "src/components/popover/popover.component.ts"
-              }
-            }
-          ],
           "members": [
             {
               "kind": "field",
-              "name": "defaultSlotNodes",
-              "type": {
-                "text": "Array<Node>"
-              },
-              "privacy": "private"
-            },
-            {
-              "kind": "field",
-              "name": "screenreaderAnnouncerIdentity",
+              "name": "tooltipType",
               "type": {
-                "text": "string | undefined"
+                "text": "TooltipType"
               },
-              "description": "Set this attribute with the id of the element in the DOM, to which announcement\nelements will be appended.\nIf an id is provided, the announcement elements will be appended to this element.\nIf id is not provided, a visually hidden div element will be created in the DOM.\n\nPlease refer to the `mdc-screenreaderannouncer` component for more details.",
-              "attribute": "screenreader-announcer-identity",
+              "description": "The type of tooltip.\n- **description** sets aria-describedby on the trigger component which refers to the tooltip id.\n- **label** sets aria-labelledby on the trigger component which refers to the tooltip id.\n- **none** no aria props set on trigger component referring to the tooltip id.",
+              "default": "'description'",
+              "attribute": "tooltip-type",
               "reflects": true
             },
             {
               "kind": "field",
-              "name": "placement",
+              "name": "defaultSlotNodes",
               "type": {
-                "text": "PopoverPlacement"
+                "text": "Array<Node>"
               },
-              "description": "The placement of the popover.\n- **top**\n- **top-start**\n- **top-end**\n- **bottom**\n- **bottom-start**\n- **bottom-end**\n- **left**\n- **left-start**\n- **left-end**\n- **right**\n- **right-start**\n- **right-end**",
-              "default": "bottom",
-              "attribute": "placement",
-              "reflects": true,
-              "inheritedFrom": {
-                "name": "Popover",
-                "module": "components/popover/popover.component.js"
-              }
+              "privacy": "private"
             },
             {
               "kind": "method",
-              "name": "getToggleTipText",
+              "name": "getTooltipText",
               "privacy": "private",
               "return": {
                 "type": {
@@ -46750,6 +46726,37 @@
                 }
               }
             },
+            {
+              "kind": "method",
+              "name": "setTooltipType",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "type",
+                  "type": {
+                    "text": "TooltipType"
+                  },
+                  "description": "The type to set."
+                }
+              ],
+              "description": "Sets the type attribute for the tooltip component.\nIf the provided type is not included in the TOOLTIP_TYPES,\nit defaults to the value specified in DEFAULTS.TOOLTIP_TYPE."
+            },
+            {
+              "kind": "method",
+              "name": "onIdUpdated",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "Promise<void>"
+                }
+              },
+              "description": "Updates the tooltip id if it is empty."
+            },
             {
               "kind": "method",
               "name": "onPlacementUpdated",
@@ -46759,7 +46766,27 @@
                   "text": "void"
                 }
               },
-              "description": "Updates the placement attribute if it is not a valid placement.\nDefault placement for toggle tip is top."
+              "description": "Updates the placement attribute if it is not a valid placement.\nOverriding the default from Popover"
+            },
+            {
+              "kind": "method",
+              "name": "onTooltipTypeUpdated",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "changedProperties",
+                  "type": {
+                    "text": "PropertyValues"
+                  },
+                  "description": "The changed properties."
+                }
+              ],
+              "description": "Updates the tooltip type attribute and sets the appropriate aria props on the trigger component."
             },
             {
               "kind": "field",
@@ -47351,6 +47378,21 @@
                 "module": "components/popover/popover.component.js"
               }
             },
+            {
+              "kind": "field",
+              "name": "placement",
+              "type": {
+                "text": "PopoverPlacement"
+              },
+              "description": "The placement of the popover.\n- **top**\n- **top-start**\n- **top-end**\n- **bottom**\n- **bottom-start**\n- **bottom-end**\n- **left**\n- **left-start**\n- **left-end**\n- **right**\n- **right-start**\n- **right-end**",
+              "default": "bottom",
+              "attribute": "placement",
+              "reflects": true,
+              "inheritedFrom": {
+                "name": "Popover",
+                "module": "components/popover/popover.component.js"
+              }
+            },
             {
               "kind": "field",
               "name": "color",
@@ -48052,7 +48094,7 @@
           ],
           "events": [
             {
-              "description": "(React: onShown) This event is dispatched when the toggletip is shown",
+              "description": "(React: onShown) This event is dispatched when the tooltip is shown",
               "name": "shown",
               "reactName": "onShown",
               "inheritedFrom": {
@@ -48061,7 +48103,7 @@
               }
             },
             {
-              "description": "(React: onHidden) This event is dispatched when the toggletip is hidden",
+              "description": "(React: onHidden) This event is dispatched when the tooltip is hidden",
               "name": "hidden",
               "reactName": "onHidden",
               "inheritedFrom": {
@@ -48070,7 +48112,7 @@
               }
             },
             {
-              "description": "(React: onCreated) This event is dispatched when the toggletip is created (added to the DOM)",
+              "description": "(React: onCreated) This event is dispatched when the tooltip is created (added to the DOM)",
               "name": "created",
               "reactName": "onCreated",
               "inheritedFrom": {
@@ -48079,7 +48121,7 @@
               }
             },
             {
-              "description": "(React: onDestroyed) This event is dispatched when the toggletip is destroyed (removed from the DOM)",
+              "description": "(React: onDestroyed) This event is dispatched when the tooltip is destroyed (removed from the DOM)",
               "name": "destroyed",
               "reactName": "onDestroyed",
               "inheritedFrom": {
@@ -48090,25 +48132,13 @@
           ],
           "attributes": [
             {
-              "name": "screenreader-announcer-identity",
-              "type": {
-                "text": "string | undefined"
-              },
-              "description": "Set this attribute with the id of the element in the DOM, to which announcement\nelements will be appended.\nIf an id is provided, the announcement elements will be appended to this element.\nIf id is not provided, a visually hidden div element will be created in the DOM.\n\nPlease refer to the `mdc-screenreaderannouncer` component for more details.",
-              "fieldName": "screenreaderAnnouncerIdentity"
-            },
-            {
-              "name": "placement",
+              "name": "tooltip-type",
               "type": {
-                "text": "PopoverPlacement"
+                "text": "TooltipType"
               },
-              "description": "The placement of the popover.\n- **top**\n- **top-start**\n- **top-end**\n- **bottom**\n- **bottom-start**\n- **bottom-end**\n- **left**\n- **left-start**\n- **left-end**\n- **right**\n- **right-start**\n- **right-end**",
-              "default": "bottom",
-              "fieldName": "placement",
-              "inheritedFrom": {
-                "name": "Popover",
-                "module": "src/components/popover/popover.component.ts"
-              }
+              "description": "The type of tooltip.\n- **description** sets aria-describedby on the trigger component which refers to the tooltip id.\n- **label** sets aria-labelledby on the trigger component which refers to the tooltip id.\n- **none** no aria props set on trigger component referring to the tooltip id.",
+              "default": "'description'",
+              "fieldName": "tooltipType"
             },
             {
               "name": "should-focus-trap-wrap",
@@ -48162,6 +48192,19 @@
                 "module": "src/components/popover/popover.component.ts"
               }
             },
+            {
+              "name": "placement",
+              "type": {
+                "text": "PopoverPlacement"
+              },
+              "description": "The placement of the popover.\n- **top**\n- **top-start**\n- **top-end**\n- **bottom**\n- **bottom-start**\n- **bottom-end**\n- **left**\n- **left-start**\n- **left-end**\n- **right**\n- **right-start**\n- **right-end**",
+              "default": "bottom",
+              "fieldName": "placement",
+              "inheritedFrom": {
+                "name": "Popover",
+                "module": "src/components/popover/popover.component.ts"
+              }
+            },
             {
               "name": "color",
               "type": {
@@ -48569,9 +48612,19 @@
             "name": "Popover",
             "module": "/src/components/popover/popover.component"
           },
-          "tagName": "mdc-toggletip",
-          "jsDoc": "/**\n * A toggletip is triggered by clicking a trigger element.\n *\n * It can contain interactive content and can be closed by\n * clicking outside the toggletip or pressing the escape key.\n *\n * It can have optional close button to close the toggletip.\n *\n * Toggletip component uses `mdc-screenreaderannouncer` internally to\n * announce the toggletip text content with screen readers when the toggletip is shown.\n *\n * `screenreader-announcer-identity` attribute can be used to provide ID of an element\n * in DOM to which announcement elements are added. If not set, a visually hidden\n * div element is created in DOM to which announcement elements are added.\n *\n * Please refer to the `mdc-screenreaderannouncer` component for more details.\n *\n * @dependency mdc-screenreaderannouncer\n * @dependency mdc-button\n *\n * @tagname mdc-toggletip\n *\n * @event shown - (React: onShown) This event is dispatched when the toggletip is shown\n * @event hidden - (React: onHidden) This event is dispatched when the toggletip is hidden\n * @event created - (React: onCreated) This event is dispatched when the toggletip is created (added to the DOM)\n * @event destroyed - (React: onDestroyed) This event is dispatched when the toggletip\n * is destroyed (removed from the DOM)\n *\n * @cssproperty --mdc-toggletip-max-width - The maximum width of the toggletip.\n * @cssproperty --mdc-toggletip-text-color - The text color of the toggletip.\n * @cssproperty --mdc-toggletip-text-color-contrast - The text color of the toggletip\n *  when the color is contrast.\n *\n * @slot - Default slot for the toggletip content\n */",
+          "tagName": "mdc-tooltip",
+          "jsDoc": "/**\n * A tooltip is triggered by mouse hover or by keyboard focus\n * and will disappear upon mouse exit or focus change.\n *\n * Note: Tooltips cannot contain content that can be focused or interacted with.\n *\n * @tagname mdc-tooltip\n *\n * @event shown - (React: onShown) This event is dispatched when the tooltip is shown\n * @event hidden - (React: onHidden) This event is dispatched when the tooltip is hidden\n * @event created - (React: onCreated) This event is dispatched when the tooltip is created (added to the DOM)\n * @event destroyed - (React: onDestroyed) This event is dispatched when the tooltip is destroyed (removed from the DOM)\n *\n * @cssproperty --mdc-tooltip-max-width - The maximum width of the tooltip.\n * @cssproperty --mdc-tooltip-padding - The padding of the tooltip.\n * @cssproperty --mdc-tooltip-text-color - The text color of the tooltip.\n * @cssproperty --mdc-tooltip-text-color-contrast - The text color of the tooltip when the color is contrast.\n *\n */",
           "customElement": true,
+          "slots": [
+            {
+              "description": "Default slot for the popover content",
+              "name": "",
+              "inheritedFrom": {
+                "name": "Popover",
+                "module": "src/components/popover/popover.component.ts"
+              }
+            }
+          ],
           "cssParts": [
             {
               "description": "The close button of the popover.",
@@ -48605,36 +48658,32 @@
           "kind": "js",
           "name": "default",
           "declaration": {
-            "name": "ToggleTip",
-            "module": "components/toggletip/toggletip.component.js"
+            "name": "Tooltip",
+            "module": "components/tooltip/tooltip.component.js"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "components/tooltip/tooltip.component.js",
+      "path": "components/toggletip/toggletip.component.js",
       "declarations": [
         {
           "kind": "class",
-          "description": "A tooltip is triggered by mouse hover or by keyboard focus\nand will disappear upon mouse exit or focus change.\n\nNote: Tooltips cannot contain content that can be focused or interacted with.",
-          "name": "Tooltip",
+          "description": "A toggletip is triggered by clicking a trigger element.\n\nIt can contain interactive content and can be closed by\nclicking outside the toggletip or pressing the escape key.\n\nIt can have optional close button to close the toggletip.\n\nToggletip component uses `mdc-screenreaderannouncer` internally to\nannounce the toggletip text content with screen readers when the toggletip is shown.\n\n`screenreader-announcer-identity` attribute can be used to provide ID of an element\nin DOM to which announcement elements are added. If not set, a visually hidden\ndiv element is created in DOM to which announcement elements are added.\n\nPlease refer to the `mdc-screenreaderannouncer` component for more details.",
+          "name": "ToggleTip",
           "cssProperties": [
             {
-              "description": "The maximum width of the tooltip.",
-              "name": "--mdc-tooltip-max-width"
-            },
-            {
-              "description": "The padding of the tooltip.",
-              "name": "--mdc-tooltip-padding"
+              "description": "The maximum width of the toggletip.",
+              "name": "--mdc-toggletip-max-width"
             },
             {
-              "description": "The text color of the tooltip.",
-              "name": "--mdc-tooltip-text-color"
+              "description": "The text color of the toggletip.",
+              "name": "--mdc-toggletip-text-color"
             },
             {
-              "description": "The text color of the tooltip when the color is contrast.",
-              "name": "--mdc-tooltip-text-color-contrast"
+              "description": "The text color of the toggletip when the color is contrast.",
+              "name": "--mdc-toggletip-text-color-contrast"
             },
             {
               "description": "radius of the arrow border",
@@ -48725,18 +48774,17 @@
               }
             }
           ],
-          "members": [
+          "slots": [
             {
-              "kind": "field",
-              "name": "tooltipType",
-              "type": {
-                "text": "TooltipType"
-              },
-              "description": "The type of tooltip.\n- **description** sets aria-describedby on the trigger component which refers to the tooltip id.\n- **label** sets aria-labelledby on the trigger component which refers to the tooltip id.\n- **none** no aria props set on trigger component referring to the tooltip id.",
-              "default": "'description'",
-              "attribute": "tooltip-type",
-              "reflects": true
-            },
+              "description": "Default slot for the toggletip content",
+              "name": "",
+              "inheritedFrom": {
+                "name": "Popover",
+                "module": "src/components/popover/popover.component.ts"
+              }
+            }
+          ],
+          "members": [
             {
               "kind": "field",
               "name": "defaultSlotNodes",
@@ -48746,76 +48794,50 @@
               "privacy": "private"
             },
             {
-              "kind": "method",
-              "name": "getTooltipText",
-              "privacy": "private",
-              "return": {
-                "type": {
-                  "text": ""
-                }
-              }
-            },
-            {
-              "kind": "method",
-              "name": "setTooltipType",
-              "privacy": "private",
-              "return": {
-                "type": {
-                  "text": "void"
-                }
+              "kind": "field",
+              "name": "screenreaderAnnouncerIdentity",
+              "type": {
+                "text": "string | undefined"
               },
-              "parameters": [
-                {
-                  "name": "type",
-                  "type": {
-                    "text": "TooltipType"
-                  },
-                  "description": "The type to set."
-                }
-              ],
-              "description": "Sets the type attribute for the tooltip component.\nIf the provided type is not included in the TOOLTIP_TYPES,\nit defaults to the value specified in DEFAULTS.TOOLTIP_TYPE."
+              "description": "Set this attribute with the id of the element in the DOM, to which announcement\nelements will be appended.\nIf an id is provided, the announcement elements will be appended to this element.\nIf id is not provided, a visually hidden div element will be created in the DOM.\n\nPlease refer to the `mdc-screenreaderannouncer` component for more details.",
+              "attribute": "screenreader-announcer-identity",
+              "reflects": true
             },
             {
-              "kind": "method",
-              "name": "onIdUpdated",
-              "privacy": "private",
-              "return": {
-                "type": {
-                  "text": "Promise<void>"
-                }
+              "kind": "field",
+              "name": "placement",
+              "type": {
+                "text": "PopoverPlacement"
               },
-              "description": "Updates the tooltip id if it is empty."
+              "description": "The placement of the popover.\n- **top**\n- **top-start**\n- **top-end**\n- **bottom**\n- **bottom-start**\n- **bottom-end**\n- **left**\n- **left-start**\n- **left-end**\n- **right**\n- **right-start**\n- **right-end**",
+              "default": "bottom",
+              "attribute": "placement",
+              "reflects": true,
+              "inheritedFrom": {
+                "name": "Popover",
+                "module": "components/popover/popover.component.js"
+              }
             },
             {
               "kind": "method",
-              "name": "onPlacementUpdated",
+              "name": "getToggleTipText",
               "privacy": "private",
               "return": {
                 "type": {
-                  "text": "void"
+                  "text": ""
                 }
-              },
-              "description": "Updates the placement attribute if it is not a valid placement.\nOverriding the default from Popover"
+              }
             },
             {
               "kind": "method",
-              "name": "onTooltipTypeUpdated",
+              "name": "onPlacementUpdated",
               "privacy": "private",
               "return": {
                 "type": {
                   "text": "void"
                 }
               },
-              "parameters": [
-                {
-                  "name": "changedProperties",
-                  "type": {
-                    "text": "PropertyValues"
-                  },
-                  "description": "The changed properties."
-                }
-              ],
-              "description": "Updates the tooltip type attribute and sets the appropriate aria props on the trigger component."
+              "description": "Updates the placement attribute if it is not a valid placement.\nDefault placement for toggle tip is top."
             },
             {
               "kind": "field",
@@ -49407,21 +49429,6 @@
                 "module": "components/popover/popover.component.js"
               }
             },
-            {
-              "kind": "field",
-              "name": "placement",
-              "type": {
-                "text": "PopoverPlacement"
-              },
-              "description": "The placement of the popover.\n- **top**\n- **top-start**\n- **top-end**\n- **bottom**\n- **bottom-start**\n- **bottom-end**\n- **left**\n- **left-start**\n- **left-end**\n- **right**\n- **right-start**\n- **right-end**",
-              "default": "bottom",
-              "attribute": "placement",
-              "reflects": true,
-              "inheritedFrom": {
-                "name": "Popover",
-                "module": "components/popover/popover.component.js"
-              }
-            },
             {
               "kind": "field",
               "name": "color",
@@ -50123,7 +50130,7 @@
           ],
           "events": [
             {
-              "description": "(React: onShown) This event is dispatched when the tooltip is shown",
+              "description": "(React: onShown) This event is dispatched when the toggletip is shown",
               "name": "shown",
               "reactName": "onShown",
               "inheritedFrom": {
@@ -50132,7 +50139,7 @@
               }
             },
             {
-              "description": "(React: onHidden) This event is dispatched when the tooltip is hidden",
+              "description": "(React: onHidden) This event is dispatched when the toggletip is hidden",
               "name": "hidden",
               "reactName": "onHidden",
               "inheritedFrom": {
@@ -50141,7 +50148,7 @@
               }
             },
             {
-              "description": "(React: onCreated) This event is dispatched when the tooltip is created (added to the DOM)",
+              "description": "(React: onCreated) This event is dispatched when the toggletip is created (added to the DOM)",
               "name": "created",
               "reactName": "onCreated",
               "inheritedFrom": {
@@ -50150,7 +50157,7 @@
               }
             },
             {
-              "description": "(React: onDestroyed) This event is dispatched when the tooltip is destroyed (removed from the DOM)",
+              "description": "(React: onDestroyed) This event is dispatched when the toggletip is destroyed (removed from the DOM)",
               "name": "destroyed",
               "reactName": "onDestroyed",
               "inheritedFrom": {
@@ -50161,13 +50168,25 @@
           ],
           "attributes": [
             {
-              "name": "tooltip-type",
+              "name": "screenreader-announcer-identity",
               "type": {
-                "text": "TooltipType"
+                "text": "string | undefined"
               },
-              "description": "The type of tooltip.\n- **description** sets aria-describedby on the trigger component which refers to the tooltip id.\n- **label** sets aria-labelledby on the trigger component which refers to the tooltip id.\n- **none** no aria props set on trigger component referring to the tooltip id.",
-              "default": "'description'",
-              "fieldName": "tooltipType"
+              "description": "Set this attribute with the id of the element in the DOM, to which announcement\nelements will be appended.\nIf an id is provided, the announcement elements will be appended to this element.\nIf id is not provided, a visually hidden div element will be created in the DOM.\n\nPlease refer to the `mdc-screenreaderannouncer` component for more details.",
+              "fieldName": "screenreaderAnnouncerIdentity"
+            },
+            {
+              "name": "placement",
+              "type": {
+                "text": "PopoverPlacement"
+              },
+              "description": "The placement of the popover.\n- **top**\n- **top-start**\n- **top-end**\n- **bottom**\n- **bottom-start**\n- **bottom-end**\n- **left**\n- **left-start**\n- **left-end**\n- **right**\n- **right-start**\n- **right-end**",
+              "default": "bottom",
+              "fieldName": "placement",
+              "inheritedFrom": {
+                "name": "Popover",
+                "module": "src/components/popover/popover.component.ts"
+              }
             },
             {
               "name": "should-focus-trap-wrap",
@@ -50221,19 +50240,6 @@
                 "module": "src/components/popover/popover.component.ts"
               }
             },
-            {
-              "name": "placement",
-              "type": {
-                "text": "PopoverPlacement"
-              },
-              "description": "The placement of the popover.\n- **top**\n- **top-start**\n- **top-end**\n- **bottom**\n- **bottom-start**\n- **bottom-end**\n- **left**\n- **left-start**\n- **left-end**\n- **right**\n- **right-start**\n- **right-end**",
-              "default": "bottom",
-              "fieldName": "placement",
-              "inheritedFrom": {
-                "name": "Popover",
-                "module": "src/components/popover/popover.component.ts"
-              }
-            },
             {
               "name": "color",
               "type": {
@@ -50641,19 +50647,9 @@
             "name": "Popover",
             "module": "/src/components/popover/popover.component"
           },
-          "tagName": "mdc-tooltip",
-          "jsDoc": "/**\n * A tooltip is triggered by mouse hover or by keyboard focus\n * and will disappear upon mouse exit or focus change.\n *\n * Note: Tooltips cannot contain content that can be focused or interacted with.\n *\n * @tagname mdc-tooltip\n *\n * @event shown - (React: onShown) This event is dispatched when the tooltip is shown\n * @event hidden - (React: onHidden) This event is dispatched when the tooltip is hidden\n * @event created - (React: onCreated) This event is dispatched when the tooltip is created (added to the DOM)\n * @event destroyed - (React: onDestroyed) This event is dispatched when the tooltip is destroyed (removed from the DOM)\n *\n * @cssproperty --mdc-tooltip-max-width - The maximum width of the tooltip.\n * @cssproperty --mdc-tooltip-padding - The padding of the tooltip.\n * @cssproperty --mdc-tooltip-text-color - The text color of the tooltip.\n * @cssproperty --mdc-tooltip-text-color-contrast - The text color of the tooltip when the color is contrast.\n *\n */",
+          "tagName": "mdc-toggletip",
+          "jsDoc": "/**\n * A toggletip is triggered by clicking a trigger element.\n *\n * It can contain interactive content and can be closed by\n * clicking outside the toggletip or pressing the escape key.\n *\n * It can have optional close button to close the toggletip.\n *\n * Toggletip component uses `mdc-screenreaderannouncer` internally to\n * announce the toggletip text content with screen readers when the toggletip is shown.\n *\n * `screenreader-announcer-identity` attribute can be used to provide ID of an element\n * in DOM to which announcement elements are added. If not set, a visually hidden\n * div element is created in DOM to which announcement elements are added.\n *\n * Please refer to the `mdc-screenreaderannouncer` component for more details.\n *\n * @dependency mdc-screenreaderannouncer\n * @dependency mdc-button\n *\n * @tagname mdc-toggletip\n *\n * @event shown - (React: onShown) This event is dispatched when the toggletip is shown\n * @event hidden - (React: onHidden) This event is dispatched when the toggletip is hidden\n * @event created - (React: onCreated) This event is dispatched when the toggletip is created (added to the DOM)\n * @event destroyed - (React: onDestroyed) This event is dispatched when the toggletip\n * is destroyed (removed from the DOM)\n *\n * @cssproperty --mdc-toggletip-max-width - The maximum width of the toggletip.\n * @cssproperty --mdc-toggletip-text-color - The text color of the toggletip.\n * @cssproperty --mdc-toggletip-text-color-contrast - The text color of the toggletip\n *  when the color is contrast.\n *\n * @slot - Default slot for the toggletip content\n */",
           "customElement": true,
-          "slots": [
-            {
-              "description": "Default slot for the popover content",
-              "name": "",
-              "inheritedFrom": {
-                "name": "Popover",
-                "module": "src/components/popover/popover.component.ts"
-              }
-            }
-          ],
           "cssParts": [
             {
               "description": "The close button of the popover.",
@@ -50687,8 +50683,8 @@
           "kind": "js",
           "name": "default",
           "declaration": {
-            "name": "Tooltip",
-            "module": "components/tooltip/tooltip.component.js"
+            "name": "ToggleTip",
+            "module": "components/toggletip/toggletip.component.js"
           }
         }
       ]