npm - @momentum-design/components - Versions diffs - 0.120.10 → 0.120.11 - Mend

@momentum-design/components 0.120.10 → 0.120.11

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (4) hide show

package/dist/custom-elements.json +1692 -1692
package/dist/react/index.d.ts +3 -3
package/dist/react/index.js +3 -3
package/package.json +1 -1

package/dist/custom-elements.json CHANGED Viewed

@@ -477,6 +477,157 @@
         }
       ]
     },
+    {
+      "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",
@@ -819,241 +970,90 @@
     },
     {
       "kind": "javascript-module",
-      "path": "components/accordiongroup/accordiongroup.component.js",
+      "path": "components/alertchip/alertchip.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",
+          "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 border color of the entire accordiongroup",
-              "name": "--mdc-accordiongroup-border-color"
+              "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"
             }
           ],
-          "slots": [
+          "cssParts": [
             {
-              "description": "The default slot can contain the `accordion` or `accordionbutton` components.",
-              "name": "default"
+              "description": "The alert icon",
+              "name": "icon"
+            },
+            {
+              "description": "The text label of the alertchip",
+              "name": "label"
             }
           ],
           "members": [
             {
               "kind": "field",
-              "name": "size",
+              "name": "variant",
               "type": {
-                "text": "Size"
+                "text": "VariantType"
               },
-              "description": "The size of the accordion item.",
-              "default": "'small'",
-              "attribute": "size",
-              "reflects": true
+              "description": "The variant of the alertchip. It supports 5 variants\n- neutral\n- warning\n- error\n- success\n- informational",
+              "default": "neutral",
+              "attribute": "variant"
             },
             {
               "kind": "field",
-              "name": "variant",
+              "name": "label",
               "type": {
-                "text": "Variant"
+                "text": "string"
               },
-              "description": "The variant of the accordion item. Based on the variant, the styling of the accordion gets changed.",
-              "default": "'stacked'",
-              "attribute": "variant",
-              "reflects": true
+              "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": "allowMultiple",
+              "name": "autoFocusOnMount",
               "type": {
                 "text": "boolean"
               },
               "default": "false",
-              "description": "If true, multiple accordion items can be visible at the same time.",
-              "attribute": "allow-multiple",
-              "reflects": true
+              "description": "This property indicates whether the element should receive focus automatically when it is mounted.\n\nIt will not focus if the element is re-attached to the DOM after being removed.",
+              "attribute": "auto-focus-on-mount",
+              "reflects": true,
+              "inheritedFrom": {
+                "name": "AutoFocusOnMountMixin",
+                "module": "utils/mixins/AutoFocusOnMountMixin.js"
+              }
             },
             {
-              "kind": "method",
-              "name": "handleAccordionExpanded",
-              "privacy": "private",
-              "return": {
-                "type": {
-                  "text": "void"
-                }
+              "kind": "field",
+              "name": "tabIndex",
+              "type": {
+                "text": "number"
               },
-              "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"
-            }
-          ],
-          "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"
-            },
-            {
-              "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": "autoFocusOnMount",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "This property indicates whether the element should receive focus automatically when it is mounted.\n\nIt will not focus if the element is re-attached to the DOM after being removed.",
-              "attribute": "auto-focus-on-mount",
-              "reflects": true,
-              "inheritedFrom": {
-                "name": "AutoFocusOnMountMixin",
-                "module": "utils/mixins/AutoFocusOnMountMixin.js"
-              }
-            },
-            {
-              "kind": "field",
-              "name": "tabIndex",
-              "type": {
-                "text": "number"
-              },
-              "default": "0",
-              "description": "This property specifies the tab order of the element.",
-              "attribute": "tabIndex",
-              "reflects": true,
-              "inheritedFrom": {
-                "name": "TabIndexMixin",
-                "module": "utils/mixins/TabIndexMixin.js"
-              }
+              "default": "0",
+              "description": "This property specifies the tab order of the element.",
+              "attribute": "tabIndex",
+              "reflects": true,
+              "inheritedFrom": {
+                "name": "TabIndexMixin",
+                "module": "utils/mixins/TabIndexMixin.js"
+              }
             },
             {
               "kind": "field",
@@ -1768,545 +1768,218 @@
     },
     {
       "kind": "javascript-module",
-      "path": "components/appheader/appheader.component.js",
+      "path": "components/announcementdialog/announcementdialog.component.js",
       "declarations": [
         {
           "kind": "class",
-          "description": "The `mdc-appheader` component provides a structured and accessible app header layout.\nIt consists of three primary sections: leading, center, and trailing.\n\n- The **leading section** typically holds a **brand logo**, **brand name** or **menu icon**.\n- The **center section** can contain a **search bar**, **icons** or action controls.\n- The **trailing section** generally includes a **profile avatar**, **additional icons** or **action controls**.",
-          "name": "Appheader",
-          "cssParts": [
+          "description": "AnnouncementDialog component is a modal dialog that can be used to display announcements, extending the existing Dialog component.\nIt can be used to create custom dialogs where a illustration, content and footer actions are provided by the consumer.\nThe dialog is available in 4 sizes:  medium, large, xlarge and fullscreen. It may also receive custom styling/sizing.\nThe dialog interrupts the user and will block interaction with the rest of the application until it is closed.\n\nThe dialog can be controlled solely through the `visible` property, no trigger element is required.\nIf a `triggerId` is provided, the dialog will manage focus with that element, otherwise it will\nremember the previously focused element before the dialog was opened.\n\nThe dialog is a controlled component, meaning it does not have its own state management for visibility.\nUse the `visible` property to control the visibility of the dialog.\nUse the `onClose` event to handle the close action of the dialog (fired when Close button is clicked\nor Escape is pressed).\n\n**Accessibility notes for consuming (have to be explicitly set when you consume the component)**\n\n- The dialog should have an aria-label or aria-labelledby attribute to provide a label for screen readers.\n- Use aria-labelledby to reference the ID of the element that labels the dialog when there is no visible title.\n\n**Note: Programmatic show/hide requires the ? prefix on the visible attribute**\n- Use `?visible=true/false` as an attribute instead of `visible=true/false`\n- Reference docs for more info: https://lit.dev/docs/templates/expressions/#boolean-attribute-expressions",
+          "name": "AnnouncementDialog",
+          "cssProperties": [
             {
-              "description": "The main container for styling the header.",
-              "name": "container"
+              "description": "background color of the illustration section",
+              "name": "--mdc-announcementdialog-illustration-background-color"
             },
             {
-              "description": "The leading section of the header.",
-              "name": "leading-section"
+              "description": "primary background color of the dialog",
+              "name": "--mdc-dialog-primary-background-color",
+              "inheritedFrom": {
+                "name": "Dialog",
+                "module": "src/components/dialog/dialog.component.ts"
+              }
             },
             {
-              "description": "The center section of the header.",
-              "name": "center-section"
+              "description": "border color of the dialog",
+              "name": "--mdc-dialog-border-color",
+              "inheritedFrom": {
+                "name": "Dialog",
+                "module": "src/components/dialog/dialog.component.ts"
+              }
             },
             {
-              "description": "The trailing section of the header.",
-              "name": "trailing-section"
-            }
-          ],
-          "slots": [
-            {
-              "description": "Slot for the leading section (e.g., brand logo, brand name).",
-              "name": "leading"
+              "description": "text color of the header/title of the dialog",
+              "name": "--mdc-dialog-header-text-color",
+              "inheritedFrom": {
+                "name": "Dialog",
+                "module": "src/components/dialog/dialog.component.ts"
+              }
             },
             {
-              "description": "Slot for the center section (e.g., search bar, icons).",
-              "name": "center"
+              "description": "text color of the below header description of the dialog",
+              "name": "--mdc-dialog-description-text-color",
+              "inheritedFrom": {
+                "name": "Dialog",
+                "module": "src/components/dialog/dialog.component.ts"
+              }
             },
             {
-              "description": "Slot for the trailing section (e.g., profile avatar, icons).",
-              "name": "trailing"
-            }
-          ],
-          "members": [],
-          "superclass": {
-            "name": "Component",
-            "module": "/src/models"
-          },
-          "tagName": "mdc-appheader",
-          "jsDoc": "/**\n * The `mdc-appheader` component provides a structured and accessible app header layout.\n * It consists of three primary sections: leading, center, and trailing.\n *\n * - The **leading section** typically holds a **brand logo**, **brand name** or **menu icon**.\n * - The **center section** can contain a **search bar**, **icons** or action controls.\n * - The **trailing section** generally includes a **profile avatar**, **additional icons** or **action controls**.\n *\n * @tagname mdc-appheader\n *\n * @slot leading - Slot for the leading section (e.g., brand logo, brand name).\n * @slot center - Slot for the center section (e.g., search bar, icons).\n * @slot trailing - Slot for the trailing section (e.g., profile avatar, icons).\n *\n * @csspart container - The main container for styling the header.\n * @csspart leading-section - The leading section of the header.\n * @csspart center-section - The center section of the header.\n * @csspart trailing-section - The trailing section of the header.\n */",
-          "customElement": true
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "default",
-          "declaration": {
-            "name": "Appheader",
-            "module": "components/appheader/appheader.component.js"
-          }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "components/avatar/avatar.component.js",
-      "declarations": [
-        {
-          "kind": "class",
-          "description": "The `mdc-avatar` component is used to represent a person or a space.\nAn avatar can be an icon, initials, counter and photo.\n\nTo set the photo of an avatar,\nyou need to set \"src\" attribute.\n\nWhile the avatar image is loading, as a placeholder,\nwe will show the initials text.\nIf the initials are not specified then,\nwe will show `user-regular` icon as a placeholder.\n\nBy default, if there are no attributes specified,\nthen the default avatar will be an icon with `user-regular` name.\n\nThe avatar component is non clickable and non interactive/focusable component.\nIf the avatar is typing, then the loading indicator will be displayed.\nIf the counter type avatar is set to a negative number, then we will display 0.\nThe presence indicator will be hidden when the counter property is set.",
-          "name": "Avatar",
-          "cssProperties": [
-            {
-              "description": "Allows customization of the default background color.",
-              "name": "--mdc-avatar-default-background-color"
+              "description": "elevation of the dialog",
+              "name": "--mdc-dialog-elevation-3",
+              "inheritedFrom": {
+                "name": "Dialog",
+                "module": "src/components/dialog/dialog.component.ts"
+              }
             },
             {
-              "description": "Allows customization of the default foreground color.",
-              "name": "--mdc-avatar-default-foreground-color"
+              "description": "width of the dialog",
+              "name": "--mdc-dialog-width",
+              "inheritedFrom": {
+                "name": "Dialog",
+                "module": "src/components/dialog/dialog.component.ts"
+              }
             },
             {
-              "description": "Allows customization of the loading indicator background color.",
-              "name": "--mdc-avatar-loading-indicator-background-color"
-            },
-            {
-              "description": "Allows customization of the loading indicator foreground color.",
-              "name": "--mdc-avatar-loading-indicator-foreground-color"
-            },
-            {
-              "description": "Allows customization of the loading overlay background color.",
-              "name": "--mdc-avatar-loading-overlay-background-color"
+              "description": "height of the dialog",
+              "name": "--mdc-dialog-height",
+              "inheritedFrom": {
+                "name": "Dialog",
+                "module": "src/components/dialog/dialog.component.ts"
+              }
             }
           ],
           "cssParts": [
             {
-              "description": "The main content of the avatar.",
-              "name": "content"
-            },
-            {
-              "description": "The photo of the avatar.",
-              "name": "photo"
+              "description": "The main body container that holds the illustration and content sections",
+              "name": "body",
+              "inheritedFrom": {
+                "name": "Dialog",
+                "module": "src/components/dialog/dialog.component.ts"
+              }
             },
             {
-              "description": "The presence indicator of the avatar.",
-              "name": "presence"
+              "description": "The container for the illustration section",
+              "name": "illustration-container"
             },
             {
-              "description": "The wrapper for the loading indicator.",
-              "name": "loading-wrapper"
+              "description": "The container for the content section",
+              "name": "content-container"
             },
             {
-              "description": "The loading indicator of the avatar.",
-              "name": "loader"
-            }
-          ],
-          "members": [
-            {
-              "kind": "field",
-              "name": "src",
-              "type": {
-                "text": "string | undefined"
-              },
-              "description": "The src is the url which will be used to display the avatar.\nWhen the src is loading, we will display the initials as a placeholder.",
-              "attribute": "src",
+              "description": "The header text",
+              "name": "header-text",
               "inheritedFrom": {
-                "name": "AvatarComponentMixin",
-                "module": "utils/mixins/AvatarComponentMixin.js"
+                "name": "Dialog",
+                "module": "src/components/dialog/dialog.component.ts"
               }
             },
             {
-              "kind": "field",
-              "name": "initials",
-              "type": {
-                "text": "string | undefined"
-              },
-              "description": "The initials to be displayed for the avatar.",
-              "attribute": "initials",
+              "description": "The description text of the dialog.",
+              "name": "description-text",
               "inheritedFrom": {
-                "name": "AvatarComponentMixin",
-                "module": "utils/mixins/AvatarComponentMixin.js"
+                "name": "Dialog",
+                "module": "src/components/dialog/dialog.component.ts"
               }
             },
             {
-              "kind": "field",
-              "name": "presence",
-              "type": {
-                "text": "PresenceType | undefined"
-              },
-              "description": "The presence is the status which can be used to display the\nactivity state of a user or a space within an avatar component.\n\nAcceptable values include:\n- `active`\n- `away`\n- `away-calling`\n- `busy`\n- `dnd`\n- `meeting`\n- `on-call`\n- `on-device`\n- `on-mobile`\n- `pause`\n- `pto`\n- `presenting`\n- `quiet`\n- `scheduled`",
-              "attribute": "presence",
+              "description": "The close button of the dialog.",
+              "name": "dialog-close-btn",
               "inheritedFrom": {
-                "name": "AvatarComponentMixin",
-                "module": "utils/mixins/AvatarComponentMixin.js"
+                "name": "Dialog",
+                "module": "src/components/dialog/dialog.component.ts"
               }
             },
             {
-              "kind": "field",
-              "name": "size",
-              "type": {
-                "text": "AvatarSize"
-              },
-              "description": "Acceptable values include (size in px unit):\n- 24\n- 32\n- 48\n- 64\n- 72\n- 88\n- 124",
-              "default": "32",
-              "attribute": "size",
-              "reflects": true,
+              "description": "The header of the dialog.",
+              "name": "header",
               "inheritedFrom": {
-                "name": "AvatarComponentMixin",
-                "module": "utils/mixins/AvatarComponentMixin.js"
+                "name": "Dialog",
+                "module": "src/components/dialog/dialog.component.ts"
               }
             },
             {
-              "kind": "field",
-              "name": "counter",
-              "type": {
-                "text": "number | undefined"
-              },
-              "description": "The counter is the number which can be displayed on the avatar.\nThe maximum number is 99 and if the given number is greater than 99,\nthen the avatar will be displayed as `99+`.\nIf the given number is a negative number,\nthen the avatar will be displayed as `0`.",
-              "attribute": "counter",
+              "description": "The header section of the dialog.",
+              "name": "header-section",
               "inheritedFrom": {
-                "name": "AvatarComponentMixin",
-                "module": "utils/mixins/AvatarComponentMixin.js"
+                "name": "Dialog",
+                "module": "src/components/dialog/dialog.component.ts"
               }
-            },
+            }
+          ],
+          "slots": [
             {
-              "kind": "field",
-              "name": "isTyping",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "Represents the typing indicator when the user is typing.",
-              "attribute": "is-typing",
+              "description": "Slot for the dialog header content. This can be used to pass custom header content.",
+              "name": "header-prefix",
               "inheritedFrom": {
-                "name": "AvatarComponentMixin",
-                "module": "utils/mixins/AvatarComponentMixin.js"
+                "name": "Dialog",
+                "module": "src/components/dialog/dialog.component.ts"
               }
             },
             {
-              "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",
+              "description": "Slot for the dialog body content",
+              "name": "dialog-body",
               "inheritedFrom": {
-                "name": "IconNameMixin",
-                "module": "utils/mixins/IconNameMixin.js"
+                "name": "Dialog",
+                "module": "src/components/dialog/dialog.component.ts"
               }
-            }
-          ],
-          "mixins": [
+            },
             {
-              "name": "AvatarComponentMixin",
-              "module": "/src/utils/mixins/AvatarComponentMixin"
+              "description": "Slot for the illustration container section",
+              "name": "illustration-container"
             },
             {
-              "name": "IconNameMixin",
-              "module": "/src/utils/mixins/IconNameMixin"
-            }
-          ],
-          "superclass": {
-            "name": "Component",
-            "module": "/src/models"
-          },
-          "tagName": "mdc-avatar",
-          "jsDoc": "/**\n * The `mdc-avatar` component is used to represent a person or a space.\n * An avatar can be an icon, initials, counter and photo.\n *\n * To set the photo of an avatar,\n * you need to set \"src\" attribute.\n *\n * While the avatar image is loading, as a placeholder,\n * we will show the initials text.\n * If the initials are not specified then,\n * we will show `user-regular` icon as a placeholder.\n *\n * By default, if there are no attributes specified,\n * then the default avatar will be an icon with `user-regular` name.\n *\n * The avatar component is non clickable and non interactive/focusable component.\n * If the avatar is typing, then the loading indicator will be displayed.\n * If the counter type avatar is set to a negative number, then we will display 0.\n * The presence indicator will be hidden when the counter property is set.\n *\n * @dependency mdc-icon\n * @dependency mdc-presence\n * @dependency mdc-text\n *\n * @tagname mdc-avatar\n *\n * @cssproperty --mdc-avatar-default-background-color - Allows customization of the default background color.\n * @cssproperty --mdc-avatar-default-foreground-color - Allows customization of the default foreground color.\n * @cssproperty --mdc-avatar-loading-indicator-background-color -\n *  Allows customization of the loading indicator background color.\n * @cssproperty --mdc-avatar-loading-indicator-foreground-color -\n *  Allows customization of the loading indicator foreground color.\n * @cssproperty --mdc-avatar-loading-overlay-background-color -\n *  Allows customization of the loading overlay background color.\n *\n * @csspart content - The main content of the avatar.\n * @csspart photo - The photo of the avatar.\n * @csspart presence - The presence indicator of the avatar.\n * @csspart loading-wrapper - The wrapper for the loading indicator.\n * @csspart loader - The loading indicator of the avatar.\n */",
-          "customElement": true,
-          "attributes": [
+              "description": "Slot for the content (header, description, etc) section",
+              "name": "content-container"
+            },
             {
-              "name": "src",
-              "type": {
-                "text": "string | undefined"
-              },
-              "description": "The src is the url which will be used to display the avatar.\nWhen the src is loading, we will display the initials as a placeholder.",
-              "fieldName": "src",
+              "description": "Slot for the description in the content (below header) - pass in Text, Links etc as needed.",
+              "name": "description-container"
+            },
+            {
+              "description": "This slot is for passing `mdc-link` component within the footer section.",
+              "name": "footer-link",
               "inheritedFrom": {
-                "name": "AvatarComponentMixin",
-                "module": "src/utils/mixins/AvatarComponentMixin.ts"
+                "name": "Dialog",
+                "module": "src/components/dialog/dialog.component.ts"
               }
             },
             {
-              "name": "initials",
-              "type": {
-                "text": "string | undefined"
-              },
-              "description": "The initials to be displayed for the avatar.",
-              "fieldName": "initials",
+              "description": "This slot is for passing secondary variant of `mdc-button` component within the footer section.",
+              "name": "footer-button-secondary",
               "inheritedFrom": {
-                "name": "AvatarComponentMixin",
-                "module": "src/utils/mixins/AvatarComponentMixin.ts"
+                "name": "Dialog",
+                "module": "src/components/dialog/dialog.component.ts"
               }
             },
             {
-              "name": "presence",
-              "type": {
-                "text": "PresenceType | undefined"
-              },
-              "description": "The presence is the status which can be used to display the\nactivity state of a user or a space within an avatar component.\n\nAcceptable values include:\n- `active`\n- `away`\n- `away-calling`\n- `busy`\n- `dnd`\n- `meeting`\n- `on-call`\n- `on-device`\n- `on-mobile`\n- `pause`\n- `pto`\n- `presenting`\n- `quiet`\n- `scheduled`",
-              "fieldName": "presence",
+              "description": "This slot is for passing primary variant of `mdc-button` component within the footer section.",
+              "name": "footer-button-primary",
               "inheritedFrom": {
-                "name": "AvatarComponentMixin",
-                "module": "src/utils/mixins/AvatarComponentMixin.ts"
+                "name": "Dialog",
+                "module": "src/components/dialog/dialog.component.ts"
               }
             },
             {
-              "name": "size",
-              "type": {
-                "text": "AvatarSize"
-              },
-              "description": "Acceptable values include (size in px unit):\n- 24\n- 32\n- 48\n- 64\n- 72\n- 88\n- 124",
-              "default": "32",
-              "fieldName": "size",
+              "description": " This slot is for passing custom footer content. Only use this if really needed, using the footer-link and footer-button slots is preferred",
+              "name": "footer",
               "inheritedFrom": {
-                "name": "AvatarComponentMixin",
-                "module": "src/utils/mixins/AvatarComponentMixin.ts"
+                "name": "Dialog",
+                "module": "src/components/dialog/dialog.component.ts"
               }
-            },
+            }
+          ],
+          "members": [
             {
-              "name": "counter",
+              "kind": "field",
+              "name": "illustration",
               "type": {
-                "text": "number | undefined"
+                "text": "IllustrationNames | undefined"
               },
-              "description": "The counter is the number which can be displayed on the avatar.\nThe maximum number is 99 and if the given number is greater than 99,\nthen the avatar will be displayed as `99+`.\nIf the given number is a negative number,\nthen the avatar will be displayed as `0`.",
-              "fieldName": "counter",
-              "inheritedFrom": {
-                "name": "AvatarComponentMixin",
-                "module": "src/utils/mixins/AvatarComponentMixin.ts"
-              }
+              "description": "The illustration to display in the announcement dialog.\nThis can be an image URL, icon name, or any other illustration identifier.\n\nMake sure to choose the right illustration respective the size (the filename includes the size information, i.e. threetwozero = 320px)",
+              "attribute": "illustration",
+              "reflects": true
             },
             {
-              "name": "is-typing",
+              "kind": "field",
+              "name": "size",
               "type": {
-                "text": "boolean"
+                "text": "DialogSize"
               },
-              "default": "false",
-              "description": "Represents the typing indicator when the user is typing.",
-              "fieldName": "isTyping",
+              "description": "The size of the announcement dialog, can be 'medium' (656px width), 'large' (992px width), 'xlarge' (90% width) or 'fullscreen' (100% width).",
+              "default": "medium",
+              "attribute": "size",
+              "reflects": true,
               "inheritedFrom": {
-                "name": "AvatarComponentMixin",
-                "module": "src/utils/mixins/AvatarComponentMixin.ts"
-              }
-            },
-            {
-              "name": "icon-name",
-              "type": {
-                "text": "IconNames | undefined"
-              },
-              "description": "Name of the icon (= filename).\n\nIf no `icon-name` is provided, no icon will be rendered.",
-              "fieldName": "iconName",
-              "inheritedFrom": {
-                "name": "IconNameMixin",
-                "module": "src/utils/mixins/IconNameMixin.ts"
-              }
-            }
-          ]
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "default",
-          "declaration": {
-            "name": "Avatar",
-            "module": "components/avatar/avatar.component.js"
-          }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "components/announcementdialog/announcementdialog.component.js",
-      "declarations": [
-        {
-          "kind": "class",
-          "description": "AnnouncementDialog component is a modal dialog that can be used to display announcements, extending the existing Dialog component.\nIt can be used to create custom dialogs where a illustration, content and footer actions are provided by the consumer.\nThe dialog is available in 4 sizes:  medium, large, xlarge and fullscreen. It may also receive custom styling/sizing.\nThe dialog interrupts the user and will block interaction with the rest of the application until it is closed.\n\nThe dialog can be controlled solely through the `visible` property, no trigger element is required.\nIf a `triggerId` is provided, the dialog will manage focus with that element, otherwise it will\nremember the previously focused element before the dialog was opened.\n\nThe dialog is a controlled component, meaning it does not have its own state management for visibility.\nUse the `visible` property to control the visibility of the dialog.\nUse the `onClose` event to handle the close action of the dialog (fired when Close button is clicked\nor Escape is pressed).\n\n**Accessibility notes for consuming (have to be explicitly set when you consume the component)**\n\n- The dialog should have an aria-label or aria-labelledby attribute to provide a label for screen readers.\n- Use aria-labelledby to reference the ID of the element that labels the dialog when there is no visible title.\n\n**Note: Programmatic show/hide requires the ? prefix on the visible attribute**\n- Use `?visible=true/false` as an attribute instead of `visible=true/false`\n- Reference docs for more info: https://lit.dev/docs/templates/expressions/#boolean-attribute-expressions",
-          "name": "AnnouncementDialog",
-          "cssProperties": [
-            {
-              "description": "background color of the illustration section",
-              "name": "--mdc-announcementdialog-illustration-background-color"
-            },
-            {
-              "description": "primary background color of the dialog",
-              "name": "--mdc-dialog-primary-background-color",
-              "inheritedFrom": {
-                "name": "Dialog",
-                "module": "src/components/dialog/dialog.component.ts"
-              }
-            },
-            {
-              "description": "border color of the dialog",
-              "name": "--mdc-dialog-border-color",
-              "inheritedFrom": {
-                "name": "Dialog",
-                "module": "src/components/dialog/dialog.component.ts"
-              }
-            },
-            {
-              "description": "text color of the header/title of the dialog",
-              "name": "--mdc-dialog-header-text-color",
-              "inheritedFrom": {
-                "name": "Dialog",
-                "module": "src/components/dialog/dialog.component.ts"
-              }
-            },
-            {
-              "description": "text color of the below header description of the dialog",
-              "name": "--mdc-dialog-description-text-color",
-              "inheritedFrom": {
-                "name": "Dialog",
-                "module": "src/components/dialog/dialog.component.ts"
-              }
-            },
-            {
-              "description": "elevation of the dialog",
-              "name": "--mdc-dialog-elevation-3",
-              "inheritedFrom": {
-                "name": "Dialog",
-                "module": "src/components/dialog/dialog.component.ts"
-              }
-            },
-            {
-              "description": "width of the dialog",
-              "name": "--mdc-dialog-width",
-              "inheritedFrom": {
-                "name": "Dialog",
-                "module": "src/components/dialog/dialog.component.ts"
-              }
-            },
-            {
-              "description": "height of the dialog",
-              "name": "--mdc-dialog-height",
-              "inheritedFrom": {
-                "name": "Dialog",
-                "module": "src/components/dialog/dialog.component.ts"
-              }
-            }
-          ],
-          "cssParts": [
-            {
-              "description": "The main body container that holds the illustration and content sections",
-              "name": "body",
-              "inheritedFrom": {
-                "name": "Dialog",
-                "module": "src/components/dialog/dialog.component.ts"
-              }
-            },
-            {
-              "description": "The container for the illustration section",
-              "name": "illustration-container"
-            },
-            {
-              "description": "The container for the content section",
-              "name": "content-container"
-            },
-            {
-              "description": "The header text",
-              "name": "header-text",
-              "inheritedFrom": {
-                "name": "Dialog",
-                "module": "src/components/dialog/dialog.component.ts"
-              }
-            },
-            {
-              "description": "The description text of the dialog.",
-              "name": "description-text",
-              "inheritedFrom": {
-                "name": "Dialog",
-                "module": "src/components/dialog/dialog.component.ts"
-              }
-            },
-            {
-              "description": "The close button of the dialog.",
-              "name": "dialog-close-btn",
-              "inheritedFrom": {
-                "name": "Dialog",
-                "module": "src/components/dialog/dialog.component.ts"
-              }
-            },
-            {
-              "description": "The header of the dialog.",
-              "name": "header",
-              "inheritedFrom": {
-                "name": "Dialog",
-                "module": "src/components/dialog/dialog.component.ts"
-              }
-            },
-            {
-              "description": "The header section of the dialog.",
-              "name": "header-section",
-              "inheritedFrom": {
-                "name": "Dialog",
-                "module": "src/components/dialog/dialog.component.ts"
-              }
-            }
-          ],
-          "slots": [
-            {
-              "description": "Slot for the dialog header content. This can be used to pass custom header content.",
-              "name": "header-prefix",
-              "inheritedFrom": {
-                "name": "Dialog",
-                "module": "src/components/dialog/dialog.component.ts"
-              }
-            },
-            {
-              "description": "Slot for the dialog body content",
-              "name": "dialog-body",
-              "inheritedFrom": {
-                "name": "Dialog",
-                "module": "src/components/dialog/dialog.component.ts"
-              }
-            },
-            {
-              "description": "Slot for the illustration container section",
-              "name": "illustration-container"
-            },
-            {
-              "description": "Slot for the content (header, description, etc) section",
-              "name": "content-container"
-            },
-            {
-              "description": "Slot for the description in the content (below header) - pass in Text, Links etc as needed.",
-              "name": "description-container"
-            },
-            {
-              "description": "This slot is for passing `mdc-link` component within the footer section.",
-              "name": "footer-link",
-              "inheritedFrom": {
-                "name": "Dialog",
-                "module": "src/components/dialog/dialog.component.ts"
-              }
-            },
-            {
-              "description": "This slot is for passing secondary variant of `mdc-button` component within the footer section.",
-              "name": "footer-button-secondary",
-              "inheritedFrom": {
-                "name": "Dialog",
-                "module": "src/components/dialog/dialog.component.ts"
-              }
-            },
-            {
-              "description": "This slot is for passing primary variant of `mdc-button` component within the footer section.",
-              "name": "footer-button-primary",
-              "inheritedFrom": {
-                "name": "Dialog",
-                "module": "src/components/dialog/dialog.component.ts"
-              }
-            },
-            {
-              "description": " This slot is for passing custom footer content. Only use this if really needed, using the footer-link and footer-button slots is preferred",
-              "name": "footer",
-              "inheritedFrom": {
-                "name": "Dialog",
-                "module": "src/components/dialog/dialog.component.ts"
-              }
-            }
-          ],
-          "members": [
-            {
-              "kind": "field",
-              "name": "illustration",
-              "type": {
-                "text": "IllustrationNames | undefined"
-              },
-              "description": "The illustration to display in the announcement dialog.\nThis can be an image URL, icon name, or any other illustration identifier.\n\nMake sure to choose the right illustration respective the size (the filename includes the size information, i.e. threetwozero = 320px)",
-              "attribute": "illustration",
-              "reflects": true
-            },
-            {
-              "kind": "field",
-              "name": "size",
-              "type": {
-                "text": "DialogSize"
-              },
-              "description": "The size of the announcement dialog, can be 'medium' (656px width), 'large' (992px width), 'xlarge' (90% width) or 'fullscreen' (100% width).",
-              "default": "medium",
-              "attribute": "size",
-              "reflects": true,
-              "inheritedFrom": {
-                "name": "Dialog",
-                "module": "components/dialog/dialog.component.js"
+                "name": "Dialog",
+                "module": "components/dialog/dialog.component.js"
               }
             },
             {
@@ -2860,589 +2533,916 @@
               ],
               "description": "Traps focus within the container.",
               "inheritedFrom": {
-                "name": "FocusTrapMixin",
-                "module": "utils/mixins/FocusTrapMixin.js"
+                "name": "FocusTrapMixin",
+                "module": "utils/mixins/FocusTrapMixin.js"
+              }
+            },
+            {
+              "kind": "method",
+              "name": "renderFooter",
+              "privacy": "protected",
+              "description": "Renders the footer of the card if footer-link,\nfooter-button-primary, or footer-button-secondary slots are provided",
+              "return": {
+                "type": {
+                  "text": ""
+                }
+              },
+              "inheritedFrom": {
+                "name": "FooterMixin",
+                "module": "utils/mixins/FooterMixin.js"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "id",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "description": "The unique ID of the dialog",
+              "attribute": "id",
+              "reflects": true,
+              "inheritedFrom": {
+                "name": "Dialog",
+                "module": "components/dialog/dialog.component.js"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "triggerId",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "The ID of the element that triggers the dialog",
+              "default": "undefined",
+              "attribute": "triggerId",
+              "reflects": true,
+              "inheritedFrom": {
+                "name": "Dialog",
+                "module": "components/dialog/dialog.component.js"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "visible",
+              "type": {
+                "text": "boolean"
+              },
+              "description": "The visibility of the dialog\n\nDialog is a controlled component, visible is the only property that controls the visibility of the dialog.",
+              "default": "false",
+              "attribute": "visible",
+              "reflects": true,
+              "inheritedFrom": {
+                "name": "Dialog",
+                "module": "components/dialog/dialog.component.js"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "variant",
+              "type": {
+                "text": "DialogVariant"
+              },
+              "description": "The variant of the dialog, can be 'default' or 'promotional'",
+              "default": "default",
+              "attribute": "variant",
+              "reflects": true,
+              "inheritedFrom": {
+                "name": "Dialog",
+                "module": "components/dialog/dialog.component.js"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "closeButtonAriaLabel",
+              "type": {
+                "text": "string | null"
+              },
+              "default": "null",
+              "description": "Defines a string value for the aria-label attribute for close button accessibility",
+              "attribute": "close-button-aria-label",
+              "inheritedFrom": {
+                "name": "Dialog",
+                "module": "components/dialog/dialog.component.js"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "ariaLabel",
+              "type": {
+                "text": "string | null"
+              },
+              "default": "null",
+              "description": "Defines a string value for the aria-label attribute when header is not used",
+              "attribute": "aria-label",
+              "reflects": true,
+              "inheritedFrom": {
+                "name": "Dialog",
+                "module": "components/dialog/dialog.component.js"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "ariaLabelledby",
+              "type": {
+                "text": "string | null"
+              },
+              "default": "null",
+              "description": "Defines a string value for the aria-labelledby attribute that refers to the element\nlabeling the dialog for accessibility",
+              "attribute": "aria-labelledby",
+              "reflects": true,
+              "inheritedFrom": {
+                "name": "Dialog",
+                "module": "components/dialog/dialog.component.js"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "ariaDescribedBy",
+              "type": {
+                "text": "string | null"
+              },
+              "default": "null",
+              "description": "Defines a string value for the aria-describedby attribute that refers to the element\ndescribing the dialog for accessibility",
+              "attribute": "aria-describedby",
+              "reflects": true,
+              "inheritedFrom": {
+                "name": "Dialog",
+                "module": "components/dialog/dialog.component.js"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "ariaDescription",
+              "type": {
+                "text": "string | null"
+              },
+              "default": "null",
+              "description": "Defines a string value for the aria-description attribute that refers to the element\ndescribing the dialog for accessibility",
+              "attribute": "aria-description",
+              "reflects": true,
+              "inheritedFrom": {
+                "name": "Dialog",
+                "module": "components/dialog/dialog.component.js"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "headerText",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "Defines a string value to display as the title of the dialog",
+              "attribute": "header-text",
+              "reflects": true,
+              "inheritedFrom": {
+                "name": "Dialog",
+                "module": "components/dialog/dialog.component.js"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "descriptionText",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "Defines a string value to display as the under-header description of the dialog",
+              "attribute": "description-text",
+              "reflects": true,
+              "inheritedFrom": {
+                "name": "Dialog",
+                "module": "components/dialog/dialog.component.js"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "headerTagName",
+              "type": {
+                "text": "string"
+              },
+              "description": "The html tag to be used for the header text",
+              "attribute": "header-tag-name",
+              "reflects": true,
+              "inheritedFrom": {
+                "name": "Dialog",
+                "module": "components/dialog/dialog.component.js"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "descriptionTagName",
+              "type": {
+                "text": "string"
+              },
+              "description": "The html tag to be used for the below-header description text",
+              "attribute": "description-tag-name",
+              "reflects": true,
+              "inheritedFrom": {
+                "name": "Dialog",
+                "module": "components/dialog/dialog.component.js"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "role",
+              "type": {
+                "text": "DialogRole"
+              },
+              "description": "Role of the dialog",
+              "default": "dialog",
+              "attribute": "role",
+              "reflects": true,
+              "inheritedFrom": {
+                "name": "Dialog",
+                "module": "components/dialog/dialog.component.js"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "disableAriaHasPopup",
+              "type": {
+                "text": "boolean"
+              },
+              "description": "Disable setting the aria-haspopup attribute on trigger element.\nMake sure to set this to true when the popover is extended and its role\nis not 'dialog' or 'alertdialog' i.e. listbox, menu, etc.",
+              "default": "false",
+              "attribute": "disable-aria-haspopup",
+              "reflects": true,
+              "inheritedFrom": {
+                "name": "Dialog",
+                "module": "components/dialog/dialog.component.js"
+              }
+            },
+            {
+              "kind": "method",
+              "name": "closeDialog",
+              "privacy": "private",
+              "description": "Fired when Close Button is clicked or Escape key is pressed.\nThis method dispatches the close event. Setting visible to false\nhas to be done by the consumer of the component.",
+              "inheritedFrom": {
+                "name": "Dialog",
+                "module": "components/dialog/dialog.component.js"
+              }
+            },
+            {
+              "kind": "method",
+              "name": "isOpenUpdated",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "oldValue",
+                  "type": {
+                    "text": "boolean | undefined"
+                  },
+                  "description": "The old value of the visible property."
+                },
+                {
+                  "name": "newValue",
+                  "type": {
+                    "text": "boolean"
+                  },
+                  "description": "The new value of the visible property."
+                }
+              ],
+              "description": "Handles the dialog visibility change.\nHandles the exit event to close the dialog.",
+              "inheritedFrom": {
+                "name": "Dialog",
+                "module": "components/dialog/dialog.component.js"
+              }
+            }
+          ],
+          "events": [
+            {
+              "description": "(React: onShown) Dispatched when the dialog is shown",
+              "name": "shown",
+              "reactName": "onShown",
+              "inheritedFrom": {
+                "name": "Dialog",
+                "module": "src/components/dialog/dialog.component.ts"
+              }
+            },
+            {
+              "description": "(React: onHidden) Dispatched when the dialog is hidden",
+              "name": "hidden",
+              "reactName": "onHidden",
+              "inheritedFrom": {
+                "name": "Dialog",
+                "module": "src/components/dialog/dialog.component.ts"
+              }
+            },
+            {
+              "description": "(React: onCreated) Dispatched when the dialog is created (added to the DOM)",
+              "name": "created",
+              "reactName": "onCreated",
+              "inheritedFrom": {
+                "name": "Dialog",
+                "module": "src/components/dialog/dialog.component.ts"
+              }
+            },
+            {
+              "description": "(React: onDestroyed) Dispatched when the dialog is destroyed (removed from the DOM)",
+              "name": "destroyed",
+              "reactName": "onDestroyed",
+              "inheritedFrom": {
+                "name": "Dialog",
+                "module": "src/components/dialog/dialog.component.ts"
+              }
+            },
+            {
+              "description": "(React: onClose) Dispatched when the Close Button is clicked or Escape key is pressed (this does not hide the dialog)",
+              "name": "close",
+              "reactName": "onClose",
+              "inheritedFrom": {
+                "name": "Dialog",
+                "module": "src/components/dialog/dialog.component.ts"
+              }
+            }
+          ],
+          "attributes": [
+            {
+              "name": "illustration",
+              "type": {
+                "text": "IllustrationNames | undefined"
+              },
+              "description": "The illustration to display in the announcement dialog.\nThis can be an image URL, icon name, or any other illustration identifier.\n\nMake sure to choose the right illustration respective the size (the filename includes the size information, i.e. threetwozero = 320px)",
+              "fieldName": "illustration"
+            },
+            {
+              "name": "size",
+              "type": {
+                "text": "DialogSize"
+              },
+              "description": "The size of the announcement dialog, can be 'medium' (656px width), 'large' (992px width), 'xlarge' (90% width) or 'fullscreen' (100% width).",
+              "default": "medium",
+              "fieldName": "size",
+              "inheritedFrom": {
+                "name": "Dialog",
+                "module": "src/components/dialog/dialog.component.ts"
               }
             },
             {
-              "kind": "method",
-              "name": "renderFooter",
-              "privacy": "protected",
-              "description": "Renders the footer of the card if footer-link,\nfooter-button-primary, or footer-button-secondary slots are provided",
-              "return": {
-                "type": {
-                  "text": ""
-                }
+              "name": "should-focus-trap-wrap",
+              "type": {
+                "text": "boolean"
               },
+              "default": "true",
+              "description": "Determines whether focus should wrap around when reaching the first or last focusable element.\nIf true, focus will cycle from end to start and vice versa.\n\nThis only applies when `focusTrap` is true.",
+              "fieldName": "shouldFocusTrapWrap",
               "inheritedFrom": {
-                "name": "FooterMixin",
-                "module": "utils/mixins/FooterMixin.js"
+                "name": "FocusTrapMixin",
+                "module": "src/utils/mixins/FocusTrapMixin.ts"
               }
             },
             {
-              "kind": "field",
               "name": "id",
               "type": {
                 "text": "string"
               },
               "default": "''",
               "description": "The unique ID of the dialog",
-              "attribute": "id",
-              "reflects": true,
+              "fieldName": "id",
               "inheritedFrom": {
                 "name": "Dialog",
-                "module": "components/dialog/dialog.component.js"
+                "module": "src/components/dialog/dialog.component.ts"
               }
             },
             {
-              "kind": "field",
               "name": "triggerId",
               "type": {
                 "text": "string | undefined"
               },
               "description": "The ID of the element that triggers the dialog",
               "default": "undefined",
-              "attribute": "triggerId",
-              "reflects": true,
+              "fieldName": "triggerId",
               "inheritedFrom": {
                 "name": "Dialog",
-                "module": "components/dialog/dialog.component.js"
+                "module": "src/components/dialog/dialog.component.ts"
               }
             },
             {
-              "kind": "field",
               "name": "visible",
               "type": {
                 "text": "boolean"
               },
               "description": "The visibility of the dialog\n\nDialog is a controlled component, visible is the only property that controls the visibility of the dialog.",
               "default": "false",
-              "attribute": "visible",
-              "reflects": true,
+              "fieldName": "visible",
               "inheritedFrom": {
                 "name": "Dialog",
-                "module": "components/dialog/dialog.component.js"
+                "module": "src/components/dialog/dialog.component.ts"
+              }
+            },
+            {
+              "name": "z-index",
+              "type": {
+                "text": "number"
+              },
+              "description": "The z-index of the dialog\n\nThe backdrop will have z-index of `zIndex - 1`",
+              "default": "1000",
+              "fieldName": "zIndex",
+              "inheritedFrom": {
+                "name": "Dialog",
+                "module": "src/components/dialog/dialog.component.ts"
               }
             },
             {
-              "kind": "field",
               "name": "variant",
               "type": {
                 "text": "DialogVariant"
               },
               "description": "The variant of the dialog, can be 'default' or 'promotional'",
               "default": "default",
-              "attribute": "variant",
-              "reflects": true,
+              "fieldName": "variant",
               "inheritedFrom": {
                 "name": "Dialog",
-                "module": "components/dialog/dialog.component.js"
+                "module": "src/components/dialog/dialog.component.ts"
               }
             },
             {
-              "kind": "field",
-              "name": "closeButtonAriaLabel",
+              "name": "close-button-aria-label",
               "type": {
                 "text": "string | null"
               },
               "default": "null",
               "description": "Defines a string value for the aria-label attribute for close button accessibility",
-              "attribute": "close-button-aria-label",
+              "fieldName": "closeButtonAriaLabel",
               "inheritedFrom": {
                 "name": "Dialog",
-                "module": "components/dialog/dialog.component.js"
+                "module": "src/components/dialog/dialog.component.ts"
               }
             },
             {
-              "kind": "field",
-              "name": "ariaLabel",
+              "name": "aria-label",
               "type": {
                 "text": "string | null"
               },
               "default": "null",
               "description": "Defines a string value for the aria-label attribute when header is not used",
-              "attribute": "aria-label",
-              "reflects": true,
+              "fieldName": "ariaLabel",
               "inheritedFrom": {
                 "name": "Dialog",
-                "module": "components/dialog/dialog.component.js"
+                "module": "src/components/dialog/dialog.component.ts"
               }
             },
             {
-              "kind": "field",
-              "name": "ariaLabelledby",
+              "name": "aria-labelledby",
               "type": {
                 "text": "string | null"
               },
               "default": "null",
               "description": "Defines a string value for the aria-labelledby attribute that refers to the element\nlabeling the dialog for accessibility",
-              "attribute": "aria-labelledby",
-              "reflects": true,
+              "fieldName": "ariaLabelledby",
               "inheritedFrom": {
                 "name": "Dialog",
-                "module": "components/dialog/dialog.component.js"
+                "module": "src/components/dialog/dialog.component.ts"
               }
             },
             {
-              "kind": "field",
-              "name": "ariaDescribedBy",
+              "name": "aria-describedby",
               "type": {
                 "text": "string | null"
               },
               "default": "null",
               "description": "Defines a string value for the aria-describedby attribute that refers to the element\ndescribing the dialog for accessibility",
-              "attribute": "aria-describedby",
-              "reflects": true,
+              "fieldName": "ariaDescribedBy",
               "inheritedFrom": {
                 "name": "Dialog",
-                "module": "components/dialog/dialog.component.js"
+                "module": "src/components/dialog/dialog.component.ts"
               }
             },
             {
-              "kind": "field",
-              "name": "ariaDescription",
+              "name": "aria-description",
               "type": {
                 "text": "string | null"
               },
               "default": "null",
               "description": "Defines a string value for the aria-description attribute that refers to the element\ndescribing the dialog for accessibility",
-              "attribute": "aria-description",
-              "reflects": true,
+              "fieldName": "ariaDescription",
               "inheritedFrom": {
                 "name": "Dialog",
-                "module": "components/dialog/dialog.component.js"
+                "module": "src/components/dialog/dialog.component.ts"
               }
             },
             {
-              "kind": "field",
-              "name": "headerText",
+              "name": "header-text",
               "type": {
                 "text": "string | undefined"
               },
               "description": "Defines a string value to display as the title of the dialog",
-              "attribute": "header-text",
-              "reflects": true,
+              "fieldName": "headerText",
               "inheritedFrom": {
                 "name": "Dialog",
-                "module": "components/dialog/dialog.component.js"
+                "module": "src/components/dialog/dialog.component.ts"
               }
             },
             {
-              "kind": "field",
-              "name": "descriptionText",
+              "name": "description-text",
               "type": {
                 "text": "string | undefined"
               },
               "description": "Defines a string value to display as the under-header description of the dialog",
-              "attribute": "description-text",
-              "reflects": true,
+              "fieldName": "descriptionText",
               "inheritedFrom": {
                 "name": "Dialog",
-                "module": "components/dialog/dialog.component.js"
+                "module": "src/components/dialog/dialog.component.ts"
               }
             },
             {
-              "kind": "field",
-              "name": "headerTagName",
+              "name": "header-tag-name",
               "type": {
                 "text": "string"
               },
               "description": "The html tag to be used for the header text",
-              "attribute": "header-tag-name",
-              "reflects": true,
+              "fieldName": "headerTagName",
               "inheritedFrom": {
                 "name": "Dialog",
-                "module": "components/dialog/dialog.component.js"
+                "module": "src/components/dialog/dialog.component.ts"
               }
             },
             {
-              "kind": "field",
-              "name": "descriptionTagName",
+              "name": "description-tag-name",
               "type": {
                 "text": "string"
               },
               "description": "The html tag to be used for the below-header description text",
-              "attribute": "description-tag-name",
-              "reflects": true,
+              "fieldName": "descriptionTagName",
               "inheritedFrom": {
                 "name": "Dialog",
-                "module": "components/dialog/dialog.component.js"
+                "module": "src/components/dialog/dialog.component.ts"
               }
             },
             {
-              "kind": "field",
               "name": "role",
               "type": {
                 "text": "DialogRole"
               },
               "description": "Role of the dialog",
               "default": "dialog",
-              "attribute": "role",
-              "reflects": true,
+              "fieldName": "role",
               "inheritedFrom": {
                 "name": "Dialog",
-                "module": "components/dialog/dialog.component.js"
+                "module": "src/components/dialog/dialog.component.ts"
               }
             },
             {
-              "kind": "field",
-              "name": "disableAriaHasPopup",
+              "name": "disable-aria-haspopup",
               "type": {
                 "text": "boolean"
               },
               "description": "Disable setting the aria-haspopup attribute on trigger element.\nMake sure to set this to true when the popover is extended and its role\nis not 'dialog' or 'alertdialog' i.e. listbox, menu, etc.",
               "default": "false",
-              "attribute": "disable-aria-haspopup",
-              "reflects": true,
+              "fieldName": "disableAriaHasPopup",
               "inheritedFrom": {
                 "name": "Dialog",
-                "module": "components/dialog/dialog.component.js"
+                "module": "src/components/dialog/dialog.component.ts"
               }
             },
             {
-              "kind": "method",
-              "name": "closeDialog",
-              "privacy": "private",
-              "description": "Fired when Close Button is clicked or Escape key is pressed.\nThis method dispatches the close event. Setting visible to false\nhas to be done by the consumer of the component.",
+              "name": "focus-trap",
+              "type": {
+                "text": "boolean"
+              },
+              "description": "Determines whether the focus trap is enabled.\nIf true, focus will be restricted to the content within this component.\n\nNOTE: this should only be disabled in rare cases! By default a Modal Dialog\nshould trap focus always.",
+              "default": "true",
+              "fieldName": "focusTrap",
               "inheritedFrom": {
                 "name": "Dialog",
-                "module": "components/dialog/dialog.component.js"
+                "module": "src/components/dialog/dialog.component.ts"
               }
+            }
+          ],
+          "superclass": {
+            "name": "Dialog",
+            "module": "/src/components/dialog/dialog.component"
+          },
+          "tagName": "mdc-announcementdialog",
+          "jsDoc": "/**\n * AnnouncementDialog component is a modal dialog that can be used to display announcements, extending the existing Dialog component.\n * It can be used to create custom dialogs where a illustration, content and footer actions are provided by the consumer.\n * The dialog is available in 4 sizes:  medium, large, xlarge and fullscreen. It may also receive custom styling/sizing.\n * The dialog interrupts the user and will block interaction with the rest of the application until it is closed.\n *\n * The dialog can be controlled solely through the `visible` property, no trigger element is required.\n * If a `triggerId` is provided, the dialog will manage focus with that element, otherwise it will\n * remember the previously focused element before the dialog was opened.\n *\n * The dialog is a controlled component, meaning it does not have its own state management for visibility.\n * Use the `visible` property to control the visibility of the dialog.\n * Use the `onClose` event to handle the close action of the dialog (fired when Close button is clicked\n * or Escape is pressed).\n *\n * **Accessibility notes for consuming (have to be explicitly set when you consume the component)**\n *\n * - The dialog should have an aria-label or aria-labelledby attribute to provide a label for screen readers.\n * - Use aria-labelledby to reference the ID of the element that labels the dialog when there is no visible title.\n *\n * **Note: Programmatic show/hide requires the ? prefix on the visible attribute**\n * - Use `?visible=true/false` as an attribute instead of `visible=true/false`\n * - Reference docs for more info: https://lit.dev/docs/templates/expressions/#boolean-attribute-expressions\n *\n * @dependency mdc-button\n * @dependency mdc-illustration\n * @dependency mdc-text\n *\n * @tagname mdc-announcementdialog\n *\n * @event shown - (React: onShown) Dispatched when the dialog is shown\n * @event hidden - (React: onHidden) Dispatched when the dialog is hidden\n * @event created - (React: onCreated) Dispatched when the dialog is created (added to the DOM)\n * @event destroyed - (React: onDestroyed) Dispatched when the dialog is destroyed (removed from the DOM)\n * @event close - (React: onClose) Dispatched when the Close Button is clicked or Escape key is pressed\n * (this does not hide the dialog)\n *\n * @cssproperty --mdc-announcementdialog-illustration-background-color - background color of the illustration section\n * @cssproperty --mdc-dialog-primary-background-color - primary background color of the dialog\n * @cssproperty --mdc-dialog-border-color - border color of the dialog\n * @cssproperty --mdc-dialog-header-text-color - text color of the header/title of the dialog\n * @cssproperty --mdc-dialog-description-text-color - text color of the below header description of the dialog\n * @cssproperty --mdc-dialog-elevation-3 - elevation of the dialog\n * @cssproperty --mdc-dialog-width - width of the dialog\n * @cssproperty --mdc-dialog-height - height of the dialog\n *\n * @csspart body - The main body container that holds the illustration and content sections\n * @csspart illustration-container - The container for the illustration section\n * @csspart content-container - The container for the content section\n * @csspart header-text - The header text\n *\n * @slot header-prefix - Slot for the dialog header content. This can be used to pass custom header content.\n * @slot dialog-body - Slot for the dialog body content\n * @slot illustration-container - Slot for the illustration container section\n * @slot content-container - Slot for the content (header, description, etc) section\n * @slot description-container - Slot for the description in the content (below header) - pass in Text, Links etc as needed.\n * @slot footer-link - This slot is for passing `mdc-link` component within the footer section.\n * @slot footer-button-secondary - This slot is for passing secondary variant of `mdc-button` component\n * within the footer section.\n * @slot footer-button-primary - This slot is for passing primary variant of\n * `mdc-button` component within the footer section.\n * @slot footer -  This slot is for passing custom footer content. Only use this if really needed,\n * using the footer-link and footer-button slots is preferred\n */",
+          "customElement": true
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "default",
+          "declaration": {
+            "name": "AnnouncementDialog",
+            "module": "components/announcementdialog/announcementdialog.component.js"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "components/appheader/appheader.component.js",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "The `mdc-appheader` component provides a structured and accessible app header layout.\nIt consists of three primary sections: leading, center, and trailing.\n\n- The **leading section** typically holds a **brand logo**, **brand name** or **menu icon**.\n- The **center section** can contain a **search bar**, **icons** or action controls.\n- The **trailing section** generally includes a **profile avatar**, **additional icons** or **action controls**.",
+          "name": "Appheader",
+          "cssParts": [
+            {
+              "description": "The main container for styling the header.",
+              "name": "container"
             },
             {
-              "kind": "method",
-              "name": "isOpenUpdated",
-              "privacy": "private",
-              "parameters": [
-                {
-                  "name": "oldValue",
-                  "type": {
-                    "text": "boolean | undefined"
-                  },
-                  "description": "The old value of the visible property."
-                },
-                {
-                  "name": "newValue",
-                  "type": {
-                    "text": "boolean"
-                  },
-                  "description": "The new value of the visible property."
-                }
-              ],
-              "description": "Handles the dialog visibility change.\nHandles the exit event to close the dialog.",
-              "inheritedFrom": {
-                "name": "Dialog",
-                "module": "components/dialog/dialog.component.js"
-              }
+              "description": "The leading section of the header.",
+              "name": "leading-section"
+            },
+            {
+              "description": "The center section of the header.",
+              "name": "center-section"
+            },
+            {
+              "description": "The trailing section of the header.",
+              "name": "trailing-section"
             }
           ],
-          "events": [
+          "slots": [
+            {
+              "description": "Slot for the leading section (e.g., brand logo, brand name).",
+              "name": "leading"
+            },
+            {
+              "description": "Slot for the center section (e.g., search bar, icons).",
+              "name": "center"
+            },
+            {
+              "description": "Slot for the trailing section (e.g., profile avatar, icons).",
+              "name": "trailing"
+            }
+          ],
+          "members": [],
+          "superclass": {
+            "name": "Component",
+            "module": "/src/models"
+          },
+          "tagName": "mdc-appheader",
+          "jsDoc": "/**\n * The `mdc-appheader` component provides a structured and accessible app header layout.\n * It consists of three primary sections: leading, center, and trailing.\n *\n * - The **leading section** typically holds a **brand logo**, **brand name** or **menu icon**.\n * - The **center section** can contain a **search bar**, **icons** or action controls.\n * - The **trailing section** generally includes a **profile avatar**, **additional icons** or **action controls**.\n *\n * @tagname mdc-appheader\n *\n * @slot leading - Slot for the leading section (e.g., brand logo, brand name).\n * @slot center - Slot for the center section (e.g., search bar, icons).\n * @slot trailing - Slot for the trailing section (e.g., profile avatar, icons).\n *\n * @csspart container - The main container for styling the header.\n * @csspart leading-section - The leading section of the header.\n * @csspart center-section - The center section of the header.\n * @csspart trailing-section - The trailing section of the header.\n */",
+          "customElement": true
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "default",
+          "declaration": {
+            "name": "Appheader",
+            "module": "components/appheader/appheader.component.js"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "components/avatar/avatar.component.js",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "The `mdc-avatar` component is used to represent a person or a space.\nAn avatar can be an icon, initials, counter and photo.\n\nTo set the photo of an avatar,\nyou need to set \"src\" attribute.\n\nWhile the avatar image is loading, as a placeholder,\nwe will show the initials text.\nIf the initials are not specified then,\nwe will show `user-regular` icon as a placeholder.\n\nBy default, if there are no attributes specified,\nthen the default avatar will be an icon with `user-regular` name.\n\nThe avatar component is non clickable and non interactive/focusable component.\nIf the avatar is typing, then the loading indicator will be displayed.\nIf the counter type avatar is set to a negative number, then we will display 0.\nThe presence indicator will be hidden when the counter property is set.",
+          "name": "Avatar",
+          "cssProperties": [
             {
-              "description": "(React: onShown) Dispatched when the dialog is shown",
-              "name": "shown",
-              "reactName": "onShown",
-              "inheritedFrom": {
-                "name": "Dialog",
-                "module": "src/components/dialog/dialog.component.ts"
-              }
+              "description": "Allows customization of the default background color.",
+              "name": "--mdc-avatar-default-background-color"
             },
             {
-              "description": "(React: onHidden) Dispatched when the dialog is hidden",
-              "name": "hidden",
-              "reactName": "onHidden",
-              "inheritedFrom": {
-                "name": "Dialog",
-                "module": "src/components/dialog/dialog.component.ts"
-              }
+              "description": "Allows customization of the default foreground color.",
+              "name": "--mdc-avatar-default-foreground-color"
             },
             {
-              "description": "(React: onCreated) Dispatched when the dialog is created (added to the DOM)",
-              "name": "created",
-              "reactName": "onCreated",
-              "inheritedFrom": {
-                "name": "Dialog",
-                "module": "src/components/dialog/dialog.component.ts"
-              }
+              "description": "Allows customization of the loading indicator background color.",
+              "name": "--mdc-avatar-loading-indicator-background-color"
             },
             {
-              "description": "(React: onDestroyed) Dispatched when the dialog is destroyed (removed from the DOM)",
-              "name": "destroyed",
-              "reactName": "onDestroyed",
-              "inheritedFrom": {
-                "name": "Dialog",
-                "module": "src/components/dialog/dialog.component.ts"
-              }
+              "description": "Allows customization of the loading indicator foreground color.",
+              "name": "--mdc-avatar-loading-indicator-foreground-color"
             },
             {
-              "description": "(React: onClose) Dispatched when the Close Button is clicked or Escape key is pressed (this does not hide the dialog)",
-              "name": "close",
-              "reactName": "onClose",
-              "inheritedFrom": {
-                "name": "Dialog",
-                "module": "src/components/dialog/dialog.component.ts"
-              }
+              "description": "Allows customization of the loading overlay background color.",
+              "name": "--mdc-avatar-loading-overlay-background-color"
             }
           ],
-          "attributes": [
+          "cssParts": [
             {
-              "name": "illustration",
-              "type": {
-                "text": "IllustrationNames | undefined"
-              },
-              "description": "The illustration to display in the announcement dialog.\nThis can be an image URL, icon name, or any other illustration identifier.\n\nMake sure to choose the right illustration respective the size (the filename includes the size information, i.e. threetwozero = 320px)",
-              "fieldName": "illustration"
+              "description": "The main content of the avatar.",
+              "name": "content"
             },
             {
-              "name": "size",
-              "type": {
-                "text": "DialogSize"
-              },
-              "description": "The size of the announcement dialog, can be 'medium' (656px width), 'large' (992px width), 'xlarge' (90% width) or 'fullscreen' (100% width).",
-              "default": "medium",
-              "fieldName": "size",
-              "inheritedFrom": {
-                "name": "Dialog",
-                "module": "src/components/dialog/dialog.component.ts"
-              }
+              "description": "The photo of the avatar.",
+              "name": "photo"
             },
             {
-              "name": "should-focus-trap-wrap",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "true",
-              "description": "Determines whether focus should wrap around when reaching the first or last focusable element.\nIf true, focus will cycle from end to start and vice versa.\n\nThis only applies when `focusTrap` is true.",
-              "fieldName": "shouldFocusTrapWrap",
-              "inheritedFrom": {
-                "name": "FocusTrapMixin",
-                "module": "src/utils/mixins/FocusTrapMixin.ts"
-              }
+              "description": "The presence indicator of the avatar.",
+              "name": "presence"
             },
             {
-              "name": "id",
-              "type": {
-                "text": "string"
-              },
-              "default": "''",
-              "description": "The unique ID of the dialog",
-              "fieldName": "id",
-              "inheritedFrom": {
-                "name": "Dialog",
-                "module": "src/components/dialog/dialog.component.ts"
-              }
+              "description": "The wrapper for the loading indicator.",
+              "name": "loading-wrapper"
             },
             {
-              "name": "triggerId",
+              "description": "The loading indicator of the avatar.",
+              "name": "loader"
+            }
+          ],
+          "members": [
+            {
+              "kind": "field",
+              "name": "src",
               "type": {
                 "text": "string | undefined"
               },
-              "description": "The ID of the element that triggers the dialog",
-              "default": "undefined",
-              "fieldName": "triggerId",
+              "description": "The src is the url which will be used to display the avatar.\nWhen the src is loading, we will display the initials as a placeholder.",
+              "attribute": "src",
               "inheritedFrom": {
-                "name": "Dialog",
-                "module": "src/components/dialog/dialog.component.ts"
+                "name": "AvatarComponentMixin",
+                "module": "utils/mixins/AvatarComponentMixin.js"
               }
             },
             {
-              "name": "visible",
+              "kind": "field",
+              "name": "initials",
               "type": {
-                "text": "boolean"
+                "text": "string | undefined"
               },
-              "description": "The visibility of the dialog\n\nDialog is a controlled component, visible is the only property that controls the visibility of the dialog.",
-              "default": "false",
-              "fieldName": "visible",
+              "description": "The initials to be displayed for the avatar.",
+              "attribute": "initials",
               "inheritedFrom": {
-                "name": "Dialog",
-                "module": "src/components/dialog/dialog.component.ts"
+                "name": "AvatarComponentMixin",
+                "module": "utils/mixins/AvatarComponentMixin.js"
               }
             },
             {
-              "name": "z-index",
+              "kind": "field",
+              "name": "presence",
               "type": {
-                "text": "number"
+                "text": "PresenceType | undefined"
               },
-              "description": "The z-index of the dialog\n\nThe backdrop will have z-index of `zIndex - 1`",
-              "default": "1000",
-              "fieldName": "zIndex",
+              "description": "The presence is the status which can be used to display the\nactivity state of a user or a space within an avatar component.\n\nAcceptable values include:\n- `active`\n- `away`\n- `away-calling`\n- `busy`\n- `dnd`\n- `meeting`\n- `on-call`\n- `on-device`\n- `on-mobile`\n- `pause`\n- `pto`\n- `presenting`\n- `quiet`\n- `scheduled`",
+              "attribute": "presence",
               "inheritedFrom": {
-                "name": "Dialog",
-                "module": "src/components/dialog/dialog.component.ts"
+                "name": "AvatarComponentMixin",
+                "module": "utils/mixins/AvatarComponentMixin.js"
               }
             },
             {
-              "name": "variant",
+              "kind": "field",
+              "name": "size",
               "type": {
-                "text": "DialogVariant"
+                "text": "AvatarSize"
               },
-              "description": "The variant of the dialog, can be 'default' or 'promotional'",
-              "default": "default",
-              "fieldName": "variant",
+              "description": "Acceptable values include (size in px unit):\n- 24\n- 32\n- 48\n- 64\n- 72\n- 88\n- 124",
+              "default": "32",
+              "attribute": "size",
+              "reflects": true,
               "inheritedFrom": {
-                "name": "Dialog",
-                "module": "src/components/dialog/dialog.component.ts"
+                "name": "AvatarComponentMixin",
+                "module": "utils/mixins/AvatarComponentMixin.js"
               }
             },
             {
-              "name": "close-button-aria-label",
+              "kind": "field",
+              "name": "counter",
               "type": {
-                "text": "string | null"
+                "text": "number | undefined"
               },
-              "default": "null",
-              "description": "Defines a string value for the aria-label attribute for close button accessibility",
-              "fieldName": "closeButtonAriaLabel",
+              "description": "The counter is the number which can be displayed on the avatar.\nThe maximum number is 99 and if the given number is greater than 99,\nthen the avatar will be displayed as `99+`.\nIf the given number is a negative number,\nthen the avatar will be displayed as `0`.",
+              "attribute": "counter",
               "inheritedFrom": {
-                "name": "Dialog",
-                "module": "src/components/dialog/dialog.component.ts"
+                "name": "AvatarComponentMixin",
+                "module": "utils/mixins/AvatarComponentMixin.js"
               }
             },
             {
-              "name": "aria-label",
+              "kind": "field",
+              "name": "isTyping",
               "type": {
-                "text": "string | null"
+                "text": "boolean"
               },
-              "default": "null",
-              "description": "Defines a string value for the aria-label attribute when header is not used",
-              "fieldName": "ariaLabel",
+              "default": "false",
+              "description": "Represents the typing indicator when the user is typing.",
+              "attribute": "is-typing",
               "inheritedFrom": {
-                "name": "Dialog",
-                "module": "src/components/dialog/dialog.component.ts"
+                "name": "AvatarComponentMixin",
+                "module": "utils/mixins/AvatarComponentMixin.js"
               }
             },
             {
-              "name": "aria-labelledby",
+              "kind": "field",
+              "name": "iconName",
               "type": {
-                "text": "string | null"
+                "text": "IconNames | undefined"
               },
-              "default": "null",
-              "description": "Defines a string value for the aria-labelledby attribute that refers to the element\nlabeling the dialog for accessibility",
-              "fieldName": "ariaLabelledby",
+              "description": "Name of the icon (= filename).\n\nIf no `icon-name` is provided, no icon will be rendered.",
+              "attribute": "icon-name",
               "inheritedFrom": {
-                "name": "Dialog",
-                "module": "src/components/dialog/dialog.component.ts"
+                "name": "IconNameMixin",
+                "module": "utils/mixins/IconNameMixin.js"
               }
-            },
+            }
+          ],
+          "mixins": [
             {
-              "name": "aria-describedby",
-              "type": {
-                "text": "string | null"
-              },
-              "default": "null",
-              "description": "Defines a string value for the aria-describedby attribute that refers to the element\ndescribing the dialog for accessibility",
-              "fieldName": "ariaDescribedBy",
-              "inheritedFrom": {
-                "name": "Dialog",
-                "module": "src/components/dialog/dialog.component.ts"
-              }
+              "name": "AvatarComponentMixin",
+              "module": "/src/utils/mixins/AvatarComponentMixin"
             },
             {
-              "name": "aria-description",
-              "type": {
-                "text": "string | null"
-              },
-              "default": "null",
-              "description": "Defines a string value for the aria-description attribute that refers to the element\ndescribing the dialog for accessibility",
-              "fieldName": "ariaDescription",
-              "inheritedFrom": {
-                "name": "Dialog",
-                "module": "src/components/dialog/dialog.component.ts"
-              }
-            },
+              "name": "IconNameMixin",
+              "module": "/src/utils/mixins/IconNameMixin"
+            }
+          ],
+          "superclass": {
+            "name": "Component",
+            "module": "/src/models"
+          },
+          "tagName": "mdc-avatar",
+          "jsDoc": "/**\n * The `mdc-avatar` component is used to represent a person or a space.\n * An avatar can be an icon, initials, counter and photo.\n *\n * To set the photo of an avatar,\n * you need to set \"src\" attribute.\n *\n * While the avatar image is loading, as a placeholder,\n * we will show the initials text.\n * If the initials are not specified then,\n * we will show `user-regular` icon as a placeholder.\n *\n * By default, if there are no attributes specified,\n * then the default avatar will be an icon with `user-regular` name.\n *\n * The avatar component is non clickable and non interactive/focusable component.\n * If the avatar is typing, then the loading indicator will be displayed.\n * If the counter type avatar is set to a negative number, then we will display 0.\n * The presence indicator will be hidden when the counter property is set.\n *\n * @dependency mdc-icon\n * @dependency mdc-presence\n * @dependency mdc-text\n *\n * @tagname mdc-avatar\n *\n * @cssproperty --mdc-avatar-default-background-color - Allows customization of the default background color.\n * @cssproperty --mdc-avatar-default-foreground-color - Allows customization of the default foreground color.\n * @cssproperty --mdc-avatar-loading-indicator-background-color -\n *  Allows customization of the loading indicator background color.\n * @cssproperty --mdc-avatar-loading-indicator-foreground-color -\n *  Allows customization of the loading indicator foreground color.\n * @cssproperty --mdc-avatar-loading-overlay-background-color -\n *  Allows customization of the loading overlay background color.\n *\n * @csspart content - The main content of the avatar.\n * @csspart photo - The photo of the avatar.\n * @csspart presence - The presence indicator of the avatar.\n * @csspart loading-wrapper - The wrapper for the loading indicator.\n * @csspart loader - The loading indicator of the avatar.\n */",
+          "customElement": true,
+          "attributes": [
             {
-              "name": "header-text",
+              "name": "src",
               "type": {
                 "text": "string | undefined"
               },
-              "description": "Defines a string value to display as the title of the dialog",
-              "fieldName": "headerText",
+              "description": "The src is the url which will be used to display the avatar.\nWhen the src is loading, we will display the initials as a placeholder.",
+              "fieldName": "src",
               "inheritedFrom": {
-                "name": "Dialog",
-                "module": "src/components/dialog/dialog.component.ts"
+                "name": "AvatarComponentMixin",
+                "module": "src/utils/mixins/AvatarComponentMixin.ts"
               }
             },
             {
-              "name": "description-text",
+              "name": "initials",
               "type": {
                 "text": "string | undefined"
               },
-              "description": "Defines a string value to display as the under-header description of the dialog",
-              "fieldName": "descriptionText",
+              "description": "The initials to be displayed for the avatar.",
+              "fieldName": "initials",
               "inheritedFrom": {
-                "name": "Dialog",
-                "module": "src/components/dialog/dialog.component.ts"
+                "name": "AvatarComponentMixin",
+                "module": "src/utils/mixins/AvatarComponentMixin.ts"
               }
             },
             {
-              "name": "header-tag-name",
+              "name": "presence",
               "type": {
-                "text": "string"
+                "text": "PresenceType | undefined"
               },
-              "description": "The html tag to be used for the header text",
-              "fieldName": "headerTagName",
+              "description": "The presence is the status which can be used to display the\nactivity state of a user or a space within an avatar component.\n\nAcceptable values include:\n- `active`\n- `away`\n- `away-calling`\n- `busy`\n- `dnd`\n- `meeting`\n- `on-call`\n- `on-device`\n- `on-mobile`\n- `pause`\n- `pto`\n- `presenting`\n- `quiet`\n- `scheduled`",
+              "fieldName": "presence",
               "inheritedFrom": {
-                "name": "Dialog",
-                "module": "src/components/dialog/dialog.component.ts"
+                "name": "AvatarComponentMixin",
+                "module": "src/utils/mixins/AvatarComponentMixin.ts"
               }
             },
             {
-              "name": "description-tag-name",
+              "name": "size",
               "type": {
-                "text": "string"
+                "text": "AvatarSize"
               },
-              "description": "The html tag to be used for the below-header description text",
-              "fieldName": "descriptionTagName",
+              "description": "Acceptable values include (size in px unit):\n- 24\n- 32\n- 48\n- 64\n- 72\n- 88\n- 124",
+              "default": "32",
+              "fieldName": "size",
               "inheritedFrom": {
-                "name": "Dialog",
-                "module": "src/components/dialog/dialog.component.ts"
+                "name": "AvatarComponentMixin",
+                "module": "src/utils/mixins/AvatarComponentMixin.ts"
               }
             },
             {
-              "name": "role",
+              "name": "counter",
               "type": {
-                "text": "DialogRole"
+                "text": "number | undefined"
               },
-              "description": "Role of the dialog",
-              "default": "dialog",
-              "fieldName": "role",
+              "description": "The counter is the number which can be displayed on the avatar.\nThe maximum number is 99 and if the given number is greater than 99,\nthen the avatar will be displayed as `99+`.\nIf the given number is a negative number,\nthen the avatar will be displayed as `0`.",
+              "fieldName": "counter",
               "inheritedFrom": {
-                "name": "Dialog",
-                "module": "src/components/dialog/dialog.component.ts"
+                "name": "AvatarComponentMixin",
+                "module": "src/utils/mixins/AvatarComponentMixin.ts"
               }
             },
             {
-              "name": "disable-aria-haspopup",
+              "name": "is-typing",
               "type": {
                 "text": "boolean"
               },
-              "description": "Disable setting the aria-haspopup attribute on trigger element.\nMake sure to set this to true when the popover is extended and its role\nis not 'dialog' or 'alertdialog' i.e. listbox, menu, etc.",
               "default": "false",
-              "fieldName": "disableAriaHasPopup",
+              "description": "Represents the typing indicator when the user is typing.",
+              "fieldName": "isTyping",
               "inheritedFrom": {
-                "name": "Dialog",
-                "module": "src/components/dialog/dialog.component.ts"
+                "name": "AvatarComponentMixin",
+                "module": "src/utils/mixins/AvatarComponentMixin.ts"
               }
             },
             {
-              "name": "focus-trap",
+              "name": "icon-name",
               "type": {
-                "text": "boolean"
+                "text": "IconNames | undefined"
               },
-              "description": "Determines whether the focus trap is enabled.\nIf true, focus will be restricted to the content within this component.\n\nNOTE: this should only be disabled in rare cases! By default a Modal Dialog\nshould trap focus always.",
-              "default": "true",
-              "fieldName": "focusTrap",
+              "description": "Name of the icon (= filename).\n\nIf no `icon-name` is provided, no icon will be rendered.",
+              "fieldName": "iconName",
               "inheritedFrom": {
-                "name": "Dialog",
-                "module": "src/components/dialog/dialog.component.ts"
+                "name": "IconNameMixin",
+                "module": "src/utils/mixins/IconNameMixin.ts"
               }
             }
-          ],
-          "superclass": {
-            "name": "Dialog",
-            "module": "/src/components/dialog/dialog.component"
-          },
-          "tagName": "mdc-announcementdialog",
-          "jsDoc": "/**\n * AnnouncementDialog component is a modal dialog that can be used to display announcements, extending the existing Dialog component.\n * It can be used to create custom dialogs where a illustration, content and footer actions are provided by the consumer.\n * The dialog is available in 4 sizes:  medium, large, xlarge and fullscreen. It may also receive custom styling/sizing.\n * The dialog interrupts the user and will block interaction with the rest of the application until it is closed.\n *\n * The dialog can be controlled solely through the `visible` property, no trigger element is required.\n * If a `triggerId` is provided, the dialog will manage focus with that element, otherwise it will\n * remember the previously focused element before the dialog was opened.\n *\n * The dialog is a controlled component, meaning it does not have its own state management for visibility.\n * Use the `visible` property to control the visibility of the dialog.\n * Use the `onClose` event to handle the close action of the dialog (fired when Close button is clicked\n * or Escape is pressed).\n *\n * **Accessibility notes for consuming (have to be explicitly set when you consume the component)**\n *\n * - The dialog should have an aria-label or aria-labelledby attribute to provide a label for screen readers.\n * - Use aria-labelledby to reference the ID of the element that labels the dialog when there is no visible title.\n *\n * **Note: Programmatic show/hide requires the ? prefix on the visible attribute**\n * - Use `?visible=true/false` as an attribute instead of `visible=true/false`\n * - Reference docs for more info: https://lit.dev/docs/templates/expressions/#boolean-attribute-expressions\n *\n * @dependency mdc-button\n * @dependency mdc-illustration\n * @dependency mdc-text\n *\n * @tagname mdc-announcementdialog\n *\n * @event shown - (React: onShown) Dispatched when the dialog is shown\n * @event hidden - (React: onHidden) Dispatched when the dialog is hidden\n * @event created - (React: onCreated) Dispatched when the dialog is created (added to the DOM)\n * @event destroyed - (React: onDestroyed) Dispatched when the dialog is destroyed (removed from the DOM)\n * @event close - (React: onClose) Dispatched when the Close Button is clicked or Escape key is pressed\n * (this does not hide the dialog)\n *\n * @cssproperty --mdc-announcementdialog-illustration-background-color - background color of the illustration section\n * @cssproperty --mdc-dialog-primary-background-color - primary background color of the dialog\n * @cssproperty --mdc-dialog-border-color - border color of the dialog\n * @cssproperty --mdc-dialog-header-text-color - text color of the header/title of the dialog\n * @cssproperty --mdc-dialog-description-text-color - text color of the below header description of the dialog\n * @cssproperty --mdc-dialog-elevation-3 - elevation of the dialog\n * @cssproperty --mdc-dialog-width - width of the dialog\n * @cssproperty --mdc-dialog-height - height of the dialog\n *\n * @csspart body - The main body container that holds the illustration and content sections\n * @csspart illustration-container - The container for the illustration section\n * @csspart content-container - The container for the content section\n * @csspart header-text - The header text\n *\n * @slot header-prefix - Slot for the dialog header content. This can be used to pass custom header content.\n * @slot dialog-body - Slot for the dialog body content\n * @slot illustration-container - Slot for the illustration container section\n * @slot content-container - Slot for the content (header, description, etc) section\n * @slot description-container - Slot for the description in the content (below header) - pass in Text, Links etc as needed.\n * @slot footer-link - This slot is for passing `mdc-link` component within the footer section.\n * @slot footer-button-secondary - This slot is for passing secondary variant of `mdc-button` component\n * within the footer section.\n * @slot footer-button-primary - This slot is for passing primary variant of\n * `mdc-button` component within the footer section.\n * @slot footer -  This slot is for passing custom footer content. Only use this if really needed,\n * using the footer-link and footer-button slots is preferred\n */",
-          "customElement": true
+          ]
         }
       ],
       "exports": [
@@ -3450,8 +3450,8 @@
           "kind": "js",
           "name": "default",
           "declaration": {
-            "name": "AnnouncementDialog",
-            "module": "components/announcementdialog/announcementdialog.component.js"
+            "name": "Avatar",
+            "module": "components/avatar/avatar.component.js"
           }
         }
       ]
@@ -28026,56 +28026,168 @@
     },
     {
       "kind": "javascript-module",
-      "path": "components/navmenuitem/navmenuitem.component.js",
+      "path": "components/optgroup/optgroup.component.js",
       "declarations": [
         {
           "kind": "class",
-          "description": "`mdc-navmenuitem` is a menuitem styled to work as a navigation tab.\nIt supports a leading icon, optional badge and dynamic text rendering.\n\nNote: `mdc-navmenuitem` is intended to be used inside `mdc-menubar` as part of the sideNavigation\ncomponent. Its structure, spacing, and interactions are designed to align with\nthe visual and functional requirements of side navigation layouts.\n\nBy providing the tooltip-text attribute, a tooltip will be displayed on hover of the navmenuitem. This tooltip is useful when an active navmenuitem is present within a submenu of the sidenavigation component.",
-          "name": "NavMenuItem",
+          "description": "optgroup component, which creates a grouping of mdc-option within a listbox element.",
+          "name": "OptGroup",
           "cssProperties": [
             {
-              "description": "Text color of the navmenuitem in its normal state.",
-              "name": "--mdc-navmenuitem-color"
-            },
+              "description": "Allows customization of the disabled option color.",
+              "name": "--mdc-optgroup-disabled-color"
+            }
+          ],
+          "cssParts": [
             {
-              "description": "Border color of the navmenuitem in its normal state.",
-              "name": "--mdc-navmenuitem-border-color"
-            },
+              "description": "The header text of the optgroup.",
+              "name": "header-text"
+            }
+          ],
+          "slots": [
             {
-              "description": "Text color of the navmenuitem when disabled.",
-              "name": "--mdc-navmenuitem-disabled-color"
-            },
+              "description": "This is a default slot for mdc-option elements.",
+              "name": "default"
+            }
+          ],
+          "members": [
             {
-              "description": "Width of the navmenuitem when expanded.",
-              "name": "--mdc-navmenuitem-expanded-width"
+              "kind": "field",
+              "name": "label",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "The header text to be displayed on the top of the options list.",
+              "attribute": "label",
+              "reflects": true
             },
             {
-              "description": "Background color of the navmenuitem when hovered.",
-              "name": "--mdc-navmenuitem-hover-background-color"
+              "kind": "method",
+              "name": "setDisabledForAllOptions",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              }
             },
             {
-              "description": "Background color of the active navmenuitem when hovered.",
-              "name": "--mdc-navmenuitem-hover-active-background-color"
+              "kind": "field",
+              "name": "dataAriaLabel",
+              "type": {
+                "text": "string | null"
+              },
+              "default": "null",
+              "description": "Defines a string value that labels the current element.\nThe Aria-Label attribute to be set for accessibility.",
+              "attribute": "data-aria-label",
+              "reflects": true,
+              "inheritedFrom": {
+                "name": "DataAriaLabelMixin",
+                "module": "utils/mixins/DataAriaLabelMixin.js"
+              }
             },
             {
-              "description": "Background color of the navmenuitem when pressed.",
-              "name": "--mdc-navmenuitem-pressed-background-color"
+              "kind": "field",
+              "name": "disabled",
+              "type": {
+                "text": "boolean | undefined"
+              },
+              "description": "Indicates whether the component is disabled.\nWhen the component is disabled for user interaction; it is not focusable or clickable.",
+              "default": "undefined",
+              "attribute": "disabled",
+              "reflects": true,
+              "inheritedFrom": {
+                "name": "DisabledMixin",
+                "module": "utils/mixins/DisabledMixin.js"
+              }
+            }
+          ],
+          "attributes": [
+            {
+              "name": "label",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "The header text to be displayed on the top of the options list.",
+              "fieldName": "label"
             },
             {
-              "description": "Background color of the active navmenuitem when pressed.",
-              "name": "--mdc-navmenuitem-pressed-active-background-color"
+              "name": "data-aria-label",
+              "type": {
+                "text": "string | null"
+              },
+              "default": "null",
+              "description": "Defines a string value that labels the current element.\nThe Aria-Label attribute to be set for accessibility.",
+              "fieldName": "dataAriaLabel",
+              "inheritedFrom": {
+                "name": "DataAriaLabelMixin",
+                "module": "src/utils/mixins/DataAriaLabelMixin.ts"
+              }
             },
             {
-              "description": "Background color of the navmenuitem when disabled.",
-              "name": "--mdc-navmenuitem-disabled-background-color"
+              "name": "disabled",
+              "type": {
+                "text": "boolean | undefined"
+              },
+              "description": "Indicates whether the component is disabled.\nWhen the component is disabled for user interaction; it is not focusable or clickable.",
+              "default": "undefined",
+              "fieldName": "disabled",
+              "inheritedFrom": {
+                "name": "DisabledMixin",
+                "module": "src/utils/mixins/DisabledMixin.ts"
+              }
+            }
+          ],
+          "mixins": [
+            {
+              "name": "DataAriaLabelMixin",
+              "module": "/src/utils/mixins/DataAriaLabelMixin"
             },
             {
-              "description": "Background color of the active navmenuitem when disabled.",
-              "name": "--mdc-navmenuitem-disabled-active-background-color"
+              "name": "DisabledMixin",
+              "module": "/src/utils/mixins/DisabledMixin"
+            }
+          ],
+          "superclass": {
+            "name": "Component",
+            "module": "/src/models"
+          },
+          "tagName": "mdc-optgroup",
+          "jsDoc": "/**\n * optgroup component, which creates a grouping of mdc-option within a listbox element.\n *\n * @dependency mdc-text\n *\n * @tagname mdc-optgroup\n *\n * @slot default - This is a default slot for mdc-option elements.\n *\n * @cssproperty --mdc-optgroup-disabled-color - Allows customization of the disabled option color.\n *\n * @csspart header-text - The header text of the optgroup.\n */",
+          "customElement": true
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "default",
+          "declaration": {
+            "name": "OptGroup",
+            "module": "components/optgroup/optgroup.component.js"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "components/option/option.component.js",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "Option component, which is used within Selectlistbox within Select component.\n\nThe label and secondary label of the option can be set using the `label` and `secondaryLabel` properties respectively.\nThe `label` is the primary text displayed in the option, while the `secondaryLabel` is the secondary text displayed below the primary label.\n\nThe `selected` property is used to indicate whether the option is selected or not.\nWhen the `selected` property is set to true, a checkmark icon will be displayed\non the right side of the option to indicate that it is selected.\n\nThe `prefixIcon` property can be used to display an icon on the left side of the option label.\n\n**Note**: If an option contains a long text, it is recommended to create a tooltip for the option that displays the full text on hover.\nConsumers need to add a unique ID to this option 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 option using the `triggerID` attribute.",
+          "name": "Option",
+          "cssProperties": [
+            {
+              "description": "gap between columns in the option",
+              "name": "--mdc-listitem-column-gap",
+              "inheritedFrom": {
+                "name": "ListItem",
+                "module": "src/components/listitem/listitem.component.ts"
+              }
             },
             {
-              "description": "Background color of the active nav item in its rest state.",
-              "name": "--mdc-navmenuitem-rest-active-background-color"
+              "description": "width of the icon in the option",
+              "name": "--mdc-option-icon-width"
             },
             {
               "description": "Allows customization of the default background color.",
@@ -28125,14 +28237,6 @@
                 "module": "src/components/listitem/listitem.component.ts"
               }
             },
-            {
-              "description": "Allows customization of column gap.",
-              "name": "--mdc-listitem-column-gap",
-              "inheritedFrom": {
-                "name": "ListItem",
-                "module": "src/components/listitem/listitem.component.ts"
-              }
-            },
             {
               "description": "Allows customization of padding left and right.",
               "name": "--mdc-listitem-padding-left-right",
@@ -28175,30 +28279,6 @@
             }
           ],
           "cssParts": [
-            {
-              "description": "The arrow of the navmenuitem.",
-              "name": "arrow"
-            },
-            {
-              "description": "The badge of the navmenuitem.",
-              "name": "badge"
-            },
-            {
-              "description": "The container of the icon.",
-              "name": "icon-container"
-            },
-            {
-              "description": "The container of the text.",
-              "name": "text-container"
-            },
-            {
-              "description": "The trailing arrow of the navmenuitem.",
-              "name": "trailing-arrow",
-              "inheritedFrom": {
-                "name": "MenuItem",
-                "module": "src/components/menuitem/menuitem.component.ts"
-              }
-            },
             {
               "description": "Allows customization of the leading part.",
               "name": "leading",
@@ -28207,14 +28287,6 @@
                 "module": "src/components/listitem/listitem.component.ts"
               }
             },
-            {
-              "description": "Allows customization of leading arrow icon.",
-              "name": "leading-arrow",
-              "inheritedFrom": {
-                "name": "MenuItem",
-                "module": "src/components/menuitem/menuitem.component.ts"
-              }
-            },
             {
               "description": "Allows customization of the leading text part.",
               "name": "leading-text",
@@ -28243,55 +28315,23 @@
           "members": [
             {
               "kind": "field",
-              "name": "active",
-              "type": {
-                "text": "boolean | undefined"
-              },
-              "description": "The navmenuitem's active state indicates whether it is currently toggled on (active) or off (inactive).\nWhen the active state is true, the navmenuitem is considered to be in an active state, meaning it is toggled on.\nConversely, when the active state is false, the navmenuitem is in an inactive state, indicating it is toggled off.",
-              "default": "undefined",
-              "attribute": "active",
-              "reflects": true
-            },
-            {
-              "kind": "field",
-              "name": "badgeType",
-              "type": {
-                "text": "BadgeType | undefined"
-              },
-              "description": "Type of the badge\nCan be `dot` (notification) or `counter`.",
-              "attribute": "badge-type",
-              "reflects": true
-            },
-            {
-              "kind": "field",
-              "name": "counter",
-              "type": {
-                "text": "number | undefined"
-              },
-              "description": "Counter is the number which can be provided in the badge.",
-              "attribute": "counter",
-              "reflects": true
-            },
-            {
-              "kind": "field",
-              "name": "maxCounter",
+              "name": "selected",
               "type": {
-                "text": "number"
+                "text": "boolean"
               },
-              "description": "The maximum number can be set up to 999, anything above that will be rendered as _999+_.\nThe max counter can be `9`, `99` or `999`.",
-              "default": "99",
-              "attribute": "max-counter",
+              "default": "false",
+              "description": "The selected attribute is used to indicate that the option is selected.",
+              "attribute": "selected",
               "reflects": true
             },
             {
               "kind": "field",
-              "name": "navId",
+              "name": "prefixIcon",
               "type": {
-                "text": "string | undefined"
+                "text": "IconNames | undefined"
               },
-              "description": "Id of the navMenuItem (used as a identificator when used in the menubar)\nNote: It has to be unique.",
-              "default": "undefined",
-              "attribute": "nav-id",
+              "description": "The prefix icon attribute is used to display the icon name on the left of the option label.",
+              "attribute": "prefix-icon",
               "reflects": true
             },
             {
@@ -28301,249 +28341,108 @@
                 "text": "string | null"
               },
               "default": "null",
-              "description": "Aria-label attribute to be set for accessibility",
-              "attribute": "aria-label"
-            },
-            {
-              "kind": "field",
-              "name": "disableAriaCurrent",
-              "type": {
-                "text": "boolean | undefined"
-              },
-              "description": "When set to true, prevents the automatic setting of the `aria-current` attribute on the navmenuitem\nwhen it becomes active. This is useful for cases where you want to maintain the visual active styling\nbut need to handle aria-current attribute differently or not at all.\nThe active button styling will still be applied regardless of this setting.",
-              "attribute": "disable-aria-current",
-              "reflects": true
-            },
-            {
-              "kind": "field",
-              "name": "tooltipText",
-              "type": {
-                "text": "string | undefined"
-              },
-              "description": "The tooltip text is displayed on hover of the list item.",
-              "attribute": "tooltip-text",
+              "description": "Any additional description can be provided here for screen readers.",
+              "attribute": "aria-label",
               "reflects": true
             },
-            {
-              "kind": "method",
-              "name": "removeTooltip",
-              "privacy": "private"
-            },
-            {
-              "kind": "method",
-              "name": "renderDynamicTooltip",
-              "privacy": "private",
-              "return": {
-                "type": {
-                  "text": "void"
-                }
-              }
-            },
-            {
-              "kind": "method",
-              "name": "isNested",
-              "privacy": "private",
-              "return": {
-                "type": {
-                  "text": "boolean"
-                }
-              },
-              "description": "Check whether the navmenuitem is inside a nested nav structure.\nReturns `true` if there is a parent `mdc-menupopover`\nThis method assumes nesting implies deeper levels of nav hierarchy."
-            },
-            {
-              "kind": "method",
-              "name": "handleClickEvent",
-              "privacy": "private",
-              "return": {
-                "type": {
-                  "text": "void"
-                }
-              }
-            },
-            {
-              "kind": "method",
-              "name": "renderTextLabel",
-              "privacy": "private",
-              "parameters": [
-                {
-                  "name": "label",
-                  "type": {
-                    "text": "string | undefined"
-                  }
-                }
-              ]
-            },
-            {
-              "kind": "method",
-              "name": "renderArrowIcon",
-              "privacy": "private",
-              "parameters": [
-                {
-                  "name": "showLabel",
-                  "type": {
-                    "text": "boolean | undefined"
-                  }
-                }
-              ]
-            },
-            {
-              "kind": "method",
-              "name": "renderBadge",
-              "privacy": "private",
-              "parameters": [
-                {
-                  "name": "showLabel",
-                  "type": {
-                    "text": "boolean | undefined"
-                  }
-                }
-              ]
-            },
-            {
-              "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": "arrowPosition",
+              "name": "name",
               "type": {
-                "text": "ArrowPositions | undefined"
+                "text": "string"
               },
-              "description": "Defines where the arrow icon will appear.\n- `'leading'`: Icon appears on the leading edge (start).\n- `'trailing'`: Icon appears on the trailing edge (end).\n\nIf not set, no arrow is displayed.",
-              "attribute": "arrow-position",
+              "default": "''",
+              "description": "Indicates the name of the component group.\nThey are used to group elements in a form together.",
+              "attribute": "name",
               "reflects": true,
               "inheritedFrom": {
-                "name": "MenuItem",
-                "module": "components/menuitem/menuitem.component.js"
+                "name": "FormInternalsMixin",
+                "module": "utils/mixins/FormInternalsMixin.js"
               }
             },
             {
               "kind": "field",
-              "name": "arrowDirection",
+              "name": "value",
               "type": {
-                "text": "ArrowDirections | undefined"
+                "text": "string"
               },
-              "description": "Defines the direction the arrow icon points.\n- `'positive'`: Arrow points toward the trailing side.\n- `'negative'`: Arrow points toward the leading side.",
-              "attribute": "arrow-direction",
+              "default": "''",
+              "description": "Indicates the value of the component group (ex: input, checkbox, radio, select etc...)",
+              "attribute": "value",
               "reflects": true,
               "inheritedFrom": {
-                "name": "MenuItem",
-                "module": "components/menuitem/menuitem.component.js"
+                "name": "FormInternalsMixin",
+                "module": "utils/mixins/FormInternalsMixin.js"
               }
             },
             {
               "kind": "field",
-              "name": "name",
+              "name": "validationMessage",
               "type": {
                 "text": "string | undefined"
               },
-              "description": "The name attribute is used to identify the menu item when it is selected.",
-              "attribute": "name",
+              "description": "Custom validation message that will override the default message and displayed when the input is invalid.\n\nTo display custom validation messages, you must listen for input events (or other relevant events)\non your component and update the `validationMessage` property with the desired message string.\nUpdating this property will ensure that new validation messages are shown to the user.\n- The `validationMessage` property overrides the default browser validation message when set.\n- Consumers are responsible for updating `validationMessage` in response to input or validation state changes.",
+              "attribute": "validation-message",
               "reflects": true,
               "inheritedFrom": {
-                "name": "MenuItem",
-                "module": "components/menuitem/menuitem.component.js"
+                "name": "FormInternalsMixin",
+                "module": "utils/mixins/FormInternalsMixin.js"
               }
             },
             {
               "kind": "field",
-              "name": "value",
+              "name": "validity",
               "type": {
-                "text": "string | undefined"
-              },
-              "description": "The value attribute is used to represent a value when the menu item is selected.\nIt is typically used with checkbox and radio menu items, but can be handy for any menu item.",
-              "attribute": "value",
-              "reflects": true,
+                "text": "ValidityState"
+              },
+              "readonly": true,
               "inheritedFrom": {
-                "name": "MenuItem",
-                "module": "components/menuitem/menuitem.component.js"
+                "name": "FormInternalsMixin",
+                "module": "utils/mixins/FormInternalsMixin.js"
               }
             },
             {
-              "kind": "method",
-              "name": "handleKeyDown",
-              "privacy": "protected",
-              "return": {
-                "type": {
-                  "text": "void"
-                }
-              },
-              "parameters": [
-                {
-                  "name": "event",
-                  "type": {
-                    "text": "KeyboardEvent"
-                  },
-                  "description": "The keyboard event that triggered the action."
-                }
-              ],
-              "description": "Handles the keydown event for the menu item.\nIf the Enter key is pressed, it triggers a click event on the menu item.\nThis allows keyboard users to activate the menu item using the Enter key.\n\nThis follows the native behaviour, actionable element can be triggered by Enter\nkey on the keydown event.\n\nNote: Action triggered by Space on the keyup event.",
+              "kind": "field",
+              "name": "willValidate",
+              "readonly": true,
               "inheritedFrom": {
-                "name": "ListItem",
-                "module": "components/listitem/listitem.component.js"
+                "name": "FormInternalsMixin",
+                "module": "utils/mixins/FormInternalsMixin.js"
               }
             },
             {
               "kind": "method",
-              "name": "handleKeyUp",
-              "privacy": "private",
+              "name": "setValidity",
+              "description": "Sets the validity of the input field based on the input field's validity.",
               "return": {
                 "type": {
-                  "text": "void"
+                  "text": ""
                 }
               },
-              "parameters": [
-                {
-                  "name": "event",
-                  "type": {
-                    "text": "KeyboardEvent"
-                  },
-                  "description": "The keyboard event that triggered the action."
-                }
-              ],
-              "description": "Handles the keyup event for the menu item.\nIf the Space key is released, it triggers a click event on the menu item.\nThis allows keyboard users to activate the menu item using the Space key.\nIt also prevents the default action of the Space key to avoid scrolling the page.\n\nThis follows the native behaviour, actionable element can be triggered by Space\nkey on the keyup event.\n\nNote: Action triggered by Enter on the keydown event.",
               "inheritedFrom": {
-                "name": "MenuItem",
-                "module": "components/menuitem/menuitem.component.js"
+                "name": "FormInternalsMixin",
+                "module": "utils/mixins/FormInternalsMixin.js"
               }
             },
             {
               "kind": "method",
-              "name": "renderTrailingControls",
-              "privacy": "protected",
-              "description": "Renders the trailing controls slot and optionally the trailing arrow icon,\nbased on `arrowPosition` and `arrowDirection`.",
+              "name": "checkValidity",
               "return": {
                 "type": {
-                  "text": ""
+                  "text": "boolean"
                 }
               },
               "inheritedFrom": {
-                "name": "ListItem",
-                "module": "components/listitem/listitem.component.js"
+                "name": "FormInternalsMixin",
+                "module": "utils/mixins/FormInternalsMixin.js"
               }
             },
             {
               "kind": "method",
-              "name": "renderLeadingControls",
-              "privacy": "protected",
-              "description": "Renders the leading controls slot and optionally the leading arrow icon,\nbased on `arrowPosition` and `arrowDirection`.",
-              "return": {
-                "type": {
-                  "text": ""
-                }
-              },
+              "name": "reportValidity",
               "inheritedFrom": {
-                "name": "ListItem",
-                "module": "components/listitem/listitem.component.js"
+                "name": "FormInternalsMixin",
+                "module": "utils/mixins/FormInternalsMixin.js"
               }
             },
             {
@@ -28700,6 +28599,30 @@
                 "module": "components/listitem/listitem.component.js"
               }
             },
+            {
+              "kind": "method",
+              "name": "handleKeyDown",
+              "privacy": "protected",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "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.",
+              "inheritedFrom": {
+                "name": "ListItem",
+                "module": "components/listitem/listitem.component.js"
+              }
+            },
             {
               "kind": "method",
               "name": "triggerClickEvent",
@@ -28788,6 +28711,36 @@
                 "module": "components/listitem/listitem.component.js"
               }
             },
+            {
+              "kind": "method",
+              "name": "renderTrailingControls",
+              "privacy": "protected",
+              "description": "Renders the trailing controls slot.",
+              "return": {
+                "type": {
+                  "text": ""
+                }
+              },
+              "inheritedFrom": {
+                "name": "ListItem",
+                "module": "components/listitem/listitem.component.js"
+              }
+            },
+            {
+              "kind": "method",
+              "name": "renderLeadingControls",
+              "privacy": "protected",
+              "description": "Renders the leading controls slot.",
+              "return": {
+                "type": {
+                  "text": ""
+                }
+              },
+              "inheritedFrom": {
+                "name": "ListItem",
+                "module": "components/listitem/listitem.component.js"
+              }
+            },
             {
               "kind": "method",
               "name": "stopEventPropagation",
@@ -28815,7 +28768,7 @@
           ],
           "events": [
             {
-              "description": "(React: onClick) This event is dispatched when the navmenuitem is clicked.",
+              "description": "(React: onClick) This event is dispatched when the option is clicked.",
               "name": "click",
               "reactName": "onClick",
               "inheritedFrom": {
@@ -28824,7 +28777,7 @@
               }
             },
             {
-              "description": "(React: onKeyDown) This event is dispatched when a key is pressed down on the navmenuitem.",
+              "description": "(React: onKeyDown) This event is dispatched when a key is pressed down on the option.",
               "name": "keydown",
               "reactName": "onKeyDown",
               "inheritedFrom": {
@@ -28833,7 +28786,7 @@
               }
             },
             {
-              "description": "(React: onKeyUp) This event is dispatched when a key is released on the navmenuitem.",
+              "description": "(React: onKeyUp) This event is dispatched when a key is released on the option.",
               "name": "keyup",
               "reactName": "onKeyUp",
               "inheritedFrom": {
@@ -28842,7 +28795,7 @@
               }
             },
             {
-              "description": "(React: onFocus) This event is dispatched when the navmenuitem receives focus.",
+              "description": "(React: onFocus) This event is dispatched when the option receives focus.",
               "name": "focus",
               "reactName": "onFocus",
               "inheritedFrom": {
@@ -28851,12 +28804,7 @@
               }
             },
             {
-              "description": "(React: onActiveChange) Dispatched when the active state of the navmenuitem changes.",
-              "name": "activechange",
-              "reactName": "onActiveChange"
-            },
-            {
-              "description": "(React: onEnabled) This event is dispatched after the menuitem is enabled",
+              "description": "(React: onEnabled) This event is dispatched after the listitem is enabled",
               "name": "enabled",
               "reactName": "onEnabled",
               "inheritedFrom": {
@@ -28865,7 +28813,7 @@
               }
             },
             {
-              "description": "(React: onDisabled) This event is dispatched after the menuitem is disabled",
+              "description": "(React: onDisabled) This event is dispatched after the listitem is disabled",
               "name": "disabled",
               "reactName": "onDisabled",
               "inheritedFrom": {
@@ -28874,7 +28822,7 @@
               }
             },
             {
-              "description": "(React: onCreated) This event is dispatched after the menuitem is created (added to the DOM)",
+              "description": "(React: onCreated) This event is dispatched after the listitem is created (added to the DOM)",
               "name": "created",
               "reactName": "onCreated",
               "inheritedFrom": {
@@ -28883,7 +28831,7 @@
               }
             },
             {
-              "description": "(React: onDestroyed) This event is dispatched after the menuitem is destroyed (removed from the DOM)",
+              "description": "(React: onDestroyed) This event is dispatched after the listitem is destroyed (removed from the DOM)",
               "name": "destroyed",
               "reactName": "onDestroyed",
               "inheritedFrom": {
@@ -28894,47 +28842,21 @@
           ],
           "attributes": [
             {
-              "name": "active",
-              "type": {
-                "text": "boolean | undefined"
-              },
-              "description": "The navmenuitem's active state indicates whether it is currently toggled on (active) or off (inactive).\nWhen the active state is true, the navmenuitem is considered to be in an active state, meaning it is toggled on.\nConversely, when the active state is false, the navmenuitem is in an inactive state, indicating it is toggled off.",
-              "default": "undefined",
-              "fieldName": "active"
-            },
-            {
-              "name": "badge-type",
-              "type": {
-                "text": "BadgeType | undefined"
-              },
-              "description": "Type of the badge\nCan be `dot` (notification) or `counter`.",
-              "fieldName": "badgeType"
-            },
-            {
-              "name": "counter",
-              "type": {
-                "text": "number | undefined"
-              },
-              "description": "Counter is the number which can be provided in the badge.",
-              "fieldName": "counter"
-            },
-            {
-              "name": "max-counter",
+              "name": "selected",
               "type": {
-                "text": "number"
+                "text": "boolean"
               },
-              "description": "The maximum number can be set up to 999, anything above that will be rendered as _999+_.\nThe max counter can be `9`, `99` or `999`.",
-              "default": "99",
-              "fieldName": "maxCounter"
+              "default": "false",
+              "description": "The selected attribute is used to indicate that the option is selected.",
+              "fieldName": "selected"
             },
             {
-              "name": "nav-id",
+              "name": "prefix-icon",
               "type": {
-                "text": "string | undefined"
+                "text": "IconNames | undefined"
               },
-              "description": "Id of the navMenuItem (used as a identificator when used in the menubar)\nNote: It has to be unique.",
-              "default": "undefined",
-              "fieldName": "navId"
+              "description": "The prefix icon attribute is used to display the icon name on the left of the option label.",
+              "fieldName": "prefixIcon"
             },
             {
               "name": "aria-label",
@@ -28942,83 +28864,45 @@
                 "text": "string | null"
               },
               "default": "null",
-              "description": "Aria-label attribute to be set for accessibility",
+              "description": "Any additional description can be provided here for screen readers.",
               "fieldName": "ariaLabel"
             },
             {
-              "name": "disable-aria-current",
-              "type": {
-                "text": "boolean | undefined"
-              },
-              "description": "When set to true, prevents the automatic setting of the `aria-current` attribute on the navmenuitem\nwhen it becomes active. This is useful for cases where you want to maintain the visual active styling\nbut need to handle aria-current attribute differently or not at all.\nThe active button styling will still be applied regardless of this setting.",
-              "fieldName": "disableAriaCurrent"
-            },
-            {
-              "name": "tooltip-text",
-              "type": {
-                "text": "string | undefined"
-              },
-              "description": "The tooltip text is displayed on hover of the list item.",
-              "fieldName": "tooltipText"
-            },
-            {
-              "name": "icon-name",
-              "type": {
-                "text": "IconNames | undefined"
-              },
-              "description": "Name of the icon (= filename).\n\nIf no `icon-name` is provided, no icon will be rendered.",
-              "fieldName": "iconName",
-              "inheritedFrom": {
-                "name": "IconNameMixin",
-                "module": "src/utils/mixins/IconNameMixin.ts"
-              }
-            },
-            {
-              "name": "arrow-position",
-              "type": {
-                "text": "ArrowPositions | undefined"
-              },
-              "description": "Defines where the arrow icon will appear.\n- `'leading'`: Icon appears on the leading edge (start).\n- `'trailing'`: Icon appears on the trailing edge (end).\n\nIf not set, no arrow is displayed.",
-              "fieldName": "arrowPosition",
-              "inheritedFrom": {
-                "name": "MenuItem",
-                "module": "src/components/menuitem/menuitem.component.ts"
-              }
-            },
-            {
-              "name": "arrow-direction",
+              "name": "name",
               "type": {
-                "text": "ArrowDirections | undefined"
+                "text": "string"
               },
-              "description": "Defines the direction the arrow icon points.\n- `'positive'`: Arrow points toward the trailing side.\n- `'negative'`: Arrow points toward the leading side.",
-              "fieldName": "arrowDirection",
+              "default": "''",
+              "description": "Indicates the name of the component group.\nThey are used to group elements in a form together.",
+              "fieldName": "name",
               "inheritedFrom": {
-                "name": "MenuItem",
-                "module": "src/components/menuitem/menuitem.component.ts"
+                "name": "FormInternalsMixin",
+                "module": "src/utils/mixins/FormInternalsMixin.ts"
               }
             },
             {
-              "name": "name",
+              "name": "value",
               "type": {
-                "text": "string | undefined"
-              },
-              "description": "The name attribute is used to identify the menu item when it is selected.",
-              "fieldName": "name",
+                "text": "string"
+              },
+              "default": "''",
+              "description": "Indicates the value of the component group (ex: input, checkbox, radio, select etc...)",
+              "fieldName": "value",
               "inheritedFrom": {
-                "name": "MenuItem",
-                "module": "src/components/menuitem/menuitem.component.ts"
+                "name": "FormInternalsMixin",
+                "module": "src/utils/mixins/FormInternalsMixin.ts"
               }
             },
             {
-              "name": "value",
+              "name": "validation-message",
               "type": {
                 "text": "string | undefined"
               },
-              "description": "The value attribute is used to represent a value when the menu item is selected.\nIt is typically used with checkbox and radio menu items, but can be handy for any menu item.",
-              "fieldName": "value",
+              "description": "Custom validation message that will override the default message and displayed when the input is invalid.\n\nTo display custom validation messages, you must listen for input events (or other relevant events)\non your component and update the `validationMessage` property with the desired message string.\nUpdating this property will ensure that new validation messages are shown to the user.\n- The `validationMessage` property overrides the default browser validation message when set.\n- Consumers are responsible for updating `validationMessage` in response to input or validation state changes.",
+              "fieldName": "validationMessage",
               "inheritedFrom": {
-                "name": "MenuItem",
-                "module": "src/components/menuitem/menuitem.component.ts"
+                "name": "FormInternalsMixin",
+                "module": "src/utils/mixins/FormInternalsMixin.ts"
               }
             },
             {
@@ -29136,20 +29020,20 @@
           ],
           "mixins": [
             {
-              "name": "IconNameMixin",
-              "module": "/src/utils/mixins/IconNameMixin"
+              "name": "FormInternalsMixin",
+              "module": "/src/utils/mixins/FormInternalsMixin"
             }
           ],
           "superclass": {
-            "name": "MenuItem",
-            "module": "/src/components/menuitem/menuitem.component"
+            "name": "ListItem",
+            "module": "/src/components/listitem/listitem.component"
           },
-          "tagName": "mdc-navmenuitem",
-          "jsDoc": "/**\n * `mdc-navmenuitem` is a menuitem styled to work as a navigation tab.\n * It supports a leading icon, optional badge and dynamic text rendering.\n *\n * Note: `mdc-navmenuitem` is intended to be used inside `mdc-menubar` as part of the sideNavigation\n * component. Its structure, spacing, and interactions are designed to align with\n * the visual and functional requirements of side navigation layouts.\n *\n * By providing the tooltip-text attribute, a tooltip will be displayed on hover of the navmenuitem. This tooltip is useful when an active navmenuitem is present within a submenu of the sidenavigation component.\n *\n * @tagname mdc-navmenuitem\n *\n * @dependency mdc-icon\n * @dependency mdc-text\n * @dependency mdc-badge\n * @dependency mdc-tooltip\n *\n * @event click - (React: onClick) This event is dispatched when the navmenuitem is clicked.\n * @event keydown - (React: onKeyDown) This event is dispatched when a key is pressed down on the navmenuitem.\n * @event keyup - (React: onKeyUp) This event is dispatched when a key is released on the navmenuitem.\n * @event focus - (React: onFocus) This event is dispatched when the navmenuitem receives focus.\n * @event activechange - (React: onActiveChange) Dispatched when the active state of the navmenuitem changes.\n *\n * @cssproperty --mdc-navmenuitem-color - Text color of the navmenuitem in its normal state.\n * @cssproperty --mdc-navmenuitem-border-color - Border color of the navmenuitem in its normal state.\n * @cssproperty --mdc-navmenuitem-disabled-color - Text color of the navmenuitem when disabled.\n * @cssproperty --mdc-navmenuitem-expanded-width - Width of the navmenuitem when expanded.\n * @cssproperty --mdc-navmenuitem-hover-background-color - Background color of the navmenuitem when hovered.\n * @cssproperty --mdc-navmenuitem-hover-active-background-color - Background color of the active navmenuitem when hovered.\n * @cssproperty --mdc-navmenuitem-pressed-background-color - Background color of the navmenuitem when pressed.\n * @cssproperty --mdc-navmenuitem-pressed-active-background-color - Background color of the active navmenuitem when pressed.\n * @cssproperty --mdc-navmenuitem-disabled-background-color - Background color of the navmenuitem when disabled.\n * @cssproperty --mdc-navmenuitem-disabled-active-background-color - Background color of the active navmenuitem when disabled.\n * @cssproperty --mdc-navmenuitem-rest-active-background-color - Background color of the active nav item in its rest state.\n *\n * @csspart arrow - The arrow of the navmenuitem.\n * @csspart badge - The badge of the navmenuitem.\n * @csspart icon-container - The container of the icon.\n * @csspart text-container - The container of the text.\n * @csspart trailing-arrow - The trailing arrow of the navmenuitem.\n */",
+          "tagName": "mdc-option",
+          "jsDoc": "/**\n * Option component, which is used within Selectlistbox within Select component.\n *\n * The label and secondary label of the option can be set using the `label` and `secondaryLabel` properties respectively.\n * The `label` is the primary text displayed in the option, while the `secondaryLabel` is the secondary text displayed below the primary label.\n *\n * The `selected` property is used to indicate whether the option is selected or not.\n * When the `selected` property is set to true, a checkmark icon will be displayed\n * on the right side of the option to indicate that it is selected.\n *\n * The `prefixIcon` property can be used to display an icon on the left side of the option label.\n *\n * **Note**: If an option contains a long text, it is recommended to create a tooltip for the option that displays the full text on hover.\n * Consumers need to add a unique ID to this option 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 option using the `triggerID` attribute.\n *\n * @dependency mdc-icon\n * @dependency mdc-text\n *\n * @tagname mdc-option\n *\n * @event click - (React: onClick) This event is dispatched when the option is clicked.\n * @event keydown - (React: onKeyDown) This event is dispatched when a key is pressed down on the option.\n * @event keyup - (React: onKeyUp) This event is dispatched when a key is released on the option.\n * @event focus - (React: onFocus) This event is dispatched when the option receives focus.\n *\n * @cssproperty --mdc-listitem-column-gap - gap between columns in the option\n * @cssproperty --mdc-option-icon-width - width of the icon in the option\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 */",
           "customElement": true,
           "slots": [
             {
-              "description": "slot for menu item controls to appear of leading end.",
+              "description": "slot for list item controls to appear of leading end.",
               "name": "leading-controls",
               "inheritedFrom": {
                 "name": "ListItem",
@@ -29157,7 +29041,7 @@
               }
             },
             {
-              "description": "slot for menu item primary label.",
+              "description": "slot for list item primary label.",
               "name": "leading-text-primary-label",
               "inheritedFrom": {
                 "name": "ListItem",
@@ -29165,7 +29049,7 @@
               }
             },
             {
-              "description": "slot for menu item secondary label.",
+              "description": "slot for list item secondary label.",
               "name": "leading-text-secondary-label",
               "inheritedFrom": {
                 "name": "ListItem",
@@ -29173,7 +29057,7 @@
               }
             },
             {
-              "description": "slot for menu item tertiary label.",
+              "description": "slot for list item tertiary label.",
               "name": "leading-text-tertiary-label",
               "inheritedFrom": {
                 "name": "ListItem",
@@ -29181,7 +29065,7 @@
               }
             },
             {
-              "description": "slot for menu item side header text.",
+              "description": "slot for list item side header text.",
               "name": "trailing-text-side-header",
               "inheritedFrom": {
                 "name": "ListItem",
@@ -29189,7 +29073,7 @@
               }
             },
             {
-              "description": "slot for menu item subline text.",
+              "description": "slot for list item subline text.",
               "name": "trailing-text-subline",
               "inheritedFrom": {
                 "name": "ListItem",
@@ -29197,7 +29081,7 @@
               }
             },
             {
-              "description": "slot for menu item controls to appear of trailing end.",
+              "description": "slot for list item controls to appear of trailing end.",
               "name": "trailing-controls",
               "inheritedFrom": {
                 "name": "ListItem",
@@ -29220,176 +29104,64 @@
           "kind": "js",
           "name": "default",
           "declaration": {
-            "name": "NavMenuItem",
-            "module": "components/navmenuitem/navmenuitem.component.js"
+            "name": "Option",
+            "module": "components/option/option.component.js"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "components/optgroup/optgroup.component.js",
+      "path": "components/navmenuitem/navmenuitem.component.js",
       "declarations": [
         {
           "kind": "class",
-          "description": "optgroup component, which creates a grouping of mdc-option within a listbox element.",
-          "name": "OptGroup",
+          "description": "`mdc-navmenuitem` is a menuitem styled to work as a navigation tab.\nIt supports a leading icon, optional badge and dynamic text rendering.\n\nNote: `mdc-navmenuitem` is intended to be used inside `mdc-menubar` as part of the sideNavigation\ncomponent. Its structure, spacing, and interactions are designed to align with\nthe visual and functional requirements of side navigation layouts.\n\nBy providing the tooltip-text attribute, a tooltip will be displayed on hover of the navmenuitem. This tooltip is useful when an active navmenuitem is present within a submenu of the sidenavigation component.",
+          "name": "NavMenuItem",
           "cssProperties": [
             {
-              "description": "Allows customization of the disabled option color.",
-              "name": "--mdc-optgroup-disabled-color"
-            }
-          ],
-          "cssParts": [
-            {
-              "description": "The header text of the optgroup.",
-              "name": "header-text"
-            }
-          ],
-          "slots": [
-            {
-              "description": "This is a default slot for mdc-option elements.",
-              "name": "default"
-            }
-          ],
-          "members": [
-            {
-              "kind": "field",
-              "name": "label",
-              "type": {
-                "text": "string | undefined"
-              },
-              "description": "The header text to be displayed on the top of the options list.",
-              "attribute": "label",
-              "reflects": true
+              "description": "Text color of the navmenuitem in its normal state.",
+              "name": "--mdc-navmenuitem-color"
             },
             {
-              "kind": "method",
-              "name": "setDisabledForAllOptions",
-              "privacy": "private",
-              "return": {
-                "type": {
-                  "text": "void"
-                }
-              }
+              "description": "Border color of the navmenuitem in its normal state.",
+              "name": "--mdc-navmenuitem-border-color"
             },
             {
-              "kind": "field",
-              "name": "dataAriaLabel",
-              "type": {
-                "text": "string | null"
-              },
-              "default": "null",
-              "description": "Defines a string value that labels the current element.\nThe Aria-Label attribute to be set for accessibility.",
-              "attribute": "data-aria-label",
-              "reflects": true,
-              "inheritedFrom": {
-                "name": "DataAriaLabelMixin",
-                "module": "utils/mixins/DataAriaLabelMixin.js"
-              }
+              "description": "Text color of the navmenuitem when disabled.",
+              "name": "--mdc-navmenuitem-disabled-color"
             },
             {
-              "kind": "field",
-              "name": "disabled",
-              "type": {
-                "text": "boolean | undefined"
-              },
-              "description": "Indicates whether the component is disabled.\nWhen the component is disabled for user interaction; it is not focusable or clickable.",
-              "default": "undefined",
-              "attribute": "disabled",
-              "reflects": true,
-              "inheritedFrom": {
-                "name": "DisabledMixin",
-                "module": "utils/mixins/DisabledMixin.js"
-              }
-            }
-          ],
-          "attributes": [
+              "description": "Width of the navmenuitem when expanded.",
+              "name": "--mdc-navmenuitem-expanded-width"
+            },
             {
-              "name": "label",
-              "type": {
-                "text": "string | undefined"
-              },
-              "description": "The header text to be displayed on the top of the options list.",
-              "fieldName": "label"
+              "description": "Background color of the navmenuitem when hovered.",
+              "name": "--mdc-navmenuitem-hover-background-color"
             },
             {
-              "name": "data-aria-label",
-              "type": {
-                "text": "string | null"
-              },
-              "default": "null",
-              "description": "Defines a string value that labels the current element.\nThe Aria-Label attribute to be set for accessibility.",
-              "fieldName": "dataAriaLabel",
-              "inheritedFrom": {
-                "name": "DataAriaLabelMixin",
-                "module": "src/utils/mixins/DataAriaLabelMixin.ts"
-              }
+              "description": "Background color of the active navmenuitem when hovered.",
+              "name": "--mdc-navmenuitem-hover-active-background-color"
             },
             {
-              "name": "disabled",
-              "type": {
-                "text": "boolean | undefined"
-              },
-              "description": "Indicates whether the component is disabled.\nWhen the component is disabled for user interaction; it is not focusable or clickable.",
-              "default": "undefined",
-              "fieldName": "disabled",
-              "inheritedFrom": {
-                "name": "DisabledMixin",
-                "module": "src/utils/mixins/DisabledMixin.ts"
-              }
-            }
-          ],
-          "mixins": [
+              "description": "Background color of the navmenuitem when pressed.",
+              "name": "--mdc-navmenuitem-pressed-background-color"
+            },
             {
-              "name": "DataAriaLabelMixin",
-              "module": "/src/utils/mixins/DataAriaLabelMixin"
+              "description": "Background color of the active navmenuitem when pressed.",
+              "name": "--mdc-navmenuitem-pressed-active-background-color"
             },
             {
-              "name": "DisabledMixin",
-              "module": "/src/utils/mixins/DisabledMixin"
-            }
-          ],
-          "superclass": {
-            "name": "Component",
-            "module": "/src/models"
-          },
-          "tagName": "mdc-optgroup",
-          "jsDoc": "/**\n * optgroup component, which creates a grouping of mdc-option within a listbox element.\n *\n * @dependency mdc-text\n *\n * @tagname mdc-optgroup\n *\n * @slot default - This is a default slot for mdc-option elements.\n *\n * @cssproperty --mdc-optgroup-disabled-color - Allows customization of the disabled option color.\n *\n * @csspart header-text - The header text of the optgroup.\n */",
-          "customElement": true
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "default",
-          "declaration": {
-            "name": "OptGroup",
-            "module": "components/optgroup/optgroup.component.js"
-          }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "components/option/option.component.js",
-      "declarations": [
-        {
-          "kind": "class",
-          "description": "Option component, which is used within Selectlistbox within Select component.\n\nThe label and secondary label of the option can be set using the `label` and `secondaryLabel` properties respectively.\nThe `label` is the primary text displayed in the option, while the `secondaryLabel` is the secondary text displayed below the primary label.\n\nThe `selected` property is used to indicate whether the option is selected or not.\nWhen the `selected` property is set to true, a checkmark icon will be displayed\non the right side of the option to indicate that it is selected.\n\nThe `prefixIcon` property can be used to display an icon on the left side of the option label.\n\n**Note**: If an option contains a long text, it is recommended to create a tooltip for the option that displays the full text on hover.\nConsumers need to add a unique ID to this option 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 option using the `triggerID` attribute.",
-          "name": "Option",
-          "cssProperties": [
+              "description": "Background color of the navmenuitem when disabled.",
+              "name": "--mdc-navmenuitem-disabled-background-color"
+            },
             {
-              "description": "gap between columns in the option",
-              "name": "--mdc-listitem-column-gap",
-              "inheritedFrom": {
-                "name": "ListItem",
-                "module": "src/components/listitem/listitem.component.ts"
-              }
+              "description": "Background color of the active navmenuitem when disabled.",
+              "name": "--mdc-navmenuitem-disabled-active-background-color"
             },
             {
-              "description": "width of the icon in the option",
-              "name": "--mdc-option-icon-width"
+              "description": "Background color of the active nav item in its rest state.",
+              "name": "--mdc-navmenuitem-rest-active-background-color"
             },
             {
               "description": "Allows customization of the default background color.",
@@ -29439,6 +29211,14 @@
                 "module": "src/components/listitem/listitem.component.ts"
               }
             },
+            {
+              "description": "Allows customization of column gap.",
+              "name": "--mdc-listitem-column-gap",
+              "inheritedFrom": {
+                "name": "ListItem",
+                "module": "src/components/listitem/listitem.component.ts"
+              }
+            },
             {
               "description": "Allows customization of padding left and right.",
               "name": "--mdc-listitem-padding-left-right",
@@ -29481,6 +29261,30 @@
             }
           ],
           "cssParts": [
+            {
+              "description": "The arrow of the navmenuitem.",
+              "name": "arrow"
+            },
+            {
+              "description": "The badge of the navmenuitem.",
+              "name": "badge"
+            },
+            {
+              "description": "The container of the icon.",
+              "name": "icon-container"
+            },
+            {
+              "description": "The container of the text.",
+              "name": "text-container"
+            },
+            {
+              "description": "The trailing arrow of the navmenuitem.",
+              "name": "trailing-arrow",
+              "inheritedFrom": {
+                "name": "MenuItem",
+                "module": "src/components/menuitem/menuitem.component.ts"
+              }
+            },
             {
               "description": "Allows customization of the leading part.",
               "name": "leading",
@@ -29489,6 +29293,14 @@
                 "module": "src/components/listitem/listitem.component.ts"
               }
             },
+            {
+              "description": "Allows customization of leading arrow icon.",
+              "name": "leading-arrow",
+              "inheritedFrom": {
+                "name": "MenuItem",
+                "module": "src/components/menuitem/menuitem.component.ts"
+              }
+            },
             {
               "description": "Allows customization of the leading text part.",
               "name": "leading-text",
@@ -29517,23 +29329,55 @@
           "members": [
             {
               "kind": "field",
-              "name": "selected",
+              "name": "active",
               "type": {
-                "text": "boolean"
+                "text": "boolean | undefined"
               },
-              "default": "false",
-              "description": "The selected attribute is used to indicate that the option is selected.",
-              "attribute": "selected",
+              "description": "The navmenuitem's active state indicates whether it is currently toggled on (active) or off (inactive).\nWhen the active state is true, the navmenuitem is considered to be in an active state, meaning it is toggled on.\nConversely, when the active state is false, the navmenuitem is in an inactive state, indicating it is toggled off.",
+              "default": "undefined",
+              "attribute": "active",
               "reflects": true
             },
             {
               "kind": "field",
-              "name": "prefixIcon",
+              "name": "badgeType",
               "type": {
-                "text": "IconNames | undefined"
+                "text": "BadgeType | undefined"
               },
-              "description": "The prefix icon attribute is used to display the icon name on the left of the option label.",
-              "attribute": "prefix-icon",
+              "description": "Type of the badge\nCan be `dot` (notification) or `counter`.",
+              "attribute": "badge-type",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "counter",
+              "type": {
+                "text": "number | undefined"
+              },
+              "description": "Counter is the number which can be provided in the badge.",
+              "attribute": "counter",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "maxCounter",
+              "type": {
+                "text": "number"
+              },
+              "description": "The maximum number can be set up to 999, anything above that will be rendered as _999+_.\nThe max counter can be `9`, `99` or `999`.",
+              "default": "99",
+              "attribute": "max-counter",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "navId",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "Id of the navMenuItem (used as a identificator when used in the menubar)\nNote: It has to be unique.",
+              "default": "undefined",
+              "attribute": "nav-id",
               "reflects": true
             },
             {
@@ -29543,108 +29387,249 @@
                 "text": "string | null"
               },
               "default": "null",
-              "description": "Any additional description can be provided here for screen readers.",
-              "attribute": "aria-label",
+              "description": "Aria-label attribute to be set for accessibility",
+              "attribute": "aria-label"
+            },
+            {
+              "kind": "field",
+              "name": "disableAriaCurrent",
+              "type": {
+                "text": "boolean | undefined"
+              },
+              "description": "When set to true, prevents the automatic setting of the `aria-current` attribute on the navmenuitem\nwhen it becomes active. This is useful for cases where you want to maintain the visual active styling\nbut need to handle aria-current attribute differently or not at all.\nThe active button styling will still be applied regardless of this setting.",
+              "attribute": "disable-aria-current",
               "reflects": true
             },
             {
               "kind": "field",
-              "name": "name",
+              "name": "tooltipText",
               "type": {
-                "text": "string"
+                "text": "string | undefined"
               },
-              "default": "''",
-              "description": "Indicates the name of the component group.\nThey are used to group elements in a form together.",
-              "attribute": "name",
+              "description": "The tooltip text is displayed on hover of the list item.",
+              "attribute": "tooltip-text",
+              "reflects": true
+            },
+            {
+              "kind": "method",
+              "name": "removeTooltip",
+              "privacy": "private"
+            },
+            {
+              "kind": "method",
+              "name": "renderDynamicTooltip",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              }
+            },
+            {
+              "kind": "method",
+              "name": "isNested",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "boolean"
+                }
+              },
+              "description": "Check whether the navmenuitem is inside a nested nav structure.\nReturns `true` if there is a parent `mdc-menupopover`\nThis method assumes nesting implies deeper levels of nav hierarchy."
+            },
+            {
+              "kind": "method",
+              "name": "handleClickEvent",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              }
+            },
+            {
+              "kind": "method",
+              "name": "renderTextLabel",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "label",
+                  "type": {
+                    "text": "string | undefined"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "renderArrowIcon",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "showLabel",
+                  "type": {
+                    "text": "boolean | undefined"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "renderBadge",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "showLabel",
+                  "type": {
+                    "text": "boolean | undefined"
+                  }
+                }
+              ]
+            },
+            {
+              "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": "arrowPosition",
+              "type": {
+                "text": "ArrowPositions | undefined"
+              },
+              "description": "Defines where the arrow icon will appear.\n- `'leading'`: Icon appears on the leading edge (start).\n- `'trailing'`: Icon appears on the trailing edge (end).\n\nIf not set, no arrow is displayed.",
+              "attribute": "arrow-position",
               "reflects": true,
               "inheritedFrom": {
-                "name": "FormInternalsMixin",
-                "module": "utils/mixins/FormInternalsMixin.js"
+                "name": "MenuItem",
+                "module": "components/menuitem/menuitem.component.js"
               }
             },
             {
               "kind": "field",
-              "name": "value",
+              "name": "arrowDirection",
               "type": {
-                "text": "string"
+                "text": "ArrowDirections | undefined"
               },
-              "default": "''",
-              "description": "Indicates the value of the component group (ex: input, checkbox, radio, select etc...)",
-              "attribute": "value",
+              "description": "Defines the direction the arrow icon points.\n- `'positive'`: Arrow points toward the trailing side.\n- `'negative'`: Arrow points toward the leading side.",
+              "attribute": "arrow-direction",
               "reflects": true,
               "inheritedFrom": {
-                "name": "FormInternalsMixin",
-                "module": "utils/mixins/FormInternalsMixin.js"
+                "name": "MenuItem",
+                "module": "components/menuitem/menuitem.component.js"
               }
             },
             {
               "kind": "field",
-              "name": "validationMessage",
+              "name": "name",
               "type": {
                 "text": "string | undefined"
               },
-              "description": "Custom validation message that will override the default message and displayed when the input is invalid.\n\nTo display custom validation messages, you must listen for input events (or other relevant events)\non your component and update the `validationMessage` property with the desired message string.\nUpdating this property will ensure that new validation messages are shown to the user.\n- The `validationMessage` property overrides the default browser validation message when set.\n- Consumers are responsible for updating `validationMessage` in response to input or validation state changes.",
-              "attribute": "validation-message",
+              "description": "The name attribute is used to identify the menu item when it is selected.",
+              "attribute": "name",
               "reflects": true,
               "inheritedFrom": {
-                "name": "FormInternalsMixin",
-                "module": "utils/mixins/FormInternalsMixin.js"
+                "name": "MenuItem",
+                "module": "components/menuitem/menuitem.component.js"
               }
             },
             {
               "kind": "field",
-              "name": "validity",
+              "name": "value",
               "type": {
-                "text": "ValidityState"
+                "text": "string | undefined"
               },
-              "readonly": true,
+              "description": "The value attribute is used to represent a value when the menu item is selected.\nIt is typically used with checkbox and radio menu items, but can be handy for any menu item.",
+              "attribute": "value",
+              "reflects": true,
               "inheritedFrom": {
-                "name": "FormInternalsMixin",
-                "module": "utils/mixins/FormInternalsMixin.js"
+                "name": "MenuItem",
+                "module": "components/menuitem/menuitem.component.js"
               }
             },
             {
-              "kind": "field",
-              "name": "willValidate",
-              "readonly": true,
+              "kind": "method",
+              "name": "handleKeyDown",
+              "privacy": "protected",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "event",
+                  "type": {
+                    "text": "KeyboardEvent"
+                  },
+                  "description": "The keyboard event that triggered the action."
+                }
+              ],
+              "description": "Handles the keydown event for the menu item.\nIf the Enter key is pressed, it triggers a click event on the menu item.\nThis allows keyboard users to activate the menu item using the Enter key.\n\nThis follows the native behaviour, actionable element can be triggered by Enter\nkey on the keydown event.\n\nNote: Action triggered by Space on the keyup event.",
               "inheritedFrom": {
-                "name": "FormInternalsMixin",
-                "module": "utils/mixins/FormInternalsMixin.js"
+                "name": "ListItem",
+                "module": "components/listitem/listitem.component.js"
+              }
+            },
+            {
+              "kind": "method",
+              "name": "handleKeyUp",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "event",
+                  "type": {
+                    "text": "KeyboardEvent"
+                  },
+                  "description": "The keyboard event that triggered the action."
+                }
+              ],
+              "description": "Handles the keyup event for the menu item.\nIf the Space key is released, it triggers a click event on the menu item.\nThis allows keyboard users to activate the menu item using the Space key.\nIt also prevents the default action of the Space key to avoid scrolling the page.\n\nThis follows the native behaviour, actionable element can be triggered by Space\nkey on the keyup event.\n\nNote: Action triggered by Enter on the keydown event.",
+              "inheritedFrom": {
+                "name": "MenuItem",
+                "module": "components/menuitem/menuitem.component.js"
               }
             },
             {
               "kind": "method",
-              "name": "setValidity",
-              "description": "Sets the validity of the input field based on the input field's validity.",
+              "name": "renderTrailingControls",
+              "privacy": "protected",
+              "description": "Renders the trailing controls slot and optionally the trailing arrow icon,\nbased on `arrowPosition` and `arrowDirection`.",
               "return": {
                 "type": {
                   "text": ""
                 }
               },
               "inheritedFrom": {
-                "name": "FormInternalsMixin",
-                "module": "utils/mixins/FormInternalsMixin.js"
+                "name": "ListItem",
+                "module": "components/listitem/listitem.component.js"
               }
             },
             {
               "kind": "method",
-              "name": "checkValidity",
+              "name": "renderLeadingControls",
+              "privacy": "protected",
+              "description": "Renders the leading controls slot and optionally the leading arrow icon,\nbased on `arrowPosition` and `arrowDirection`.",
               "return": {
                 "type": {
-                  "text": "boolean"
+                  "text": ""
                 }
               },
               "inheritedFrom": {
-                "name": "FormInternalsMixin",
-                "module": "utils/mixins/FormInternalsMixin.js"
-              }
-            },
-            {
-              "kind": "method",
-              "name": "reportValidity",
-              "inheritedFrom": {
-                "name": "FormInternalsMixin",
-                "module": "utils/mixins/FormInternalsMixin.js"
+                "name": "ListItem",
+                "module": "components/listitem/listitem.component.js"
               }
             },
             {
@@ -29801,30 +29786,6 @@
                 "module": "components/listitem/listitem.component.js"
               }
             },
-            {
-              "kind": "method",
-              "name": "handleKeyDown",
-              "privacy": "protected",
-              "return": {
-                "type": {
-                  "text": "void"
-                }
-              },
-              "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.",
-              "inheritedFrom": {
-                "name": "ListItem",
-                "module": "components/listitem/listitem.component.js"
-              }
-            },
             {
               "kind": "method",
               "name": "triggerClickEvent",
@@ -29913,36 +29874,6 @@
                 "module": "components/listitem/listitem.component.js"
               }
             },
-            {
-              "kind": "method",
-              "name": "renderTrailingControls",
-              "privacy": "protected",
-              "description": "Renders the trailing controls slot.",
-              "return": {
-                "type": {
-                  "text": ""
-                }
-              },
-              "inheritedFrom": {
-                "name": "ListItem",
-                "module": "components/listitem/listitem.component.js"
-              }
-            },
-            {
-              "kind": "method",
-              "name": "renderLeadingControls",
-              "privacy": "protected",
-              "description": "Renders the leading controls slot.",
-              "return": {
-                "type": {
-                  "text": ""
-                }
-              },
-              "inheritedFrom": {
-                "name": "ListItem",
-                "module": "components/listitem/listitem.component.js"
-              }
-            },
             {
               "kind": "method",
               "name": "stopEventPropagation",
@@ -29970,7 +29901,7 @@
           ],
           "events": [
             {
-              "description": "(React: onClick) This event is dispatched when the option is clicked.",
+              "description": "(React: onClick) This event is dispatched when the navmenuitem is clicked.",
               "name": "click",
               "reactName": "onClick",
               "inheritedFrom": {
@@ -29979,7 +29910,7 @@
               }
             },
             {
-              "description": "(React: onKeyDown) This event is dispatched when a key is pressed down on the option.",
+              "description": "(React: onKeyDown) This event is dispatched when a key is pressed down on the navmenuitem.",
               "name": "keydown",
               "reactName": "onKeyDown",
               "inheritedFrom": {
@@ -29988,7 +29919,7 @@
               }
             },
             {
-              "description": "(React: onKeyUp) This event is dispatched when a key is released on the option.",
+              "description": "(React: onKeyUp) This event is dispatched when a key is released on the navmenuitem.",
               "name": "keyup",
               "reactName": "onKeyUp",
               "inheritedFrom": {
@@ -29997,7 +29928,7 @@
               }
             },
             {
-              "description": "(React: onFocus) This event is dispatched when the option receives focus.",
+              "description": "(React: onFocus) This event is dispatched when the navmenuitem receives focus.",
               "name": "focus",
               "reactName": "onFocus",
               "inheritedFrom": {
@@ -30006,7 +29937,12 @@
               }
             },
             {
-              "description": "(React: onEnabled) This event is dispatched after the listitem is enabled",
+              "description": "(React: onActiveChange) Dispatched when the active state of the navmenuitem changes.",
+              "name": "activechange",
+              "reactName": "onActiveChange"
+            },
+            {
+              "description": "(React: onEnabled) This event is dispatched after the menuitem is enabled",
               "name": "enabled",
               "reactName": "onEnabled",
               "inheritedFrom": {
@@ -30015,7 +29951,7 @@
               }
             },
             {
-              "description": "(React: onDisabled) This event is dispatched after the listitem is disabled",
+              "description": "(React: onDisabled) This event is dispatched after the menuitem is disabled",
               "name": "disabled",
               "reactName": "onDisabled",
               "inheritedFrom": {
@@ -30024,7 +29960,7 @@
               }
             },
             {
-              "description": "(React: onCreated) This event is dispatched after the listitem is created (added to the DOM)",
+              "description": "(React: onCreated) This event is dispatched after the menuitem is created (added to the DOM)",
               "name": "created",
               "reactName": "onCreated",
               "inheritedFrom": {
@@ -30033,7 +29969,7 @@
               }
             },
             {
-              "description": "(React: onDestroyed) This event is dispatched after the listitem is destroyed (removed from the DOM)",
+              "description": "(React: onDestroyed) This event is dispatched after the menuitem is destroyed (removed from the DOM)",
               "name": "destroyed",
               "reactName": "onDestroyed",
               "inheritedFrom": {
@@ -30044,21 +29980,47 @@
           ],
           "attributes": [
             {
-              "name": "selected",
+              "name": "active",
               "type": {
-                "text": "boolean"
+                "text": "boolean | undefined"
               },
-              "default": "false",
-              "description": "The selected attribute is used to indicate that the option is selected.",
-              "fieldName": "selected"
+              "description": "The navmenuitem's active state indicates whether it is currently toggled on (active) or off (inactive).\nWhen the active state is true, the navmenuitem is considered to be in an active state, meaning it is toggled on.\nConversely, when the active state is false, the navmenuitem is in an inactive state, indicating it is toggled off.",
+              "default": "undefined",
+              "fieldName": "active"
             },
             {
-              "name": "prefix-icon",
+              "name": "badge-type",
               "type": {
-                "text": "IconNames | undefined"
+                "text": "BadgeType | undefined"
               },
-              "description": "The prefix icon attribute is used to display the icon name on the left of the option label.",
-              "fieldName": "prefixIcon"
+              "description": "Type of the badge\nCan be `dot` (notification) or `counter`.",
+              "fieldName": "badgeType"
+            },
+            {
+              "name": "counter",
+              "type": {
+                "text": "number | undefined"
+              },
+              "description": "Counter is the number which can be provided in the badge.",
+              "fieldName": "counter"
+            },
+            {
+              "name": "max-counter",
+              "type": {
+                "text": "number"
+              },
+              "description": "The maximum number can be set up to 999, anything above that will be rendered as _999+_.\nThe max counter can be `9`, `99` or `999`.",
+              "default": "99",
+              "fieldName": "maxCounter"
+            },
+            {
+              "name": "nav-id",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "Id of the navMenuItem (used as a identificator when used in the menubar)\nNote: It has to be unique.",
+              "default": "undefined",
+              "fieldName": "navId"
             },
             {
               "name": "aria-label",
@@ -30066,45 +30028,83 @@
                 "text": "string | null"
               },
               "default": "null",
-              "description": "Any additional description can be provided here for screen readers.",
+              "description": "Aria-label attribute to be set for accessibility",
               "fieldName": "ariaLabel"
             },
             {
-              "name": "name",
+              "name": "disable-aria-current",
               "type": {
-                "text": "string"
+                "text": "boolean | undefined"
               },
-              "default": "''",
-              "description": "Indicates the name of the component group.\nThey are used to group elements in a form together.",
-              "fieldName": "name",
+              "description": "When set to true, prevents the automatic setting of the `aria-current` attribute on the navmenuitem\nwhen it becomes active. This is useful for cases where you want to maintain the visual active styling\nbut need to handle aria-current attribute differently or not at all.\nThe active button styling will still be applied regardless of this setting.",
+              "fieldName": "disableAriaCurrent"
+            },
+            {
+              "name": "tooltip-text",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "The tooltip text is displayed on hover of the list item.",
+              "fieldName": "tooltipText"
+            },
+            {
+              "name": "icon-name",
+              "type": {
+                "text": "IconNames | undefined"
+              },
+              "description": "Name of the icon (= filename).\n\nIf no `icon-name` is provided, no icon will be rendered.",
+              "fieldName": "iconName",
               "inheritedFrom": {
-                "name": "FormInternalsMixin",
-                "module": "src/utils/mixins/FormInternalsMixin.ts"
+                "name": "IconNameMixin",
+                "module": "src/utils/mixins/IconNameMixin.ts"
               }
             },
             {
-              "name": "value",
+              "name": "arrow-position",
               "type": {
-                "text": "string"
+                "text": "ArrowPositions | undefined"
               },
-              "default": "''",
-              "description": "Indicates the value of the component group (ex: input, checkbox, radio, select etc...)",
-              "fieldName": "value",
+              "description": "Defines where the arrow icon will appear.\n- `'leading'`: Icon appears on the leading edge (start).\n- `'trailing'`: Icon appears on the trailing edge (end).\n\nIf not set, no arrow is displayed.",
+              "fieldName": "arrowPosition",
               "inheritedFrom": {
-                "name": "FormInternalsMixin",
-                "module": "src/utils/mixins/FormInternalsMixin.ts"
+                "name": "MenuItem",
+                "module": "src/components/menuitem/menuitem.component.ts"
               }
             },
             {
-              "name": "validation-message",
+              "name": "arrow-direction",
+              "type": {
+                "text": "ArrowDirections | undefined"
+              },
+              "description": "Defines the direction the arrow icon points.\n- `'positive'`: Arrow points toward the trailing side.\n- `'negative'`: Arrow points toward the leading side.",
+              "fieldName": "arrowDirection",
+              "inheritedFrom": {
+                "name": "MenuItem",
+                "module": "src/components/menuitem/menuitem.component.ts"
+              }
+            },
+            {
+              "name": "name",
               "type": {
                 "text": "string | undefined"
               },
-              "description": "Custom validation message that will override the default message and displayed when the input is invalid.\n\nTo display custom validation messages, you must listen for input events (or other relevant events)\non your component and update the `validationMessage` property with the desired message string.\nUpdating this property will ensure that new validation messages are shown to the user.\n- The `validationMessage` property overrides the default browser validation message when set.\n- Consumers are responsible for updating `validationMessage` in response to input or validation state changes.",
-              "fieldName": "validationMessage",
+              "description": "The name attribute is used to identify the menu item when it is selected.",
+              "fieldName": "name",
               "inheritedFrom": {
-                "name": "FormInternalsMixin",
-                "module": "src/utils/mixins/FormInternalsMixin.ts"
+                "name": "MenuItem",
+                "module": "src/components/menuitem/menuitem.component.ts"
+              }
+            },
+            {
+              "name": "value",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "The value attribute is used to represent a value when the menu item is selected.\nIt is typically used with checkbox and radio menu items, but can be handy for any menu item.",
+              "fieldName": "value",
+              "inheritedFrom": {
+                "name": "MenuItem",
+                "module": "src/components/menuitem/menuitem.component.ts"
               }
             },
             {
@@ -30222,20 +30222,20 @@
           ],
           "mixins": [
             {
-              "name": "FormInternalsMixin",
-              "module": "/src/utils/mixins/FormInternalsMixin"
+              "name": "IconNameMixin",
+              "module": "/src/utils/mixins/IconNameMixin"
             }
           ],
           "superclass": {
-            "name": "ListItem",
-            "module": "/src/components/listitem/listitem.component"
+            "name": "MenuItem",
+            "module": "/src/components/menuitem/menuitem.component"
           },
-          "tagName": "mdc-option",
-          "jsDoc": "/**\n * Option component, which is used within Selectlistbox within Select component.\n *\n * The label and secondary label of the option can be set using the `label` and `secondaryLabel` properties respectively.\n * The `label` is the primary text displayed in the option, while the `secondaryLabel` is the secondary text displayed below the primary label.\n *\n * The `selected` property is used to indicate whether the option is selected or not.\n * When the `selected` property is set to true, a checkmark icon will be displayed\n * on the right side of the option to indicate that it is selected.\n *\n * The `prefixIcon` property can be used to display an icon on the left side of the option label.\n *\n * **Note**: If an option contains a long text, it is recommended to create a tooltip for the option that displays the full text on hover.\n * Consumers need to add a unique ID to this option 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 option using the `triggerID` attribute.\n *\n * @dependency mdc-icon\n * @dependency mdc-text\n *\n * @tagname mdc-option\n *\n * @event click - (React: onClick) This event is dispatched when the option is clicked.\n * @event keydown - (React: onKeyDown) This event is dispatched when a key is pressed down on the option.\n * @event keyup - (React: onKeyUp) This event is dispatched when a key is released on the option.\n * @event focus - (React: onFocus) This event is dispatched when the option receives focus.\n *\n * @cssproperty --mdc-listitem-column-gap - gap between columns in the option\n * @cssproperty --mdc-option-icon-width - width of the icon in the option\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 */",
+          "tagName": "mdc-navmenuitem",
+          "jsDoc": "/**\n * `mdc-navmenuitem` is a menuitem styled to work as a navigation tab.\n * It supports a leading icon, optional badge and dynamic text rendering.\n *\n * Note: `mdc-navmenuitem` is intended to be used inside `mdc-menubar` as part of the sideNavigation\n * component. Its structure, spacing, and interactions are designed to align with\n * the visual and functional requirements of side navigation layouts.\n *\n * By providing the tooltip-text attribute, a tooltip will be displayed on hover of the navmenuitem. This tooltip is useful when an active navmenuitem is present within a submenu of the sidenavigation component.\n *\n * @tagname mdc-navmenuitem\n *\n * @dependency mdc-icon\n * @dependency mdc-text\n * @dependency mdc-badge\n * @dependency mdc-tooltip\n *\n * @event click - (React: onClick) This event is dispatched when the navmenuitem is clicked.\n * @event keydown - (React: onKeyDown) This event is dispatched when a key is pressed down on the navmenuitem.\n * @event keyup - (React: onKeyUp) This event is dispatched when a key is released on the navmenuitem.\n * @event focus - (React: onFocus) This event is dispatched when the navmenuitem receives focus.\n * @event activechange - (React: onActiveChange) Dispatched when the active state of the navmenuitem changes.\n *\n * @cssproperty --mdc-navmenuitem-color - Text color of the navmenuitem in its normal state.\n * @cssproperty --mdc-navmenuitem-border-color - Border color of the navmenuitem in its normal state.\n * @cssproperty --mdc-navmenuitem-disabled-color - Text color of the navmenuitem when disabled.\n * @cssproperty --mdc-navmenuitem-expanded-width - Width of the navmenuitem when expanded.\n * @cssproperty --mdc-navmenuitem-hover-background-color - Background color of the navmenuitem when hovered.\n * @cssproperty --mdc-navmenuitem-hover-active-background-color - Background color of the active navmenuitem when hovered.\n * @cssproperty --mdc-navmenuitem-pressed-background-color - Background color of the navmenuitem when pressed.\n * @cssproperty --mdc-navmenuitem-pressed-active-background-color - Background color of the active navmenuitem when pressed.\n * @cssproperty --mdc-navmenuitem-disabled-background-color - Background color of the navmenuitem when disabled.\n * @cssproperty --mdc-navmenuitem-disabled-active-background-color - Background color of the active navmenuitem when disabled.\n * @cssproperty --mdc-navmenuitem-rest-active-background-color - Background color of the active nav item in its rest state.\n *\n * @csspart arrow - The arrow of the navmenuitem.\n * @csspart badge - The badge of the navmenuitem.\n * @csspart icon-container - The container of the icon.\n * @csspart text-container - The container of the text.\n * @csspart trailing-arrow - The trailing arrow of the navmenuitem.\n */",
           "customElement": true,
           "slots": [
             {
-              "description": "slot for list item controls to appear of leading end.",
+              "description": "slot for menu item controls to appear of leading end.",
               "name": "leading-controls",
               "inheritedFrom": {
                 "name": "ListItem",
@@ -30243,7 +30243,7 @@
               }
             },
             {
-              "description": "slot for list item primary label.",
+              "description": "slot for menu item primary label.",
               "name": "leading-text-primary-label",
               "inheritedFrom": {
                 "name": "ListItem",
@@ -30251,7 +30251,7 @@
               }
             },
             {
-              "description": "slot for list item secondary label.",
+              "description": "slot for menu item secondary label.",
               "name": "leading-text-secondary-label",
               "inheritedFrom": {
                 "name": "ListItem",
@@ -30259,7 +30259,7 @@
               }
             },
             {
-              "description": "slot for list item tertiary label.",
+              "description": "slot for menu item tertiary label.",
               "name": "leading-text-tertiary-label",
               "inheritedFrom": {
                 "name": "ListItem",
@@ -30267,7 +30267,7 @@
               }
             },
             {
-              "description": "slot for list item side header text.",
+              "description": "slot for menu item side header text.",
               "name": "trailing-text-side-header",
               "inheritedFrom": {
                 "name": "ListItem",
@@ -30275,7 +30275,7 @@
               }
             },
             {
-              "description": "slot for list item subline text.",
+              "description": "slot for menu item subline text.",
               "name": "trailing-text-subline",
               "inheritedFrom": {
                 "name": "ListItem",
@@ -30283,7 +30283,7 @@
               }
             },
             {
-              "description": "slot for list item controls to appear of trailing end.",
+              "description": "slot for menu item controls to appear of trailing end.",
               "name": "trailing-controls",
               "inheritedFrom": {
                 "name": "ListItem",
@@ -30306,8 +30306,8 @@
           "kind": "js",
           "name": "default",
           "declaration": {
-            "name": "Option",
-            "module": "components/option/option.component.js"
+            "name": "NavMenuItem",
+            "module": "components/navmenuitem/navmenuitem.component.js"
           }
         }
       ]