@momentum-design/components 0.81.3 → 0.81.5

package/dist/custom-elements.json

@@ -520,6 +520,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",
@@ -732,67 +793,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",
@@ -2203,138 +2203,6 @@
         }
       ]
     },
-    {
-      "kind": "javascript-module",
-      "path": "components/buttongroup/buttongroup.component.js",
-      "declarations": [
-        {
-          "kind": "class",
-          "description": "buttongroup component, is a styled wrapper for multiple buttons.\nIt can support icon buttons, combination of icon and pill buttons, and text buttons.\nThey are available in horizontal and vertical orientation.",
-          "name": "ButtonGroup",
-          "cssProperties": [
-            {
-              "description": "The border radius of the buttongroup",
-              "name": "--mdc-buttongroup-border-radius"
-            },
-            {
-              "description": "The border color of the buttongroup",
-              "name": "--mdc-buttongroup-border-color"
-            },
-            {
-              "description": "The color of the divider between buttons within the buttongroup",
-              "name": "--mdc-buttongroup-divider-color"
-            }
-          ],
-          "slots": [
-            {
-              "description": "This is a default/unnamed slot, which contains the buttons",
-              "name": "default"
-            }
-          ],
-          "members": [
-            {
-              "kind": "field",
-              "name": "orientation",
-              "type": {
-                "text": "ButtonGroupOrientation"
-              },
-              "description": "Orientation of the buttongroup.",
-              "default": "'horizontal'",
-              "attribute": "orientation",
-              "reflects": true
-            },
-            {
-              "kind": "field",
-              "name": "variant",
-              "type": {
-                "text": "ButtonGroupVariant"
-              },
-              "description": "Variant of the buttons within the buttongroup.",
-              "default": "'primary'",
-              "attribute": "variant",
-              "reflects": true
-            },
-            {
-              "kind": "field",
-              "name": "size",
-              "type": {
-                "text": "ButtonGroupSize"
-              },
-              "description": "Size of the buttons within the buttongroup.",
-              "default": "'28'",
-              "attribute": "size",
-              "reflects": true
-            },
-            {
-              "kind": "field",
-              "name": "compact",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "When this is true, the buttons within the buttongroup will be compact.\ni.e. Irrespective of the size of the buttons, they will have a height of 24px.",
-              "attribute": "compact",
-              "reflects": true
-            }
-          ],
-          "attributes": [
-            {
-              "name": "orientation",
-              "type": {
-                "text": "ButtonGroupOrientation"
-              },
-              "description": "Orientation of the buttongroup.",
-              "default": "'horizontal'",
-              "fieldName": "orientation"
-            },
-            {
-              "name": "variant",
-              "type": {
-                "text": "ButtonGroupVariant"
-              },
-              "description": "Variant of the buttons within the buttongroup.",
-              "default": "'primary'",
-              "fieldName": "variant"
-            },
-            {
-              "name": "size",
-              "type": {
-                "text": "ButtonGroupSize"
-              },
-              "description": "Size of the buttons within the buttongroup.",
-              "default": "'28'",
-              "fieldName": "size"
-            },
-            {
-              "name": "compact",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "When this is true, the buttons within the buttongroup will be compact.\ni.e. Irrespective of the size of the buttons, they will have a height of 24px.",
-              "fieldName": "compact"
-            }
-          ],
-          "superclass": {
-            "name": "Component",
-            "module": "/src/models"
-          },
-          "tagName": "mdc-buttongroup",
-          "jsDoc": "/**\n * buttongroup component, is a styled wrapper for multiple buttons.\n * It can support icon buttons, combination of icon and pill buttons, and text buttons.\n * They are available in horizontal and vertical orientation.\n *\n * @tagname mdc-buttongroup\n *\n * @slot default - This is a default/unnamed slot, which contains the buttons\n *\n * @cssproperty --mdc-buttongroup-border-radius - The border radius of the buttongroup\n * @cssproperty --mdc-buttongroup-border-color - The border color of the buttongroup\n * @cssproperty --mdc-buttongroup-divider-color - The color of the divider between buttons within the buttongroup\n */",
-          "customElement": true
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "default",
-          "declaration": {
-            "name": "ButtonGroup",
-            "module": "components/buttongroup/buttongroup.component.js"
-          }
-        }
-      ]
-    },
     {
       "kind": "javascript-module",
       "path": "components/button/button.component.js",
@@ -3030,6 +2898,138 @@
         }
       ]
     },
+    {
+      "kind": "javascript-module",
+      "path": "components/buttongroup/buttongroup.component.js",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "buttongroup component, is a styled wrapper for multiple buttons.\nIt can support icon buttons, combination of icon and pill buttons, and text buttons.\nThey are available in horizontal and vertical orientation.",
+          "name": "ButtonGroup",
+          "cssProperties": [
+            {
+              "description": "The border radius of the buttongroup",
+              "name": "--mdc-buttongroup-border-radius"
+            },
+            {
+              "description": "The border color of the buttongroup",
+              "name": "--mdc-buttongroup-border-color"
+            },
+            {
+              "description": "The color of the divider between buttons within the buttongroup",
+              "name": "--mdc-buttongroup-divider-color"
+            }
+          ],
+          "slots": [
+            {
+              "description": "This is a default/unnamed slot, which contains the buttons",
+              "name": "default"
+            }
+          ],
+          "members": [
+            {
+              "kind": "field",
+              "name": "orientation",
+              "type": {
+                "text": "ButtonGroupOrientation"
+              },
+              "description": "Orientation of the buttongroup.",
+              "default": "'horizontal'",
+              "attribute": "orientation",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "variant",
+              "type": {
+                "text": "ButtonGroupVariant"
+              },
+              "description": "Variant of the buttons within the buttongroup.",
+              "default": "'primary'",
+              "attribute": "variant",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "size",
+              "type": {
+                "text": "ButtonGroupSize"
+              },
+              "description": "Size of the buttons within the buttongroup.",
+              "default": "'28'",
+              "attribute": "size",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "compact",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "When this is true, the buttons within the buttongroup will be compact.\ni.e. Irrespective of the size of the buttons, they will have a height of 24px.",
+              "attribute": "compact",
+              "reflects": true
+            }
+          ],
+          "attributes": [
+            {
+              "name": "orientation",
+              "type": {
+                "text": "ButtonGroupOrientation"
+              },
+              "description": "Orientation of the buttongroup.",
+              "default": "'horizontal'",
+              "fieldName": "orientation"
+            },
+            {
+              "name": "variant",
+              "type": {
+                "text": "ButtonGroupVariant"
+              },
+              "description": "Variant of the buttons within the buttongroup.",
+              "default": "'primary'",
+              "fieldName": "variant"
+            },
+            {
+              "name": "size",
+              "type": {
+                "text": "ButtonGroupSize"
+              },
+              "description": "Size of the buttons within the buttongroup.",
+              "default": "'28'",
+              "fieldName": "size"
+            },
+            {
+              "name": "compact",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "When this is true, the buttons within the buttongroup will be compact.\ni.e. Irrespective of the size of the buttons, they will have a height of 24px.",
+              "fieldName": "compact"
+            }
+          ],
+          "superclass": {
+            "name": "Component",
+            "module": "/src/models"
+          },
+          "tagName": "mdc-buttongroup",
+          "jsDoc": "/**\n * buttongroup component, is a styled wrapper for multiple buttons.\n * It can support icon buttons, combination of icon and pill buttons, and text buttons.\n * They are available in horizontal and vertical orientation.\n *\n * @tagname mdc-buttongroup\n *\n * @slot default - This is a default/unnamed slot, which contains the buttons\n *\n * @cssproperty --mdc-buttongroup-border-radius - The border radius of the buttongroup\n * @cssproperty --mdc-buttongroup-border-color - The border color of the buttongroup\n * @cssproperty --mdc-buttongroup-divider-color - The color of the divider between buttons within the buttongroup\n */",
+          "customElement": true
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "default",
+          "declaration": {
+            "name": "ButtonGroup",
+            "module": "components/buttongroup/buttongroup.component.js"
+          }
+        }
+      ]
+    },
     {
       "kind": "javascript-module",
       "path": "components/buttonlink/buttonlink.component.js",
@@ -3644,386 +3644,6 @@
         }
       ]
     },
-    {
-      "kind": "javascript-module",
-      "path": "components/buttonsimple/buttonsimple.component.js",
-      "declarations": [
-        {
-          "kind": "class",
-          "description": "`mdc-buttonsimple` is a component that can be configured in various ways to suit different use cases.\nIt is used as an internal component and is not intended to be used directly by consumers.\nConsumers should use the `mdc-button` component instead.",
-          "name": "Buttonsimple",
-          "members": [
-            {
-              "kind": "field",
-              "name": "active",
-              "type": {
-                "text": "boolean | undefined"
-              },
-              "description": "The button's active state indicates whether it is currently toggled on (active) or off (inactive).\nWhen the active state is true, the button is considered to be in an active state, meaning it is toggled on.\nConversely, when the active state is false, the button is in an inactive state, indicating it is toggled off.\n\nThis attribute is used to set the provided `ariaStateKey` to true or false.",
-              "default": "undefined",
-              "attribute": "active",
-              "reflects": true
-            },
-            {
-              "kind": "field",
-              "name": "softDisabled",
-              "type": {
-                "text": "boolean | undefined"
-              },
-              "description": "Indicates whether the button is soft disabled.\nWhen set to `true`, the button appears visually disabled but still allows\nfocus, click, and keyboard actions to be passed through.\n\n**Important:** When using soft disabled, consumers must ensure that\nthe button behaves like a disabled button, allowing only focus and\npreventing any interactions (clicks or keyboard actions) from triggering unintended actions.",
-              "default": "undefined",
-              "attribute": "soft-disabled",
-              "reflects": true
-            },
-            {
-              "kind": "field",
-              "name": "size",
-              "type": {
-                "text": "ButtonSize"
-              },
-              "description": "Simplebutton size is a super set of all the sizes supported by children components.",
-              "default": "32",
-              "attribute": "size",
-              "reflects": true
-            },
-            {
-              "kind": "field",
-              "name": "role",
-              "description": "This property defines the ARIA role for the element. By default, it is set to 'button'.\nConsumers should override this role when:\n- The element is being used in a context where a different role is more appropriate.\n- Custom behaviors are implemented that require a specific ARIA role for accessibility purposes.",
-              "default": "button",
-              "attribute": "role",
-              "reflects": true
-            },
-            {
-              "kind": "field",
-              "name": "ariaStateKey",
-              "type": {
-                "text": "string | undefined"
-              },
-              "description": "This property defines the ARIA state key, which will be toggled when the\nButton is set to `active`.\nThe default value is 'aria-pressed', which is commonly used for toggle buttons.\n\nConsumers can override this property to use a different ARIA state key if needed.\nIn case multiple aria attributes should be toggled, they can be passed in as\na comma separated string.\nFor example: `aria-pressed,aria-expanded`",
-              "default": "'aria-pressed' (when)",
-              "attribute": "ariaStateKey",
-              "reflects": true
-            },
-            {
-              "kind": "field",
-              "name": "type",
-              "type": {
-                "text": "ButtonType"
-              },
-              "description": "This property defines the type attribute for the button element.\nThe type attribute specifies the behavior of the button when it is clicked.\n- **submit**: The button submits the form data to the server.\n- **reset**: The button resets the form data to its initial state.\n- **button**: The button does nothing when clicked.",
-              "default": "button",
-              "attribute": "type",
-              "reflects": true
-            },
-            {
-              "kind": "method",
-              "name": "executeAction",
-              "privacy": "protected"
-            },
-            {
-              "kind": "method",
-              "name": "setActive",
-              "privacy": "protected",
-              "parameters": [
-                {
-                  "name": "element",
-                  "type": {
-                    "text": "HTMLElement"
-                  },
-                  "description": "The button element"
-                },
-                {
-                  "name": "active",
-                  "optional": true,
-                  "type": {
-                    "text": "boolean"
-                  },
-                  "description": "The active state of the element"
-                }
-              ],
-              "description": "Sets the ariaStateKey attributes based on the active state of the button."
-            },
-            {
-              "kind": "method",
-              "name": "setSoftDisabled",
-              "privacy": "private",
-              "parameters": [
-                {
-                  "name": "element",
-                  "type": {
-                    "text": "HTMLElement"
-                  },
-                  "description": "The button element."
-                },
-                {
-                  "name": "softDisabled",
-                  "optional": true,
-                  "type": {
-                    "text": "boolean"
-                  },
-                  "description": "The soft-disabled state."
-                }
-              ],
-              "description": "Sets the soft-disabled attribute for the button.\nWhen soft-disabled, the button looks to be disabled but remains focusable and clickable.\nAlso sets/removes aria-disabled attribute."
-            },
-            {
-              "kind": "method",
-              "name": "setDisabled",
-              "privacy": "private",
-              "parameters": [
-                {
-                  "name": "element",
-                  "type": {
-                    "text": "HTMLElement"
-                  },
-                  "description": "The button element."
-                },
-                {
-                  "name": "disabled",
-                  "type": {
-                    "text": "boolean"
-                  },
-                  "description": "The disabled state."
-                }
-              ],
-              "description": "Sets the disabled attribute for the button.\nWhen disabled, the button is not focusable or clickable, and tabindex is set to -1.\nThe previous tabindex is stored and restored when enabled.\nAlso sets/removes aria-disabled attribute."
-            },
-            {
-              "kind": "method",
-              "name": "triggerClickEvent",
-              "privacy": "private"
-            },
-            {
-              "kind": "method",
-              "name": "handleBlur",
-              "privacy": "private",
-              "description": "In case the button is pressed and the focus is lost while pressing,\nthe pressed class is removed."
-            },
-            {
-              "kind": "method",
-              "name": "handleKeyDown",
-              "privacy": "private",
-              "parameters": [
-                {
-                  "name": "event",
-                  "type": {
-                    "text": "KeyboardEvent"
-                  },
-                  "description": "The keyboard event."
-                }
-              ],
-              "description": "Handles the keydown event on the button.\nIf the key is 'Enter' or 'Space', the button is pressed.\nIf the key is 'Enter', the button is pressed. The native HTML button works in the same way.\nIf the key is 'Space', the button's default is prevent to avoid scrolling etc in the host application."
-            },
-            {
-              "kind": "method",
-              "name": "handleKeyUp",
-              "privacy": "private",
-              "parameters": [
-                {
-                  "name": "event",
-                  "type": {
-                    "text": "KeyboardEvent"
-                  },
-                  "description": "The keyboard event."
-                }
-              ],
-              "description": "Handles the keyup event on the button.\nIf the key is 'Enter' or 'Space', the button is clicked.\nIf the key is 'Space', the button is pressed. The native HTML button works in the same way."
-            },
-            {
-              "kind": "field",
-              "name": "autofocus",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "This property indicates whether the element should receive focus automatically when it is rendered.",
-              "attribute": "autofocus",
-              "reflects": true,
-              "inheritedFrom": {
-                "name": "AutoFocusMixin",
-                "module": "utils/mixins/AutoFocusMixin.js"
-              }
-            },
-            {
-              "kind": "field",
-              "name": "tabIndex",
-              "type": {
-                "text": "number"
-              },
-              "default": "0",
-              "description": "This property specifies the tab order of the element.",
-              "attribute": "tabIndex",
-              "reflects": true,
-              "inheritedFrom": {
-                "name": "TabIndexMixin",
-                "module": "utils/mixins/TabIndexMixin.js"
-              }
-            },
-            {
-              "kind": "field",
-              "name": "disabled",
-              "type": {
-                "text": "boolean | undefined"
-              },
-              "description": "Indicates whether the component is disabled.\nWhen the component is disabled for user interaction; it is not focusable or clickable.",
-              "default": "undefined",
-              "attribute": "disabled",
-              "reflects": true,
-              "inheritedFrom": {
-                "name": "DisabledMixin",
-                "module": "utils/mixins/DisabledMixin.js"
-              }
-            }
-          ],
-          "events": [
-            {
-              "description": "(React: onClick) This event is dispatched when the button is clicked.",
-              "name": "click",
-              "reactName": "onClick"
-            },
-            {
-              "description": "(React: onKeyDown) This event is dispatched when a key is pressed down on the button.",
-              "name": "keydown",
-              "reactName": "onKeyDown"
-            },
-            {
-              "description": "(React: onKeyUp) This event is dispatched when a key is released on the button.",
-              "name": "keyup",
-              "reactName": "onKeyUp"
-            },
-            {
-              "description": "(React: onFocus) This event is dispatched when the button receives focus.",
-              "name": "focus",
-              "reactName": "onFocus"
-            }
-          ],
-          "attributes": [
-            {
-              "name": "active",
-              "type": {
-                "text": "boolean | undefined"
-              },
-              "description": "The button's active state indicates whether it is currently toggled on (active) or off (inactive).\nWhen the active state is true, the button is considered to be in an active state, meaning it is toggled on.\nConversely, when the active state is false, the button is in an inactive state, indicating it is toggled off.\n\nThis attribute is used to set the provided `ariaStateKey` to true or false.",
-              "default": "undefined",
-              "fieldName": "active"
-            },
-            {
-              "name": "soft-disabled",
-              "type": {
-                "text": "boolean | undefined"
-              },
-              "description": "Indicates whether the button is soft disabled.\nWhen set to `true`, the button appears visually disabled but still allows\nfocus, click, and keyboard actions to be passed through.\n\n**Important:** When using soft disabled, consumers must ensure that\nthe button behaves like a disabled button, allowing only focus and\npreventing any interactions (clicks or keyboard actions) from triggering unintended actions.",
-              "default": "undefined",
-              "fieldName": "softDisabled"
-            },
-            {
-              "name": "size",
-              "type": {
-                "text": "ButtonSize"
-              },
-              "description": "Simplebutton size is a super set of all the sizes supported by children components.",
-              "default": "32",
-              "fieldName": "size"
-            },
-            {
-              "name": "role",
-              "description": "This property defines the ARIA role for the element. By default, it is set to 'button'.\nConsumers should override this role when:\n- The element is being used in a context where a different role is more appropriate.\n- Custom behaviors are implemented that require a specific ARIA role for accessibility purposes.",
-              "default": "button",
-              "fieldName": "role"
-            },
-            {
-              "name": "ariaStateKey",
-              "type": {
-                "text": "string | undefined"
-              },
-              "description": "This property defines the ARIA state key, which will be toggled when the\nButton is set to `active`.\nThe default value is 'aria-pressed', which is commonly used for toggle buttons.\n\nConsumers can override this property to use a different ARIA state key if needed.\nIn case multiple aria attributes should be toggled, they can be passed in as\na comma separated string.\nFor example: `aria-pressed,aria-expanded`",
-              "default": "'aria-pressed' (when)",
-              "fieldName": "ariaStateKey"
-            },
-            {
-              "name": "type",
-              "type": {
-                "text": "ButtonType"
-              },
-              "description": "This property defines the type attribute for the button element.\nThe type attribute specifies the behavior of the button when it is clicked.\n- **submit**: The button submits the form data to the server.\n- **reset**: The button resets the form data to its initial state.\n- **button**: The button does nothing when clicked.",
-              "default": "button",
-              "fieldName": "type"
-            },
-            {
-              "name": "autofocus",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "This property indicates whether the element should receive focus automatically when it is rendered.",
-              "fieldName": "autofocus",
-              "inheritedFrom": {
-                "name": "AutoFocusMixin",
-                "module": "src/utils/mixins/AutoFocusMixin.ts"
-              }
-            },
-            {
-              "name": "tabIndex",
-              "type": {
-                "text": "number"
-              },
-              "default": "0",
-              "description": "This property specifies the tab order of the element.",
-              "fieldName": "tabIndex",
-              "inheritedFrom": {
-                "name": "TabIndexMixin",
-                "module": "src/utils/mixins/TabIndexMixin.ts"
-              }
-            },
-            {
-              "name": "disabled",
-              "type": {
-                "text": "boolean | undefined"
-              },
-              "description": "Indicates whether the component is disabled.\nWhen the component is disabled for user interaction; it is not focusable or clickable.",
-              "default": "undefined",
-              "fieldName": "disabled",
-              "inheritedFrom": {
-                "name": "DisabledMixin",
-                "module": "src/utils/mixins/DisabledMixin.ts"
-              }
-            }
-          ],
-          "mixins": [
-            {
-              "name": "AutoFocusMixin",
-              "module": "/src/utils/mixins/AutoFocusMixin"
-            },
-            {
-              "name": "TabIndexMixin",
-              "module": "/src/utils/mixins/TabIndexMixin"
-            },
-            {
-              "name": "DisabledMixin",
-              "module": "/src/utils/mixins/DisabledMixin"
-            }
-          ],
-          "superclass": {
-            "name": "Component",
-            "module": "/src/models"
-          },
-          "tagName": "mdc-buttonsimple",
-          "jsDoc": "/**\n * `mdc-buttonsimple` is a component that can be configured in various ways to suit different use cases.\n * It is used as an internal component and is not intended to be used directly by consumers.\n * Consumers should use the `mdc-button` component instead.\n *\n * @event click - (React: onClick) This event is dispatched when the button is clicked.\n * @event keydown - (React: onKeyDown) This event is dispatched when a key is pressed down on the button.\n * @event keyup - (React: onKeyUp) This event is dispatched when a key is released on the button.\n * @event focus - (React: onFocus) This event is dispatched when the button receives focus.\n *\n * @tagname mdc-buttonsimple\n */",
-          "customElement": true
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "default",
-          "declaration": {
-            "name": "Buttonsimple",
-            "module": "components/buttonsimple/buttonsimple.component.js"
-          }
-        }
-      ]
-    },
     {
       "kind": "javascript-module",
       "path": "components/card/card.component.js",
@@ -4425,6 +4045,386 @@
         }
       ]
     },
+    {
+      "kind": "javascript-module",
+      "path": "components/buttonsimple/buttonsimple.component.js",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "`mdc-buttonsimple` is a component that can be configured in various ways to suit different use cases.\nIt is used as an internal component and is not intended to be used directly by consumers.\nConsumers should use the `mdc-button` component instead.",
+          "name": "Buttonsimple",
+          "members": [
+            {
+              "kind": "field",
+              "name": "active",
+              "type": {
+                "text": "boolean | undefined"
+              },
+              "description": "The button's active state indicates whether it is currently toggled on (active) or off (inactive).\nWhen the active state is true, the button is considered to be in an active state, meaning it is toggled on.\nConversely, when the active state is false, the button is in an inactive state, indicating it is toggled off.\n\nThis attribute is used to set the provided `ariaStateKey` to true or false.",
+              "default": "undefined",
+              "attribute": "active",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "softDisabled",
+              "type": {
+                "text": "boolean | undefined"
+              },
+              "description": "Indicates whether the button is soft disabled.\nWhen set to `true`, the button appears visually disabled but still allows\nfocus, click, and keyboard actions to be passed through.\n\n**Important:** When using soft disabled, consumers must ensure that\nthe button behaves like a disabled button, allowing only focus and\npreventing any interactions (clicks or keyboard actions) from triggering unintended actions.",
+              "default": "undefined",
+              "attribute": "soft-disabled",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "size",
+              "type": {
+                "text": "ButtonSize"
+              },
+              "description": "Simplebutton size is a super set of all the sizes supported by children components.",
+              "default": "32",
+              "attribute": "size",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "role",
+              "description": "This property defines the ARIA role for the element. By default, it is set to 'button'.\nConsumers should override this role when:\n- The element is being used in a context where a different role is more appropriate.\n- Custom behaviors are implemented that require a specific ARIA role for accessibility purposes.",
+              "default": "button",
+              "attribute": "role",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "ariaStateKey",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "This property defines the ARIA state key, which will be toggled when the\nButton is set to `active`.\nThe default value is 'aria-pressed', which is commonly used for toggle buttons.\n\nConsumers can override this property to use a different ARIA state key if needed.\nIn case multiple aria attributes should be toggled, they can be passed in as\na comma separated string.\nFor example: `aria-pressed,aria-expanded`",
+              "default": "'aria-pressed' (when)",
+              "attribute": "ariaStateKey",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "type",
+              "type": {
+                "text": "ButtonType"
+              },
+              "description": "This property defines the type attribute for the button element.\nThe type attribute specifies the behavior of the button when it is clicked.\n- **submit**: The button submits the form data to the server.\n- **reset**: The button resets the form data to its initial state.\n- **button**: The button does nothing when clicked.",
+              "default": "button",
+              "attribute": "type",
+              "reflects": true
+            },
+            {
+              "kind": "method",
+              "name": "executeAction",
+              "privacy": "protected"
+            },
+            {
+              "kind": "method",
+              "name": "setActive",
+              "privacy": "protected",
+              "parameters": [
+                {
+                  "name": "element",
+                  "type": {
+                    "text": "HTMLElement"
+                  },
+                  "description": "The button element"
+                },
+                {
+                  "name": "active",
+                  "optional": true,
+                  "type": {
+                    "text": "boolean"
+                  },
+                  "description": "The active state of the element"
+                }
+              ],
+              "description": "Sets the ariaStateKey attributes based on the active state of the button."
+            },
+            {
+              "kind": "method",
+              "name": "setSoftDisabled",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "element",
+                  "type": {
+                    "text": "HTMLElement"
+                  },
+                  "description": "The button element."
+                },
+                {
+                  "name": "softDisabled",
+                  "optional": true,
+                  "type": {
+                    "text": "boolean"
+                  },
+                  "description": "The soft-disabled state."
+                }
+              ],
+              "description": "Sets the soft-disabled attribute for the button.\nWhen soft-disabled, the button looks to be disabled but remains focusable and clickable.\nAlso sets/removes aria-disabled attribute."
+            },
+            {
+              "kind": "method",
+              "name": "setDisabled",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "element",
+                  "type": {
+                    "text": "HTMLElement"
+                  },
+                  "description": "The button element."
+                },
+                {
+                  "name": "disabled",
+                  "type": {
+                    "text": "boolean"
+                  },
+                  "description": "The disabled state."
+                }
+              ],
+              "description": "Sets the disabled attribute for the button.\nWhen disabled, the button is not focusable or clickable, and tabindex is set to -1.\nThe previous tabindex is stored and restored when enabled.\nAlso sets/removes aria-disabled attribute."
+            },
+            {
+              "kind": "method",
+              "name": "triggerClickEvent",
+              "privacy": "private"
+            },
+            {
+              "kind": "method",
+              "name": "handleBlur",
+              "privacy": "private",
+              "description": "In case the button is pressed and the focus is lost while pressing,\nthe pressed class is removed."
+            },
+            {
+              "kind": "method",
+              "name": "handleKeyDown",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "event",
+                  "type": {
+                    "text": "KeyboardEvent"
+                  },
+                  "description": "The keyboard event."
+                }
+              ],
+              "description": "Handles the keydown event on the button.\nIf the key is 'Enter' or 'Space', the button is pressed.\nIf the key is 'Enter', the button is pressed. The native HTML button works in the same way.\nIf the key is 'Space', the button's default is prevent to avoid scrolling etc in the host application."
+            },
+            {
+              "kind": "method",
+              "name": "handleKeyUp",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "event",
+                  "type": {
+                    "text": "KeyboardEvent"
+                  },
+                  "description": "The keyboard event."
+                }
+              ],
+              "description": "Handles the keyup event on the button.\nIf the key is 'Enter' or 'Space', the button is clicked.\nIf the key is 'Space', the button is pressed. The native HTML button works in the same way."
+            },
+            {
+              "kind": "field",
+              "name": "autofocus",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "This property indicates whether the element should receive focus automatically when it is rendered.",
+              "attribute": "autofocus",
+              "reflects": true,
+              "inheritedFrom": {
+                "name": "AutoFocusMixin",
+                "module": "utils/mixins/AutoFocusMixin.js"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "tabIndex",
+              "type": {
+                "text": "number"
+              },
+              "default": "0",
+              "description": "This property specifies the tab order of the element.",
+              "attribute": "tabIndex",
+              "reflects": true,
+              "inheritedFrom": {
+                "name": "TabIndexMixin",
+                "module": "utils/mixins/TabIndexMixin.js"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "disabled",
+              "type": {
+                "text": "boolean | undefined"
+              },
+              "description": "Indicates whether the component is disabled.\nWhen the component is disabled for user interaction; it is not focusable or clickable.",
+              "default": "undefined",
+              "attribute": "disabled",
+              "reflects": true,
+              "inheritedFrom": {
+                "name": "DisabledMixin",
+                "module": "utils/mixins/DisabledMixin.js"
+              }
+            }
+          ],
+          "events": [
+            {
+              "description": "(React: onClick) This event is dispatched when the button is clicked.",
+              "name": "click",
+              "reactName": "onClick"
+            },
+            {
+              "description": "(React: onKeyDown) This event is dispatched when a key is pressed down on the button.",
+              "name": "keydown",
+              "reactName": "onKeyDown"
+            },
+            {
+              "description": "(React: onKeyUp) This event is dispatched when a key is released on the button.",
+              "name": "keyup",
+              "reactName": "onKeyUp"
+            },
+            {
+              "description": "(React: onFocus) This event is dispatched when the button receives focus.",
+              "name": "focus",
+              "reactName": "onFocus"
+            }
+          ],
+          "attributes": [
+            {
+              "name": "active",
+              "type": {
+                "text": "boolean | undefined"
+              },
+              "description": "The button's active state indicates whether it is currently toggled on (active) or off (inactive).\nWhen the active state is true, the button is considered to be in an active state, meaning it is toggled on.\nConversely, when the active state is false, the button is in an inactive state, indicating it is toggled off.\n\nThis attribute is used to set the provided `ariaStateKey` to true or false.",
+              "default": "undefined",
+              "fieldName": "active"
+            },
+            {
+              "name": "soft-disabled",
+              "type": {
+                "text": "boolean | undefined"
+              },
+              "description": "Indicates whether the button is soft disabled.\nWhen set to `true`, the button appears visually disabled but still allows\nfocus, click, and keyboard actions to be passed through.\n\n**Important:** When using soft disabled, consumers must ensure that\nthe button behaves like a disabled button, allowing only focus and\npreventing any interactions (clicks or keyboard actions) from triggering unintended actions.",
+              "default": "undefined",
+              "fieldName": "softDisabled"
+            },
+            {
+              "name": "size",
+              "type": {
+                "text": "ButtonSize"
+              },
+              "description": "Simplebutton size is a super set of all the sizes supported by children components.",
+              "default": "32",
+              "fieldName": "size"
+            },
+            {
+              "name": "role",
+              "description": "This property defines the ARIA role for the element. By default, it is set to 'button'.\nConsumers should override this role when:\n- The element is being used in a context where a different role is more appropriate.\n- Custom behaviors are implemented that require a specific ARIA role for accessibility purposes.",
+              "default": "button",
+              "fieldName": "role"
+            },
+            {
+              "name": "ariaStateKey",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "This property defines the ARIA state key, which will be toggled when the\nButton is set to `active`.\nThe default value is 'aria-pressed', which is commonly used for toggle buttons.\n\nConsumers can override this property to use a different ARIA state key if needed.\nIn case multiple aria attributes should be toggled, they can be passed in as\na comma separated string.\nFor example: `aria-pressed,aria-expanded`",
+              "default": "'aria-pressed' (when)",
+              "fieldName": "ariaStateKey"
+            },
+            {
+              "name": "type",
+              "type": {
+                "text": "ButtonType"
+              },
+              "description": "This property defines the type attribute for the button element.\nThe type attribute specifies the behavior of the button when it is clicked.\n- **submit**: The button submits the form data to the server.\n- **reset**: The button resets the form data to its initial state.\n- **button**: The button does nothing when clicked.",
+              "default": "button",
+              "fieldName": "type"
+            },
+            {
+              "name": "autofocus",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "This property indicates whether the element should receive focus automatically when it is rendered.",
+              "fieldName": "autofocus",
+              "inheritedFrom": {
+                "name": "AutoFocusMixin",
+                "module": "src/utils/mixins/AutoFocusMixin.ts"
+              }
+            },
+            {
+              "name": "tabIndex",
+              "type": {
+                "text": "number"
+              },
+              "default": "0",
+              "description": "This property specifies the tab order of the element.",
+              "fieldName": "tabIndex",
+              "inheritedFrom": {
+                "name": "TabIndexMixin",
+                "module": "src/utils/mixins/TabIndexMixin.ts"
+              }
+            },
+            {
+              "name": "disabled",
+              "type": {
+                "text": "boolean | undefined"
+              },
+              "description": "Indicates whether the component is disabled.\nWhen the component is disabled for user interaction; it is not focusable or clickable.",
+              "default": "undefined",
+              "fieldName": "disabled",
+              "inheritedFrom": {
+                "name": "DisabledMixin",
+                "module": "src/utils/mixins/DisabledMixin.ts"
+              }
+            }
+          ],
+          "mixins": [
+            {
+              "name": "AutoFocusMixin",
+              "module": "/src/utils/mixins/AutoFocusMixin"
+            },
+            {
+              "name": "TabIndexMixin",
+              "module": "/src/utils/mixins/TabIndexMixin"
+            },
+            {
+              "name": "DisabledMixin",
+              "module": "/src/utils/mixins/DisabledMixin"
+            }
+          ],
+          "superclass": {
+            "name": "Component",
+            "module": "/src/models"
+          },
+          "tagName": "mdc-buttonsimple",
+          "jsDoc": "/**\n * `mdc-buttonsimple` is a component that can be configured in various ways to suit different use cases.\n * It is used as an internal component and is not intended to be used directly by consumers.\n * Consumers should use the `mdc-button` component instead.\n *\n * @event click - (React: onClick) This event is dispatched when the button is clicked.\n * @event keydown - (React: onKeyDown) This event is dispatched when a key is pressed down on the button.\n * @event keyup - (React: onKeyUp) This event is dispatched when a key is released on the button.\n * @event focus - (React: onFocus) This event is dispatched when the button receives focus.\n *\n * @tagname mdc-buttonsimple\n */",
+          "customElement": true
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "default",
+          "declaration": {
+            "name": "Buttonsimple",
+            "module": "components/buttonsimple/buttonsimple.component.js"
+          }
+        }
+      ]
+    },
     {
       "kind": "javascript-module",
       "path": "components/cardbutton/cardbutton.component.js",
@@ -22083,31 +22083,6 @@
               "privacy": "private",
               "description": "Listens to changes in the default slot and updates the label of the option accordingly.\nThis is used to set the label of the option when it is not explicitly set.\nIt is called internally when the slot is changed."
             },
-            {
-              "kind": "method",
-              "name": "updateAttribute",
-              "privacy": "private",
-              "return": {
-                "type": {
-                  "text": "void"
-                }
-              },
-              "parameters": [
-                {
-                  "name": "attributeName",
-                  "type": {
-                    "text": "string"
-                  }
-                },
-                {
-                  "name": "value",
-                  "type": {
-                    "text": "string"
-                  }
-                }
-              ],
-              "description": "Updates the attribute of the option to reflect the current state."
-            },
             {
               "kind": "field",
               "name": "name",
@@ -28232,26 +28207,6 @@
                 }
               ]
             },
-            {
-              "kind": "method",
-              "name": "handleKeydown",
-              "privacy": "private",
-              "return": {
-                "type": {
-                  "text": "void"
-                }
-              },
-              "parameters": [
-                {
-                  "name": "event",
-                  "type": {
-                    "text": "KeyboardEvent"
-                  },
-                  "description": "The keyboard event."
-                }
-              ],
-              "description": "Handles the keydown event on the select element.\nIf the popover is open, then it calls `handlePopoverOnOpen` with the event.\nIf the popover is closed, then it calls `handlePopoverOnClose` with the event."
-            },
             {
               "kind": "method",
               "name": "handlePopoverOnOpen",
@@ -28270,7 +28225,7 @@
                   "description": "The keyboard event."
                 }
               ],
-              "description": "Handles the keydown event on the select element when the popover is open.\nThe options are as follows:\n- SPACE or ENTER: Selects the currently active option and closes the popover.\n- ESCAPE: Closes the popover.\n- HOME: Sets focus and tabindex on the first option.\n- END: Sets focus and tabindex on the last option.\n- ARROW_DOWN, ARROW_UP, PAGE_DOWN, PAGE_UP: Handles navigation between options."
+              "description": "Handles the keydown event on the select element when the popover is open.\nThe options are as follows:\n- SPACE or ENTER: Selects the currently active option and closes the popover.\n- HOME: Sets focus and tabindex on the first option.\n- END: Sets focus and tabindex on the last option.\n- ARROW_DOWN, ARROW_UP, PAGE_DOWN, PAGE_UP: Handles navigation between options."
             },
             {
               "kind": "method",
@@ -34295,6 +34250,140 @@
         }
       ]
     },
+    {
+      "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": "onscroll",
+              "type": {
+                "text": "((this: GlobalEventHandlers, ev: Event) => void) | null"
+              },
+              "description": "Callback that gets called when user scrolls inside of list. This gives access to the scroll container element\nas well via the event. Particularly useful for\nhandling logic related when the user scrolls to the top or bottom of a list.",
+              "default": "null",
+              "attribute": "onscroll"
+            },
+            {
+              "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": "field",
+              "name": "virtualizerController",
+              "type": {
+                "text": "null"
+              },
+              "default": "null"
+            }
+          ],
+          "events": [
+            {
+              "description": "(React: onScroll) Event that gets called when user scrolls inside of list.",
+              "name": "onscroll",
+              "reactName": "onScroll"
+            }
+          ],
+          "attributes": [
+            {
+              "name": "onscroll",
+              "type": {
+                "text": "((this: GlobalEventHandlers, ev: Event) => void) | null"
+              },
+              "description": "Callback that gets called when user scrolls inside of list. This gives access to the scroll container element\nas well via the event. Particularly useful for\nhandling logic related when the user scrolls to the top or bottom of a list.",
+              "default": "null",
+              "fieldName": "onscroll"
+            },
+            {
+              "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 onscroll - (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",
@@ -36049,140 +36138,6 @@
         }
       ]
     },
-    {
-      "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": "onscroll",
-              "type": {
-                "text": "((this: GlobalEventHandlers, ev: Event) => void) | null"
-              },
-              "description": "Callback that gets called when user scrolls inside of list. This gives access to the scroll container element\nas well via the event. Particularly useful for\nhandling logic related when the user scrolls to the top or bottom of a list.",
-              "default": "null",
-              "attribute": "onscroll"
-            },
-            {
-              "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": "field",
-              "name": "virtualizerController",
-              "type": {
-                "text": "null"
-              },
-              "default": "null"
-            }
-          ],
-          "events": [
-            {
-              "description": "(React: onScroll) Event that gets called when user scrolls inside of list.",
-              "name": "onscroll",
-              "reactName": "onScroll"
-            }
-          ],
-          "attributes": [
-            {
-              "name": "onscroll",
-              "type": {
-                "text": "((this: GlobalEventHandlers, ev: Event) => void) | null"
-              },
-              "description": "Callback that gets called when user scrolls inside of list. This gives access to the scroll container element\nas well via the event. Particularly useful for\nhandling logic related when the user scrolls to the top or bottom of a list.",
-              "default": "null",
-              "fieldName": "onscroll"
-            },
-            {
-              "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 onscroll - (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": "utils/mixins/AutoFocusMixin.js",