@momentum-design/components 0.101.3 → 0.102.0

package/dist/custom-elements.json

@@ -477,157 +477,6 @@
         }
       ]
     },
-    {
-      "kind": "javascript-module",
-      "path": "components/accordiongroup/accordiongroup.component.js",
-      "declarations": [
-        {
-          "kind": "class",
-          "description": "An accordion group is a vertically stacked set of interactive headings that each contain a header and body content.\nEach heading of the accordion acts as a control that enable users to expand or hide their associated body sections of content.\nAccordions are commonly used to reduce the need to scroll when presenting multiple sections of content on a single page.\n\n- Default Slot: The accordion group component only accepts, `accordion` and `accordionbutton` components as the children, rest are ignored.\n\nThere are three types of variants:\n- Stacked - Each accordion will have a gap of 1.5rem (24px).\n- Borderless - Each accordion will not have any border and the group will also not have any border.\n- Contained - Each accordion will have no gap in between them and the border of the entire accordiongroup will be continuous.\n\nThere are two types of sizes:\n- Small: Small size has a padding of 1rem (16px) for both heading and body sections.\n- Large: Large size has a padding of 1.5rem (24px) for both heading and body sections.\n\nThe variant and size will be applied to all accordions inside this accordion group.\nTo show/expand more than one accordion at any given time, then set `allow-multiple` to `true`. By default, it's `false`.\n\nIf you don't need any controls on your accordion heading, then it's advised to use `accordionbutton` component.\n\nIf the first accordion of the accordion group is expanded by default, then the screen reader might loose focus when toggling the visibilty of the first accordion.",
-          "name": "AccordionGroup",
-          "cssProperties": [
-            {
-              "description": "The border color of the entire accordiongroup",
-              "name": "--mdc-accordiongroup-border-color"
-            }
-          ],
-          "slots": [
-            {
-              "description": "The default slot can contain the `accordion` or `accordionbutton` components.",
-              "name": "default"
-            }
-          ],
-          "members": [
-            {
-              "kind": "field",
-              "name": "size",
-              "type": {
-                "text": "Size"
-              },
-              "description": "The size of the accordion item.",
-              "default": "'small'",
-              "attribute": "size",
-              "reflects": true
-            },
-            {
-              "kind": "field",
-              "name": "variant",
-              "type": {
-                "text": "Variant"
-              },
-              "description": "The variant of the accordion item. Based on the variant, the styling of the accordion gets changed.",
-              "default": "'stacked'",
-              "attribute": "variant",
-              "reflects": true
-            },
-            {
-              "kind": "field",
-              "name": "allowMultiple",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "If true, multiple accordion items can be visible at the same time.",
-              "attribute": "allow-multiple",
-              "reflects": true
-            },
-            {
-              "kind": "method",
-              "name": "handleAccordionExpanded",
-              "privacy": "private",
-              "return": {
-                "type": {
-                  "text": "void"
-                }
-              },
-              "parameters": [
-                {
-                  "name": "event",
-                  "type": {
-                    "text": "Event"
-                  },
-                  "description": "The event object from the 'shown' event."
-                }
-              ],
-              "description": "Handles the 'shown' event for accordion items.\nIf `allowMultiple` is false, ensures that only one accordion item\nremains expanded by collapsing all other expanded items when a new item is expanded."
-            },
-            {
-              "kind": "method",
-              "name": "setChildrenAccordionAttributes",
-              "privacy": "private",
-              "return": {
-                "type": {
-                  "text": "void"
-                }
-              },
-              "parameters": [
-                {
-                  "name": "attributeName",
-                  "type": {
-                    "text": "string"
-                  },
-                  "description": "The name of the attribute to set."
-                },
-                {
-                  "name": "attributeValue",
-                  "type": {
-                    "text": "string"
-                  },
-                  "description": "The value to set the attribute to."
-                }
-              ],
-              "description": "Sets the given attribute on all child accordion or accordionbutton components."
-            }
-          ],
-          "attributes": [
-            {
-              "name": "size",
-              "type": {
-                "text": "Size"
-              },
-              "description": "The size of the accordion item.",
-              "default": "'small'",
-              "fieldName": "size"
-            },
-            {
-              "name": "variant",
-              "type": {
-                "text": "Variant"
-              },
-              "description": "The variant of the accordion item. Based on the variant, the styling of the accordion gets changed.",
-              "default": "'stacked'",
-              "fieldName": "variant"
-            },
-            {
-              "name": "allow-multiple",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "If true, multiple accordion items can be visible at the same time.",
-              "fieldName": "allowMultiple"
-            }
-          ],
-          "superclass": {
-            "name": "Component",
-            "module": "/src/models"
-          },
-          "tagName": "mdc-accordiongroup",
-          "jsDoc": "/**\n * An accordion group is a vertically stacked set of interactive headings that each contain a header and body content.\n * Each heading of the accordion acts as a control that enable users to expand or hide their associated body sections of content.\n * Accordions are commonly used to reduce the need to scroll when presenting multiple sections of content on a single page.\n *\n * - Default Slot: The accordion group component only accepts, `accordion` and `accordionbutton` components as the children, rest are ignored.\n *\n * There are three types of variants:\n * - Stacked - Each accordion will have a gap of 1.5rem (24px).\n * - Borderless - Each accordion will not have any border and the group will also not have any border.\n * - Contained - Each accordion will have no gap in between them and the border of the entire accordiongroup will be continuous.\n *\n * There are two types of sizes:\n * - Small: Small size has a padding of 1rem (16px) for both heading and body sections.\n * - Large: Large size has a padding of 1.5rem (24px) for both heading and body sections.\n *\n * The variant and size will be applied to all accordions inside this accordion group.\n * To show/expand more than one accordion at any given time, then set `allow-multiple` to `true`. By default, it's `false`.\n *\n * If you don't need any controls on your accordion heading, then it's advised to use `accordionbutton` component.\n *\n * If the first accordion of the accordion group is expanded by default, then the screen reader might loose focus when toggling the visibilty of the first accordion.\n *\n * @tagname mdc-accordiongroup\n *\n * @slot default - The default slot can contain the `accordion` or `accordionbutton` components.\n *\n * @cssproperty --mdc-accordiongroup-border-color - The border color of the entire accordiongroup\n */",
-          "customElement": true
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "default",
-          "declaration": {
-            "name": "AccordionGroup",
-            "module": "components/accordiongroup/accordiongroup.component.js"
-          }
-        }
-      ]
-    },
     {
       "kind": "javascript-module",
       "path": "components/accordionbutton/accordionbutton.component.js",
@@ -968,6 +817,157 @@
         }
       ]
     },
+    {
+      "kind": "javascript-module",
+      "path": "components/accordiongroup/accordiongroup.component.js",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "An accordion group is a vertically stacked set of interactive headings that each contain a header and body content.\nEach heading of the accordion acts as a control that enable users to expand or hide their associated body sections of content.\nAccordions are commonly used to reduce the need to scroll when presenting multiple sections of content on a single page.\n\n- Default Slot: The accordion group component only accepts, `accordion` and `accordionbutton` components as the children, rest are ignored.\n\nThere are three types of variants:\n- Stacked - Each accordion will have a gap of 1.5rem (24px).\n- Borderless - Each accordion will not have any border and the group will also not have any border.\n- Contained - Each accordion will have no gap in between them and the border of the entire accordiongroup will be continuous.\n\nThere are two types of sizes:\n- Small: Small size has a padding of 1rem (16px) for both heading and body sections.\n- Large: Large size has a padding of 1.5rem (24px) for both heading and body sections.\n\nThe variant and size will be applied to all accordions inside this accordion group.\nTo show/expand more than one accordion at any given time, then set `allow-multiple` to `true`. By default, it's `false`.\n\nIf you don't need any controls on your accordion heading, then it's advised to use `accordionbutton` component.\n\nIf the first accordion of the accordion group is expanded by default, then the screen reader might loose focus when toggling the visibilty of the first accordion.",
+          "name": "AccordionGroup",
+          "cssProperties": [
+            {
+              "description": "The border color of the entire accordiongroup",
+              "name": "--mdc-accordiongroup-border-color"
+            }
+          ],
+          "slots": [
+            {
+              "description": "The default slot can contain the `accordion` or `accordionbutton` components.",
+              "name": "default"
+            }
+          ],
+          "members": [
+            {
+              "kind": "field",
+              "name": "size",
+              "type": {
+                "text": "Size"
+              },
+              "description": "The size of the accordion item.",
+              "default": "'small'",
+              "attribute": "size",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "variant",
+              "type": {
+                "text": "Variant"
+              },
+              "description": "The variant of the accordion item. Based on the variant, the styling of the accordion gets changed.",
+              "default": "'stacked'",
+              "attribute": "variant",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "allowMultiple",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "If true, multiple accordion items can be visible at the same time.",
+              "attribute": "allow-multiple",
+              "reflects": true
+            },
+            {
+              "kind": "method",
+              "name": "handleAccordionExpanded",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "event",
+                  "type": {
+                    "text": "Event"
+                  },
+                  "description": "The event object from the 'shown' event."
+                }
+              ],
+              "description": "Handles the 'shown' event for accordion items.\nIf `allowMultiple` is false, ensures that only one accordion item\nremains expanded by collapsing all other expanded items when a new item is expanded."
+            },
+            {
+              "kind": "method",
+              "name": "setChildrenAccordionAttributes",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "attributeName",
+                  "type": {
+                    "text": "string"
+                  },
+                  "description": "The name of the attribute to set."
+                },
+                {
+                  "name": "attributeValue",
+                  "type": {
+                    "text": "string"
+                  },
+                  "description": "The value to set the attribute to."
+                }
+              ],
+              "description": "Sets the given attribute on all child accordion or accordionbutton components."
+            }
+          ],
+          "attributes": [
+            {
+              "name": "size",
+              "type": {
+                "text": "Size"
+              },
+              "description": "The size of the accordion item.",
+              "default": "'small'",
+              "fieldName": "size"
+            },
+            {
+              "name": "variant",
+              "type": {
+                "text": "Variant"
+              },
+              "description": "The variant of the accordion item. Based on the variant, the styling of the accordion gets changed.",
+              "default": "'stacked'",
+              "fieldName": "variant"
+            },
+            {
+              "name": "allow-multiple",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "If true, multiple accordion items can be visible at the same time.",
+              "fieldName": "allowMultiple"
+            }
+          ],
+          "superclass": {
+            "name": "Component",
+            "module": "/src/models"
+          },
+          "tagName": "mdc-accordiongroup",
+          "jsDoc": "/**\n * An accordion group is a vertically stacked set of interactive headings that each contain a header and body content.\n * Each heading of the accordion acts as a control that enable users to expand or hide their associated body sections of content.\n * Accordions are commonly used to reduce the need to scroll when presenting multiple sections of content on a single page.\n *\n * - Default Slot: The accordion group component only accepts, `accordion` and `accordionbutton` components as the children, rest are ignored.\n *\n * There are three types of variants:\n * - Stacked - Each accordion will have a gap of 1.5rem (24px).\n * - Borderless - Each accordion will not have any border and the group will also not have any border.\n * - Contained - Each accordion will have no gap in between them and the border of the entire accordiongroup will be continuous.\n *\n * There are two types of sizes:\n * - Small: Small size has a padding of 1rem (16px) for both heading and body sections.\n * - Large: Large size has a padding of 1.5rem (24px) for both heading and body sections.\n *\n * The variant and size will be applied to all accordions inside this accordion group.\n * To show/expand more than one accordion at any given time, then set `allow-multiple` to `true`. By default, it's `false`.\n *\n * If you don't need any controls on your accordion heading, then it's advised to use `accordionbutton` component.\n *\n * If the first accordion of the accordion group is expanded by default, then the screen reader might loose focus when toggling the visibilty of the first accordion.\n *\n * @tagname mdc-accordiongroup\n *\n * @slot default - The default slot can contain the `accordion` or `accordionbutton` components.\n *\n * @cssproperty --mdc-accordiongroup-border-color - The border color of the entire accordiongroup\n */",
+          "customElement": true
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "default",
+          "declaration": {
+            "name": "AccordionGroup",
+            "module": "components/accordiongroup/accordiongroup.component.js"
+          }
+        }
+      ]
+    },
     {
       "kind": "javascript-module",
       "path": "components/alertchip/alertchip.component.js",
@@ -17803,15 +17803,15 @@
     },
     {
       "kind": "javascript-module",
-      "path": "components/menuitem/menuitem.component.js",
+      "path": "components/menuitemcheckbox/menuitemcheckbox.component.js",
       "declarations": [
         {
           "kind": "class",
-          "description": "menuitem component is inherited by listitem component with the role set `menuitem`.<br/>\nA menu item can contain an icon on the leading or trailing side.\n\nThe leading and trailing slots can be used to display controls and text.<br/>\nBased on the leading/trailing slot, the position of the controls and text can be adjusted.\n\nPlease use element with role=menu as a parent element even when there is only menuitem for a11y purpose.\nFor example mdc-menupopover or mdc-menubar.\n\nMenu item has `name` and `value` attribute that can be used to identify the menu item when it is selected.",
-          "name": "MenuItem",
+          "description": "A menuitemcheckbox component is a checkable menuitem.\nThere should be no focusable descendants inside this menuitemcheckbox component.\n\nThe `checked` attribute indicates whether the menuitemcheckbox is checked or not.\n\nMenu item checkbox has `name` and `value` attribute that can be used to identify the menu item when it is selected.\n\nThe `indicator` attribute is used to differentiate between <b>checkbox</b>, <b>checkmark</b>, <b>toggle</b> and <b>none</b>.\nBy default, the `indicator` is set to <b>checkbox</b>.<br/>\n\nThe checkbox will always be positioned on the leading side of the menuitem label and\nthe toggle and checkmark will always be positioned on the trailing side.\n\nThe checkbox will have the possible states of `true` or `false`.\nIf the indicator is set to <b>checkmark</b> and if the `checked` attribute is set to `true`,\nthen the checkmark will be displayed. if not, then no indicator will be displayed.\n\nThe forth options for the `indicator` is <b>none</b>, which will not display any indicator at all.\nIt is intended to be used for customised menu items where the indicator is implemented differently.\nFor example, you can use a custom icon or a different visual element to indicate the state of the menu item.\nMake sure the new indicator is accessible.\n\nIf you want only one item in a group to be checked, consider using menuitemradio component.",
+          "name": "MenuItemCheckbox",
           "slots": [
             {
-              "description": "slot for menu item controls to appear of leading end.",
+              "description": "slot for menu item checkbox controls to appear of leading end.",
               "name": "leading-controls",
               "inheritedFrom": {
                 "name": "ListItem",
@@ -17819,7 +17819,7 @@
               }
             },
             {
-              "description": "slot for menu item primary label.",
+              "description": "slot for menu item checkbox primary label.",
               "name": "leading-text-primary-label",
               "inheritedFrom": {
                 "name": "ListItem",
@@ -17827,7 +17827,7 @@
               }
             },
             {
-              "description": "slot for menu item secondary label.",
+              "description": "slot for menu item checkbox secondary label.",
               "name": "leading-text-secondary-label",
               "inheritedFrom": {
                 "name": "ListItem",
@@ -17835,7 +17835,7 @@
               }
             },
             {
-              "description": "slot for menu item tertiary label.",
+              "description": "slot for menu item checkbox tertiary label.",
               "name": "leading-text-tertiary-label",
               "inheritedFrom": {
                 "name": "ListItem",
@@ -17843,7 +17843,7 @@
               }
             },
             {
-              "description": "slot for menu item side header text.",
+              "description": "slot for menu item checkbox side header text.",
               "name": "trailing-text-side-header",
               "inheritedFrom": {
                 "name": "ListItem",
@@ -17851,7 +17851,7 @@
               }
             },
             {
-              "description": "slot for menu item subline text.",
+              "description": "slot for menu item checkbox subline text.",
               "name": "trailing-text-subline",
               "inheritedFrom": {
                 "name": "ListItem",
@@ -17859,7 +17859,7 @@
               }
             },
             {
-              "description": "slot for menu item controls to appear of trailing end.",
+              "description": "slot for menu item checkbox controls to appear of trailing end.",
               "name": "trailing-controls",
               "inheritedFrom": {
                 "name": "ListItem",
@@ -17868,6 +17868,67 @@
             }
           ],
           "members": [
+            {
+              "kind": "field",
+              "name": "checked",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "The checked attribute is used to indicate that the menuitemcheckbox is checked or not.",
+              "attribute": "checked",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "indicator",
+              "type": {
+                "text": "Indicator"
+              },
+              "description": "The indicator attribute is used to differentiate between <b>checkbox</b> and <b>toggle</b>.",
+              "default": "'checkbox'",
+              "attribute": "indicator",
+              "reflects": true
+            },
+            {
+              "kind": "method",
+              "name": "handleMouseClick",
+              "privacy": "private",
+              "description": "Handles click events to toggle checked state\nIf the menuitemcheckbox is disabled, it does nothing.\nIf the menuitemcheckbox is not disabled, it toggles the `checked` state between `true` and `false`."
+            },
+            {
+              "kind": "method",
+              "name": "staticCheckbox",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": ""
+                }
+              },
+              "description": "Returns a static checkbox element if the indicator is set to checkbox.\nIf the indicator is not set to checkbox, it returns nothing."
+            },
+            {
+              "kind": "method",
+              "name": "staticToggle",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": ""
+                }
+              },
+              "description": "Returns a static toggle element if the indicator is set to toggle.\nIf the indicator is not set to toggle, it returns nothing.\n\nThe toggle will always be positioned on the trailing side of the menuitem label."
+            },
+            {
+              "kind": "method",
+              "name": "getCheckmarkIcon",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": ""
+                }
+              },
+              "description": "Returns a checkmark icon if the indicator is set to checkmark and the checked state is true.\nIf the indicator is not set to checkmark or the checked state is false, it returns nothing.\n\nThe checkmark icon will always be positioned on the trailing side of the menuitem label."
+            },
             {
               "kind": "field",
               "name": "arrowPosition",
@@ -17876,7 +17937,11 @@
               },
               "description": "Defines where the arrow icon will appear.\n- `'leading'`: Icon appears on the leading edge (start).\n- `'trailing'`: Icon appears on the trailing edge (end).\n\nIf not set, no arrow is displayed.",
               "attribute": "arrow-position",
-              "reflects": true
+              "reflects": true,
+              "inheritedFrom": {
+                "name": "MenuItem",
+                "module": "components/menuitem/menuitem.component.js"
+              }
             },
             {
               "kind": "field",
@@ -17886,7 +17951,11 @@
               },
               "description": "Defines the direction the arrow icon points.\n- `'positive'`: Arrow points toward the trailing side.\n- `'negative'`: Arrow points toward the leading side.",
               "attribute": "arrow-direction",
-              "reflects": true
+              "reflects": true,
+              "inheritedFrom": {
+                "name": "MenuItem",
+                "module": "components/menuitem/menuitem.component.js"
+              }
             },
             {
               "kind": "field",
@@ -17897,7 +17966,11 @@
               "default": "undefined",
               "description": "The name attribute is used to identify the menu item when it is selected.",
               "attribute": "name",
-              "reflects": true
+              "reflects": true,
+              "inheritedFrom": {
+                "name": "MenuItem",
+                "module": "components/menuitem/menuitem.component.js"
+              }
             },
             {
               "kind": "field",
@@ -17908,7 +17981,11 @@
               "default": "undefined",
               "description": "The value attribute is used to represent a value when the menu item is selected.\nIt is typically used with checkbox and radio menu items, but can be handy for any menu item.",
               "attribute": "value",
-              "reflects": true
+              "reflects": true,
+              "inheritedFrom": {
+                "name": "MenuItem",
+                "module": "components/menuitem/menuitem.component.js"
+              }
             },
             {
               "kind": "method",
@@ -17952,7 +18029,11 @@
                   "description": "The keyboard event that triggered the action."
                 }
               ],
-              "description": "Handles the keyup event for the menu item.\nIf the Space key is released, it triggers a click event on the menu item.\nThis allows keyboard users to activate the menu item using the Space key.\nIt also prevents the default action of the Space key to avoid scrolling the page.\n\nThis follows the native behaviour, actionable element can be triggered by Space\nkey on the keyup event.\n\nNote: Action triggered by Enter on the keydown event."
+              "description": "Handles the keyup event for the menu item.\nIf the Space key is released, it triggers a click event on the menu item.\nThis allows keyboard users to activate the menu item using the Space key.\nIt also prevents the default action of the Space key to avoid scrolling the page.\n\nThis follows the native behaviour, actionable element can be triggered by Space\nkey on the keyup event.\n\nNote: Action triggered by Enter on the keydown event.",
+              "inheritedFrom": {
+                "name": "MenuItem",
+                "module": "components/menuitem/menuitem.component.js"
+              }
             },
             {
               "kind": "method",
@@ -18289,7 +18370,15 @@
           ],
           "events": [
             {
-              "description": "(React: onClick) This event is dispatched when the menuitem is clicked.",
+              "name": "change",
+              "type": {
+                "text": "Event"
+              },
+              "description": "(React: onChange) This event is dispatched when the menuitemcheckbox changes.",
+              "reactName": "onChange"
+            },
+            {
+              "description": "(React: onClick) This event is dispatched when the menuitemcheckbox is clicked.",
               "name": "click",
               "reactName": "onClick",
               "inheritedFrom": {
@@ -18298,27 +18387,27 @@
               }
             },
             {
-              "description": "(React: onKeyDown) This event is dispatched when a key is pressed down on the menuitem.",
-              "name": "keydown",
-              "reactName": "onKeyDown",
+              "description": "(React: onFocus) This event is dispatched when the menuitemcheckbox receives focus.",
+              "name": "focus",
+              "reactName": "onFocus",
               "inheritedFrom": {
                 "name": "ListItem",
                 "module": "src/components/listitem/listitem.component.ts"
               }
             },
             {
-              "description": "(React: onKeyUp) This event is dispatched when a key is released on the menuitem.",
-              "name": "keyup",
-              "reactName": "onKeyUp",
+              "description": "(React: onKeyDown) This event is dispatched when a key is pressed down on the menuitem.",
+              "name": "keydown",
+              "reactName": "onKeyDown",
               "inheritedFrom": {
                 "name": "ListItem",
                 "module": "src/components/listitem/listitem.component.ts"
               }
             },
             {
-              "description": "(React: onFocus) This event is dispatched when the menuitem receives focus.",
-              "name": "focus",
-              "reactName": "onFocus",
+              "description": "(React: onKeyUp) This event is dispatched when a key is released on the menuitem.",
+              "name": "keyup",
+              "reactName": "onKeyUp",
               "inheritedFrom": {
                 "name": "ListItem",
                 "module": "src/components/listitem/listitem.component.ts"
@@ -18362,13 +18451,35 @@
             }
           ],
           "attributes": [
+            {
+              "name": "checked",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "The checked attribute is used to indicate that the menuitemcheckbox is checked or not.",
+              "fieldName": "checked"
+            },
+            {
+              "name": "indicator",
+              "type": {
+                "text": "Indicator"
+              },
+              "description": "The indicator attribute is used to differentiate between <b>checkbox</b> and <b>toggle</b>.",
+              "default": "'checkbox'",
+              "fieldName": "indicator"
+            },
             {
               "name": "arrow-position",
               "type": {
                 "text": "ArrowPositions | undefined"
               },
               "description": "Defines where the arrow icon will appear.\n- `'leading'`: Icon appears on the leading edge (start).\n- `'trailing'`: Icon appears on the trailing edge (end).\n\nIf not set, no arrow is displayed.",
-              "fieldName": "arrowPosition"
+              "fieldName": "arrowPosition",
+              "inheritedFrom": {
+                "name": "MenuItem",
+                "module": "src/components/menuitem/menuitem.component.ts"
+              }
             },
             {
               "name": "arrow-direction",
@@ -18376,7 +18487,11 @@
                 "text": "ArrowDirections | undefined"
               },
               "description": "Defines the direction the arrow icon points.\n- `'positive'`: Arrow points toward the trailing side.\n- `'negative'`: Arrow points toward the leading side.",
-              "fieldName": "arrowDirection"
+              "fieldName": "arrowDirection",
+              "inheritedFrom": {
+                "name": "MenuItem",
+                "module": "src/components/menuitem/menuitem.component.ts"
+              }
             },
             {
               "name": "name",
@@ -18385,7 +18500,11 @@
               },
               "default": "undefined",
               "description": "The name attribute is used to identify the menu item when it is selected.",
-              "fieldName": "name"
+              "fieldName": "name",
+              "inheritedFrom": {
+                "name": "MenuItem",
+                "module": "src/components/menuitem/menuitem.component.ts"
+              }
             },
             {
               "name": "value",
@@ -18394,7 +18513,11 @@
               },
               "default": "undefined",
               "description": "The value attribute is used to represent a value when the menu item is selected.\nIt is typically used with checkbox and radio menu items, but can be handy for any menu item.",
-              "fieldName": "value"
+              "fieldName": "value",
+              "inheritedFrom": {
+                "name": "MenuItem",
+                "module": "src/components/menuitem/menuitem.component.ts"
+              }
             },
             {
               "name": "disabled",
@@ -18535,11 +18658,11 @@
             }
           ],
           "superclass": {
-            "name": "ListItem",
-            "module": "/src/components/listitem/listitem.component"
+            "name": "MenuItem",
+            "module": "/src/components/menuitem/menuitem.component"
           },
-          "tagName": "mdc-menuitem",
-          "jsDoc": "/**\n * menuitem component is inherited by listitem component with the role set `menuitem`.<br/>\n * A menu item can contain an icon on the leading or trailing side.\n *\n * The leading and trailing slots can be used to display controls and text.<br/>\n * Based on the leading/trailing slot, the position of the controls and text can be adjusted.\n *\n * Please use element with role=menu as a parent element even when there is only menuitem for a11y purpose.\n * For example mdc-menupopover or mdc-menubar.\n *\n * Menu item has `name` and `value` attribute that can be used to identify the menu item when it is selected.\n *\n * @dependency mdc-text\n * @dependency mdc-icon\n * @dependency mdc-tooltip\n *\n * @tagname mdc-menuitem\n *\n * @slot leading-controls - slot for menu item controls to appear of leading end.\n * @slot leading-text-primary-label - slot for menu item primary label.\n * @slot leading-text-secondary-label - slot for menu item secondary label.\n * @slot leading-text-tertiary-label - slot for menu item tertiary label.\n * @slot trailing-text-side-header - slot for menu item side header text.\n * @slot trailing-text-subline - slot for menu item subline text.\n * @slot trailing-controls - slot for menu item controls to appear of trailing end.\n *\n * @event click - (React: onClick) This event is dispatched when the menuitem is clicked.\n * @event keydown - (React: onKeyDown) This event is dispatched when a key is pressed down on the menuitem.\n * @event keyup - (React: onKeyUp) This event is dispatched when a key is released on the menuitem.\n * @event focus - (React: onFocus) This event is dispatched when the menuitem receives focus.\n */",
+          "tagName": "mdc-menuitemcheckbox",
+          "jsDoc": "/**\n * A menuitemcheckbox component is a checkable menuitem.\n * There should be no focusable descendants inside this menuitemcheckbox component.\n *\n * The `checked` attribute indicates whether the menuitemcheckbox is checked or not.\n *\n * Menu item checkbox has `name` and `value` attribute that can be used to identify the menu item when it is selected.\n *\n * The `indicator` attribute is used to differentiate between <b>checkbox</b>, <b>checkmark</b>, <b>toggle</b> and <b>none</b>.\n * By default, the `indicator` is set to <b>checkbox</b>.<br/>\n *\n * The checkbox will always be positioned on the leading side of the menuitem label and\n * the toggle and checkmark will always be positioned on the trailing side.\n *\n * The checkbox will have the possible states of `true` or `false`.\n * If the indicator is set to <b>checkmark</b> and if the `checked` attribute is set to `true`,\n * then the checkmark will be displayed. if not, then no indicator will be displayed.\n *\n * The forth options for the `indicator` is <b>none</b>, which will not display any indicator at all.\n * It is intended to be used for customised menu items where the indicator is implemented differently.\n * For example, you can use a custom icon or a different visual element to indicate the state of the menu item.\n * Make sure the new indicator is accessible.\n *\n * If you want only one item in a group to be checked, consider using menuitemradio component.\n *\n * @dependency mdc-staticcheckbox\n * @dependency mdc-statictoggle\n * @dependency mdc-icon\n *\n * @tagname mdc-menuitemcheckbox\n *\n * @slot leading-controls - slot for menu item checkbox controls to appear of leading end.\n * @slot leading-text-primary-label - slot for menu item checkbox primary label.\n * @slot leading-text-secondary-label - slot for menu item checkbox secondary label.\n * @slot leading-text-tertiary-label - slot for menu item checkbox tertiary label.\n * @slot trailing-text-side-header - slot for menu item checkbox side header text.\n * @slot trailing-text-subline - slot for menu item checkbox subline text.\n * @slot trailing-controls - slot for menu item checkbox controls to appear of trailing end.\n *\n * @event change - (React: onChange) This event is dispatched when the menuitemcheckbox changes.\n * @event click - (React: onClick) This event is dispatched when the menuitemcheckbox is clicked.\n * @event focus - (React: onFocus) This event is dispatched when the menuitemcheckbox receives focus.\n */",
           "customElement": true,
           "cssProperties": [
             {
@@ -18614,23 +18737,23 @@
           "kind": "js",
           "name": "default",
           "declaration": {
-            "name": "MenuItem",
-            "module": "components/menuitem/menuitem.component.js"
+            "name": "MenuItemCheckbox",
+            "module": "components/menuitemcheckbox/menuitemcheckbox.component.js"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "components/menuitemcheckbox/menuitemcheckbox.component.js",
+      "path": "components/menuitem/menuitem.component.js",
       "declarations": [
         {
           "kind": "class",
-          "description": "A menuitemcheckbox component is a checkable menuitem.\nThere should be no focusable descendants inside this menuitemcheckbox component.\n\nThe `checked` attribute indicates whether the menuitemcheckbox is checked or not.\n\nMenu item checkbox has `name` and `value` attribute that can be used to identify the menu item when it is selected.\n\nThe `indicator` attribute is used to differentiate between <b>checkbox</b>, <b>checkmark</b>, <b>toggle</b> and <b>none</b>.\nBy default, the `indicator` is set to <b>checkbox</b>.<br/>\n\nThe checkbox will always be positioned on the leading side of the menuitem label and\nthe toggle and checkmark will always be positioned on the trailing side.\n\nThe checkbox will have the possible states of `true` or `false`.\nIf the indicator is set to <b>checkmark</b> and if the `checked` attribute is set to `true`,\nthen the checkmark will be displayed. if not, then no indicator will be displayed.\n\nThe forth options for the `indicator` is <b>none</b>, which will not display any indicator at all.\nIt is intended to be used for customised menu items where the indicator is implemented differently.\nFor example, you can use a custom icon or a different visual element to indicate the state of the menu item.\nMake sure the new indicator is accessible.\n\nIf you want only one item in a group to be checked, consider using menuitemradio component.",
-          "name": "MenuItemCheckbox",
+          "description": "menuitem component is inherited by listitem component with the role set `menuitem`.<br/>\nA menu item can contain an icon on the leading or trailing side.\n\nThe leading and trailing slots can be used to display controls and text.<br/>\nBased on the leading/trailing slot, the position of the controls and text can be adjusted.\n\nPlease use element with role=menu as a parent element even when there is only menuitem for a11y purpose.\nFor example mdc-menupopover or mdc-menubar.\n\nMenu item has `name` and `value` attribute that can be used to identify the menu item when it is selected.",
+          "name": "MenuItem",
           "slots": [
             {
-              "description": "slot for menu item checkbox controls to appear of leading end.",
+              "description": "slot for menu item controls to appear of leading end.",
               "name": "leading-controls",
               "inheritedFrom": {
                 "name": "ListItem",
@@ -18638,7 +18761,7 @@
               }
             },
             {
-              "description": "slot for menu item checkbox primary label.",
+              "description": "slot for menu item primary label.",
               "name": "leading-text-primary-label",
               "inheritedFrom": {
                 "name": "ListItem",
@@ -18646,7 +18769,7 @@
               }
             },
             {
-              "description": "slot for menu item checkbox secondary label.",
+              "description": "slot for menu item secondary label.",
               "name": "leading-text-secondary-label",
               "inheritedFrom": {
                 "name": "ListItem",
@@ -18654,7 +18777,7 @@
               }
             },
             {
-              "description": "slot for menu item checkbox tertiary label.",
+              "description": "slot for menu item tertiary label.",
               "name": "leading-text-tertiary-label",
               "inheritedFrom": {
                 "name": "ListItem",
@@ -18662,7 +18785,7 @@
               }
             },
             {
-              "description": "slot for menu item checkbox side header text.",
+              "description": "slot for menu item side header text.",
               "name": "trailing-text-side-header",
               "inheritedFrom": {
                 "name": "ListItem",
@@ -18670,7 +18793,7 @@
               }
             },
             {
-              "description": "slot for menu item checkbox subline text.",
+              "description": "slot for menu item subline text.",
               "name": "trailing-text-subline",
               "inheritedFrom": {
                 "name": "ListItem",
@@ -18678,7 +18801,7 @@
               }
             },
             {
-              "description": "slot for menu item checkbox controls to appear of trailing end.",
+              "description": "slot for menu item controls to appear of trailing end.",
               "name": "trailing-controls",
               "inheritedFrom": {
                 "name": "ListItem",
@@ -18687,67 +18810,6 @@
             }
           ],
           "members": [
-            {
-              "kind": "field",
-              "name": "checked",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "The checked attribute is used to indicate that the menuitemcheckbox is checked or not.",
-              "attribute": "checked",
-              "reflects": true
-            },
-            {
-              "kind": "field",
-              "name": "indicator",
-              "type": {
-                "text": "Indicator"
-              },
-              "description": "The indicator attribute is used to differentiate between <b>checkbox</b> and <b>toggle</b>.",
-              "default": "'checkbox'",
-              "attribute": "indicator",
-              "reflects": true
-            },
-            {
-              "kind": "method",
-              "name": "handleMouseClick",
-              "privacy": "private",
-              "description": "Handles click events to toggle checked state\nIf the menuitemcheckbox is disabled, it does nothing.\nIf the menuitemcheckbox is not disabled, it toggles the `checked` state between `true` and `false`."
-            },
-            {
-              "kind": "method",
-              "name": "staticCheckbox",
-              "privacy": "private",
-              "return": {
-                "type": {
-                  "text": ""
-                }
-              },
-              "description": "Returns a static checkbox element if the indicator is set to checkbox.\nIf the indicator is not set to checkbox, it returns nothing."
-            },
-            {
-              "kind": "method",
-              "name": "staticToggle",
-              "privacy": "private",
-              "return": {
-                "type": {
-                  "text": ""
-                }
-              },
-              "description": "Returns a static toggle element if the indicator is set to toggle.\nIf the indicator is not set to toggle, it returns nothing.\n\nThe toggle will always be positioned on the trailing side of the menuitem label."
-            },
-            {
-              "kind": "method",
-              "name": "getCheckmarkIcon",
-              "privacy": "private",
-              "return": {
-                "type": {
-                  "text": ""
-                }
-              },
-              "description": "Returns a checkmark icon if the indicator is set to checkmark and the checked state is true.\nIf the indicator is not set to checkmark or the checked state is false, it returns nothing.\n\nThe checkmark icon will always be positioned on the trailing side of the menuitem label."
-            },
             {
               "kind": "field",
               "name": "arrowPosition",
@@ -18756,11 +18818,7 @@
               },
               "description": "Defines where the arrow icon will appear.\n- `'leading'`: Icon appears on the leading edge (start).\n- `'trailing'`: Icon appears on the trailing edge (end).\n\nIf not set, no arrow is displayed.",
               "attribute": "arrow-position",
-              "reflects": true,
-              "inheritedFrom": {
-                "name": "MenuItem",
-                "module": "components/menuitem/menuitem.component.js"
-              }
+              "reflects": true
             },
             {
               "kind": "field",
@@ -18770,11 +18828,7 @@
               },
               "description": "Defines the direction the arrow icon points.\n- `'positive'`: Arrow points toward the trailing side.\n- `'negative'`: Arrow points toward the leading side.",
               "attribute": "arrow-direction",
-              "reflects": true,
-              "inheritedFrom": {
-                "name": "MenuItem",
-                "module": "components/menuitem/menuitem.component.js"
-              }
+              "reflects": true
             },
             {
               "kind": "field",
@@ -18785,11 +18839,7 @@
               "default": "undefined",
               "description": "The name attribute is used to identify the menu item when it is selected.",
               "attribute": "name",
-              "reflects": true,
-              "inheritedFrom": {
-                "name": "MenuItem",
-                "module": "components/menuitem/menuitem.component.js"
-              }
+              "reflects": true
             },
             {
               "kind": "field",
@@ -18800,11 +18850,7 @@
               "default": "undefined",
               "description": "The value attribute is used to represent a value when the menu item is selected.\nIt is typically used with checkbox and radio menu items, but can be handy for any menu item.",
               "attribute": "value",
-              "reflects": true,
-              "inheritedFrom": {
-                "name": "MenuItem",
-                "module": "components/menuitem/menuitem.component.js"
-              }
+              "reflects": true
             },
             {
               "kind": "method",
@@ -18848,11 +18894,7 @@
                   "description": "The keyboard event that triggered the action."
                 }
               ],
-              "description": "Handles the keyup event for the menu item.\nIf the Space key is released, it triggers a click event on the menu item.\nThis allows keyboard users to activate the menu item using the Space key.\nIt also prevents the default action of the Space key to avoid scrolling the page.\n\nThis follows the native behaviour, actionable element can be triggered by Space\nkey on the keyup event.\n\nNote: Action triggered by Enter on the keydown event.",
-              "inheritedFrom": {
-                "name": "MenuItem",
-                "module": "components/menuitem/menuitem.component.js"
-              }
+              "description": "Handles the keyup event for the menu item.\nIf the Space key is released, it triggers a click event on the menu item.\nThis allows keyboard users to activate the menu item using the Space key.\nIt also prevents the default action of the Space key to avoid scrolling the page.\n\nThis follows the native behaviour, actionable element can be triggered by Space\nkey on the keyup event.\n\nNote: Action triggered by Enter on the keydown event."
             },
             {
               "kind": "method",
@@ -19189,15 +19231,7 @@
           ],
           "events": [
             {
-              "name": "change",
-              "type": {
-                "text": "Event"
-              },
-              "description": "(React: onChange) This event is dispatched when the menuitemcheckbox changes.",
-              "reactName": "onChange"
-            },
-            {
-              "description": "(React: onClick) This event is dispatched when the menuitemcheckbox is clicked.",
+              "description": "(React: onClick) This event is dispatched when the menuitem is clicked.",
               "name": "click",
               "reactName": "onClick",
               "inheritedFrom": {
@@ -19205,15 +19239,6 @@
                 "module": "src/components/listitem/listitem.component.ts"
               }
             },
-            {
-              "description": "(React: onFocus) This event is dispatched when the menuitemcheckbox receives focus.",
-              "name": "focus",
-              "reactName": "onFocus",
-              "inheritedFrom": {
-                "name": "ListItem",
-                "module": "src/components/listitem/listitem.component.ts"
-              }
-            },
             {
               "description": "(React: onKeyDown) This event is dispatched when a key is pressed down on the menuitem.",
               "name": "keydown",
@@ -19232,6 +19257,15 @@
                 "module": "src/components/listitem/listitem.component.ts"
               }
             },
+            {
+              "description": "(React: onFocus) This event is dispatched when the menuitem receives focus.",
+              "name": "focus",
+              "reactName": "onFocus",
+              "inheritedFrom": {
+                "name": "ListItem",
+                "module": "src/components/listitem/listitem.component.ts"
+              }
+            },
             {
               "description": "(React: onEnabled) This event is dispatched after the listitem is enabled",
               "name": "enabled",
@@ -19270,35 +19304,13 @@
             }
           ],
           "attributes": [
-            {
-              "name": "checked",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "The checked attribute is used to indicate that the menuitemcheckbox is checked or not.",
-              "fieldName": "checked"
-            },
-            {
-              "name": "indicator",
-              "type": {
-                "text": "Indicator"
-              },
-              "description": "The indicator attribute is used to differentiate between <b>checkbox</b> and <b>toggle</b>.",
-              "default": "'checkbox'",
-              "fieldName": "indicator"
-            },
             {
               "name": "arrow-position",
               "type": {
                 "text": "ArrowPositions | undefined"
               },
               "description": "Defines where the arrow icon will appear.\n- `'leading'`: Icon appears on the leading edge (start).\n- `'trailing'`: Icon appears on the trailing edge (end).\n\nIf not set, no arrow is displayed.",
-              "fieldName": "arrowPosition",
-              "inheritedFrom": {
-                "name": "MenuItem",
-                "module": "src/components/menuitem/menuitem.component.ts"
-              }
+              "fieldName": "arrowPosition"
             },
             {
               "name": "arrow-direction",
@@ -19306,11 +19318,7 @@
                 "text": "ArrowDirections | undefined"
               },
               "description": "Defines the direction the arrow icon points.\n- `'positive'`: Arrow points toward the trailing side.\n- `'negative'`: Arrow points toward the leading side.",
-              "fieldName": "arrowDirection",
-              "inheritedFrom": {
-                "name": "MenuItem",
-                "module": "src/components/menuitem/menuitem.component.ts"
-              }
+              "fieldName": "arrowDirection"
             },
             {
               "name": "name",
@@ -19319,11 +19327,7 @@
               },
               "default": "undefined",
               "description": "The name attribute is used to identify the menu item when it is selected.",
-              "fieldName": "name",
-              "inheritedFrom": {
-                "name": "MenuItem",
-                "module": "src/components/menuitem/menuitem.component.ts"
-              }
+              "fieldName": "name"
             },
             {
               "name": "value",
@@ -19332,11 +19336,7 @@
               },
               "default": "undefined",
               "description": "The value attribute is used to represent a value when the menu item is selected.\nIt is typically used with checkbox and radio menu items, but can be handy for any menu item.",
-              "fieldName": "value",
-              "inheritedFrom": {
-                "name": "MenuItem",
-                "module": "src/components/menuitem/menuitem.component.ts"
-              }
+              "fieldName": "value"
             },
             {
               "name": "disabled",
@@ -19477,11 +19477,11 @@
             }
           ],
           "superclass": {
-            "name": "MenuItem",
-            "module": "/src/components/menuitem/menuitem.component"
+            "name": "ListItem",
+            "module": "/src/components/listitem/listitem.component"
           },
-          "tagName": "mdc-menuitemcheckbox",
-          "jsDoc": "/**\n * A menuitemcheckbox component is a checkable menuitem.\n * There should be no focusable descendants inside this menuitemcheckbox component.\n *\n * The `checked` attribute indicates whether the menuitemcheckbox is checked or not.\n *\n * Menu item checkbox has `name` and `value` attribute that can be used to identify the menu item when it is selected.\n *\n * The `indicator` attribute is used to differentiate between <b>checkbox</b>, <b>checkmark</b>, <b>toggle</b> and <b>none</b>.\n * By default, the `indicator` is set to <b>checkbox</b>.<br/>\n *\n * The checkbox will always be positioned on the leading side of the menuitem label and\n * the toggle and checkmark will always be positioned on the trailing side.\n *\n * The checkbox will have the possible states of `true` or `false`.\n * If the indicator is set to <b>checkmark</b> and if the `checked` attribute is set to `true`,\n * then the checkmark will be displayed. if not, then no indicator will be displayed.\n *\n * The forth options for the `indicator` is <b>none</b>, which will not display any indicator at all.\n * It is intended to be used for customised menu items where the indicator is implemented differently.\n * For example, you can use a custom icon or a different visual element to indicate the state of the menu item.\n * Make sure the new indicator is accessible.\n *\n * If you want only one item in a group to be checked, consider using menuitemradio component.\n *\n * @dependency mdc-staticcheckbox\n * @dependency mdc-statictoggle\n * @dependency mdc-icon\n *\n * @tagname mdc-menuitemcheckbox\n *\n * @slot leading-controls - slot for menu item checkbox controls to appear of leading end.\n * @slot leading-text-primary-label - slot for menu item checkbox primary label.\n * @slot leading-text-secondary-label - slot for menu item checkbox secondary label.\n * @slot leading-text-tertiary-label - slot for menu item checkbox tertiary label.\n * @slot trailing-text-side-header - slot for menu item checkbox side header text.\n * @slot trailing-text-subline - slot for menu item checkbox subline text.\n * @slot trailing-controls - slot for menu item checkbox controls to appear of trailing end.\n *\n * @event change - (React: onChange) This event is dispatched when the menuitemcheckbox changes.\n * @event click - (React: onClick) This event is dispatched when the menuitemcheckbox is clicked.\n * @event focus - (React: onFocus) This event is dispatched when the menuitemcheckbox receives focus.\n */",
+          "tagName": "mdc-menuitem",
+          "jsDoc": "/**\n * menuitem component is inherited by listitem component with the role set `menuitem`.<br/>\n * A menu item can contain an icon on the leading or trailing side.\n *\n * The leading and trailing slots can be used to display controls and text.<br/>\n * Based on the leading/trailing slot, the position of the controls and text can be adjusted.\n *\n * Please use element with role=menu as a parent element even when there is only menuitem for a11y purpose.\n * For example mdc-menupopover or mdc-menubar.\n *\n * Menu item has `name` and `value` attribute that can be used to identify the menu item when it is selected.\n *\n * @dependency mdc-text\n * @dependency mdc-icon\n * @dependency mdc-tooltip\n *\n * @tagname mdc-menuitem\n *\n * @slot leading-controls - slot for menu item controls to appear of leading end.\n * @slot leading-text-primary-label - slot for menu item primary label.\n * @slot leading-text-secondary-label - slot for menu item secondary label.\n * @slot leading-text-tertiary-label - slot for menu item tertiary label.\n * @slot trailing-text-side-header - slot for menu item side header text.\n * @slot trailing-text-subline - slot for menu item subline text.\n * @slot trailing-controls - slot for menu item controls to appear of trailing end.\n *\n * @event click - (React: onClick) This event is dispatched when the menuitem is clicked.\n * @event keydown - (React: onKeyDown) This event is dispatched when a key is pressed down on the menuitem.\n * @event keyup - (React: onKeyUp) This event is dispatched when a key is released on the menuitem.\n * @event focus - (React: onFocus) This event is dispatched when the menuitem receives focus.\n */",
           "customElement": true,
           "cssProperties": [
             {
@@ -19556,8 +19556,8 @@
           "kind": "js",
           "name": "default",
           "declaration": {
-            "name": "MenuItemCheckbox",
-            "module": "components/menuitemcheckbox/menuitemcheckbox.component.js"
+            "name": "MenuItem",
+            "module": "components/menuitem/menuitem.component.js"
           }
         }
       ]
@@ -20515,6 +20515,147 @@
         }
       ]
     },
+    {
+      "kind": "javascript-module",
+      "path": "components/menusection/menusection.component.js",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "`mdc-menusection` is a container element used to group a set of menu items.\n\nThis component supports a mix of `menuitem`, `menuitemcheckbox`, and `menuitemradio` components.\n\n- If multiple `menuitemradio` components are slotted into the section, the group enforces a single-selection rule:\n  only one radio item can be selected at a time.\n- If `menuitemcheckbox` components are included, their checked state can be toggled independently.",
+          "name": "MenuSection",
+          "slots": [
+            {
+              "description": "Default slot for inserting `menuitem`, `menuitemcheckbox`, or `menuitemradio`",
+              "name": ""
+            }
+          ],
+          "members": [
+            {
+              "kind": "field",
+              "name": "ariaLabel",
+              "type": {
+                "text": "string | null"
+              },
+              "default": "null",
+              "description": "The aria-label for the section.\nThis is used for accessibility purposes to describe the section.\nIf not provided, it defaults to the `headerText`.",
+              "attribute": "aria-label",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "headerText",
+              "type": {
+                "text": "string | null"
+              },
+              "default": "null",
+              "description": "The primary headerText of the list item.\nThis appears on the leading side of the list item.",
+              "attribute": "header-text",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "prefixIcon",
+              "type": {
+                "text": "IconNames | undefined"
+              },
+              "description": "Name of the icon rendered before the text\n\nIf not provided, no icon will be rendered and text will be aligned to the start.",
+              "attribute": "prefix-icon"
+            },
+            {
+              "kind": "field",
+              "name": "showDivider",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Whether to show a divider below the section header.\nThis is useful for visually separating sections in the menu.",
+              "attribute": "show-divider",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "dividerVariant",
+              "description": "The variant of the divider.\nCan be set to 'solid' or 'gradient'.\n\nKeep 'solid' if used in MenuPopovers, as it is the default style.",
+              "default": "'solid'",
+              "attribute": "divider-variant",
+              "reflects": true
+            },
+            {
+              "kind": "method",
+              "name": "renderHeader",
+              "privacy": "private"
+            }
+          ],
+          "events": [
+            {
+              "description": "(React: onChange) This event is dispatched when a `menuitemcheckbox`, or `menuitemradio` changes.",
+              "name": "change",
+              "reactName": "onChange"
+            }
+          ],
+          "attributes": [
+            {
+              "name": "aria-label",
+              "type": {
+                "text": "string | null"
+              },
+              "default": "null",
+              "description": "The aria-label for the section.\nThis is used for accessibility purposes to describe the section.\nIf not provided, it defaults to the `headerText`.",
+              "fieldName": "ariaLabel"
+            },
+            {
+              "name": "header-text",
+              "type": {
+                "text": "string | null"
+              },
+              "default": "null",
+              "description": "The primary headerText of the list item.\nThis appears on the leading side of the list item.",
+              "fieldName": "headerText"
+            },
+            {
+              "name": "prefix-icon",
+              "type": {
+                "text": "IconNames | undefined"
+              },
+              "description": "Name of the icon rendered before the text\n\nIf not provided, no icon will be rendered and text will be aligned to the start.",
+              "fieldName": "prefixIcon"
+            },
+            {
+              "name": "show-divider",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Whether to show a divider below the section header.\nThis is useful for visually separating sections in the menu.",
+              "fieldName": "showDivider"
+            },
+            {
+              "name": "divider-variant",
+              "description": "The variant of the divider.\nCan be set to 'solid' or 'gradient'.\n\nKeep 'solid' if used in MenuPopovers, as it is the default style.",
+              "default": "'solid'",
+              "fieldName": "dividerVariant"
+            }
+          ],
+          "superclass": {
+            "name": "Component",
+            "module": "/src/models"
+          },
+          "tagName": "mdc-menusection",
+          "jsDoc": "/**\n * `mdc-menusection` is a container element used to group a set of menu items.\n *\n * This component supports a mix of `menuitem`, `menuitemcheckbox`, and `menuitemradio` components.\n *\n * - If multiple `menuitemradio` components are slotted into the section, the group enforces a single-selection rule:\n *   only one radio item can be selected at a time.\n * - If `menuitemcheckbox` components are included, their checked state can be toggled independently.\n *\n * @tagname mdc-menusection\n *\n * @slot - Default slot for inserting `menuitem`, `menuitemcheckbox`, or `menuitemradio`\n *\n * @event change - (React: onChange) This event is dispatched when a `menuitemcheckbox`, or `menuitemradio` changes.\n */",
+          "customElement": true
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "default",
+          "declaration": {
+            "name": "MenuSection",
+            "module": "components/menusection/menusection.component.js"
+          }
+        }
+      ]
+    },
     {
       "kind": "javascript-module",
       "path": "components/menupopover/menupopover.component.js",
@@ -22659,147 +22800,6 @@
         }
       ]
     },
-    {
-      "kind": "javascript-module",
-      "path": "components/menusection/menusection.component.js",
-      "declarations": [
-        {
-          "kind": "class",
-          "description": "`mdc-menusection` is a container element used to group a set of menu items.\n\nThis component supports a mix of `menuitem`, `menuitemcheckbox`, and `menuitemradio` components.\n\n- If multiple `menuitemradio` components are slotted into the section, the group enforces a single-selection rule:\n  only one radio item can be selected at a time.\n- If `menuitemcheckbox` components are included, their checked state can be toggled independently.",
-          "name": "MenuSection",
-          "slots": [
-            {
-              "description": "Default slot for inserting `menuitem`, `menuitemcheckbox`, or `menuitemradio`",
-              "name": ""
-            }
-          ],
-          "members": [
-            {
-              "kind": "field",
-              "name": "ariaLabel",
-              "type": {
-                "text": "string | null"
-              },
-              "default": "null",
-              "description": "The aria-label for the section.\nThis is used for accessibility purposes to describe the section.\nIf not provided, it defaults to the `headerText`.",
-              "attribute": "aria-label",
-              "reflects": true
-            },
-            {
-              "kind": "field",
-              "name": "headerText",
-              "type": {
-                "text": "string | null"
-              },
-              "default": "null",
-              "description": "The primary headerText of the list item.\nThis appears on the leading side of the list item.",
-              "attribute": "header-text",
-              "reflects": true
-            },
-            {
-              "kind": "field",
-              "name": "prefixIcon",
-              "type": {
-                "text": "IconNames | undefined"
-              },
-              "description": "Name of the icon rendered before the text\n\nIf not provided, no icon will be rendered and text will be aligned to the start.",
-              "attribute": "prefix-icon"
-            },
-            {
-              "kind": "field",
-              "name": "showDivider",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "Whether to show a divider below the section header.\nThis is useful for visually separating sections in the menu.",
-              "attribute": "show-divider",
-              "reflects": true
-            },
-            {
-              "kind": "field",
-              "name": "dividerVariant",
-              "description": "The variant of the divider.\nCan be set to 'solid' or 'gradient'.\n\nKeep 'solid' if used in MenuPopovers, as it is the default style.",
-              "default": "'solid'",
-              "attribute": "divider-variant",
-              "reflects": true
-            },
-            {
-              "kind": "method",
-              "name": "renderHeader",
-              "privacy": "private"
-            }
-          ],
-          "events": [
-            {
-              "description": "(React: onChange) This event is dispatched when a `menuitemcheckbox`, or `menuitemradio` changes.",
-              "name": "change",
-              "reactName": "onChange"
-            }
-          ],
-          "attributes": [
-            {
-              "name": "aria-label",
-              "type": {
-                "text": "string | null"
-              },
-              "default": "null",
-              "description": "The aria-label for the section.\nThis is used for accessibility purposes to describe the section.\nIf not provided, it defaults to the `headerText`.",
-              "fieldName": "ariaLabel"
-            },
-            {
-              "name": "header-text",
-              "type": {
-                "text": "string | null"
-              },
-              "default": "null",
-              "description": "The primary headerText of the list item.\nThis appears on the leading side of the list item.",
-              "fieldName": "headerText"
-            },
-            {
-              "name": "prefix-icon",
-              "type": {
-                "text": "IconNames | undefined"
-              },
-              "description": "Name of the icon rendered before the text\n\nIf not provided, no icon will be rendered and text will be aligned to the start.",
-              "fieldName": "prefixIcon"
-            },
-            {
-              "name": "show-divider",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "Whether to show a divider below the section header.\nThis is useful for visually separating sections in the menu.",
-              "fieldName": "showDivider"
-            },
-            {
-              "name": "divider-variant",
-              "description": "The variant of the divider.\nCan be set to 'solid' or 'gradient'.\n\nKeep 'solid' if used in MenuPopovers, as it is the default style.",
-              "default": "'solid'",
-              "fieldName": "dividerVariant"
-            }
-          ],
-          "superclass": {
-            "name": "Component",
-            "module": "/src/models"
-          },
-          "tagName": "mdc-menusection",
-          "jsDoc": "/**\n * `mdc-menusection` is a container element used to group a set of menu items.\n *\n * This component supports a mix of `menuitem`, `menuitemcheckbox`, and `menuitemradio` components.\n *\n * - If multiple `menuitemradio` components are slotted into the section, the group enforces a single-selection rule:\n *   only one radio item can be selected at a time.\n * - If `menuitemcheckbox` components are included, their checked state can be toggled independently.\n *\n * @tagname mdc-menusection\n *\n * @slot - Default slot for inserting `menuitem`, `menuitemcheckbox`, or `menuitemradio`\n *\n * @event change - (React: onChange) This event is dispatched when a `menuitemcheckbox`, or `menuitemradio` changes.\n */",
-          "customElement": true
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "default",
-          "declaration": {
-            "name": "MenuSection",
-            "module": "components/menusection/menusection.component.js"
-          }
-        }
-      ]
-    },
     {
       "kind": "javascript-module",
       "path": "components/navmenuitem/navmenuitem.component.js",
@@ -33293,180 +33293,6 @@
         }
       ]
     },
-    {
-      "kind": "javascript-module",
-      "path": "components/statictoggle/statictoggle.component.js",
-      "declarations": [
-        {
-          "kind": "class",
-          "description": "This is a decorative component that is styled to look as a toggle. <br/>\nIt has 3 properties - checked, size and disabled. <br/>\nWe are using the same styling that has been created for the `mdc-toggle` component.",
-          "name": "StaticToggle",
-          "cssProperties": [
-            {
-              "description": "Width of the toggle",
-              "name": "--mdc-statictoggle-width"
-            },
-            {
-              "description": "Height of the toggle",
-              "name": "--mdc-statictoggle-height"
-            },
-            {
-              "description": "Width of the toggle when it's size is compact",
-              "name": "--mdc-statictoggle-width-compact"
-            },
-            {
-              "description": "Height of the toggle when it's size is compact",
-              "name": "--mdc-statictoggle-height-compact"
-            },
-            {
-              "description": "Border radius of the toggle",
-              "name": "--mdc-statictoggle-border-radius"
-            },
-            {
-              "description": "Border radius of the toggle when it's size is compact",
-              "name": "--mdc-statictoggle-border-radius-compact"
-            },
-            {
-              "description": "Border of the toggle",
-              "name": "--mdc-statictoggle-border"
-            },
-            {
-              "description": "Background color of the inactive toggle in rest state",
-              "name": "--mdc-statictoggle-inactive-rest-color"
-            },
-            {
-              "description": "Background color of the inactive toggle in disabled state",
-              "name": "--mdc-statictoggle-inactive-disabled-color"
-            },
-            {
-              "description": "Background color of the active toggle in rest state",
-              "name": "--mdc-statictoggle-active-rest-color"
-            },
-            {
-              "description": "Background color of the active toggle in disabled state",
-              "name": "--mdc-statictoggle-active-disabled-color"
-            },
-            {
-              "description": "Color of the icon in normal state",
-              "name": "--mdc-statictoggle-icon-color-normal"
-            },
-            {
-              "description": "Color of the icon in disabled state",
-              "name": "--mdc-statictoggle-icon-color-disabled"
-            },
-            {
-              "description": "Background color of the icon in normal state",
-              "name": "--mdc-statictoggle-icon-background-color-normal"
-            },
-            {
-              "description": "Background color of the icon in disabled state",
-              "name": "--mdc-statictoggle-icon-background-color-disabled"
-            }
-          ],
-          "slots": [
-            {
-              "description": "This is a default/unnamed slot",
-              "name": "default"
-            }
-          ],
-          "members": [
-            {
-              "kind": "field",
-              "name": "checked",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "Determines whether the toggle is active or inactive.",
-              "attribute": "checked",
-              "reflects": true
-            },
-            {
-              "kind": "field",
-              "name": "size",
-              "type": {
-                "text": "ToggleSize"
-              },
-              "description": "Determines toggle size in rem (height is specified here).\n- **Default**: 1.5\n- **Compact**: 1",
-              "default": "default",
-              "attribute": "size",
-              "reflects": true
-            },
-            {
-              "kind": "field",
-              "name": "disabled",
-              "type": {
-                "text": "boolean | undefined"
-              },
-              "description": "Indicates whether the component is disabled.\nWhen the component is disabled for user interaction; it is not focusable or clickable.",
-              "default": "undefined",
-              "attribute": "disabled",
-              "reflects": true,
-              "inheritedFrom": {
-                "name": "DisabledMixin",
-                "module": "utils/mixins/DisabledMixin.js"
-              }
-            }
-          ],
-          "attributes": [
-            {
-              "name": "checked",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "Determines whether the toggle is active or inactive.",
-              "fieldName": "checked"
-            },
-            {
-              "name": "size",
-              "type": {
-                "text": "ToggleSize"
-              },
-              "description": "Determines toggle size in rem (height is specified here).\n- **Default**: 1.5\n- **Compact**: 1",
-              "default": "default",
-              "fieldName": "size"
-            },
-            {
-              "name": "disabled",
-              "type": {
-                "text": "boolean | undefined"
-              },
-              "description": "Indicates whether the component is disabled.\nWhen the component is disabled for user interaction; it is not focusable or clickable.",
-              "default": "undefined",
-              "fieldName": "disabled",
-              "inheritedFrom": {
-                "name": "DisabledMixin",
-                "module": "src/utils/mixins/DisabledMixin.ts"
-              }
-            }
-          ],
-          "mixins": [
-            {
-              "name": "DisabledMixin",
-              "module": "/src/utils/mixins/DisabledMixin"
-            }
-          ],
-          "superclass": {
-            "name": "Component",
-            "module": "/src/models"
-          },
-          "tagName": "mdc-statictoggle",
-          "jsDoc": "/**\n * This is a decorative component that is styled to look as a toggle. <br/>\n * It has 3 properties - checked, size and disabled. <br/>\n * We are using the same styling that has been created for the `mdc-toggle` component.\n *\n * @dependency mdc-icon\n *\n * @tagname mdc-statictoggle\n *\n * @slot default - This is a default/unnamed slot\n *\n * @cssproperty --mdc-statictoggle-width - Width of the toggle\n * @cssproperty --mdc-statictoggle-height - Height of the toggle\n * @cssproperty --mdc-statictoggle-width-compact - Width of the toggle when it's size is compact\n * @cssproperty --mdc-statictoggle-height-compact - Height of the toggle when it's size is compact\n * @cssproperty --mdc-statictoggle-border-radius - Border radius of the toggle\n * @cssproperty --mdc-statictoggle-border-radius-compact - Border radius of the toggle when it's size is compact\n * @cssproperty --mdc-statictoggle-border - Border of the toggle\n * @cssproperty --mdc-statictoggle-inactive-rest-color - Background color of the inactive toggle in rest state\n * @cssproperty --mdc-statictoggle-inactive-disabled-color - Background color of the inactive toggle in disabled state\n * @cssproperty --mdc-statictoggle-active-rest-color - Background color of the active toggle in rest state\n * @cssproperty --mdc-statictoggle-active-disabled-color - Background color of the active toggle in disabled state\n * @cssproperty --mdc-statictoggle-icon-color-normal - Color of the icon in normal state\n * @cssproperty --mdc-statictoggle-icon-color-disabled - Color of the icon in disabled state\n * @cssproperty --mdc-statictoggle-icon-background-color-normal - Background color of the icon in normal state\n * @cssproperty --mdc-statictoggle-icon-background-color-disabled - Background color of the icon in disabled state\n */",
-          "customElement": true
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "default",
-          "declaration": {
-            "name": "StaticToggle",
-            "module": "components/statictoggle/statictoggle.component.js"
-          }
-        }
-      ]
-    },
     {
       "kind": "javascript-module",
       "path": "components/stepper/stepper.component.js",
@@ -33652,6 +33478,180 @@
         }
       ]
     },
+    {
+      "kind": "javascript-module",
+      "path": "components/statictoggle/statictoggle.component.js",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "This is a decorative component that is styled to look as a toggle. <br/>\nIt has 3 properties - checked, size and disabled. <br/>\nWe are using the same styling that has been created for the `mdc-toggle` component.",
+          "name": "StaticToggle",
+          "cssProperties": [
+            {
+              "description": "Width of the toggle",
+              "name": "--mdc-statictoggle-width"
+            },
+            {
+              "description": "Height of the toggle",
+              "name": "--mdc-statictoggle-height"
+            },
+            {
+              "description": "Width of the toggle when it's size is compact",
+              "name": "--mdc-statictoggle-width-compact"
+            },
+            {
+              "description": "Height of the toggle when it's size is compact",
+              "name": "--mdc-statictoggle-height-compact"
+            },
+            {
+              "description": "Border radius of the toggle",
+              "name": "--mdc-statictoggle-border-radius"
+            },
+            {
+              "description": "Border radius of the toggle when it's size is compact",
+              "name": "--mdc-statictoggle-border-radius-compact"
+            },
+            {
+              "description": "Border of the toggle",
+              "name": "--mdc-statictoggle-border"
+            },
+            {
+              "description": "Background color of the inactive toggle in rest state",
+              "name": "--mdc-statictoggle-inactive-rest-color"
+            },
+            {
+              "description": "Background color of the inactive toggle in disabled state",
+              "name": "--mdc-statictoggle-inactive-disabled-color"
+            },
+            {
+              "description": "Background color of the active toggle in rest state",
+              "name": "--mdc-statictoggle-active-rest-color"
+            },
+            {
+              "description": "Background color of the active toggle in disabled state",
+              "name": "--mdc-statictoggle-active-disabled-color"
+            },
+            {
+              "description": "Color of the icon in normal state",
+              "name": "--mdc-statictoggle-icon-color-normal"
+            },
+            {
+              "description": "Color of the icon in disabled state",
+              "name": "--mdc-statictoggle-icon-color-disabled"
+            },
+            {
+              "description": "Background color of the icon in normal state",
+              "name": "--mdc-statictoggle-icon-background-color-normal"
+            },
+            {
+              "description": "Background color of the icon in disabled state",
+              "name": "--mdc-statictoggle-icon-background-color-disabled"
+            }
+          ],
+          "slots": [
+            {
+              "description": "This is a default/unnamed slot",
+              "name": "default"
+            }
+          ],
+          "members": [
+            {
+              "kind": "field",
+              "name": "checked",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Determines whether the toggle is active or inactive.",
+              "attribute": "checked",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "size",
+              "type": {
+                "text": "ToggleSize"
+              },
+              "description": "Determines toggle size in rem (height is specified here).\n- **Default**: 1.5\n- **Compact**: 1",
+              "default": "default",
+              "attribute": "size",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "disabled",
+              "type": {
+                "text": "boolean | undefined"
+              },
+              "description": "Indicates whether the component is disabled.\nWhen the component is disabled for user interaction; it is not focusable or clickable.",
+              "default": "undefined",
+              "attribute": "disabled",
+              "reflects": true,
+              "inheritedFrom": {
+                "name": "DisabledMixin",
+                "module": "utils/mixins/DisabledMixin.js"
+              }
+            }
+          ],
+          "attributes": [
+            {
+              "name": "checked",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Determines whether the toggle is active or inactive.",
+              "fieldName": "checked"
+            },
+            {
+              "name": "size",
+              "type": {
+                "text": "ToggleSize"
+              },
+              "description": "Determines toggle size in rem (height is specified here).\n- **Default**: 1.5\n- **Compact**: 1",
+              "default": "default",
+              "fieldName": "size"
+            },
+            {
+              "name": "disabled",
+              "type": {
+                "text": "boolean | undefined"
+              },
+              "description": "Indicates whether the component is disabled.\nWhen the component is disabled for user interaction; it is not focusable or clickable.",
+              "default": "undefined",
+              "fieldName": "disabled",
+              "inheritedFrom": {
+                "name": "DisabledMixin",
+                "module": "src/utils/mixins/DisabledMixin.ts"
+              }
+            }
+          ],
+          "mixins": [
+            {
+              "name": "DisabledMixin",
+              "module": "/src/utils/mixins/DisabledMixin"
+            }
+          ],
+          "superclass": {
+            "name": "Component",
+            "module": "/src/models"
+          },
+          "tagName": "mdc-statictoggle",
+          "jsDoc": "/**\n * This is a decorative component that is styled to look as a toggle. <br/>\n * It has 3 properties - checked, size and disabled. <br/>\n * We are using the same styling that has been created for the `mdc-toggle` component.\n *\n * @dependency mdc-icon\n *\n * @tagname mdc-statictoggle\n *\n * @slot default - This is a default/unnamed slot\n *\n * @cssproperty --mdc-statictoggle-width - Width of the toggle\n * @cssproperty --mdc-statictoggle-height - Height of the toggle\n * @cssproperty --mdc-statictoggle-width-compact - Width of the toggle when it's size is compact\n * @cssproperty --mdc-statictoggle-height-compact - Height of the toggle when it's size is compact\n * @cssproperty --mdc-statictoggle-border-radius - Border radius of the toggle\n * @cssproperty --mdc-statictoggle-border-radius-compact - Border radius of the toggle when it's size is compact\n * @cssproperty --mdc-statictoggle-border - Border of the toggle\n * @cssproperty --mdc-statictoggle-inactive-rest-color - Background color of the inactive toggle in rest state\n * @cssproperty --mdc-statictoggle-inactive-disabled-color - Background color of the inactive toggle in disabled state\n * @cssproperty --mdc-statictoggle-active-rest-color - Background color of the active toggle in rest state\n * @cssproperty --mdc-statictoggle-active-disabled-color - Background color of the active toggle in disabled state\n * @cssproperty --mdc-statictoggle-icon-color-normal - Color of the icon in normal state\n * @cssproperty --mdc-statictoggle-icon-color-disabled - Color of the icon in disabled state\n * @cssproperty --mdc-statictoggle-icon-background-color-normal - Background color of the icon in normal state\n * @cssproperty --mdc-statictoggle-icon-background-color-disabled - Background color of the icon in disabled state\n */",
+          "customElement": true
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "default",
+          "declaration": {
+            "name": "StaticToggle",
+            "module": "components/statictoggle/statictoggle.component.js"
+          }
+        }
+      ]
+    },
     {
       "kind": "javascript-module",
       "path": "components/stepperitem/stepperitem.component.js",
@@ -41036,6 +41036,342 @@
         }
       ]
     },
+    {
+      "kind": "javascript-module",
+      "path": "components/typewriter/typewriter.component.js",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "Typewriter component that creates a typewriter effect on text content.\nIt uses the Text component internally, adding a progressive typing effect.\n\nThe `type` attribute allows changing the text style (passed to the internal Text component).\nThe `tagname` attribute allows changing the tag name of the text element (passed to the internal Text component).\nThe default tag name is `p`.\n\nThe `speed` attribute controls typing speed in milliseconds per character:\n- 'very-slow' = 240ms per character\n- 'slow' = 120ms per character\n- 'normal' = 60ms per character (default)\n- 'fast' = 20ms per character\n- 'very-fast' = 1ms per character\n- Or any numeric string representing milliseconds\n\nAdvanced features:\n- Dynamic speed adjustment during typing\n- Chunked text addition via addTextChunk() method\n- Instant text addition via addInstantTextChunk() method or instant parameter\n- Mixed instant and animated chunks in queue\n- Continues typing in background tabs\n- Performance optimized for large text\n- maxQueueSize to limit memory usage from excessive queuing\n- event handling for typing completion and content changes\n\nThe component includes accessibility features:\n- Screen readers announce the complete text, not character by character\n- Uses aria-live=\"polite\" for dynamic content updates\n- Sets aria-busy during typing animation",
+          "name": "Typewriter",
+          "cssParts": [
+            {
+              "description": "Container for the text element",
+              "name": "container"
+            },
+            {
+              "description": "The text element (forwarded to mdc-text)",
+              "name": "text"
+            }
+          ],
+          "slots": [
+            {
+              "description": "Default slot for text content",
+              "name": ""
+            }
+          ],
+          "members": [
+            {
+              "kind": "field",
+              "name": "type",
+              "type": {
+                "text": "TextType"
+              },
+              "privacy": "public",
+              "description": "Specifies the text style to be applied to the internal text component.\nUses the same types as the Text component.",
+              "default": "body-large-regular",
+              "attribute": "type",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "tagname",
+              "type": {
+                "text": "TagName | 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 internal text element.\n\nAcceptable values include all valid tag names from the Text component.",
+              "attribute": "tagname",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "speed",
+              "type": {
+                "text": "TypewriterSpeed"
+              },
+              "privacy": "public",
+              "description": "Speed of the typewriter effect in milliseconds per character.\nCan be a string preset or a numeric string in milliseconds.\n- 'very-slow' = 240ms per character\n- 'slow' = 120ms per character\n- 'normal' = 60ms per character (default)\n- 'fast' = 20ms per character\n- 'very-fast' = 1ms per character\n- Or any numeric string representing milliseconds (e.g., '100')",
+              "default": "'normal' (60ms per character)",
+              "attribute": "speed",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "maxQueueSize",
+              "type": {
+                "text": "number"
+              },
+              "privacy": "public",
+              "description": "Maximum number of text chunks that can be queued before oldest chunks are dropped.\nSet to prevent memory accumulation from excessive queuing.",
+              "default": "Number.MAX_SAFE_INTEGER (effectively unlimited)",
+              "attribute": "max-queue-size",
+              "reflects": true
+            },
+            {
+              "kind": "method",
+              "name": "createTimeout",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "number"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "callback",
+                  "type": {
+                    "text": "() => void"
+                  }
+                },
+                {
+                  "name": "delay",
+                  "type": {
+                    "text": "number"
+                  }
+                }
+              ],
+              "description": "Helper to create tracked setTimeout that will be cleaned up on disconnect"
+            },
+            {
+              "kind": "method",
+              "name": "clearAllTimeouts",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "description": "Clear all pending timeouts"
+            },
+            {
+              "kind": "method",
+              "name": "clearQueue",
+              "privacy": "public",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "description": "Clears the text chunk queue and stops processing\nUseful for resetting the component state"
+            },
+            {
+              "kind": "method",
+              "name": "addTextChunk",
+              "privacy": "public",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "text",
+                  "type": {
+                    "text": "string"
+                  },
+                  "description": "The text to add"
+                },
+                {
+                  "name": "speed",
+                  "optional": true,
+                  "type": {
+                    "text": "TypewriterSpeed"
+                  },
+                  "description": "Optional speed override for this chunk"
+                },
+                {
+                  "name": "instant",
+                  "optional": true,
+                  "type": {
+                    "text": "boolean"
+                  },
+                  "description": "If true, text appears instantly without animation"
+                }
+              ],
+              "description": "Adds a chunk of text to be typed out, optionally with a different speed"
+            },
+            {
+              "kind": "method",
+              "name": "addInstantTextChunk",
+              "privacy": "public",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "text",
+                  "type": {
+                    "text": "string"
+                  },
+                  "description": "The text to add instantly"
+                }
+              ],
+              "description": "Adds a chunk of text instantly without typing animation"
+            },
+            {
+              "kind": "method",
+              "name": "processChunkQueue",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "description": "Processes all chunks in the queue"
+            },
+            {
+              "kind": "method",
+              "name": "processNextChunk",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "description": "Processes the next chunk in the queue"
+            },
+            {
+              "kind": "method",
+              "name": "getTypingDelayMs",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "number"
+                }
+              },
+              "description": "Gets the typing delay in milliseconds per character"
+            },
+            {
+              "kind": "method",
+              "name": "captureAndProcessContent",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "description": "Captures slot content and starts typewriter animation"
+            },
+            {
+              "kind": "method",
+              "name": "startTypingAnimation",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "onComplete",
+                  "optional": true,
+                  "type": {
+                    "text": "() => void"
+                  }
+                }
+              ],
+              "description": "Starts the typewriter animation"
+            },
+            {
+              "kind": "method",
+              "name": "clearTypingAnimation",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "description": "Clears the typing animation timeout"
+            },
+            {
+              "kind": "method",
+              "name": "handleSlotChange",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "description": "Handler for slotchange event"
+            }
+          ],
+          "events": [
+            {
+              "type": {
+                "text": "CustomEvent"
+              }
+            },
+            {
+              "description": "(React: onTypingComplete) Fired when the typewriter finishes typing all content. Detail: \\{ finalContent: string \\}",
+              "name": "typing-complete",
+              "reactName": "onTypingComplete"
+            },
+            {
+              "description": "(React: onChange) Fired when the content of the typewriter changes. Detail: \\{ content: string, isTyping: boolean \\}",
+              "name": "change",
+              "reactName": "onChange"
+            }
+          ],
+          "attributes": [
+            {
+              "name": "type",
+              "type": {
+                "text": "TextType"
+              },
+              "description": "Specifies the text style to be applied to the internal text component.\nUses the same types as the Text component.",
+              "default": "body-large-regular",
+              "fieldName": "type"
+            },
+            {
+              "name": "tagname",
+              "type": {
+                "text": "TagName | 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 internal text element.\n\nAcceptable values include all valid tag names from the Text component.",
+              "fieldName": "tagname"
+            },
+            {
+              "name": "speed",
+              "type": {
+                "text": "TypewriterSpeed"
+              },
+              "description": "Speed of the typewriter effect in milliseconds per character.\nCan be a string preset or a numeric string in milliseconds.\n- 'very-slow' = 240ms per character\n- 'slow' = 120ms per character\n- 'normal' = 60ms per character (default)\n- 'fast' = 20ms per character\n- 'very-fast' = 1ms per character\n- Or any numeric string representing milliseconds (e.g., '100')",
+              "default": "'normal' (60ms per character)",
+              "fieldName": "speed"
+            },
+            {
+              "name": "max-queue-size",
+              "type": {
+                "text": "number"
+              },
+              "description": "Maximum number of text chunks that can be queued before oldest chunks are dropped.\nSet to prevent memory accumulation from excessive queuing.",
+              "default": "Number.MAX_SAFE_INTEGER (effectively unlimited)",
+              "fieldName": "maxQueueSize"
+            }
+          ],
+          "superclass": {
+            "name": "Component",
+            "module": "/src/models"
+          },
+          "tagName": "mdc-typewriter",
+          "jsDoc": "/**\n * Typewriter component that creates a typewriter effect on text content.\n * It uses the Text component internally, adding a progressive typing effect.\n *\n * The `type` attribute allows changing the text style (passed to the internal Text component).\n * The `tagname` attribute allows changing the tag name of the text element (passed to the internal Text component).\n * The default tag name is `p`.\n *\n * The `speed` attribute controls typing speed in milliseconds per character:\n * - 'very-slow' = 240ms per character\n * - 'slow' = 120ms per character\n * - 'normal' = 60ms per character (default)\n * - 'fast' = 20ms per character\n * - 'very-fast' = 1ms per character\n * - Or any numeric string representing milliseconds\n *\n * Advanced features:\n * - Dynamic speed adjustment during typing\n * - Chunked text addition via addTextChunk() method\n * - Instant text addition via addInstantTextChunk() method or instant parameter\n * - Mixed instant and animated chunks in queue\n * - Continues typing in background tabs\n * - Performance optimized for large text\n * - maxQueueSize to limit memory usage from excessive queuing\n * - event handling for typing completion and content changes\n *\n * The component includes accessibility features:\n * - Screen readers announce the complete text, not character by character\n * - Uses aria-live=\"polite\" for dynamic content updates\n * - Sets aria-busy during typing animation\n *\n * @dependency mdc-text\n *\n * @tagname mdc-typewriter\n * @slot - Default slot for text content\n *\n * @csspart container - Container for the text element\n * @csspart text - The text element (forwarded to mdc-text)\n *\n * @event typing-complete - (React: onTypingComplete) Fired when the typewriter finishes typing all content.\n *   Detail: \\{ finalContent: string \\}\n * @event change - (React: onChange) Fired when the content of the typewriter changes.\n *   Detail: \\{ content: string, isTyping: boolean \\}\n */",
+          "customElement": true
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "default",
+          "declaration": {
+            "name": "Typewriter",
+            "module": "components/typewriter/typewriter.component.js"
+          }
+        }
+      ]
+    },
     {
       "kind": "javascript-module",
       "path": "components/virtualizedlist/virtualizedlist.component.js",