@momentum-design/components 0.120.36 → 0.120.37

package/dist/custom-elements.json

@@ -37660,6 +37660,211 @@
         }
       ]
     },
+    {
+      "kind": "javascript-module",
+      "path": "components/screenreaderannouncer/screenreaderannouncer.component.js",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "`mdc-screenreaderannouncer` can be used to announce messages with the screen reader.\n\nTo make an announcement set `announcement` attribute on the `mdc-screenreaderannouncer` element.\n\n**Internal logic**\n\nWhen the screenreader announcer is connected to the DOM, if the `identity` attribute is not\nprovided, it is set to `mdc-screenreaderannouncer-identity` and a `<div>` element with this id is created\nin the DOM. If the `identity` attribute is provided, the identity element is used and no new element\nis created in the DOM.\n\nWhen the `announcement` attribute is set, the screenreader announcer will create a `<div>` element with\n`aria-live` attribute set to the value of `data-aria-live` attribute and append it to the `identity` element.\nAfter delay of `delay` milliseconds, a <p> element with the announcement text is appended to the `<div>` element.\n\nThe announcement `<div>` element is removed from the DOM after `timeout` milliseconds.\n\nWhen the screen announcer component is disconnected from the DOM, all the timeouts are cleared and\nall the announcement elements added are removed from the DOM and timeouts cleared.\n\n**Note**\n1. The default delay of 150 miliseconds is used as we dynamically generate the\naria-live region in the DOM and add the announcement text to it.\n3. If no `identity` is provided, all the screen reader components will create and use only one\n`<div>` element with id `mdc-screenreaderannouncer-identity` in the DOM.\n\nReference: https://patrickhlauke.github.io/aria/tests/live-regions/",
+          "name": "ScreenreaderAnnouncer",
+          "members": [
+            {
+              "kind": "field",
+              "name": "announcement",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "description": "The announcement attribute is a string that is used to announce messages to the screen reader.\nThe announcement is made when the announcement attribute is set to a non-empty string.",
+              "attribute": "announcement",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "identity",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "description": "The id of the element in the light dom, to which announcement elements will be appended.\n\nIf id is not provided, it will be set to `mdc-screenreaderannouncer-identity` and\na div element with this id will be created in the light dom.",
+              "attribute": "identity",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "dataAriaLive",
+              "type": {
+                "text": "AriaLive"
+              },
+              "description": "Aria live value for announcement.",
+              "default": "'polite'",
+              "attribute": "data-aria-live",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "delay",
+              "type": {
+                "text": "number"
+              },
+              "description": "Milliseconds to wait before adding the announcement to the identiy region in\nDOM, which will announce the message to the screen reader.",
+              "default": "150",
+              "attribute": "delay",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "timeout",
+              "type": {
+                "text": "number"
+              },
+              "description": "Milliseconds to wait after which the announcement element will be removed from\nidentity region in DOM, causing the screen reader to not announcing the message.",
+              "default": "20_000",
+              "attribute": "timeout",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "debounceTime",
+              "type": {
+                "text": "number"
+              },
+              "description": "The debounce time delay in milliseconds for announcements.",
+              "default": "500",
+              "attribute": "debounce-time",
+              "reflects": true
+            },
+            {
+              "kind": "method",
+              "name": "announce",
+              "parameters": [
+                {
+                  "name": "announcement",
+                  "type": {
+                    "text": "string"
+                  },
+                  "description": "The announcement to be made."
+                },
+                {
+                  "name": "delay",
+                  "type": {
+                    "text": "number"
+                  },
+                  "description": "The delay in milliseconds before announcing the message."
+                },
+                {
+                  "name": "timeout",
+                  "type": {
+                    "text": "number"
+                  },
+                  "description": "The timeout in milliseconds before removing the announcement."
+                },
+                {
+                  "name": "ariaLive",
+                  "type": {
+                    "text": "AriaLive"
+                  },
+                  "description": "The aria live value for the announcement."
+                }
+              ],
+              "description": "Announces the given announcement to the screen reader.\n\nA div element with aria-live attribute set to the given ariaLive value is created\nand a p element with the announcement text is appended to it.\n\nThe div element is appended to the element in the DOM identified with id as\nidentity attribute."
+            },
+            {
+              "kind": "method",
+              "name": "clearTimeOutsAndAnnouncements",
+              "privacy": "private",
+              "description": "Clears all timeouts and removes all announcements from the screen reader."
+            },
+            {
+              "kind": "method",
+              "name": "createAnnouncementAriaLiveRegion",
+              "privacy": "private",
+              "description": "Creates a div element with id as identity attribute in the DOM.\n\nIf the identity attribute is not provided, it is set internally to\n`mdc-screenreaderannouncer-identity`."
+            },
+            {
+              "kind": "method",
+              "name": "setupDebouncedAnnounce",
+              "privacy": "private",
+              "description": "Creates a single debounced function that will read the latest this.announcement when executed.\n\nThis function is used to debounce the announcement so that it will only be made after\nthis.debounceTime milliseconds have passed since the last time this.announcement was updated."
+            }
+          ],
+          "attributes": [
+            {
+              "name": "announcement",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "description": "The announcement attribute is a string that is used to announce messages to the screen reader.\nThe announcement is made when the announcement attribute is set to a non-empty string.",
+              "fieldName": "announcement"
+            },
+            {
+              "name": "identity",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "description": "The id of the element in the light dom, to which announcement elements will be appended.\n\nIf id is not provided, it will be set to `mdc-screenreaderannouncer-identity` and\na div element with this id will be created in the light dom.",
+              "fieldName": "identity"
+            },
+            {
+              "name": "data-aria-live",
+              "type": {
+                "text": "AriaLive"
+              },
+              "description": "Aria live value for announcement.",
+              "default": "'polite'",
+              "fieldName": "dataAriaLive"
+            },
+            {
+              "name": "delay",
+              "type": {
+                "text": "number"
+              },
+              "description": "Milliseconds to wait before adding the announcement to the identiy region in\nDOM, which will announce the message to the screen reader.",
+              "default": "150",
+              "fieldName": "delay"
+            },
+            {
+              "name": "timeout",
+              "type": {
+                "text": "number"
+              },
+              "description": "Milliseconds to wait after which the announcement element will be removed from\nidentity region in DOM, causing the screen reader to not announcing the message.",
+              "default": "20_000",
+              "fieldName": "timeout"
+            },
+            {
+              "name": "debounce-time",
+              "type": {
+                "text": "number"
+              },
+              "description": "The debounce time delay in milliseconds for announcements.",
+              "default": "500",
+              "fieldName": "debounceTime"
+            }
+          ],
+          "superclass": {
+            "name": "Component",
+            "module": "/src/models"
+          },
+          "tagName": "mdc-screenreaderannouncer",
+          "jsDoc": "/**\n * `mdc-screenreaderannouncer` can be used to announce messages with the screen reader.\n *\n * To make an announcement set `announcement` attribute on the `mdc-screenreaderannouncer` element.\n *\n * **Internal logic**\n *\n * When the screenreader announcer is connected to the DOM, if the `identity` attribute is not\n * provided, it is set to `mdc-screenreaderannouncer-identity` and a `<div>` element with this id is created\n * in the DOM. If the `identity` attribute is provided, the identity element is used and no new element\n * is created in the DOM.\n *\n * When the `announcement` attribute is set, the screenreader announcer will create a `<div>` element with\n * `aria-live` attribute set to the value of `data-aria-live` attribute and append it to the `identity` element.\n * After delay of `delay` milliseconds, a <p> element with the announcement text is appended to the `<div>` element.\n *\n * The announcement `<div>` element is removed from the DOM after `timeout` milliseconds.\n *\n * When the screen announcer component is disconnected from the DOM, all the timeouts are cleared and\n * all the announcement elements added are removed from the DOM and timeouts cleared.\n *\n * **Note**\n * 1. The default delay of 150 miliseconds is used as we dynamically generate the\n * aria-live region in the DOM and add the announcement text to it.\n * 3. If no `identity` is provided, all the screen reader components will create and use only one\n * `<div>` element with id `mdc-screenreaderannouncer-identity` in the DOM.\n *\n * Reference: https://patrickhlauke.github.io/aria/tests/live-regions/\n *\n * @tagname mdc-screenreaderannouncer\n */",
+          "customElement": true
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "default",
+          "declaration": {
+            "name": "ScreenreaderAnnouncer",
+            "module": "components/screenreaderannouncer/screenreaderannouncer.component.js"
+          }
+        }
+      ]
+    },
     {
       "kind": "javascript-module",
       "path": "components/searchfield/searchfield.component.js",
@@ -40423,195 +40628,213 @@
     },
     {
       "kind": "javascript-module",
-      "path": "components/screenreaderannouncer/screenreaderannouncer.component.js",
+      "path": "components/sidenavigation/sidenavigation.component.js",
       "declarations": [
         {
           "kind": "class",
-          "description": "`mdc-screenreaderannouncer` can be used to announce messages with the screen reader.\n\nTo make an announcement set `announcement` attribute on the `mdc-screenreaderannouncer` element.\n\n**Internal logic**\n\nWhen the screenreader announcer is connected to the DOM, if the `identity` attribute is not\nprovided, it is set to `mdc-screenreaderannouncer-identity` and a `<div>` element with this id is created\nin the DOM. If the `identity` attribute is provided, the identity element is used and no new element\nis created in the DOM.\n\nWhen the `announcement` attribute is set, the screenreader announcer will create a `<div>` element with\n`aria-live` attribute set to the value of `data-aria-live` attribute and append it to the `identity` element.\nAfter delay of `delay` milliseconds, a <p> element with the announcement text is appended to the `<div>` element.\n\nThe announcement `<div>` element is removed from the DOM after `timeout` milliseconds.\n\nWhen the screen announcer component is disconnected from the DOM, all the timeouts are cleared and\nall the announcement elements added are removed from the DOM and timeouts cleared.\n\n**Note**\n1. The default delay of 150 miliseconds is used as we dynamically generate the\naria-live region in the DOM and add the announcement text to it.\n3. If no `identity` is provided, all the screen reader components will create and use only one\n`<div>` element with id `mdc-screenreaderannouncer-identity` in the DOM.\n\nReference: https://patrickhlauke.github.io/aria/tests/live-regions/",
-          "name": "ScreenreaderAnnouncer",
-          "members": [
+          "description": "The `mdc-sidenavigation` component provides a vertically stacked navigation experience,\ntypically used in layouts with persistent or collapsible sidebars.\n\n## Features:\n- Supports four layout variants: `fixed-collapsed`, `fixed-expanded`, `flexible`, and `hidden`\n- Toggleable expand/collapse behavior\n- Displays brand logo and customer name\n- Serves as a context provider for descendant components - `mdc-menubar` and `mdc-navmenuitem`\n\n### Usage:\nIn a sidenavigation, navmenuitems can be used in the following ways:\n\n1. **Simple navmenuitem** – No submenu or interaction beyond selection.\n\n2. **NavMenuItem with submenu**:\n   - Provide an `id` on the `mdc-navmenuitem`\n   - Set the `triggerId` on the corresponding `mdc-menupopover` to match the navmenuitem's `id`\n   - Set `parent-nav-tooltip-text` with appropriate text that will display when a child menu item\n     inside the nested menupopover is active, conveying which submenu item is currently selected\n\n3. **Actionable navmenuitem (no submenu)**:\n   - Performs an action such as navigation or alert trigger\n   - Set `disable-aria-current=\"true\"` to maintain visual active state without navigation behavior\n\n### Recommendations:\n- Use `mdc-text` for section headers\n- Use `mdc-divider` with the attribute `variant=\"gradient\"` for section dividers\n- For the brand logo, use an informative icon. Refer to `Momentum Informative Icons`\n\n#### Accessibility Notes:\n- Always provide meaningful `aria-label` attributes for both `mdc-navmenuitem` and `mdc-menubar`\nto ensure screen reader support\n- Set `grabber-btn-aria-label` to provide accessible labels for the expand/collapse grabber button",
+          "name": "SideNavigation",
+          "cssProperties": [
             {
-              "kind": "field",
-              "name": "announcement",
-              "type": {
-                "text": "string"
-              },
-              "default": "''",
-              "description": "The announcement attribute is a string that is used to announce messages to the screen reader.\nThe announcement is made when the announcement attribute is set to a non-empty string.",
-              "attribute": "announcement",
-              "reflects": true
+              "description": "width of the sideNavigation when expanded",
+              "name": "--mdc-sidenavigation-expanded-width"
             },
             {
-              "kind": "field",
-              "name": "identity",
-              "type": {
-                "text": "string"
-              },
-              "default": "''",
-              "description": "The id of the element in the light dom, to which announcement elements will be appended.\n\nIf id is not provided, it will be set to `mdc-screenreaderannouncer-identity` and\na div element with this id will be created in the light dom.",
-              "attribute": "identity",
-              "reflects": true
+              "description": "width of the sideNavigation when collapsed",
+              "name": "--mdc-sidenavigation-collapsed-width"
             },
             {
-              "kind": "field",
-              "name": "dataAriaLive",
-              "type": {
-                "text": "AriaLive"
-              },
-              "description": "Aria live value for announcement.",
-              "default": "'polite'",
-              "attribute": "data-aria-live",
-              "reflects": true
+              "description": "z-index of the vertical divider button",
+              "name": "--mdc-sidenavigation-vertical-divider-button-z-index"
+            }
+          ],
+          "cssParts": [
+            {
+              "description": "The main container wrapping the entire side navigation.",
+              "name": "side-navigation-container"
             },
             {
-              "kind": "field",
-              "name": "delay",
-              "type": {
-                "text": "number"
+              "description": "The scrollable section of the side navigation.",
+              "name": "scrollable-section"
+            },
+            {
+              "description": "The fixed section of the side navigation.",
+              "name": "fixed-section"
+            },
+            {
+              "description": "The divider between the scrollable and fixed sections.",
+              "name": "separator"
+            },
+            {
+              "description": "The container wrapping the brand logo and footer text.",
+              "name": "brand-logo-container"
+            },
+            {
+              "description": "The footer text label in the fixed section.",
+              "name": "footer-text"
+            },
+            {
+              "description": "The vertical divider between the scrollable and fixed sections.",
+              "name": "vertical-divider"
+            },
+            {
+              "description": "The button inside the vertical divider used to toggle expand/collapse.",
+              "name": "vertical-divider-button"
+            }
+          ],
+          "slots": [
+            {
+              "description": "Slot for the scrollable content area of the side navigation.",
+              "name": "scrollable-section"
+            },
+            {
+              "description": "Slot for the fixed content area of the side navigation.",
+              "name": "fixed-section"
+            },
+            {
+              "description": "Slot for the brand logo (e.g., icon or img).",
+              "name": "brand-logo"
+            }
+          ],
+          "members": [
+            {
+              "kind": "field",
+              "name": "variant",
+              "type": {
+                "text": "SideNavigationVariant"
               },
-              "description": "Milliseconds to wait before adding the announcement to the identiy region in\nDOM, which will announce the message to the screen reader.",
-              "default": "150",
-              "attribute": "delay",
+              "description": "Four variants of the sideNavigation\n- **fixed-collapsed**: Shows icons without labels and has fixed width, 4.5rem.\n- **fixed-expanded**: Shows icons with labels and has fixed width, 15rem.\n- **flexible**: Toggles between collapsed/expanded states.\n- **hidden**: Removes the sidenavigation from the DOM.",
+              "default": "flexible",
+              "attribute": "variant",
               "reflects": true
             },
             {
               "kind": "field",
-              "name": "timeout",
+              "name": "footerText",
               "type": {
-                "text": "number"
+                "text": "string"
               },
-              "description": "Milliseconds to wait after which the announcement element will be removed from\nidentity region in DOM, causing the screen reader to not announcing the message.",
-              "default": "20_000",
-              "attribute": "timeout",
+              "default": "''",
+              "description": "Displays footer text in the bottom section of the sidenavigation.",
+              "attribute": "footer-text",
               "reflects": true
             },
             {
               "kind": "field",
-              "name": "debounceTime",
+              "name": "grabberBtnAriaLabel",
               "type": {
-                "text": "number"
+                "text": "string | undefined"
               },
-              "description": "The debounce time delay in milliseconds for announcements.",
-              "default": "500",
-              "attribute": "debounce-time",
+              "description": "Provides an accessible label for the grabber button.\nThis value is used to set the `aria-label` attribute for the button.",
+              "default": "''",
+              "attribute": "grabber-btn-aria-label",
               "reflects": true
             },
             {
-              "kind": "method",
-              "name": "announce",
-              "parameters": [
-                {
-                  "name": "announcement",
-                  "type": {
-                    "text": "string"
-                  },
-                  "description": "The announcement to be made."
-                },
-                {
-                  "name": "delay",
-                  "type": {
-                    "text": "number"
-                  },
-                  "description": "The delay in milliseconds before announcing the message."
-                },
-                {
-                  "name": "timeout",
-                  "type": {
-                    "text": "number"
-                  },
-                  "description": "The timeout in milliseconds before removing the announcement."
-                },
-                {
-                  "name": "ariaLive",
-                  "type": {
-                    "text": "AriaLive"
-                  },
-                  "description": "The aria live value for the announcement."
-                }
-              ],
-              "description": "Announces the given announcement to the screen reader.\n\nA div element with aria-live attribute set to the given ariaLive value is created\nand a p element with the announcement text is appended to it.\n\nThe div element is appended to the element in the DOM identified with id as\nidentity attribute."
+              "kind": "field",
+              "name": "parentNavTooltipText",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "Tooltip text shown on parent nav items when a child is active.",
+              "attribute": "parent-nav-tooltip-text",
+              "reflects": true
             },
             {
-              "kind": "method",
-              "name": "clearTimeOutsAndAnnouncements",
-              "privacy": "private",
-              "description": "Clears all timeouts and removes all announcements from the screen reader."
+              "kind": "field",
+              "name": "Context",
+              "privacy": "public",
+              "static": true,
+              "readonly": true
             },
             {
               "kind": "method",
-              "name": "createAnnouncementAriaLiveRegion",
-              "privacy": "private",
-              "description": "Creates a div element with id as identity attribute in the DOM.\n\nIf the identity attribute is not provided, it is set internally to\n`mdc-screenreaderannouncer-identity`."
+              "name": "updateContext",
+              "privacy": "protected",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "description": "Update all observing components of this\nprovider to update the values\n\nIs called on every re-render, see Provider class"
             },
             {
               "kind": "method",
-              "name": "setupDebouncedAnnounce",
+              "name": "preventScrollOnSpace",
               "privacy": "private",
-              "description": "Creates a single debounced function that will read the latest this.announcement when executed.\n\nThis function is used to debounce the announcement so that it will only be made after\nthis.debounceTime milliseconds have passed since the last time this.announcement was updated."
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "event",
+                  "type": {
+                    "text": "KeyboardEvent"
+                  }
+                }
+              ]
             }
           ],
-          "attributes": [
+          "events": [
             {
-              "name": "announcement",
+              "name": "toggle",
               "type": {
-                "text": "string"
+                "text": "CustomEvent"
               },
-              "default": "''",
-              "description": "The announcement attribute is a string that is used to announce messages to the screen reader.\nThe announcement is made when the announcement attribute is set to a non-empty string.",
-              "fieldName": "announcement"
+              "description": "(React: onToggle) Dispatched when the grabber button is clicked to expand/collapse the sidenavigation.",
+              "reactName": "onToggle"
             },
             {
-              "name": "identity",
-              "type": {
-                "text": "string"
-              },
-              "default": "''",
-              "description": "The id of the element in the light dom, to which announcement elements will be appended.\n\nIf id is not provided, it will be set to `mdc-screenreaderannouncer-identity` and\na div element with this id will be created in the light dom.",
-              "fieldName": "identity"
-            },
+              "description": "(React: onActiveChange) Dispatched when the active state of a nested navmenuitem changes.",
+              "name": "activechange",
+              "reactName": "onActiveChange"
+            }
+          ],
+          "attributes": [
             {
-              "name": "data-aria-live",
+              "name": "variant",
               "type": {
-                "text": "AriaLive"
+                "text": "SideNavigationVariant"
               },
-              "description": "Aria live value for announcement.",
-              "default": "'polite'",
-              "fieldName": "dataAriaLive"
+              "description": "Four variants of the sideNavigation\n- **fixed-collapsed**: Shows icons without labels and has fixed width, 4.5rem.\n- **fixed-expanded**: Shows icons with labels and has fixed width, 15rem.\n- **flexible**: Toggles between collapsed/expanded states.\n- **hidden**: Removes the sidenavigation from the DOM.",
+              "default": "flexible",
+              "fieldName": "variant"
             },
             {
-              "name": "delay",
+              "name": "footer-text",
               "type": {
-                "text": "number"
+                "text": "string"
               },
-              "description": "Milliseconds to wait before adding the announcement to the identiy region in\nDOM, which will announce the message to the screen reader.",
-              "default": "150",
-              "fieldName": "delay"
+              "default": "''",
+              "description": "Displays footer text in the bottom section of the sidenavigation.",
+              "fieldName": "footerText"
             },
             {
-              "name": "timeout",
+              "name": "grabber-btn-aria-label",
               "type": {
-                "text": "number"
+                "text": "string | undefined"
               },
-              "description": "Milliseconds to wait after which the announcement element will be removed from\nidentity region in DOM, causing the screen reader to not announcing the message.",
-              "default": "20_000",
-              "fieldName": "timeout"
+              "description": "Provides an accessible label for the grabber button.\nThis value is used to set the `aria-label` attribute for the button.",
+              "default": "''",
+              "fieldName": "grabberBtnAriaLabel"
             },
             {
-              "name": "debounce-time",
+              "name": "parent-nav-tooltip-text",
               "type": {
-                "text": "number"
+                "text": "string | undefined"
               },
-              "description": "The debounce time delay in milliseconds for announcements.",
-              "default": "500",
-              "fieldName": "debounceTime"
+              "description": "Tooltip text shown on parent nav items when a child is active.",
+              "fieldName": "parentNavTooltipText"
             }
           ],
           "superclass": {
-            "name": "Component",
+            "name": "Provider",
             "module": "/src/models"
           },
-          "tagName": "mdc-screenreaderannouncer",
-          "jsDoc": "/**\n * `mdc-screenreaderannouncer` can be used to announce messages with the screen reader.\n *\n * To make an announcement set `announcement` attribute on the `mdc-screenreaderannouncer` element.\n *\n * **Internal logic**\n *\n * When the screenreader announcer is connected to the DOM, if the `identity` attribute is not\n * provided, it is set to `mdc-screenreaderannouncer-identity` and a `<div>` element with this id is created\n * in the DOM. If the `identity` attribute is provided, the identity element is used and no new element\n * is created in the DOM.\n *\n * When the `announcement` attribute is set, the screenreader announcer will create a `<div>` element with\n * `aria-live` attribute set to the value of `data-aria-live` attribute and append it to the `identity` element.\n * After delay of `delay` milliseconds, a <p> element with the announcement text is appended to the `<div>` element.\n *\n * The announcement `<div>` element is removed from the DOM after `timeout` milliseconds.\n *\n * When the screen announcer component is disconnected from the DOM, all the timeouts are cleared and\n * all the announcement elements added are removed from the DOM and timeouts cleared.\n *\n * **Note**\n * 1. The default delay of 150 miliseconds is used as we dynamically generate the\n * aria-live region in the DOM and add the announcement text to it.\n * 3. If no `identity` is provided, all the screen reader components will create and use only one\n * `<div>` element with id `mdc-screenreaderannouncer-identity` in the DOM.\n *\n * Reference: https://patrickhlauke.github.io/aria/tests/live-regions/\n *\n * @tagname mdc-screenreaderannouncer\n */",
+          "tagName": "mdc-sidenavigation",
+          "jsDoc": "/**\n * The `mdc-sidenavigation` component provides a vertically stacked navigation experience,\n * typically used in layouts with persistent or collapsible sidebars.\n *\n * ## Features:\n * - Supports four layout variants: `fixed-collapsed`, `fixed-expanded`, `flexible`, and `hidden`\n * - Toggleable expand/collapse behavior\n * - Displays brand logo and customer name\n * - Serves as a context provider for descendant components - `mdc-menubar` and `mdc-navmenuitem`\n *\n * ### Usage:\n * In a sidenavigation, navmenuitems can be used in the following ways:\n *\n * 1. **Simple navmenuitem** – No submenu or interaction beyond selection.\n *\n * 2. **NavMenuItem with submenu**:\n *    - Provide an `id` on the `mdc-navmenuitem`\n *    - Set the `triggerId` on the corresponding `mdc-menupopover` to match the navmenuitem's `id`\n *    - Set `parent-nav-tooltip-text` with appropriate text that will display when a child menu item\n *      inside the nested menupopover is active, conveying which submenu item is currently selected\n *\n * 3. **Actionable navmenuitem (no submenu)**:\n *    - Performs an action such as navigation or alert trigger\n *    - Set `disable-aria-current=\"true\"` to maintain visual active state without navigation behavior\n *\n * ### Recommendations:\n * - Use `mdc-text` for section headers\n * - Use `mdc-divider` with the attribute `variant=\"gradient\"` for section dividers\n * - For the brand logo, use an informative icon. Refer to `Momentum Informative Icons`\n *\n * #### Accessibility Notes:\n * - Always provide meaningful `aria-label` attributes for both `mdc-navmenuitem` and `mdc-menubar`\n * to ensure screen reader support\n * - Set `grabber-btn-aria-label` to provide accessible labels for the expand/collapse grabber button\n *\n * @dependency mdc-text\n * @dependency mdc-button\n * @dependency mdc-divider\n * @dependency mdc-menubar\n *\n * @event activechange - (React: onActiveChange) Dispatched when the active state of the navmenuitem changes.\n *\n * @tagname mdc-sidenavigation\n *\n * @slot scrollable-section - Slot for the scrollable content area of the side navigation.\n * @slot fixed-section - Slot for the fixed content area of the side navigation.\n * @slot brand-logo - Slot for the brand logo (e.g., icon or img).\n *\n * @csspart side-navigation-container - The main container wrapping the entire side navigation.\n * @csspart scrollable-section - The scrollable section of the side navigation.\n * @csspart fixed-section - The fixed section of the side navigation.\n * @csspart separator - The divider between the scrollable and fixed sections.\n * @csspart brand-logo-container - The container wrapping the brand logo and footer text.\n * @csspart footer-text - The footer text label in the fixed section.\n * @csspart vertical-divider - The vertical divider between the scrollable and fixed sections.\n * @csspart vertical-divider-button - The button inside the vertical divider used to toggle expand/collapse.\n *\n * @event toggle - (React: onToggle) Dispatched when the grabber button is clicked to expand/collapse the sidenavigation.\n * @event activechange - (React: onActiveChange) Dispatched when the active state of a nested navmenuitem changes.\n *\n * @cssproperty --mdc-sidenavigation-expanded-width - width of the sideNavigation when expanded\n * @cssproperty --mdc-sidenavigation-collapsed-width - width of the sideNavigation when collapsed\n * @cssproperty --mdc-sidenavigation-vertical-divider-button-z-index - z-index of the vertical divider button\n */",
           "customElement": true
         }
       ],
@@ -40620,8 +40843,8 @@
           "kind": "js",
           "name": "default",
           "declaration": {
-            "name": "ScreenreaderAnnouncer",
-            "module": "components/screenreaderannouncer/screenreaderannouncer.component.js"
+            "name": "SideNavigation",
+            "module": "components/sidenavigation/sidenavigation.component.js"
           }
         }
       ]
@@ -41628,229 +41851,6 @@
         }
       ]
     },
-    {
-      "kind": "javascript-module",
-      "path": "components/sidenavigation/sidenavigation.component.js",
-      "declarations": [
-        {
-          "kind": "class",
-          "description": "The `mdc-sidenavigation` component provides a vertically stacked navigation experience,\ntypically used in layouts with persistent or collapsible sidebars.\n\n## Features:\n- Supports four layout variants: `fixed-collapsed`, `fixed-expanded`, `flexible`, and `hidden`\n- Toggleable expand/collapse behavior\n- Displays brand logo and customer name\n- Serves as a context provider for descendant components - `mdc-menubar` and `mdc-navmenuitem`\n\n### Usage:\nIn a sidenavigation, navmenuitems can be used in the following ways:\n\n1. **Simple navmenuitem** – No submenu or interaction beyond selection.\n\n2. **NavMenuItem with submenu**:\n   - Provide an `id` on the `mdc-navmenuitem`\n   - Set the `triggerId` on the corresponding `mdc-menupopover` to match the navmenuitem's `id`\n   - Set `parent-nav-tooltip-text` with appropriate text that will display when a child menu item\n     inside the nested menupopover is active, conveying which submenu item is currently selected\n\n3. **Actionable navmenuitem (no submenu)**:\n   - Performs an action such as navigation or alert trigger\n   - Set `disable-aria-current=\"true\"` to maintain visual active state without navigation behavior\n\n### Recommendations:\n- Use `mdc-text` for section headers\n- Use `mdc-divider` with the attribute `variant=\"gradient\"` for section dividers\n- For the brand logo, use an informative icon. Refer to `Momentum Informative Icons`\n\n#### Accessibility Notes:\n- Always provide meaningful `aria-label` attributes for both `mdc-navmenuitem` and `mdc-menubar`\nto ensure screen reader support\n- Set `grabber-btn-aria-label` to provide accessible labels for the expand/collapse grabber button",
-          "name": "SideNavigation",
-          "cssProperties": [
-            {
-              "description": "width of the sideNavigation when expanded",
-              "name": "--mdc-sidenavigation-expanded-width"
-            },
-            {
-              "description": "width of the sideNavigation when collapsed",
-              "name": "--mdc-sidenavigation-collapsed-width"
-            },
-            {
-              "description": "z-index of the vertical divider button",
-              "name": "--mdc-sidenavigation-vertical-divider-button-z-index"
-            }
-          ],
-          "cssParts": [
-            {
-              "description": "The main container wrapping the entire side navigation.",
-              "name": "side-navigation-container"
-            },
-            {
-              "description": "The scrollable section of the side navigation.",
-              "name": "scrollable-section"
-            },
-            {
-              "description": "The fixed section of the side navigation.",
-              "name": "fixed-section"
-            },
-            {
-              "description": "The divider between the scrollable and fixed sections.",
-              "name": "separator"
-            },
-            {
-              "description": "The container wrapping the brand logo and footer text.",
-              "name": "brand-logo-container"
-            },
-            {
-              "description": "The footer text label in the fixed section.",
-              "name": "footer-text"
-            },
-            {
-              "description": "The vertical divider between the scrollable and fixed sections.",
-              "name": "vertical-divider"
-            },
-            {
-              "description": "The button inside the vertical divider used to toggle expand/collapse.",
-              "name": "vertical-divider-button"
-            }
-          ],
-          "slots": [
-            {
-              "description": "Slot for the scrollable content area of the side navigation.",
-              "name": "scrollable-section"
-            },
-            {
-              "description": "Slot for the fixed content area of the side navigation.",
-              "name": "fixed-section"
-            },
-            {
-              "description": "Slot for the brand logo (e.g., icon or img).",
-              "name": "brand-logo"
-            }
-          ],
-          "members": [
-            {
-              "kind": "field",
-              "name": "variant",
-              "type": {
-                "text": "SideNavigationVariant"
-              },
-              "description": "Four variants of the sideNavigation\n- **fixed-collapsed**: Shows icons without labels and has fixed width, 4.5rem.\n- **fixed-expanded**: Shows icons with labels and has fixed width, 15rem.\n- **flexible**: Toggles between collapsed/expanded states.\n- **hidden**: Removes the sidenavigation from the DOM.",
-              "default": "flexible",
-              "attribute": "variant",
-              "reflects": true
-            },
-            {
-              "kind": "field",
-              "name": "footerText",
-              "type": {
-                "text": "string"
-              },
-              "default": "''",
-              "description": "Displays footer text in the bottom section of the sidenavigation.",
-              "attribute": "footer-text",
-              "reflects": true
-            },
-            {
-              "kind": "field",
-              "name": "grabberBtnAriaLabel",
-              "type": {
-                "text": "string | undefined"
-              },
-              "description": "Provides an accessible label for the grabber button.\nThis value is used to set the `aria-label` attribute for the button.",
-              "default": "''",
-              "attribute": "grabber-btn-aria-label",
-              "reflects": true
-            },
-            {
-              "kind": "field",
-              "name": "parentNavTooltipText",
-              "type": {
-                "text": "string | undefined"
-              },
-              "description": "Tooltip text shown on parent nav items when a child is active.",
-              "attribute": "parent-nav-tooltip-text",
-              "reflects": true
-            },
-            {
-              "kind": "field",
-              "name": "Context",
-              "privacy": "public",
-              "static": true,
-              "readonly": true
-            },
-            {
-              "kind": "method",
-              "name": "updateContext",
-              "privacy": "protected",
-              "return": {
-                "type": {
-                  "text": "void"
-                }
-              },
-              "description": "Update all observing components of this\nprovider to update the values\n\nIs called on every re-render, see Provider class"
-            },
-            {
-              "kind": "method",
-              "name": "preventScrollOnSpace",
-              "privacy": "private",
-              "return": {
-                "type": {
-                  "text": "void"
-                }
-              },
-              "parameters": [
-                {
-                  "name": "event",
-                  "type": {
-                    "text": "KeyboardEvent"
-                  }
-                }
-              ]
-            }
-          ],
-          "events": [
-            {
-              "name": "toggle",
-              "type": {
-                "text": "CustomEvent"
-              },
-              "description": "(React: onToggle) Dispatched when the grabber button is clicked to expand/collapse the sidenavigation.",
-              "reactName": "onToggle"
-            },
-            {
-              "description": "(React: onActiveChange) Dispatched when the active state of a nested navmenuitem changes.",
-              "name": "activechange",
-              "reactName": "onActiveChange"
-            }
-          ],
-          "attributes": [
-            {
-              "name": "variant",
-              "type": {
-                "text": "SideNavigationVariant"
-              },
-              "description": "Four variants of the sideNavigation\n- **fixed-collapsed**: Shows icons without labels and has fixed width, 4.5rem.\n- **fixed-expanded**: Shows icons with labels and has fixed width, 15rem.\n- **flexible**: Toggles between collapsed/expanded states.\n- **hidden**: Removes the sidenavigation from the DOM.",
-              "default": "flexible",
-              "fieldName": "variant"
-            },
-            {
-              "name": "footer-text",
-              "type": {
-                "text": "string"
-              },
-              "default": "''",
-              "description": "Displays footer text in the bottom section of the sidenavigation.",
-              "fieldName": "footerText"
-            },
-            {
-              "name": "grabber-btn-aria-label",
-              "type": {
-                "text": "string | undefined"
-              },
-              "description": "Provides an accessible label for the grabber button.\nThis value is used to set the `aria-label` attribute for the button.",
-              "default": "''",
-              "fieldName": "grabberBtnAriaLabel"
-            },
-            {
-              "name": "parent-nav-tooltip-text",
-              "type": {
-                "text": "string | undefined"
-              },
-              "description": "Tooltip text shown on parent nav items when a child is active.",
-              "fieldName": "parentNavTooltipText"
-            }
-          ],
-          "superclass": {
-            "name": "Provider",
-            "module": "/src/models"
-          },
-          "tagName": "mdc-sidenavigation",
-          "jsDoc": "/**\n * The `mdc-sidenavigation` component provides a vertically stacked navigation experience,\n * typically used in layouts with persistent or collapsible sidebars.\n *\n * ## Features:\n * - Supports four layout variants: `fixed-collapsed`, `fixed-expanded`, `flexible`, and `hidden`\n * - Toggleable expand/collapse behavior\n * - Displays brand logo and customer name\n * - Serves as a context provider for descendant components - `mdc-menubar` and `mdc-navmenuitem`\n *\n * ### Usage:\n * In a sidenavigation, navmenuitems can be used in the following ways:\n *\n * 1. **Simple navmenuitem** – No submenu or interaction beyond selection.\n *\n * 2. **NavMenuItem with submenu**:\n *    - Provide an `id` on the `mdc-navmenuitem`\n *    - Set the `triggerId` on the corresponding `mdc-menupopover` to match the navmenuitem's `id`\n *    - Set `parent-nav-tooltip-text` with appropriate text that will display when a child menu item\n *      inside the nested menupopover is active, conveying which submenu item is currently selected\n *\n * 3. **Actionable navmenuitem (no submenu)**:\n *    - Performs an action such as navigation or alert trigger\n *    - Set `disable-aria-current=\"true\"` to maintain visual active state without navigation behavior\n *\n * ### Recommendations:\n * - Use `mdc-text` for section headers\n * - Use `mdc-divider` with the attribute `variant=\"gradient\"` for section dividers\n * - For the brand logo, use an informative icon. Refer to `Momentum Informative Icons`\n *\n * #### Accessibility Notes:\n * - Always provide meaningful `aria-label` attributes for both `mdc-navmenuitem` and `mdc-menubar`\n * to ensure screen reader support\n * - Set `grabber-btn-aria-label` to provide accessible labels for the expand/collapse grabber button\n *\n * @dependency mdc-text\n * @dependency mdc-button\n * @dependency mdc-divider\n * @dependency mdc-menubar\n *\n * @event activechange - (React: onActiveChange) Dispatched when the active state of the navmenuitem changes.\n *\n * @tagname mdc-sidenavigation\n *\n * @slot scrollable-section - Slot for the scrollable content area of the side navigation.\n * @slot fixed-section - Slot for the fixed content area of the side navigation.\n * @slot brand-logo - Slot for the brand logo (e.g., icon or img).\n *\n * @csspart side-navigation-container - The main container wrapping the entire side navigation.\n * @csspart scrollable-section - The scrollable section of the side navigation.\n * @csspart fixed-section - The fixed section of the side navigation.\n * @csspart separator - The divider between the scrollable and fixed sections.\n * @csspart brand-logo-container - The container wrapping the brand logo and footer text.\n * @csspart footer-text - The footer text label in the fixed section.\n * @csspart vertical-divider - The vertical divider between the scrollable and fixed sections.\n * @csspart vertical-divider-button - The button inside the vertical divider used to toggle expand/collapse.\n *\n * @event toggle - (React: onToggle) Dispatched when the grabber button is clicked to expand/collapse the sidenavigation.\n * @event activechange - (React: onActiveChange) Dispatched when the active state of a nested navmenuitem changes.\n *\n * @cssproperty --mdc-sidenavigation-expanded-width - width of the sideNavigation when expanded\n * @cssproperty --mdc-sidenavigation-collapsed-width - width of the sideNavigation when collapsed\n * @cssproperty --mdc-sidenavigation-vertical-divider-button-z-index - z-index of the vertical divider button\n */",
-          "customElement": true
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "default",
-          "declaration": {
-            "name": "SideNavigation",
-            "module": "components/sidenavigation/sidenavigation.component.js"
-          }
-        }
-      ]
-    },
     {
       "kind": "javascript-module",
       "path": "components/staticcheckbox/staticcheckbox.component.js",