@momentum-design/components 0.127.4 → 0.127.5

package/dist/custom-elements.json

@@ -513,157 +513,6 @@
         }
       ]
     },
-    {
-      "kind": "javascript-module",
-      "path": "components/accordiongroup/accordiongroup.component.js",
-      "declarations": [
-        {
-          "kind": "class",
-          "description": "An accordion group is a vertically stacked set of interactive headings that each contain a header and body content.\nEach heading of the accordion acts as a control that enable users to expand or hide their associated body sections of content.\nAccordions are commonly used to reduce the need to scroll when presenting multiple sections of content on a single page.\n\n- Default Slot: The accordion group component only accepts, `accordion` and `accordionbutton` components as the children, rest are ignored.\n\nThere are three types of variants:\n- Stacked - Each accordion will have a gap of 1.5rem (24px).\n- Borderless - Each accordion will not have any border and the group will also not have any border.\n- Contained - Each accordion will have no gap in between them and the border of the entire accordiongroup will be continuous.\n\nThere are two types of sizes:\n- Small: Small size has a padding of 1rem (16px) for both heading and body sections.\n- Large: Large size has a padding of 1.5rem (24px) for both heading and body sections.\n\nThe variant and size will be applied to all accordions inside this accordion group.\nTo show/expand more than one accordion at any given time, then set `allow-multiple` to `true`. By default, it's `false`.\n\nIf you don't need any controls on your accordion heading, then it's advised to use `accordionbutton` component.\n\nIf the first accordion of the accordion group is expanded by default, then the screen reader might loose focus when toggling the visibilty of the first accordion.",
-          "name": "AccordionGroup",
-          "cssProperties": [
-            {
-              "description": "The border color of the entire accordiongroup",
-              "name": "--mdc-accordiongroup-border-color"
-            }
-          ],
-          "slots": [
-            {
-              "description": "The default slot can contain the `accordion` or `accordionbutton` components.",
-              "name": "default"
-            }
-          ],
-          "members": [
-            {
-              "kind": "field",
-              "name": "size",
-              "type": {
-                "text": "Size"
-              },
-              "description": "The size of the accordion item.",
-              "default": "'small'",
-              "attribute": "size",
-              "reflects": true
-            },
-            {
-              "kind": "field",
-              "name": "variant",
-              "type": {
-                "text": "Variant"
-              },
-              "description": "The variant of the accordion item. Based on the variant, the styling of the accordion gets changed.",
-              "default": "'stacked'",
-              "attribute": "variant",
-              "reflects": true
-            },
-            {
-              "kind": "field",
-              "name": "allowMultiple",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "If true, multiple accordion items can be visible at the same time.",
-              "attribute": "allow-multiple",
-              "reflects": true
-            },
-            {
-              "kind": "method",
-              "name": "handleAccordionExpanded",
-              "privacy": "private",
-              "return": {
-                "type": {
-                  "text": "void"
-                }
-              },
-              "parameters": [
-                {
-                  "name": "event",
-                  "type": {
-                    "text": "Event"
-                  },
-                  "description": "The event object from the 'shown' event."
-                }
-              ],
-              "description": "Handles the 'shown' event for accordion items.\nIf `allowMultiple` is false, ensures that only one accordion item\nremains expanded by collapsing all other expanded items when a new item is expanded."
-            },
-            {
-              "kind": "method",
-              "name": "setChildrenAccordionAttributes",
-              "privacy": "private",
-              "return": {
-                "type": {
-                  "text": "void"
-                }
-              },
-              "parameters": [
-                {
-                  "name": "attributeName",
-                  "type": {
-                    "text": "string"
-                  },
-                  "description": "The name of the attribute to set."
-                },
-                {
-                  "name": "attributeValue",
-                  "type": {
-                    "text": "string"
-                  },
-                  "description": "The value to set the attribute to."
-                }
-              ],
-              "description": "Sets the given attribute on all child accordion or accordionbutton components."
-            }
-          ],
-          "attributes": [
-            {
-              "name": "size",
-              "type": {
-                "text": "Size"
-              },
-              "description": "The size of the accordion item.",
-              "default": "'small'",
-              "fieldName": "size"
-            },
-            {
-              "name": "variant",
-              "type": {
-                "text": "Variant"
-              },
-              "description": "The variant of the accordion item. Based on the variant, the styling of the accordion gets changed.",
-              "default": "'stacked'",
-              "fieldName": "variant"
-            },
-            {
-              "name": "allow-multiple",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "If true, multiple accordion items can be visible at the same time.",
-              "fieldName": "allowMultiple"
-            }
-          ],
-          "superclass": {
-            "name": "Component",
-            "module": "/src/models"
-          },
-          "tagName": "mdc-accordiongroup",
-          "jsDoc": "/**\n * An accordion group is a vertically stacked set of interactive headings that each contain a header and body content.\n * Each heading of the accordion acts as a control that enable users to expand or hide their associated body sections of content.\n * Accordions are commonly used to reduce the need to scroll when presenting multiple sections of content on a single page.\n *\n * - Default Slot: The accordion group component only accepts, `accordion` and `accordionbutton` components as the children, rest are ignored.\n *\n * There are three types of variants:\n * - Stacked - Each accordion will have a gap of 1.5rem (24px).\n * - Borderless - Each accordion will not have any border and the group will also not have any border.\n * - Contained - Each accordion will have no gap in between them and the border of the entire accordiongroup will be continuous.\n *\n * There are two types of sizes:\n * - Small: Small size has a padding of 1rem (16px) for both heading and body sections.\n * - Large: Large size has a padding of 1.5rem (24px) for both heading and body sections.\n *\n * The variant and size will be applied to all accordions inside this accordion group.\n * To show/expand more than one accordion at any given time, then set `allow-multiple` to `true`. By default, it's `false`.\n *\n * If you don't need any controls on your accordion heading, then it's advised to use `accordionbutton` component.\n *\n * If the first accordion of the accordion group is expanded by default, then the screen reader might loose focus when toggling the visibilty of the first accordion.\n *\n * @tagname mdc-accordiongroup\n *\n * @slot default - The default slot can contain the `accordion` or `accordionbutton` components.\n *\n * @cssproperty --mdc-accordiongroup-border-color - The border color of the entire accordiongroup\n */",
-          "customElement": true
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "default",
-          "declaration": {
-            "name": "AccordionGroup",
-            "module": "components/accordiongroup/accordiongroup.component.js"
-          }
-        }
-      ]
-    },
     {
       "kind": "javascript-module",
       "path": "components/accordionbutton/accordionbutton.component.js",
@@ -1006,119 +855,270 @@
     },
     {
       "kind": "javascript-module",
-      "path": "components/alertchip/alertchip.component.js",
+      "path": "components/accordiongroup/accordiongroup.component.js",
       "declarations": [
         {
           "kind": "class",
-          "description": "mdc-alertchip component is an interactive chip that consumers can use to represent an alert.\n\n- It supports a leading icon along with label.\n- It supports 5 variants of alerts - neutral, warning, error, success, and informational\n\nThis component is built by extending Buttonsimple.",
-          "name": "AlertChip",
+          "description": "An accordion group is a vertically stacked set of interactive headings that each contain a header and body content.\nEach heading of the accordion acts as a control that enable users to expand or hide their associated body sections of content.\nAccordions are commonly used to reduce the need to scroll when presenting multiple sections of content on a single page.\n\n- Default Slot: The accordion group component only accepts, `accordion` and `accordionbutton` components as the children, rest are ignored.\n\nThere are three types of variants:\n- Stacked - Each accordion will have a gap of 1.5rem (24px).\n- Borderless - Each accordion will not have any border and the group will also not have any border.\n- Contained - Each accordion will have no gap in between them and the border of the entire accordiongroup will be continuous.\n\nThere are two types of sizes:\n- Small: Small size has a padding of 1rem (16px) for both heading and body sections.\n- Large: Large size has a padding of 1.5rem (24px) for both heading and body sections.\n\nThe variant and size will be applied to all accordions inside this accordion group.\nTo show/expand more than one accordion at any given time, then set `allow-multiple` to `true`. By default, it's `false`.\n\nIf you don't need any controls on your accordion heading, then it's advised to use `accordionbutton` component.\n\nIf the first accordion of the accordion group is expanded by default, then the screen reader might loose focus when toggling the visibilty of the first accordion.",
+          "name": "AccordionGroup",
           "cssProperties": [
             {
-              "description": "The color of the label text",
-              "name": "--mdc-chip-color"
-            },
-            {
-              "description": "The color of the icon",
-              "name": "--mdc-chip-icon-color"
-            },
-            {
-              "description": "The border color of the alertchip",
-              "name": "--mdc-chip-border-color"
-            },
-            {
-              "description": "The background color of the alertchip",
-              "name": "--mdc-chip-background-color"
-            },
-            {
-              "description": "Height for button size",
-              "name": "--mdc-button-height",
-              "inheritedFrom": {
-                "name": "Buttonsimple",
-                "module": "src/components/buttonsimple/buttonsimple.component.ts"
-              }
-            },
-            {
-              "description": "Background color of the button",
-              "name": "--mdc-button-background",
-              "inheritedFrom": {
-                "name": "Buttonsimple",
-                "module": "src/components/buttonsimple/buttonsimple.component.ts"
-              }
-            },
-            {
-              "description": "Borer color of the button",
-              "name": "--mdc-button-border-color",
-              "inheritedFrom": {
-                "name": "Buttonsimple",
-                "module": "src/components/buttonsimple/buttonsimple.component.ts"
-              }
-            },
-            {
-              "description": "Text color of the button",
-              "name": "--mdc-button-text-color",
-              "inheritedFrom": {
-                "name": "Buttonsimple",
-                "module": "src/components/buttonsimple/buttonsimple.component.ts"
-              }
+              "description": "The border color of the entire accordiongroup",
+              "name": "--mdc-accordiongroup-border-color"
             }
           ],
-          "cssParts": [
-            {
-              "description": "The alert icon",
-              "name": "icon"
-            },
+          "slots": [
             {
-              "description": "The text label of the alertchip",
-              "name": "label"
+              "description": "The default slot can contain the `accordion` or `accordionbutton` components.",
+              "name": "default"
             }
           ],
           "members": [
             {
               "kind": "field",
-              "name": "variant",
+              "name": "size",
               "type": {
-                "text": "VariantType"
+                "text": "Size"
               },
-              "description": "The variant of the alertchip. It supports 5 variants\n- neutral\n- warning\n- error\n- success\n- informational",
-              "default": "neutral",
-              "attribute": "variant",
+              "description": "The size of the accordion item.",
+              "default": "'small'",
+              "attribute": "size",
               "reflects": true
             },
             {
               "kind": "field",
-              "name": "label",
-              "type": {
-                "text": "string"
-              },
-              "default": "''",
-              "description": "The visible label text of the alertchip.\n\nWe recommend limiting the <b>maximum length of the label text to 20 characters</b>,\nincluding empty spaces to split words.",
-              "attribute": "label"
-            },
-            {
-              "kind": "field",
-              "name": "iconName",
+              "name": "variant",
               "type": {
-                "text": "IconNames | undefined"
+                "text": "Variant"
               },
-              "description": "Name of the icon (= filename).\n\nIf no `icon-name` is provided, no icon will be rendered.",
-              "attribute": "icon-name",
-              "inheritedFrom": {
-                "name": "IconNameMixin",
-                "module": "utils/mixins/IconNameMixin.js"
-              }
+              "description": "The variant of the accordion item. Based on the variant, the styling of the accordion gets changed.",
+              "default": "'stacked'",
+              "attribute": "variant",
+              "reflects": true
             },
             {
               "kind": "field",
-              "name": "autoFocusOnMount",
+              "name": "allowMultiple",
               "type": {
                 "text": "boolean"
               },
               "default": "false",
-              "description": "This property indicates whether the element should receive focus automatically when it is mounted.\n\nIt will not focus if the element is re-attached to the DOM after being removed.",
-              "attribute": "auto-focus-on-mount",
-              "reflects": true,
-              "inheritedFrom": {
-                "name": "AutoFocusOnMountMixin",
+              "description": "If true, multiple accordion items can be visible at the same time.",
+              "attribute": "allow-multiple",
+              "reflects": true
+            },
+            {
+              "kind": "method",
+              "name": "handleAccordionExpanded",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "event",
+                  "type": {
+                    "text": "Event"
+                  },
+                  "description": "The event object from the 'shown' event."
+                }
+              ],
+              "description": "Handles the 'shown' event for accordion items.\nIf `allowMultiple` is false, ensures that only one accordion item\nremains expanded by collapsing all other expanded items when a new item is expanded."
+            },
+            {
+              "kind": "method",
+              "name": "setChildrenAccordionAttributes",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "attributeName",
+                  "type": {
+                    "text": "string"
+                  },
+                  "description": "The name of the attribute to set."
+                },
+                {
+                  "name": "attributeValue",
+                  "type": {
+                    "text": "string"
+                  },
+                  "description": "The value to set the attribute to."
+                }
+              ],
+              "description": "Sets the given attribute on all child accordion or accordionbutton components."
+            }
+          ],
+          "attributes": [
+            {
+              "name": "size",
+              "type": {
+                "text": "Size"
+              },
+              "description": "The size of the accordion item.",
+              "default": "'small'",
+              "fieldName": "size"
+            },
+            {
+              "name": "variant",
+              "type": {
+                "text": "Variant"
+              },
+              "description": "The variant of the accordion item. Based on the variant, the styling of the accordion gets changed.",
+              "default": "'stacked'",
+              "fieldName": "variant"
+            },
+            {
+              "name": "allow-multiple",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "If true, multiple accordion items can be visible at the same time.",
+              "fieldName": "allowMultiple"
+            }
+          ],
+          "superclass": {
+            "name": "Component",
+            "module": "/src/models"
+          },
+          "tagName": "mdc-accordiongroup",
+          "jsDoc": "/**\n * An accordion group is a vertically stacked set of interactive headings that each contain a header and body content.\n * Each heading of the accordion acts as a control that enable users to expand or hide their associated body sections of content.\n * Accordions are commonly used to reduce the need to scroll when presenting multiple sections of content on a single page.\n *\n * - Default Slot: The accordion group component only accepts, `accordion` and `accordionbutton` components as the children, rest are ignored.\n *\n * There are three types of variants:\n * - Stacked - Each accordion will have a gap of 1.5rem (24px).\n * - Borderless - Each accordion will not have any border and the group will also not have any border.\n * - Contained - Each accordion will have no gap in between them and the border of the entire accordiongroup will be continuous.\n *\n * There are two types of sizes:\n * - Small: Small size has a padding of 1rem (16px) for both heading and body sections.\n * - Large: Large size has a padding of 1.5rem (24px) for both heading and body sections.\n *\n * The variant and size will be applied to all accordions inside this accordion group.\n * To show/expand more than one accordion at any given time, then set `allow-multiple` to `true`. By default, it's `false`.\n *\n * If you don't need any controls on your accordion heading, then it's advised to use `accordionbutton` component.\n *\n * If the first accordion of the accordion group is expanded by default, then the screen reader might loose focus when toggling the visibilty of the first accordion.\n *\n * @tagname mdc-accordiongroup\n *\n * @slot default - The default slot can contain the `accordion` or `accordionbutton` components.\n *\n * @cssproperty --mdc-accordiongroup-border-color - The border color of the entire accordiongroup\n */",
+          "customElement": true
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "default",
+          "declaration": {
+            "name": "AccordionGroup",
+            "module": "components/accordiongroup/accordiongroup.component.js"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "components/alertchip/alertchip.component.js",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "mdc-alertchip component is an interactive chip that consumers can use to represent an alert.\n\n- It supports a leading icon along with label.\n- It supports 5 variants of alerts - neutral, warning, error, success, and informational\n\nThis component is built by extending Buttonsimple.",
+          "name": "AlertChip",
+          "cssProperties": [
+            {
+              "description": "The color of the label text",
+              "name": "--mdc-chip-color"
+            },
+            {
+              "description": "The color of the icon",
+              "name": "--mdc-chip-icon-color"
+            },
+            {
+              "description": "The border color of the alertchip",
+              "name": "--mdc-chip-border-color"
+            },
+            {
+              "description": "The background color of the alertchip",
+              "name": "--mdc-chip-background-color"
+            },
+            {
+              "description": "Height for button size",
+              "name": "--mdc-button-height",
+              "inheritedFrom": {
+                "name": "Buttonsimple",
+                "module": "src/components/buttonsimple/buttonsimple.component.ts"
+              }
+            },
+            {
+              "description": "Background color of the button",
+              "name": "--mdc-button-background",
+              "inheritedFrom": {
+                "name": "Buttonsimple",
+                "module": "src/components/buttonsimple/buttonsimple.component.ts"
+              }
+            },
+            {
+              "description": "Borer color of the button",
+              "name": "--mdc-button-border-color",
+              "inheritedFrom": {
+                "name": "Buttonsimple",
+                "module": "src/components/buttonsimple/buttonsimple.component.ts"
+              }
+            },
+            {
+              "description": "Text color of the button",
+              "name": "--mdc-button-text-color",
+              "inheritedFrom": {
+                "name": "Buttonsimple",
+                "module": "src/components/buttonsimple/buttonsimple.component.ts"
+              }
+            }
+          ],
+          "cssParts": [
+            {
+              "description": "The alert icon",
+              "name": "icon"
+            },
+            {
+              "description": "The text label of the alertchip",
+              "name": "label"
+            }
+          ],
+          "members": [
+            {
+              "kind": "field",
+              "name": "variant",
+              "type": {
+                "text": "VariantType"
+              },
+              "description": "The variant of the alertchip. It supports 5 variants\n- neutral\n- warning\n- error\n- success\n- informational",
+              "default": "neutral",
+              "attribute": "variant",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "label",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "description": "The visible label text of the alertchip.\n\nWe recommend limiting the <b>maximum length of the label text to 20 characters</b>,\nincluding empty spaces to split words.",
+              "attribute": "label"
+            },
+            {
+              "kind": "field",
+              "name": "iconName",
+              "type": {
+                "text": "IconNames | undefined"
+              },
+              "description": "Name of the icon (= filename).\n\nIf no `icon-name` is provided, no icon will be rendered.",
+              "attribute": "icon-name",
+              "inheritedFrom": {
+                "name": "IconNameMixin",
+                "module": "utils/mixins/IconNameMixin.js"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "autoFocusOnMount",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "This property indicates whether the element should receive focus automatically when it is mounted.\n\nIt will not focus if the element is re-attached to the DOM after being removed.",
+              "attribute": "auto-focus-on-mount",
+              "reflects": true,
+              "inheritedFrom": {
+                "name": "AutoFocusOnMountMixin",
                 "module": "utils/mixins/AutoFocusOnMountMixin.js"
               }
             },
@@ -4684,7 +4684,7 @@
       "declarations": [
         {
           "kind": "class",
-          "description": "`mdc-banner` is a component that allows applications to communicate important messages to users \nand requires user action to dismiss them. It supports different message types with appropriate styling \nand icons, and provides flexibility for customization through label, secondary label, icons, and actions.\n\nThey are designed to be noticeable yet non-intrusive, helping users stay informed without interrupting their workflow.\n\nThis component supports both structured content via properties and flexible customization via slots:\n- Use the properties (`label`, `secondaryLabel`, `variant`) for standard banner layouts with automatic icon selection.\n- Use slots for custom content and complete layout control.\n- Combine both approaches for maximum flexibility.\n- Create custom orientations and actions using CSS parts and slots.",
+          "description": "`mdc-banner` is a component that allows applications to communicate important messages to users\nand requires user action to dismiss them. It supports different message types with appropriate styling\nand icons, and provides flexibility for customization through label, secondary label, icons, and actions.\n\nThey are designed to be noticeable yet non-intrusive, helping users stay informed without interrupting their workflow.\n\nThis component supports both structured content via properties and flexible customization via slots:\n- Use the properties (`label`, `secondaryLabel`, `variant`) for standard banner layouts with automatic icon selection.\n- Use slots for custom content and complete layout control.\n- Combine both approaches for maximum flexibility.\n- Create custom orientations and actions using CSS parts and slots.",
           "name": "Banner",
           "cssProperties": [
             {
@@ -4695,6 +4695,10 @@
               "description": "Border color of the banner.",
               "name": "--mdc-banner-border-color"
             },
+            {
+              "description": "Border width of the banner.",
+              "name": "--mdc-banner-border-width"
+            },
             {
               "description": "Color of the icon in the banner.",
               "name": "--mdc-banner-icon-color"
@@ -4823,7 +4827,7 @@
             "module": "/src/models"
           },
           "tagName": "mdc-banner",
-          "jsDoc": "/**\n * `mdc-banner` is a component that allows applications to communicate important messages to users \n * and requires user action to dismiss them. It supports different message types with appropriate styling \n * and icons, and provides flexibility for customization through label, secondary label, icons, and actions.\n * \n * They are designed to be noticeable yet non-intrusive, helping users stay informed without interrupting their workflow.\n *\n * This component supports both structured content via properties and flexible customization via slots:\n * - Use the properties (`label`, `secondaryLabel`, `variant`) for standard banner layouts with automatic icon selection.\n * - Use slots for custom content and complete layout control.\n * - Combine both approaches for maximum flexibility.\n * - Create custom orientations and actions using CSS parts and slots.\n * \n * @dependency mdc-icon\n * @dependency mdc-text\n *\n * @slot content - Complete content override. When used, it replaces all default banner content including icon, label, secondary label, and actions.\n * @slot leading-icon - Custom icon content. Overrides the default variant-based icon.\n * @slot leading-text - Custom text content. Overrides the label and secondaryLabel properties.\n * @slot trailing-actions - Custom action buttons and controls. Use this for dismiss buttons, reset buttons, or any other actions.\n *\n * @tagname mdc-banner\n *\n * @csspart leading - The leading section containing the icon and text.\n * @csspart leading-icon - The icon displayed for variants or custom icon slot.\n * @csspart leading-text - The leading section containing label and secondary label text.\n * @csspart trailing - The trailing section containing action buttons and controls.\n * @csspart leading-label - The label text of the banner.\n * @csspart leading-secondary-label - The secondary label text of the banner.\n *\n * @cssproperty --mdc-banner-background-color - Background color of the banner.\n * @cssproperty --mdc-banner-border-color - Border color of the banner.\n * @cssproperty --mdc-banner-icon-color - Color of the icon in the banner.\n * @cssproperty --mdc-banner-elevation - Elevation/shadow of the banner.\n * @cssproperty --mdc-banner-padding - Padding inside the banner.\n * @cssproperty --mdc-banner-gap - Gap between banner elements.\n */",
+          "jsDoc": "/**\n * `mdc-banner` is a component that allows applications to communicate important messages to users\n * and requires user action to dismiss them. It supports different message types with appropriate styling\n * and icons, and provides flexibility for customization through label, secondary label, icons, and actions.\n *\n * They are designed to be noticeable yet non-intrusive, helping users stay informed without interrupting their workflow.\n *\n * This component supports both structured content via properties and flexible customization via slots:\n * - Use the properties (`label`, `secondaryLabel`, `variant`) for standard banner layouts with automatic icon selection.\n * - Use slots for custom content and complete layout control.\n * - Combine both approaches for maximum flexibility.\n * - Create custom orientations and actions using CSS parts and slots.\n *\n * @dependency mdc-icon\n * @dependency mdc-text\n *\n * @slot content - Complete content override. When used, it replaces all default banner content including icon, label, secondary label, and actions.\n * @slot leading-icon - Custom icon content. Overrides the default variant-based icon.\n * @slot leading-text - Custom text content. Overrides the label and secondaryLabel properties.\n * @slot trailing-actions - Custom action buttons and controls. Use this for dismiss buttons, reset buttons, or any other actions.\n *\n * @tagname mdc-banner\n *\n * @csspart leading - The leading section containing the icon and text.\n * @csspart leading-icon - The icon displayed for variants or custom icon slot.\n * @csspart leading-text - The leading section containing label and secondary label text.\n * @csspart trailing - The trailing section containing action buttons and controls.\n * @csspart leading-label - The label text of the banner.\n * @csspart leading-secondary-label - The secondary label text of the banner.\n *\n * @cssproperty --mdc-banner-background-color - Background color of the banner.\n * @cssproperty --mdc-banner-border-color - Border color of the banner.\n * @cssproperty --mdc-banner-border-width - Border width of the banner.\n * @cssproperty --mdc-banner-icon-color - Color of the icon in the banner.\n * @cssproperty --mdc-banner-elevation - Elevation/shadow of the banner.\n * @cssproperty --mdc-banner-padding - Padding inside the banner.\n * @cssproperty --mdc-banner-gap - Gap between banner elements.\n */",
           "customElement": true
         }
       ],
@@ -22853,208 +22857,116 @@
     },
     {
       "kind": "javascript-module",
-      "path": "components/listitem/listitem.component.js",
+      "path": "components/marker/marker.component.js",
       "declarations": [
         {
           "kind": "class",
-          "description": "mdc-listitem component is used to display a label with different types of controls.\nThere can be three types of controls, a radio button, a checkbox on the\nleading side and a toggle on the trailing side.\nThe list item can contain an avatar on the leading side and a badge on the trailing side.\nAdditionally, the list item can contain a side header and a subline text.\n\nThe leading and trailing slots can be used to display controls and text. <br/>\nBased on the leading/trailing slot, the position of the controls and text can be adjusted. <br/>\nPlease use mdc-list as a parent element even when there is only listitem for a11y purpose.\n\n**Note**: If a listitem contains a long text, it is recommended to create a tooltip for the listitem that displays the full text on hover.\nConsumers need to add a unique ID to this listitem and use that ID in the tooltip's `triggerID` attribute. We are not creating the tooltip automatically, consumers need to add `<mdc-tooltip>` element manually and associate it with the listitem using the `triggerID` attribute.",
-          "name": "ListItem",
+          "description": "`mdc-marker`, which is a vertical line and\nused to draw attention to specific parts of\nthe content or to signify important information.\n\n**Marker Variants**:\n- **solid**: Solid marker.\n- **striped**: Striped marker.",
+          "name": "Marker",
           "cssProperties": [
             {
-              "description": "Allows customization of the default background color.",
-              "name": "--mdc-listitem-default-background-color"
-            },
-            {
-              "description": "Allows customization of the background color on hover.",
-              "name": "--mdc-listitem-background-color-hover"
-            },
-            {
-              "description": "Allows customization of the background color when pressed.",
-              "name": "--mdc-listitem-background-color-active"
-            },
-            {
-              "description": "Allows customization of the primary label, side header and subline text slot color.",
-              "name": "--mdc-listitem-primary-label-color"
+              "description": "Allows customization of the default background color in solid variant.",
+              "name": "--mdc-marker-solid-background-color"
             },
             {
-              "description": "Allows customization of the secondary and tertiary label text slot color.",
-              "name": "--mdc-listitem-secondary-label-color"
+              "description": "Allows customization of the default stripes in striped variant.",
+              "name": "--mdc-marker-striped-color"
             },
             {
-              "description": "Allows customization of the disabled color.",
-              "name": "--mdc-listitem-disabled-color"
+              "description": "Allows customization of the default background color in striped variant.",
+              "name": "--mdc-marker-striped-background-color"
             },
             {
-              "description": "Allows customization of column gap.",
-              "name": "--mdc-listitem-column-gap"
-            },
-            {
-              "description": "Allows customization of padding left and right.",
-              "name": "--mdc-listitem-padding-left-right"
-            },
-            {
-              "description": "Allows customization of padding top and bottom.",
-              "name": "--mdc-listitem-padding-top-bottom"
-            },
-            {
-              "description": "Allows customization of the cursor.",
-              "name": "--mdc-listitem-cursor"
-            },
-            {
-              "description": "Allows customization of the width of the list item.",
-              "name": "--mdc-listitem-width"
-            },
-            {
-              "description": "Allows customization of the height of the list item.",
-              "name": "--mdc-listitem-height"
-            }
-          ],
-          "cssParts": [
-            {
-              "description": "Allows customization of the leading part.",
-              "name": "leading"
-            },
-            {
-              "description": "Allows customization of the leading text part.",
-              "name": "leading-text"
-            },
-            {
-              "description": "Allows customization of the trailing part.",
-              "name": "trailing"
-            },
-            {
-              "description": "Allows customization of the trailing text part.",
-              "name": "trailing-text"
-            }
-          ],
-          "slots": [
-            {
-              "description": "slot for list item controls to appear of leading end.",
-              "name": "leading-controls"
-            },
-            {
-              "description": "slot for list item primary label.",
-              "name": "leading-text-primary-label"
-            },
-            {
-              "description": "slot for list item secondary label.",
-              "name": "leading-text-secondary-label"
-            },
-            {
-              "description": "slot for list item tertiary label.",
-              "name": "leading-text-tertiary-label"
-            },
-            {
-              "description": "slot for list item side header text.",
-              "name": "trailing-text-side-header"
-            },
-            {
-              "description": "slot for list item subline text.",
-              "name": "trailing-text-subline"
-            },
-            {
-              "description": "slot for list item controls to appear of trailing end.",
-              "name": "trailing-controls"
-            },
-            {
-              "description": "content slot can be used to override the content completely. Be aware that this will override the default content of the list item.",
-              "name": "content"
-            }
-          ],
-          "members": [
+              "description": "Allows customization of the default width.",
+              "name": "--mdc-marker-width"
+            }
+          ],
+          "members": [
             {
               "kind": "field",
               "name": "variant",
               "type": {
-                "text": "ListItemVariants"
+                "text": "MarkerVariants"
               },
-              "description": "The variant of the list item. It can be a pill, rectangle or a full-width.",
-              "default": "'full-width'",
+              "privacy": "public",
+              "description": "There are two variants of markers, each with a width of 0.25rem:\n- **solid**: Solid marker.\n- **striped**: Striped marker.",
+              "default": "solid",
               "attribute": "variant",
               "reflects": true
-            },
-            {
-              "kind": "field",
-              "name": "label",
-              "type": {
-                "text": "string | undefined"
-              },
-              "description": "The primary label of the list item.\nThis appears on the leading side of the list item.",
-              "attribute": "label",
-              "reflects": true
-            },
-            {
-              "kind": "field",
-              "name": "secondaryLabel",
-              "type": {
-                "text": "string | undefined"
-              },
-              "description": "The secondary label of the list item.\nThis appears on the leading side of the list item.",
-              "attribute": "secondary-label",
-              "reflects": true
-            },
-            {
-              "kind": "field",
-              "name": "tertiaryLabel",
-              "type": {
-                "text": "string | undefined"
-              },
-              "description": "The tertiary label of the list item.\nThis appears on the leading side of the list item.",
-              "attribute": "tertiary-label",
-              "reflects": true
-            },
+            }
+          ],
+          "attributes": [
             {
-              "kind": "field",
-              "name": "sideHeaderText",
+              "name": "variant",
               "type": {
-                "text": "string | undefined"
+                "text": "MarkerVariants"
               },
-              "description": "The header text of the list item.\nThis appears on the trailing side of the list item.",
-              "attribute": "side-header-text",
-              "reflects": true
-            },
+              "description": "There are two variants of markers, each with a width of 0.25rem:\n- **solid**: Solid marker.\n- **striped**: Striped marker.",
+              "default": "solid",
+              "fieldName": "variant"
+            }
+          ],
+          "superclass": {
+            "name": "Component",
+            "module": "/src/models"
+          },
+          "tagName": "mdc-marker",
+          "jsDoc": "/**\n * `mdc-marker`, which is a vertical line and\n * used to draw attention to specific parts of\n * the content or to signify important information.\n *\n * **Marker Variants**:\n * - **solid**: Solid marker.\n * - **striped**: Striped marker.\n *\n * @tagname mdc-marker\n *\n * @cssproperty --mdc-marker-solid-background-color - Allows customization of the default background color\n * in solid variant.\n * @cssproperty --mdc-marker-striped-color - Allows customization of the default stripes in striped variant.\n * @cssproperty --mdc-marker-striped-background-color - Allows customization of the default background color\n * in striped variant.\n * @cssproperty --mdc-marker-width - Allows customization of the default width.\n */",
+          "customElement": true
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "default",
+          "declaration": {
+            "name": "Marker",
+            "module": "components/marker/marker.component.js"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "components/menubar/menubar.component.js",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "Menubar is a navigational menu component that provides a vertical fixed list of menu items,\nwith support for nested submenus and keyboard navigation. It serves as a container\nfor menu items and manages their interaction patterns, including:\n- Keyboard navigation (Arrow keys, Home, End)\n- Menu item activation (Enter/Space)\n- Submenu toggling (Right/Left arrow keys)\n- Focus management\n- Integration with MenuPopover for nested menus\n\nA menubar will contain a set of menu items and their associated popovers.\nEach menu item can have a popover for nested menus.\n\nThe component automatically handles ARIA attributes and follows WAI-ARIA menu design patterns.\nIt works in conjunction with `mdc-menuitem` and `mdc-menupopover` to create accessible menu structures.\n\n**Note:** A menubar contains three types of menu items, including menuitem, menuitemradio and menuitemcheckbox. These menu items may optionally be nested in one or more group containers. Groups or items may optionally by separated with separator elements.\n\n`mdc-menubar` contains a group that wraps all its chilren passed within the default slot. This has been added to ensure the right accessibility behavior while using screen readers.",
+          "name": "MenuBar",
+          "slots": [
             {
-              "kind": "field",
-              "name": "sublineText",
-              "type": {
-                "text": "string | undefined"
-              },
-              "description": "The subline text of the list item.\nThis appears on the trailing side of the list item.",
-              "attribute": "subline-text",
-              "reflects": true
-            },
+              "description": "Contains the menu items and their associated popovers",
+              "name": "default"
+            }
+          ],
+          "members": [
             {
               "kind": "field",
-              "name": "softDisabled",
+              "name": "menusections",
               "type": {
-                "text": "boolean | undefined"
-              },
-              "description": "Indicates whether the element is soft disabled.\nWhen set to `true`, the element appears visually disabled but still allows\nfocus, click, and keyboard actions to be passed through.\n\n**Important:** When using soft disabled, consumers must ensure that\nthe element behaves like a disabled element, allowing only focus and\npreventing any interactions (clicks or keyboard actions) from triggering unintended actions.",
-              "default": "undefined",
-              "attribute": "soft-disabled",
-              "reflects": true
+                "text": "Array<HTMLElement>"
+              }
             },
             {
               "kind": "field",
-              "name": "dataIndex",
+              "name": "menuItems",
               "type": {
-                "text": "number | undefined"
+                "text": "Array<HTMLElement>"
               },
-              "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
+              "description": "Returns all menuitem elements, including those nested inside menusection.",
+              "readonly": true
             },
             {
-              "kind": "field",
-              "name": "active",
-              "type": {
-                "text": "boolean | undefined"
+              "kind": "method",
+              "name": "getAllPopovers",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "Element[]"
+                }
               },
-              "description": "Indicates whether the list item is active.\nWhen set to true, the list item appears in a active state.\n\nNOTE: this is a visual state only, it does not affect the behavior or a11y of the list item.",
-              "default": "undefined",
-              "attribute": "active",
-              "reflects": true
+              "description": "Returns all menupopovers, including direct and slotted ones ."
             },
             {
               "kind": "method",
@@ -23070,90 +22982,72 @@
                   "name": "event",
                   "type": {
                     "text": "MouseEvent"
-                  },
-                  "description": "The mouse event triggered when the list item is clicked."
+                  }
+                },
+                {
+                  "description": "The target menu item that was clicked.",
+                  "name": "target"
                 }
               ],
-              "description": "Handles the click event on the list item.\nPrevents click when listitem is disabled"
+              "description": "Closes all other submenus on the top level.\nThis method is used to ensure that only one topolevel submenu is open at a time.\nIt finds all other menu items with submenus and closes their submenus."
             },
             {
               "kind": "method",
-              "name": "handleKeyDown",
-              "privacy": "protected",
-              "return": {
-                "type": {
-                  "text": "void"
-                }
-              },
+              "name": "resetTabIndexAndSetActiveTabIndex",
+              "privacy": "private",
               "parameters": [
                 {
-                  "name": "event",
+                  "name": "menuItems",
                   "type": {
-                    "text": "KeyboardEvent"
-                  },
-                  "description": "The keyboard event triggered when a key is pressed down."
+                    "text": "Array<HTMLElement>"
+                  }
+                },
+                {
+                  "description": "The index of the new active element in the list.",
+                  "name": "newIndex"
                 }
               ],
-              "description": "Fires the click event when the enter or space key is pressed down.\nThis behavior is similar to a button click and key interaction."
+              "description": "Resets all list items tabindex to -1 and sets the tabindex of the\nelement at the given index to 0, effectively setting the active\nelement. This is used when navigating the list via keyboard."
             },
             {
               "kind": "method",
-              "name": "triggerClickEvent",
-              "privacy": "protected",
+              "name": "getCurrentIndex",
+              "privacy": "private",
               "return": {
                 "type": {
-                  "text": ""
+                  "text": "number"
                 }
               },
               "parameters": [
                 {
-                  "name": "event",
+                  "name": "target",
                   "type": {
-                    "text": "Event"
-                  },
-                  "description": "The event that triggered the click."
+                    "text": "EventTarget | null"
+                  }
                 }
-              ],
-              "description": "Triggers a click event on the list item."
+              ]
             },
             {
               "kind": "method",
-              "name": "getText",
-              "privacy": "protected",
+              "name": "getSubmenu",
+              "privacy": "private",
               "return": {
                 "type": {
-                  "text": ""
+                  "text": "MenuPopover | undefined"
                 }
               },
               "parameters": [
                 {
-                  "name": "slotName",
-                  "type": {
-                    "text": "string"
-                  },
-                  "description": "The name of the slot to be used."
-                },
-                {
-                  "name": "type",
-                  "type": {
-                    "text": "TextType"
-                  },
-                  "description": "The type of the text element."
-                },
-                {
-                  "name": "content",
-                  "optional": true,
+                  "name": "triggerId",
                   "type": {
-                    "text": "string"
-                  },
-                  "description": "The text content to be displayed within the slot."
+                    "text": "string | null"
+                  }
                 }
-              ],
-              "description": "Generates a template for a text slot with the specified content."
+              ]
             },
             {
               "kind": "method",
-              "name": "disableSlottedChildren",
+              "name": "showSubmenu",
               "privacy": "private",
               "return": {
                 "type": {
@@ -23162,42 +23056,57 @@
               },
               "parameters": [
                 {
-                  "name": "disabled",
-                  "default": "false",
+                  "name": "triggerId",
                   "type": {
-                    "text": "boolean"
-                  },
-                  "description": "Whether to disable or enable the controls."
+                    "text": "string | null"
+                  }
                 }
-              ],
-              "description": "Disable or enable all slotted elements in the leading and trailing slots.\nThis is useful when the list item is disabled, to prevent the user from interacting with the controls."
+              ]
             },
             {
               "kind": "method",
-              "name": "renderTrailingControls",
-              "privacy": "protected",
-              "description": "Renders the trailing controls slot.",
+              "name": "updatePopoverPlacement",
+              "privacy": "private",
               "return": {
                 "type": {
-                  "text": ""
+                  "text": "void"
                 }
               }
             },
             {
               "kind": "method",
-              "name": "renderLeadingControls",
-              "privacy": "protected",
-              "description": "Renders the leading controls slot.",
+              "name": "updateTabIndexAndFocus",
+              "privacy": "private",
               "return": {
                 "type": {
-                  "text": ""
+                  "text": "void"
                 }
-              }
+              },
+              "parameters": [
+                {
+                  "name": "menuItems",
+                  "type": {
+                    "text": "HTMLElement[]"
+                  }
+                },
+                {
+                  "name": "currentIndex",
+                  "type": {
+                    "text": "number"
+                  }
+                },
+                {
+                  "name": "newIndex",
+                  "type": {
+                    "text": "number"
+                  }
+                }
+              ]
             },
             {
               "kind": "method",
-              "name": "stopEventPropagation",
-              "privacy": "protected",
+              "name": "navigateToMenuItem",
+              "privacy": "private",
               "return": {
                 "type": {
                   "text": "void"
@@ -23205,448 +23114,523 @@
               },
               "parameters": [
                 {
-                  "name": "event",
+                  "name": "currentIndex",
                   "type": {
-                    "text": "Event"
-                  },
-                  "description": "The mouse event triggered when a click occurs."
+                    "text": "number"
+                  }
+                },
+                {
+                  "name": "direction",
+                  "type": {
+                    "text": "'prev' | 'next'"
+                  }
+                },
+                {
+                  "name": "shouldOpenSubmenu",
+                  "default": "false"
                 }
-              ],
-              "description": "Stops the click event from propagating to parent elements. In case of keyboard events,\nit stops the propagation for Enter and Space keys.\nThis is useful when the list item contains controls that\nshould not trigger the click event on the list item itself."
+              ]
             },
             {
-              "kind": "field",
-              "name": "disabled",
-              "type": {
-                "text": "boolean | undefined"
+              "kind": "method",
+              "name": "getKeyWithDirectionFix",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "string"
+                }
               },
-              "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"
-              }
+              "parameters": [
+                {
+                  "name": "originalKey",
+                  "type": {
+                    "text": "string"
+                  }
+                }
+              ]
             },
             {
-              "kind": "field",
-              "name": "tabIndex",
-              "type": {
-                "text": "number"
+              "kind": "method",
+              "name": "isTopLevelMenuItem",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "boolean"
+                }
               },
-              "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) This event is dispatched when the listitem is clicked.",
-              "name": "click",
-              "reactName": "onClick"
-            },
-            {
-              "description": "(React: onKeyDown) This event is dispatched when a key is pressed down on the listitem.",
-              "name": "keydown",
-              "reactName": "onKeyDown"
+              "parameters": [
+                {
+                  "name": "element",
+                  "type": {
+                    "text": "HTMLElement"
+                  }
+                }
+              ],
+              "description": "Determines if a menuitem is a top-level menuitem (direct child of menubar or child of menusection whose parent is menubar)"
             },
             {
-              "description": "(React: onKeyUp) This event is dispatched when a key is released on the listitem.",
-              "name": "keyup",
-              "reactName": "onKeyUp"
+              "kind": "method",
+              "name": "isNestedMenuItem",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "boolean"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "element",
+                  "type": {
+                    "text": "HTMLElement"
+                  }
+                }
+              ]
             },
             {
-              "description": "(React: onFocus) This event is dispatched when the listitem receives focus.",
-              "name": "focus",
-              "reactName": "onFocus"
+              "kind": "method",
+              "name": "closeAllMenuPopovers",
+              "privacy": "private"
             },
             {
-              "description": "(React: onEnabled) This event is dispatched after the listitem is enabled",
-              "name": "enabled",
-              "reactName": "onEnabled"
+              "kind": "method",
+              "name": "crossMenubarNavigationOnLeft",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "Promise<void>"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "element",
+                  "type": {
+                    "text": "HTMLElement"
+                  }
+                }
+              ]
             },
             {
-              "description": "(React: onDisabled) This event is dispatched after the listitem is disabled",
-              "name": "disabled",
-              "reactName": "onDisabled"
+              "kind": "method",
+              "name": "crossMenubarNavigationOnRight",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "Promise<void>"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "element",
+                  "type": {
+                    "text": "HTMLElement"
+                  }
+                }
+              ]
             },
             {
-              "description": "(React: onCreated) This event is dispatched after the listitem is created (added to the DOM)",
-              "name": "created",
-              "reactName": "onCreated"
+              "kind": "method",
+              "name": "getParentMenuItemIndex",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "number"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "element",
+                  "type": {
+                    "text": "HTMLElement"
+                  }
+                }
+              ]
             },
             {
-              "description": "(React: onDestroyed) This event is dispatched after the listitem is destroyed (removed from the DOM)",
-              "name": "destroyed",
-              "reactName": "onDestroyed"
-            }
+              "kind": "method",
+              "name": "handleKeyDown",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "Promise<void>"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "event",
+                  "type": {
+                    "text": "KeyboardEvent"
+                  }
+                }
+              ]
+            }
           ],
-          "attributes": [
+          "superclass": {
+            "name": "Component",
+            "module": "/src/models"
+          },
+          "tagName": "mdc-menubar",
+          "jsDoc": "/**\n * Menubar is a navigational menu component that provides a vertical fixed list of menu items,\n * with support for nested submenus and keyboard navigation. It serves as a container\n * for menu items and manages their interaction patterns, including:\n * - Keyboard navigation (Arrow keys, Home, End)\n * - Menu item activation (Enter/Space)\n * - Submenu toggling (Right/Left arrow keys)\n * - Focus management\n * - Integration with MenuPopover for nested menus\n *\n * A menubar will contain a set of menu items and their associated popovers.\n * Each menu item can have a popover for nested menus.\n *\n * The component automatically handles ARIA attributes and follows WAI-ARIA menu design patterns.\n * It works in conjunction with `mdc-menuitem` and `mdc-menupopover` to create accessible menu structures.\n *\n * **Note:** A menubar contains three types of menu items, including menuitem, menuitemradio and menuitemcheckbox. These menu items may optionally be nested in one or more group containers. Groups or items may optionally by separated with separator elements.\n *\n * `mdc-menubar` contains a group that wraps all its chilren passed within the default slot. This has been added to ensure the right accessibility behavior while using screen readers.\n *\n * @tagname mdc-menubar\n * @slot default - Contains the menu items and their associated popovers\n */",
+          "customElement": true
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "default",
+          "declaration": {
+            "name": "MenuBar",
+            "module": "components/menubar/menubar.component.js"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "components/listitem/listitem.component.js",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "mdc-listitem component is used to display a label with different types of controls.\nThere can be three types of controls, a radio button, a checkbox on the\nleading side and a toggle on the trailing side.\nThe list item can contain an avatar on the leading side and a badge on the trailing side.\nAdditionally, the list item can contain a side header and a subline text.\n\nThe leading and trailing slots can be used to display controls and text. <br/>\nBased on the leading/trailing slot, the position of the controls and text can be adjusted. <br/>\nPlease use mdc-list as a parent element even when there is only listitem for a11y purpose.\n\n**Note**: If a listitem contains a long text, it is recommended to create a tooltip for the listitem that displays the full text on hover.\nConsumers need to add a unique ID to this listitem and use that ID in the tooltip's `triggerID` attribute. We are not creating the tooltip automatically, consumers need to add `<mdc-tooltip>` element manually and associate it with the listitem using the `triggerID` attribute.",
+          "name": "ListItem",
+          "cssProperties": [
+            {
+              "description": "Allows customization of the default background color.",
+              "name": "--mdc-listitem-default-background-color"
+            },
+            {
+              "description": "Allows customization of the background color on hover.",
+              "name": "--mdc-listitem-background-color-hover"
+            },
+            {
+              "description": "Allows customization of the background color when pressed.",
+              "name": "--mdc-listitem-background-color-active"
+            },
+            {
+              "description": "Allows customization of the primary label, side header and subline text slot color.",
+              "name": "--mdc-listitem-primary-label-color"
+            },
+            {
+              "description": "Allows customization of the secondary and tertiary label text slot color.",
+              "name": "--mdc-listitem-secondary-label-color"
+            },
+            {
+              "description": "Allows customization of the disabled color.",
+              "name": "--mdc-listitem-disabled-color"
+            },
+            {
+              "description": "Allows customization of column gap.",
+              "name": "--mdc-listitem-column-gap"
+            },
+            {
+              "description": "Allows customization of padding left and right.",
+              "name": "--mdc-listitem-padding-left-right"
+            },
+            {
+              "description": "Allows customization of padding top and bottom.",
+              "name": "--mdc-listitem-padding-top-bottom"
+            },
+            {
+              "description": "Allows customization of the cursor.",
+              "name": "--mdc-listitem-cursor"
+            },
+            {
+              "description": "Allows customization of the width of the list item.",
+              "name": "--mdc-listitem-width"
+            },
+            {
+              "description": "Allows customization of the height of the list item.",
+              "name": "--mdc-listitem-height"
+            }
+          ],
+          "cssParts": [
+            {
+              "description": "Allows customization of the leading part.",
+              "name": "leading"
+            },
+            {
+              "description": "Allows customization of the leading text part.",
+              "name": "leading-text"
+            },
+            {
+              "description": "Allows customization of the trailing part.",
+              "name": "trailing"
+            },
+            {
+              "description": "Allows customization of the trailing text part.",
+              "name": "trailing-text"
+            }
+          ],
+          "slots": [
+            {
+              "description": "slot for list item controls to appear of leading end.",
+              "name": "leading-controls"
+            },
+            {
+              "description": "slot for list item primary label.",
+              "name": "leading-text-primary-label"
+            },
+            {
+              "description": "slot for list item secondary label.",
+              "name": "leading-text-secondary-label"
+            },
+            {
+              "description": "slot for list item tertiary label.",
+              "name": "leading-text-tertiary-label"
+            },
+            {
+              "description": "slot for list item side header text.",
+              "name": "trailing-text-side-header"
+            },
+            {
+              "description": "slot for list item subline text.",
+              "name": "trailing-text-subline"
+            },
+            {
+              "description": "slot for list item controls to appear of trailing end.",
+              "name": "trailing-controls"
+            },
+            {
+              "description": "content slot can be used to override the content completely. Be aware that this will override the default content of the list item.",
+              "name": "content"
+            }
+          ],
+          "members": [
             {
+              "kind": "field",
               "name": "variant",
               "type": {
                 "text": "ListItemVariants"
               },
               "description": "The variant of the list item. It can be a pill, rectangle or a full-width.",
               "default": "'full-width'",
-              "fieldName": "variant"
+              "attribute": "variant",
+              "reflects": true
             },
             {
+              "kind": "field",
               "name": "label",
               "type": {
                 "text": "string | undefined"
               },
               "description": "The primary label of the list item.\nThis appears on the leading side of the list item.",
-              "fieldName": "label"
+              "attribute": "label",
+              "reflects": true
             },
             {
-              "name": "secondary-label",
+              "kind": "field",
+              "name": "secondaryLabel",
               "type": {
                 "text": "string | undefined"
               },
               "description": "The secondary label of the list item.\nThis appears on the leading side of the list item.",
-              "fieldName": "secondaryLabel"
+              "attribute": "secondary-label",
+              "reflects": true
             },
             {
-              "name": "tertiary-label",
+              "kind": "field",
+              "name": "tertiaryLabel",
               "type": {
                 "text": "string | undefined"
               },
               "description": "The tertiary label of the list item.\nThis appears on the leading side of the list item.",
-              "fieldName": "tertiaryLabel"
+              "attribute": "tertiary-label",
+              "reflects": true
             },
             {
-              "name": "side-header-text",
+              "kind": "field",
+              "name": "sideHeaderText",
               "type": {
                 "text": "string | undefined"
               },
               "description": "The header text of the list item.\nThis appears on the trailing side of the list item.",
-              "fieldName": "sideHeaderText"
+              "attribute": "side-header-text",
+              "reflects": true
             },
             {
-              "name": "subline-text",
+              "kind": "field",
+              "name": "sublineText",
               "type": {
                 "text": "string | undefined"
               },
               "description": "The subline text of the list item.\nThis appears on the trailing side of the list item.",
-              "fieldName": "sublineText"
+              "attribute": "subline-text",
+              "reflects": true
             },
             {
-              "name": "soft-disabled",
+              "kind": "field",
+              "name": "softDisabled",
               "type": {
                 "text": "boolean | undefined"
               },
               "description": "Indicates whether the element is soft disabled.\nWhen set to `true`, the element appears visually disabled but still allows\nfocus, click, and keyboard actions to be passed through.\n\n**Important:** When using soft disabled, consumers must ensure that\nthe element behaves like a disabled element, allowing only focus and\npreventing any interactions (clicks or keyboard actions) from triggering unintended actions.",
               "default": "undefined",
-              "fieldName": "softDisabled"
+              "attribute": "soft-disabled",
+              "reflects": true
             },
             {
-              "name": "data-index",
+              "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",
-              "fieldName": "dataIndex"
+              "attribute": "data-index",
+              "reflects": true
             },
             {
+              "kind": "field",
               "name": "active",
               "type": {
                 "text": "boolean | undefined"
               },
               "description": "Indicates whether the list item is active.\nWhen set to true, the list item appears in a active state.\n\nNOTE: this is a visual state only, it does not affect the behavior or a11y of the list item.",
               "default": "undefined",
-              "fieldName": "active"
+              "attribute": "active",
+              "reflects": true
             },
             {
-              "name": "disabled",
-              "type": {
-                "text": "boolean | undefined"
+              "kind": "method",
+              "name": "handleClick",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
               },
-              "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"
-              }
+              "parameters": [
+                {
+                  "name": "event",
+                  "type": {
+                    "text": "MouseEvent"
+                  },
+                  "description": "The mouse event triggered when the list item is clicked."
+                }
+              ],
+              "description": "Handles the click event on the list item.\nPrevents click when listitem is disabled"
             },
             {
-              "name": "tabIndex",
-              "type": {
-                "text": "number"
+              "kind": "method",
+              "name": "handleKeyDown",
+              "privacy": "protected",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
               },
-              "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"
-            },
-            {
-              "name": "LifeCycleMixin",
-              "module": "/src/utils/mixins/lifecycle/LifeCycleMixin"
-            }
-          ],
-          "superclass": {
-            "name": "Component",
-            "module": "/src/models"
-          },
-          "tagName": "mdc-listitem",
-          "jsDoc": "/**\n * mdc-listitem component is used to display a label with different types of controls.\n * There can be three types of controls, a radio button, a checkbox on the\n * leading side and a toggle on the trailing side.\n * The list item can contain an avatar on the leading side and a badge on the trailing side.\n * Additionally, the list item can contain a side header and a subline text.\n *\n * The leading and trailing slots can be used to display controls and text. <br/>\n * Based on the leading/trailing slot, the position of the controls and text can be adjusted. <br/>\n * Please use mdc-list as a parent element even when there is only listitem for a11y purpose.\n *\n * **Note**: If a listitem contains a long text, it is recommended to create a tooltip for the listitem that displays the full text on hover.\n * Consumers need to add a unique ID to this listitem and use that ID in the tooltip's `triggerID` attribute. We are not creating the tooltip automatically, consumers need to add `<mdc-tooltip>` element manually and associate it with the listitem using the `triggerID` attribute.\n *\n * @tagname mdc-listitem\n *\n * @dependency mdc-text\n *\n * @slot leading-controls - slot for list item controls to appear of leading end.\n * @slot leading-text-primary-label - slot for list item primary label.\n * @slot leading-text-secondary-label - slot for list item secondary label.\n * @slot leading-text-tertiary-label - slot for list item tertiary label.\n * @slot trailing-text-side-header - slot for list item side header text.\n * @slot trailing-text-subline - slot for list item subline text.\n * @slot trailing-controls - slot for list item controls to appear of trailing end.\n * @slot content - content slot can be used to override the content completely. Be aware that\n * this will override the default content of the list item.\n *\n * @cssproperty --mdc-listitem-default-background-color - Allows customization of the default background color.\n * @cssproperty --mdc-listitem-background-color-hover - Allows customization of the background color on hover.\n * @cssproperty --mdc-listitem-background-color-active - Allows customization of the background color when pressed.\n * @cssproperty --mdc-listitem-primary-label-color\n *  - Allows customization of the primary label, side header and subline text slot color.\n * @cssproperty --mdc-listitem-secondary-label-color\n *  - Allows customization of the secondary and tertiary label text slot color.\n * @cssproperty --mdc-listitem-disabled-color - Allows customization of the disabled color.\n * @cssproperty --mdc-listitem-column-gap - Allows customization of column gap.\n * @cssproperty --mdc-listitem-padding-left-right - Allows customization of padding left and right.\n * @cssproperty --mdc-listitem-padding-top-bottom - Allows customization of padding top and bottom.\n * @cssproperty --mdc-listitem-cursor - Allows customization of the cursor.\n * @cssproperty --mdc-listitem-width - Allows customization of the width of the list item.\n * @cssproperty --mdc-listitem-height - Allows customization of the height of the list item.\n *\n * @csspart leading - Allows customization of the leading part.\n * @csspart leading-text - Allows customization of the leading text part.\n * @csspart trailing - Allows customization of the trailing part.\n * @csspart trailing-text - Allows customization of the trailing text part.\n *\n * @event click - (React: onClick) This event is dispatched when the listitem is clicked.\n * @event keydown - (React: onKeyDown) This event is dispatched when a key is pressed down on the listitem.\n * @event keyup - (React: onKeyUp) This event is dispatched when a key is released on the listitem.\n * @event focus - (React: onFocus) This event is dispatched when the listitem receives focus.\n * @event enabled - (React: onEnabled) This event is dispatched after the listitem is enabled\n * @event disabled - (React: onDisabled) This event is dispatched after the listitem is disabled\n * @event created - (React: onCreated) This event is dispatched after the listitem is created (added to the DOM)\n * @event destroyed - (React: onDestroyed) This event is dispatched after the listitem is destroyed (removed from the DOM)\n */",
-          "customElement": true
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "default",
-          "declaration": {
-            "name": "ListItem",
-            "module": "components/listitem/listitem.component.js"
-          }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "components/marker/marker.component.js",
-      "declarations": [
-        {
-          "kind": "class",
-          "description": "`mdc-marker`, which is a vertical line and\nused to draw attention to specific parts of\nthe content or to signify important information.\n\n**Marker Variants**:\n- **solid**: Solid marker.\n- **striped**: Striped marker.",
-          "name": "Marker",
-          "cssProperties": [
-            {
-              "description": "Allows customization of the default background color in solid variant.",
-              "name": "--mdc-marker-solid-background-color"
-            },
-            {
-              "description": "Allows customization of the default stripes in striped variant.",
-              "name": "--mdc-marker-striped-color"
-            },
-            {
-              "description": "Allows customization of the default background color in striped variant.",
-              "name": "--mdc-marker-striped-background-color"
-            },
-            {
-              "description": "Allows customization of the default width.",
-              "name": "--mdc-marker-width"
-            }
-          ],
-          "members": [
-            {
-              "kind": "field",
-              "name": "variant",
-              "type": {
-                "text": "MarkerVariants"
-              },
-              "privacy": "public",
-              "description": "There are two variants of markers, each with a width of 0.25rem:\n- **solid**: Solid marker.\n- **striped**: Striped marker.",
-              "default": "solid",
-              "attribute": "variant",
-              "reflects": true
-            }
-          ],
-          "attributes": [
-            {
-              "name": "variant",
-              "type": {
-                "text": "MarkerVariants"
-              },
-              "description": "There are two variants of markers, each with a width of 0.25rem:\n- **solid**: Solid marker.\n- **striped**: Striped marker.",
-              "default": "solid",
-              "fieldName": "variant"
-            }
-          ],
-          "superclass": {
-            "name": "Component",
-            "module": "/src/models"
-          },
-          "tagName": "mdc-marker",
-          "jsDoc": "/**\n * `mdc-marker`, which is a vertical line and\n * used to draw attention to specific parts of\n * the content or to signify important information.\n *\n * **Marker Variants**:\n * - **solid**: Solid marker.\n * - **striped**: Striped marker.\n *\n * @tagname mdc-marker\n *\n * @cssproperty --mdc-marker-solid-background-color - Allows customization of the default background color\n * in solid variant.\n * @cssproperty --mdc-marker-striped-color - Allows customization of the default stripes in striped variant.\n * @cssproperty --mdc-marker-striped-background-color - Allows customization of the default background color\n * in striped variant.\n * @cssproperty --mdc-marker-width - Allows customization of the default width.\n */",
-          "customElement": true
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "default",
-          "declaration": {
-            "name": "Marker",
-            "module": "components/marker/marker.component.js"
-          }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "components/menubar/menubar.component.js",
-      "declarations": [
-        {
-          "kind": "class",
-          "description": "Menubar is a navigational menu component that provides a vertical fixed list of menu items,\nwith support for nested submenus and keyboard navigation. It serves as a container\nfor menu items and manages their interaction patterns, including:\n- Keyboard navigation (Arrow keys, Home, End)\n- Menu item activation (Enter/Space)\n- Submenu toggling (Right/Left arrow keys)\n- Focus management\n- Integration with MenuPopover for nested menus\n\nA menubar will contain a set of menu items and their associated popovers.\nEach menu item can have a popover for nested menus.\n\nThe component automatically handles ARIA attributes and follows WAI-ARIA menu design patterns.\nIt works in conjunction with `mdc-menuitem` and `mdc-menupopover` to create accessible menu structures.\n\n**Note:** A menubar contains three types of menu items, including menuitem, menuitemradio and menuitemcheckbox. These menu items may optionally be nested in one or more group containers. Groups or items may optionally by separated with separator elements.\n\n`mdc-menubar` contains a group that wraps all its chilren passed within the default slot. This has been added to ensure the right accessibility behavior while using screen readers.",
-          "name": "MenuBar",
-          "slots": [
-            {
-              "description": "Contains the menu items and their associated popovers",
-              "name": "default"
-            }
-          ],
-          "members": [
-            {
-              "kind": "field",
-              "name": "menusections",
-              "type": {
-                "text": "Array<HTMLElement>"
-              }
-            },
-            {
-              "kind": "field",
-              "name": "menuItems",
-              "type": {
-                "text": "Array<HTMLElement>"
-              },
-              "description": "Returns all menuitem elements, including those nested inside menusection.",
-              "readonly": true
-            },
-            {
-              "kind": "method",
-              "name": "getAllPopovers",
-              "privacy": "private",
-              "return": {
-                "type": {
-                  "text": "Element[]"
-                }
-              },
-              "description": "Returns all menupopovers, including direct and slotted ones ."
-            },
+              "parameters": [
+                {
+                  "name": "event",
+                  "type": {
+                    "text": "KeyboardEvent"
+                  },
+                  "description": "The keyboard event triggered when a key is pressed down."
+                }
+              ],
+              "description": "Fires the click event when the enter or space key is pressed down.\nThis behavior is similar to a button click and key interaction."
+            },
             {
               "kind": "method",
-              "name": "handleClick",
-              "privacy": "private",
+              "name": "triggerClickEvent",
+              "privacy": "protected",
               "return": {
                 "type": {
-                  "text": "void"
+                  "text": ""
                 }
               },
               "parameters": [
                 {
                   "name": "event",
                   "type": {
-                    "text": "MouseEvent"
-                  }
-                },
-                {
-                  "description": "The target menu item that was clicked.",
-                  "name": "target"
-                }
-              ],
-              "description": "Closes all other submenus on the top level.\nThis method is used to ensure that only one topolevel submenu is open at a time.\nIt finds all other menu items with submenus and closes their submenus."
-            },
-            {
-              "kind": "method",
-              "name": "resetTabIndexAndSetActiveTabIndex",
-              "privacy": "private",
-              "parameters": [
-                {
-                  "name": "menuItems",
-                  "type": {
-                    "text": "Array<HTMLElement>"
-                  }
-                },
-                {
-                  "description": "The index of the new active element in the list.",
-                  "name": "newIndex"
+                    "text": "Event"
+                  },
+                  "description": "The event that triggered the click."
                 }
               ],
-              "description": "Resets all list items tabindex to -1 and sets the tabindex of the\nelement at the given index to 0, effectively setting the active\nelement. This is used when navigating the list via keyboard."
+              "description": "Triggers a click event on the list item."
             },
             {
               "kind": "method",
-              "name": "getCurrentIndex",
-              "privacy": "private",
+              "name": "getText",
+              "privacy": "protected",
               "return": {
                 "type": {
-                  "text": "number"
+                  "text": ""
                 }
               },
               "parameters": [
                 {
-                  "name": "target",
+                  "name": "slotName",
                   "type": {
-                    "text": "EventTarget | null"
-                  }
+                    "text": "string"
+                  },
+                  "description": "The name of the slot to be used."
+                },
+                {
+                  "name": "type",
+                  "type": {
+                    "text": "TextType"
+                  },
+                  "description": "The type of the text element."
+                },
+                {
+                  "name": "content",
+                  "optional": true,
+                  "type": {
+                    "text": "string"
+                  },
+                  "description": "The text content to be displayed within the slot."
                 }
-              ]
+              ],
+              "description": "Generates a template for a text slot with the specified content."
             },
             {
               "kind": "method",
-              "name": "getSubmenu",
+              "name": "disableSlottedChildren",
               "privacy": "private",
               "return": {
                 "type": {
-                  "text": "MenuPopover | undefined"
+                  "text": "void"
                 }
               },
               "parameters": [
                 {
-                  "name": "triggerId",
+                  "name": "disabled",
+                  "default": "false",
                   "type": {
-                    "text": "string | null"
-                  }
+                    "text": "boolean"
+                  },
+                  "description": "Whether to disable or enable the controls."
                 }
-              ]
+              ],
+              "description": "Disable or enable all slotted elements in the leading and trailing slots.\nThis is useful when the list item is disabled, to prevent the user from interacting with the controls."
             },
             {
               "kind": "method",
-              "name": "showSubmenu",
-              "privacy": "private",
+              "name": "renderTrailingControls",
+              "privacy": "protected",
+              "description": "Renders the trailing controls slot.",
               "return": {
                 "type": {
-                  "text": "void"
-                }
-              },
-              "parameters": [
-                {
-                  "name": "triggerId",
-                  "type": {
-                    "text": "string | null"
-                  }
+                  "text": ""
                 }
-              ]
+              }
             },
             {
               "kind": "method",
-              "name": "updatePopoverPlacement",
-              "privacy": "private",
+              "name": "renderLeadingControls",
+              "privacy": "protected",
+              "description": "Renders the leading controls slot.",
               "return": {
                 "type": {
-                  "text": "void"
+                  "text": ""
                 }
               }
             },
             {
               "kind": "method",
-              "name": "updateTabIndexAndFocus",
-              "privacy": "private",
+              "name": "stopEventPropagation",
+              "privacy": "protected",
               "return": {
                 "type": {
                   "text": "void"
@@ -23654,192 +23638,212 @@
               },
               "parameters": [
                 {
-                  "name": "menuItems",
+                  "name": "event",
                   "type": {
-                    "text": "HTMLElement[]"
-                  }
-                },
-                {
-                  "name": "currentIndex",
-                  "type": {
-                    "text": "number"
-                  }
-                },
-                {
-                  "name": "newIndex",
-                  "type": {
-                    "text": "number"
-                  }
+                    "text": "Event"
+                  },
+                  "description": "The mouse event triggered when a click occurs."
                 }
-              ]
+              ],
+              "description": "Stops the click event from propagating to parent elements. In case of keyboard events,\nit stops the propagation for Enter and Space keys.\nThis is useful when the list item contains controls that\nshould not trigger the click event on the list item itself."
             },
             {
-              "kind": "method",
-              "name": "navigateToMenuItem",
-              "privacy": "private",
-              "return": {
-                "type": {
-                  "text": "void"
-                }
+              "kind": "field",
+              "name": "disabled",
+              "type": {
+                "text": "boolean | undefined"
               },
-              "parameters": [
-                {
-                  "name": "currentIndex",
-                  "type": {
-                    "text": "number"
-                  }
-                },
-                {
-                  "name": "direction",
-                  "type": {
-                    "text": "'prev' | 'next'"
-                  }
-                },
-                {
-                  "name": "shouldOpenSubmenu",
-                  "default": "false"
-                }
-              ]
+              "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": "method",
-              "name": "getKeyWithDirectionFix",
-              "privacy": "private",
-              "return": {
-                "type": {
-                  "text": "string"
-                }
+              "kind": "field",
+              "name": "tabIndex",
+              "type": {
+                "text": "number"
               },
-              "parameters": [
-                {
-                  "name": "originalKey",
-                  "type": {
-                    "text": "string"
-                  }
-                }
-              ]
+              "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) This event is dispatched when the listitem is clicked.",
+              "name": "click",
+              "reactName": "onClick"
             },
             {
-              "kind": "method",
-              "name": "isTopLevelMenuItem",
-              "privacy": "private",
-              "return": {
-                "type": {
-                  "text": "boolean"
-                }
+              "description": "(React: onKeyDown) This event is dispatched when a key is pressed down on the listitem.",
+              "name": "keydown",
+              "reactName": "onKeyDown"
+            },
+            {
+              "description": "(React: onKeyUp) This event is dispatched when a key is released on the listitem.",
+              "name": "keyup",
+              "reactName": "onKeyUp"
+            },
+            {
+              "description": "(React: onFocus) This event is dispatched when the listitem receives focus.",
+              "name": "focus",
+              "reactName": "onFocus"
+            },
+            {
+              "description": "(React: onEnabled) This event is dispatched after the listitem is enabled",
+              "name": "enabled",
+              "reactName": "onEnabled"
+            },
+            {
+              "description": "(React: onDisabled) This event is dispatched after the listitem is disabled",
+              "name": "disabled",
+              "reactName": "onDisabled"
+            },
+            {
+              "description": "(React: onCreated) This event is dispatched after the listitem is created (added to the DOM)",
+              "name": "created",
+              "reactName": "onCreated"
+            },
+            {
+              "description": "(React: onDestroyed) This event is dispatched after the listitem is destroyed (removed from the DOM)",
+              "name": "destroyed",
+              "reactName": "onDestroyed"
+            }
+          ],
+          "attributes": [
+            {
+              "name": "variant",
+              "type": {
+                "text": "ListItemVariants"
               },
-              "parameters": [
-                {
-                  "name": "element",
-                  "type": {
-                    "text": "HTMLElement"
-                  }
-                }
-              ],
-              "description": "Determines if a menuitem is a top-level menuitem (direct child of menubar or child of menusection whose parent is menubar)"
+              "description": "The variant of the list item. It can be a pill, rectangle or a full-width.",
+              "default": "'full-width'",
+              "fieldName": "variant"
             },
             {
-              "kind": "method",
-              "name": "isNestedMenuItem",
-              "privacy": "private",
-              "return": {
-                "type": {
-                  "text": "boolean"
-                }
+              "name": "label",
+              "type": {
+                "text": "string | undefined"
               },
-              "parameters": [
-                {
-                  "name": "element",
-                  "type": {
-                    "text": "HTMLElement"
-                  }
-                }
-              ]
+              "description": "The primary label of the list item.\nThis appears on the leading side of the list item.",
+              "fieldName": "label"
             },
             {
-              "kind": "method",
-              "name": "closeAllMenuPopovers",
-              "privacy": "private"
+              "name": "secondary-label",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "The secondary label of the list item.\nThis appears on the leading side of the list item.",
+              "fieldName": "secondaryLabel"
             },
             {
-              "kind": "method",
-              "name": "crossMenubarNavigationOnLeft",
-              "privacy": "private",
-              "return": {
-                "type": {
-                  "text": "Promise<void>"
-                }
+              "name": "tertiary-label",
+              "type": {
+                "text": "string | undefined"
               },
-              "parameters": [
-                {
-                  "name": "element",
-                  "type": {
-                    "text": "HTMLElement"
-                  }
-                }
-              ]
+              "description": "The tertiary label of the list item.\nThis appears on the leading side of the list item.",
+              "fieldName": "tertiaryLabel"
             },
             {
-              "kind": "method",
-              "name": "crossMenubarNavigationOnRight",
-              "privacy": "private",
-              "return": {
-                "type": {
-                  "text": "Promise<void>"
-                }
+              "name": "side-header-text",
+              "type": {
+                "text": "string | undefined"
               },
-              "parameters": [
-                {
-                  "name": "element",
-                  "type": {
-                    "text": "HTMLElement"
-                  }
-                }
-              ]
+              "description": "The header text of the list item.\nThis appears on the trailing side of the list item.",
+              "fieldName": "sideHeaderText"
             },
             {
-              "kind": "method",
-              "name": "getParentMenuItemIndex",
-              "privacy": "private",
-              "return": {
-                "type": {
-                  "text": "number"
-                }
+              "name": "subline-text",
+              "type": {
+                "text": "string | undefined"
               },
-              "parameters": [
-                {
-                  "name": "element",
-                  "type": {
-                    "text": "HTMLElement"
-                  }
-                }
-              ]
+              "description": "The subline text of the list item.\nThis appears on the trailing side of the list item.",
+              "fieldName": "sublineText"
             },
             {
-              "kind": "method",
-              "name": "handleKeyDown",
-              "privacy": "private",
-              "return": {
-                "type": {
-                  "text": "Promise<void>"
-                }
+              "name": "soft-disabled",
+              "type": {
+                "text": "boolean | undefined"
               },
-              "parameters": [
-                {
-                  "name": "event",
-                  "type": {
-                    "text": "KeyboardEvent"
-                  }
-                }
-              ]
+              "description": "Indicates whether the element is soft disabled.\nWhen set to `true`, the element appears visually disabled but still allows\nfocus, click, and keyboard actions to be passed through.\n\n**Important:** When using soft disabled, consumers must ensure that\nthe element behaves like a disabled element, allowing only focus and\npreventing any interactions (clicks or keyboard actions) from triggering unintended actions.",
+              "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": "active",
+              "type": {
+                "text": "boolean | undefined"
+              },
+              "description": "Indicates whether the list item is active.\nWhen set to true, the list item appears in a active state.\n\nNOTE: this is a visual state only, it does not affect the behavior or a11y of the list item.",
+              "default": "undefined",
+              "fieldName": "active"
+            },
+            {
+              "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"
+            },
+            {
+              "name": "LifeCycleMixin",
+              "module": "/src/utils/mixins/lifecycle/LifeCycleMixin"
             }
           ],
           "superclass": {
             "name": "Component",
             "module": "/src/models"
           },
-          "tagName": "mdc-menubar",
-          "jsDoc": "/**\n * Menubar is a navigational menu component that provides a vertical fixed list of menu items,\n * with support for nested submenus and keyboard navigation. It serves as a container\n * for menu items and manages their interaction patterns, including:\n * - Keyboard navigation (Arrow keys, Home, End)\n * - Menu item activation (Enter/Space)\n * - Submenu toggling (Right/Left arrow keys)\n * - Focus management\n * - Integration with MenuPopover for nested menus\n *\n * A menubar will contain a set of menu items and their associated popovers.\n * Each menu item can have a popover for nested menus.\n *\n * The component automatically handles ARIA attributes and follows WAI-ARIA menu design patterns.\n * It works in conjunction with `mdc-menuitem` and `mdc-menupopover` to create accessible menu structures.\n *\n * **Note:** A menubar contains three types of menu items, including menuitem, menuitemradio and menuitemcheckbox. These menu items may optionally be nested in one or more group containers. Groups or items may optionally by separated with separator elements.\n *\n * `mdc-menubar` contains a group that wraps all its chilren passed within the default slot. This has been added to ensure the right accessibility behavior while using screen readers.\n *\n * @tagname mdc-menubar\n * @slot default - Contains the menu items and their associated popovers\n */",
+          "tagName": "mdc-listitem",
+          "jsDoc": "/**\n * mdc-listitem component is used to display a label with different types of controls.\n * There can be three types of controls, a radio button, a checkbox on the\n * leading side and a toggle on the trailing side.\n * The list item can contain an avatar on the leading side and a badge on the trailing side.\n * Additionally, the list item can contain a side header and a subline text.\n *\n * The leading and trailing slots can be used to display controls and text. <br/>\n * Based on the leading/trailing slot, the position of the controls and text can be adjusted. <br/>\n * Please use mdc-list as a parent element even when there is only listitem for a11y purpose.\n *\n * **Note**: If a listitem contains a long text, it is recommended to create a tooltip for the listitem that displays the full text on hover.\n * Consumers need to add a unique ID to this listitem and use that ID in the tooltip's `triggerID` attribute. We are not creating the tooltip automatically, consumers need to add `<mdc-tooltip>` element manually and associate it with the listitem using the `triggerID` attribute.\n *\n * @tagname mdc-listitem\n *\n * @dependency mdc-text\n *\n * @slot leading-controls - slot for list item controls to appear of leading end.\n * @slot leading-text-primary-label - slot for list item primary label.\n * @slot leading-text-secondary-label - slot for list item secondary label.\n * @slot leading-text-tertiary-label - slot for list item tertiary label.\n * @slot trailing-text-side-header - slot for list item side header text.\n * @slot trailing-text-subline - slot for list item subline text.\n * @slot trailing-controls - slot for list item controls to appear of trailing end.\n * @slot content - content slot can be used to override the content completely. Be aware that\n * this will override the default content of the list item.\n *\n * @cssproperty --mdc-listitem-default-background-color - Allows customization of the default background color.\n * @cssproperty --mdc-listitem-background-color-hover - Allows customization of the background color on hover.\n * @cssproperty --mdc-listitem-background-color-active - Allows customization of the background color when pressed.\n * @cssproperty --mdc-listitem-primary-label-color\n *  - Allows customization of the primary label, side header and subline text slot color.\n * @cssproperty --mdc-listitem-secondary-label-color\n *  - Allows customization of the secondary and tertiary label text slot color.\n * @cssproperty --mdc-listitem-disabled-color - Allows customization of the disabled color.\n * @cssproperty --mdc-listitem-column-gap - Allows customization of column gap.\n * @cssproperty --mdc-listitem-padding-left-right - Allows customization of padding left and right.\n * @cssproperty --mdc-listitem-padding-top-bottom - Allows customization of padding top and bottom.\n * @cssproperty --mdc-listitem-cursor - Allows customization of the cursor.\n * @cssproperty --mdc-listitem-width - Allows customization of the width of the list item.\n * @cssproperty --mdc-listitem-height - Allows customization of the height of the list item.\n *\n * @csspart leading - Allows customization of the leading part.\n * @csspart leading-text - Allows customization of the leading text part.\n * @csspart trailing - Allows customization of the trailing part.\n * @csspart trailing-text - Allows customization of the trailing text part.\n *\n * @event click - (React: onClick) This event is dispatched when the listitem is clicked.\n * @event keydown - (React: onKeyDown) This event is dispatched when a key is pressed down on the listitem.\n * @event keyup - (React: onKeyUp) This event is dispatched when a key is released on the listitem.\n * @event focus - (React: onFocus) This event is dispatched when the listitem receives focus.\n * @event enabled - (React: onEnabled) This event is dispatched after the listitem is enabled\n * @event disabled - (React: onDisabled) This event is dispatched after the listitem is disabled\n * @event created - (React: onCreated) This event is dispatched after the listitem is created (added to the DOM)\n * @event destroyed - (React: onDestroyed) This event is dispatched after the listitem is destroyed (removed from the DOM)\n */",
           "customElement": true
         }
       ],
@@ -23848,8 +23852,8 @@
           "kind": "js",
           "name": "default",
           "declaration": {
-            "name": "MenuBar",
-            "module": "components/menubar/menubar.component.js"
+            "name": "ListItem",
+            "module": "components/listitem/listitem.component.js"
           }
         }
       ]