@momentum-design/components 0.104.17 → 0.105.0

package/dist/custom-elements.json

@@ -16311,295 +16311,6 @@
         }
       ]
     },
-    {
-      "kind": "javascript-module",
-      "path": "components/linksimple/linksimple.component.js",
-      "declarations": [
-        {
-          "kind": "class",
-          "description": "`mdc-linksimple` is a lightweight link component that can be used to navigate\nwithin the application or to an external URL. It does not have any predefined default size.\n\nThe `children` of the `mdc-linksimple` component can be customized to suit\ndifferent use cases, including text, icons, or other inline content. For the child to be an icon,\nthe `mdc-icon` component should be used to render.",
-          "name": "Linksimple",
-          "cssProperties": [
-            {
-              "description": "Border radius of the link.",
-              "name": "--mdc-link-border-radius"
-            },
-            {
-              "description": "Color of the link’s child content in the active state.",
-              "name": "--mdc-link-color-active"
-            },
-            {
-              "description": "Color of the link’s child content in the disabled state.",
-              "name": "--mdc-link-color-disabled"
-            },
-            {
-              "description": "Color of the link’s child content in the hover state.",
-              "name": "--mdc-link-color-hover"
-            },
-            {
-              "description": "Color of the link’s child content in the normal state.",
-              "name": "--mdc-link-color-normal"
-            },
-            {
-              "description": "Color of the inverted link’s child content in the active state.",
-              "name": "--mdc-link-inverted-color-active"
-            },
-            {
-              "description": "Color of the inverted link’s child content in the disabled state.",
-              "name": "--mdc-link-inverted-color-disabled"
-            },
-            {
-              "description": "Color of the inverted link’s child content in the hover state.",
-              "name": "--mdc-link-inverted-color-hover"
-            },
-            {
-              "description": "Color of the inverted link’s child content in the normal state.",
-              "name": "--mdc-link-inverted-color-normal"
-            }
-          ],
-          "members": [
-            {
-              "kind": "field",
-              "name": "inline",
-              "type": {
-                "text": "boolean"
-              },
-              "description": "The link can be inline or standalone.",
-              "default": "false",
-              "attribute": "inline",
-              "reflects": true
-            },
-            {
-              "kind": "field",
-              "name": "inverted",
-              "type": {
-                "text": "boolean"
-              },
-              "description": "The link color can be inverted by setting the inverted attribute to true.",
-              "default": "false",
-              "attribute": "inverted",
-              "reflects": true
-            },
-            {
-              "kind": "field",
-              "name": "href",
-              "type": {
-                "text": "string"
-              },
-              "default": "'#'",
-              "description": "Href for navigation. The URL that the hyperlink points to",
-              "attribute": "href",
-              "reflects": true
-            },
-            {
-              "kind": "field",
-              "name": "target",
-              "type": {
-                "text": "string"
-              },
-              "default": "'_self'",
-              "description": "Optional target: _blank, _self, _parent, _top and _unfencedTop",
-              "attribute": "target",
-              "reflects": true
-            },
-            {
-              "kind": "field",
-              "name": "rel",
-              "type": {
-                "text": "string | undefined"
-              },
-              "description": "Optional rel attribute that defines the relationship of the linked URL as space-separated link types.",
-              "attribute": "rel",
-              "reflects": true
-            },
-            {
-              "kind": "method",
-              "name": "handleNavigation",
-              "privacy": "private",
-              "return": {
-                "type": {
-                  "text": "void"
-                }
-              },
-              "parameters": [
-                {
-                  "name": "e",
-                  "type": {
-                    "text": "MouseEvent | KeyboardEvent"
-                  }
-                }
-              ]
-            },
-            {
-              "kind": "method",
-              "name": "setDisabled",
-              "privacy": "private",
-              "parameters": [
-                {
-                  "name": "disabled",
-                  "type": {
-                    "text": "boolean"
-                  },
-                  "description": "Whether the element should be disabled"
-                }
-              ],
-              "description": "Sets or removes `aria-disabled` and updates `tabIndex` to reflect\nthe disabled state. When disabled, the element becomes unfocusable;\nwhen enabled, the previous `tabIndex` is restored."
-            },
-            {
-              "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"
-              }
-            },
-            {
-              "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"
-              }
-            }
-          ],
-          "events": [
-            {
-              "description": "(React: onClick) Fired when the user activates the buttonLink using a mouse or assistive technology.",
-              "name": "click",
-              "reactName": "onClick"
-            },
-            {
-              "description": "(React: onKeyDown) Fired when the user presses a key while the buttonLink has focus.",
-              "name": "keydown",
-              "reactName": "onKeyDown"
-            },
-            {
-              "description": "(React: onFocus) Fired when the buttonLink receives keyboard or mouse focus.",
-              "name": "focus",
-              "reactName": "onFocus"
-            },
-            {
-              "description": "(React: onBlur) Fired when the buttonLink loses keyboard or mouse focus.",
-              "name": "blur",
-              "reactName": "onBlur"
-            }
-          ],
-          "attributes": [
-            {
-              "name": "inline",
-              "type": {
-                "text": "boolean"
-              },
-              "description": "The link can be inline or standalone.",
-              "default": "false",
-              "fieldName": "inline"
-            },
-            {
-              "name": "inverted",
-              "type": {
-                "text": "boolean"
-              },
-              "description": "The link color can be inverted by setting the inverted attribute to true.",
-              "default": "false",
-              "fieldName": "inverted"
-            },
-            {
-              "name": "href",
-              "type": {
-                "text": "string"
-              },
-              "default": "'#'",
-              "description": "Href for navigation. The URL that the hyperlink points to",
-              "fieldName": "href"
-            },
-            {
-              "name": "target",
-              "type": {
-                "text": "string"
-              },
-              "default": "'_self'",
-              "description": "Optional target: _blank, _self, _parent, _top and _unfencedTop",
-              "fieldName": "target"
-            },
-            {
-              "name": "rel",
-              "type": {
-                "text": "string | undefined"
-              },
-              "description": "Optional rel attribute that defines the relationship of the linked URL as space-separated link types.",
-              "fieldName": "rel"
-            },
-            {
-              "name": "disabled",
-              "type": {
-                "text": "boolean | undefined"
-              },
-              "description": "Indicates whether the component is disabled.\nWhen the component is disabled for user interaction; it is not focusable or clickable.",
-              "default": "undefined",
-              "fieldName": "disabled",
-              "inheritedFrom": {
-                "name": "DisabledMixin",
-                "module": "src/utils/mixins/DisabledMixin.ts"
-              }
-            },
-            {
-              "name": "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"
-              }
-            }
-          ],
-          "mixins": [
-            {
-              "name": "DisabledMixin",
-              "module": "/src/utils/mixins/DisabledMixin"
-            },
-            {
-              "name": "TabIndexMixin",
-              "module": "/src/utils/mixins/TabIndexMixin"
-            }
-          ],
-          "superclass": {
-            "name": "Component",
-            "module": "/src/models"
-          },
-          "tagName": "mdc-linksimple",
-          "jsDoc": "/**\n * `mdc-linksimple` is a lightweight link component that can be used to navigate\n * within the application or to an external URL. It does not have any predefined default size.\n *\n * The `children` of the `mdc-linksimple` component can be customized to suit\n * different use cases, including text, icons, or other inline content. For the child to be an icon,\n * the `mdc-icon` component should be used to render.\n *\n * @tagname mdc-linksimple\n *\n * @event click - (React: onClick) Fired when the user activates the buttonLink using a mouse or assistive technology.\n * @event keydown - (React: onKeyDown) Fired when the user presses a key while the buttonLink has focus.\n * @event focus - (React: onFocus) Fired when the buttonLink receives keyboard or mouse focus.\n * @event blur - (React: onBlur) Fired when the buttonLink loses keyboard or mouse focus.\n *\n * @cssproperty --mdc-link-border-radius - Border radius of the link.\n * @cssproperty --mdc-link-color-active - Color of the link’s child content in the active state.\n * @cssproperty --mdc-link-color-disabled - Color of the link’s child content in the disabled state.\n * @cssproperty --mdc-link-color-hover - Color of the link’s child content in the hover state.\n * @cssproperty --mdc-link-color-normal - Color of the link’s child content in the normal state.\n * @cssproperty --mdc-link-inverted-color-active - Color of the inverted link’s child content in the active state.\n * @cssproperty --mdc-link-inverted-color-disabled - Color of the inverted link’s child content in the disabled state.\n * @cssproperty --mdc-link-inverted-color-hover - Color of the inverted link’s child content in the hover state.\n * @cssproperty --mdc-link-inverted-color-normal - Color of the inverted link’s child content in the normal state.\n */",
-          "customElement": true
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "default",
-          "declaration": {
-            "name": "Linksimple",
-            "module": "components/linksimple/linksimple.component.js"
-          }
-        }
-      ]
-    },
     {
       "kind": "javascript-module",
       "path": "components/list/list.component.js",
@@ -16749,8 +16460,292 @@
           "kind": "js",
           "name": "default",
           "declaration": {
-            "name": "List",
-            "module": "components/list/list.component.js"
+            "name": "List",
+            "module": "components/list/list.component.js"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "components/listbox/listbox.component.js",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "listbox component presents a list of options and allows a user to select one of them.\n\nNotes:\n- This is a standalone listbox component. Select has its own mdc-selectlistbox component.\n- this component has name and value attributes and also emits change event,\n  but it is not a form control (yet).",
+          "name": "ListBox",
+          "cssProperties": [
+            {
+              "description": "max height of the listbox",
+              "name": "--mdc-listbox-max-height"
+            }
+          ],
+          "cssParts": [
+            {
+              "description": "The container of the listbox",
+              "name": "container"
+            }
+          ],
+          "slots": [
+            {
+              "description": "This is a default/unnamed slot, where options and optgroups are placed",
+              "name": "default"
+            }
+          ],
+          "members": [
+            {
+              "kind": "field",
+              "name": "name",
+              "type": {
+                "text": "undefined | string | undefined"
+              },
+              "default": "undefined",
+              "description": "The name attribute is used to identify the listbox",
+              "attribute": "name",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "value",
+              "type": {
+                "text": "undefined | string | undefined"
+              },
+              "default": "undefined",
+              "description": "The value attribute is used to represent the last selected option's value in the listbox.",
+              "attribute": "value",
+              "reflects": true
+            },
+            {
+              "kind": "method",
+              "name": "setSelectedOption",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "option",
+                  "optional": true,
+                  "type": {
+                    "text": "Option | null"
+                  },
+                  "description": "The option element in DOM which gets selected."
+                },
+                {
+                  "name": "fireEvent",
+                  "default": "true",
+                  "description": "A boolean flag to indicate whether to fire the change event or not."
+                },
+                {
+                  "name": "updateOptions",
+                  "default": "true",
+                  "description": "Whether update the other options or not"
+                }
+              ],
+              "description": "When an option is selected, this method updates local and options' DOM state and fires the change event."
+            },
+            {
+              "kind": "method",
+              "name": "updateSelectedInChildOptions",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "selectedOption",
+                  "optional": true,
+                  "type": {
+                    "text": "Option | null"
+                  },
+                  "description": "The option which gets selected"
+                }
+              ],
+              "description": "Update all options selection state in the DDM."
+            },
+            {
+              "kind": "method",
+              "name": "fireEvents",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "description": "Dispatch change event when an option is selected."
+            },
+            {
+              "kind": "method",
+              "name": "getCurrentIndex",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": ""
+                }
+              },
+              "parameters": [
+                {
+                  "name": "target",
+                  "type": {
+                    "text": "EventTarget | null"
+                  },
+                  "description": "The target element that triggered the event."
+                }
+              ],
+              "description": "Retrieves the current index of the item that triggered the event.",
+              "inheritedFrom": {
+                "name": "ListNavigationMixin",
+                "module": "utils/mixins/ListNavigationMixin.js"
+              }
+            },
+            {
+              "kind": "method",
+              "name": "resetTabIndexes",
+              "privacy": "protected",
+              "parameters": [
+                {
+                  "name": "index",
+                  "type": {
+                    "text": "number"
+                  },
+                  "description": "The index of the currently focused item."
+                }
+              ],
+              "description": "Reset all tabindex to -1 and set the tabindex of the current item to 0",
+              "inheritedFrom": {
+                "name": "ListNavigationMixin",
+                "module": "utils/mixins/ListNavigationMixin.js"
+              }
+            },
+            {
+              "kind": "method",
+              "name": "resetTabIndexAndSetFocus",
+              "privacy": "protected",
+              "parameters": [
+                {
+                  "name": "newIndex",
+                  "type": {
+                    "text": "number"
+                  },
+                  "description": "The index of the new item to focus."
+                },
+                {
+                  "name": "oldIndex",
+                  "optional": true,
+                  "type": {
+                    "text": "number"
+                  },
+                  "description": "The index of the currently focused item."
+                },
+                {
+                  "name": "focusNewItem",
+                  "default": "true",
+                  "description": "Call focus() on the new item or not. It should be false during firstUpdate"
+                }
+              ],
+              "description": "Resets the tabindex of the currently focused item and sets focus to a new item.",
+              "return": {
+                "type": {
+                  "text": ""
+                }
+              },
+              "inheritedFrom": {
+                "name": "ListNavigationMixin",
+                "module": "utils/mixins/ListNavigationMixin.js"
+              }
+            },
+            {
+              "kind": "method",
+              "name": "resolveDirectionKey",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "key",
+                  "type": {
+                    "text": "string"
+                  },
+                  "description": "The key pressed by the user."
+                },
+                {
+                  "name": "isRtl",
+                  "type": {
+                    "text": "boolean"
+                  },
+                  "description": "A boolean indicating if the layout is right-to-left (RTL)."
+                }
+              ],
+              "description": "Resolves the key pressed by the user based on the direction of the layout.\nThis method is used to handle keyboard navigation in a right-to-left (RTL) layout.\nIt checks if the layout is RTL and adjusts the arrow keys accordingly.\nFor example, in RTL, the left arrow key behaves like the right arrow key and vice versa.",
+              "return": {
+                "type": {
+                  "text": ""
+                }
+              },
+              "inheritedFrom": {
+                "name": "ListNavigationMixin",
+                "module": "utils/mixins/ListNavigationMixin.js"
+              }
+            }
+          ],
+          "events": [
+            {
+              "name": "change",
+              "type": {
+                "text": "Event"
+              },
+              "description": "(React: onChange) This event is emitted when the selected item changed",
+              "reactName": "onChange"
+            }
+          ],
+          "attributes": [
+            {
+              "name": "name",
+              "type": {
+                "text": "undefined | string | undefined"
+              },
+              "default": "undefined",
+              "description": "The name attribute is used to identify the listbox",
+              "fieldName": "name"
+            },
+            {
+              "name": "value",
+              "type": {
+                "text": "undefined | string | undefined"
+              },
+              "default": "undefined",
+              "description": "The value attribute is used to represent the last selected option's value in the listbox.",
+              "fieldName": "value"
+            }
+          ],
+          "mixins": [
+            {
+              "name": "ListNavigationMixin",
+              "module": "/src/utils/mixins/ListNavigationMixin"
+            },
+            {
+              "name": "CaptureDestroyEventForChildElement",
+              "module": "/src/utils/mixins/lifecycle/CaptureDestroyEventForChildElement"
+            }
+          ],
+          "superclass": {
+            "name": "Component",
+            "module": "/src/models"
+          },
+          "tagName": "mdc-listbox",
+          "jsDoc": "/**\n * listbox component presents a list of options and allows a user to select one of them.\n *\n * Notes:\n * - This is a standalone listbox component. Select has its own mdc-selectlistbox component.\n * - this component has name and value attributes and also emits change event,\n *   but it is not a form control (yet).\n *\n * @dependency mdc-list\n * @dependency mdc-icon\n * @dependency mdc-text\n * @dependency mdc-option\n * @dependency mdc-optgroup\n *\n * @tagname mdc-listbox\n *\n * @cssproperty --mdc-listbox-max-height - max height of the listbox\n *\n * @slot default - This is a default/unnamed slot, where options and optgroups are placed\n *\n * @csspart container - The container of the listbox\n *\n * @event change - (React: onChange) This event is emitted when the selected item changed\n */",
+          "customElement": true
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "default",
+          "declaration": {
+            "name": "ListBox",
+            "module": "components/listbox/listbox.component.js"
           }
         }
       ]
@@ -16803,67 +16798,356 @@
               "attribute": "postfix-icon"
             },
             {
-              "kind": "field",
-              "name": "headerText",
+              "kind": "field",
+              "name": "headerText",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "Text to be rendered in the header",
+              "attribute": "header-text"
+            },
+            {
+              "kind": "field",
+              "name": "disabled",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Disables the header, making it visually styled as disabled.\n\nNOTE: slot content will still be interactive unless individually disabled.\nMake sure to handle the disabled state of any actionable elements inside the slot.",
+              "attribute": "disabled",
+              "reflects": true
+            }
+          ],
+          "attributes": [
+            {
+              "name": "prefix-icon",
+              "type": {
+                "text": "IconNames | undefined"
+              },
+              "description": "Name of the icon rendered before the text\n\nIf not provided, no icon will be rendered and text will be aligned to the start.",
+              "fieldName": "prefixIcon"
+            },
+            {
+              "name": "postfix-icon",
+              "type": {
+                "text": "IconNames | undefined"
+              },
+              "description": "Name of the icon rendered after the slot & text\n\nIf not provided, no icon will be rendered and content will be aligned to the end.",
+              "fieldName": "postfixIcon"
+            },
+            {
+              "name": "header-text",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "Text to be rendered in the header",
+              "fieldName": "headerText"
+            },
+            {
+              "name": "disabled",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Disables the header, making it visually styled as disabled.\n\nNOTE: slot content will still be interactive unless individually disabled.\nMake sure to handle the disabled state of any actionable elements inside the slot.",
+              "fieldName": "disabled"
+            }
+          ],
+          "superclass": {
+            "name": "Component",
+            "module": "/src/models"
+          },
+          "tagName": "mdc-listheader",
+          "jsDoc": "/**\n * Listheader component is used to display a header in a list.\n * It can include icons before and after the header text, and allows for additional content via slots.\n *\n * @tagname mdc-listheader\n *\n * @slot default - to pass in actionable content like buttons or links\n *\n * @cssproperty --mdc-listheader-height - height of the header\n * @cssproperty --mdc-listheader-padding - padding around the header content\n * @cssproperty --mdc-listheader-gap - gap between content\n */",
+          "customElement": true
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "default",
+          "declaration": {
+            "name": "Listheader",
+            "module": "components/listheader/listheader.component.js"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "components/linksimple/linksimple.component.js",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "`mdc-linksimple` is a lightweight link component that can be used to navigate\nwithin the application or to an external URL. It does not have any predefined default size.\n\nThe `children` of the `mdc-linksimple` component can be customized to suit\ndifferent use cases, including text, icons, or other inline content. For the child to be an icon,\nthe `mdc-icon` component should be used to render.",
+          "name": "Linksimple",
+          "cssProperties": [
+            {
+              "description": "Border radius of the link.",
+              "name": "--mdc-link-border-radius"
+            },
+            {
+              "description": "Color of the link’s child content in the active state.",
+              "name": "--mdc-link-color-active"
+            },
+            {
+              "description": "Color of the link’s child content in the disabled state.",
+              "name": "--mdc-link-color-disabled"
+            },
+            {
+              "description": "Color of the link’s child content in the hover state.",
+              "name": "--mdc-link-color-hover"
+            },
+            {
+              "description": "Color of the link’s child content in the normal state.",
+              "name": "--mdc-link-color-normal"
+            },
+            {
+              "description": "Color of the inverted link’s child content in the active state.",
+              "name": "--mdc-link-inverted-color-active"
+            },
+            {
+              "description": "Color of the inverted link’s child content in the disabled state.",
+              "name": "--mdc-link-inverted-color-disabled"
+            },
+            {
+              "description": "Color of the inverted link’s child content in the hover state.",
+              "name": "--mdc-link-inverted-color-hover"
+            },
+            {
+              "description": "Color of the inverted link’s child content in the normal state.",
+              "name": "--mdc-link-inverted-color-normal"
+            }
+          ],
+          "members": [
+            {
+              "kind": "field",
+              "name": "inline",
+              "type": {
+                "text": "boolean"
+              },
+              "description": "The link can be inline or standalone.",
+              "default": "false",
+              "attribute": "inline",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "inverted",
+              "type": {
+                "text": "boolean"
+              },
+              "description": "The link color can be inverted by setting the inverted attribute to true.",
+              "default": "false",
+              "attribute": "inverted",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "href",
+              "type": {
+                "text": "string"
+              },
+              "default": "'#'",
+              "description": "Href for navigation. The URL that the hyperlink points to",
+              "attribute": "href",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "target",
+              "type": {
+                "text": "string"
+              },
+              "default": "'_self'",
+              "description": "Optional target: _blank, _self, _parent, _top and _unfencedTop",
+              "attribute": "target",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "rel",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "Optional rel attribute that defines the relationship of the linked URL as space-separated link types.",
+              "attribute": "rel",
+              "reflects": true
+            },
+            {
+              "kind": "method",
+              "name": "handleNavigation",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "e",
+                  "type": {
+                    "text": "MouseEvent | KeyboardEvent"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "setDisabled",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "disabled",
+                  "type": {
+                    "text": "boolean"
+                  },
+                  "description": "Whether the element should be disabled"
+                }
+              ],
+              "description": "Sets or removes `aria-disabled` and updates `tabIndex` to reflect\nthe disabled state. When disabled, the element becomes unfocusable;\nwhen enabled, the previous `tabIndex` is restored."
+            },
+            {
+              "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"
+              }
+            },
+            {
+              "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"
+              }
+            }
+          ],
+          "events": [
+            {
+              "description": "(React: onClick) Fired when the user activates the buttonLink using a mouse or assistive technology.",
+              "name": "click",
+              "reactName": "onClick"
+            },
+            {
+              "description": "(React: onKeyDown) Fired when the user presses a key while the buttonLink has focus.",
+              "name": "keydown",
+              "reactName": "onKeyDown"
+            },
+            {
+              "description": "(React: onFocus) Fired when the buttonLink receives keyboard or mouse focus.",
+              "name": "focus",
+              "reactName": "onFocus"
+            },
+            {
+              "description": "(React: onBlur) Fired when the buttonLink loses keyboard or mouse focus.",
+              "name": "blur",
+              "reactName": "onBlur"
+            }
+          ],
+          "attributes": [
+            {
+              "name": "inline",
               "type": {
-                "text": "string | undefined"
+                "text": "boolean"
               },
-              "description": "Text to be rendered in the header",
-              "attribute": "header-text"
+              "description": "The link can be inline or standalone.",
+              "default": "false",
+              "fieldName": "inline"
             },
             {
-              "kind": "field",
-              "name": "disabled",
+              "name": "inverted",
               "type": {
                 "text": "boolean"
               },
+              "description": "The link color can be inverted by setting the inverted attribute to true.",
               "default": "false",
-              "description": "Disables the header, making it visually styled as disabled.\n\nNOTE: slot content will still be interactive unless individually disabled.\nMake sure to handle the disabled state of any actionable elements inside the slot.",
-              "attribute": "disabled",
-              "reflects": true
-            }
-          ],
-          "attributes": [
+              "fieldName": "inverted"
+            },
             {
-              "name": "prefix-icon",
+              "name": "href",
               "type": {
-                "text": "IconNames | undefined"
+                "text": "string"
               },
-              "description": "Name of the icon rendered before the text\n\nIf not provided, no icon will be rendered and text will be aligned to the start.",
-              "fieldName": "prefixIcon"
+              "default": "'#'",
+              "description": "Href for navigation. The URL that the hyperlink points to",
+              "fieldName": "href"
             },
             {
-              "name": "postfix-icon",
+              "name": "target",
               "type": {
-                "text": "IconNames | undefined"
+                "text": "string"
               },
-              "description": "Name of the icon rendered after the slot & text\n\nIf not provided, no icon will be rendered and content will be aligned to the end.",
-              "fieldName": "postfixIcon"
+              "default": "'_self'",
+              "description": "Optional target: _blank, _self, _parent, _top and _unfencedTop",
+              "fieldName": "target"
             },
             {
-              "name": "header-text",
+              "name": "rel",
               "type": {
                 "text": "string | undefined"
               },
-              "description": "Text to be rendered in the header",
-              "fieldName": "headerText"
+              "description": "Optional rel attribute that defines the relationship of the linked URL as space-separated link types.",
+              "fieldName": "rel"
             },
             {
               "name": "disabled",
               "type": {
-                "text": "boolean"
+                "text": "boolean | undefined"
               },
-              "default": "false",
-              "description": "Disables the header, making it visually styled as disabled.\n\nNOTE: slot content will still be interactive unless individually disabled.\nMake sure to handle the disabled state of any actionable elements inside the slot.",
-              "fieldName": "disabled"
+              "description": "Indicates whether the component is disabled.\nWhen the component is disabled for user interaction; it is not focusable or clickable.",
+              "default": "undefined",
+              "fieldName": "disabled",
+              "inheritedFrom": {
+                "name": "DisabledMixin",
+                "module": "src/utils/mixins/DisabledMixin.ts"
+              }
+            },
+            {
+              "name": "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"
+              }
+            }
+          ],
+          "mixins": [
+            {
+              "name": "DisabledMixin",
+              "module": "/src/utils/mixins/DisabledMixin"
+            },
+            {
+              "name": "TabIndexMixin",
+              "module": "/src/utils/mixins/TabIndexMixin"
             }
           ],
           "superclass": {
             "name": "Component",
             "module": "/src/models"
           },
-          "tagName": "mdc-listheader",
-          "jsDoc": "/**\n * Listheader component is used to display a header in a list.\n * It can include icons before and after the header text, and allows for additional content via slots.\n *\n * @tagname mdc-listheader\n *\n * @slot default - to pass in actionable content like buttons or links\n *\n * @cssproperty --mdc-listheader-height - height of the header\n * @cssproperty --mdc-listheader-padding - padding around the header content\n * @cssproperty --mdc-listheader-gap - gap between content\n */",
+          "tagName": "mdc-linksimple",
+          "jsDoc": "/**\n * `mdc-linksimple` is a lightweight link component that can be used to navigate\n * within the application or to an external URL. It does not have any predefined default size.\n *\n * The `children` of the `mdc-linksimple` component can be customized to suit\n * different use cases, including text, icons, or other inline content. For the child to be an icon,\n * the `mdc-icon` component should be used to render.\n *\n * @tagname mdc-linksimple\n *\n * @event click - (React: onClick) Fired when the user activates the buttonLink using a mouse or assistive technology.\n * @event keydown - (React: onKeyDown) Fired when the user presses a key while the buttonLink has focus.\n * @event focus - (React: onFocus) Fired when the buttonLink receives keyboard or mouse focus.\n * @event blur - (React: onBlur) Fired when the buttonLink loses keyboard or mouse focus.\n *\n * @cssproperty --mdc-link-border-radius - Border radius of the link.\n * @cssproperty --mdc-link-color-active - Color of the link’s child content in the active state.\n * @cssproperty --mdc-link-color-disabled - Color of the link’s child content in the disabled state.\n * @cssproperty --mdc-link-color-hover - Color of the link’s child content in the hover state.\n * @cssproperty --mdc-link-color-normal - Color of the link’s child content in the normal state.\n * @cssproperty --mdc-link-inverted-color-active - Color of the inverted link’s child content in the active state.\n * @cssproperty --mdc-link-inverted-color-disabled - Color of the inverted link’s child content in the disabled state.\n * @cssproperty --mdc-link-inverted-color-hover - Color of the inverted link’s child content in the hover state.\n * @cssproperty --mdc-link-inverted-color-normal - Color of the inverted link’s child content in the normal state.\n */",
           "customElement": true
         }
       ],
@@ -16872,8 +17156,8 @@
           "kind": "js",
           "name": "default",
           "declaration": {
-            "name": "Listheader",
-            "module": "components/listheader/listheader.component.js"
+            "name": "Linksimple",
+            "module": "components/linksimple/linksimple.component.js"
           }
         }
       ]
@@ -17413,6 +17697,10 @@
             {
               "name": "TabIndexMixin",
               "module": "/src/utils/mixins/TabIndexMixin"
+            },
+            {
+              "name": "LifeCycleMixin",
+              "module": "/src/utils/mixins/lifecycle/LifeCycleMixin"
             }
           ],
           "superclass": {
@@ -42014,100 +42302,234 @@
               }
             },
             {
-              "name": "role",
+              "name": "role",
+              "type": {
+                "text": "HTMLElement['role']"
+              },
+              "description": "Role of the popover",
+              "default": "dialog",
+              "fieldName": "role",
+              "inheritedFrom": {
+                "name": "Popover",
+                "module": "src/components/popover/popover.component.ts"
+              }
+            },
+            {
+              "name": "aria-labelledby",
+              "type": {
+                "text": "string | null"
+              },
+              "default": "null",
+              "description": "aria-labelledby for an interactive popover only, defaults to the trigger component id.\nUsed in nested cases where the triggerComponent isn't the actual button.",
+              "fieldName": "ariaLabelledby",
+              "inheritedFrom": {
+                "name": "Popover",
+                "module": "src/components/popover/popover.component.ts"
+              }
+            },
+            {
+              "name": "aria-describedby",
+              "type": {
+                "text": "string | null"
+              },
+              "default": "null",
+              "description": "aria-describedby of the popover.",
+              "fieldName": "ariaDescribedby",
+              "inheritedFrom": {
+                "name": "Popover",
+                "module": "src/components/popover/popover.component.ts"
+              }
+            },
+            {
+              "name": "disable-aria-expanded",
+              "type": {
+                "text": "boolean"
+              },
+              "description": "Disable setting the aria-expanded attribute on trigger element.\nMake sure to set this to false when the popover is interactive.",
+              "default": "false",
+              "fieldName": "disableAriaExpanded",
+              "inheritedFrom": {
+                "name": "Popover",
+                "module": "src/components/popover/popover.component.ts"
+              }
+            },
+            {
+              "name": "disable-aria-haspopup",
+              "type": {
+                "text": "boolean"
+              },
+              "description": "Disable setting the aria-haspopup attribute on trigger element.\nMake sure to set this to true when the popover is extended and its role\nis not 'dialog' or 'alertdialog' i.e. listbox, menu, etc.",
+              "default": "false",
+              "fieldName": "disableAriaHasPopup",
+              "inheritedFrom": {
+                "name": "Popover",
+                "module": "src/components/popover/popover.component.ts"
+              }
+            },
+            {
+              "name": "keep-connected-tooltip-closed",
+              "type": {
+                "text": "boolean"
+              },
+              "description": "If a tooltip is connected to the same trigger element,\nthis property will keep the connected tooltip closed if this popover is open.\nThis is useful when you want to show a popover with a tooltip\nbut you don't want the tooltip to be shown at the same time.",
+              "fieldName": "keepConnectedTooltipClosed",
+              "inheritedFrom": {
+                "name": "Popover",
+                "module": "src/components/popover/popover.component.ts"
+              }
+            }
+          ],
+          "superclass": {
+            "name": "Popover",
+            "module": "/src/components/popover/popover.component"
+          },
+          "tagName": "mdc-tooltip",
+          "jsDoc": "/**\n * A tooltip is triggered by mouse hover or by keyboard focus\n * and will disappear upon mouse exit or focus change.\n *\n * Note: Tooltips cannot contain content that can be focused or interacted with.\n *\n * @tagname mdc-tooltip\n *\n * @event shown - (React: onShown) This event is dispatched when the tooltip is shown\n * @event hidden - (React: onHidden) This event is dispatched when the tooltip is hidden\n * @event created - (React: onCreated) This event is dispatched when the tooltip is created (added to the DOM)\n * @event destroyed - (React: onDestroyed) This event is dispatched when the tooltip is destroyed (removed from the DOM)\n *\n * @cssproperty --mdc-tooltip-max-width - The maximum width of the tooltip.\n * @cssproperty --mdc-tooltip-padding - The padding of the tooltip.\n * @cssproperty --mdc-tooltip-text-color - The text color of the tooltip.\n * @cssproperty --mdc-tooltip-text-color-contrast - The text color of the tooltip when the color is contrast.\n *\n */",
+          "customElement": true,
+          "slots": [
+            {
+              "description": "Default slot for the popover content",
+              "name": "",
+              "inheritedFrom": {
+                "name": "Popover",
+                "module": "src/components/popover/popover.component.ts"
+              }
+            }
+          ]
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "default",
+          "declaration": {
+            "name": "Tooltip",
+            "module": "components/tooltip/tooltip.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": "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": "HTMLElement['role']"
+                "text": "Virtualizer<Element, Element> | null"
               },
-              "description": "Role of the popover",
-              "default": "dialog",
-              "fieldName": "role",
-              "inheritedFrom": {
-                "name": "Popover",
-                "module": "src/components/popover/popover.component.ts"
-              }
+              "privacy": "public",
+              "default": "null"
             },
             {
-              "name": "aria-labelledby",
+              "kind": "field",
+              "name": "virtualItems",
               "type": {
-                "text": "string | null"
+                "text": "Array<VirtualItem>"
               },
-              "default": "null",
-              "description": "aria-labelledby for an interactive popover only, defaults to the trigger component id.\nUsed in nested cases where the triggerComponent isn't the actual button.",
-              "fieldName": "ariaLabelledby",
-              "inheritedFrom": {
-                "name": "Popover",
-                "module": "src/components/popover/popover.component.ts"
-              }
+              "privacy": "public",
+              "default": "[]"
             },
             {
-              "name": "aria-describedby",
+              "kind": "field",
+              "name": "virtualizerController",
               "type": {
-                "text": "string | null"
+                "text": "null"
               },
-              "default": "null",
-              "description": "aria-describedby of the popover.",
-              "fieldName": "ariaDescribedby",
-              "inheritedFrom": {
-                "name": "Popover",
-                "module": "src/components/popover/popover.component.ts"
-              }
-            },
+              "default": "null"
+            }
+          ],
+          "events": [
             {
-              "name": "disable-aria-expanded",
+              "description": "(React: onScroll) Event that gets called when user scrolls inside of list.",
+              "name": "onscroll",
+              "reactName": "onScroll"
+            }
+          ],
+          "attributes": [
+            {
+              "name": "onscroll",
               "type": {
-                "text": "boolean"
+                "text": "((this: GlobalEventHandlers, ev: Event) => void) | null"
               },
-              "description": "Disable setting the aria-expanded attribute on trigger element.\nMake sure to set this to false when the popover is interactive.",
-              "default": "false",
-              "fieldName": "disableAriaExpanded",
-              "inheritedFrom": {
-                "name": "Popover",
-                "module": "src/components/popover/popover.component.ts"
-              }
+              "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": "disable-aria-haspopup",
+              "name": "virtualizerprops",
               "type": {
-                "text": "boolean"
+                "text": "VirtualizerProps"
               },
-              "description": "Disable setting the aria-haspopup attribute on trigger element.\nMake sure to set this to true when the popover is extended and its role\nis not 'dialog' or 'alertdialog' i.e. listbox, menu, etc.",
-              "default": "false",
-              "fieldName": "disableAriaHasPopup",
-              "inheritedFrom": {
-                "name": "Popover",
-                "module": "src/components/popover/popover.component.ts"
-              }
+              "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": "keep-connected-tooltip-closed",
+              "name": "setlistdata",
               "type": {
-                "text": "boolean"
+                "text": "(({ virtualItems, measureElement, listStyle }: SetListDataProps) => void) | null"
               },
-              "description": "If a tooltip is connected to the same trigger element,\nthis property will keep the connected tooltip closed if this popover is open.\nThis is useful when you want to show a popover with a tooltip\nbut you don't want the tooltip to be shown at the same time.",
-              "fieldName": "keepConnectedTooltipClosed",
-              "inheritedFrom": {
-                "name": "Popover",
-                "module": "src/components/popover/popover.component.ts"
-              }
+              "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": "Popover",
-            "module": "/src/components/popover/popover.component"
+            "name": "Component",
+            "module": "/src/models"
           },
-          "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-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": [
@@ -42115,8 +42537,8 @@
           "kind": "js",
           "name": "default",
           "declaration": {
-            "name": "Tooltip",
-            "module": "components/tooltip/tooltip.component.js"
+            "name": "VirtualizedList",
+            "module": "components/virtualizedlist/virtualizedlist.component.js"
           }
         }
       ]
@@ -42411,172 +42833,38 @@
               "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": "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",
+              "name": "tagname",
               "type": {
-                "text": "((this: GlobalEventHandlers, ev: Event) => void) | null"
+                "text": "TagName | undefined"
               },
-              "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"
+              "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": "virtualizerprops",
+              "name": "speed",
               "type": {
-                "text": "VirtualizerProps"
+                "text": "TypewriterSpeed"
               },
-              "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"
+              "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": "setlistdata",
+              "name": "max-queue-size",
               "type": {
-                "text": "(({ virtualItems, measureElement, listStyle }: SetListDataProps) => void) | null"
+                "text": "number"
               },
-              "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"
+              "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-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 */",
+          "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
         }
       ],
@@ -42585,8 +42873,8 @@
           "kind": "js",
           "name": "default",
           "declaration": {
-            "name": "VirtualizedList",
-            "module": "components/virtualizedlist/virtualizedlist.component.js"
+            "name": "Typewriter",
+            "module": "components/typewriter/typewriter.component.js"
           }
         }
       ]
@@ -44292,15 +44580,242 @@
           "name": "FooterMixin",
           "members": [
             {
-              "kind": "method",
-              "name": "renderFooter",
-              "privacy": "protected",
-              "description": "Renders the footer of the card if footer-link,\nfooter-button-primary, or footer-button-secondary slots are provided",
-              "return": {
-                "type": {
-                  "text": ""
-                }
-              }
+              "kind": "method",
+              "name": "renderFooter",
+              "privacy": "protected",
+              "description": "Renders the footer of the card if footer-link,\nfooter-button-primary, or footer-button-secondary slots are provided",
+              "return": {
+                "type": {
+                  "text": ""
+                }
+              }
+            }
+          ],
+          "parameters": [
+            {
+              "name": "superClass",
+              "type": {
+                "text": "T"
+              }
+            }
+          ]
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "FooterMixinInterface",
+          "declaration": {
+            "name": "FooterMixinInterface",
+            "module": "utils/mixins/FooterMixin.js"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "FooterMixin",
+          "declaration": {
+            "name": "FooterMixin",
+            "module": "utils/mixins/FooterMixin.js"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "utils/mixins/FormInternalsMixin.js",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "",
+          "name": "FormInternalsMixinInterface",
+          "members": [
+            {
+              "kind": "field",
+              "name": "name",
+              "type": {
+                "text": "string"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "value",
+              "type": {
+                "text": "string"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "form",
+              "type": {
+                "text": "HTMLFormElement | null"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "validity",
+              "type": {
+                "text": "ValidityState"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "validationMessage",
+              "type": {
+                "text": "string"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "willValidate",
+              "type": {
+                "text": "boolean"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "internals",
+              "type": {
+                "text": "ElementInternals"
+              },
+              "privacy": "protected"
+            },
+            {
+              "kind": "field",
+              "name": "inputElement",
+              "type": {
+                "text": "HTMLInputElement | HTMLTextAreaElement"
+              },
+              "privacy": "protected"
+            },
+            {
+              "kind": "method",
+              "name": "setValidity",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              }
+            },
+            {
+              "kind": "method",
+              "name": "checkValidity",
+              "return": {
+                "type": {
+                  "text": "boolean"
+                }
+              }
+            },
+            {
+              "kind": "method",
+              "name": "reportValidity",
+              "return": {
+                "type": {
+                  "text": "boolean"
+                }
+              }
+            }
+          ]
+        },
+        {
+          "kind": "mixin",
+          "description": "",
+          "name": "FormInternalsMixin",
+          "members": [
+            {
+              "kind": "field",
+              "name": "name",
+              "type": {
+                "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
+            },
+            {
+              "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
+            },
+            {
+              "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
+            },
+            {
+              "kind": "field",
+              "name": "validity",
+              "type": {
+                "text": "ValidityState"
+              },
+              "readonly": true
+            },
+            {
+              "kind": "field",
+              "name": "willValidate",
+              "readonly": true
+            },
+            {
+              "kind": "method",
+              "name": "setValidity",
+              "description": "Sets the validity of the input field based on the input field's validity.",
+              "return": {
+                "type": {
+                  "text": ""
+                }
+              }
+            },
+            {
+              "kind": "method",
+              "name": "checkValidity",
+              "return": {
+                "type": {
+                  "text": "boolean"
+                }
+              }
+            },
+            {
+              "kind": "method",
+              "name": "reportValidity"
+            }
+          ],
+          "attributes": [
+            {
+              "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"
+            },
+            {
+              "name": "value",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "description": "Indicates the value of the component group (ex: input, checkbox, radio, select etc...)",
+              "fieldName": "value"
+            },
+            {
+              "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"
             }
           ],
           "parameters": [
@@ -44316,218 +44831,308 @@
       "exports": [
         {
           "kind": "js",
-          "name": "FooterMixinInterface",
+          "name": "FormInternalsMixinInterface",
           "declaration": {
-            "name": "FooterMixinInterface",
-            "module": "utils/mixins/FooterMixin.js"
+            "name": "FormInternalsMixinInterface",
+            "module": "utils/mixins/FormInternalsMixin.js"
           }
         },
         {
           "kind": "js",
-          "name": "FooterMixin",
+          "name": "FormInternalsMixin",
           "declaration": {
-            "name": "FooterMixin",
-            "module": "utils/mixins/FooterMixin.js"
+            "name": "FormInternalsMixin",
+            "module": "utils/mixins/FormInternalsMixin.js"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "utils/mixins/FormInternalsMixin.js",
+      "path": "utils/mixins/IconNameMixin.js",
       "declarations": [
         {
-          "kind": "class",
+          "kind": "mixin",
           "description": "",
-          "name": "FormInternalsMixinInterface",
+          "name": "IconNameMixin",
           "members": [
             {
               "kind": "field",
-              "name": "name",
-              "type": {
-                "text": "string"
-              }
-            },
-            {
-              "kind": "field",
-              "name": "value",
-              "type": {
-                "text": "string"
-              }
-            },
-            {
-              "kind": "field",
-              "name": "form",
-              "type": {
-                "text": "HTMLFormElement | null"
-              }
-            },
-            {
-              "kind": "field",
-              "name": "validity",
+              "name": "iconName",
               "type": {
-                "text": "ValidityState"
-              }
-            },
+                "text": "IconNames | undefined"
+              },
+              "description": "Name of the icon (= filename).\n\nIf no `icon-name` is provided, no icon will be rendered.",
+              "attribute": "icon-name"
+            }
+          ],
+          "attributes": [
             {
-              "kind": "field",
-              "name": "validationMessage",
+              "name": "icon-name",
               "type": {
-                "text": "string"
-              }
-            },
+                "text": "IconNames | undefined"
+              },
+              "description": "Name of the icon (= filename).\n\nIf no `icon-name` is provided, no icon will be rendered.",
+              "fieldName": "iconName"
+            }
+          ],
+          "parameters": [
             {
-              "kind": "field",
-              "name": "willValidate",
+              "name": "superClass",
               "type": {
-                "text": "boolean"
+                "text": "T"
               }
-            },
+            }
+          ]
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "IconNameMixin",
+          "declaration": {
+            "name": "IconNameMixin",
+            "module": "utils/mixins/IconNameMixin.js"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "utils/mixins/ItemCollectionMixin.js",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "",
+          "name": "ItemCollectionMixinInterface",
+          "members": [
             {
               "kind": "field",
-              "name": "internals",
+              "name": "items",
               "type": {
-                "text": "ElementInternals"
+                "text": "TItem[]"
               },
-              "privacy": "protected"
+              "privacy": "public",
+              "description": "List of items (cached)",
+              "readonly": true
             },
             {
-              "kind": "field",
-              "name": "inputElement",
-              "type": {
-                "text": "HTMLInputElement | HTMLTextAreaElement"
+              "kind": "method",
+              "name": "isValidItem",
+              "privacy": "protected",
+              "return": {
+                "type": {
+                  "text": ""
+                }
               },
-              "privacy": "protected"
+              "parameters": [
+                {
+                  "name": "item",
+                  "type": {
+                    "text": "Element"
+                  },
+                  "description": "The item to validate."
+                }
+              ],
+              "description": "Checks if the item is valid.\nInvalid items will not be collected or processed.\nThis method can be overridden by subclasses to define custom validation logic."
             },
             {
               "kind": "method",
-              "name": "setValidity",
+              "name": "addItemToCacheAt",
+              "privacy": "protected",
               "return": {
                 "type": {
                   "text": "void"
                 }
-              }
+              },
+              "parameters": [
+                {
+                  "name": "item",
+                  "type": {
+                    "text": "Element"
+                  },
+                  "description": "The item to add to the cache."
+                },
+                {
+                  "name": "index",
+                  "optional": true,
+                  "type": {
+                    "text": "number"
+                  },
+                  "description": "The index at which to add the item. If -1, adds to the end."
+                }
+              ],
+              "description": "Adds an item to the cache at the specified index.\nWhen the index\n is `undefined`, the item is added automatically keeping the DOM order.\n is `-1`, the item is added to the end of the cache.\n is `>= 0`, the item is added at that index.\n otherwise, do nothing."
             },
             {
               "kind": "method",
-              "name": "checkValidity",
+              "name": "removeItemFromCache",
+              "privacy": "protected",
               "return": {
                 "type": {
-                  "text": "boolean"
+                  "text": "void"
                 }
-              }
+              },
+              "parameters": [
+                {
+                  "name": "item",
+                  "type": {
+                    "text": "Element"
+                  },
+                  "description": "The item to remove from the cache."
+                }
+              ],
+              "description": "Removes an item from the cache."
             },
             {
               "kind": "method",
-              "name": "reportValidity",
+              "name": "setItemCache",
+              "privacy": "protected",
               "return": {
                 "type": {
-                  "text": "boolean"
+                  "text": "void"
                 }
-              }
+              },
+              "parameters": [
+                {
+                  "name": "items",
+                  "optional": true,
+                  "type": {
+                    "text": "TItem[]"
+                  },
+                  "description": "The items to set in the cache."
+                }
+              ],
+              "description": "Sets the item cache to the provided items.\nIf no items are provided, it clears the cache."
             }
           ]
         },
         {
           "kind": "mixin",
-          "description": "",
-          "name": "FormInternalsMixin",
+          "description": "This mixin collects and cache items based on the `created` and `destroyed` lifecycle events.\nAlso provides methods to manage the item cache.",
+          "name": "ItemCollectionMixin",
           "members": [
             {
               "kind": "field",
-              "name": "name",
+              "name": "itemCache",
               "type": {
-                "text": "string"
+                "text": "TItem[]"
               },
-              "default": "''",
-              "description": "Indicates the name of the component group.\nThey are used to group elements in a form together.",
-              "attribute": "name",
-              "reflects": true
+              "privacy": "private",
+              "default": "[]"
             },
             {
               "kind": "field",
-              "name": "value",
+              "name": "items",
               "type": {
-                "text": "string"
+                "text": "TItem[]"
               },
-              "default": "''",
-              "description": "Indicates the value of the component group (ex: input, checkbox, radio, select etc...)",
-              "attribute": "value",
-              "reflects": true
+              "privacy": "protected",
+              "readonly": true
             },
             {
-              "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
+              "kind": "method",
+              "name": "itemCreationHandler",
+              "privacy": "protected",
+              "parameters": [
+                {
+                  "name": "event",
+                  "type": {
+                    "text": "Event"
+                  },
+                  "description": "The event triggered when an item is created."
+                }
+              ],
+              "description": "Handles the item creation event."
             },
             {
-              "kind": "field",
-              "name": "validity",
-              "type": {
-                "text": "ValidityState"
+              "kind": "method",
+              "name": "itemDestroyHandler",
+              "privacy": "protected",
+              "parameters": [
+                {
+                  "name": "event",
+                  "type": {
+                    "text": "Event"
+                  },
+                  "description": "The event triggered when an item is destroyed."
+                }
+              ],
+              "description": "Handles the item destroy event."
+            },
+            {
+              "kind": "method",
+              "name": "isValidItem",
+              "privacy": "protected",
+              "return": {
+                "type": {
+                  "text": "boolean"
+                }
               },
-              "readonly": true
+              "parameters": [
+                {
+                  "name": "item",
+                  "type": {
+                    "text": "Element"
+                  }
+                }
+              ]
             },
             {
-              "kind": "field",
-              "name": "willValidate",
-              "readonly": true
+              "kind": "method",
+              "name": "addItemToCacheAt",
+              "privacy": "protected",
+              "parameters": [
+                {
+                  "name": "newItem",
+                  "type": {
+                    "text": "Element"
+                  }
+                },
+                {
+                  "name": "index",
+                  "optional": true,
+                  "type": {
+                    "text": "number"
+                  }
+                }
+              ]
             },
             {
               "kind": "method",
-              "name": "setValidity",
-              "description": "Sets the validity of the input field based on the input field's validity.",
+              "name": "removeItemFromCache",
+              "privacy": "protected",
               "return": {
                 "type": {
-                  "text": ""
+                  "text": "void"
                 }
-              }
+              },
+              "parameters": [
+                {
+                  "name": "item",
+                  "type": {
+                    "text": "Element"
+                  }
+                }
+              ]
             },
             {
               "kind": "method",
-              "name": "checkValidity",
+              "name": "setItemCache",
+              "privacy": "protected",
               "return": {
                 "type": {
-                  "text": "boolean"
+                  "text": "void"
                 }
-              }
-            },
-            {
-              "kind": "method",
-              "name": "reportValidity"
-            }
-          ],
-          "attributes": [
-            {
-              "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"
-            },
-            {
-              "name": "value",
-              "type": {
-                "text": "string"
-              },
-              "default": "''",
-              "description": "Indicates the value of the component group (ex: input, checkbox, radio, select etc...)",
-              "fieldName": "value"
-            },
-            {
-              "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"
+              "parameters": [
+                {
+                  "name": "items",
+                  "type": {
+                    "text": "TItem[]"
+                  }
+                }
+              ]
             }
           ],
           "parameters": [
@@ -44535,7 +45140,8 @@
               "name": "superClass",
               "type": {
                 "text": "T"
-              }
+              },
+              "description": "The class to extend with the mixin."
             }
           ]
         }
@@ -44543,49 +45149,207 @@
       "exports": [
         {
           "kind": "js",
-          "name": "FormInternalsMixinInterface",
+          "name": "ItemCollectionMixinInterface",
           "declaration": {
-            "name": "FormInternalsMixinInterface",
-            "module": "utils/mixins/FormInternalsMixin.js"
+            "name": "ItemCollectionMixinInterface",
+            "module": "utils/mixins/ItemCollectionMixin.js"
           }
         },
         {
           "kind": "js",
-          "name": "FormInternalsMixin",
+          "name": "ItemCollectionMixin",
           "declaration": {
-            "name": "FormInternalsMixin",
-            "module": "utils/mixins/FormInternalsMixin.js"
+            "name": "ItemCollectionMixin",
+            "module": "utils/mixins/ItemCollectionMixin.js"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "utils/mixins/IconNameMixin.js",
+      "path": "utils/mixins/ListNavigationMixin.js",
       "declarations": [
         {
-          "kind": "mixin",
+          "kind": "class",
           "description": "",
-          "name": "IconNameMixin",
+          "name": "ListNavigationMixinInterface",
           "members": [
             {
               "kind": "field",
-              "name": "iconName",
+              "name": "loop",
               "type": {
-                "text": "IconNames | undefined"
+                "text": "boolean"
               },
-              "description": "Name of the icon (= filename).\n\nIf no `icon-name` is provided, no icon will be rendered.",
-              "attribute": "icon-name"
-            }
-          ],
-          "attributes": [
+              "privacy": "protected"
+            },
             {
-              "name": "icon-name",
+              "kind": "field",
+              "name": "propagateAllKeyEvents",
               "type": {
-                "text": "IconNames | undefined"
+                "text": "boolean"
               },
-              "description": "Name of the icon (= filename).\n\nIf no `icon-name` is provided, no icon will be rendered.",
-              "fieldName": "iconName"
+              "privacy": "protected"
+            },
+            {
+              "kind": "method",
+              "name": "resetTabIndexes",
+              "privacy": "protected",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "index",
+                  "type": {
+                    "text": "number"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "field",
+              "name": "navItems",
+              "type": {
+                "text": "HTMLElement[]"
+              },
+              "privacy": "protected",
+              "readonly": true
+            },
+            {
+              "kind": "method",
+              "name": "resetTabIndexAndSetFocus",
+              "privacy": "protected",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "newIndex",
+                  "type": {
+                    "text": "number"
+                  }
+                },
+                {
+                  "name": "oldIndex",
+                  "optional": true,
+                  "type": {
+                    "text": "number"
+                  }
+                },
+                {
+                  "name": "focusNewItem",
+                  "optional": true,
+                  "type": {
+                    "text": "boolean"
+                  }
+                }
+              ]
+            }
+          ]
+        },
+        {
+          "kind": "mixin",
+          "description": "This mixin extends the passed class with list like navigation capabilities.\n\nIt handles up and down arrow keys, home and end keys to navigate through a list of items.\nKey mapping aligned to reading direction (RTL or LTR).",
+          "name": "ListNavigationMixin",
+          "members": [
+            {
+              "kind": "method",
+              "name": "getCurrentIndex",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": ""
+                }
+              },
+              "parameters": [
+                {
+                  "name": "target",
+                  "type": {
+                    "text": "EventTarget | null"
+                  },
+                  "description": "The target element that triggered the event."
+                }
+              ],
+              "description": "Retrieves the current index of the item that triggered the event."
+            },
+            {
+              "kind": "method",
+              "name": "resetTabIndexes",
+              "privacy": "protected",
+              "parameters": [
+                {
+                  "name": "index",
+                  "type": {
+                    "text": "number"
+                  },
+                  "description": "The index of the currently focused item."
+                }
+              ],
+              "description": "Reset all tabindex to -1 and set the tabindex of the current item to 0"
+            },
+            {
+              "kind": "method",
+              "name": "resetTabIndexAndSetFocus",
+              "privacy": "protected",
+              "parameters": [
+                {
+                  "name": "newIndex",
+                  "type": {
+                    "text": "number"
+                  },
+                  "description": "The index of the new item to focus."
+                },
+                {
+                  "name": "oldIndex",
+                  "optional": true,
+                  "type": {
+                    "text": "number"
+                  },
+                  "description": "The index of the currently focused item."
+                },
+                {
+                  "name": "focusNewItem",
+                  "default": "true",
+                  "description": "Call focus() on the new item or not. It should be false during firstUpdate"
+                }
+              ],
+              "description": "Resets the tabindex of the currently focused item and sets focus to a new item.",
+              "return": {
+                "type": {
+                  "text": ""
+                }
+              }
+            },
+            {
+              "kind": "method",
+              "name": "resolveDirectionKey",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "key",
+                  "type": {
+                    "text": "string"
+                  },
+                  "description": "The key pressed by the user."
+                },
+                {
+                  "name": "isRtl",
+                  "type": {
+                    "text": "boolean"
+                  },
+                  "description": "A boolean indicating if the layout is right-to-left (RTL)."
+                }
+              ],
+              "description": "Resolves the key pressed by the user based on the direction of the layout.\nThis method is used to handle keyboard navigation in a right-to-left (RTL) layout.\nIt checks if the layout is RTL and adjusts the arrow keys accordingly.\nFor example, in RTL, the left arrow key behaves like the right arrow key and vice versa.",
+              "return": {
+                "type": {
+                  "text": ""
+                }
+              }
             }
           ],
           "parameters": [
@@ -44593,7 +45357,8 @@
               "name": "superClass",
               "type": {
                 "text": "T"
-              }
+              },
+              "description": "The class to extend with the mixin."
             }
           ]
         }
@@ -44601,10 +45366,18 @@
       "exports": [
         {
           "kind": "js",
-          "name": "IconNameMixin",
+          "name": "ListNavigationMixinInterface",
           "declaration": {
-            "name": "IconNameMixin",
-            "module": "utils/mixins/IconNameMixin.js"
+            "name": "ListNavigationMixinInterface",
+            "module": "utils/mixins/ListNavigationMixin.js"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "ListNavigationMixin",
+          "declaration": {
+            "name": "ListNavigationMixin",
+            "module": "utils/mixins/ListNavigationMixin.js"
           }
         }
       ]