@momentum-design/components 0.111.2 → 0.111.3

package/dist/custom-elements.json

@@ -15534,219 +15534,6 @@
         }
       ]
     },
-    {
-      "kind": "javascript-module",
-      "path": "components/inputchip/inputchip.component.js",
-      "declarations": [
-        {
-          "kind": "class",
-          "description": "mdc-inputchip component is an interactive chip that consumers can use to represent an input.\n\n- It supports a leading icon along with label.\n- It supports an error state for validation.\n- It supports a close button to remove the chip.",
-          "name": "InputChip",
-          "cssProperties": [
-            {
-              "description": "The color of the chip.",
-              "name": "--mdc-chip-color"
-            },
-            {
-              "description": "The border color of the chip.",
-              "name": "--mdc-chip-border-color"
-            },
-            {
-              "description": "The background color of the chip.",
-              "name": "--mdc-chip-background-color"
-            }
-          ],
-          "cssParts": [
-            {
-              "description": "The label part of the chip.",
-              "name": "label"
-            },
-            {
-              "description": "The icon part of the chip.",
-              "name": "icon"
-            },
-            {
-              "description": "The close icon part of the chip.",
-              "name": "close-icon"
-            }
-          ],
-          "members": [
-            {
-              "kind": "field",
-              "name": "label",
-              "type": {
-                "text": "string"
-              },
-              "default": "''",
-              "description": "The label of the inputchip.\n\nWe recommend limiting the <b>maximum length of the label text to 20 characters</b>,\nincluding empty spaces to split words.",
-              "attribute": "label"
-            },
-            {
-              "kind": "field",
-              "name": "error",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "The error state of the inputchip.",
-              "attribute": "error"
-            },
-            {
-              "kind": "field",
-              "name": "clearAriaLabel",
-              "type": {
-                "text": "string"
-              },
-              "default": "''",
-              "description": "The aria-label of the close button.",
-              "attribute": "clear-aria-label"
-            },
-            {
-              "kind": "method",
-              "name": "renderIcon",
-              "privacy": "private",
-              "description": "Renders the icon element if available.",
-              "return": {
-                "type": {
-                  "text": ""
-                }
-              }
-            },
-            {
-              "kind": "method",
-              "name": "handleClose",
-              "privacy": "private",
-              "description": "Handles the behavior of the close button on click event.",
-              "parameters": [
-                {
-                  "description": "The event object.",
-                  "name": "event"
-                }
-              ]
-            },
-            {
-              "kind": "field",
-              "name": "iconName",
-              "type": {
-                "text": "IconNames | undefined"
-              },
-              "description": "Name of the icon (= filename).\n\nIf no `icon-name` is provided, no icon will be rendered.",
-              "attribute": "icon-name",
-              "inheritedFrom": {
-                "name": "IconNameMixin",
-                "module": "utils/mixins/IconNameMixin.js"
-              }
-            },
-            {
-              "kind": "field",
-              "name": "disabled",
-              "type": {
-                "text": "boolean | undefined"
-              },
-              "description": "Indicates whether the component is disabled.\nWhen the component is disabled for user interaction; it is not focusable or clickable.",
-              "default": "undefined",
-              "attribute": "disabled",
-              "reflects": true,
-              "inheritedFrom": {
-                "name": "DisabledMixin",
-                "module": "utils/mixins/DisabledMixin.js"
-              }
-            }
-          ],
-          "events": [
-            {
-              "name": "remove",
-              "type": {
-                "text": "CustomEvent"
-              },
-              "description": "This event is dispatched when the close button is activated. It bubbles and is composed.",
-              "reactName": "onRemove"
-            }
-          ],
-          "attributes": [
-            {
-              "name": "label",
-              "type": {
-                "text": "string"
-              },
-              "default": "''",
-              "description": "The label of the inputchip.\n\nWe recommend limiting the <b>maximum length of the label text to 20 characters</b>,\nincluding empty spaces to split words.",
-              "fieldName": "label"
-            },
-            {
-              "name": "error",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "The error state of the inputchip.",
-              "fieldName": "error"
-            },
-            {
-              "name": "clear-aria-label",
-              "type": {
-                "text": "string"
-              },
-              "default": "''",
-              "description": "The aria-label of the close button.",
-              "fieldName": "clearAriaLabel"
-            },
-            {
-              "name": "icon-name",
-              "type": {
-                "text": "IconNames | undefined"
-              },
-              "description": "Name of the icon (= filename).\n\nIf no `icon-name` is provided, no icon will be rendered.",
-              "fieldName": "iconName",
-              "inheritedFrom": {
-                "name": "IconNameMixin",
-                "module": "src/utils/mixins/IconNameMixin.ts"
-              }
-            },
-            {
-              "name": "disabled",
-              "type": {
-                "text": "boolean | undefined"
-              },
-              "description": "Indicates whether the component is disabled.\nWhen the component is disabled for user interaction; it is not focusable or clickable.",
-              "default": "undefined",
-              "fieldName": "disabled",
-              "inheritedFrom": {
-                "name": "DisabledMixin",
-                "module": "src/utils/mixins/DisabledMixin.ts"
-              }
-            }
-          ],
-          "mixins": [
-            {
-              "name": "IconNameMixin",
-              "module": "/src/utils/mixins/IconNameMixin"
-            },
-            {
-              "name": "DisabledMixin",
-              "module": "/src/utils/mixins/DisabledMixin"
-            }
-          ],
-          "superclass": {
-            "name": "Component",
-            "module": "/src/models"
-          },
-          "tagName": "mdc-inputchip",
-          "jsDoc": "/**\n * mdc-inputchip component is an interactive chip that consumers can use to represent an input.\n *\n * - It supports a leading icon along with label.\n * - It supports an error state for validation.\n * - It supports a close button to remove the chip.\n *\n * @tagname mdc-inputchip\n *\n * @dependency mdc-button\n * @dependency mdc-icon\n * @dependency mdc-text\n *\n * @event remove - This event is dispatched when the close button is activated. It bubbles and is composed.\n *\n * @csspart label - The label part of the chip.\n * @csspart icon - The icon part of the chip.\n * @csspart close-icon - The close icon part of the chip.\n *\n * @cssproperty --mdc-chip-color - The color of the chip.\n * @cssproperty --mdc-chip-border-color - The border color of the chip.\n * @cssproperty --mdc-chip-background-color - The background color of the chip.\n *\n */",
-          "customElement": true
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "default",
-          "declaration": {
-            "name": "InputChip",
-            "module": "components/inputchip/inputchip.component.js"
-          }
-        }
-      ]
-    },
     {
       "kind": "javascript-module",
       "path": "components/link/link.component.js",
@@ -16159,22 +15946,235 @@
               }
             },
             {
-              "description": "Color of the inverted link’s child content in the hover state.",
-              "name": "--mdc-link-inverted-color-hover",
+              "description": "Color of the inverted link’s child content in the hover state.",
+              "name": "--mdc-link-inverted-color-hover",
+              "inheritedFrom": {
+                "name": "Linksimple",
+                "module": "src/components/linksimple/linksimple.component.ts"
+              }
+            },
+            {
+              "description": "Color of the inverted link’s child content in the normal state.",
+              "name": "--mdc-link-inverted-color-normal",
+              "inheritedFrom": {
+                "name": "Linksimple",
+                "module": "src/components/linksimple/linksimple.component.ts"
+              }
+            }
+          ]
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "default",
+          "declaration": {
+            "name": "Link",
+            "module": "components/link/link.component.js"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "components/inputchip/inputchip.component.js",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "mdc-inputchip component is an interactive chip that consumers can use to represent an input.\n\n- It supports a leading icon along with label.\n- It supports an error state for validation.\n- It supports a close button to remove the chip.",
+          "name": "InputChip",
+          "cssProperties": [
+            {
+              "description": "The color of the chip.",
+              "name": "--mdc-chip-color"
+            },
+            {
+              "description": "The border color of the chip.",
+              "name": "--mdc-chip-border-color"
+            },
+            {
+              "description": "The background color of the chip.",
+              "name": "--mdc-chip-background-color"
+            }
+          ],
+          "cssParts": [
+            {
+              "description": "The label part of the chip.",
+              "name": "label"
+            },
+            {
+              "description": "The icon part of the chip.",
+              "name": "icon"
+            },
+            {
+              "description": "The close icon part of the chip.",
+              "name": "close-icon"
+            }
+          ],
+          "members": [
+            {
+              "kind": "field",
+              "name": "label",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "description": "The label of the inputchip.\n\nWe recommend limiting the <b>maximum length of the label text to 20 characters</b>,\nincluding empty spaces to split words.",
+              "attribute": "label"
+            },
+            {
+              "kind": "field",
+              "name": "error",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "The error state of the inputchip.",
+              "attribute": "error"
+            },
+            {
+              "kind": "field",
+              "name": "clearAriaLabel",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "description": "The aria-label of the close button.",
+              "attribute": "clear-aria-label"
+            },
+            {
+              "kind": "method",
+              "name": "renderIcon",
+              "privacy": "private",
+              "description": "Renders the icon element if available.",
+              "return": {
+                "type": {
+                  "text": ""
+                }
+              }
+            },
+            {
+              "kind": "method",
+              "name": "handleClose",
+              "privacy": "private",
+              "description": "Handles the behavior of the close button on click event.",
+              "parameters": [
+                {
+                  "description": "The event object.",
+                  "name": "event"
+                }
+              ]
+            },
+            {
+              "kind": "field",
+              "name": "iconName",
+              "type": {
+                "text": "IconNames | undefined"
+              },
+              "description": "Name of the icon (= filename).\n\nIf no `icon-name` is provided, no icon will be rendered.",
+              "attribute": "icon-name",
+              "inheritedFrom": {
+                "name": "IconNameMixin",
+                "module": "utils/mixins/IconNameMixin.js"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "disabled",
+              "type": {
+                "text": "boolean | undefined"
+              },
+              "description": "Indicates whether the component is disabled.\nWhen the component is disabled for user interaction; it is not focusable or clickable.",
+              "default": "undefined",
+              "attribute": "disabled",
+              "reflects": true,
+              "inheritedFrom": {
+                "name": "DisabledMixin",
+                "module": "utils/mixins/DisabledMixin.js"
+              }
+            }
+          ],
+          "events": [
+            {
+              "name": "remove",
+              "type": {
+                "text": "CustomEvent"
+              },
+              "description": "This event is dispatched when the close button is activated. It bubbles and is composed.",
+              "reactName": "onRemove"
+            }
+          ],
+          "attributes": [
+            {
+              "name": "label",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "description": "The label of the inputchip.\n\nWe recommend limiting the <b>maximum length of the label text to 20 characters</b>,\nincluding empty spaces to split words.",
+              "fieldName": "label"
+            },
+            {
+              "name": "error",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "The error state of the inputchip.",
+              "fieldName": "error"
+            },
+            {
+              "name": "clear-aria-label",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "description": "The aria-label of the close button.",
+              "fieldName": "clearAriaLabel"
+            },
+            {
+              "name": "icon-name",
+              "type": {
+                "text": "IconNames | undefined"
+              },
+              "description": "Name of the icon (= filename).\n\nIf no `icon-name` is provided, no icon will be rendered.",
+              "fieldName": "iconName",
               "inheritedFrom": {
-                "name": "Linksimple",
-                "module": "src/components/linksimple/linksimple.component.ts"
+                "name": "IconNameMixin",
+                "module": "src/utils/mixins/IconNameMixin.ts"
               }
             },
             {
-              "description": "Color of the inverted link’s child content in the normal state.",
-              "name": "--mdc-link-inverted-color-normal",
+              "name": "disabled",
+              "type": {
+                "text": "boolean | undefined"
+              },
+              "description": "Indicates whether the component is disabled.\nWhen the component is disabled for user interaction; it is not focusable or clickable.",
+              "default": "undefined",
+              "fieldName": "disabled",
               "inheritedFrom": {
-                "name": "Linksimple",
-                "module": "src/components/linksimple/linksimple.component.ts"
+                "name": "DisabledMixin",
+                "module": "src/utils/mixins/DisabledMixin.ts"
               }
             }
-          ]
+          ],
+          "mixins": [
+            {
+              "name": "IconNameMixin",
+              "module": "/src/utils/mixins/IconNameMixin"
+            },
+            {
+              "name": "DisabledMixin",
+              "module": "/src/utils/mixins/DisabledMixin"
+            }
+          ],
+          "superclass": {
+            "name": "Component",
+            "module": "/src/models"
+          },
+          "tagName": "mdc-inputchip",
+          "jsDoc": "/**\n * mdc-inputchip component is an interactive chip that consumers can use to represent an input.\n *\n * - It supports a leading icon along with label.\n * - It supports an error state for validation.\n * - It supports a close button to remove the chip.\n *\n * @tagname mdc-inputchip\n *\n * @dependency mdc-button\n * @dependency mdc-icon\n * @dependency mdc-text\n *\n * @event remove - This event is dispatched when the close button is activated. It bubbles and is composed.\n *\n * @csspart label - The label part of the chip.\n * @csspart icon - The icon part of the chip.\n * @csspart close-icon - The close icon part of the chip.\n *\n * @cssproperty --mdc-chip-color - The color of the chip.\n * @cssproperty --mdc-chip-border-color - The border color of the chip.\n * @cssproperty --mdc-chip-background-color - The background color of the chip.\n *\n */",
+          "customElement": true
         }
       ],
       "exports": [
@@ -16182,8 +16182,8 @@
           "kind": "js",
           "name": "default",
           "declaration": {
-            "name": "Link",
-            "module": "components/link/link.component.js"
+            "name": "InputChip",
+            "module": "components/inputchip/inputchip.component.js"
           }
         }
       ]
@@ -19580,7 +19580,7 @@
               "kind": "method",
               "name": "handleMouseClick",
               "privacy": "private",
-              "description": "Handles click events to toggle checked state\nIf the menuitemcheckbox is disabled, it does nothing.\nIf the menuitemcheckbox is not disabled, it toggles the `checked` state between `true` and `false`."
+              "description": "Handles click events to toggle checked state\nIf the menuitemcheckbox is disabled, it does nothing.\nIf the menuitemcheckbox is not disabled, it toggles checked if uncontrolled, and dispatches the 'change' event."
             },
             {
               "kind": "method",
@@ -19615,6 +19615,21 @@
               },
               "description": "Returns a checkmark icon if the indicator is set to checkmark and the checked state is true.\nIf the indicator is not set to checkmark or the checked state is false, it returns nothing.\n\nThe checkmark icon will always be positioned on the trailing side of the menuitem label."
             },
+            {
+              "kind": "field",
+              "name": "controlled",
+              "type": {
+                "text": "boolean | undefined"
+              },
+              "description": "Indicates whether the component is controlled.\nWhen the component is controlled, it will not handle any interaction itself, e.g. toggling a checkbox.",
+              "default": "undefined",
+              "attribute": "controlled",
+              "reflects": true,
+              "inheritedFrom": {
+                "name": "ControlledMixin",
+                "module": "utils/mixins/ControlledMixin.js"
+              }
+            },
             {
               "kind": "field",
               "name": "arrowPosition",
@@ -20103,6 +20118,19 @@
               "default": "'checkbox'",
               "fieldName": "indicator"
             },
+            {
+              "name": "controlled",
+              "type": {
+                "text": "boolean | undefined"
+              },
+              "description": "Indicates whether the component is controlled.\nWhen the component is controlled, it will not handle any interaction itself, e.g. toggling a checkbox.",
+              "default": "undefined",
+              "fieldName": "controlled",
+              "inheritedFrom": {
+                "name": "ControlledMixin",
+                "module": "src/utils/mixins/ControlledMixin.ts"
+              }
+            },
             {
               "name": "arrow-position",
               "type": {
@@ -20264,6 +20292,12 @@
               }
             }
           ],
+          "mixins": [
+            {
+              "name": "ControlledMixin",
+              "module": "/src/utils/mixins/ControlledMixin"
+            }
+          ],
           "superclass": {
             "name": "MenuItem",
             "module": "/src/components/menuitem/menuitem.component"
@@ -38910,24 +38944,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",
@@ -39018,53 +39056,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": {
@@ -39072,6 +39086,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",
@@ -39081,7 +39126,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",
@@ -39689,6 +39754,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",
@@ -40393,7 +40473,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": {
@@ -40402,7 +40482,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": {
@@ -40411,7 +40491,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": {
@@ -40420,7 +40500,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": {
@@ -40431,25 +40511,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",
@@ -40503,6 +40571,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": {
@@ -40905,14 +40986,24 @@
                 "module": "src/components/popover/popover.component.ts"
               }
             }
-          ],
-          "superclass": {
-            "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
+          ],
+          "superclass": {
+            "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"
+              }
+            }
+          ]
         }
       ],
       "exports": [
@@ -40920,36 +41011,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",
@@ -41040,18 +41127,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",
@@ -41061,76 +41147,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",
@@ -41738,21 +41798,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",
@@ -42457,7 +42502,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": {
@@ -42466,7 +42511,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": {
@@ -42475,7 +42520,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": {
@@ -42484,7 +42529,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": {
@@ -42495,13 +42540,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",
@@ -42555,19 +42612,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": {
@@ -42975,19 +43019,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": [
@@ -42995,8 +43029,8 @@
           "kind": "js",
           "name": "default",
           "declaration": {
-            "name": "Tooltip",
-            "module": "components/tooltip/tooltip.component.js"
+            "name": "ToggleTip",
+            "module": "components/toggletip/toggletip.component.js"
           }
         }
       ]
@@ -44483,6 +44517,59 @@
         }
       ]
     },
+    {
+      "kind": "javascript-module",
+      "path": "utils/mixins/ControlledMixin.js",
+      "declarations": [
+        {
+          "kind": "mixin",
+          "description": "",
+          "name": "ControlledMixin",
+          "members": [
+            {
+              "kind": "field",
+              "name": "controlled",
+              "type": {
+                "text": "boolean | undefined"
+              },
+              "description": "Indicates whether the component is controlled.\nWhen the component is controlled, it will not handle any interaction itself, e.g. toggling a checkbox.",
+              "default": "undefined",
+              "attribute": "controlled",
+              "reflects": true
+            }
+          ],
+          "attributes": [
+            {
+              "name": "controlled",
+              "type": {
+                "text": "boolean | undefined"
+              },
+              "description": "Indicates whether the component is controlled.\nWhen the component is controlled, it will not handle any interaction itself, e.g. toggling a checkbox.",
+              "default": "undefined",
+              "fieldName": "controlled"
+            }
+          ],
+          "parameters": [
+            {
+              "name": "superClass",
+              "type": {
+                "text": "T"
+              }
+            }
+          ]
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "ControlledMixin",
+          "declaration": {
+            "name": "ControlledMixin",
+            "module": "utils/mixins/ControlledMixin.js"
+          }
+        }
+      ]
+    },
     {
       "kind": "javascript-module",
       "path": "utils/mixins/DataAriaLabelMixin.js",