@momentum-design/components 0.87.1 → 0.87.2

package/dist/custom-elements.json

@@ -9479,252 +9479,6 @@
         }
       ]
     },
-    {
-      "kind": "javascript-module",
-      "path": "components/divider/divider.component.js",
-      "declarations": [
-        {
-          "kind": "class",
-          "description": "`mdc-divider` is a component that provides a line to separate and organize content.\nIt can also include a button or text positioned centrally, allowing users to interact with the layout.\n\n**Divider Orientation:**\n- **Horizontal**: A thin, horizontal line.\n- **Vertical**: A thin, vertical line.\n\n**Divider Variants:**\n- **solid**: Solid line.\n- **gradient**: Gradient Line.\n\n**Divider Types:**\n- The type of divider is inferred based on the kind of slot present.\n - **Primary**: A simple horizontal or vertical divider.\n - **Text**: A horizontal divider with a text label in the center.\n - **Grabber Button**: A horizontal or vertical divider with a styled button in the center.\n\n**Accessibility:**\n- When the slot is replaced by an `mdc-button`:\n  - `aria-label` should be passed to the `mdc-button`.\n  - `aria-expanded` should be passed to the `mdc-button`.\n\n**Notes:**\n- If the slot is replaced by an invalid tag name or contains multiple elements,\n  the divider defaults to the **Primary** type.\n- To override the styles of the divider, use the provided CSS custom properties.",
-          "name": "Divider",
-          "cssProperties": [
-            {
-              "description": "background color of the divider",
-              "name": "--mdc-divider-background-color"
-            },
-            {
-              "description": "width of the divider",
-              "name": "--mdc-divider-width"
-            },
-            {
-              "description": "gradient of the horizontal divider",
-              "name": "--mdc-divider-horizontal-gradient"
-            },
-            {
-              "description": "gradient of the vertical divider",
-              "name": "--mdc-divider-vertical-gradient"
-            },
-            {
-              "description": "font size of label in the text divider",
-              "name": "--mdc-divider-text-size"
-            },
-            {
-              "description": "font color of label in the text divider",
-              "name": "--mdc-divider-text-color"
-            },
-            {
-              "description": "left and right margin of label in the text divider",
-              "name": "--mdc-divider-text-margin"
-            },
-            {
-              "description": "line height of label in the text divider",
-              "name": "--mdc-divider-text-line-height"
-            },
-            {
-              "description": "background color of the grabber button in rest state",
-              "name": "--mdc-divider-grabber-button-background-color-normal"
-            },
-            {
-              "description": "background color of the grabber button in hover state",
-              "name": "--mdc-divider-grabber-button-background-color-hover"
-            },
-            {
-              "description": "background color of the grabber button in pressed state",
-              "name": "--mdc-divider-grabber-button-background-color-pressed"
-            },
-            {
-              "description": "border color of the grabber button",
-              "name": "--mdc-divider-grabber-button-border-color"
-            },
-            {
-              "description": "border radius of the grabber button",
-              "name": "--mdc-divider-grabber-button-border-radius"
-            }
-          ],
-          "members": [
-            {
-              "kind": "field",
-              "name": "orientation",
-              "type": {
-                "text": "DividerOrientation"
-              },
-              "description": "Two orientations of divider\n- **horizontal**: A thin, horizontal line with 0.0625rem width.\n- **vertical**: A thin, vertical line with 0.0625rem width.\n\nNote: We do not support \"Vertical Text Divider\" as of now.",
-              "default": "horizontal",
-              "attribute": "orientation",
-              "reflects": true
-            },
-            {
-              "kind": "field",
-              "name": "variant",
-              "type": {
-                "text": "DividerVariant"
-              },
-              "description": "Two variants of divider\n- **solid**: Solid line.\n- **gradient**: Gradient Line that fades on either sides of the divider.",
-              "default": "solid",
-              "attribute": "variant",
-              "reflects": true
-            },
-            {
-              "kind": "field",
-              "name": "arrowDirection",
-              "type": {
-                "text": "Directions"
-              },
-              "description": "Direction of the arrow icon, if applicable.\n- **positive**\n- **negative**\n\nNote: Positive and Negative directions are defined based on Cartesian plane.",
-              "default": "'negative'",
-              "attribute": "arrow-direction",
-              "reflects": true
-            },
-            {
-              "kind": "field",
-              "name": "buttonPosition",
-              "type": {
-                "text": "Directions"
-              },
-              "description": "Position of the button, if applicable.\n- **positive**\n- **negative**\n\nNote: Positive and Negative directions are defined based on Cartesian plane.",
-              "default": "'negative'",
-              "attribute": "button-position",
-              "reflects": true
-            },
-            {
-              "kind": "method",
-              "name": "setVariant",
-              "privacy": "private",
-              "parameters": [
-                {
-                  "name": "variant",
-                  "type": {
-                    "text": "DividerVariant"
-                  },
-                  "description": "The variant to set."
-                }
-              ],
-              "description": "Sets the variant attribute for the divider component.\nIf the provided variant is not included in the DIVIDER_VARIANT,\nit defaults to the value specified in DEFAULTS.VARIANT."
-            },
-            {
-              "kind": "method",
-              "name": "setOrientation",
-              "privacy": "private",
-              "parameters": [
-                {
-                  "name": "orientation",
-                  "type": {
-                    "text": "DividerOrientation"
-                  },
-                  "description": "The orientation to set."
-                }
-              ],
-              "description": "Sets the orientation attribute for the divider component.\nIf the provided orientation is not included in the DIVIDER_ORIENTATION,\nit defaults to the value specified in DEFAULTS.ORIENTATION."
-            },
-            {
-              "kind": "method",
-              "name": "ensureValidDirections",
-              "privacy": "private",
-              "description": "Sets the buttonPosition and arrowDirection attribute for the divider component.\nIf the provided buttonPosition and arrowDirection are not included in the DIRECTIONS,\nit defaults to the value specified in DIRECTIONS based on the ORIENTATION.",
-              "parameters": [
-                {
-                  "description": "The buttonPosition to set.",
-                  "name": "buttonPosition"
-                },
-                {
-                  "description": "The arrowDirection to set.",
-                  "name": "arrowDirection"
-                }
-              ]
-            },
-            {
-              "kind": "method",
-              "name": "setGrabberButton",
-              "privacy": "private",
-              "return": {
-                "type": {
-                  "text": "void"
-                }
-              },
-              "description": "Configures the grabber button within the divider.\n\n- Sets the `prefix-icon` attribute for the grabber button based\non the `arrow-direction` and `orientation` properties.\n\nThis method updates the DOM element dynamically if a grabber button is present."
-            },
-            {
-              "kind": "method",
-              "name": "getArrowIcon",
-              "privacy": "private",
-              "return": {
-                "type": {
-                  "text": ""
-                }
-              },
-              "description": "Determines the arrow icon based on the consumer-defined `arrowDirection`."
-            },
-            {
-              "kind": "method",
-              "name": "inferDividerType",
-              "privacy": "private",
-              "description": "Infers the type of divider based on the kind of slot present.",
-              "parameters": [
-                {
-                  "description": "default slot of divider",
-                  "name": "slot"
-                }
-              ]
-            }
-          ],
-          "attributes": [
-            {
-              "name": "orientation",
-              "type": {
-                "text": "DividerOrientation"
-              },
-              "description": "Two orientations of divider\n- **horizontal**: A thin, horizontal line with 0.0625rem width.\n- **vertical**: A thin, vertical line with 0.0625rem width.\n\nNote: We do not support \"Vertical Text Divider\" as of now.",
-              "default": "horizontal",
-              "fieldName": "orientation"
-            },
-            {
-              "name": "variant",
-              "type": {
-                "text": "DividerVariant"
-              },
-              "description": "Two variants of divider\n- **solid**: Solid line.\n- **gradient**: Gradient Line that fades on either sides of the divider.",
-              "default": "solid",
-              "fieldName": "variant"
-            },
-            {
-              "name": "arrow-direction",
-              "type": {
-                "text": "Directions"
-              },
-              "description": "Direction of the arrow icon, if applicable.\n- **positive**\n- **negative**\n\nNote: Positive and Negative directions are defined based on Cartesian plane.",
-              "default": "'negative'",
-              "fieldName": "arrowDirection"
-            },
-            {
-              "name": "button-position",
-              "type": {
-                "text": "Directions"
-              },
-              "description": "Position of the button, if applicable.\n- **positive**\n- **negative**\n\nNote: Positive and Negative directions are defined based on Cartesian plane.",
-              "default": "'negative'",
-              "fieldName": "buttonPosition"
-            }
-          ],
-          "superclass": {
-            "name": "Component",
-            "module": "/src/models"
-          },
-          "tagName": "mdc-divider",
-          "jsDoc": "/**\n * `mdc-divider` is a component that provides a line to separate and organize content.\n * It can also include a button or text positioned centrally, allowing users to interact with the layout.\n *\n * **Divider Orientation:**\n * - **Horizontal**: A thin, horizontal line.\n * - **Vertical**: A thin, vertical line.\n *\n * **Divider Variants:**\n * - **solid**: Solid line.\n * - **gradient**: Gradient Line.\n *\n * **Divider Types:**\n * - The type of divider is inferred based on the kind of slot present.\n *  - **Primary**: A simple horizontal or vertical divider.\n *  - **Text**: A horizontal divider with a text label in the center.\n *  - **Grabber Button**: A horizontal or vertical divider with a styled button in the center.\n *\n * **Accessibility:**\n * - When the slot is replaced by an `mdc-button`:\n *   - `aria-label` should be passed to the `mdc-button`.\n *   - `aria-expanded` should be passed to the `mdc-button`.\n *\n * **Notes:**\n * - If the slot is replaced by an invalid tag name or contains multiple elements,\n *   the divider defaults to the **Primary** type.\n * - To override the styles of the divider, use the provided CSS custom properties.\n *\n * @tagname mdc-divider\n *\n * @cssproperty --mdc-divider-background-color - background color of the divider\n * @cssproperty --mdc-divider-width - width of the divider\n * @cssproperty --mdc-divider-horizontal-gradient - gradient of the horizontal divider\n * @cssproperty --mdc-divider-vertical-gradient - gradient of the vertical divider\n * @cssproperty --mdc-divider-text-size - font size of label in the text divider\n * @cssproperty --mdc-divider-text-color - font color of label in the text divider\n * @cssproperty --mdc-divider-text-margin - left and right margin of label in the text divider\n * @cssproperty --mdc-divider-text-line-height - line height of label in the text divider\n * @cssproperty --mdc-divider-grabber-button-background-color-normal - background color of the grabber button\n *  in rest state\n * @cssproperty --mdc-divider-grabber-button-background-color-hover - background color of the grabber button\n *  in hover state\n * @cssproperty --mdc-divider-grabber-button-background-color-pressed - background color of the grabber button\n *  in pressed state\n * @cssproperty --mdc-divider-grabber-button-border-color - border color of the grabber button\n * @cssproperty --mdc-divider-grabber-button-border-radius - border radius of the grabber button\n */",
-          "customElement": true
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "default",
-          "declaration": {
-            "name": "Divider",
-            "module": "components/divider/divider.component.js"
-          }
-        }
-      ]
-    },
     {
       "kind": "javascript-module",
       "path": "components/dialog/dialog.component.js",
@@ -10691,90 +10445,336 @@
               "fieldName": "headerText"
             },
             {
-              "name": "description-text",
-              "type": {
-                "text": "string | undefined"
+              "name": "description-text",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "Defines a string value to display as the under-header description of the dialog",
+              "fieldName": "descriptionText"
+            },
+            {
+              "name": "header-tag-name",
+              "type": {
+                "text": "string"
+              },
+              "description": "The html tag to be used for the header text",
+              "fieldName": "headerTagName"
+            },
+            {
+              "name": "description-tag-name",
+              "type": {
+                "text": "string"
+              },
+              "description": "The html tag to be used for the below-header description text",
+              "fieldName": "descriptionTagName"
+            },
+            {
+              "name": "role",
+              "type": {
+                "text": "DialogRole"
+              },
+              "description": "Role of the dialog",
+              "default": "dialog",
+              "fieldName": "role"
+            },
+            {
+              "name": "disable-aria-haspopup",
+              "type": {
+                "text": "boolean"
+              },
+              "description": "Disable setting the aria-haspopup attribute on trigger element.\nMake sure to set this to true when the popover is extended and its role\nis not 'dialog' or 'alertdialog' i.e. listbox, menu, etc.",
+              "default": "false",
+              "fieldName": "disableAriaHasPopup"
+            },
+            {
+              "name": "focus-trap",
+              "type": {
+                "text": "boolean"
+              },
+              "description": "Determines whether the focus trap is enabled.\nIf true, focus will be restricted to the content within this component.\n\nNOTE: this should only be disabled in rare cases! By default a Modal Dialog\nshould trap focus always.",
+              "default": "true",
+              "fieldName": "focusTrap"
+            },
+            {
+              "name": "should-focus-trap-wrap",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "true",
+              "description": "Determines whether focus should wrap around when reaching the first or last focusable element.\nIf true, focus will cycle from end to start and vice versa.\n\nThis only applies when `focusTrap` is true.",
+              "fieldName": "shouldFocusTrapWrap",
+              "inheritedFrom": {
+                "name": "FocusTrapMixin",
+                "module": "src/utils/mixins/FocusTrapMixin.ts"
+              }
+            }
+          ],
+          "mixins": [
+            {
+              "name": "PreventScrollMixin",
+              "module": "/src/utils/mixins/PreventScrollMixin"
+            },
+            {
+              "name": "FocusTrapMixin",
+              "module": "/src/utils/mixins/FocusTrapMixin"
+            },
+            {
+              "name": "CardAndDialogFooterMixin",
+              "module": "/src/utils/mixins/CardAndDialogFooterMixin"
+            }
+          ],
+          "superclass": {
+            "name": "Component",
+            "module": "/src/models"
+          },
+          "tagName": "mdc-dialog",
+          "jsDoc": "/**\n * Dialog component is a modal dialog that can be used to display information or prompt the user for input.\n * It can be used to create custom dialogs where content for the body and footer actions is provided by the consumer.\n * The dialog is available in 5 sizes: small, medium, large, xlarge and fullscreen. It may also receive custom styling/sizing.\n * The dialog interrupts the user and will block interaction with the rest of the application until it is closed.\n *\n * The dialog can be controlled solely through the `visible` property, no trigger element is required.\n * If a `triggerId` is provided, the dialog will manage focus with that element, otherwise it will\n * remember the previously focused element before the dialog was opened.\n *\n * The dialog is a controlled component, meaning it does not have its own state management for visibility.\n * Use the `visible` property to control the visibility of the dialog.\n * Use the `onClose` event to handle the close action of the dialog (fired when Close button is clicked\n * or Escape is pressed).\n *\n * Dialog component have 2 variants: default and promotional.\n *\n * **Accessibility notes for consuming (have to be explicitly set when you consume the component)**\n *\n * - The dialog should have an aria-label or aria-labelledby attribute to provide a label for screen readers.\n * - Use aria-labelledby to reference the ID of the element that labels the dialog when there is no visible title.\n *\n * **Note: Programmatic show/hide requires the ? prefix on the visible attribute**\n * - Use `?visible=true/false` as an attribute instead of `visible=true/false`\n * - Reference docs for more info: https://lit.dev/docs/templates/expressions/#boolean-attribute-expressions\n *\n * @dependency mdc-button\n * @dependency mdc-text\n *\n * @tagname mdc-dialog\n *\n * @event shown - (React: onShown) Dispatched when the dialog is shown\n * @event hidden - (React: onHidden) Dispatched when the dialog is hidden\n * @event created - (React: onCreated) Dispatched when the dialog is created (added to the DOM)\n * @event destroyed - (React: onDestroyed) Dispatched when the dialog is destroyed (removed from the DOM)\n * @event close - (React: onClose) Dispatched when the Close Button is clicked or Escape key is pressed\n * (this does not hide the dialog)\n *\n * @cssproperty --mdc-dialog-primary-background-color - primary background color of the dialog\n * @cssproperty --mdc-dialog-border-color - border color of the dialog\n * @cssproperty --mdc-dialog-header-text-color - text color of the header/title of the dialog\n * @cssproperty --mdc-dialog-description-text-color - text color of the below header description of the dialog\n * @cssproperty --mdc-dialog-elevation-3 - elevation of the dialog\n * @cssproperty --mdc-dialog-width - width of the dialog\n *\n * @slot header-prefix - Slot for the dialog header content. This can be used to pass custom header content.\n * @slot dialog-body - Slot for the dialog body content\n * @slot footer-link - This slot is for passing `mdc-link` component within the footer section.\n * @slot footer-button-secondary - This slot is for passing secondary variant of `mdc-button` component\n * within the footer section.\n * @slot footer-button-primary - This slot is for passing primary variant of\n * `mdc-button` component within the footer section.\n * @slot footer -  This slot is for passing custom footer content. Only use this if really needed,\n * using the footer-link and footer-button slots is preferred\n */",
+          "customElement": true
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "default",
+          "declaration": {
+            "name": "Dialog",
+            "module": "components/dialog/dialog.component.js"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "components/divider/divider.component.js",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "`mdc-divider` is a component that provides a line to separate and organize content.\nIt can also include a button or text positioned centrally, allowing users to interact with the layout.\n\n**Divider Orientation:**\n- **Horizontal**: A thin, horizontal line.\n- **Vertical**: A thin, vertical line.\n\n**Divider Variants:**\n- **solid**: Solid line.\n- **gradient**: Gradient Line.\n\n**Divider Types:**\n- The type of divider is inferred based on the kind of slot present.\n - **Primary**: A simple horizontal or vertical divider.\n - **Text**: A horizontal divider with a text label in the center.\n - **Grabber Button**: A horizontal or vertical divider with a styled button in the center.\n\n**Accessibility:**\n- When the slot is replaced by an `mdc-button`:\n  - `aria-label` should be passed to the `mdc-button`.\n  - `aria-expanded` should be passed to the `mdc-button`.\n\n**Notes:**\n- If the slot is replaced by an invalid tag name or contains multiple elements,\n  the divider defaults to the **Primary** type.\n- To override the styles of the divider, use the provided CSS custom properties.",
+          "name": "Divider",
+          "cssProperties": [
+            {
+              "description": "background color of the divider",
+              "name": "--mdc-divider-background-color"
+            },
+            {
+              "description": "width of the divider",
+              "name": "--mdc-divider-width"
+            },
+            {
+              "description": "gradient of the horizontal divider",
+              "name": "--mdc-divider-horizontal-gradient"
+            },
+            {
+              "description": "gradient of the vertical divider",
+              "name": "--mdc-divider-vertical-gradient"
+            },
+            {
+              "description": "font size of label in the text divider",
+              "name": "--mdc-divider-text-size"
+            },
+            {
+              "description": "font color of label in the text divider",
+              "name": "--mdc-divider-text-color"
+            },
+            {
+              "description": "left and right margin of label in the text divider",
+              "name": "--mdc-divider-text-margin"
+            },
+            {
+              "description": "line height of label in the text divider",
+              "name": "--mdc-divider-text-line-height"
+            },
+            {
+              "description": "background color of the grabber button in rest state",
+              "name": "--mdc-divider-grabber-button-background-color-normal"
+            },
+            {
+              "description": "background color of the grabber button in hover state",
+              "name": "--mdc-divider-grabber-button-background-color-hover"
+            },
+            {
+              "description": "background color of the grabber button in pressed state",
+              "name": "--mdc-divider-grabber-button-background-color-pressed"
+            },
+            {
+              "description": "border color of the grabber button",
+              "name": "--mdc-divider-grabber-button-border-color"
+            },
+            {
+              "description": "border radius of the grabber button",
+              "name": "--mdc-divider-grabber-button-border-radius"
+            }
+          ],
+          "members": [
+            {
+              "kind": "field",
+              "name": "orientation",
+              "type": {
+                "text": "DividerOrientation"
+              },
+              "description": "Two orientations of divider\n- **horizontal**: A thin, horizontal line with 0.0625rem width.\n- **vertical**: A thin, vertical line with 0.0625rem width.\n\nNote: We do not support \"Vertical Text Divider\" as of now.",
+              "default": "horizontal",
+              "attribute": "orientation",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "variant",
+              "type": {
+                "text": "DividerVariant"
+              },
+              "description": "Two variants of divider\n- **solid**: Solid line.\n- **gradient**: Gradient Line that fades on either sides of the divider.",
+              "default": "solid",
+              "attribute": "variant",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "arrowDirection",
+              "type": {
+                "text": "Directions"
+              },
+              "description": "Direction of the arrow icon, if applicable.\n- **positive**\n- **negative**\n\nNote: Positive and Negative directions are defined based on Cartesian plane.",
+              "default": "'negative'",
+              "attribute": "arrow-direction",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "buttonPosition",
+              "type": {
+                "text": "Directions"
+              },
+              "description": "Position of the button, if applicable.\n- **positive**\n- **negative**\n\nNote: Positive and Negative directions are defined based on Cartesian plane.",
+              "default": "'negative'",
+              "attribute": "button-position",
+              "reflects": true
+            },
+            {
+              "kind": "method",
+              "name": "setVariant",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "variant",
+                  "type": {
+                    "text": "DividerVariant"
+                  },
+                  "description": "The variant to set."
+                }
+              ],
+              "description": "Sets the variant attribute for the divider component.\nIf the provided variant is not included in the DIVIDER_VARIANT,\nit defaults to the value specified in DEFAULTS.VARIANT."
+            },
+            {
+              "kind": "method",
+              "name": "setOrientation",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "orientation",
+                  "type": {
+                    "text": "DividerOrientation"
+                  },
+                  "description": "The orientation to set."
+                }
+              ],
+              "description": "Sets the orientation attribute for the divider component.\nIf the provided orientation is not included in the DIVIDER_ORIENTATION,\nit defaults to the value specified in DEFAULTS.ORIENTATION."
+            },
+            {
+              "kind": "method",
+              "name": "ensureValidDirections",
+              "privacy": "private",
+              "description": "Sets the buttonPosition and arrowDirection attribute for the divider component.\nIf the provided buttonPosition and arrowDirection are not included in the DIRECTIONS,\nit defaults to the value specified in DIRECTIONS based on the ORIENTATION.",
+              "parameters": [
+                {
+                  "description": "The buttonPosition to set.",
+                  "name": "buttonPosition"
+                },
+                {
+                  "description": "The arrowDirection to set.",
+                  "name": "arrowDirection"
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "setGrabberButton",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
               },
-              "description": "Defines a string value to display as the under-header description of the dialog",
-              "fieldName": "descriptionText"
+              "description": "Configures the grabber button within the divider.\n\n- Sets the `prefix-icon` attribute for the grabber button based\non the `arrow-direction` and `orientation` properties.\n\nThis method updates the DOM element dynamically if a grabber button is present."
             },
             {
-              "name": "header-tag-name",
-              "type": {
-                "text": "string"
+              "kind": "method",
+              "name": "getArrowIcon",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": ""
+                }
               },
-              "description": "The html tag to be used for the header text",
-              "fieldName": "headerTagName"
+              "description": "Determines the arrow icon based on the consumer-defined `arrowDirection`."
             },
             {
-              "name": "description-tag-name",
-              "type": {
-                "text": "string"
-              },
-              "description": "The html tag to be used for the below-header description text",
-              "fieldName": "descriptionTagName"
-            },
+              "kind": "method",
+              "name": "inferDividerType",
+              "privacy": "private",
+              "description": "Infers the type of divider based on the kind of slot present.",
+              "parameters": [
+                {
+                  "description": "default slot of divider",
+                  "name": "slot"
+                }
+              ]
+            }
+          ],
+          "attributes": [
             {
-              "name": "role",
+              "name": "orientation",
               "type": {
-                "text": "DialogRole"
+                "text": "DividerOrientation"
               },
-              "description": "Role of the dialog",
-              "default": "dialog",
-              "fieldName": "role"
+              "description": "Two orientations of divider\n- **horizontal**: A thin, horizontal line with 0.0625rem width.\n- **vertical**: A thin, vertical line with 0.0625rem width.\n\nNote: We do not support \"Vertical Text Divider\" as of now.",
+              "default": "horizontal",
+              "fieldName": "orientation"
             },
             {
-              "name": "disable-aria-haspopup",
+              "name": "variant",
               "type": {
-                "text": "boolean"
+                "text": "DividerVariant"
               },
-              "description": "Disable setting the aria-haspopup attribute on trigger element.\nMake sure to set this to true when the popover is extended and its role\nis not 'dialog' or 'alertdialog' i.e. listbox, menu, etc.",
-              "default": "false",
-              "fieldName": "disableAriaHasPopup"
+              "description": "Two variants of divider\n- **solid**: Solid line.\n- **gradient**: Gradient Line that fades on either sides of the divider.",
+              "default": "solid",
+              "fieldName": "variant"
             },
             {
-              "name": "focus-trap",
+              "name": "arrow-direction",
               "type": {
-                "text": "boolean"
+                "text": "Directions"
               },
-              "description": "Determines whether the focus trap is enabled.\nIf true, focus will be restricted to the content within this component.\n\nNOTE: this should only be disabled in rare cases! By default a Modal Dialog\nshould trap focus always.",
-              "default": "true",
-              "fieldName": "focusTrap"
+              "description": "Direction of the arrow icon, if applicable.\n- **positive**\n- **negative**\n\nNote: Positive and Negative directions are defined based on Cartesian plane.",
+              "default": "'negative'",
+              "fieldName": "arrowDirection"
             },
             {
-              "name": "should-focus-trap-wrap",
+              "name": "button-position",
               "type": {
-                "text": "boolean"
+                "text": "Directions"
               },
-              "default": "true",
-              "description": "Determines whether focus should wrap around when reaching the first or last focusable element.\nIf true, focus will cycle from end to start and vice versa.\n\nThis only applies when `focusTrap` is true.",
-              "fieldName": "shouldFocusTrapWrap",
-              "inheritedFrom": {
-                "name": "FocusTrapMixin",
-                "module": "src/utils/mixins/FocusTrapMixin.ts"
-              }
-            }
-          ],
-          "mixins": [
-            {
-              "name": "PreventScrollMixin",
-              "module": "/src/utils/mixins/PreventScrollMixin"
-            },
-            {
-              "name": "FocusTrapMixin",
-              "module": "/src/utils/mixins/FocusTrapMixin"
-            },
-            {
-              "name": "CardAndDialogFooterMixin",
-              "module": "/src/utils/mixins/CardAndDialogFooterMixin"
+              "description": "Position of the button, if applicable.\n- **positive**\n- **negative**\n\nNote: Positive and Negative directions are defined based on Cartesian plane.",
+              "default": "'negative'",
+              "fieldName": "buttonPosition"
             }
           ],
           "superclass": {
             "name": "Component",
             "module": "/src/models"
           },
-          "tagName": "mdc-dialog",
-          "jsDoc": "/**\n * Dialog component is a modal dialog that can be used to display information or prompt the user for input.\n * It can be used to create custom dialogs where content for the body and footer actions is provided by the consumer.\n * The dialog is available in 5 sizes: small, medium, large, xlarge and fullscreen. It may also receive custom styling/sizing.\n * The dialog interrupts the user and will block interaction with the rest of the application until it is closed.\n *\n * The dialog can be controlled solely through the `visible` property, no trigger element is required.\n * If a `triggerId` is provided, the dialog will manage focus with that element, otherwise it will\n * remember the previously focused element before the dialog was opened.\n *\n * The dialog is a controlled component, meaning it does not have its own state management for visibility.\n * Use the `visible` property to control the visibility of the dialog.\n * Use the `onClose` event to handle the close action of the dialog (fired when Close button is clicked\n * or Escape is pressed).\n *\n * Dialog component have 2 variants: default and promotional.\n *\n * **Accessibility notes for consuming (have to be explicitly set when you consume the component)**\n *\n * - The dialog should have an aria-label or aria-labelledby attribute to provide a label for screen readers.\n * - Use aria-labelledby to reference the ID of the element that labels the dialog when there is no visible title.\n *\n * **Note: Programmatic show/hide requires the ? prefix on the visible attribute**\n * - Use `?visible=true/false` as an attribute instead of `visible=true/false`\n * - Reference docs for more info: https://lit.dev/docs/templates/expressions/#boolean-attribute-expressions\n *\n * @dependency mdc-button\n * @dependency mdc-text\n *\n * @tagname mdc-dialog\n *\n * @event shown - (React: onShown) Dispatched when the dialog is shown\n * @event hidden - (React: onHidden) Dispatched when the dialog is hidden\n * @event created - (React: onCreated) Dispatched when the dialog is created (added to the DOM)\n * @event destroyed - (React: onDestroyed) Dispatched when the dialog is destroyed (removed from the DOM)\n * @event close - (React: onClose) Dispatched when the Close Button is clicked or Escape key is pressed\n * (this does not hide the dialog)\n *\n * @cssproperty --mdc-dialog-primary-background-color - primary background color of the dialog\n * @cssproperty --mdc-dialog-border-color - border color of the dialog\n * @cssproperty --mdc-dialog-header-text-color - text color of the header/title of the dialog\n * @cssproperty --mdc-dialog-description-text-color - text color of the below header description of the dialog\n * @cssproperty --mdc-dialog-elevation-3 - elevation of the dialog\n * @cssproperty --mdc-dialog-width - width of the dialog\n *\n * @slot header-prefix - Slot for the dialog header content. This can be used to pass custom header content.\n * @slot dialog-body - Slot for the dialog body content\n * @slot footer-link - This slot is for passing `mdc-link` component within the footer section.\n * @slot footer-button-secondary - This slot is for passing secondary variant of `mdc-button` component\n * within the footer section.\n * @slot footer-button-primary - This slot is for passing primary variant of\n * `mdc-button` component within the footer section.\n * @slot footer -  This slot is for passing custom footer content. Only use this if really needed,\n * using the footer-link and footer-button slots is preferred\n */",
+          "tagName": "mdc-divider",
+          "jsDoc": "/**\n * `mdc-divider` is a component that provides a line to separate and organize content.\n * It can also include a button or text positioned centrally, allowing users to interact with the layout.\n *\n * **Divider Orientation:**\n * - **Horizontal**: A thin, horizontal line.\n * - **Vertical**: A thin, vertical line.\n *\n * **Divider Variants:**\n * - **solid**: Solid line.\n * - **gradient**: Gradient Line.\n *\n * **Divider Types:**\n * - The type of divider is inferred based on the kind of slot present.\n *  - **Primary**: A simple horizontal or vertical divider.\n *  - **Text**: A horizontal divider with a text label in the center.\n *  - **Grabber Button**: A horizontal or vertical divider with a styled button in the center.\n *\n * **Accessibility:**\n * - When the slot is replaced by an `mdc-button`:\n *   - `aria-label` should be passed to the `mdc-button`.\n *   - `aria-expanded` should be passed to the `mdc-button`.\n *\n * **Notes:**\n * - If the slot is replaced by an invalid tag name or contains multiple elements,\n *   the divider defaults to the **Primary** type.\n * - To override the styles of the divider, use the provided CSS custom properties.\n *\n * @tagname mdc-divider\n *\n * @cssproperty --mdc-divider-background-color - background color of the divider\n * @cssproperty --mdc-divider-width - width of the divider\n * @cssproperty --mdc-divider-horizontal-gradient - gradient of the horizontal divider\n * @cssproperty --mdc-divider-vertical-gradient - gradient of the vertical divider\n * @cssproperty --mdc-divider-text-size - font size of label in the text divider\n * @cssproperty --mdc-divider-text-color - font color of label in the text divider\n * @cssproperty --mdc-divider-text-margin - left and right margin of label in the text divider\n * @cssproperty --mdc-divider-text-line-height - line height of label in the text divider\n * @cssproperty --mdc-divider-grabber-button-background-color-normal - background color of the grabber button\n *  in rest state\n * @cssproperty --mdc-divider-grabber-button-background-color-hover - background color of the grabber button\n *  in hover state\n * @cssproperty --mdc-divider-grabber-button-background-color-pressed - background color of the grabber button\n *  in pressed state\n * @cssproperty --mdc-divider-grabber-button-border-color - border color of the grabber button\n * @cssproperty --mdc-divider-grabber-button-border-radius - border radius of the grabber button\n */",
           "customElement": true
         }
       ],
@@ -10783,8 +10783,8 @@
           "kind": "js",
           "name": "default",
           "declaration": {
-            "name": "Dialog",
-            "module": "components/dialog/dialog.component.js"
+            "name": "Divider",
+            "module": "components/divider/divider.component.js"
           }
         }
       ]
@@ -33715,24 +33715,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",
@@ -33815,53 +33819,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": {
@@ -33869,6 +33849,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": "void"
+                }
+              },
+              "description": "Updates the tooltip id if it is empty."
+            },
             {
               "kind": "method",
               "name": "onPlacementUpdated",
@@ -33878,7 +33889,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",
@@ -34471,6 +34502,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",
@@ -35038,7 +35084,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": {
@@ -35047,7 +35093,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": {
@@ -35056,7 +35102,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": {
@@ -35065,7 +35111,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": {
@@ -35076,25 +35122,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",
@@ -35148,6 +35182,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": {
@@ -35478,9 +35525,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 */",
-          "customElement": true
+          "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"
+              }
+            }
+          ]
         }
       ],
       "exports": [
@@ -35488,36 +35545,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",
@@ -35600,18 +35653,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",
@@ -35621,76 +35673,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": "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",
@@ -36283,21 +36309,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",
@@ -36865,7 +36876,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": {
@@ -36874,7 +36885,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": {
@@ -36883,7 +36894,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": {
@@ -36892,7 +36903,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": {
@@ -36903,13 +36914,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",
@@ -36963,19 +36986,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": {
@@ -37306,19 +37316,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 */",
-          "customElement": true,
-          "slots": [
-            {
-              "description": "Default slot for the popover content",
-              "name": "",
-              "inheritedFrom": {
-                "name": "Popover",
-                "module": "src/components/popover/popover.component.ts"
-              }
-            }
-          ]
+          "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
         }
       ],
       "exports": [
@@ -37326,8 +37326,8 @@
           "kind": "js",
           "name": "default",
           "declaration": {
-            "name": "Tooltip",
-            "module": "components/tooltip/tooltip.component.js"
+            "name": "ToggleTip",
+            "module": "components/toggletip/toggletip.component.js"
           }
         }
       ]