@momentum-design/components 0.122.6 → 0.122.7

package/dist/custom-elements.json

@@ -4798,182 +4798,6 @@
         }
       ]
     },
-    {
-      "kind": "javascript-module",
-      "path": "components/brandvisual/brandvisual.component.js",
-      "declarations": [
-        {
-          "kind": "class",
-          "description": "The `mdc-brandvisual` component is responsible for rendering logos dynamically & ensures they are\ndisplayed correctly within applications.\n\nFeatures:\n- Dynamically loads brandvisuals based on the `name` attribute.\n- Emits a `load` event when the brandvisual is successfully fetched.\n- Emits an `error` event when the brandvisual import fails.\n- Supports accessibility best practices.\n- Used for brand representation within the design system.",
-          "name": "Brandvisual",
-          "members": [
-            {
-              "kind": "field",
-              "name": "brandVisualData",
-              "type": {
-                "text": "Element | TemplateResult | undefined"
-              },
-              "privacy": "private"
-            },
-            {
-              "kind": "field",
-              "name": "name",
-              "type": {
-                "text": "BrandVisualNames | undefined"
-              },
-              "description": "Name of the brandVisual (= filename)",
-              "attribute": "name",
-              "reflects": true
-            },
-            {
-              "kind": "field",
-              "name": "altText",
-              "type": {
-                "text": "string | undefined"
-              },
-              "description": "Alt text for the brandvisual image for accessibility.\nThis will only be set if the brandvisual is an image (png).",
-              "attribute": "altText",
-              "reflects": true
-            },
-            {
-              "kind": "method",
-              "name": "getBrandVisualData",
-              "privacy": "private"
-            },
-            {
-              "kind": "method",
-              "name": "injectTemplateAttributes",
-              "privacy": "private",
-              "return": {
-                "type": {
-                  "text": "Element | TemplateResult"
-                }
-              },
-              "parameters": [
-                {
-                  "name": "litTemplate",
-                  "type": {
-                    "text": "TemplateResult"
-                  }
-                },
-                {
-                  "name": "tag",
-                  "type": {
-                    "text": "string"
-                  }
-                },
-                {
-                  "name": "props",
-                  "type": {
-                    "text": "any"
-                  }
-                }
-              ]
-            },
-            {
-              "kind": "method",
-              "name": "injectHtmlAttributes",
-              "privacy": "private",
-              "return": {
-                "type": {
-                  "text": "Element"
-                }
-              },
-              "parameters": [
-                {
-                  "name": "html",
-                  "type": {
-                    "text": "Element"
-                  }
-                },
-                {
-                  "name": "props",
-                  "type": {
-                    "text": "imageProps"
-                  }
-                }
-              ]
-            },
-            {
-              "kind": "method",
-              "name": "handleBrandVisualLoadedSuccess",
-              "privacy": "private",
-              "parameters": [
-                {
-                  "name": "brandVisualHtml",
-                  "type": {
-                    "text": "TemplateResult"
-                  },
-                  "description": "The brandvisual html element which has been fetched from the brandvisual provider."
-                }
-              ],
-              "description": "Sets the brandVisualData state to the fetched brandvisual.\nDispatches a 'load' event on the component once the brandvisual has been successfully loaded."
-            },
-            {
-              "kind": "method",
-              "name": "handleBrandVisualLoadedFailure",
-              "privacy": "private",
-              "parameters": [
-                {
-                  "name": "error",
-                  "type": {
-                    "text": "unknown"
-                  }
-                }
-              ],
-              "description": "Dispatches an 'error' event on the component when the brandvisual import has failed.\nThis event bubbles and is cancelable.\nThe error detail is set to the error object."
-            }
-          ],
-          "events": [
-            {
-              "description": "(React: onLoad) This event is dispatched when the brandvisual has been successfully loaded.",
-              "name": "load",
-              "reactName": "onLoad"
-            },
-            {
-              "description": "(React: onError) This event is dispatched when the brandvisual fetching has failed.",
-              "name": "error",
-              "reactName": "onError"
-            }
-          ],
-          "attributes": [
-            {
-              "name": "name",
-              "type": {
-                "text": "BrandVisualNames | undefined"
-              },
-              "description": "Name of the brandVisual (= filename)",
-              "fieldName": "name"
-            },
-            {
-              "name": "altText",
-              "type": {
-                "text": "string | undefined"
-              },
-              "description": "Alt text for the brandvisual image for accessibility.\nThis will only be set if the brandvisual is an image (png).",
-              "fieldName": "altText"
-            }
-          ],
-          "superclass": {
-            "name": "Component",
-            "module": "/src/models"
-          },
-          "tagName": "mdc-brandvisual",
-          "jsDoc": "/**\n * The `mdc-brandvisual` component is responsible for rendering logos dynamically & ensures they are\n * displayed correctly within applications.\n *\n * Features:\n * - Dynamically loads brandvisuals based on the `name` attribute.\n * - Emits a `load` event when the brandvisual is successfully fetched.\n * - Emits an `error` event when the brandvisual import fails.\n * - Supports accessibility best practices.\n * - Used for brand representation within the design system.\n *\n * @tagname mdc-brandvisual\n *\n * @event load - (React: onLoad) This event is dispatched when the brandvisual has been successfully loaded.\n * @event error - (React: onError) This event is dispatched when the brandvisual fetching has failed.\n *\n */",
-          "customElement": true
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "default",
-          "declaration": {
-            "name": "Brandvisual",
-            "module": "components/brandvisual/brandvisual.component.js"
-          }
-        }
-      ]
-    },
     {
       "kind": "javascript-module",
       "path": "components/bullet/bullet.component.js",
@@ -5998,6 +5822,182 @@
         }
       ]
     },
+    {
+      "kind": "javascript-module",
+      "path": "components/brandvisual/brandvisual.component.js",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "The `mdc-brandvisual` component is responsible for rendering logos dynamically & ensures they are\ndisplayed correctly within applications.\n\nFeatures:\n- Dynamically loads brandvisuals based on the `name` attribute.\n- Emits a `load` event when the brandvisual is successfully fetched.\n- Emits an `error` event when the brandvisual import fails.\n- Supports accessibility best practices.\n- Used for brand representation within the design system.",
+          "name": "Brandvisual",
+          "members": [
+            {
+              "kind": "field",
+              "name": "brandVisualData",
+              "type": {
+                "text": "Element | TemplateResult | undefined"
+              },
+              "privacy": "private"
+            },
+            {
+              "kind": "field",
+              "name": "name",
+              "type": {
+                "text": "BrandVisualNames | undefined"
+              },
+              "description": "Name of the brandVisual (= filename)",
+              "attribute": "name",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "altText",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "Alt text for the brandvisual image for accessibility.\nThis will only be set if the brandvisual is an image (png).",
+              "attribute": "altText",
+              "reflects": true
+            },
+            {
+              "kind": "method",
+              "name": "getBrandVisualData",
+              "privacy": "private"
+            },
+            {
+              "kind": "method",
+              "name": "injectTemplateAttributes",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "Element | TemplateResult"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "litTemplate",
+                  "type": {
+                    "text": "TemplateResult"
+                  }
+                },
+                {
+                  "name": "tag",
+                  "type": {
+                    "text": "string"
+                  }
+                },
+                {
+                  "name": "props",
+                  "type": {
+                    "text": "any"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "injectHtmlAttributes",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "Element"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "html",
+                  "type": {
+                    "text": "Element"
+                  }
+                },
+                {
+                  "name": "props",
+                  "type": {
+                    "text": "imageProps"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "handleBrandVisualLoadedSuccess",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "brandVisualHtml",
+                  "type": {
+                    "text": "TemplateResult"
+                  },
+                  "description": "The brandvisual html element which has been fetched from the brandvisual provider."
+                }
+              ],
+              "description": "Sets the brandVisualData state to the fetched brandvisual.\nDispatches a 'load' event on the component once the brandvisual has been successfully loaded."
+            },
+            {
+              "kind": "method",
+              "name": "handleBrandVisualLoadedFailure",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "error",
+                  "type": {
+                    "text": "unknown"
+                  }
+                }
+              ],
+              "description": "Dispatches an 'error' event on the component when the brandvisual import has failed.\nThis event bubbles and is cancelable.\nThe error detail is set to the error object."
+            }
+          ],
+          "events": [
+            {
+              "description": "(React: onLoad) This event is dispatched when the brandvisual has been successfully loaded.",
+              "name": "load",
+              "reactName": "onLoad"
+            },
+            {
+              "description": "(React: onError) This event is dispatched when the brandvisual fetching has failed.",
+              "name": "error",
+              "reactName": "onError"
+            }
+          ],
+          "attributes": [
+            {
+              "name": "name",
+              "type": {
+                "text": "BrandVisualNames | undefined"
+              },
+              "description": "Name of the brandVisual (= filename)",
+              "fieldName": "name"
+            },
+            {
+              "name": "altText",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "Alt text for the brandvisual image for accessibility.\nThis will only be set if the brandvisual is an image (png).",
+              "fieldName": "altText"
+            }
+          ],
+          "superclass": {
+            "name": "Component",
+            "module": "/src/models"
+          },
+          "tagName": "mdc-brandvisual",
+          "jsDoc": "/**\n * The `mdc-brandvisual` component is responsible for rendering logos dynamically & ensures they are\n * displayed correctly within applications.\n *\n * Features:\n * - Dynamically loads brandvisuals based on the `name` attribute.\n * - Emits a `load` event when the brandvisual is successfully fetched.\n * - Emits an `error` event when the brandvisual import fails.\n * - Supports accessibility best practices.\n * - Used for brand representation within the design system.\n *\n * @tagname mdc-brandvisual\n *\n * @event load - (React: onLoad) This event is dispatched when the brandvisual has been successfully loaded.\n * @event error - (React: onError) This event is dispatched when the brandvisual fetching has failed.\n *\n */",
+          "customElement": true
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "default",
+          "declaration": {
+            "name": "Brandvisual",
+            "module": "components/brandvisual/brandvisual.component.js"
+          }
+        }
+      ]
+    },
     {
       "kind": "javascript-module",
       "path": "components/buttonlink/buttonlink.component.js",
@@ -22136,7 +22136,7 @@
               },
               "privacy": "public",
               "description": "Whether to loop navigation when reaching the end of the list.\nIf 'true', pressing the down arrow on the last item will focus the first item,\nand pressing the up arrow on the first item will focus the last item.\nIf 'false', navigation will stop at the first or last item.",
-              "default": "''",
+              "default": "'true'",
               "attribute": "loop",
               "reflects": true
             },
@@ -22147,15 +22147,49 @@
                 "text": "number"
               },
               "privacy": "public",
-              "description": "The index of the item that should receive focus when the list is first rendered.\nIf the index is out of bounds, the first item (index 0) will receive focus.",
+              "description": "The index of the item that should receive focus when the list is first rendered.\nIf the index is out of bounds, the focused element will be clamped to the nearest valid index.",
               "default": "0",
               "attribute": "initial-focus",
               "reflects": true
             },
+            {
+              "kind": "method",
+              "name": "onElementStoreUpdate",
+              "privacy": "protected",
+              "parameters": [
+                {
+                  "name": "item",
+                  "type": {
+                    "text": "ListItem"
+                  }
+                },
+                {
+                  "name": "changeType",
+                  "type": {
+                    "text": "ElementStoreChangeTypes"
+                  }
+                },
+                {
+                  "name": "index",
+                  "type": {
+                    "text": "number"
+                  }
+                }
+              ]
+            },
             {
               "kind": "field",
               "name": "itemsStore",
-              "default": "new ElementStore<ListItem>(this, { isValidItem: this.isValidItem, })"
+              "default": "new ElementStore<ListItem>(this, { isValidItem: this.isValidItem, onStoreUpdate: this.onElementStoreUpdate.bind(this), })"
+            },
+            {
+              "kind": "method",
+              "name": "setInitialFocus",
+              "privacy": "protected",
+              "inheritedFrom": {
+                "name": "ListNavigationMixin",
+                "module": "utils/mixins/ListNavigationMixin.js"
+              }
             },
             {
               "kind": "method",
@@ -22192,6 +22226,11 @@
                     "text": "number"
                   },
                   "description": "The index of the currently focused item."
+                },
+                {
+                  "name": "focusElement",
+                  "default": "true",
+                  "description": "Call focus() on the current item or not."
                 }
               ],
               "description": "Reset all tabindex to -1 and set the tabindex of the current item to 0",
@@ -22285,7 +22324,7 @@
                 "text": "'true' | 'false'"
               },
               "description": "Whether to loop navigation when reaching the end of the list.\nIf 'true', pressing the down arrow on the last item will focus the first item,\nand pressing the up arrow on the first item will focus the last item.\nIf 'false', navigation will stop at the first or last item.",
-              "default": "''",
+              "default": "'true'",
               "fieldName": "loop"
             },
             {
@@ -22293,7 +22332,7 @@
               "type": {
                 "text": "number"
               },
-              "description": "The index of the item that should receive focus when the list is first rendered.\nIf the index is out of bounds, the first item (index 0) will receive focus.",
+              "description": "The index of the item that should receive focus when the list is first rendered.\nIf the index is out of bounds, the focused element will be clamped to the nearest valid index.",
               "default": "0",
               "fieldName": "initialFocus"
             }
@@ -22440,6 +22479,15 @@
               },
               "description": "Dispatch change event when an option is selected."
             },
+            {
+              "kind": "method",
+              "name": "setInitialFocus",
+              "privacy": "protected",
+              "inheritedFrom": {
+                "name": "ListNavigationMixin",
+                "module": "utils/mixins/ListNavigationMixin.js"
+              }
+            },
             {
               "kind": "method",
               "name": "getCurrentIndex",
@@ -22475,6 +22523,11 @@
                     "text": "number"
                   },
                   "description": "The index of the currently focused item."
+                },
+                {
+                  "name": "focusElement",
+                  "default": "true",
+                  "description": "Call focus() on the current item or not."
                 }
               ],
               "description": "Reset all tabindex to -1 and set the tabindex of the current item to 0",
@@ -22941,6 +22994,17 @@
               "attribute": "soft-disabled",
               "reflects": true
             },
+            {
+              "kind": "field",
+              "name": "dataIndex",
+              "type": {
+                "text": "number | undefined"
+              },
+              "description": "Data attribute to define the index of the list item in a list.\nThis also set the `aria-posinset` attribute for accessibility purposes.\n\nIt is required when the list item is used inside a virtualized list where the items are not sequentially rendered.\nIt should be a zero-based index.",
+              "default": "undefined",
+              "attribute": "data-index",
+              "reflects": true
+            },
             {
               "kind": "method",
               "name": "handleClick",
@@ -23231,6 +23295,15 @@
               "default": "undefined",
               "fieldName": "softDisabled"
             },
+            {
+              "name": "data-index",
+              "type": {
+                "text": "number | undefined"
+              },
+              "description": "Data attribute to define the index of the list item in a list.\nThis also set the `aria-posinset` attribute for accessibility purposes.\n\nIt is required when the list item is used inside a virtualized list where the items are not sequentially rendered.\nIt should be a zero-based index.",
+              "default": "undefined",
+              "fieldName": "dataIndex"
+            },
             {
               "name": "disabled",
               "type": {
@@ -24082,6 +24155,21 @@
                 "module": "components/listitem/listitem.component.js"
               }
             },
+            {
+              "kind": "field",
+              "name": "dataIndex",
+              "type": {
+                "text": "number | undefined"
+              },
+              "description": "Data attribute to define the index of the list item in a list.\nThis also set the `aria-posinset` attribute for accessibility purposes.\n\nIt is required when the list item is used inside a virtualized list where the items are not sequentially rendered.\nIt should be a zero-based index.",
+              "default": "undefined",
+              "attribute": "data-index",
+              "reflects": true,
+              "inheritedFrom": {
+                "name": "ListItem",
+                "module": "components/listitem/listitem.component.js"
+              }
+            },
             {
               "kind": "method",
               "name": "handleClick",
@@ -24437,6 +24525,19 @@
                 "name": "ListItem",
                 "module": "src/components/listitem/listitem.component.ts"
               }
+            },
+            {
+              "name": "data-index",
+              "type": {
+                "text": "number | undefined"
+              },
+              "description": "Data attribute to define the index of the list item in a list.\nThis also set the `aria-posinset` attribute for accessibility purposes.\n\nIt is required when the list item is used inside a virtualized list where the items are not sequentially rendered.\nIt should be a zero-based index.",
+              "default": "undefined",
+              "fieldName": "dataIndex",
+              "inheritedFrom": {
+                "name": "ListItem",
+                "module": "src/components/listitem/listitem.component.ts"
+              }
             }
           ],
           "superclass": {
@@ -25139,6 +25240,21 @@
                 "module": "components/listitem/listitem.component.js"
               }
             },
+            {
+              "kind": "field",
+              "name": "dataIndex",
+              "type": {
+                "text": "number | undefined"
+              },
+              "description": "Data attribute to define the index of the list item in a list.\nThis also set the `aria-posinset` attribute for accessibility purposes.\n\nIt is required when the list item is used inside a virtualized list where the items are not sequentially rendered.\nIt should be a zero-based index.",
+              "default": "undefined",
+              "attribute": "data-index",
+              "reflects": true,
+              "inheritedFrom": {
+                "name": "ListItem",
+                "module": "components/listitem/listitem.component.js"
+              }
+            },
             {
               "kind": "method",
               "name": "handleClick",
@@ -25549,6 +25665,19 @@
                 "name": "ListItem",
                 "module": "src/components/listitem/listitem.component.ts"
               }
+            },
+            {
+              "name": "data-index",
+              "type": {
+                "text": "number | undefined"
+              },
+              "description": "Data attribute to define the index of the list item in a list.\nThis also set the `aria-posinset` attribute for accessibility purposes.\n\nIt is required when the list item is used inside a virtualized list where the items are not sequentially rendered.\nIt should be a zero-based index.",
+              "default": "undefined",
+              "fieldName": "dataIndex",
+              "inheritedFrom": {
+                "name": "ListItem",
+                "module": "src/components/listitem/listitem.component.ts"
+              }
             }
           ],
           "mixins": [
@@ -26170,6 +26299,21 @@
                 "module": "components/listitem/listitem.component.js"
               }
             },
+            {
+              "kind": "field",
+              "name": "dataIndex",
+              "type": {
+                "text": "number | undefined"
+              },
+              "description": "Data attribute to define the index of the list item in a list.\nThis also set the `aria-posinset` attribute for accessibility purposes.\n\nIt is required when the list item is used inside a virtualized list where the items are not sequentially rendered.\nIt should be a zero-based index.",
+              "default": "undefined",
+              "attribute": "data-index",
+              "reflects": true,
+              "inheritedFrom": {
+                "name": "ListItem",
+                "module": "components/listitem/listitem.component.js"
+              }
+            },
             {
               "kind": "method",
               "name": "handleClick",
@@ -26580,6 +26724,19 @@
                 "name": "ListItem",
                 "module": "src/components/listitem/listitem.component.ts"
               }
+            },
+            {
+              "name": "data-index",
+              "type": {
+                "text": "number | undefined"
+              },
+              "description": "Data attribute to define the index of the list item in a list.\nThis also set the `aria-posinset` attribute for accessibility purposes.\n\nIt is required when the list item is used inside a virtualized list where the items are not sequentially rendered.\nIt should be a zero-based index.",
+              "default": "undefined",
+              "fieldName": "dataIndex",
+              "inheritedFrom": {
+                "name": "ListItem",
+                "module": "src/components/listitem/listitem.component.ts"
+              }
             }
           ],
           "mixins": [
@@ -29677,6 +29834,21 @@
                 "module": "components/listitem/listitem.component.js"
               }
             },
+            {
+              "kind": "field",
+              "name": "dataIndex",
+              "type": {
+                "text": "number | undefined"
+              },
+              "description": "Data attribute to define the index of the list item in a list.\nThis also set the `aria-posinset` attribute for accessibility purposes.\n\nIt is required when the list item is used inside a virtualized list where the items are not sequentially rendered.\nIt should be a zero-based index.",
+              "default": "undefined",
+              "attribute": "data-index",
+              "reflects": true,
+              "inheritedFrom": {
+                "name": "ListItem",
+                "module": "components/listitem/listitem.component.js"
+              }
+            },
             {
               "kind": "method",
               "name": "handleClick",
@@ -30133,6 +30305,19 @@
                 "name": "ListItem",
                 "module": "src/components/listitem/listitem.component.ts"
               }
+            },
+            {
+              "name": "data-index",
+              "type": {
+                "text": "number | undefined"
+              },
+              "description": "Data attribute to define the index of the list item in a list.\nThis also set the `aria-posinset` attribute for accessibility purposes.\n\nIt is required when the list item is used inside a virtualized list where the items are not sequentially rendered.\nIt should be a zero-based index.",
+              "default": "undefined",
+              "fieldName": "dataIndex",
+              "inheritedFrom": {
+                "name": "ListItem",
+                "module": "src/components/listitem/listitem.component.ts"
+              }
             }
           ],
           "mixins": [
@@ -30802,6 +30987,21 @@
                 "module": "components/listitem/listitem.component.js"
               }
             },
+            {
+              "kind": "field",
+              "name": "dataIndex",
+              "type": {
+                "text": "number | undefined"
+              },
+              "description": "Data attribute to define the index of the list item in a list.\nThis also set the `aria-posinset` attribute for accessibility purposes.\n\nIt is required when the list item is used inside a virtualized list where the items are not sequentially rendered.\nIt should be a zero-based index.",
+              "default": "undefined",
+              "attribute": "data-index",
+              "reflects": true,
+              "inheritedFrom": {
+                "name": "ListItem",
+                "module": "components/listitem/listitem.component.js"
+              }
+            },
             {
               "kind": "method",
               "name": "handleClick",
@@ -31243,6 +31443,19 @@
                 "name": "ListItem",
                 "module": "src/components/listitem/listitem.component.ts"
               }
+            },
+            {
+              "name": "data-index",
+              "type": {
+                "text": "number | undefined"
+              },
+              "description": "Data attribute to define the index of the list item in a list.\nThis also set the `aria-posinset` attribute for accessibility purposes.\n\nIt is required when the list item is used inside a virtualized list where the items are not sequentially rendered.\nIt should be a zero-based index.",
+              "default": "undefined",
+              "fieldName": "dataIndex",
+              "inheritedFrom": {
+                "name": "ListItem",
+                "module": "src/components/listitem/listitem.component.ts"
+              }
             }
           ],
           "mixins": [
@@ -41444,6 +41657,15 @@
               ],
               "description": "Handles the keydown event on the select element when the popover is closed.\nThe options are as follows:\n- ARROW_DOWN, ARROW_UP, SPACE: Opens the popover and prevents the default scrolling behavior.\n- ENTER: Opens the popover, prevents default scrolling, and submits the form if the popover is closed.\n- HOME: Opens the popover and sets focus and tabindex on the first option.\n- END: Opens the popover and sets focus and tabindex on the last option."
             },
+            {
+              "kind": "method",
+              "name": "setInitialFocus",
+              "privacy": "protected",
+              "inheritedFrom": {
+                "name": "ListNavigationMixin",
+                "module": "utils/mixins/ListNavigationMixin.js"
+              }
+            },
             {
               "kind": "method",
               "name": "getCurrentIndex",
@@ -41479,6 +41701,11 @@
                     "text": "number"
                   },
                   "description": "The index of the currently focused item."
+                },
+                {
+                  "name": "focusElement",
+                  "default": "true",
+                  "description": "Call focus() on the current item or not."
                 }
               ],
               "description": "Reset all tabindex to -1 and set the tabindex of the current item to 0",
@@ -45703,90 +45930,6 @@
         }
       ]
     },
-    {
-      "kind": "javascript-module",
-      "path": "components/text/text.component.js",
-      "declarations": [
-        {
-          "kind": "class",
-          "description": "Text component for creating styled text elements.\nIt has to be mounted within the ThemeProvider to access color and font tokens.\n\nThe `type` attribute allows changing the text style.\nThe `tagname` attribute allows changing the tag name of the text element.\nThe default tag name is `p`.\n\nThe `tagname` attribute should be a valid HTML tag name.\nIf the `tagname` attribute is not a valid HTML tag name, the default tag name will be used.\n\nThe styling is applied based on the `type` attribute.",
-          "name": "Text",
-          "cssParts": [
-            {
-              "description": "The text element",
-              "name": "text"
-            }
-          ],
-          "slots": [
-            {
-              "description": "Default slot for text content",
-              "name": ""
-            }
-          ],
-          "members": [
-            {
-              "kind": "field",
-              "name": "type",
-              "type": {
-                "text": "TextType"
-              },
-              "privacy": "public",
-              "description": "Specifies the text style to be applied.\n\nAcceptable values include:\n\n- 'body-small-regular'\n- 'body-small-medium'\n- 'body-small-bold'\n- 'body-midsize-regular'\n- 'body-midsize-medium'\n- 'body-midsize-bold'\n- 'body-large-regular'\n- 'body-large-medium'\n- 'body-large-bold'\n- 'body-small-regular-underline'\n- 'body-small-medium-underline'\n- 'body-midsize-regular-underline'\n- 'body-midsize-medium-underline'\n- 'body-large-regular-underline'\n- 'body-large-medium-underline'\n- 'heading-small-regular'\n- 'heading-small-medium'\n- 'heading-small-bold'\n- 'heading-midsize-regular'\n- 'heading-midsize-medium'\n- 'heading-midsize-bold'\n- 'heading-large-regular'\n- 'heading-large-medium'\n- 'heading-large-bold'\n- 'heading-xlarge-regular'\n- 'heading-xlarge-medium'\n- 'heading-xlarge-bold'\n- 'headline-small-light'\n- 'headline-small-regular'",
-              "default": "body-midsize-medium",
-              "attribute": "type",
-              "reflects": true
-            },
-            {
-              "kind": "field",
-              "name": "tagname",
-              "type": {
-                "text": "TagName | undefined"
-              },
-              "privacy": "public",
-              "description": "Specifies the HTML tag name for the text element. The default tag name is `p`.\nThis attribute is optional. When set, it changes the tag name of the text element.\n\nAcceptable values include:\n\n- 'h1'\n- 'h2'\n- 'h3'\n- 'h4'\n- 'h5'\n- 'h6'\n- 'p'\n- 'small'\n- 'span'\n- 'div'\n\nFor instance, setting this attribute to `h2` will render the text element as an `h2` element.\nNote that the styling is determined by the `type` attribute.",
-              "attribute": "tagname",
-              "reflects": true
-            }
-          ],
-          "attributes": [
-            {
-              "name": "type",
-              "type": {
-                "text": "TextType"
-              },
-              "description": "Specifies the text style to be applied.\n\nAcceptable values include:\n\n- 'body-small-regular'\n- 'body-small-medium'\n- 'body-small-bold'\n- 'body-midsize-regular'\n- 'body-midsize-medium'\n- 'body-midsize-bold'\n- 'body-large-regular'\n- 'body-large-medium'\n- 'body-large-bold'\n- 'body-small-regular-underline'\n- 'body-small-medium-underline'\n- 'body-midsize-regular-underline'\n- 'body-midsize-medium-underline'\n- 'body-large-regular-underline'\n- 'body-large-medium-underline'\n- 'heading-small-regular'\n- 'heading-small-medium'\n- 'heading-small-bold'\n- 'heading-midsize-regular'\n- 'heading-midsize-medium'\n- 'heading-midsize-bold'\n- 'heading-large-regular'\n- 'heading-large-medium'\n- 'heading-large-bold'\n- 'heading-xlarge-regular'\n- 'heading-xlarge-medium'\n- 'heading-xlarge-bold'\n- 'headline-small-light'\n- 'headline-small-regular'",
-              "default": "body-midsize-medium",
-              "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 text element.\n\nAcceptable values include:\n\n- 'h1'\n- 'h2'\n- 'h3'\n- 'h4'\n- 'h5'\n- 'h6'\n- 'p'\n- 'small'\n- 'span'\n- 'div'\n\nFor instance, setting this attribute to `h2` will render the text element as an `h2` element.\nNote that the styling is determined by the `type` attribute.",
-              "fieldName": "tagname"
-            }
-          ],
-          "superclass": {
-            "name": "Component",
-            "module": "/src/models"
-          },
-          "tagName": "mdc-text",
-          "jsDoc": "/**\n * Text component for creating styled text elements.\n * It has to be mounted within the ThemeProvider to access color and font tokens.\n *\n * The `type` attribute allows changing the text style.\n * The `tagname` attribute allows changing the tag name of the text element.\n * The default tag name is `p`.\n *\n * The `tagname` attribute should be a valid HTML tag name.\n * If the `tagname` attribute is not a valid HTML tag name, the default tag name will be used.\n *\n * The styling is applied based on the `type` attribute.\n *\n * @tagname mdc-text\n * @slot - Default slot for text content\n *\n * @csspart text - The text element\n */",
-          "customElement": true
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "default",
-          "declaration": {
-            "name": "Text",
-            "module": "components/text/text.component.js"
-          }
-        }
-      ]
-    },
     {
       "kind": "javascript-module",
       "path": "components/textarea/textarea.component.js",
@@ -47418,6 +47561,90 @@
         }
       ]
     },
+    {
+      "kind": "javascript-module",
+      "path": "components/text/text.component.js",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "Text component for creating styled text elements.\nIt has to be mounted within the ThemeProvider to access color and font tokens.\n\nThe `type` attribute allows changing the text style.\nThe `tagname` attribute allows changing the tag name of the text element.\nThe default tag name is `p`.\n\nThe `tagname` attribute should be a valid HTML tag name.\nIf the `tagname` attribute is not a valid HTML tag name, the default tag name will be used.\n\nThe styling is applied based on the `type` attribute.",
+          "name": "Text",
+          "cssParts": [
+            {
+              "description": "The text element",
+              "name": "text"
+            }
+          ],
+          "slots": [
+            {
+              "description": "Default slot for text content",
+              "name": ""
+            }
+          ],
+          "members": [
+            {
+              "kind": "field",
+              "name": "type",
+              "type": {
+                "text": "TextType"
+              },
+              "privacy": "public",
+              "description": "Specifies the text style to be applied.\n\nAcceptable values include:\n\n- 'body-small-regular'\n- 'body-small-medium'\n- 'body-small-bold'\n- 'body-midsize-regular'\n- 'body-midsize-medium'\n- 'body-midsize-bold'\n- 'body-large-regular'\n- 'body-large-medium'\n- 'body-large-bold'\n- 'body-small-regular-underline'\n- 'body-small-medium-underline'\n- 'body-midsize-regular-underline'\n- 'body-midsize-medium-underline'\n- 'body-large-regular-underline'\n- 'body-large-medium-underline'\n- 'heading-small-regular'\n- 'heading-small-medium'\n- 'heading-small-bold'\n- 'heading-midsize-regular'\n- 'heading-midsize-medium'\n- 'heading-midsize-bold'\n- 'heading-large-regular'\n- 'heading-large-medium'\n- 'heading-large-bold'\n- 'heading-xlarge-regular'\n- 'heading-xlarge-medium'\n- 'heading-xlarge-bold'\n- 'headline-small-light'\n- 'headline-small-regular'",
+              "default": "body-midsize-medium",
+              "attribute": "type",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "tagname",
+              "type": {
+                "text": "TagName | undefined"
+              },
+              "privacy": "public",
+              "description": "Specifies the HTML tag name for the text element. The default tag name is `p`.\nThis attribute is optional. When set, it changes the tag name of the text element.\n\nAcceptable values include:\n\n- 'h1'\n- 'h2'\n- 'h3'\n- 'h4'\n- 'h5'\n- 'h6'\n- 'p'\n- 'small'\n- 'span'\n- 'div'\n\nFor instance, setting this attribute to `h2` will render the text element as an `h2` element.\nNote that the styling is determined by the `type` attribute.",
+              "attribute": "tagname",
+              "reflects": true
+            }
+          ],
+          "attributes": [
+            {
+              "name": "type",
+              "type": {
+                "text": "TextType"
+              },
+              "description": "Specifies the text style to be applied.\n\nAcceptable values include:\n\n- 'body-small-regular'\n- 'body-small-medium'\n- 'body-small-bold'\n- 'body-midsize-regular'\n- 'body-midsize-medium'\n- 'body-midsize-bold'\n- 'body-large-regular'\n- 'body-large-medium'\n- 'body-large-bold'\n- 'body-small-regular-underline'\n- 'body-small-medium-underline'\n- 'body-midsize-regular-underline'\n- 'body-midsize-medium-underline'\n- 'body-large-regular-underline'\n- 'body-large-medium-underline'\n- 'heading-small-regular'\n- 'heading-small-medium'\n- 'heading-small-bold'\n- 'heading-midsize-regular'\n- 'heading-midsize-medium'\n- 'heading-midsize-bold'\n- 'heading-large-regular'\n- 'heading-large-medium'\n- 'heading-large-bold'\n- 'heading-xlarge-regular'\n- 'heading-xlarge-medium'\n- 'heading-xlarge-bold'\n- 'headline-small-light'\n- 'headline-small-regular'",
+              "default": "body-midsize-medium",
+              "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 text element.\n\nAcceptable values include:\n\n- 'h1'\n- 'h2'\n- 'h3'\n- 'h4'\n- 'h5'\n- 'h6'\n- 'p'\n- 'small'\n- 'span'\n- 'div'\n\nFor instance, setting this attribute to `h2` will render the text element as an `h2` element.\nNote that the styling is determined by the `type` attribute.",
+              "fieldName": "tagname"
+            }
+          ],
+          "superclass": {
+            "name": "Component",
+            "module": "/src/models"
+          },
+          "tagName": "mdc-text",
+          "jsDoc": "/**\n * Text component for creating styled text elements.\n * It has to be mounted within the ThemeProvider to access color and font tokens.\n *\n * The `type` attribute allows changing the text style.\n * The `tagname` attribute allows changing the tag name of the text element.\n * The default tag name is `p`.\n *\n * The `tagname` attribute should be a valid HTML tag name.\n * If the `tagname` attribute is not a valid HTML tag name, the default tag name will be used.\n *\n * The styling is applied based on the `type` attribute.\n *\n * @tagname mdc-text\n * @slot - Default slot for text content\n *\n * @csspart text - The text element\n */",
+          "customElement": true
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "default",
+          "declaration": {
+            "name": "Text",
+            "module": "components/text/text.component.js"
+          }
+        }
+      ]
+    },
     {
       "kind": "javascript-module",
       "path": "components/toggle/toggle.component.js",
@@ -52875,12 +53102,16 @@
       "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.",
+          "description": "`mdc-virtualizedlist` is an extension of the `mdc-list` component that adds virtualization capabilities using\nthe Tanstack Virtual library.\n\nThis component is thin wrapper around the Tanstack libray to provide additional funtionalities such as\nkeyboard navigation, focus management, scroll anchoring and accessibility features.\n\nPlease refer to [Tanstack Virtual Docs](https://tanstack.com/virtual/latest) for more in depth documentation.\n\n## Setup\n\n`virtualizerProps` is a required prop that requires at least two properties to be set: `count` and `estimateSize`.\n`count` is the total number of items in the list, and `estimateSize` is a function that returns the estimated\nsize (in pixels) of each item in the list. `getItemKey` is also strongly recommended to be set to provide unique\nkeys for each item in the list.\n\n### Render list items\n\nTo keep the component framework-agnostic, the rendering of the list items is left to the consumer.\n\nWe need to render only the visible items. The list of visible items are provided by the `virtualitemschange` event.\nThe event detail contains the `virtualItems` array, which contains the information for the rendering.\nList items must have an `data-index` attribute, the indexes are in the `virtualItems` list.\n\n## Best practices\n\n### List updates\n\nTanstack needs only the count of the items in the list and the size of each item to perform virtualization.\nList updates happens when\n- when `virtualizerProps` property of the component instance changes\n- when `observe-size-changes` is set and the item's size changes (it uses ResizeObserver internally)\n- when `component.visualiser.measure` called manually.\n\n### Header\n\nTo add a header to the list, use the `mdc-listheader` component and place it in the `list-header` slot.\n\n### Lists with dynamic content\n\nUnique keys for the list items are critical for dynamically changing list items or item's content.\nIf the key change with the content it will cause scrollbar and content shuttering.",
           "name": "VirtualizedList",
           "cssParts": [
             {
               "description": "The container of the virtualized list.",
-              "name": "container"
+              "name": "container",
+              "inheritedFrom": {
+                "name": "List",
+                "module": "src/components/list/list.component.ts"
+              }
             },
             {
               "description": "The scrollable area of the virtualized list.",
@@ -52889,8 +53120,20 @@
           ],
           "slots": [
             {
-              "description": "Client side List with nested list items.",
-              "name": ""
+              "description": "This is a default/unnamed slot, where listitems can be placed.",
+              "name": "default",
+              "inheritedFrom": {
+                "name": "List",
+                "module": "src/components/list/list.component.ts"
+              }
+            },
+            {
+              "description": "This slot is used to pass a header for the list, which can be a `mdc-listheader` component.",
+              "name": "list-header",
+              "inheritedFrom": {
+                "name": "List",
+                "module": "src/components/list/list.component.ts"
+              }
             }
           ],
           "members": [
@@ -52900,49 +53143,159 @@
               "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"
+              "privacy": "public",
+              "description": "Object that sets and updates the virtualizer with any relevant props.\nThere are three required object props in order to get virtualization to work properly.\n\n**count** - 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).\n\n**estimateSize** - 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\n**getItemKey** - A function that returns a unique key for each item in your list based on its index.\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",
+              "name": "loop",
               "type": {
-                "text": "(({ virtualItems, measureElement, listStyle }: SetListDataProps) => void) | null"
+                "text": "'true' | 'false'"
               },
-              "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"
+              "privacy": "public",
+              "description": "Whether to loop navigation when reaching the end of the list.\nIf 'true', pressing the down arrow on the last item will focus the first item,\nand pressing the up arrow on the first item will focus the last item.\nIf 'false', navigation will stop at the first or last item.",
+              "default": "'false'",
+              "attribute": "loop",
+              "reflects": true,
+              "inheritedFrom": {
+                "name": "List",
+                "module": "components/list/list.component.js"
+              }
             },
             {
               "kind": "field",
-              "name": "scrollElementRef",
+              "name": "scrollAnchoring",
               "type": {
-                "text": "Ref<HTMLDivElement>"
+                "text": "boolean"
+              },
+              "privacy": "public",
+              "description": "Enable automatic scroll anchoring when the list size changes.\nBy default, list does not scroll to the very end it keeps the scroll position otherwise\nit try hold the scroll position on the last selected when list updates.\n\nIt is handy when list size or list item sizes change dynamically (e.g., incoming messages in a chat app).",
+              "default": "false",
+              "attribute": "scroll-anchoring",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "observeSizeChanges",
+              "type": {
+                "text": "boolean"
+              },
+              "privacy": "public",
+              "default": "false",
+              "description": "When true, the list will observe size changes of its items and re-measure them as needed.\nThis is useful if your list items can change size dynamically (e.g., due to content changes or window resizing).",
+              "attribute": "observe-size-changes",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "revertList",
+              "type": {
+                "text": "boolean"
               },
-              "privacy": "public"
+              "privacy": "public",
+              "default": "false",
+              "description": "When true, the list items will be aligned to the bottom of the list, and it anchors scroll to the bottom\nuntil the first user scroll interaction.\n\nNote: It does not affect on the rendering order, the first item is still at the top of the list.",
+              "attribute": "revert-list",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "atBottomThreshold",
+              "type": {
+                "text": "number"
+              },
+              "privacy": "public",
+              "description": "The maximum gap (in pixels) between the very bottom of the list end the current scroll positioning\nIt is used to calculate scroll anchoring.",
+              "attribute": "at-bottom-threshold",
+              "reflects": true
             },
             {
               "kind": "field",
               "name": "virtualizer",
               "type": {
-                "text": "Virtualizer<Element, Element> | null"
+                "text": "Virtualizer | null"
               },
               "privacy": "public",
-              "default": "null"
+              "default": "null",
+              "description": "The virtualizer instance created by the VirtualizerController."
             },
             {
               "kind": "field",
               "name": "virtualItems",
               "type": {
-                "text": "Array<VirtualItem>"
+                "text": "VirtualItem[]"
               },
-              "privacy": "public",
-              "default": "[]"
+              "description": "The current virtual items being rendered.",
+              "readonly": true
+            },
+            {
+              "kind": "method",
+              "name": "setInitialFocus",
+              "privacy": "protected",
+              "inheritedFrom": {
+                "name": "List",
+                "module": "components/list/list.component.js"
+              },
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "description": "Sets the initial focus of the list based on the `initial-focus` prop and scrolls the item into view."
+            },
+            {
+              "kind": "method",
+              "name": "emitChangeEvent",
+              "privacy": "private"
+            },
+            {
+              "kind": "method",
+              "name": "onElementStoreUpdate",
+              "privacy": "protected",
+              "parameters": [
+                {
+                  "name": "item",
+                  "type": {
+                    "text": "HTMLElement"
+                  }
+                },
+                {
+                  "name": "changeType",
+                  "type": {
+                    "text": "ElementStoreChangeTypes"
+                  }
+                }
+              ],
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "inheritedFrom": {
+                "name": "List",
+                "module": "components/list/list.component.js"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "handleElementFirstUpdateCompleted",
+              "privacy": "protected"
             },
             {
               "kind": "method",
-              "name": "handleScroll",
+              "name": "checkAtBottom",
               "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              }
+            },
+            {
+              "kind": "method",
+              "name": "handleNavigationKeyDown",
+              "privacy": "protected",
               "return": {
                 "type": {
                   "text": "void"
@@ -52952,34 +53305,236 @@
                 {
                   "name": "event",
                   "type": {
-                    "text": "Event"
+                    "text": "KeyboardEvent"
                   }
                 }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "resetTabIndexes",
+              "privacy": "protected",
+              "parameters": [
+                {
+                  "name": "index",
+                  "type": {
+                    "text": "number"
+                  }
+                },
+                {
+                  "name": "focusElement",
+                  "default": "true"
+                }
               ],
-              "description": "Refires the scroll event from the internal scroll container to the host element"
+              "description": "Reset all tabindex to -1 and set the tabindex of the current item to 0",
+              "inheritedFrom": {
+                "name": "List",
+                "module": "components/list/list.component.js"
+              }
+            },
+            {
+              "kind": "method",
+              "name": "resetTabIndexAndSetFocus",
+              "privacy": "protected",
+              "parameters": [
+                {
+                  "name": "newIndex",
+                  "type": {
+                    "text": "number"
+                  }
+                },
+                {
+                  "name": "oldIndex",
+                  "optional": true,
+                  "type": {
+                    "text": "number"
+                  }
+                },
+                {
+                  "name": "focusNewItem",
+                  "optional": true,
+                  "type": {
+                    "text": "boolean"
+                  }
+                }
+              ],
+              "description": "Resets the tabindex of the currently focused item and sets focus to a new item.",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "inheritedFrom": {
+                "name": "List",
+                "module": "components/list/list.component.js"
+              }
+            },
+            {
+              "kind": "method",
+              "name": "clearScrollToBottomTimer",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              }
+            },
+            {
+              "kind": "method",
+              "name": "scrollToIndex",
+              "privacy": "public",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "index",
+                  "type": {
+                    "text": "number"
+                  }
+                },
+                {
+                  "name": "options",
+                  "optional": true,
+                  "type": {
+                    "text": "ScrollToOptions"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "syncUI",
+              "privacy": "private"
+            },
+            {
+              "kind": "method",
+              "name": "handleWheelEvent",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "e",
+                  "type": {
+                    "text": "WheelEvent"
+                  }
+                }
+              ]
             },
             {
               "kind": "field",
-              "name": "virtualizerController",
+              "name": "dataAriaLabel",
               "type": {
-                "text": "null"
+                "text": "string | null"
               },
-              "default": "null"
+              "default": "null",
+              "description": "Defines a string value that labels the current element.\nThe Aria-Label attribute to be set for accessibility.",
+              "attribute": "data-aria-label",
+              "reflects": true,
+              "inheritedFrom": {
+                "name": "DataAriaLabelMixin",
+                "module": "utils/mixins/DataAriaLabelMixin.js"
+              }
+            },
+            {
+              "kind": "method",
+              "name": "getCurrentIndex",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": ""
+                }
+              },
+              "parameters": [
+                {
+                  "name": "target",
+                  "type": {
+                    "text": "HTMLElement | null"
+                  },
+                  "description": "The target element that triggered the event."
+                }
+              ],
+              "description": "Retrieves the current index of the item that triggered the event.",
+              "inheritedFrom": {
+                "name": "List",
+                "module": "components/list/list.component.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": "List",
+                "module": "components/list/list.component.js"
+              }
+            },
+            {
+              "kind": "method",
+              "name": "shouldLoop",
+              "privacy": "private",
+              "inheritedFrom": {
+                "name": "List",
+                "module": "components/list/list.component.js"
+              }
             },
             {
               "kind": "field",
-              "name": "onscroll",
+              "name": "initialFocus",
               "type": {
-                "text": "null"
+                "text": "number"
               },
-              "default": "null"
+              "privacy": "public",
+              "description": "The index of the item that should receive focus when the list is first rendered.\nIf the index is out of bounds, the focused element will be clamped to the nearest valid index.",
+              "default": "0",
+              "attribute": "initial-focus",
+              "reflects": true,
+              "inheritedFrom": {
+                "name": "List",
+                "module": "components/list/list.component.js"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "itemsStore",
+              "default": "new ElementStore<ListItem>(this, { isValidItem: this.isValidItem, onStoreUpdate: this.onElementStoreUpdate.bind(this), })",
+              "inheritedFrom": {
+                "name": "List",
+                "module": "components/list/list.component.js"
+              }
             }
           ],
           "events": [
             {
+              "name": "virtualitemschange",
               "type": {
-                "text": "EventConstructor"
-              }
+                "text": "CustomEvent"
+              },
+              "description": "(React: onVirtualItemsChange) Event that gets called when the virtual items change.",
+              "reactName": "onVirtualItemsChange"
             },
             {
               "description": "(React: onScroll) Event that gets called when user scrolls inside of list.",
@@ -52989,29 +53544,100 @@
           ],
           "attributes": [
             {
-              "name": "virtualizerprops",
+              "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)",
+              "description": "Object that sets and updates the virtualizer with any relevant props.\nThere are three required object props in order to get virtualization to work properly.\n\n**count** - 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).\n\n**estimateSize** - 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\n**getItemKey** - A function that returns a unique key for each item in your list based on its index.\n\nA full list of possible props can be in\n[Tanstack Virtualizer API Docs](https://tanstack.com/virtual/latest/docs/api/virtualizer)",
               "fieldName": "virtualizerProps"
             },
             {
-              "name": "setlistdata",
+              "name": "loop",
               "type": {
-                "text": "(({ virtualItems, measureElement, listStyle }: SetListDataProps) => void) | null"
+                "text": "'true' | 'false'"
+              },
+              "description": "Whether to loop navigation when reaching the end of the list.\nIf 'true', pressing the down arrow on the last item will focus the first item,\nand pressing the up arrow on the first item will focus the last item.\nIf 'false', navigation will stop at the first or last item.",
+              "default": "'false'",
+              "fieldName": "loop",
+              "inheritedFrom": {
+                "name": "List",
+                "module": "src/components/list/list.component.ts"
+              }
+            },
+            {
+              "name": "scroll-anchoring",
+              "type": {
+                "text": "boolean"
+              },
+              "description": "Enable automatic scroll anchoring when the list size changes.\nBy default, list does not scroll to the very end it keeps the scroll position otherwise\nit try hold the scroll position on the last selected when list updates.\n\nIt is handy when list size or list item sizes change dynamically (e.g., incoming messages in a chat app).",
+              "default": "false",
+              "fieldName": "scrollAnchoring"
+            },
+            {
+              "name": "observe-size-changes",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "When true, the list will observe size changes of its items and re-measure them as needed.\nThis is useful if your list items can change size dynamically (e.g., due to content changes or window resizing).",
+              "fieldName": "observeSizeChanges"
+            },
+            {
+              "name": "revert-list",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "When true, the list items will be aligned to the bottom of the list, and it anchors scroll to the bottom\nuntil the first user scroll interaction.\n\nNote: It does not affect on the rendering order, the first item is still at the top of the list.",
+              "fieldName": "revertList"
+            },
+            {
+              "name": "at-bottom-threshold",
+              "type": {
+                "text": "number"
+              },
+              "description": "The maximum gap (in pixels) between the very bottom of the list end the current scroll positioning\nIt is used to calculate scroll anchoring.",
+              "fieldName": "atBottomThreshold"
+            },
+            {
+              "name": "data-aria-label",
+              "type": {
+                "text": "string | null"
               },
-              "description": "Callback that gets envoked when updates to the virtualizer interally occur.\nThis must be implemented in such a way that this function will trigger update to parent.\n\nvirtualItems - Array that will be what the client displays on screen. Use this to render\na List of your choosing with these items nested inside as your ListItems.\nmeasureElement - Ref to pass to each ListItem rendered client side.\nEach ListItem should also be be passed key and a data-index (which can be found on the virtualItem).\nlistStyle - This should be passed as the style attribute to your List.",
               "default": "null",
-              "fieldName": "setlistdata"
+              "description": "Defines a string value that labels the current element.\nThe Aria-Label attribute to be set for accessibility.",
+              "fieldName": "dataAriaLabel",
+              "inheritedFrom": {
+                "name": "DataAriaLabelMixin",
+                "module": "src/utils/mixins/DataAriaLabelMixin.ts"
+              }
+            },
+            {
+              "name": "initial-focus",
+              "type": {
+                "text": "number"
+              },
+              "description": "The index of the item that should receive focus when the list is first rendered.\nIf the index is out of bounds, the focused element will be clamped to the nearest valid index.",
+              "default": "0",
+              "fieldName": "initialFocus",
+              "inheritedFrom": {
+                "name": "List",
+                "module": "src/components/list/list.component.ts"
+              }
+            }
+          ],
+          "mixins": [
+            {
+              "name": "DataAriaLabelMixin",
+              "module": "/src/utils/mixins/DataAriaLabelMixin"
             }
           ],
           "superclass": {
-            "name": "Component",
-            "module": "/src/models"
+            "name": "List",
+            "module": "/src/components/list/list.component"
           },
           "tagName": "mdc-virtualizedlist",
-          "jsDoc": "/**\n * `mdc-virtualizedlist` component for creating custom virtualized lists.\n * IMPORTANT: This component does not create it's own list/list items.\n * Use the setlistdata callback prop to update client state in order to\n * Pass list/listitems as a child of this component, which this will virtuailze\n * This implementation handles dynamic lists as well as fixed sized lists.\n * Please refer to [Tanstack Virtual Docs](https://tanstack.com/virtual/latest) for more in depth documentation.\n *\n * @tagname mdc-virtualizedlist\n *\n * @event scroll - (React: onScroll) Event that gets called when user scrolls inside of list.\n *\n * @slot - Client side List with nested list items.\n *\n * @csspart container - The container of the virtualized list.\n * @csspart scroll - The scrollable area of the virtualized list.\n */",
+          "jsDoc": "/**\n * `mdc-virtualizedlist` is an extension of the `mdc-list` component that adds virtualization capabilities using\n * the Tanstack Virtual library.\n *\n * This component is thin wrapper around the Tanstack libray to provide additional funtionalities such as\n * keyboard navigation, focus management, scroll anchoring and accessibility features.\n *\n * Please refer to [Tanstack Virtual Docs](https://tanstack.com/virtual/latest) for more in depth documentation.\n *\n * ## Setup\n *\n * `virtualizerProps` is a required prop that requires at least two properties to be set: `count` and `estimateSize`.\n * `count` is the total number of items in the list, and `estimateSize` is a function that returns the estimated\n * size (in pixels) of each item in the list. `getItemKey` is also strongly recommended to be set to provide unique\n * keys for each item in the list.\n *\n * ### Render list items\n *\n * To keep the component framework-agnostic, the rendering of the list items is left to the consumer.\n *\n * We need to render only the visible items. The list of visible items are provided by the `virtualitemschange` event.\n * The event detail contains the `virtualItems` array, which contains the information for the rendering.\n * List items must have an `data-index` attribute, the indexes are in the `virtualItems` list.\n *\n * ## Best practices\n *\n * ### List updates\n *\n * Tanstack needs only the count of the items in the list and the size of each item to perform virtualization.\n * List updates happens when\n * - when `virtualizerProps` property of the component instance changes\n * - when `observe-size-changes` is set and the item's size changes (it uses ResizeObserver internally)\n * - when `component.visualiser.measure` called manually.\n *\n * ### Header\n *\n * To add a header to the list, use the `mdc-listheader` component and place it in the `list-header` slot.\n *\n * ### Lists with dynamic content\n *\n * Unique keys for the list items are critical for dynamically changing list items or item's content.\n * If the key change with the content it will cause scrollbar and content shuttering.\n *\n * @tagname mdc-virtualizedlist\n *\n * @event scroll - (React: onScroll) Event that gets called when user scrolls inside of list.\n * @event virtualitemschange - (React: onVirtualItemsChange) Event that gets called when the virtual items change.\n *\n * @slot default - This is a default/unnamed slot, where listitems can be placed.\n * @slot list-header - This slot is used to pass a header for the list, which can be a `mdc-listheader` component.\n *\n * @csspart container - The container of the virtualized list.\n * @csspart scroll - The scrollable area of the virtualized list.\n */",
           "customElement": true
         }
       ],
@@ -55171,7 +55797,7 @@
               "kind": "field",
               "name": "navItems",
               "type": {
-                "text": "HTMLElement[]"
+                "text": "BaseArray<HTMLElement>"
               },
               "privacy": "protected",
               "readonly": true
@@ -55191,6 +55817,13 @@
                   "type": {
                     "text": "number"
                   }
+                },
+                {
+                  "name": "focusElement",
+                  "optional": true,
+                  "type": {
+                    "text": "boolean"
+                  }
                 }
               ]
             },
@@ -55225,6 +55858,34 @@
                   }
                 }
               ]
+            },
+            {
+              "kind": "method",
+              "name": "setInitialFocus",
+              "privacy": "protected",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              }
+            },
+            {
+              "kind": "method",
+              "name": "handleNavigationKeyDown",
+              "privacy": "protected",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "event",
+                  "type": {
+                    "text": "KeyboardEvent"
+                  }
+                }
+              ]
             }
           ]
         },
@@ -55233,6 +55894,11 @@
           "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": "setInitialFocus",
+              "privacy": "protected"
+            },
             {
               "kind": "method",
               "name": "getCurrentIndex",
@@ -55264,6 +55930,11 @@
                     "text": "number"
                   },
                   "description": "The index of the currently focused item."
+                },
+                {
+                  "name": "focusElement",
+                  "default": "true",
+                  "description": "Call focus() on the current item or not."
                 }
               ],
               "description": "Reset all tabindex to -1 and set the tabindex of the current item to 0"