@momentum-design/components 0.106.2 → 0.106.3

package/dist/custom-elements.json

@@ -1554,6 +1554,67 @@
         }
       ]
     },
+    {
+      "kind": "javascript-module",
+      "path": "components/appheader/appheader.component.js",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "The `mdc-appheader` component provides a structured and accessible app header layout.\nIt consists of three primary sections: leading, center, and trailing.\n\n- The **leading section** typically holds a **brand logo**, **brand name** or **menu icon**.\n- The **center section** can contain a **search bar**, **icons** or action controls.\n- The **trailing section** generally includes a **profile avatar**, **additional icons** or **action controls**.",
+          "name": "Appheader",
+          "cssParts": [
+            {
+              "description": "The main container for styling the header.",
+              "name": "container"
+            },
+            {
+              "description": "The leading section of the header.",
+              "name": "leading-section"
+            },
+            {
+              "description": "The center section of the header.",
+              "name": "center-section"
+            },
+            {
+              "description": "The trailing section of the header.",
+              "name": "trailing-section"
+            }
+          ],
+          "slots": [
+            {
+              "description": "Slot for the leading section (e.g., brand logo, brand name).",
+              "name": "leading"
+            },
+            {
+              "description": "Slot for the center section (e.g., search bar, icons).",
+              "name": "center"
+            },
+            {
+              "description": "Slot for the trailing section (e.g., profile avatar, icons).",
+              "name": "trailing"
+            }
+          ],
+          "members": [],
+          "superclass": {
+            "name": "Component",
+            "module": "/src/models"
+          },
+          "tagName": "mdc-appheader",
+          "jsDoc": "/**\n * The `mdc-appheader` component provides a structured and accessible app header layout.\n * It consists of three primary sections: leading, center, and trailing.\n *\n * - The **leading section** typically holds a **brand logo**, **brand name** or **menu icon**.\n * - The **center section** can contain a **search bar**, **icons** or action controls.\n * - The **trailing section** generally includes a **profile avatar**, **additional icons** or **action controls**.\n *\n * @tagname mdc-appheader\n *\n * @slot leading - Slot for the leading section (e.g., brand logo, brand name).\n * @slot center - Slot for the center section (e.g., search bar, icons).\n * @slot trailing - Slot for the trailing section (e.g., profile avatar, icons).\n *\n * @csspart container - The main container for styling the header.\n * @csspart leading-section - The leading section of the header.\n * @csspart center-section - The center section of the header.\n * @csspart trailing-section - The trailing section of the header.\n */",
+          "customElement": true
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "default",
+          "declaration": {
+            "name": "Appheader",
+            "module": "components/appheader/appheader.component.js"
+          }
+        }
+      ]
+    },
     {
       "kind": "javascript-module",
       "path": "components/animation/animation.component.js",
@@ -1766,67 +1827,6 @@
         }
       ]
     },
-    {
-      "kind": "javascript-module",
-      "path": "components/appheader/appheader.component.js",
-      "declarations": [
-        {
-          "kind": "class",
-          "description": "The `mdc-appheader` component provides a structured and accessible app header layout.\nIt consists of three primary sections: leading, center, and trailing.\n\n- The **leading section** typically holds a **brand logo**, **brand name** or **menu icon**.\n- The **center section** can contain a **search bar**, **icons** or action controls.\n- The **trailing section** generally includes a **profile avatar**, **additional icons** or **action controls**.",
-          "name": "Appheader",
-          "cssParts": [
-            {
-              "description": "The main container for styling the header.",
-              "name": "container"
-            },
-            {
-              "description": "The leading section of the header.",
-              "name": "leading-section"
-            },
-            {
-              "description": "The center section of the header.",
-              "name": "center-section"
-            },
-            {
-              "description": "The trailing section of the header.",
-              "name": "trailing-section"
-            }
-          ],
-          "slots": [
-            {
-              "description": "Slot for the leading section (e.g., brand logo, brand name).",
-              "name": "leading"
-            },
-            {
-              "description": "Slot for the center section (e.g., search bar, icons).",
-              "name": "center"
-            },
-            {
-              "description": "Slot for the trailing section (e.g., profile avatar, icons).",
-              "name": "trailing"
-            }
-          ],
-          "members": [],
-          "superclass": {
-            "name": "Component",
-            "module": "/src/models"
-          },
-          "tagName": "mdc-appheader",
-          "jsDoc": "/**\n * The `mdc-appheader` component provides a structured and accessible app header layout.\n * It consists of three primary sections: leading, center, and trailing.\n *\n * - The **leading section** typically holds a **brand logo**, **brand name** or **menu icon**.\n * - The **center section** can contain a **search bar**, **icons** or action controls.\n * - The **trailing section** generally includes a **profile avatar**, **additional icons** or **action controls**.\n *\n * @tagname mdc-appheader\n *\n * @slot leading - Slot for the leading section (e.g., brand logo, brand name).\n * @slot center - Slot for the center section (e.g., search bar, icons).\n * @slot trailing - Slot for the trailing section (e.g., profile avatar, icons).\n *\n * @csspart container - The main container for styling the header.\n * @csspart leading-section - The leading section of the header.\n * @csspart center-section - The center section of the header.\n * @csspart trailing-section - The trailing section of the header.\n */",
-          "customElement": true
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "default",
-          "declaration": {
-            "name": "Appheader",
-            "module": "components/appheader/appheader.component.js"
-          }
-        }
-      ]
-    },
     {
       "kind": "javascript-module",
       "path": "components/avatar/avatar.component.js",
@@ -30170,19 +30170,191 @@
     },
     {
       "kind": "javascript-module",
-      "path": "components/radiogroup/radiogroup.component.js",
+      "path": "components/radio/radio.component.js",
       "declarations": [
         {
           "kind": "class",
-          "description": "`mdc-radiogroup` - This is the wrapper component for radio buttons which are grouped together.\nIt can have a header text and a description. It enables users to select a single option from a set of options.\nIt is often used in forms, settings, and selection in lists. It automatically group the radio buttons inside it.",
-          "name": "RadioGroup",
+          "description": "Radio allow users to select single options from a list or turn an item/feature on or off.\nThese are often used in forms, settings, and selection in lists.\n\nA radio component contains an optional label, optional info icon and an optional helper text.",
+          "name": "Radio",
           "cssProperties": [
             {
-              "description": "color of the description text",
-              "name": "--mdc-radiogroup-description-text-normal"
+              "description": "color of the label when disabled",
+              "name": "--mdc-radio-text-disabled-color"
+            },
+            {
+              "description": "color of the radio button when inactive and hovered",
+              "name": "--mdc-radio-control-inactive-hover"
+            },
+            {
+              "description": "color of the radio button when inactive and pressed",
+              "name": "--mdc-radio-control-inactive-pressed-color"
+            },
+            {
+              "description": "color of the radio button when active and hovered",
+              "name": "--mdc-radio-control-active-hover-color"
+            },
+            {
+              "description": "color of the radio button when active and pressed",
+              "name": "--mdc-radio-control-active-pressed-color"
+            },
+            {
+              "description": "color of the radio button when disabled",
+              "name": "--mdc-radio-disabled-border-color"
+            },
+            {
+              "description": "color of the radio button when active and disabled",
+              "name": "--mdc-radio-control-active-disabled-background"
+            },
+            {
+              "description": "color of the radio button when inactive and disabled",
+              "name": "--mdc-radio-control-inactive-disabled-background"
             }
           ],
           "members": [
+            {
+              "kind": "field",
+              "name": "checked",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Determines whether the radio is selected or unselected.",
+              "attribute": "checked",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "readonly",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Determines whether the radio is read-only.",
+              "attribute": "readonly",
+              "reflects": true
+            },
+            {
+              "kind": "method",
+              "name": "getAllRadiosWithinSameGroup",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "Radio[]"
+                }
+              },
+              "description": "Returns all radios within the same group (name)."
+            },
+            {
+              "kind": "method",
+              "name": "setGroupValidity",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "radios",
+                  "type": {
+                    "text": "Radio[]"
+                  },
+                  "description": "Array of radios of the same group"
+                },
+                {
+                  "name": "isValid",
+                  "type": {
+                    "text": "boolean"
+                  },
+                  "description": "Boolean value to set the validity of the group"
+                }
+              ],
+              "description": "Sets the validity of the group of radios."
+            },
+            {
+              "kind": "method",
+              "name": "setActualFormValue",
+              "privacy": "private",
+              "description": "Updates the form value to reflect the current state of the radio.\nIf checked, the value is set to the user-provided value.\nIf unchecked, the value is set to null."
+            },
+            {
+              "kind": "method",
+              "name": "handleChange",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "description": "Handles the change event on the radio element.\nThis will toggle the state of the radio element.\nDispatches the change event."
+            },
+            {
+              "kind": "method",
+              "name": "updateRadio",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "enabledRadios",
+                  "type": {
+                    "text": "Radio[]"
+                  },
+                  "description": "An array of enabled radio buttons within the same group."
+                },
+                {
+                  "name": "index",
+                  "type": {
+                    "text": "number"
+                  },
+                  "description": "The index of the radio button to be updated within the enabled radios array."
+                }
+              ],
+              "description": "Updates the state of the radio button at the specified index within the enabled radios.\nFocuses the radio button and triggers the change event if the radio button is not read-only."
+            },
+            {
+              "kind": "method",
+              "name": "handleKeyDown",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "event",
+                  "type": {
+                    "text": "KeyboardEvent"
+                  }
+                }
+              ],
+              "description": "Handles the keydown event (Arrow Up/Down/Left/Right) on the radio element."
+            },
+            {
+              "kind": "method",
+              "name": "updateTabIndex",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "description": "Update tab index for all radios in the same group (name)\nIf any radio group is checked, it will have a tab index of 0\nIf no radio group is checked, the first enabled radio will have a tab index of 0"
+            },
+            {
+              "kind": "field",
+              "name": "renderLabelAndHelperText",
+              "privacy": "private"
+            },
+            {
+              "kind": "field",
+              "name": "autoFocusOnMount",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "This property indicates whether the element should receive focus automatically when it is mounted.\n\nIt will not focus if the element is re-attached to the DOM after being removed.",
+              "attribute": "auto-focus-on-mount",
+              "reflects": true,
+              "inheritedFrom": {
+                "name": "AutoFocusOnMountMixin",
+                "module": "utils/mixins/AutoFocusOnMountMixin.js"
+              }
+            },
             {
               "kind": "field",
               "name": "name",
@@ -30190,8 +30362,98 @@
                 "text": "string"
               },
               "default": "''",
-              "description": "Name of the radio group.\nThey are used to group elements in a form together.",
-              "attribute": "name"
+              "description": "Indicates the name of the component group.\nThey are used to group elements in a form together.",
+              "attribute": "name",
+              "reflects": true,
+              "inheritedFrom": {
+                "name": "FormInternalsMixin",
+                "module": "utils/mixins/FormInternalsMixin.js"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "value",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "description": "Indicates the value of the component group (ex: input, checkbox, radio, select etc...)",
+              "attribute": "value",
+              "reflects": true,
+              "inheritedFrom": {
+                "name": "FormInternalsMixin",
+                "module": "utils/mixins/FormInternalsMixin.js"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "validationMessage",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "Custom validation message that will override the default message and displayed when the input is invalid.\n\nTo display custom validation messages, you must listen for input events (or other relevant events)\non your component and update the `validationMessage` property with the desired message string.\nUpdating this property will ensure that new validation messages are shown to the user.\n- The `validationMessage` property overrides the default browser validation message when set.\n- Consumers are responsible for updating `validationMessage` in response to input or validation state changes.",
+              "attribute": "validation-message",
+              "reflects": true,
+              "inheritedFrom": {
+                "name": "FormInternalsMixin",
+                "module": "utils/mixins/FormInternalsMixin.js"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "validity",
+              "type": {
+                "text": "ValidityState"
+              },
+              "readonly": true,
+              "inheritedFrom": {
+                "name": "FormInternalsMixin",
+                "module": "utils/mixins/FormInternalsMixin.js"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "willValidate",
+              "readonly": true,
+              "inheritedFrom": {
+                "name": "FormInternalsMixin",
+                "module": "utils/mixins/FormInternalsMixin.js"
+              }
+            },
+            {
+              "kind": "method",
+              "name": "setValidity",
+              "description": "Sets the validity of the input field based on the input field's validity.",
+              "return": {
+                "type": {
+                  "text": ""
+                }
+              },
+              "inheritedFrom": {
+                "name": "FormInternalsMixin",
+                "module": "utils/mixins/FormInternalsMixin.js"
+              }
+            },
+            {
+              "kind": "method",
+              "name": "checkValidity",
+              "return": {
+                "type": {
+                  "text": "boolean"
+                }
+              },
+              "inheritedFrom": {
+                "name": "FormInternalsMixin",
+                "module": "utils/mixins/FormInternalsMixin.js"
+              }
+            },
+            {
+              "kind": "method",
+              "name": "reportValidity",
+              "inheritedFrom": {
+                "name": "FormInternalsMixin",
+                "module": "utils/mixins/FormInternalsMixin.js"
+              }
             },
             {
               "kind": "field",
@@ -30399,15 +30661,90 @@
               }
             }
           ],
+          "events": [
+            {
+              "name": "change",
+              "type": {
+                "text": "Event"
+              },
+              "description": "(React: onChange) Event that gets dispatched when the radio state changes.",
+              "reactName": "onChange"
+            },
+            {
+              "description": "(React: onFocus) Event that gets dispatched when the radio receives focus.",
+              "name": "focus",
+              "reactName": "onFocus"
+            }
+          ],
           "attributes": [
+            {
+              "name": "checked",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Determines whether the radio is selected or unselected.",
+              "fieldName": "checked"
+            },
+            {
+              "name": "readonly",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Determines whether the radio is read-only.",
+              "fieldName": "readonly"
+            },
+            {
+              "name": "auto-focus-on-mount",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "This property indicates whether the element should receive focus automatically when it is mounted.\n\nIt will not focus if the element is re-attached to the DOM after being removed.",
+              "fieldName": "autoFocusOnMount",
+              "inheritedFrom": {
+                "name": "AutoFocusOnMountMixin",
+                "module": "src/utils/mixins/AutoFocusOnMountMixin.ts"
+              }
+            },
             {
               "name": "name",
               "type": {
                 "text": "string"
               },
               "default": "''",
-              "description": "Name of the radio group.\nThey are used to group elements in a form together.",
-              "fieldName": "name"
+              "description": "Indicates the name of the component group.\nThey are used to group elements in a form together.",
+              "fieldName": "name",
+              "inheritedFrom": {
+                "name": "FormInternalsMixin",
+                "module": "src/utils/mixins/FormInternalsMixin.ts"
+              }
+            },
+            {
+              "name": "value",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "description": "Indicates the value of the component group (ex: input, checkbox, radio, select etc...)",
+              "fieldName": "value",
+              "inheritedFrom": {
+                "name": "FormInternalsMixin",
+                "module": "src/utils/mixins/FormInternalsMixin.ts"
+              }
+            },
+            {
+              "name": "validation-message",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "Custom validation message that will override the default message and displayed when the input is invalid.\n\nTo display custom validation messages, you must listen for input events (or other relevant events)\non your component and update the `validationMessage` property with the desired message string.\nUpdating this property will ensure that new validation messages are shown to the user.\n- The `validationMessage` property overrides the default browser validation message when set.\n- Consumers are responsible for updating `validationMessage` in response to input or validation state changes.",
+              "fieldName": "validationMessage",
+              "inheritedFrom": {
+                "name": "FormInternalsMixin",
+                "module": "src/utils/mixins/FormInternalsMixin.ts"
+              }
             },
             {
               "name": "data-aria-label",
@@ -30522,23 +30859,27 @@
               }
             }
           ],
-          "superclass": {
-            "name": "FormfieldGroup",
-            "module": "/src/components/formfieldgroup"
-          },
-          "tagName": "mdc-radiogroup",
-          "jsDoc": "/**\n * `mdc-radiogroup` - This is the wrapper component for radio buttons which are grouped together.\n * It can have a header text and a description. It enables users to select a single option from a set of options.\n * It is often used in forms, settings, and selection in lists. It automatically group the radio buttons inside it.\n *\n * @tagname mdc-radiogroup\n *\n * @cssproperty --mdc-radiogroup-description-text-normal - color of the description text\n *\n */",
-          "customElement": true,
-          "slots": [
+          "mixins": [
             {
-              "description": "This is a default slot for checkbox or toggle components.",
-              "name": "default",
-              "inheritedFrom": {
-                "name": "FormfieldGroup",
-                "module": "src/components/formfieldgroup/formfieldgroup.component.ts"
-              }
+              "name": "AutoFocusOnMountMixin",
+              "module": "/src/utils/mixins/AutoFocusOnMountMixin"
+            },
+            {
+              "name": "FormInternalsMixin",
+              "module": "/src/utils/mixins/FormInternalsMixin"
+            },
+            {
+              "name": "DataAriaLabelMixin",
+              "module": "/src/utils/mixins/DataAriaLabelMixin"
             }
-          ]
+          ],
+          "superclass": {
+            "name": "FormfieldWrapper",
+            "module": "/src/components/formfieldwrapper/formfieldwrapper.component"
+          },
+          "tagName": "mdc-radio",
+          "jsDoc": "/**\n * Radio allow users to select single options from a list or turn an item/feature on or off.\n * These are often used in forms, settings, and selection in lists.\n *\n * A radio component contains an optional label, optional info icon and an optional helper text.\n *\n * @dependency mdc-button\n * @dependency mdc-icon\n * @dependency mdc-text\n * @dependency mdc-staticradio\n * @dependency mdc-toggletip\n *\n * @tagname mdc-radio\n *\n * @event change - (React: onChange) Event that gets dispatched when the radio state changes.\n * @event focus - (React: onFocus) Event that gets dispatched when the radio receives focus.\n *\n * @cssproperty --mdc-radio-text-disabled-color - color of the label when disabled\n * @cssproperty --mdc-radio-control-inactive-hover - color of the radio button when inactive and hovered\n * @cssproperty --mdc-radio-control-inactive-pressed-color - color of the radio button when inactive and pressed\n * @cssproperty --mdc-radio-control-active-hover-color - color of the radio button when active and hovered\n * @cssproperty --mdc-radio-control-active-pressed-color - color of the radio button when active and pressed\n * @cssproperty --mdc-radio-disabled-border-color - color of the radio button when disabled\n * @cssproperty --mdc-radio-control-active-disabled-background - color of the radio button when active and disabled\n * @cssproperty --mdc-radio-control-inactive-disabled-background - color of the radio button when inactive and disabled\n *\n */",
+          "customElement": true
         }
       ],
       "exports": [
@@ -30546,199 +30887,27 @@
           "kind": "js",
           "name": "default",
           "declaration": {
-            "name": "RadioGroup",
-            "module": "components/radiogroup/radiogroup.component.js"
+            "name": "Radio",
+            "module": "components/radio/radio.component.js"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "components/radio/radio.component.js",
+      "path": "components/radiogroup/radiogroup.component.js",
       "declarations": [
         {
           "kind": "class",
-          "description": "Radio allow users to select single options from a list or turn an item/feature on or off.\nThese are often used in forms, settings, and selection in lists.\n\nA radio component contains an optional label, optional info icon and an optional helper text.",
-          "name": "Radio",
+          "description": "`mdc-radiogroup` - This is the wrapper component for radio buttons which are grouped together.\nIt can have a header text and a description. It enables users to select a single option from a set of options.\nIt is often used in forms, settings, and selection in lists. It automatically group the radio buttons inside it.",
+          "name": "RadioGroup",
           "cssProperties": [
             {
-              "description": "color of the label when disabled",
-              "name": "--mdc-radio-text-disabled-color"
-            },
-            {
-              "description": "color of the radio button when inactive and hovered",
-              "name": "--mdc-radio-control-inactive-hover"
-            },
-            {
-              "description": "color of the radio button when inactive and pressed",
-              "name": "--mdc-radio-control-inactive-pressed-color"
-            },
-            {
-              "description": "color of the radio button when active and hovered",
-              "name": "--mdc-radio-control-active-hover-color"
-            },
-            {
-              "description": "color of the radio button when active and pressed",
-              "name": "--mdc-radio-control-active-pressed-color"
-            },
-            {
-              "description": "color of the radio button when disabled",
-              "name": "--mdc-radio-disabled-border-color"
-            },
-            {
-              "description": "color of the radio button when active and disabled",
-              "name": "--mdc-radio-control-active-disabled-background"
-            },
-            {
-              "description": "color of the radio button when inactive and disabled",
-              "name": "--mdc-radio-control-inactive-disabled-background"
+              "description": "color of the description text",
+              "name": "--mdc-radiogroup-description-text-normal"
             }
           ],
           "members": [
-            {
-              "kind": "field",
-              "name": "checked",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "Determines whether the radio is selected or unselected.",
-              "attribute": "checked",
-              "reflects": true
-            },
-            {
-              "kind": "field",
-              "name": "readonly",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "Determines whether the radio is read-only.",
-              "attribute": "readonly",
-              "reflects": true
-            },
-            {
-              "kind": "method",
-              "name": "getAllRadiosWithinSameGroup",
-              "privacy": "private",
-              "return": {
-                "type": {
-                  "text": "Radio[]"
-                }
-              },
-              "description": "Returns all radios within the same group (name)."
-            },
-            {
-              "kind": "method",
-              "name": "setGroupValidity",
-              "privacy": "private",
-              "parameters": [
-                {
-                  "name": "radios",
-                  "type": {
-                    "text": "Radio[]"
-                  },
-                  "description": "Array of radios of the same group"
-                },
-                {
-                  "name": "isValid",
-                  "type": {
-                    "text": "boolean"
-                  },
-                  "description": "Boolean value to set the validity of the group"
-                }
-              ],
-              "description": "Sets the validity of the group of radios."
-            },
-            {
-              "kind": "method",
-              "name": "setActualFormValue",
-              "privacy": "private",
-              "description": "Updates the form value to reflect the current state of the radio.\nIf checked, the value is set to the user-provided value.\nIf unchecked, the value is set to null."
-            },
-            {
-              "kind": "method",
-              "name": "handleChange",
-              "privacy": "private",
-              "return": {
-                "type": {
-                  "text": "void"
-                }
-              },
-              "description": "Handles the change event on the radio element.\nThis will toggle the state of the radio element.\nDispatches the change event."
-            },
-            {
-              "kind": "method",
-              "name": "updateRadio",
-              "privacy": "private",
-              "parameters": [
-                {
-                  "name": "enabledRadios",
-                  "type": {
-                    "text": "Radio[]"
-                  },
-                  "description": "An array of enabled radio buttons within the same group."
-                },
-                {
-                  "name": "index",
-                  "type": {
-                    "text": "number"
-                  },
-                  "description": "The index of the radio button to be updated within the enabled radios array."
-                }
-              ],
-              "description": "Updates the state of the radio button at the specified index within the enabled radios.\nFocuses the radio button and triggers the change event if the radio button is not read-only."
-            },
-            {
-              "kind": "method",
-              "name": "handleKeyDown",
-              "privacy": "private",
-              "return": {
-                "type": {
-                  "text": "void"
-                }
-              },
-              "parameters": [
-                {
-                  "name": "event",
-                  "type": {
-                    "text": "KeyboardEvent"
-                  }
-                }
-              ],
-              "description": "Handles the keydown event (Arrow Up/Down/Left/Right) on the radio element."
-            },
-            {
-              "kind": "method",
-              "name": "updateTabIndex",
-              "privacy": "private",
-              "return": {
-                "type": {
-                  "text": "void"
-                }
-              },
-              "description": "Update tab index for all radios in the same group (name)\nIf any radio group is checked, it will have a tab index of 0\nIf no radio group is checked, the first enabled radio will have a tab index of 0"
-            },
-            {
-              "kind": "field",
-              "name": "renderLabelAndHelperText",
-              "privacy": "private"
-            },
-            {
-              "kind": "field",
-              "name": "autoFocusOnMount",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "This property indicates whether the element should receive focus automatically when it is mounted.\n\nIt will not focus if the element is re-attached to the DOM after being removed.",
-              "attribute": "auto-focus-on-mount",
-              "reflects": true,
-              "inheritedFrom": {
-                "name": "AutoFocusOnMountMixin",
-                "module": "utils/mixins/AutoFocusOnMountMixin.js"
-              }
-            },
             {
               "kind": "field",
               "name": "name",
@@ -30746,98 +30915,8 @@
                 "text": "string"
               },
               "default": "''",
-              "description": "Indicates the name of the component group.\nThey are used to group elements in a form together.",
-              "attribute": "name",
-              "reflects": true,
-              "inheritedFrom": {
-                "name": "FormInternalsMixin",
-                "module": "utils/mixins/FormInternalsMixin.js"
-              }
-            },
-            {
-              "kind": "field",
-              "name": "value",
-              "type": {
-                "text": "string"
-              },
-              "default": "''",
-              "description": "Indicates the value of the component group (ex: input, checkbox, radio, select etc...)",
-              "attribute": "value",
-              "reflects": true,
-              "inheritedFrom": {
-                "name": "FormInternalsMixin",
-                "module": "utils/mixins/FormInternalsMixin.js"
-              }
-            },
-            {
-              "kind": "field",
-              "name": "validationMessage",
-              "type": {
-                "text": "string | undefined"
-              },
-              "description": "Custom validation message that will override the default message and displayed when the input is invalid.\n\nTo display custom validation messages, you must listen for input events (or other relevant events)\non your component and update the `validationMessage` property with the desired message string.\nUpdating this property will ensure that new validation messages are shown to the user.\n- The `validationMessage` property overrides the default browser validation message when set.\n- Consumers are responsible for updating `validationMessage` in response to input or validation state changes.",
-              "attribute": "validation-message",
-              "reflects": true,
-              "inheritedFrom": {
-                "name": "FormInternalsMixin",
-                "module": "utils/mixins/FormInternalsMixin.js"
-              }
-            },
-            {
-              "kind": "field",
-              "name": "validity",
-              "type": {
-                "text": "ValidityState"
-              },
-              "readonly": true,
-              "inheritedFrom": {
-                "name": "FormInternalsMixin",
-                "module": "utils/mixins/FormInternalsMixin.js"
-              }
-            },
-            {
-              "kind": "field",
-              "name": "willValidate",
-              "readonly": true,
-              "inheritedFrom": {
-                "name": "FormInternalsMixin",
-                "module": "utils/mixins/FormInternalsMixin.js"
-              }
-            },
-            {
-              "kind": "method",
-              "name": "setValidity",
-              "description": "Sets the validity of the input field based on the input field's validity.",
-              "return": {
-                "type": {
-                  "text": ""
-                }
-              },
-              "inheritedFrom": {
-                "name": "FormInternalsMixin",
-                "module": "utils/mixins/FormInternalsMixin.js"
-              }
-            },
-            {
-              "kind": "method",
-              "name": "checkValidity",
-              "return": {
-                "type": {
-                  "text": "boolean"
-                }
-              },
-              "inheritedFrom": {
-                "name": "FormInternalsMixin",
-                "module": "utils/mixins/FormInternalsMixin.js"
-              }
-            },
-            {
-              "kind": "method",
-              "name": "reportValidity",
-              "inheritedFrom": {
-                "name": "FormInternalsMixin",
-                "module": "utils/mixins/FormInternalsMixin.js"
-              }
+              "description": "Name of the radio group.\nThey are used to group elements in a form together.",
+              "attribute": "name"
             },
             {
               "kind": "field",
@@ -31045,90 +31124,15 @@
               }
             }
           ],
-          "events": [
-            {
-              "name": "change",
-              "type": {
-                "text": "Event"
-              },
-              "description": "(React: onChange) Event that gets dispatched when the radio state changes.",
-              "reactName": "onChange"
-            },
-            {
-              "description": "(React: onFocus) Event that gets dispatched when the radio receives focus.",
-              "name": "focus",
-              "reactName": "onFocus"
-            }
-          ],
           "attributes": [
-            {
-              "name": "checked",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "Determines whether the radio is selected or unselected.",
-              "fieldName": "checked"
-            },
-            {
-              "name": "readonly",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "Determines whether the radio is read-only.",
-              "fieldName": "readonly"
-            },
-            {
-              "name": "auto-focus-on-mount",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "This property indicates whether the element should receive focus automatically when it is mounted.\n\nIt will not focus if the element is re-attached to the DOM after being removed.",
-              "fieldName": "autoFocusOnMount",
-              "inheritedFrom": {
-                "name": "AutoFocusOnMountMixin",
-                "module": "src/utils/mixins/AutoFocusOnMountMixin.ts"
-              }
-            },
             {
               "name": "name",
               "type": {
                 "text": "string"
               },
               "default": "''",
-              "description": "Indicates the name of the component group.\nThey are used to group elements in a form together.",
-              "fieldName": "name",
-              "inheritedFrom": {
-                "name": "FormInternalsMixin",
-                "module": "src/utils/mixins/FormInternalsMixin.ts"
-              }
-            },
-            {
-              "name": "value",
-              "type": {
-                "text": "string"
-              },
-              "default": "''",
-              "description": "Indicates the value of the component group (ex: input, checkbox, radio, select etc...)",
-              "fieldName": "value",
-              "inheritedFrom": {
-                "name": "FormInternalsMixin",
-                "module": "src/utils/mixins/FormInternalsMixin.ts"
-              }
-            },
-            {
-              "name": "validation-message",
-              "type": {
-                "text": "string | undefined"
-              },
-              "description": "Custom validation message that will override the default message and displayed when the input is invalid.\n\nTo display custom validation messages, you must listen for input events (or other relevant events)\non your component and update the `validationMessage` property with the desired message string.\nUpdating this property will ensure that new validation messages are shown to the user.\n- The `validationMessage` property overrides the default browser validation message when set.\n- Consumers are responsible for updating `validationMessage` in response to input or validation state changes.",
-              "fieldName": "validationMessage",
-              "inheritedFrom": {
-                "name": "FormInternalsMixin",
-                "module": "src/utils/mixins/FormInternalsMixin.ts"
-              }
+              "description": "Name of the radio group.\nThey are used to group elements in a form together.",
+              "fieldName": "name"
             },
             {
               "name": "data-aria-label",
@@ -31243,27 +31247,23 @@
               }
             }
           ],
-          "mixins": [
-            {
-              "name": "AutoFocusOnMountMixin",
-              "module": "/src/utils/mixins/AutoFocusOnMountMixin"
-            },
-            {
-              "name": "FormInternalsMixin",
-              "module": "/src/utils/mixins/FormInternalsMixin"
-            },
-            {
-              "name": "DataAriaLabelMixin",
-              "module": "/src/utils/mixins/DataAriaLabelMixin"
-            }
-          ],
           "superclass": {
-            "name": "FormfieldWrapper",
-            "module": "/src/components/formfieldwrapper/formfieldwrapper.component"
+            "name": "FormfieldGroup",
+            "module": "/src/components/formfieldgroup"
           },
-          "tagName": "mdc-radio",
-          "jsDoc": "/**\n * Radio allow users to select single options from a list or turn an item/feature on or off.\n * These are often used in forms, settings, and selection in lists.\n *\n * A radio component contains an optional label, optional info icon and an optional helper text.\n *\n * @dependency mdc-button\n * @dependency mdc-icon\n * @dependency mdc-text\n * @dependency mdc-staticradio\n * @dependency mdc-toggletip\n *\n * @tagname mdc-radio\n *\n * @event change - (React: onChange) Event that gets dispatched when the radio state changes.\n * @event focus - (React: onFocus) Event that gets dispatched when the radio receives focus.\n *\n * @cssproperty --mdc-radio-text-disabled-color - color of the label when disabled\n * @cssproperty --mdc-radio-control-inactive-hover - color of the radio button when inactive and hovered\n * @cssproperty --mdc-radio-control-inactive-pressed-color - color of the radio button when inactive and pressed\n * @cssproperty --mdc-radio-control-active-hover-color - color of the radio button when active and hovered\n * @cssproperty --mdc-radio-control-active-pressed-color - color of the radio button when active and pressed\n * @cssproperty --mdc-radio-disabled-border-color - color of the radio button when disabled\n * @cssproperty --mdc-radio-control-active-disabled-background - color of the radio button when active and disabled\n * @cssproperty --mdc-radio-control-inactive-disabled-background - color of the radio button when inactive and disabled\n *\n */",
-          "customElement": true
+          "tagName": "mdc-radiogroup",
+          "jsDoc": "/**\n * `mdc-radiogroup` - This is the wrapper component for radio buttons which are grouped together.\n * It can have a header text and a description. It enables users to select a single option from a set of options.\n * It is often used in forms, settings, and selection in lists. It automatically group the radio buttons inside it.\n *\n * @tagname mdc-radiogroup\n *\n * @cssproperty --mdc-radiogroup-description-text-normal - color of the description text\n *\n */",
+          "customElement": true,
+          "slots": [
+            {
+              "description": "This is a default slot for checkbox or toggle components.",
+              "name": "default",
+              "inheritedFrom": {
+                "name": "FormfieldGroup",
+                "module": "src/components/formfieldgroup/formfieldgroup.component.ts"
+              }
+            }
+          ]
         }
       ],
       "exports": [
@@ -31271,8 +31271,8 @@
           "kind": "js",
           "name": "default",
           "declaration": {
-            "name": "Radio",
-            "module": "components/radio/radio.component.js"
+            "name": "RadioGroup",
+            "module": "components/radiogroup/radiogroup.component.js"
           }
         }
       ]
@@ -36653,7 +36653,7 @@
               },
               "privacy": "public",
               "description": "Specifies the text style to be applied.\n\nAcceptable values include:\n\n- 'body-small-regular'\n- 'body-small-medium'\n- 'body-small-bold'\n- 'body-midsize-regular'\n- 'body-midsize-medium'\n- 'body-midsize-bold'\n- 'body-large-regular'\n- 'body-large-medium'\n- 'body-large-bold'\n- 'body-small-regular-underline'\n- 'body-small-medium-underline'\n- 'body-midsize-regular-underline'\n- 'body-midsize-medium-underline'\n- 'body-large-regular-underline'\n- 'body-large-medium-underline'\n- 'heading-small-regular'\n- 'heading-small-medium'\n- 'heading-small-bold'\n- 'heading-midsize-regular'\n- 'heading-midsize-medium'\n- 'heading-midsize-bold'\n- 'heading-large-regular'\n- 'heading-large-medium'\n- 'heading-large-bold'\n- 'heading-xlarge-regular'\n- 'heading-xlarge-medium'\n- 'heading-xlarge-bold'\n- 'headline-small-light'\n- 'headline-small-regular'",
-              "default": "body-large-regular",
+              "default": "body-midsize-medium",
               "attribute": "type",
               "reflects": true
             },
@@ -36676,7 +36676,7 @@
                 "text": "TextType"
               },
               "description": "Specifies the text style to be applied.\n\nAcceptable values include:\n\n- 'body-small-regular'\n- 'body-small-medium'\n- 'body-small-bold'\n- 'body-midsize-regular'\n- 'body-midsize-medium'\n- 'body-midsize-bold'\n- 'body-large-regular'\n- 'body-large-medium'\n- 'body-large-bold'\n- 'body-small-regular-underline'\n- 'body-small-medium-underline'\n- 'body-midsize-regular-underline'\n- 'body-midsize-medium-underline'\n- 'body-large-regular-underline'\n- 'body-large-medium-underline'\n- 'heading-small-regular'\n- 'heading-small-medium'\n- 'heading-small-bold'\n- 'heading-midsize-regular'\n- 'heading-midsize-medium'\n- 'heading-midsize-bold'\n- 'heading-large-regular'\n- 'heading-large-medium'\n- 'heading-large-bold'\n- 'heading-xlarge-regular'\n- 'heading-xlarge-medium'\n- 'heading-xlarge-bold'\n- 'headline-small-light'\n- 'headline-small-regular'",
-              "default": "body-large-regular",
+              "default": "body-midsize-medium",
               "fieldName": "type"
             },
             {
@@ -38830,511 +38830,24 @@
     },
     {
       "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",
-      "declarations": [
-        {
-          "kind": "class",
-          "description": "`mdc-virtualizedlist` component for creating custom virtualized lists.\nIMPORTANT: This component does not create it's own list/list items.\nUse the setlistdata callback prop to update client state in order to\nPass list/listitems as a child of this component, which this will virtuailze\nThis implementation handles dynamic lists as well as fixed sized lists.\nPlease refer to [Tanstack Virtual Docs](https://tanstack.com/virtual/latest) for more in depth documentation.",
-          "name": "VirtualizedList",
-          "slots": [
-            {
-              "description": "Client side List with nested list items.",
-              "name": ""
-            }
-          ],
-          "members": [
-            {
-              "kind": "field",
-              "name": "virtualizerProps",
-              "type": {
-                "text": "VirtualizerProps"
-              },
-              "description": "Object that sets and updates the virtualizer with any relevant props.\nThere are two required object props in order to get virtualization to work properly.\ncount - The length of your list that you are virtualizing.\nAs your list grows/shrinks, this component must be updated with the appropriate value\n(Same with any other updated prop).\nestimateSize - A function that returns the estimated size of your items.\nIf your list is fixed, this will just be the size of your items.\nIf your list is dynamic, try to return approximate the size of each item.\n\nA full list of possible props can be in\n[Tanstack Virtualizer API Docs](https://tanstack.com/virtual/latest/docs/api/virtualizer)",
-              "attribute": "virtualizerprops"
-            },
-            {
-              "kind": "field",
-              "name": "setlistdata",
-              "type": {
-                "text": "(({ virtualItems, measureElement, listStyle }: SetListDataProps) => void) | null"
-              },
-              "description": "Callback that gets envoked when updates to the virtualizer interally occur.\nThis must be implemented in such a way that this function will trigger update to parent.\n\nvirtualItems - Array that will be what the client displays on screen. Use this to render\na List of your choosing with these items nested inside as your ListItems.\nmeasureElement - Ref to pass to each ListItem rendered client side.\nEach ListItem should also be be passed key and a data-index (which can be found on the virtualItem).\nlistStyle - This should be passed as the style attribute to your List.",
-              "default": "null",
-              "attribute": "setlistdata"
-            },
-            {
-              "kind": "field",
-              "name": "scrollElementRef",
-              "type": {
-                "text": "Ref<HTMLDivElement>"
-              },
-              "privacy": "public"
-            },
-            {
-              "kind": "field",
-              "name": "virtualizer",
-              "type": {
-                "text": "Virtualizer<Element, Element> | null"
-              },
-              "privacy": "public",
-              "default": "null"
-            },
-            {
-              "kind": "field",
-              "name": "virtualItems",
-              "type": {
-                "text": "Array<VirtualItem>"
-              },
-              "privacy": "public",
-              "default": "[]"
-            },
-            {
-              "kind": "method",
-              "name": "handleScroll",
-              "privacy": "private",
-              "return": {
-                "type": {
-                  "text": "void"
-                }
-              },
-              "parameters": [
-                {
-                  "name": "event",
-                  "type": {
-                    "text": "Event"
-                  }
-                }
-              ],
-              "description": "Refires the scroll event from the internal scroll container to the host element"
-            },
-            {
-              "kind": "field",
-              "name": "virtualizerController",
-              "type": {
-                "text": "null"
-              },
-              "default": "null"
-            },
-            {
-              "kind": "field",
-              "name": "onscroll",
-              "type": {
-                "text": "null"
-              },
-              "default": "null"
-            }
-          ],
-          "events": [
-            {
-              "type": {
-                "text": "EventConstructor"
-              }
-            },
-            {
-              "description": "(React: onScroll) Event that gets called when user scrolls inside of list.",
-              "name": "scroll",
-              "reactName": "onScroll"
-            }
-          ],
-          "attributes": [
-            {
-              "name": "virtualizerprops",
-              "type": {
-                "text": "VirtualizerProps"
-              },
-              "description": "Object that sets and updates the virtualizer with any relevant props.\nThere are two required object props in order to get virtualization to work properly.\ncount - The length of your list that you are virtualizing.\nAs your list grows/shrinks, this component must be updated with the appropriate value\n(Same with any other updated prop).\nestimateSize - A function that returns the estimated size of your items.\nIf your list is fixed, this will just be the size of your items.\nIf your list is dynamic, try to return approximate the size of each item.\n\nA full list of possible props can be in\n[Tanstack Virtualizer API Docs](https://tanstack.com/virtual/latest/docs/api/virtualizer)",
-              "fieldName": "virtualizerProps"
-            },
-            {
-              "name": "setlistdata",
-              "type": {
-                "text": "(({ virtualItems, measureElement, listStyle }: SetListDataProps) => void) | null"
-              },
-              "description": "Callback that gets envoked when updates to the virtualizer interally occur.\nThis must be implemented in such a way that this function will trigger update to parent.\n\nvirtualItems - Array that will be what the client displays on screen. Use this to render\na List of your choosing with these items nested inside as your ListItems.\nmeasureElement - Ref to pass to each ListItem rendered client side.\nEach ListItem should also be be passed key and a data-index (which can be found on the virtualItem).\nlistStyle - This should be passed as the style attribute to your List.",
-              "default": "null",
-              "fieldName": "setlistdata"
-            }
-          ],
-          "superclass": {
-            "name": "Component",
-            "module": "/src/models"
-          },
-          "tagName": "mdc-virtualizedlist",
-          "jsDoc": "/**\n * `mdc-virtualizedlist` component for creating custom virtualized lists.\n * IMPORTANT: This component does not create it's own list/list items.\n * Use the setlistdata callback prop to update client state in order to\n * Pass list/listitems as a child of this component, which this will virtuailze\n * This implementation handles dynamic lists as well as fixed sized lists.\n * Please refer to [Tanstack Virtual Docs](https://tanstack.com/virtual/latest) for more in depth documentation.\n *\n * @tagname mdc-virtualizedlist\n *\n * @event scroll - (React: onScroll) Event that gets called when user scrolls inside of list.\n *\n * @slot - Client side List with nested list items.\n */",
-          "customElement": true
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "default",
-          "declaration": {
-            "name": "VirtualizedList",
-            "module": "components/virtualizedlist/virtualizedlist.component.js"
-          }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "components/tooltip/tooltip.component.js",
+      "path": "components/toggletip/toggletip.component.js",
       "declarations": [
         {
           "kind": "class",
-          "description": "A tooltip is triggered by mouse hover or by keyboard focus\nand will disappear upon mouse exit or focus change.\n\nNote: Tooltips cannot contain content that can be focused or interacted with.",
-          "name": "Tooltip",
+          "description": "A toggletip is triggered by clicking a trigger element.\n\nIt can contain interactive content and can be closed by\nclicking outside the toggletip or pressing the escape key.\n\nIt can have optional close button to close the toggletip.\n\nToggletip component uses `mdc-screenreaderannouncer` internally to\nannounce the toggletip text content with screen readers when the toggletip is shown.\n\n`screenreader-announcer-identity` attribute can be used to provide ID of an element\nin DOM to which announcement elements are added. If not set, a visually hidden\ndiv element is created in DOM to which announcement elements are added.\n\nPlease refer to the `mdc-screenreaderannouncer` component for more details.",
+          "name": "ToggleTip",
           "cssProperties": [
             {
-              "description": "The maximum width of the tooltip.",
-              "name": "--mdc-tooltip-max-width"
-            },
-            {
-              "description": "The padding of the tooltip.",
-              "name": "--mdc-tooltip-padding"
+              "description": "The maximum width of the toggletip.",
+              "name": "--mdc-toggletip-max-width"
             },
             {
-              "description": "The text color of the tooltip.",
-              "name": "--mdc-tooltip-text-color"
+              "description": "The text color of the toggletip.",
+              "name": "--mdc-toggletip-text-color"
             },
             {
-              "description": "The text color of the tooltip when the color is contrast.",
-              "name": "--mdc-tooltip-text-color-contrast"
+              "description": "The text color of the toggletip when the color is contrast.",
+              "name": "--mdc-toggletip-text-color-contrast"
             },
             {
               "description": "radius of the arrow border",
@@ -39417,18 +38930,17 @@
               }
             }
           ],
-          "members": [
+          "slots": [
             {
-              "kind": "field",
-              "name": "tooltipType",
-              "type": {
-                "text": "TooltipType"
-              },
-              "description": "The type of tooltip.\n- **description** sets aria-describedby on the trigger component which refers to the tooltip id.\n- **label** sets aria-labelledby on the trigger component which refers to the tooltip id.\n- **none** no aria props set on trigger component referring to the tooltip id.",
-              "default": "'description'",
-              "attribute": "tooltip-type",
-              "reflects": true
-            },
+              "description": "Default slot for the toggletip content",
+              "name": "",
+              "inheritedFrom": {
+                "name": "Popover",
+                "module": "src/components/popover/popover.component.ts"
+              }
+            }
+          ],
+          "members": [
             {
               "kind": "field",
               "name": "defaultSlotNodes",
@@ -39438,76 +38950,50 @@
               "privacy": "private"
             },
             {
-              "kind": "method",
-              "name": "getTooltipText",
-              "privacy": "private",
-              "return": {
-                "type": {
-                  "text": ""
-                }
-              }
-            },
-            {
-              "kind": "method",
-              "name": "setTooltipType",
-              "privacy": "private",
-              "return": {
-                "type": {
-                  "text": "void"
-                }
+              "kind": "field",
+              "name": "screenreaderAnnouncerIdentity",
+              "type": {
+                "text": "string | undefined"
               },
-              "parameters": [
-                {
-                  "name": "type",
-                  "type": {
-                    "text": "TooltipType"
-                  },
-                  "description": "The type to set."
-                }
-              ],
-              "description": "Sets the type attribute for the tooltip component.\nIf the provided type is not included in the TOOLTIP_TYPES,\nit defaults to the value specified in DEFAULTS.TOOLTIP_TYPE."
+              "description": "Set this attribute with the id of the element in the DOM, to which announcement\nelements will be appended.\nIf an id is provided, the announcement elements will be appended to this element.\nIf id is not provided, a visually hidden div element will be created in the DOM.\n\nPlease refer to the `mdc-screenreaderannouncer` component for more details.",
+              "attribute": "screenreader-announcer-identity",
+              "reflects": true
             },
             {
-              "kind": "method",
-              "name": "onIdUpdated",
-              "privacy": "private",
-              "return": {
-                "type": {
-                  "text": "Promise<void>"
-                }
+              "kind": "field",
+              "name": "placement",
+              "type": {
+                "text": "PopoverPlacement"
               },
-              "description": "Updates the tooltip id if it is empty."
+              "description": "The placement of the popover.\n- **top**\n- **top-start**\n- **top-end**\n- **bottom**\n- **bottom-start**\n- **bottom-end**\n- **left**\n- **left-start**\n- **left-end**\n- **right**\n- **right-start**\n- **right-end**",
+              "default": "bottom",
+              "attribute": "placement",
+              "reflects": true,
+              "inheritedFrom": {
+                "name": "Popover",
+                "module": "components/popover/popover.component.js"
+              }
             },
             {
               "kind": "method",
-              "name": "onPlacementUpdated",
+              "name": "getToggleTipText",
               "privacy": "private",
               "return": {
                 "type": {
-                  "text": "void"
+                  "text": ""
                 }
-              },
-              "description": "Updates the placement attribute if it is not a valid placement.\nOverriding the default from Popover"
+              }
             },
             {
               "kind": "method",
-              "name": "onTooltipTypeUpdated",
+              "name": "onPlacementUpdated",
               "privacy": "private",
               "return": {
                 "type": {
                   "text": "void"
                 }
               },
-              "parameters": [
-                {
-                  "name": "changedProperties",
-                  "type": {
-                    "text": "PropertyValues"
-                  },
-                  "description": "The changed properties."
-                }
-              ],
-              "description": "Updates the tooltip type attribute and sets the appropriate aria props on the trigger component."
+              "description": "Updates the placement attribute if it is not a valid placement.\nDefault placement for toggle tip is top."
             },
             {
               "kind": "field",
@@ -40115,21 +39601,6 @@
                 "module": "components/popover/popover.component.js"
               }
             },
-            {
-              "kind": "field",
-              "name": "placement",
-              "type": {
-                "text": "PopoverPlacement"
-              },
-              "description": "The placement of the popover.\n- **top**\n- **top-start**\n- **top-end**\n- **bottom**\n- **bottom-start**\n- **bottom-end**\n- **left**\n- **left-start**\n- **left-end**\n- **right**\n- **right-start**\n- **right-end**",
-              "default": "bottom",
-              "attribute": "placement",
-              "reflects": true,
-              "inheritedFrom": {
-                "name": "Popover",
-                "module": "components/popover/popover.component.js"
-              }
-            },
             {
               "kind": "field",
               "name": "color",
@@ -40849,7 +40320,7 @@
           ],
           "events": [
             {
-              "description": "(React: onShown) This event is dispatched when the tooltip is shown",
+              "description": "(React: onShown) This event is dispatched when the toggletip is shown",
               "name": "shown",
               "reactName": "onShown",
               "inheritedFrom": {
@@ -40858,7 +40329,7 @@
               }
             },
             {
-              "description": "(React: onHidden) This event is dispatched when the tooltip is hidden",
+              "description": "(React: onHidden) This event is dispatched when the toggletip is hidden",
               "name": "hidden",
               "reactName": "onHidden",
               "inheritedFrom": {
@@ -40867,7 +40338,7 @@
               }
             },
             {
-              "description": "(React: onCreated) This event is dispatched when the tooltip is created (added to the DOM)",
+              "description": "(React: onCreated) This event is dispatched when the toggletip is created (added to the DOM)",
               "name": "created",
               "reactName": "onCreated",
               "inheritedFrom": {
@@ -40876,7 +40347,7 @@
               }
             },
             {
-              "description": "(React: onDestroyed) This event is dispatched when the tooltip is destroyed (removed from the DOM)",
+              "description": "(React: onDestroyed) This event is dispatched when the toggletip is destroyed (removed from the DOM)",
               "name": "destroyed",
               "reactName": "onDestroyed",
               "inheritedFrom": {
@@ -40887,13 +40358,25 @@
           ],
           "attributes": [
             {
-              "name": "tooltip-type",
+              "name": "screenreader-announcer-identity",
               "type": {
-                "text": "TooltipType"
+                "text": "string | undefined"
               },
-              "description": "The type of tooltip.\n- **description** sets aria-describedby on the trigger component which refers to the tooltip id.\n- **label** sets aria-labelledby on the trigger component which refers to the tooltip id.\n- **none** no aria props set on trigger component referring to the tooltip id.",
-              "default": "'description'",
-              "fieldName": "tooltipType"
+              "description": "Set this attribute with the id of the element in the DOM, to which announcement\nelements will be appended.\nIf an id is provided, the announcement elements will be appended to this element.\nIf id is not provided, a visually hidden div element will be created in the DOM.\n\nPlease refer to the `mdc-screenreaderannouncer` component for more details.",
+              "fieldName": "screenreaderAnnouncerIdentity"
+            },
+            {
+              "name": "placement",
+              "type": {
+                "text": "PopoverPlacement"
+              },
+              "description": "The placement of the popover.\n- **top**\n- **top-start**\n- **top-end**\n- **bottom**\n- **bottom-start**\n- **bottom-end**\n- **left**\n- **left-start**\n- **left-end**\n- **right**\n- **right-start**\n- **right-end**",
+              "default": "bottom",
+              "fieldName": "placement",
+              "inheritedFrom": {
+                "name": "Popover",
+                "module": "src/components/popover/popover.component.ts"
+              }
             },
             {
               "name": "should-focus-trap-wrap",
@@ -40947,19 +40430,6 @@
                 "module": "src/components/popover/popover.component.ts"
               }
             },
-            {
-              "name": "placement",
-              "type": {
-                "text": "PopoverPlacement"
-              },
-              "description": "The placement of the popover.\n- **top**\n- **top-start**\n- **top-end**\n- **bottom**\n- **bottom-start**\n- **bottom-end**\n- **left**\n- **left-start**\n- **left-end**\n- **right**\n- **right-start**\n- **right-end**",
-              "default": "bottom",
-              "fieldName": "placement",
-              "inheritedFrom": {
-                "name": "Popover",
-                "module": "src/components/popover/popover.component.ts"
-              }
-            },
             {
               "name": "color",
               "type": {
@@ -41380,19 +40850,9 @@
             "name": "Popover",
             "module": "/src/components/popover/popover.component"
           },
-          "tagName": "mdc-tooltip",
-          "jsDoc": "/**\n * A tooltip is triggered by mouse hover or by keyboard focus\n * and will disappear upon mouse exit or focus change.\n *\n * Note: Tooltips cannot contain content that can be focused or interacted with.\n *\n * @tagname mdc-tooltip\n *\n * @event shown - (React: onShown) This event is dispatched when the tooltip is shown\n * @event hidden - (React: onHidden) This event is dispatched when the tooltip is hidden\n * @event created - (React: onCreated) This event is dispatched when the tooltip is created (added to the DOM)\n * @event destroyed - (React: onDestroyed) This event is dispatched when the tooltip is destroyed (removed from the DOM)\n *\n * @cssproperty --mdc-tooltip-max-width - The maximum width of the tooltip.\n * @cssproperty --mdc-tooltip-padding - The padding of the tooltip.\n * @cssproperty --mdc-tooltip-text-color - The text color of the tooltip.\n * @cssproperty --mdc-tooltip-text-color-contrast - The text color of the tooltip when the color is contrast.\n *\n */",
-          "customElement": true,
-          "slots": [
-            {
-              "description": "Default slot for the popover content",
-              "name": "",
-              "inheritedFrom": {
-                "name": "Popover",
-                "module": "src/components/popover/popover.component.ts"
-              }
-            }
-          ]
+          "tagName": "mdc-toggletip",
+          "jsDoc": "/**\n * A toggletip is triggered by clicking a trigger element.\n *\n * It can contain interactive content and can be closed by\n * clicking outside the toggletip or pressing the escape key.\n *\n * It can have optional close button to close the toggletip.\n *\n * Toggletip component uses `mdc-screenreaderannouncer` internally to\n * announce the toggletip text content with screen readers when the toggletip is shown.\n *\n * `screenreader-announcer-identity` attribute can be used to provide ID of an element\n * in DOM to which announcement elements are added. If not set, a visually hidden\n * div element is created in DOM to which announcement elements are added.\n *\n * Please refer to the `mdc-screenreaderannouncer` component for more details.\n *\n * @dependency mdc-screenreaderannouncer\n * @dependency mdc-button\n *\n * @tagname mdc-toggletip\n *\n * @event shown - (React: onShown) This event is dispatched when the toggletip is shown\n * @event hidden - (React: onHidden) This event is dispatched when the toggletip is hidden\n * @event created - (React: onCreated) This event is dispatched when the toggletip is created (added to the DOM)\n * @event destroyed - (React: onDestroyed) This event is dispatched when the toggletip\n * is destroyed (removed from the DOM)\n *\n * @cssproperty --mdc-toggletip-max-width - The maximum width of the toggletip.\n * @cssproperty --mdc-toggletip-text-color - The text color of the toggletip.\n * @cssproperty --mdc-toggletip-text-color-contrast - The text color of the toggletip\n *  when the color is contrast.\n *\n * @slot - Default slot for the toggletip content\n */",
+          "customElement": true
         }
       ],
       "exports": [
@@ -41400,32 +40860,36 @@
           "kind": "js",
           "name": "default",
           "declaration": {
-            "name": "Tooltip",
-            "module": "components/tooltip/tooltip.component.js"
+            "name": "ToggleTip",
+            "module": "components/toggletip/toggletip.component.js"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "components/toggletip/toggletip.component.js",
+      "path": "components/tooltip/tooltip.component.js",
       "declarations": [
         {
           "kind": "class",
-          "description": "A toggletip is triggered by clicking a trigger element.\n\nIt can contain interactive content and can be closed by\nclicking outside the toggletip or pressing the escape key.\n\nIt can have optional close button to close the toggletip.\n\nToggletip component uses `mdc-screenreaderannouncer` internally to\nannounce the toggletip text content with screen readers when the toggletip is shown.\n\n`screenreader-announcer-identity` attribute can be used to provide ID of an element\nin DOM to which announcement elements are added. If not set, a visually hidden\ndiv element is created in DOM to which announcement elements are added.\n\nPlease refer to the `mdc-screenreaderannouncer` component for more details.",
-          "name": "ToggleTip",
+          "description": "A tooltip is triggered by mouse hover or by keyboard focus\nand will disappear upon mouse exit or focus change.\n\nNote: Tooltips cannot contain content that can be focused or interacted with.",
+          "name": "Tooltip",
           "cssProperties": [
             {
-              "description": "The maximum width of the toggletip.",
-              "name": "--mdc-toggletip-max-width"
+              "description": "The maximum width of the tooltip.",
+              "name": "--mdc-tooltip-max-width"
             },
             {
-              "description": "The text color of the toggletip.",
-              "name": "--mdc-toggletip-text-color"
+              "description": "The padding of the tooltip.",
+              "name": "--mdc-tooltip-padding"
             },
             {
-              "description": "The text color of the toggletip when the color is contrast.",
-              "name": "--mdc-toggletip-text-color-contrast"
+              "description": "The text color of the tooltip.",
+              "name": "--mdc-tooltip-text-color"
+            },
+            {
+              "description": "The text color of the tooltip when the color is contrast.",
+              "name": "--mdc-tooltip-text-color-contrast"
             },
             {
               "description": "radius of the arrow border",
@@ -41508,53 +40972,29 @@
               }
             }
           ],
-          "slots": [
-            {
-              "description": "Default slot for the toggletip content",
-              "name": "",
-              "inheritedFrom": {
-                "name": "Popover",
-                "module": "src/components/popover/popover.component.ts"
-              }
-            }
-          ],
           "members": [
             {
               "kind": "field",
-              "name": "defaultSlotNodes",
-              "type": {
-                "text": "Array<Node>"
-              },
-              "privacy": "private"
-            },
-            {
-              "kind": "field",
-              "name": "screenreaderAnnouncerIdentity",
+              "name": "tooltipType",
               "type": {
-                "text": "string | undefined"
+                "text": "TooltipType"
               },
-              "description": "Set this attribute with the id of the element in the DOM, to which announcement\nelements will be appended.\nIf an id is provided, the announcement elements will be appended to this element.\nIf id is not provided, a visually hidden div element will be created in the DOM.\n\nPlease refer to the `mdc-screenreaderannouncer` component for more details.",
-              "attribute": "screenreader-announcer-identity",
+              "description": "The type of tooltip.\n- **description** sets aria-describedby on the trigger component which refers to the tooltip id.\n- **label** sets aria-labelledby on the trigger component which refers to the tooltip id.\n- **none** no aria props set on trigger component referring to the tooltip id.",
+              "default": "'description'",
+              "attribute": "tooltip-type",
               "reflects": true
             },
             {
               "kind": "field",
-              "name": "placement",
+              "name": "defaultSlotNodes",
               "type": {
-                "text": "PopoverPlacement"
+                "text": "Array<Node>"
               },
-              "description": "The placement of the popover.\n- **top**\n- **top-start**\n- **top-end**\n- **bottom**\n- **bottom-start**\n- **bottom-end**\n- **left**\n- **left-start**\n- **left-end**\n- **right**\n- **right-start**\n- **right-end**",
-              "default": "bottom",
-              "attribute": "placement",
-              "reflects": true,
-              "inheritedFrom": {
-                "name": "Popover",
-                "module": "components/popover/popover.component.js"
-              }
+              "privacy": "private"
             },
             {
               "kind": "method",
-              "name": "getToggleTipText",
+              "name": "getTooltipText",
               "privacy": "private",
               "return": {
                 "type": {
@@ -41562,6 +41002,37 @@
                 }
               }
             },
+            {
+              "kind": "method",
+              "name": "setTooltipType",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "type",
+                  "type": {
+                    "text": "TooltipType"
+                  },
+                  "description": "The type to set."
+                }
+              ],
+              "description": "Sets the type attribute for the tooltip component.\nIf the provided type is not included in the TOOLTIP_TYPES,\nit defaults to the value specified in DEFAULTS.TOOLTIP_TYPE."
+            },
+            {
+              "kind": "method",
+              "name": "onIdUpdated",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "Promise<void>"
+                }
+              },
+              "description": "Updates the tooltip id if it is empty."
+            },
             {
               "kind": "method",
               "name": "onPlacementUpdated",
@@ -41571,7 +41042,27 @@
                   "text": "void"
                 }
               },
-              "description": "Updates the placement attribute if it is not a valid placement.\nDefault placement for toggle tip is top."
+              "description": "Updates the placement attribute if it is not a valid placement.\nOverriding the default from Popover"
+            },
+            {
+              "kind": "method",
+              "name": "onTooltipTypeUpdated",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "changedProperties",
+                  "type": {
+                    "text": "PropertyValues"
+                  },
+                  "description": "The changed properties."
+                }
+              ],
+              "description": "Updates the tooltip type attribute and sets the appropriate aria props on the trigger component."
             },
             {
               "kind": "field",
@@ -42179,6 +41670,21 @@
                 "module": "components/popover/popover.component.js"
               }
             },
+            {
+              "kind": "field",
+              "name": "placement",
+              "type": {
+                "text": "PopoverPlacement"
+              },
+              "description": "The placement of the popover.\n- **top**\n- **top-start**\n- **top-end**\n- **bottom**\n- **bottom-start**\n- **bottom-end**\n- **left**\n- **left-start**\n- **left-end**\n- **right**\n- **right-start**\n- **right-end**",
+              "default": "bottom",
+              "attribute": "placement",
+              "reflects": true,
+              "inheritedFrom": {
+                "name": "Popover",
+                "module": "components/popover/popover.component.js"
+              }
+            },
             {
               "kind": "field",
               "name": "color",
@@ -42898,7 +42404,7 @@
           ],
           "events": [
             {
-              "description": "(React: onShown) This event is dispatched when the toggletip is shown",
+              "description": "(React: onShown) This event is dispatched when the tooltip is shown",
               "name": "shown",
               "reactName": "onShown",
               "inheritedFrom": {
@@ -42907,7 +42413,7 @@
               }
             },
             {
-              "description": "(React: onHidden) This event is dispatched when the toggletip is hidden",
+              "description": "(React: onHidden) This event is dispatched when the tooltip is hidden",
               "name": "hidden",
               "reactName": "onHidden",
               "inheritedFrom": {
@@ -42916,7 +42422,7 @@
               }
             },
             {
-              "description": "(React: onCreated) This event is dispatched when the toggletip is created (added to the DOM)",
+              "description": "(React: onCreated) This event is dispatched when the tooltip is created (added to the DOM)",
               "name": "created",
               "reactName": "onCreated",
               "inheritedFrom": {
@@ -42925,7 +42431,7 @@
               }
             },
             {
-              "description": "(React: onDestroyed) This event is dispatched when the toggletip is destroyed (removed from the DOM)",
+              "description": "(React: onDestroyed) This event is dispatched when the tooltip is destroyed (removed from the DOM)",
               "name": "destroyed",
               "reactName": "onDestroyed",
               "inheritedFrom": {
@@ -42936,25 +42442,13 @@
           ],
           "attributes": [
             {
-              "name": "screenreader-announcer-identity",
-              "type": {
-                "text": "string | undefined"
-              },
-              "description": "Set this attribute with the id of the element in the DOM, to which announcement\nelements will be appended.\nIf an id is provided, the announcement elements will be appended to this element.\nIf id is not provided, a visually hidden div element will be created in the DOM.\n\nPlease refer to the `mdc-screenreaderannouncer` component for more details.",
-              "fieldName": "screenreaderAnnouncerIdentity"
-            },
-            {
-              "name": "placement",
+              "name": "tooltip-type",
               "type": {
-                "text": "PopoverPlacement"
+                "text": "TooltipType"
               },
-              "description": "The placement of the popover.\n- **top**\n- **top-start**\n- **top-end**\n- **bottom**\n- **bottom-start**\n- **bottom-end**\n- **left**\n- **left-start**\n- **left-end**\n- **right**\n- **right-start**\n- **right-end**",
-              "default": "bottom",
-              "fieldName": "placement",
-              "inheritedFrom": {
-                "name": "Popover",
-                "module": "src/components/popover/popover.component.ts"
-              }
+              "description": "The type of tooltip.\n- **description** sets aria-describedby on the trigger component which refers to the tooltip id.\n- **label** sets aria-labelledby on the trigger component which refers to the tooltip id.\n- **none** no aria props set on trigger component referring to the tooltip id.",
+              "default": "'description'",
+              "fieldName": "tooltipType"
             },
             {
               "name": "should-focus-trap-wrap",
@@ -43008,6 +42502,19 @@
                 "module": "src/components/popover/popover.component.ts"
               }
             },
+            {
+              "name": "placement",
+              "type": {
+                "text": "PopoverPlacement"
+              },
+              "description": "The placement of the popover.\n- **top**\n- **top-start**\n- **top-end**\n- **bottom**\n- **bottom-start**\n- **bottom-end**\n- **left**\n- **left-start**\n- **left-end**\n- **right**\n- **right-start**\n- **right-end**",
+              "default": "bottom",
+              "fieldName": "placement",
+              "inheritedFrom": {
+                "name": "Popover",
+                "module": "src/components/popover/popover.component.ts"
+              }
+            },
             {
               "name": "color",
               "type": {
@@ -43428,8 +42935,354 @@
             "name": "Popover",
             "module": "/src/components/popover/popover.component"
           },
-          "tagName": "mdc-toggletip",
-          "jsDoc": "/**\n * A toggletip is triggered by clicking a trigger element.\n *\n * It can contain interactive content and can be closed by\n * clicking outside the toggletip or pressing the escape key.\n *\n * It can have optional close button to close the toggletip.\n *\n * Toggletip component uses `mdc-screenreaderannouncer` internally to\n * announce the toggletip text content with screen readers when the toggletip is shown.\n *\n * `screenreader-announcer-identity` attribute can be used to provide ID of an element\n * in DOM to which announcement elements are added. If not set, a visually hidden\n * div element is created in DOM to which announcement elements are added.\n *\n * Please refer to the `mdc-screenreaderannouncer` component for more details.\n *\n * @dependency mdc-screenreaderannouncer\n * @dependency mdc-button\n *\n * @tagname mdc-toggletip\n *\n * @event shown - (React: onShown) This event is dispatched when the toggletip is shown\n * @event hidden - (React: onHidden) This event is dispatched when the toggletip is hidden\n * @event created - (React: onCreated) This event is dispatched when the toggletip is created (added to the DOM)\n * @event destroyed - (React: onDestroyed) This event is dispatched when the toggletip\n * is destroyed (removed from the DOM)\n *\n * @cssproperty --mdc-toggletip-max-width - The maximum width of the toggletip.\n * @cssproperty --mdc-toggletip-text-color - The text color of the toggletip.\n * @cssproperty --mdc-toggletip-text-color-contrast - The text color of the toggletip\n *  when the color is contrast.\n *\n * @slot - Default slot for the toggletip content\n */",
+          "tagName": "mdc-tooltip",
+          "jsDoc": "/**\n * A tooltip is triggered by mouse hover or by keyboard focus\n * and will disappear upon mouse exit or focus change.\n *\n * Note: Tooltips cannot contain content that can be focused or interacted with.\n *\n * @tagname mdc-tooltip\n *\n * @event shown - (React: onShown) This event is dispatched when the tooltip is shown\n * @event hidden - (React: onHidden) This event is dispatched when the tooltip is hidden\n * @event created - (React: onCreated) This event is dispatched when the tooltip is created (added to the DOM)\n * @event destroyed - (React: onDestroyed) This event is dispatched when the tooltip is destroyed (removed from the DOM)\n *\n * @cssproperty --mdc-tooltip-max-width - The maximum width of the tooltip.\n * @cssproperty --mdc-tooltip-padding - The padding of the tooltip.\n * @cssproperty --mdc-tooltip-text-color - The text color of the tooltip.\n * @cssproperty --mdc-tooltip-text-color-contrast - The text color of the tooltip when the color is contrast.\n *\n */",
+          "customElement": true,
+          "slots": [
+            {
+              "description": "Default slot for the popover content",
+              "name": "",
+              "inheritedFrom": {
+                "name": "Popover",
+                "module": "src/components/popover/popover.component.ts"
+              }
+            }
+          ]
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "default",
+          "declaration": {
+            "name": "Tooltip",
+            "module": "components/tooltip/tooltip.component.js"
+          }
+        }
+      ]
+    },
+    {
+      "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
         }
       ],
@@ -43438,8 +43291,155 @@
           "kind": "js",
           "name": "default",
           "declaration": {
-            "name": "ToggleTip",
-            "module": "components/toggletip/toggletip.component.js"
+            "name": "Typewriter",
+            "module": "components/typewriter/typewriter.component.js"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "components/virtualizedlist/virtualizedlist.component.js",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "`mdc-virtualizedlist` component for creating custom virtualized lists.\nIMPORTANT: This component does not create it's own list/list items.\nUse the setlistdata callback prop to update client state in order to\nPass list/listitems as a child of this component, which this will virtuailze\nThis implementation handles dynamic lists as well as fixed sized lists.\nPlease refer to [Tanstack Virtual Docs](https://tanstack.com/virtual/latest) for more in depth documentation.",
+          "name": "VirtualizedList",
+          "slots": [
+            {
+              "description": "Client side List with nested list items.",
+              "name": ""
+            }
+          ],
+          "members": [
+            {
+              "kind": "field",
+              "name": "virtualizerProps",
+              "type": {
+                "text": "VirtualizerProps"
+              },
+              "description": "Object that sets and updates the virtualizer with any relevant props.\nThere are two required object props in order to get virtualization to work properly.\ncount - The length of your list that you are virtualizing.\nAs your list grows/shrinks, this component must be updated with the appropriate value\n(Same with any other updated prop).\nestimateSize - A function that returns the estimated size of your items.\nIf your list is fixed, this will just be the size of your items.\nIf your list is dynamic, try to return approximate the size of each item.\n\nA full list of possible props can be in\n[Tanstack Virtualizer API Docs](https://tanstack.com/virtual/latest/docs/api/virtualizer)",
+              "attribute": "virtualizerprops"
+            },
+            {
+              "kind": "field",
+              "name": "setlistdata",
+              "type": {
+                "text": "(({ virtualItems, measureElement, listStyle }: SetListDataProps) => void) | null"
+              },
+              "description": "Callback that gets envoked when updates to the virtualizer interally occur.\nThis must be implemented in such a way that this function will trigger update to parent.\n\nvirtualItems - Array that will be what the client displays on screen. Use this to render\na List of your choosing with these items nested inside as your ListItems.\nmeasureElement - Ref to pass to each ListItem rendered client side.\nEach ListItem should also be be passed key and a data-index (which can be found on the virtualItem).\nlistStyle - This should be passed as the style attribute to your List.",
+              "default": "null",
+              "attribute": "setlistdata"
+            },
+            {
+              "kind": "field",
+              "name": "scrollElementRef",
+              "type": {
+                "text": "Ref<HTMLDivElement>"
+              },
+              "privacy": "public"
+            },
+            {
+              "kind": "field",
+              "name": "virtualizer",
+              "type": {
+                "text": "Virtualizer<Element, Element> | null"
+              },
+              "privacy": "public",
+              "default": "null"
+            },
+            {
+              "kind": "field",
+              "name": "virtualItems",
+              "type": {
+                "text": "Array<VirtualItem>"
+              },
+              "privacy": "public",
+              "default": "[]"
+            },
+            {
+              "kind": "method",
+              "name": "handleScroll",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "event",
+                  "type": {
+                    "text": "Event"
+                  }
+                }
+              ],
+              "description": "Refires the scroll event from the internal scroll container to the host element"
+            },
+            {
+              "kind": "field",
+              "name": "virtualizerController",
+              "type": {
+                "text": "null"
+              },
+              "default": "null"
+            },
+            {
+              "kind": "field",
+              "name": "onscroll",
+              "type": {
+                "text": "null"
+              },
+              "default": "null"
+            }
+          ],
+          "events": [
+            {
+              "type": {
+                "text": "EventConstructor"
+              }
+            },
+            {
+              "description": "(React: onScroll) Event that gets called when user scrolls inside of list.",
+              "name": "scroll",
+              "reactName": "onScroll"
+            }
+          ],
+          "attributes": [
+            {
+              "name": "virtualizerprops",
+              "type": {
+                "text": "VirtualizerProps"
+              },
+              "description": "Object that sets and updates the virtualizer with any relevant props.\nThere are two required object props in order to get virtualization to work properly.\ncount - The length of your list that you are virtualizing.\nAs your list grows/shrinks, this component must be updated with the appropriate value\n(Same with any other updated prop).\nestimateSize - A function that returns the estimated size of your items.\nIf your list is fixed, this will just be the size of your items.\nIf your list is dynamic, try to return approximate the size of each item.\n\nA full list of possible props can be in\n[Tanstack Virtualizer API Docs](https://tanstack.com/virtual/latest/docs/api/virtualizer)",
+              "fieldName": "virtualizerProps"
+            },
+            {
+              "name": "setlistdata",
+              "type": {
+                "text": "(({ virtualItems, measureElement, listStyle }: SetListDataProps) => void) | null"
+              },
+              "description": "Callback that gets envoked when updates to the virtualizer interally occur.\nThis must be implemented in such a way that this function will trigger update to parent.\n\nvirtualItems - Array that will be what the client displays on screen. Use this to render\na List of your choosing with these items nested inside as your ListItems.\nmeasureElement - Ref to pass to each ListItem rendered client side.\nEach ListItem should also be be passed key and a data-index (which can be found on the virtualItem).\nlistStyle - This should be passed as the style attribute to your List.",
+              "default": "null",
+              "fieldName": "setlistdata"
+            }
+          ],
+          "superclass": {
+            "name": "Component",
+            "module": "/src/models"
+          },
+          "tagName": "mdc-virtualizedlist",
+          "jsDoc": "/**\n * `mdc-virtualizedlist` component for creating custom virtualized lists.\n * IMPORTANT: This component does not create it's own list/list items.\n * Use the setlistdata callback prop to update client state in order to\n * Pass list/listitems as a child of this component, which this will virtuailze\n * This implementation handles dynamic lists as well as fixed sized lists.\n * Please refer to [Tanstack Virtual Docs](https://tanstack.com/virtual/latest) for more in depth documentation.\n *\n * @tagname mdc-virtualizedlist\n *\n * @event scroll - (React: onScroll) Event that gets called when user scrolls inside of list.\n *\n * @slot - Client side List with nested list items.\n */",
+          "customElement": true
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "default",
+          "declaration": {
+            "name": "VirtualizedList",
+            "module": "components/virtualizedlist/virtualizedlist.component.js"
           }
         }
       ]