@momentum-design/components 0.66.0 → 0.66.2

package/dist/custom-elements.json

@@ -309,143 +309,50 @@
     },
     {
       "kind": "javascript-module",
-      "path": "components/avatarbutton/avatarbutton.component.js",
+      "path": "components/alertchip/alertchip.component.js",
       "declarations": [
         {
           "kind": "class",
-          "description": "The `mdc-avatarbutton` component is an interactable version of the `mdc-avatar` component.\n\nThis component is made by extending `buttonsimple` class.\nThe button component acts as a wrapper for the avatar component.",
-          "name": "AvatarButton",
+          "description": "mdc-alertchip component is an interactive chip that consumers can use to represent an alert.\n\n- It supports a leading icon along with label.\n- It supports 5 variants of alerts - neutral, warning, error, success, and informational\n\nThis component is built by extending Buttonsimple.",
+          "name": "AlertChip",
           "cssProperties": [
             {
-              "description": "Background color of the overlay in rest state",
-              "name": "--mdc-avatarbutton-overlay-background-color-rest"
+              "description": "The color of the label text",
+              "name": "--mdc-chip-color"
             },
             {
-              "description": "Background color of the overlay in hover state",
-              "name": "--mdc-avatarbutton-overlay-background-color-hover"
+              "description": "The color of the icon",
+              "name": "--mdc-chip-icon-color"
             },
             {
-              "description": "Background color of the overlay in active state",
-              "name": "--mdc-avatarbutton-overlay-background-color-active"
+              "description": "The border color of the alertchip",
+              "name": "--mdc-chip-border-color"
+            },
+            {
+              "description": "The background color of the alertchip",
+              "name": "--mdc-chip-background-color"
             }
           ],
           "members": [
             {
               "kind": "field",
-              "name": "ariaLabel",
-              "type": {
-                "text": "string | null"
-              },
-              "default": "null",
-              "description": "Aria-label attribute to be set for accessibility",
-              "attribute": "aria-label"
-            },
-            {
-              "kind": "method",
-              "name": "setSize",
-              "privacy": "private",
-              "parameters": [
-                {
-                  "name": "size",
-                  "type": {
-                    "text": "AvatarSize"
-                  }
-                }
-              ]
-            },
-            {
-              "kind": "field",
-              "name": "src",
-              "type": {
-                "text": "string | undefined"
-              },
-              "description": "The src is the url which will be used to display the avatar.\nWhen the src is loading, we will display the initials as a placeholder.",
-              "attribute": "src",
-              "inheritedFrom": {
-                "name": "AvatarComponentMixin",
-                "module": "utils/mixins/AvatarComponentMixin.js"
-              }
-            },
-            {
-              "kind": "field",
-              "name": "initials",
-              "type": {
-                "text": "string | undefined"
-              },
-              "description": "The initials to be displayed for the avatar.",
-              "attribute": "initials",
-              "inheritedFrom": {
-                "name": "AvatarComponentMixin",
-                "module": "utils/mixins/AvatarComponentMixin.js"
-              }
-            },
-            {
-              "kind": "field",
-              "name": "presence",
-              "type": {
-                "text": "PresenceType | undefined"
-              },
-              "description": "The presence is the status which can be used to display the\nactivity state of a user or a space within an avatar component.\n\nAcceptable values include:\n- `active`\n- `away`\n- `away-calling`\n- `busy`\n- `dnd`\n- `meeting`\n- `on-call`\n- `on-device`\n- `on-mobile`\n- `pause`\n- `pto`\n- `presenting`\n- `quiet`\n- `scheduled`",
-              "attribute": "presence",
-              "inheritedFrom": {
-                "name": "AvatarComponentMixin",
-                "module": "utils/mixins/AvatarComponentMixin.js"
-              }
-            },
-            {
-              "kind": "field",
-              "name": "size",
-              "type": {
-                "text": "ButtonSize"
-              },
-              "description": "Acceptable values include (size in px unit):\n- 24\n- 32\n- 48\n- 64\n- 72\n- 88\n- 124",
-              "default": "32",
-              "attribute": "size",
-              "reflects": true,
-              "inheritedFrom": {
-                "name": "Buttonsimple",
-                "module": "components/buttonsimple/buttonsimple.component.js"
-              }
-            },
-            {
-              "kind": "field",
-              "name": "counter",
-              "type": {
-                "text": "number | undefined"
-              },
-              "description": "The counter is the number which can be displayed on the avatar.\nThe maximum number is 99 and if the given number is greater than 99,\nthen the avatar will be displayed as `99+`.\nIf the given number is a negative number,\nthen the avatar will be displayed as `0`.",
-              "attribute": "counter",
-              "inheritedFrom": {
-                "name": "AvatarComponentMixin",
-                "module": "utils/mixins/AvatarComponentMixin.js"
-              }
-            },
-            {
-              "kind": "field",
-              "name": "isTyping",
+              "name": "variant",
               "type": {
-                "text": "boolean"
+                "text": "VariantType"
               },
-              "default": "false",
-              "description": "Represents the typing indicator when the user is typing.",
-              "attribute": "is-typing",
-              "inheritedFrom": {
-                "name": "AvatarComponentMixin",
-                "module": "utils/mixins/AvatarComponentMixin.js"
-              }
+              "description": "The variant of the alertchip. It supports 5 variants\n- neutral\n- warning\n- error\n- success\n- informational",
+              "default": "neutral",
+              "attribute": "variant"
             },
             {
               "kind": "field",
-              "name": "iconName",
+              "name": "label",
               "type": {
-                "text": "IconNames | undefined"
+                "text": "string"
               },
-              "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"
-              }
+              "default": "''",
+              "description": "The visible label text of the alertchip.\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",
@@ -507,6 +414,21 @@
                 "module": "components/buttonsimple/buttonsimple.component.js"
               }
             },
+            {
+              "kind": "field",
+              "name": "size",
+              "type": {
+                "text": "ButtonSize"
+              },
+              "description": "Simplebutton size is a super set of all the sizes supported by children components.",
+              "default": "32",
+              "attribute": "size",
+              "reflects": true,
+              "inheritedFrom": {
+                "name": "Buttonsimple",
+                "module": "components/buttonsimple/buttonsimple.component.js"
+              }
+            },
             {
               "kind": "field",
               "name": "role",
@@ -696,187 +618,85 @@
               }
             }
           ],
-          "events": [
-            {
-              "description": "(React: onClick) This event is dispatched when the avatarbutton is clicked.",
-              "name": "click",
-              "reactName": "onClick",
-              "inheritedFrom": {
-                "name": "Buttonsimple",
-                "module": "src/components/buttonsimple/buttonsimple.component.ts"
-              }
-            },
-            {
-              "description": "(React: onKeyDown) This event is dispatched when a key is pressed down on the avatarbutton.",
-              "name": "keydown",
-              "reactName": "onKeyDown",
-              "inheritedFrom": {
-                "name": "Buttonsimple",
-                "module": "src/components/buttonsimple/buttonsimple.component.ts"
-              }
-            },
-            {
-              "description": "(React: onKeyUp) This event is dispatched when a key is released on the avatarbutton.",
-              "name": "keyup",
-              "reactName": "onKeyUp",
-              "inheritedFrom": {
-                "name": "Buttonsimple",
-                "module": "src/components/buttonsimple/buttonsimple.component.ts"
-              }
-            },
-            {
-              "description": "(React: onFocus) This event is dispatched when the avatarbutton receives focus.",
-              "name": "focus",
-              "reactName": "onFocus",
-              "inheritedFrom": {
-                "name": "Buttonsimple",
-                "module": "src/components/buttonsimple/buttonsimple.component.ts"
-              }
-            }
-          ],
           "attributes": [
             {
-              "name": "aria-label",
+              "name": "variant",
               "type": {
-                "text": "string | null"
+                "text": "VariantType"
               },
-              "default": "null",
-              "description": "Aria-label attribute to be set for accessibility",
-              "fieldName": "ariaLabel"
+              "description": "The variant of the alertchip. It supports 5 variants\n- neutral\n- warning\n- error\n- success\n- informational",
+              "default": "neutral",
+              "fieldName": "variant"
             },
             {
-              "name": "src",
+              "name": "label",
               "type": {
-                "text": "string | undefined"
+                "text": "string"
               },
-              "description": "The src is the url which will be used to display the avatar.\nWhen the src is loading, we will display the initials as a placeholder.",
-              "fieldName": "src",
-              "inheritedFrom": {
-                "name": "AvatarComponentMixin",
-                "module": "src/utils/mixins/AvatarComponentMixin.ts"
-              }
+              "default": "''",
+              "description": "The visible label text of the alertchip.\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": "initials",
+              "name": "tabIndex",
               "type": {
-                "text": "string | undefined"
+                "text": "number"
               },
-              "description": "The initials to be displayed for the avatar.",
-              "fieldName": "initials",
+              "default": "0",
+              "description": "This property specifies the tab order of the element.",
+              "fieldName": "tabIndex",
               "inheritedFrom": {
-                "name": "AvatarComponentMixin",
-                "module": "src/utils/mixins/AvatarComponentMixin.ts"
+                "name": "TabIndexMixin",
+                "module": "src/utils/mixins/TabIndexMixin.ts"
               }
             },
             {
-              "name": "presence",
+              "name": "disabled",
               "type": {
-                "text": "PresenceType | undefined"
+                "text": "boolean | undefined"
               },
-              "description": "The presence is the status which can be used to display the\nactivity state of a user or a space within an avatar component.\n\nAcceptable values include:\n- `active`\n- `away`\n- `away-calling`\n- `busy`\n- `dnd`\n- `meeting`\n- `on-call`\n- `on-device`\n- `on-mobile`\n- `pause`\n- `pto`\n- `presenting`\n- `quiet`\n- `scheduled`",
-              "fieldName": "presence",
+              "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": "AvatarComponentMixin",
-                "module": "src/utils/mixins/AvatarComponentMixin.ts"
+                "name": "DisabledMixin",
+                "module": "src/utils/mixins/DisabledMixin.ts"
               }
             },
             {
-              "name": "size",
+              "name": "active",
               "type": {
-                "text": "ButtonSize"
+                "text": "boolean | undefined"
               },
-              "description": "Acceptable values include (size in px unit):\n- 24\n- 32\n- 48\n- 64\n- 72\n- 88\n- 124",
-              "default": "32",
-              "fieldName": "size",
+              "description": "The button's active state indicates whether it is currently toggled on (active) or off (inactive).\nWhen the active state is true, the button is considered to be in an active state, meaning it is toggled on.\nConversely, when the active state is false, the button is in an inactive state, indicating it is toggled off.\n\nThis attribute is used to set the provided `ariaStateKey` to true or false.",
+              "default": "undefined",
+              "fieldName": "active",
               "inheritedFrom": {
                 "name": "Buttonsimple",
                 "module": "src/components/buttonsimple/buttonsimple.component.ts"
               }
             },
             {
-              "name": "counter",
+              "name": "soft-disabled",
               "type": {
-                "text": "number | undefined"
+                "text": "boolean | undefined"
               },
-              "description": "The counter is the number which can be displayed on the avatar.\nThe maximum number is 99 and if the given number is greater than 99,\nthen the avatar will be displayed as `99+`.\nIf the given number is a negative number,\nthen the avatar will be displayed as `0`.",
-              "fieldName": "counter",
-              "inheritedFrom": {
-                "name": "AvatarComponentMixin",
-                "module": "src/utils/mixins/AvatarComponentMixin.ts"
-              }
-            },
-            {
-              "name": "is-typing",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "Represents the typing indicator when the user is typing.",
-              "fieldName": "isTyping",
-              "inheritedFrom": {
-                "name": "AvatarComponentMixin",
-                "module": "src/utils/mixins/AvatarComponentMixin.ts"
-              }
-            },
-            {
-              "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": "tabIndex",
-              "type": {
-                "text": "number"
-              },
-              "default": "0",
-              "description": "This property specifies the tab order of the element.",
-              "fieldName": "tabIndex",
-              "inheritedFrom": {
-                "name": "TabIndexMixin",
-                "module": "src/utils/mixins/TabIndexMixin.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"
-              }
-            },
-            {
-              "name": "active",
-              "type": {
-                "text": "boolean | undefined"
-              },
-              "description": "The button's active state indicates whether it is currently toggled on (active) or off (inactive).\nWhen the active state is true, the button is considered to be in an active state, meaning it is toggled on.\nConversely, when the active state is false, the button is in an inactive state, indicating it is toggled off.\n\nThis attribute is used to set the provided `ariaStateKey` to true or false.",
+              "description": "Indicates whether the button is soft disabled.\nWhen set to `true`, the button appears visually disabled but still allows\nfocus, click, and keyboard actions to be passed through.\n\n**Important:** When using soft disabled, consumers must ensure that\nthe button behaves like a disabled button, allowing only focus and\npreventing any interactions (clicks or keyboard actions) from triggering unintended actions.",
               "default": "undefined",
-              "fieldName": "active",
+              "fieldName": "softDisabled",
               "inheritedFrom": {
                 "name": "Buttonsimple",
                 "module": "src/components/buttonsimple/buttonsimple.component.ts"
               }
             },
             {
-              "name": "soft-disabled",
+              "name": "size",
               "type": {
-                "text": "boolean | undefined"
+                "text": "ButtonSize"
               },
-              "description": "Indicates whether the button is soft disabled.\nWhen set to `true`, the button appears visually disabled but still allows\nfocus, click, and keyboard actions to be passed through.\n\n**Important:** When using soft disabled, consumers must ensure that\nthe button behaves like a disabled button, allowing only focus and\npreventing any interactions (clicks or keyboard actions) from triggering unintended actions.",
-              "default": "undefined",
-              "fieldName": "softDisabled",
+              "description": "Simplebutton size is a super set of all the sizes supported by children components.",
+              "default": "32",
+              "fieldName": "size",
               "inheritedFrom": {
                 "name": "Buttonsimple",
                 "module": "src/components/buttonsimple/buttonsimple.component.ts"
@@ -919,23 +739,51 @@
               }
             }
           ],
-          "mixins": [
-            {
-              "name": "AvatarComponentMixin",
-              "module": "/src/utils/mixins/AvatarComponentMixin"
-            },
-            {
-              "name": "IconNameMixin",
-              "module": "/src/utils/mixins/IconNameMixin"
-            }
-          ],
           "superclass": {
             "name": "Buttonsimple",
             "module": "/src/components/buttonsimple/buttonsimple.component"
           },
-          "tagName": "mdc-avatarbutton",
-          "jsDoc": "/**\n * The `mdc-avatarbutton` component is an interactable version of the `mdc-avatar` component.\n *\n * This component is made by extending `buttonsimple` class.\n * The button component acts as a wrapper for the avatar component.\n *\n * @dependency mdc-avatar\n *\n * @event click - (React: onClick) This event is dispatched when the avatarbutton is clicked.\n * @event keydown - (React: onKeyDown) This event is dispatched when a key is pressed down on the avatarbutton.\n * @event keyup - (React: onKeyUp) This event is dispatched when a key is released on the avatarbutton.\n * @event focus - (React: onFocus) This event is dispatched when the avatarbutton receives focus.\n *\n * @tagname mdc-avatarbutton\n *\n * @cssproperty --mdc-avatarbutton-overlay-background-color-rest - Background color of the overlay in rest state\n * @cssproperty --mdc-avatarbutton-overlay-background-color-hover - Background color of the overlay in hover state\n * @cssproperty --mdc-avatarbutton-overlay-background-color-active - Background color of the overlay in active state\n */",
-          "customElement": true
+          "tagName": "mdc-alertchip",
+          "jsDoc": "/**\n * mdc-alertchip component is an interactive chip that consumers can use to represent an alert.\n *\n * - It supports a leading icon along with label.\n * - It supports 5 variants of alerts - neutral, warning, error, success, and informational\n *\n * This component is built by extending Buttonsimple.\n *\n * @tagname mdc-alertchip\n *\n * @dependency mdc-icon\n * @dependency mdc-text\n *\n * @cssproperty --mdc-chip-color - The color of the label text\n * @cssproperty --mdc-chip-icon-color - The color of the icon\n * @cssproperty --mdc-chip-border-color - The border color of the alertchip\n * @cssproperty --mdc-chip-background-color - The background color of the alertchip\n *\n */",
+          "customElement": true,
+          "events": [
+            {
+              "description": "(React: onClick) This event is dispatched when the button is clicked.",
+              "name": "click",
+              "reactName": "onClick",
+              "inheritedFrom": {
+                "name": "Buttonsimple",
+                "module": "src/components/buttonsimple/buttonsimple.component.ts"
+              }
+            },
+            {
+              "description": "(React: onKeyDown) This event is dispatched when a key is pressed down on the button.",
+              "name": "keydown",
+              "reactName": "onKeyDown",
+              "inheritedFrom": {
+                "name": "Buttonsimple",
+                "module": "src/components/buttonsimple/buttonsimple.component.ts"
+              }
+            },
+            {
+              "description": "(React: onKeyUp) This event is dispatched when a key is released on the button.",
+              "name": "keyup",
+              "reactName": "onKeyUp",
+              "inheritedFrom": {
+                "name": "Buttonsimple",
+                "module": "src/components/buttonsimple/buttonsimple.component.ts"
+              }
+            },
+            {
+              "description": "(React: onFocus) This event is dispatched when the button receives focus.",
+              "name": "focus",
+              "reactName": "onFocus",
+              "inheritedFrom": {
+                "name": "Buttonsimple",
+                "module": "src/components/buttonsimple/buttonsimple.component.ts"
+              }
+            }
+          ]
         }
       ],
       "exports": [
@@ -943,58 +791,151 @@
           "kind": "js",
           "name": "default",
           "declaration": {
-            "name": "AvatarButton",
-            "module": "components/avatarbutton/avatarbutton.component.js"
+            "name": "AlertChip",
+            "module": "components/alertchip/alertchip.component.js"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "components/alertchip/alertchip.component.js",
+      "path": "components/avatarbutton/avatarbutton.component.js",
       "declarations": [
         {
           "kind": "class",
-          "description": "mdc-alertchip component is an interactive chip that consumers can use to represent an alert.\n\n- It supports a leading icon along with label.\n- It supports 5 variants of alerts - neutral, warning, error, success, and informational\n\nThis component is built by extending Buttonsimple.",
-          "name": "AlertChip",
+          "description": "The `mdc-avatarbutton` component is an interactable version of the `mdc-avatar` component.\n\nThis component is made by extending `buttonsimple` class.\nThe button component acts as a wrapper for the avatar component.",
+          "name": "AvatarButton",
           "cssProperties": [
             {
-              "description": "The color of the label text",
-              "name": "--mdc-chip-color"
-            },
-            {
-              "description": "The color of the icon",
-              "name": "--mdc-chip-icon-color"
+              "description": "Background color of the overlay in rest state",
+              "name": "--mdc-avatarbutton-overlay-background-color-rest"
             },
             {
-              "description": "The border color of the alertchip",
-              "name": "--mdc-chip-border-color"
+              "description": "Background color of the overlay in hover state",
+              "name": "--mdc-avatarbutton-overlay-background-color-hover"
             },
             {
-              "description": "The background color of the alertchip",
-              "name": "--mdc-chip-background-color"
+              "description": "Background color of the overlay in active state",
+              "name": "--mdc-avatarbutton-overlay-background-color-active"
             }
           ],
           "members": [
             {
               "kind": "field",
-              "name": "variant",
+              "name": "ariaLabel",
               "type": {
-                "text": "VariantType"
+                "text": "string | null"
               },
-              "description": "The variant of the alertchip. It supports 5 variants\n- neutral\n- warning\n- error\n- success\n- informational",
-              "default": "neutral",
-              "attribute": "variant"
+              "default": "null",
+              "description": "Aria-label attribute to be set for accessibility",
+              "attribute": "aria-label"
+            },
+            {
+              "kind": "method",
+              "name": "setSize",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "size",
+                  "type": {
+                    "text": "AvatarSize"
+                  }
+                }
+              ]
             },
             {
               "kind": "field",
-              "name": "label",
+              "name": "src",
               "type": {
-                "text": "string"
+                "text": "string | undefined"
               },
-              "default": "''",
-              "description": "The visible label text of the alertchip.\n\nWe recommend limiting the <b>maximum length of the label text to 20 characters</b>,\nincluding empty spaces to split words.",
-              "attribute": "label"
+              "description": "The src is the url which will be used to display the avatar.\nWhen the src is loading, we will display the initials as a placeholder.",
+              "attribute": "src",
+              "inheritedFrom": {
+                "name": "AvatarComponentMixin",
+                "module": "utils/mixins/AvatarComponentMixin.js"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "initials",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "The initials to be displayed for the avatar.",
+              "attribute": "initials",
+              "inheritedFrom": {
+                "name": "AvatarComponentMixin",
+                "module": "utils/mixins/AvatarComponentMixin.js"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "presence",
+              "type": {
+                "text": "PresenceType | undefined"
+              },
+              "description": "The presence is the status which can be used to display the\nactivity state of a user or a space within an avatar component.\n\nAcceptable values include:\n- `active`\n- `away`\n- `away-calling`\n- `busy`\n- `dnd`\n- `meeting`\n- `on-call`\n- `on-device`\n- `on-mobile`\n- `pause`\n- `pto`\n- `presenting`\n- `quiet`\n- `scheduled`",
+              "attribute": "presence",
+              "inheritedFrom": {
+                "name": "AvatarComponentMixin",
+                "module": "utils/mixins/AvatarComponentMixin.js"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "size",
+              "type": {
+                "text": "ButtonSize"
+              },
+              "description": "Acceptable values include (size in px unit):\n- 24\n- 32\n- 48\n- 64\n- 72\n- 88\n- 124",
+              "default": "32",
+              "attribute": "size",
+              "reflects": true,
+              "inheritedFrom": {
+                "name": "Buttonsimple",
+                "module": "components/buttonsimple/buttonsimple.component.js"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "counter",
+              "type": {
+                "text": "number | undefined"
+              },
+              "description": "The counter is the number which can be displayed on the avatar.\nThe maximum number is 99 and if the given number is greater than 99,\nthen the avatar will be displayed as `99+`.\nIf the given number is a negative number,\nthen the avatar will be displayed as `0`.",
+              "attribute": "counter",
+              "inheritedFrom": {
+                "name": "AvatarComponentMixin",
+                "module": "utils/mixins/AvatarComponentMixin.js"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "isTyping",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Represents the typing indicator when the user is typing.",
+              "attribute": "is-typing",
+              "inheritedFrom": {
+                "name": "AvatarComponentMixin",
+                "module": "utils/mixins/AvatarComponentMixin.js"
+              }
+            },
+            {
+              "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",
@@ -1056,21 +997,6 @@
                 "module": "components/buttonsimple/buttonsimple.component.js"
               }
             },
-            {
-              "kind": "field",
-              "name": "size",
-              "type": {
-                "text": "ButtonSize"
-              },
-              "description": "Simplebutton size is a super set of all the sizes supported by children components.",
-              "default": "32",
-              "attribute": "size",
-              "reflects": true,
-              "inheritedFrom": {
-                "name": "Buttonsimple",
-                "module": "components/buttonsimple/buttonsimple.component.js"
-              }
-            },
             {
               "kind": "field",
               "name": "role",
@@ -1260,24 +1186,139 @@
               }
             }
           ],
+          "events": [
+            {
+              "description": "(React: onClick) This event is dispatched when the avatarbutton is clicked.",
+              "name": "click",
+              "reactName": "onClick",
+              "inheritedFrom": {
+                "name": "Buttonsimple",
+                "module": "src/components/buttonsimple/buttonsimple.component.ts"
+              }
+            },
+            {
+              "description": "(React: onKeyDown) This event is dispatched when a key is pressed down on the avatarbutton.",
+              "name": "keydown",
+              "reactName": "onKeyDown",
+              "inheritedFrom": {
+                "name": "Buttonsimple",
+                "module": "src/components/buttonsimple/buttonsimple.component.ts"
+              }
+            },
+            {
+              "description": "(React: onKeyUp) This event is dispatched when a key is released on the avatarbutton.",
+              "name": "keyup",
+              "reactName": "onKeyUp",
+              "inheritedFrom": {
+                "name": "Buttonsimple",
+                "module": "src/components/buttonsimple/buttonsimple.component.ts"
+              }
+            },
+            {
+              "description": "(React: onFocus) This event is dispatched when the avatarbutton receives focus.",
+              "name": "focus",
+              "reactName": "onFocus",
+              "inheritedFrom": {
+                "name": "Buttonsimple",
+                "module": "src/components/buttonsimple/buttonsimple.component.ts"
+              }
+            }
+          ],
           "attributes": [
             {
-              "name": "variant",
+              "name": "aria-label",
               "type": {
-                "text": "VariantType"
+                "text": "string | null"
               },
-              "description": "The variant of the alertchip. It supports 5 variants\n- neutral\n- warning\n- error\n- success\n- informational",
-              "default": "neutral",
-              "fieldName": "variant"
+              "default": "null",
+              "description": "Aria-label attribute to be set for accessibility",
+              "fieldName": "ariaLabel"
             },
             {
-              "name": "label",
+              "name": "src",
               "type": {
-                "text": "string"
+                "text": "string | undefined"
               },
-              "default": "''",
-              "description": "The visible label text of the alertchip.\n\nWe recommend limiting the <b>maximum length of the label text to 20 characters</b>,\nincluding empty spaces to split words.",
-              "fieldName": "label"
+              "description": "The src is the url which will be used to display the avatar.\nWhen the src is loading, we will display the initials as a placeholder.",
+              "fieldName": "src",
+              "inheritedFrom": {
+                "name": "AvatarComponentMixin",
+                "module": "src/utils/mixins/AvatarComponentMixin.ts"
+              }
+            },
+            {
+              "name": "initials",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "The initials to be displayed for the avatar.",
+              "fieldName": "initials",
+              "inheritedFrom": {
+                "name": "AvatarComponentMixin",
+                "module": "src/utils/mixins/AvatarComponentMixin.ts"
+              }
+            },
+            {
+              "name": "presence",
+              "type": {
+                "text": "PresenceType | undefined"
+              },
+              "description": "The presence is the status which can be used to display the\nactivity state of a user or a space within an avatar component.\n\nAcceptable values include:\n- `active`\n- `away`\n- `away-calling`\n- `busy`\n- `dnd`\n- `meeting`\n- `on-call`\n- `on-device`\n- `on-mobile`\n- `pause`\n- `pto`\n- `presenting`\n- `quiet`\n- `scheduled`",
+              "fieldName": "presence",
+              "inheritedFrom": {
+                "name": "AvatarComponentMixin",
+                "module": "src/utils/mixins/AvatarComponentMixin.ts"
+              }
+            },
+            {
+              "name": "size",
+              "type": {
+                "text": "ButtonSize"
+              },
+              "description": "Acceptable values include (size in px unit):\n- 24\n- 32\n- 48\n- 64\n- 72\n- 88\n- 124",
+              "default": "32",
+              "fieldName": "size",
+              "inheritedFrom": {
+                "name": "Buttonsimple",
+                "module": "src/components/buttonsimple/buttonsimple.component.ts"
+              }
+            },
+            {
+              "name": "counter",
+              "type": {
+                "text": "number | undefined"
+              },
+              "description": "The counter is the number which can be displayed on the avatar.\nThe maximum number is 99 and if the given number is greater than 99,\nthen the avatar will be displayed as `99+`.\nIf the given number is a negative number,\nthen the avatar will be displayed as `0`.",
+              "fieldName": "counter",
+              "inheritedFrom": {
+                "name": "AvatarComponentMixin",
+                "module": "src/utils/mixins/AvatarComponentMixin.ts"
+              }
+            },
+            {
+              "name": "is-typing",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Represents the typing indicator when the user is typing.",
+              "fieldName": "isTyping",
+              "inheritedFrom": {
+                "name": "AvatarComponentMixin",
+                "module": "src/utils/mixins/AvatarComponentMixin.ts"
+              }
+            },
+            {
+              "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": "tabIndex",
@@ -1331,19 +1372,6 @@
                 "module": "src/components/buttonsimple/buttonsimple.component.ts"
               }
             },
-            {
-              "name": "size",
-              "type": {
-                "text": "ButtonSize"
-              },
-              "description": "Simplebutton size is a super set of all the sizes supported by children components.",
-              "default": "32",
-              "fieldName": "size",
-              "inheritedFrom": {
-                "name": "Buttonsimple",
-                "module": "src/components/buttonsimple/buttonsimple.component.ts"
-              }
-            },
             {
               "name": "role",
               "description": "This property defines the ARIA role for the element. By default, it is set to 'button'.\nConsumers should override this role when:\n- The element is being used in a context where a different role is more appropriate.\n- Custom behaviors are implemented that require a specific ARIA role for accessibility purposes.",
@@ -1381,51 +1409,23 @@
               }
             }
           ],
-          "superclass": {
-            "name": "Buttonsimple",
-            "module": "/src/components/buttonsimple/buttonsimple.component"
-          },
-          "tagName": "mdc-alertchip",
-          "jsDoc": "/**\n * mdc-alertchip component is an interactive chip that consumers can use to represent an alert.\n *\n * - It supports a leading icon along with label.\n * - It supports 5 variants of alerts - neutral, warning, error, success, and informational\n *\n * This component is built by extending Buttonsimple.\n *\n * @tagname mdc-alertchip\n *\n * @dependency mdc-icon\n * @dependency mdc-text\n *\n * @cssproperty --mdc-chip-color - The color of the label text\n * @cssproperty --mdc-chip-icon-color - The color of the icon\n * @cssproperty --mdc-chip-border-color - The border color of the alertchip\n * @cssproperty --mdc-chip-background-color - The background color of the alertchip\n *\n */",
-          "customElement": true,
-          "events": [
-            {
-              "description": "(React: onClick) This event is dispatched when the button is clicked.",
-              "name": "click",
-              "reactName": "onClick",
-              "inheritedFrom": {
-                "name": "Buttonsimple",
-                "module": "src/components/buttonsimple/buttonsimple.component.ts"
-              }
-            },
-            {
-              "description": "(React: onKeyDown) This event is dispatched when a key is pressed down on the button.",
-              "name": "keydown",
-              "reactName": "onKeyDown",
-              "inheritedFrom": {
-                "name": "Buttonsimple",
-                "module": "src/components/buttonsimple/buttonsimple.component.ts"
-              }
-            },
+          "mixins": [
             {
-              "description": "(React: onKeyUp) This event is dispatched when a key is released on the button.",
-              "name": "keyup",
-              "reactName": "onKeyUp",
-              "inheritedFrom": {
-                "name": "Buttonsimple",
-                "module": "src/components/buttonsimple/buttonsimple.component.ts"
-              }
+              "name": "AvatarComponentMixin",
+              "module": "/src/utils/mixins/AvatarComponentMixin"
             },
             {
-              "description": "(React: onFocus) This event is dispatched when the button receives focus.",
-              "name": "focus",
-              "reactName": "onFocus",
-              "inheritedFrom": {
-                "name": "Buttonsimple",
-                "module": "src/components/buttonsimple/buttonsimple.component.ts"
-              }
+              "name": "IconNameMixin",
+              "module": "/src/utils/mixins/IconNameMixin"
             }
-          ]
+          ],
+          "superclass": {
+            "name": "Buttonsimple",
+            "module": "/src/components/buttonsimple/buttonsimple.component"
+          },
+          "tagName": "mdc-avatarbutton",
+          "jsDoc": "/**\n * The `mdc-avatarbutton` component is an interactable version of the `mdc-avatar` component.\n *\n * This component is made by extending `buttonsimple` class.\n * The button component acts as a wrapper for the avatar component.\n *\n * @dependency mdc-avatar\n *\n * @event click - (React: onClick) This event is dispatched when the avatarbutton is clicked.\n * @event keydown - (React: onKeyDown) This event is dispatched when a key is pressed down on the avatarbutton.\n * @event keyup - (React: onKeyUp) This event is dispatched when a key is released on the avatarbutton.\n * @event focus - (React: onFocus) This event is dispatched when the avatarbutton receives focus.\n *\n * @tagname mdc-avatarbutton\n *\n * @cssproperty --mdc-avatarbutton-overlay-background-color-rest - Background color of the overlay in rest state\n * @cssproperty --mdc-avatarbutton-overlay-background-color-hover - Background color of the overlay in hover state\n * @cssproperty --mdc-avatarbutton-overlay-background-color-active - Background color of the overlay in active state\n */",
+          "customElement": true
         }
       ],
       "exports": [
@@ -1433,8 +1433,8 @@
           "kind": "js",
           "name": "default",
           "declaration": {
-            "name": "AlertChip",
-            "module": "components/alertchip/alertchip.component.js"
+            "name": "AvatarButton",
+            "module": "components/avatarbutton/avatarbutton.component.js"
           }
         }
       ]
@@ -12447,7 +12447,7 @@
       "declarations": [
         {
           "kind": "class",
-          "description": "mdc-listitem component is used to display a label with different types of controls.\nThere can be three types of controls, a radio button, a checkbox on the\nleading side and a toggle on the trailing side.\nThe list item can contain an avatar on the leading side and a badge on the trailing side.\nAdditionally, the list item can contain a side header and a subline text.\n\nThe leading and trailing slots can be used to display controls and text. <br/>\nBased on the leading/trailing slot, the position of the controls and text can be adjusted. <br/>\nPlease use mdc-list as a parent element even when there is only listitem for a11y purpose.",
+          "description": "mdc-listitem component is used to display a label with different types of controls.\nThere can be three types of controls, a radio button, a checkbox on the\nleading side and a toggle on the trailing side.\nThe list item can contain an avatar on the leading side and a badge on the trailing side.\nAdditionally, the list item can contain a side header and a subline text.\n\nThe leading and trailing slots can be used to display controls and text. <br/>\nBased on the leading/trailing slot, the position of the controls and text can be adjusted. <br/>\nPlease use mdc-list as a parent element even when there is only listitem for a11y purpose.\n\nBy providing the tooltip-text attribute, a tooltip will be displayed on hover of the listitem.\nThe placement of the tooltip can be adjusted using the tooltip-placement attribute.\nThis will be helpful when the listitem text is truncated or\nwhen you want to display additional information about the listitem.",
           "name": "ListItem",
           "cssProperties": [
             {
@@ -12477,6 +12477,10 @@
             {
               "description": "Allows customization of column gap.",
               "name": "--mdc-listitem-column-gap"
+            },
+            {
+              "description": "Allows customization of padding left and right.",
+              "name": "--mdc-listitem-padding-left-and-right"
             }
           ],
           "slots": [
@@ -12571,6 +12575,59 @@
               "attribute": "subline-text",
               "reflects": true
             },
+            {
+              "kind": "field",
+              "name": "tooltipText",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "The tooltip text is displayed on hover of the list item.",
+              "attribute": "tooltip-text",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "tooltipPlacement",
+              "type": {
+                "text": "PopoverPlacement"
+              },
+              "description": "The tooltip placement of the list item. If the tooltip text is present,\nthen this tooltip placement will be applied.",
+              "default": "'top'",
+              "attribute": "tooltip-placement",
+              "reflects": true
+            },
+            {
+              "kind": "method",
+              "name": "handleClick",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              }
+            },
+            {
+              "kind": "method",
+              "name": "displayTooltipForLongText",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "description": "Display a tooltip for the listitem.\nCreate the tooltip programmatically after the nearest parent element."
+            },
+            {
+              "kind": "method",
+              "name": "hideTooltipOnLeave",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "description": "Removes the dynamically created tooltip for long text label on focus or mouse leave.\nThis is triggered on focusout and mouseout events."
+            },
             {
               "kind": "method",
               "name": "getText",
@@ -12729,6 +12786,23 @@
               "description": "The subline text of the list item.\nThis appears on the trailing side of the list item.",
               "fieldName": "sublineText"
             },
+            {
+              "name": "tooltip-text",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "The tooltip text is displayed on hover of the list item.",
+              "fieldName": "tooltipText"
+            },
+            {
+              "name": "tooltip-placement",
+              "type": {
+                "text": "PopoverPlacement"
+              },
+              "description": "The tooltip placement of the list item. If the tooltip text is present,\nthen this tooltip placement will be applied.",
+              "default": "'top'",
+              "fieldName": "tooltipPlacement"
+            },
             {
               "name": "disabled",
               "type": {
@@ -12771,7 +12845,7 @@
             "module": "/src/models"
           },
           "tagName": "mdc-listitem",
-          "jsDoc": "/**\n * mdc-listitem component is used to display a label with different types of controls.\n * There can be three types of controls, a radio button, a checkbox on the\n * leading side and a toggle on the trailing side.\n * The list item can contain an avatar on the leading side and a badge on the trailing side.\n * Additionally, the list item can contain a side header and a subline text.\n *\n * The leading and trailing slots can be used to display controls and text. <br/>\n * Based on the leading/trailing slot, the position of the controls and text can be adjusted. <br/>\n * Please use mdc-list as a parent element even when there is only listitem for a11y purpose.\n *\n * @tagname mdc-listitem\n *\n * @dependency mdc-text\n *\n * @slot leading-controls - slot for list item controls to appear of leading end.\n * @slot leading-text-primary-label - slot for list item primary label.\n * @slot leading-text-secondary-label - slot for list item secondary label.\n * @slot leading-text-tertiary-label - slot for list item tertiary label.\n * @slot trailing-text-side-header - slot for list item side header text.\n * @slot trailing-text-subline - slot for list item subline text.\n * @slot trailing-controls - slot for list item controls to appear of trailing end.\n *\n * @cssproperty --mdc-listitem-default-background-color - Allows customization of the default background color.\n * @cssproperty --mdc-listitem-background-color-hover - Allows customization of the background color on hover.\n * @cssproperty --mdc-listitem-background-color-active - Allows customization of the background color when pressed.\n * @cssproperty --mdc-listitem-primary-label-color\n *  - Allows customization of the primary label, side header and subline text slot color.\n * @cssproperty --mdc-listitem-secondary-label-color\n *  - Allows customization of the secondary and tertiary label text slot color.\n * @cssproperty --mdc-listitem-disabled-color - Allows customization of the disabled color.\n * @cssproperty --mdc-listitem-column-gap - Allows customization of column gap.\n *\n * @event click - (React: onClick) This event is dispatched when the listitem is clicked.\n * @event keydown - (React: onKeyDown) This event is dispatched when a key is pressed down on the listitem.\n * @event keyup - (React: onKeyUp) This event is dispatched when a key is released on the listitem.\n * @event focus - (React: onFocus) This event is dispatched when the listitem receives focus.\n */",
+          "jsDoc": "/**\n * mdc-listitem component is used to display a label with different types of controls.\n * There can be three types of controls, a radio button, a checkbox on the\n * leading side and a toggle on the trailing side.\n * The list item can contain an avatar on the leading side and a badge on the trailing side.\n * Additionally, the list item can contain a side header and a subline text.\n *\n * The leading and trailing slots can be used to display controls and text. <br/>\n * Based on the leading/trailing slot, the position of the controls and text can be adjusted. <br/>\n * Please use mdc-list as a parent element even when there is only listitem for a11y purpose.\n *\n * By providing the tooltip-text attribute, a tooltip will be displayed on hover of the listitem.\n * The placement of the tooltip can be adjusted using the tooltip-placement attribute.\n * This will be helpful when the listitem text is truncated or\n * when you want to display additional information about the listitem.\n *\n * @tagname mdc-listitem\n *\n * @dependency mdc-text\n *\n * @slot leading-controls - slot for list item controls to appear of leading end.\n * @slot leading-text-primary-label - slot for list item primary label.\n * @slot leading-text-secondary-label - slot for list item secondary label.\n * @slot leading-text-tertiary-label - slot for list item tertiary label.\n * @slot trailing-text-side-header - slot for list item side header text.\n * @slot trailing-text-subline - slot for list item subline text.\n * @slot trailing-controls - slot for list item controls to appear of trailing end.\n *\n * @cssproperty --mdc-listitem-default-background-color - Allows customization of the default background color.\n * @cssproperty --mdc-listitem-background-color-hover - Allows customization of the background color on hover.\n * @cssproperty --mdc-listitem-background-color-active - Allows customization of the background color when pressed.\n * @cssproperty --mdc-listitem-primary-label-color\n *  - Allows customization of the primary label, side header and subline text slot color.\n * @cssproperty --mdc-listitem-secondary-label-color\n *  - Allows customization of the secondary and tertiary label text slot color.\n * @cssproperty --mdc-listitem-disabled-color - Allows customization of the disabled color.\n * @cssproperty --mdc-listitem-column-gap - Allows customization of column gap.\n * @cssproperty --mdc-listitem-padding-left-and-right - Allows customization of padding left and right.\n *\n * @event click - (React: onClick) This event is dispatched when the listitem is clicked.\n * @event keydown - (React: onKeyDown) This event is dispatched when a key is pressed down on the listitem.\n * @event keyup - (React: onKeyUp) This event is dispatched when a key is released on the listitem.\n * @event focus - (React: onFocus) This event is dispatched when the listitem receives focus.\n */",
           "customElement": true
         }
       ],
@@ -12981,6 +13055,79 @@
                 "module": "components/listitem/listitem.component.js"
               }
             },
+            {
+              "kind": "field",
+              "name": "tooltipText",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "The tooltip text is displayed on hover of the list item.",
+              "attribute": "tooltip-text",
+              "reflects": true,
+              "inheritedFrom": {
+                "name": "ListItem",
+                "module": "components/listitem/listitem.component.js"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "tooltipPlacement",
+              "type": {
+                "text": "PopoverPlacement"
+              },
+              "description": "The tooltip placement of the list item. If the tooltip text is present,\nthen this tooltip placement will be applied.",
+              "default": "'top'",
+              "attribute": "tooltip-placement",
+              "reflects": true,
+              "inheritedFrom": {
+                "name": "ListItem",
+                "module": "components/listitem/listitem.component.js"
+              }
+            },
+            {
+              "kind": "method",
+              "name": "handleClick",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "inheritedFrom": {
+                "name": "ListItem",
+                "module": "components/listitem/listitem.component.js"
+              }
+            },
+            {
+              "kind": "method",
+              "name": "displayTooltipForLongText",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "description": "Display a tooltip for the listitem.\nCreate the tooltip programmatically after the nearest parent element.",
+              "inheritedFrom": {
+                "name": "ListItem",
+                "module": "components/listitem/listitem.component.js"
+              }
+            },
+            {
+              "kind": "method",
+              "name": "hideTooltipOnLeave",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "description": "Removes the dynamically created tooltip for long text label on focus or mouse leave.\nThis is triggered on focusout and mouseout events.",
+              "inheritedFrom": {
+                "name": "ListItem",
+                "module": "components/listitem/listitem.component.js"
+              }
+            },
             {
               "kind": "method",
               "name": "getText",
@@ -13189,6 +13336,31 @@
                 "name": "ListItem",
                 "module": "src/components/listitem/listitem.component.ts"
               }
+            },
+            {
+              "name": "tooltip-text",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "The tooltip text is displayed on hover of the list item.",
+              "fieldName": "tooltipText",
+              "inheritedFrom": {
+                "name": "ListItem",
+                "module": "src/components/listitem/listitem.component.ts"
+              }
+            },
+            {
+              "name": "tooltip-placement",
+              "type": {
+                "text": "PopoverPlacement"
+              },
+              "description": "The tooltip placement of the list item. If the tooltip text is present,\nthen this tooltip placement will be applied.",
+              "default": "'top'",
+              "fieldName": "tooltipPlacement",
+              "inheritedFrom": {
+                "name": "ListItem",
+                "module": "src/components/listitem/listitem.component.ts"
+              }
             }
           ],
           "slots": [
@@ -13305,6 +13477,14 @@
                 "name": "ListItem",
                 "module": "src/components/listitem/listitem.component.ts"
               }
+            },
+            {
+              "description": "Allows customization of padding left and right.",
+              "name": "--mdc-listitem-padding-left-and-right",
+              "inheritedFrom": {
+                "name": "ListItem",
+                "module": "src/components/listitem/listitem.component.ts"
+              }
             }
           ]
         }
@@ -13464,7 +13644,7 @@
       "declarations": [
         {
           "kind": "class",
-          "description": "option component, which is used as a list item in a select component.<br/>\nWe can pass an icon which will be displayed in leading position of the option label text.",
+          "description": "option component, which is used as a list item in a select component.<br/>\nWe can pass an icon which will be displayed in leading position of the option label text.\nWe can pass a tooltip which will be displayed on hover of the option label text.\nThe tooltip will be helpful for a long label text which is truncated with ellipsis.",
           "name": "Option",
           "slots": [
             {
@@ -13551,56 +13731,15 @@
               "reflects": true
             },
             {
-              "kind": "field",
-              "name": "ariaLabel",
-              "type": {
-                "text": "string | null"
-              },
-              "default": "null",
-              "description": "Any additional description can be provided here for screen readers.",
-              "attribute": "aria-label",
-              "reflects": true
-            },
-            {
-              "kind": "method",
-              "name": "handleClick",
-              "privacy": "private",
-              "return": {
-                "type": {
-                  "text": "void"
-                }
-              }
-            },
-            {
-              "kind": "method",
-              "name": "displayTooltipForLongText",
-              "privacy": "private",
-              "return": {
-                "type": {
-                  "text": "void"
-                }
-              },
-              "parameters": [
-                {
-                  "name": "event",
-                  "type": {
-                    "text": "FocusEvent | MouseEvent"
-                  },
-                  "description": "A focus or a mouse event."
-                }
-              ],
-              "description": "Display a tooltip for long text label with an ellipse at the end.\nCreate the tooltip programmatically after the nearest select component or the parent element."
-            },
-            {
-              "kind": "method",
-              "name": "hideTooltipOnLeave",
-              "privacy": "private",
-              "return": {
-                "type": {
-                  "text": "void"
-                }
+              "kind": "field",
+              "name": "ariaLabel",
+              "type": {
+                "text": "string | null"
               },
-              "description": "Removes the dynamically created tooltip for long text label on focus or mouse leave.\nThis is triggered on focusout and mouseout events."
+              "default": "null",
+              "description": "Any additional description can be provided here for screen readers.",
+              "attribute": "aria-label",
+              "reflects": true
             },
             {
               "kind": "method",
@@ -13848,6 +13987,79 @@
                 "module": "components/listitem/listitem.component.js"
               }
             },
+            {
+              "kind": "field",
+              "name": "tooltipText",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "The tooltip text is displayed on hover of the list item.",
+              "attribute": "tooltip-text",
+              "reflects": true,
+              "inheritedFrom": {
+                "name": "ListItem",
+                "module": "components/listitem/listitem.component.js"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "tooltipPlacement",
+              "type": {
+                "text": "PopoverPlacement"
+              },
+              "description": "The tooltip placement of the list item. If the tooltip text is present,\nthen this tooltip placement will be applied.",
+              "default": "'top'",
+              "attribute": "tooltip-placement",
+              "reflects": true,
+              "inheritedFrom": {
+                "name": "ListItem",
+                "module": "components/listitem/listitem.component.js"
+              }
+            },
+            {
+              "kind": "method",
+              "name": "handleClick",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "inheritedFrom": {
+                "name": "ListItem",
+                "module": "components/listitem/listitem.component.js"
+              }
+            },
+            {
+              "kind": "method",
+              "name": "displayTooltipForLongText",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "description": "Display a tooltip for the listitem.\nCreate the tooltip programmatically after the nearest parent element.",
+              "inheritedFrom": {
+                "name": "ListItem",
+                "module": "components/listitem/listitem.component.js"
+              }
+            },
+            {
+              "kind": "method",
+              "name": "hideTooltipOnLeave",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "description": "Removes the dynamically created tooltip for long text label on focus or mouse leave.\nThis is triggered on focusout and mouseout events.",
+              "inheritedFrom": {
+                "name": "ListItem",
+                "module": "components/listitem/listitem.component.js"
+              }
+            },
             {
               "kind": "method",
               "name": "getText",
@@ -14113,6 +14325,31 @@
                 "name": "ListItem",
                 "module": "src/components/listitem/listitem.component.ts"
               }
+            },
+            {
+              "name": "tooltip-text",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "The tooltip text is displayed on hover of the list item.",
+              "fieldName": "tooltipText",
+              "inheritedFrom": {
+                "name": "ListItem",
+                "module": "src/components/listitem/listitem.component.ts"
+              }
+            },
+            {
+              "name": "tooltip-placement",
+              "type": {
+                "text": "PopoverPlacement"
+              },
+              "description": "The tooltip placement of the list item. If the tooltip text is present,\nthen this tooltip placement will be applied.",
+              "default": "'top'",
+              "fieldName": "tooltipPlacement",
+              "inheritedFrom": {
+                "name": "ListItem",
+                "module": "src/components/listitem/listitem.component.ts"
+              }
             }
           ],
           "mixins": [
@@ -14126,7 +14363,7 @@
             "module": "/src/components/listitem/listitem.component"
           },
           "tagName": "mdc-option",
-          "jsDoc": "/**\n * option component, which is used as a list item in a select component.<br/>\n * We can pass an icon which will be displayed in leading position of the option label text.\n *\n * @dependency mdc-icon\n * @dependency mdc-text\n * @dependency mdc-tooltip\n *\n * @tagname mdc-option\n *\n * @slot default - This is a default/unnamed slot\n *\n * @event click - (React: onClick) This event is dispatched when the option is clicked.\n * @event keydown - (React: onKeyDown) This event is dispatched when a key is pressed down on the option.\n * @event keyup - (React: onKeyUp) This event is dispatched when a key is released on the option.\n * @event focus - (React: onFocus) This event is dispatched when the option receives focus.\n */",
+          "jsDoc": "/**\n * option component, which is used as a list item in a select component.<br/>\n * We can pass an icon which will be displayed in leading position of the option label text.\n * We can pass a tooltip which will be displayed on hover of the option label text.\n * The tooltip will be helpful for a long label text which is truncated with ellipsis.\n *\n * @dependency mdc-icon\n * @dependency mdc-text\n * @dependency mdc-tooltip\n *\n * @tagname mdc-option\n *\n * @slot default - This is a default/unnamed slot\n *\n * @event click - (React: onClick) This event is dispatched when the option is clicked.\n * @event keydown - (React: onKeyDown) This event is dispatched when a key is pressed down on the option.\n * @event keyup - (React: onKeyUp) This event is dispatched when a key is released on the option.\n * @event focus - (React: onFocus) This event is dispatched when the option receives focus.\n */",
           "customElement": true,
           "cssProperties": [
             {
@@ -14184,6 +14421,14 @@
                 "name": "ListItem",
                 "module": "src/components/listitem/listitem.component.ts"
               }
+            },
+            {
+              "description": "Allows customization of padding left and right.",
+              "name": "--mdc-listitem-padding-left-and-right",
+              "inheritedFrom": {
+                "name": "ListItem",
+                "module": "src/components/listitem/listitem.component.ts"
+              }
             }
           ]
         }
@@ -21319,84 +21564,74 @@
     },
     {
       "kind": "javascript-module",
-      "path": "components/tablist/tablist.component.js",
+      "path": "components/text/text.component.js",
       "declarations": [
         {
           "kind": "class",
-          "description": "Tab list organizes tabs into a container.\n\nChildren of the tab list are `mdc-tab` elements, sent to the default slot.\n\nThe tabs can be navigated using the left/right arrow keys, and selected by clicking,\n or pressing the Enter and Space keys.\n\n**Implicit accessibility rules**\n\n- The element that serves as the container for the set of tabs has role `tablist`.\n- Each element that serves as a tab has role `tab` and is contained within the element with role `tablist`.\n- The active tab element has the state `aria-selected` set to `true`\n  and all other tab elements have it set to `false`.\n\n\n**Accessibility notes for consuming (have to be explicitly set when you consume the component)**\n\n- Each element that contains the `content panel` for a `tab` has role `tabpanel`.\n- The `tablist` element needs to have a label provided by `data-aria-label`.\n- Each element with role `tab` has the property `aria-controls`\n that should refer to its associated `tabpanel` element.\n- Each element with role `tabpanel` has the property `aria-labelledby` referring to its associated `tab` element.\n- If a `tab` element has a popup menu, it needs to have the property `aria-haspopup` set to either `menu` or `true`.",
-          "name": "TabList",
-          "cssProperties": [
-            {
-              "description": "Gap between tabs",
-              "name": "--mdc-tablist-gap"
-            },
-            {
-              "description": "Width of the tablist",
-              "name": "--mdc-tablist-width"
-            },
+          "description": "Text component for creating styled text elements.\nIt has to be mounted within the ThemeProvider to access color and font tokens.\n\nThe `type` attribute allows changing the text style.\nThe `tagname` attribute allows changing the tag name of the text element.\nThe default tag name is `p`.\n\nThe `tagname` attribute should be a valid HTML tag name.\nIf the `tagname` attribute is not a valid HTML tag name, the default tag name will be used.\n\nThe styling is applied based on the `type` attribute.",
+          "name": "Text",
+          "cssParts": [
             {
-              "description": "Margin value for the arrow button",
-              "name": "--mdc-tablist-arrow-button-margin"
+              "description": "The text element",
+              "name": "text"
             }
           ],
           "slots": [
             {
-              "description": "slot for mdc-tab elements.",
-              "name": "Default"
+              "description": "Default slot for text content",
+              "name": ""
             }
           ],
           "members": [
             {
               "kind": "field",
-              "name": "activeTabId",
+              "name": "type",
               "type": {
-                "text": "string | undefined"
+                "text": "TextType"
               },
-              "description": "ID of the active tab, defaults to the first tab if not provided",
-              "attribute": "active-tab-id",
+              "privacy": "public",
+              "description": "Specifies the text style to be applied.\n\nAcceptable values include:\n\n- 'body-small-regular'\n- 'body-small-medium'\n- 'body-small-bold'\n- 'body-midsize-regular'\n- 'body-midsize-medium'\n- 'body-midsize-bold'\n- 'body-large-regular'\n- 'body-large-medium'\n- 'body-large-bold'\n- 'body-small-regular-underline'\n- 'body-small-medium-underline'\n- 'body-midsize-regular-underline'\n- 'body-midsize-medium-underline'\n- 'body-large-regular-underline'\n- 'body-large-medium-underline'\n- 'heading-small-regular'\n- 'heading-small-medium'\n- 'heading-small-bold'\n- 'heading-midsize-regular'\n- 'heading-midsize-medium'\n- 'heading-midsize-bold'\n- 'heading-large-regular'\n- 'heading-large-medium'\n- 'heading-large-bold'\n- 'heading-xlarge-regular'\n- 'heading-xlarge-medium'\n- 'heading-xlarge-bold'\n- 'headline-small-light'\n- 'headline-small-regular'",
+              "default": "body-large-regular",
+              "attribute": "type",
               "reflects": true
             },
             {
               "kind": "field",
-              "name": "dataAriaLabel",
+              "name": "tagname",
               "type": {
-                "text": "string | undefined"
+                "text": "TagName | undefined"
               },
-              "description": "Label for the tablist.\nThis is used when the tablist does not have a visible label.",
-              "attribute": "data-aria-label"
-            }
-          ],
-          "events": [
-            {
-              "description": "(React: onChange) This event is dispatched when the tab is selected. Event that fires when user changes the active tab. The function sent as the argument will receive the fired event and the new tab id can be fetched from event.detail.tabId. `(event: CustomEvent) => handleTabChange(event.detail.tabId);`",
-              "name": "change",
-              "reactName": "onChange"
+              "privacy": "public",
+              "description": "Specifies the HTML tag name for the text element. The default tag name is `p`.\nThis attribute is optional. When set, it changes the tag name of the text element.\n\nAcceptable values include:\n\n- 'h1'\n- 'h2'\n- 'h3'\n- 'h4'\n- 'h5'\n- 'h6'\n- 'p'\n- 'small'\n- 'span'\n- 'div'\n\nFor instance, setting this attribute to `h2` will render the text element as an `h2` element.\nNote that the styling is determined by the `type` attribute.",
+              "attribute": "tagname",
+              "reflects": true
             }
           ],
           "attributes": [
             {
-              "name": "active-tab-id",
+              "name": "type",
               "type": {
-                "text": "string | undefined"
+                "text": "TextType"
               },
-              "description": "ID of the active tab, defaults to the first tab if not provided",
-              "fieldName": "activeTabId"
+              "description": "Specifies the text style to be applied.\n\nAcceptable values include:\n\n- 'body-small-regular'\n- 'body-small-medium'\n- 'body-small-bold'\n- 'body-midsize-regular'\n- 'body-midsize-medium'\n- 'body-midsize-bold'\n- 'body-large-regular'\n- 'body-large-medium'\n- 'body-large-bold'\n- 'body-small-regular-underline'\n- 'body-small-medium-underline'\n- 'body-midsize-regular-underline'\n- 'body-midsize-medium-underline'\n- 'body-large-regular-underline'\n- 'body-large-medium-underline'\n- 'heading-small-regular'\n- 'heading-small-medium'\n- 'heading-small-bold'\n- 'heading-midsize-regular'\n- 'heading-midsize-medium'\n- 'heading-midsize-bold'\n- 'heading-large-regular'\n- 'heading-large-medium'\n- 'heading-large-bold'\n- 'heading-xlarge-regular'\n- 'heading-xlarge-medium'\n- 'heading-xlarge-bold'\n- 'headline-small-light'\n- 'headline-small-regular'",
+              "default": "body-large-regular",
+              "fieldName": "type"
             },
             {
-              "name": "data-aria-label",
+              "name": "tagname",
               "type": {
-                "text": "string | undefined"
+                "text": "TagName | undefined"
               },
-              "description": "Label for the tablist.\nThis is used when the tablist does not have a visible label.",
-              "fieldName": "dataAriaLabel"
+              "description": "Specifies the HTML tag name for the text element. The default tag name is `p`.\nThis attribute is optional. When set, it changes the tag name of the text element.\n\nAcceptable values include:\n\n- 'h1'\n- 'h2'\n- 'h3'\n- 'h4'\n- 'h5'\n- 'h6'\n- 'p'\n- 'small'\n- 'span'\n- 'div'\n\nFor instance, setting this attribute to `h2` will render the text element as an `h2` element.\nNote that the styling is determined by the `type` attribute.",
+              "fieldName": "tagname"
             }
           ],
           "superclass": {
             "name": "Component",
             "module": "/src/models"
           },
-          "tagName": "mdc-tablist",
-          "jsDoc": "/**\n * Tab list organizes tabs into a container.\n *\n * Children of the tab list are `mdc-tab` elements, sent to the default slot.\n *\n * The tabs can be navigated using the left/right arrow keys, and selected by clicking,\n *  or pressing the Enter and Space keys.\n *\n * **Implicit accessibility rules**\n *\n * - The element that serves as the container for the set of tabs has role `tablist`.\n * - Each element that serves as a tab has role `tab` and is contained within the element with role `tablist`.\n * - The active tab element has the state `aria-selected` set to `true`\n *   and all other tab elements have it set to `false`.\n *\n *\n * **Accessibility notes for consuming (have to be explicitly set when you consume the component)**\n *\n * - Each element that contains the `content panel` for a `tab` has role `tabpanel`.\n * - The `tablist` element needs to have a label provided by `data-aria-label`.\n * - Each element with role `tab` has the property `aria-controls`\n *  that should refer to its associated `tabpanel` element.\n * - Each element with role `tabpanel` has the property `aria-labelledby` referring to its associated `tab` element.\n * - If a `tab` element has a popup menu, it needs to have the property `aria-haspopup` set to either `menu` or `true`.\n *\n * @tagname mdc-tablist\n *\n * @dependency mdc-tab\n * @dependency mdc-button\n *\n * @event change - (React: onChange) This event is dispatched when the tab is selected.\n * Event that fires when user changes the active tab.\n *     The function sent as the argument will receive the fired event\n *      and the new tab id can be fetched from event.detail.tabId.\n *\n *    `(event: CustomEvent) => handleTabChange(event.detail.tabId);`\n *\n * @slot Default slot for mdc-tab elements.\n *\n * @cssproperty --mdc-tablist-gap - Gap between tabs\n * @cssproperty --mdc-tablist-width - Width of the tablist\n * @cssproperty  --mdc-tablist-arrow-button-margin - Margin value for the arrow button\n */",
+          "tagName": "mdc-text",
+          "jsDoc": "/**\n * Text component for creating styled text elements.\n * It has to be mounted within the ThemeProvider to access color and font tokens.\n *\n * The `type` attribute allows changing the text style.\n * The `tagname` attribute allows changing the tag name of the text element.\n * The default tag name is `p`.\n *\n * The `tagname` attribute should be a valid HTML tag name.\n * If the `tagname` attribute is not a valid HTML tag name, the default tag name will be used.\n *\n * The styling is applied based on the `type` attribute.\n *\n * @tagname mdc-text\n * @slot - Default slot for text content\n *\n * @csspart text - The text element\n */",
           "customElement": true
         }
       ],
@@ -21405,82 +21640,92 @@
           "kind": "js",
           "name": "default",
           "declaration": {
-            "name": "TabList",
-            "module": "components/tablist/tablist.component.js"
+            "name": "Text",
+            "module": "components/text/text.component.js"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "components/text/text.component.js",
+      "path": "components/tablist/tablist.component.js",
       "declarations": [
         {
           "kind": "class",
-          "description": "Text component for creating styled text elements.\nIt has to be mounted within the ThemeProvider to access color and font tokens.\n\nThe `type` attribute allows changing the text style.\nThe `tagname` attribute allows changing the tag name of the text element.\nThe default tag name is `p`.\n\nThe `tagname` attribute should be a valid HTML tag name.\nIf the `tagname` attribute is not a valid HTML tag name, the default tag name will be used.\n\nThe styling is applied based on the `type` attribute.",
-          "name": "Text",
-          "cssParts": [
+          "description": "Tab list organizes tabs into a container.\n\nChildren of the tab list are `mdc-tab` elements, sent to the default slot.\n\nThe tabs can be navigated using the left/right arrow keys, and selected by clicking,\n or pressing the Enter and Space keys.\n\n**Implicit accessibility rules**\n\n- The element that serves as the container for the set of tabs has role `tablist`.\n- Each element that serves as a tab has role `tab` and is contained within the element with role `tablist`.\n- The active tab element has the state `aria-selected` set to `true`\n  and all other tab elements have it set to `false`.\n\n\n**Accessibility notes for consuming (have to be explicitly set when you consume the component)**\n\n- Each element that contains the `content panel` for a `tab` has role `tabpanel`.\n- The `tablist` element needs to have a label provided by `data-aria-label`.\n- Each element with role `tab` has the property `aria-controls`\n that should refer to its associated `tabpanel` element.\n- Each element with role `tabpanel` has the property `aria-labelledby` referring to its associated `tab` element.\n- If a `tab` element has a popup menu, it needs to have the property `aria-haspopup` set to either `menu` or `true`.",
+          "name": "TabList",
+          "cssProperties": [
             {
-              "description": "The text element",
-              "name": "text"
+              "description": "Gap between tabs",
+              "name": "--mdc-tablist-gap"
+            },
+            {
+              "description": "Width of the tablist",
+              "name": "--mdc-tablist-width"
+            },
+            {
+              "description": "Margin value for the arrow button",
+              "name": "--mdc-tablist-arrow-button-margin"
             }
           ],
           "slots": [
             {
-              "description": "Default slot for text content",
-              "name": ""
+              "description": "slot for mdc-tab elements.",
+              "name": "Default"
             }
           ],
           "members": [
             {
               "kind": "field",
-              "name": "type",
+              "name": "activeTabId",
               "type": {
-                "text": "TextType"
+                "text": "string | undefined"
               },
-              "privacy": "public",
-              "description": "Specifies the text style to be applied.\n\nAcceptable values include:\n\n- 'body-small-regular'\n- 'body-small-medium'\n- 'body-small-bold'\n- 'body-midsize-regular'\n- 'body-midsize-medium'\n- 'body-midsize-bold'\n- 'body-large-regular'\n- 'body-large-medium'\n- 'body-large-bold'\n- 'body-small-regular-underline'\n- 'body-small-medium-underline'\n- 'body-midsize-regular-underline'\n- 'body-midsize-medium-underline'\n- 'body-large-regular-underline'\n- 'body-large-medium-underline'\n- 'heading-small-regular'\n- 'heading-small-medium'\n- 'heading-small-bold'\n- 'heading-midsize-regular'\n- 'heading-midsize-medium'\n- 'heading-midsize-bold'\n- 'heading-large-regular'\n- 'heading-large-medium'\n- 'heading-large-bold'\n- 'heading-xlarge-regular'\n- 'heading-xlarge-medium'\n- 'heading-xlarge-bold'\n- 'headline-small-light'\n- 'headline-small-regular'",
-              "default": "body-large-regular",
-              "attribute": "type",
+              "description": "ID of the active tab, defaults to the first tab if not provided",
+              "attribute": "active-tab-id",
               "reflects": true
             },
             {
               "kind": "field",
-              "name": "tagname",
+              "name": "dataAriaLabel",
               "type": {
-                "text": "TagName | undefined"
+                "text": "string | undefined"
               },
-              "privacy": "public",
-              "description": "Specifies the HTML tag name for the text element. The default tag name is `p`.\nThis attribute is optional. When set, it changes the tag name of the text element.\n\nAcceptable values include:\n\n- 'h1'\n- 'h2'\n- 'h3'\n- 'h4'\n- 'h5'\n- 'h6'\n- 'p'\n- 'small'\n- 'span'\n- 'div'\n\nFor instance, setting this attribute to `h2` will render the text element as an `h2` element.\nNote that the styling is determined by the `type` attribute.",
-              "attribute": "tagname",
-              "reflects": true
+              "description": "Label for the tablist.\nThis is used when the tablist does not have a visible label.",
+              "attribute": "data-aria-label"
+            }
+          ],
+          "events": [
+            {
+              "description": "(React: onChange) This event is dispatched when the tab is selected. Event that fires when user changes the active tab. The function sent as the argument will receive the fired event and the new tab id can be fetched from event.detail.tabId. `(event: CustomEvent) => handleTabChange(event.detail.tabId);`",
+              "name": "change",
+              "reactName": "onChange"
             }
           ],
           "attributes": [
             {
-              "name": "type",
+              "name": "active-tab-id",
               "type": {
-                "text": "TextType"
+                "text": "string | undefined"
               },
-              "description": "Specifies the text style to be applied.\n\nAcceptable values include:\n\n- 'body-small-regular'\n- 'body-small-medium'\n- 'body-small-bold'\n- 'body-midsize-regular'\n- 'body-midsize-medium'\n- 'body-midsize-bold'\n- 'body-large-regular'\n- 'body-large-medium'\n- 'body-large-bold'\n- 'body-small-regular-underline'\n- 'body-small-medium-underline'\n- 'body-midsize-regular-underline'\n- 'body-midsize-medium-underline'\n- 'body-large-regular-underline'\n- 'body-large-medium-underline'\n- 'heading-small-regular'\n- 'heading-small-medium'\n- 'heading-small-bold'\n- 'heading-midsize-regular'\n- 'heading-midsize-medium'\n- 'heading-midsize-bold'\n- 'heading-large-regular'\n- 'heading-large-medium'\n- 'heading-large-bold'\n- 'heading-xlarge-regular'\n- 'heading-xlarge-medium'\n- 'heading-xlarge-bold'\n- 'headline-small-light'\n- 'headline-small-regular'",
-              "default": "body-large-regular",
-              "fieldName": "type"
+              "description": "ID of the active tab, defaults to the first tab if not provided",
+              "fieldName": "activeTabId"
             },
             {
-              "name": "tagname",
+              "name": "data-aria-label",
               "type": {
-                "text": "TagName | undefined"
+                "text": "string | undefined"
               },
-              "description": "Specifies the HTML tag name for the text element. The default tag name is `p`.\nThis attribute is optional. When set, it changes the tag name of the text element.\n\nAcceptable values include:\n\n- 'h1'\n- 'h2'\n- 'h3'\n- 'h4'\n- 'h5'\n- 'h6'\n- 'p'\n- 'small'\n- 'span'\n- 'div'\n\nFor instance, setting this attribute to `h2` will render the text element as an `h2` element.\nNote that the styling is determined by the `type` attribute.",
-              "fieldName": "tagname"
+              "description": "Label for the tablist.\nThis is used when the tablist does not have a visible label.",
+              "fieldName": "dataAriaLabel"
             }
           ],
           "superclass": {
             "name": "Component",
             "module": "/src/models"
           },
-          "tagName": "mdc-text",
-          "jsDoc": "/**\n * Text component for creating styled text elements.\n * It has to be mounted within the ThemeProvider to access color and font tokens.\n *\n * The `type` attribute allows changing the text style.\n * The `tagname` attribute allows changing the tag name of the text element.\n * The default tag name is `p`.\n *\n * The `tagname` attribute should be a valid HTML tag name.\n * If the `tagname` attribute is not a valid HTML tag name, the default tag name will be used.\n *\n * The styling is applied based on the `type` attribute.\n *\n * @tagname mdc-text\n * @slot - Default slot for text content\n *\n * @csspart text - The text element\n */",
+          "tagName": "mdc-tablist",
+          "jsDoc": "/**\n * Tab list organizes tabs into a container.\n *\n * Children of the tab list are `mdc-tab` elements, sent to the default slot.\n *\n * The tabs can be navigated using the left/right arrow keys, and selected by clicking,\n *  or pressing the Enter and Space keys.\n *\n * **Implicit accessibility rules**\n *\n * - The element that serves as the container for the set of tabs has role `tablist`.\n * - Each element that serves as a tab has role `tab` and is contained within the element with role `tablist`.\n * - The active tab element has the state `aria-selected` set to `true`\n *   and all other tab elements have it set to `false`.\n *\n *\n * **Accessibility notes for consuming (have to be explicitly set when you consume the component)**\n *\n * - Each element that contains the `content panel` for a `tab` has role `tabpanel`.\n * - The `tablist` element needs to have a label provided by `data-aria-label`.\n * - Each element with role `tab` has the property `aria-controls`\n *  that should refer to its associated `tabpanel` element.\n * - Each element with role `tabpanel` has the property `aria-labelledby` referring to its associated `tab` element.\n * - If a `tab` element has a popup menu, it needs to have the property `aria-haspopup` set to either `menu` or `true`.\n *\n * @tagname mdc-tablist\n *\n * @dependency mdc-tab\n * @dependency mdc-button\n *\n * @event change - (React: onChange) This event is dispatched when the tab is selected.\n * Event that fires when user changes the active tab.\n *     The function sent as the argument will receive the fired event\n *      and the new tab id can be fetched from event.detail.tabId.\n *\n *    `(event: CustomEvent) => handleTabChange(event.detail.tabId);`\n *\n * @slot Default slot for mdc-tab elements.\n *\n * @cssproperty --mdc-tablist-gap - Gap between tabs\n * @cssproperty --mdc-tablist-width - Width of the tablist\n * @cssproperty  --mdc-tablist-arrow-button-margin - Margin value for the arrow button\n */",
           "customElement": true
         }
       ],
@@ -21489,8 +21734,8 @@
           "kind": "js",
           "name": "default",
           "declaration": {
-            "name": "Text",
-            "module": "components/text/text.component.js"
+            "name": "TabList",
+            "module": "components/tablist/tablist.component.js"
           }
         }
       ]