@momentum-design/components 0.81.2 → 0.81.3

package/dist/custom-elements.json

@@ -2203,6 +2203,138 @@
         }
       ]
     },
+    {
+      "kind": "javascript-module",
+      "path": "components/buttongroup/buttongroup.component.js",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "buttongroup component, is a styled wrapper for multiple buttons.\nIt can support icon buttons, combination of icon and pill buttons, and text buttons.\nThey are available in horizontal and vertical orientation.",
+          "name": "ButtonGroup",
+          "cssProperties": [
+            {
+              "description": "The border radius of the buttongroup",
+              "name": "--mdc-buttongroup-border-radius"
+            },
+            {
+              "description": "The border color of the buttongroup",
+              "name": "--mdc-buttongroup-border-color"
+            },
+            {
+              "description": "The color of the divider between buttons within the buttongroup",
+              "name": "--mdc-buttongroup-divider-color"
+            }
+          ],
+          "slots": [
+            {
+              "description": "This is a default/unnamed slot, which contains the buttons",
+              "name": "default"
+            }
+          ],
+          "members": [
+            {
+              "kind": "field",
+              "name": "orientation",
+              "type": {
+                "text": "ButtonGroupOrientation"
+              },
+              "description": "Orientation of the buttongroup.",
+              "default": "'horizontal'",
+              "attribute": "orientation",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "variant",
+              "type": {
+                "text": "ButtonGroupVariant"
+              },
+              "description": "Variant of the buttons within the buttongroup.",
+              "default": "'primary'",
+              "attribute": "variant",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "size",
+              "type": {
+                "text": "ButtonGroupSize"
+              },
+              "description": "Size of the buttons within the buttongroup.",
+              "default": "'28'",
+              "attribute": "size",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "compact",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "When this is true, the buttons within the buttongroup will be compact.\ni.e. Irrespective of the size of the buttons, they will have a height of 24px.",
+              "attribute": "compact",
+              "reflects": true
+            }
+          ],
+          "attributes": [
+            {
+              "name": "orientation",
+              "type": {
+                "text": "ButtonGroupOrientation"
+              },
+              "description": "Orientation of the buttongroup.",
+              "default": "'horizontal'",
+              "fieldName": "orientation"
+            },
+            {
+              "name": "variant",
+              "type": {
+                "text": "ButtonGroupVariant"
+              },
+              "description": "Variant of the buttons within the buttongroup.",
+              "default": "'primary'",
+              "fieldName": "variant"
+            },
+            {
+              "name": "size",
+              "type": {
+                "text": "ButtonGroupSize"
+              },
+              "description": "Size of the buttons within the buttongroup.",
+              "default": "'28'",
+              "fieldName": "size"
+            },
+            {
+              "name": "compact",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "When this is true, the buttons within the buttongroup will be compact.\ni.e. Irrespective of the size of the buttons, they will have a height of 24px.",
+              "fieldName": "compact"
+            }
+          ],
+          "superclass": {
+            "name": "Component",
+            "module": "/src/models"
+          },
+          "tagName": "mdc-buttongroup",
+          "jsDoc": "/**\n * buttongroup component, is a styled wrapper for multiple buttons.\n * It can support icon buttons, combination of icon and pill buttons, and text buttons.\n * They are available in horizontal and vertical orientation.\n *\n * @tagname mdc-buttongroup\n *\n * @slot default - This is a default/unnamed slot, which contains the buttons\n *\n * @cssproperty --mdc-buttongroup-border-radius - The border radius of the buttongroup\n * @cssproperty --mdc-buttongroup-border-color - The border color of the buttongroup\n * @cssproperty --mdc-buttongroup-divider-color - The color of the divider between buttons within the buttongroup\n */",
+          "customElement": true
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "default",
+          "declaration": {
+            "name": "ButtonGroup",
+            "module": "components/buttongroup/buttongroup.component.js"
+          }
+        }
+      ]
+    },
     {
       "kind": "javascript-module",
       "path": "components/button/button.component.js",
@@ -2900,231 +3032,99 @@
     },
     {
       "kind": "javascript-module",
-      "path": "components/buttongroup/buttongroup.component.js",
+      "path": "components/buttonlink/buttonlink.component.js",
       "declarations": [
         {
           "kind": "class",
-          "description": "buttongroup component, is a styled wrapper for multiple buttons.\nIt can support icon buttons, combination of icon and pill buttons, and text buttons.\nThey are available in horizontal and vertical orientation.",
-          "name": "ButtonGroup",
-          "cssProperties": [
-            {
-              "description": "The border radius of the buttongroup",
-              "name": "--mdc-buttongroup-border-radius"
-            },
-            {
-              "description": "The border color of the buttongroup",
-              "name": "--mdc-buttongroup-border-color"
-            },
-            {
-              "description": "The color of the divider between buttons within the buttongroup",
-              "name": "--mdc-buttongroup-divider-color"
-            }
-          ],
-          "slots": [
-            {
-              "description": "This is a default/unnamed slot, which contains the buttons",
-              "name": "default"
-            }
-          ],
+          "description": "`mdc-buttonlink` combines the functional behavior of `mdc-linksimple` with the visual and structural\nfeatures of `mdc-button`. This includes support for variants, sizing, and optional\nprefix and postfix icons via slots.\n\n### Features:\n- Behaves like an link while visually resembling a button.\n- Supports slots for `prefix-icon` and `postfix-icon`.\n- Customizable size, color, and variant through attributes.\n- Inherits accessibility and keyboard interaction support from `mdc-linksimple`.",
+          "name": "ButtonLink",
           "members": [
             {
               "kind": "field",
-              "name": "orientation",
+              "name": "size",
               "type": {
-                "text": "ButtonGroupOrientation"
+                "text": "PillButtonSize | IconButtonSize"
               },
-              "description": "Orientation of the buttongroup.",
-              "default": "'horizontal'",
-              "attribute": "orientation",
+              "description": "ButtonLink sizing is based on the buttonlink type.\n - **Pill buttonlink**: 40, 32, 28, 24.\n - **Icon buttonlink**: 64, 52, 40, 32, 28, 24.\n - Tertiary icon buttonlink can also be 20.",
+              "default": "32",
+              "attribute": "size",
               "reflects": true
             },
             {
               "kind": "field",
-              "name": "variant",
+              "name": "softDisabled",
               "type": {
-                "text": "ButtonGroupVariant"
+                "text": "boolean | undefined"
               },
-              "description": "Variant of the buttons within the buttongroup.",
-              "default": "'primary'",
-              "attribute": "variant",
+              "description": "Indicates whether the buttonlink is soft disabled.\nWhen set to `true`, the buttonlink appears visually disabled but still allows\nfocus, click, and keyboard actions to be passed through.\n\n**Important:** When using soft disabled, consumers must ensure that\nthe buttonlink behaves like a disabled buttonlink, allowing only focus and\npreventing any interactions (clicks or keyboard actions) from triggering unintended actions.",
+              "default": "undefined",
+              "attribute": "soft-disabled",
               "reflects": true
             },
             {
-              "kind": "field",
-              "name": "size",
-              "type": {
-                "text": "ButtonGroupSize"
-              },
-              "description": "Size of the buttons within the buttongroup.",
-              "default": "'28'",
-              "attribute": "size",
-              "reflects": true
+              "kind": "method",
+              "name": "setSoftDisabled",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "element",
+                  "type": {
+                    "text": "HTMLElement"
+                  },
+                  "description": "The buttonlink element."
+                },
+                {
+                  "name": "softDisabled",
+                  "optional": true,
+                  "type": {
+                    "text": "boolean"
+                  },
+                  "description": "The soft-disabled state."
+                }
+              ],
+              "description": "Sets the soft-disabled attribute for the buttonlink.\nWhen soft-disabled, the buttonlink looks to be disabled but remains focusable and clickable.\nAlso sets/removes aria-disabled attribute."
             },
             {
               "kind": "field",
-              "name": "compact",
+              "name": "prefixIcon",
               "type": {
-                "text": "boolean"
+                "text": "IconNames | undefined"
               },
-              "default": "false",
-              "description": "When this is true, the buttons within the buttongroup will be compact.\ni.e. Irrespective of the size of the buttons, they will have a height of 24px.",
-              "attribute": "compact",
-              "reflects": true
-            }
-          ],
-          "attributes": [
+              "description": "The name of the icon to display as a prefix.\nThe icon is displayed on the left side of the button.",
+              "attribute": "prefix-icon",
+              "reflects": true,
+              "inheritedFrom": {
+                "name": "ButtonComponentMixin",
+                "module": "utils/mixins/ButtonComponentMixin.js"
+              }
+            },
             {
-              "name": "orientation",
+              "kind": "field",
+              "name": "postfixIcon",
               "type": {
-                "text": "ButtonGroupOrientation"
+                "text": "IconNames | undefined"
               },
-              "description": "Orientation of the buttongroup.",
-              "default": "'horizontal'",
-              "fieldName": "orientation"
+              "description": "The name of the icon to display as a postfix.\nThe icon is displayed on the right side of the button.",
+              "attribute": "postfix-icon",
+              "reflects": true,
+              "inheritedFrom": {
+                "name": "ButtonComponentMixin",
+                "module": "utils/mixins/ButtonComponentMixin.js"
+              }
             },
             {
+              "kind": "field",
               "name": "variant",
               "type": {
-                "text": "ButtonGroupVariant"
+                "text": "ButtonVariant"
               },
-              "description": "Variant of the buttons within the buttongroup.",
-              "default": "'primary'",
-              "fieldName": "variant"
-            },
-            {
-              "name": "size",
-              "type": {
-                "text": "ButtonGroupSize"
-              },
-              "description": "Size of the buttons within the buttongroup.",
-              "default": "'28'",
-              "fieldName": "size"
-            },
-            {
-              "name": "compact",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "When this is true, the buttons within the buttongroup will be compact.\ni.e. Irrespective of the size of the buttons, they will have a height of 24px.",
-              "fieldName": "compact"
-            }
-          ],
-          "superclass": {
-            "name": "Component",
-            "module": "/src/models"
-          },
-          "tagName": "mdc-buttongroup",
-          "jsDoc": "/**\n * buttongroup component, is a styled wrapper for multiple buttons.\n * It can support icon buttons, combination of icon and pill buttons, and text buttons.\n * They are available in horizontal and vertical orientation.\n *\n * @tagname mdc-buttongroup\n *\n * @slot default - This is a default/unnamed slot, which contains the buttons\n *\n * @cssproperty --mdc-buttongroup-border-radius - The border radius of the buttongroup\n * @cssproperty --mdc-buttongroup-border-color - The border color of the buttongroup\n * @cssproperty --mdc-buttongroup-divider-color - The color of the divider between buttons within the buttongroup\n */",
-          "customElement": true
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "default",
-          "declaration": {
-            "name": "ButtonGroup",
-            "module": "components/buttongroup/buttongroup.component.js"
-          }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "components/buttonlink/buttonlink.component.js",
-      "declarations": [
-        {
-          "kind": "class",
-          "description": "`mdc-buttonlink` combines the functional behavior of `mdc-linksimple` with the visual and structural\nfeatures of `mdc-button`. This includes support for variants, sizing, and optional\nprefix and postfix icons via slots.\n\n### Features:\n- Behaves like an link while visually resembling a button.\n- Supports slots for `prefix-icon` and `postfix-icon`.\n- Customizable size, color, and variant through attributes.\n- Inherits accessibility and keyboard interaction support from `mdc-linksimple`.",
-          "name": "ButtonLink",
-          "members": [
-            {
-              "kind": "field",
-              "name": "size",
-              "type": {
-                "text": "PillButtonSize | IconButtonSize"
-              },
-              "description": "ButtonLink sizing is based on the buttonlink type.\n - **Pill buttonlink**: 40, 32, 28, 24.\n - **Icon buttonlink**: 64, 52, 40, 32, 28, 24.\n - Tertiary icon buttonlink can also be 20.",
-              "default": "32",
-              "attribute": "size",
-              "reflects": true
-            },
-            {
-              "kind": "field",
-              "name": "softDisabled",
-              "type": {
-                "text": "boolean | undefined"
-              },
-              "description": "Indicates whether the buttonlink is soft disabled.\nWhen set to `true`, the buttonlink appears visually disabled but still allows\nfocus, click, and keyboard actions to be passed through.\n\n**Important:** When using soft disabled, consumers must ensure that\nthe buttonlink behaves like a disabled buttonlink, allowing only focus and\npreventing any interactions (clicks or keyboard actions) from triggering unintended actions.",
-              "default": "undefined",
-              "attribute": "soft-disabled",
-              "reflects": true
-            },
-            {
-              "kind": "method",
-              "name": "setSoftDisabled",
-              "privacy": "private",
-              "parameters": [
-                {
-                  "name": "element",
-                  "type": {
-                    "text": "HTMLElement"
-                  },
-                  "description": "The buttonlink element."
-                },
-                {
-                  "name": "softDisabled",
-                  "optional": true,
-                  "type": {
-                    "text": "boolean"
-                  },
-                  "description": "The soft-disabled state."
-                }
-              ],
-              "description": "Sets the soft-disabled attribute for the buttonlink.\nWhen soft-disabled, the buttonlink looks to be disabled but remains focusable and clickable.\nAlso sets/removes aria-disabled attribute."
-            },
-            {
-              "kind": "field",
-              "name": "prefixIcon",
-              "type": {
-                "text": "IconNames | undefined"
-              },
-              "description": "The name of the icon to display as a prefix.\nThe icon is displayed on the left side of the button.",
-              "attribute": "prefix-icon",
-              "reflects": true,
-              "inheritedFrom": {
-                "name": "ButtonComponentMixin",
-                "module": "utils/mixins/ButtonComponentMixin.js"
-              }
-            },
-            {
-              "kind": "field",
-              "name": "postfixIcon",
-              "type": {
-                "text": "IconNames | undefined"
-              },
-              "description": "The name of the icon to display as a postfix.\nThe icon is displayed on the right side of the button.",
-              "attribute": "postfix-icon",
-              "reflects": true,
-              "inheritedFrom": {
-                "name": "ButtonComponentMixin",
-                "module": "utils/mixins/ButtonComponentMixin.js"
-              }
-            },
-            {
-              "kind": "field",
-              "name": "variant",
-              "type": {
-                "text": "ButtonVariant"
-              },
-              "description": "There are 3 variants of button: primary, secondary, tertiary. They are styled differently.\n- **Primary**: Solid background color.\n- **Secondary**: Transparent background with a solid border.\n- **Tertiary**: No background or border, appears as plain text but retains all button functionalities.",
-              "default": "primary",
-              "attribute": "variant",
-              "inheritedFrom": {
-                "name": "ButtonComponentMixin",
-                "module": "utils/mixins/ButtonComponentMixin.js"
-              }
+              "description": "There are 3 variants of button: primary, secondary, tertiary. They are styled differently.\n- **Primary**: Solid background color.\n- **Secondary**: Transparent background with a solid border.\n- **Tertiary**: No background or border, appears as plain text but retains all button functionalities.",
+              "default": "primary",
+              "attribute": "variant",
+              "inheritedFrom": {
+                "name": "ButtonComponentMixin",
+                "module": "utils/mixins/ButtonComponentMixin.js"
+              }
             },
             {
               "kind": "field",
@@ -16311,12 +16311,82 @@
     },
     {
       "kind": "javascript-module",
-      "path": "components/menuitemradio/menuitemradio.component.js",
+      "path": "components/menuitemcheckbox/menuitemcheckbox.component.js",
       "declarations": [
         {
           "kind": "class",
-          "description": "A menuitemradio component is a checkable menuitem that is used in a menu.\nA menuitemradio should be checked only one at a time. <br/>\nThere should be no focusable descendants inside this menuitemradio component.\n\nThe `aria-checked` menuitemradio attribute is used to indicate that the menuitemradio is checked or not.\n\nIf you want more than one item in a group to be checked, consider using menuitemcheckbox component.\n\nIf a menuitemradio is disabled, then the `aria-disabled` attribute is set to `true`.",
-          "name": "MenuItemRadio",
+          "description": "A menuitemcheckbox component is a checkable menuitem.\nThere should be no focusable descendants inside this menuitemcheckbox component.\n\nThe `aria-checked` attribute indicates whether the menuitemcheckbox is checked or not.\n\nThe `indicator` attribute is used to differentiate between <b>checkbox</b>, <b>checkmark</b> and <b>toggle</b>.\nBy default the `indicator` is set to <b>checkbox</b>.<br/>\n\nThe checkbox will always be positioned on the leading side of the menuitem label and\nthe toggle and checkmark will always be positioned on the trailing side.\n\nThe checkbox will have the possible states of `true` or `false`.\nIf the indicator is set to <b>checkmark</b> and if the `aria-checked` attribute is set to `true`,\nthen the checkmark will be displayed. if not, then no indicator will be displayed.\n\nIf you want only one item in a group to be checked, consider using menuitemradio component.\n\nIf a menuitemcheckbox is disabled, then the `aria-disabled` attribute is set to `true`.",
+          "name": "MenuItemCheckbox",
+          "cssProperties": [
+            {
+              "description": "Allows customization of the checkmark indicator color",
+              "name": "--mdc-checkmark-indicator-color"
+            },
+            {
+              "description": "Allows customization of the default background color.",
+              "name": "--mdc-listitem-default-background-color",
+              "inheritedFrom": {
+                "name": "ListItem",
+                "module": "src/components/listitem/listitem.component.ts"
+              }
+            },
+            {
+              "description": "Allows customization of the background color on hover.",
+              "name": "--mdc-listitem-background-color-hover",
+              "inheritedFrom": {
+                "name": "ListItem",
+                "module": "src/components/listitem/listitem.component.ts"
+              }
+            },
+            {
+              "description": "Allows customization of the background color when pressed.",
+              "name": "--mdc-listitem-background-color-active",
+              "inheritedFrom": {
+                "name": "ListItem",
+                "module": "src/components/listitem/listitem.component.ts"
+              }
+            },
+            {
+              "description": "Allows customization of the primary label, side header and subline text slot color.",
+              "name": "--mdc-listitem-primary-label-color",
+              "inheritedFrom": {
+                "name": "ListItem",
+                "module": "src/components/listitem/listitem.component.ts"
+              }
+            },
+            {
+              "description": "Allows customization of the secondary and tertiary label text slot color.",
+              "name": "--mdc-listitem-secondary-label-color",
+              "inheritedFrom": {
+                "name": "ListItem",
+                "module": "src/components/listitem/listitem.component.ts"
+              }
+            },
+            {
+              "description": "Allows customization of the disabled color.",
+              "name": "--mdc-listitem-disabled-color",
+              "inheritedFrom": {
+                "name": "ListItem",
+                "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-and-right",
+              "inheritedFrom": {
+                "name": "ListItem",
+                "module": "src/components/listitem/listitem.component.ts"
+              }
+            }
+          ],
           "members": [
             {
               "kind": "field",
@@ -16324,11 +16394,52 @@
               "type": {
                 "text": "AriaCheckedStates"
               },
-              "description": "The aria-checked attribute is used to indicate that the menuitemradio is checked or not.",
+              "description": "The aria-checked attribute is used to indicate that the menuitemcheckbox is checked or not.",
               "default": "'false'",
               "attribute": "aria-checked",
               "reflects": true
             },
+            {
+              "kind": "field",
+              "name": "indicator",
+              "type": {
+                "text": "Indicator"
+              },
+              "description": "The indicator attribute is used to differentiate between <b>checkbox</b> and <b>toggle</b>.",
+              "default": "'checkbox'",
+              "attribute": "indicator",
+              "reflects": true
+            },
+            {
+              "kind": "method",
+              "name": "staticCheckbox",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "TemplateResult | typeof nothing"
+                }
+              }
+            },
+            {
+              "kind": "method",
+              "name": "staticToggle",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "TemplateResult | typeof nothing"
+                }
+              }
+            },
+            {
+              "kind": "method",
+              "name": "getCheckmarkIcon",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "TemplateResult | typeof nothing"
+                }
+              }
+            },
             {
               "kind": "field",
               "name": "arrowPosition",
@@ -16700,12 +16811,12 @@
           ],
           "events": [
             {
-              "description": "(React: onChange) This event is dispatched when the menuitemradio changes.",
+              "description": "(React: onChange) This event is dispatched when the menuitemcheckbox changes.",
               "name": "change",
               "reactName": "onChange"
             },
             {
-              "description": "(React: onClick) This event is dispatched when the menuitemradio is clicked.",
+              "description": "(React: onClick) This event is dispatched when the menuitemcheckbox is clicked.",
               "name": "click",
               "reactName": "onClick",
               "inheritedFrom": {
@@ -16714,7 +16825,7 @@
               }
             },
             {
-              "description": "(React: onFocus) This event is dispatched when the menuitemradio receives focus.",
+              "description": "(React: onFocus) This event is dispatched when the menuitemcheckbox receives focus.",
               "name": "focus",
               "reactName": "onFocus",
               "inheritedFrom": {
@@ -16747,10 +16858,19 @@
               "type": {
                 "text": "AriaCheckedStates"
               },
-              "description": "The aria-checked attribute is used to indicate that the menuitemradio is checked or not.",
+              "description": "The aria-checked attribute is used to indicate that the menuitemcheckbox is checked or not.",
               "default": "'false'",
               "fieldName": "ariaChecked"
             },
+            {
+              "name": "indicator",
+              "type": {
+                "text": "Indicator"
+              },
+              "description": "The indicator attribute is used to differentiate between <b>checkbox</b> and <b>toggle</b>.",
+              "default": "'checkbox'",
+              "fieldName": "indicator"
+            },
             {
               "name": "arrow-position",
               "type": {
@@ -16904,8 +17024,8 @@
             "name": "MenuItem",
             "module": "/src/components/menuitem/menuitem.component"
           },
-          "tagName": "mdc-menuitemradio",
-          "jsDoc": "/**\n * A menuitemradio component is a checkable menuitem that is used in a menu.\n * A menuitemradio should be checked only one at a time. <br/>\n * There should be no focusable descendants inside this menuitemradio component.\n *\n * The `aria-checked` menuitemradio attribute is used to indicate that the menuitemradio is checked or not.\n *\n * If you want more than one item in a group to be checked, consider using menuitemcheckbox component.\n *\n * If a menuitemradio is disabled, then the `aria-disabled` attribute is set to `true`.\n *\n * @dependency mdc-staticradio\n * @dependency mdc-text\n *\n * @tagname mdc-menuitemradio\n *\n * @event change - (React: onChange) This event is dispatched when the menuitemradio changes.\n * @event click - (React: onClick) This event is dispatched when the menuitemradio is clicked.\n * @event focus - (React: onFocus) This event is dispatched when the menuitemradio receives focus.\n */",
+          "tagName": "mdc-menuitemcheckbox",
+          "jsDoc": "/**\n * A menuitemcheckbox component is a checkable menuitem.\n * There should be no focusable descendants inside this menuitemcheckbox component.\n *\n * The `aria-checked` attribute indicates whether the menuitemcheckbox is checked or not.\n *\n * The `indicator` attribute is used to differentiate between <b>checkbox</b>, <b>checkmark</b> and <b>toggle</b>.\n * By default the `indicator` is set to <b>checkbox</b>.<br/>\n *\n * The checkbox will always be positioned on the leading side of the menuitem label and\n * the toggle and checkmark will always be positioned on the trailing side.\n *\n * The checkbox will have the possible states of `true` or `false`.\n * If the indicator is set to <b>checkmark</b> and if the `aria-checked` attribute is set to `true`,\n * then the checkmark will be displayed. if not, then no indicator will be displayed.\n *\n * If you want only one item in a group to be checked, consider using menuitemradio component.\n *\n * If a menuitemcheckbox is disabled, then the `aria-disabled` attribute is set to `true`.\n *\n * @dependency mdc-staticcheckbox\n * @dependency mdc-statictoggle\n * @dependency mdc-icon\n *\n * @tagname mdc-menuitemcheckbox\n *\n * @cssproperty --mdc-checkmark-indicator-color - Allows customization of the checkmark indicator color\n *\n * @event change - (React: onChange) This event is dispatched when the menuitemcheckbox changes.\n * @event click - (React: onClick) This event is dispatched when the menuitemcheckbox is clicked.\n * @event focus - (React: onFocus) This event is dispatched when the menuitemcheckbox receives focus.\n */",
           "customElement": true,
           "slots": [
             {
@@ -16964,72 +17084,6 @@
                 "module": "src/components/listitem/listitem.component.ts"
               }
             }
-          ],
-          "cssProperties": [
-            {
-              "description": "Allows customization of the default background color.",
-              "name": "--mdc-listitem-default-background-color",
-              "inheritedFrom": {
-                "name": "ListItem",
-                "module": "src/components/listitem/listitem.component.ts"
-              }
-            },
-            {
-              "description": "Allows customization of the background color on hover.",
-              "name": "--mdc-listitem-background-color-hover",
-              "inheritedFrom": {
-                "name": "ListItem",
-                "module": "src/components/listitem/listitem.component.ts"
-              }
-            },
-            {
-              "description": "Allows customization of the background color when pressed.",
-              "name": "--mdc-listitem-background-color-active",
-              "inheritedFrom": {
-                "name": "ListItem",
-                "module": "src/components/listitem/listitem.component.ts"
-              }
-            },
-            {
-              "description": "Allows customization of the primary label, side header and subline text slot color.",
-              "name": "--mdc-listitem-primary-label-color",
-              "inheritedFrom": {
-                "name": "ListItem",
-                "module": "src/components/listitem/listitem.component.ts"
-              }
-            },
-            {
-              "description": "Allows customization of the secondary and tertiary label text slot color.",
-              "name": "--mdc-listitem-secondary-label-color",
-              "inheritedFrom": {
-                "name": "ListItem",
-                "module": "src/components/listitem/listitem.component.ts"
-              }
-            },
-            {
-              "description": "Allows customization of the disabled color.",
-              "name": "--mdc-listitem-disabled-color",
-              "inheritedFrom": {
-                "name": "ListItem",
-                "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-and-right",
-              "inheritedFrom": {
-                "name": "ListItem",
-                "module": "src/components/listitem/listitem.component.ts"
-              }
-            }
           ]
         }
       ],
@@ -17038,90 +17092,20 @@
           "kind": "js",
           "name": "default",
           "declaration": {
-            "name": "MenuItemRadio",
-            "module": "components/menuitemradio/menuitemradio.component.js"
+            "name": "MenuItemCheckbox",
+            "module": "components/menuitemcheckbox/menuitemcheckbox.component.js"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "components/menuitemcheckbox/menuitemcheckbox.component.js",
+      "path": "components/menuitemradio/menuitemradio.component.js",
       "declarations": [
         {
           "kind": "class",
-          "description": "A menuitemcheckbox component is a checkable menuitem.\nThere should be no focusable descendants inside this menuitemcheckbox component.\n\nThe `aria-checked` attribute indicates whether the menuitemcheckbox is checked or not.\n\nThe `indicator` attribute is used to differentiate between <b>checkbox</b>, <b>checkmark</b> and <b>toggle</b>.\nBy default the `indicator` is set to <b>checkbox</b>.<br/>\n\nThe checkbox will always be positioned on the leading side of the menuitem label and\nthe toggle and checkmark will always be positioned on the trailing side.\n\nThe checkbox will have the possible states of `true` or `false`.\nIf the indicator is set to <b>checkmark</b> and if the `aria-checked` attribute is set to `true`,\nthen the checkmark will be displayed. if not, then no indicator will be displayed.\n\nIf you want only one item in a group to be checked, consider using menuitemradio component.\n\nIf a menuitemcheckbox is disabled, then the `aria-disabled` attribute is set to `true`.",
-          "name": "MenuItemCheckbox",
-          "cssProperties": [
-            {
-              "description": "Allows customization of the checkmark indicator color",
-              "name": "--mdc-checkmark-indicator-color"
-            },
-            {
-              "description": "Allows customization of the default background color.",
-              "name": "--mdc-listitem-default-background-color",
-              "inheritedFrom": {
-                "name": "ListItem",
-                "module": "src/components/listitem/listitem.component.ts"
-              }
-            },
-            {
-              "description": "Allows customization of the background color on hover.",
-              "name": "--mdc-listitem-background-color-hover",
-              "inheritedFrom": {
-                "name": "ListItem",
-                "module": "src/components/listitem/listitem.component.ts"
-              }
-            },
-            {
-              "description": "Allows customization of the background color when pressed.",
-              "name": "--mdc-listitem-background-color-active",
-              "inheritedFrom": {
-                "name": "ListItem",
-                "module": "src/components/listitem/listitem.component.ts"
-              }
-            },
-            {
-              "description": "Allows customization of the primary label, side header and subline text slot color.",
-              "name": "--mdc-listitem-primary-label-color",
-              "inheritedFrom": {
-                "name": "ListItem",
-                "module": "src/components/listitem/listitem.component.ts"
-              }
-            },
-            {
-              "description": "Allows customization of the secondary and tertiary label text slot color.",
-              "name": "--mdc-listitem-secondary-label-color",
-              "inheritedFrom": {
-                "name": "ListItem",
-                "module": "src/components/listitem/listitem.component.ts"
-              }
-            },
-            {
-              "description": "Allows customization of the disabled color.",
-              "name": "--mdc-listitem-disabled-color",
-              "inheritedFrom": {
-                "name": "ListItem",
-                "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-and-right",
-              "inheritedFrom": {
-                "name": "ListItem",
-                "module": "src/components/listitem/listitem.component.ts"
-              }
-            }
-          ],
+          "description": "A menuitemradio component is a checkable menuitem that is used in a menu.\nA menuitemradio should be checked only one at a time. <br/>\nThere should be no focusable descendants inside this menuitemradio component.\n\nThe `aria-checked` menuitemradio attribute is used to indicate that the menuitemradio is checked or not.\n\nIf you want more than one item in a group to be checked, consider using menuitemcheckbox component.\n\nIf a menuitemradio is disabled, then the `aria-disabled` attribute is set to `true`.",
+          "name": "MenuItemRadio",
           "members": [
             {
               "kind": "field",
@@ -17129,52 +17113,11 @@
               "type": {
                 "text": "AriaCheckedStates"
               },
-              "description": "The aria-checked attribute is used to indicate that the menuitemcheckbox is checked or not.",
+              "description": "The aria-checked attribute is used to indicate that the menuitemradio is checked or not.",
               "default": "'false'",
               "attribute": "aria-checked",
               "reflects": true
             },
-            {
-              "kind": "field",
-              "name": "indicator",
-              "type": {
-                "text": "Indicator"
-              },
-              "description": "The indicator attribute is used to differentiate between <b>checkbox</b> and <b>toggle</b>.",
-              "default": "'checkbox'",
-              "attribute": "indicator",
-              "reflects": true
-            },
-            {
-              "kind": "method",
-              "name": "staticCheckbox",
-              "privacy": "private",
-              "return": {
-                "type": {
-                  "text": "TemplateResult | typeof nothing"
-                }
-              }
-            },
-            {
-              "kind": "method",
-              "name": "staticToggle",
-              "privacy": "private",
-              "return": {
-                "type": {
-                  "text": "TemplateResult | typeof nothing"
-                }
-              }
-            },
-            {
-              "kind": "method",
-              "name": "getCheckmarkIcon",
-              "privacy": "private",
-              "return": {
-                "type": {
-                  "text": "TemplateResult | typeof nothing"
-                }
-              }
-            },
             {
               "kind": "field",
               "name": "arrowPosition",
@@ -17546,12 +17489,12 @@
           ],
           "events": [
             {
-              "description": "(React: onChange) This event is dispatched when the menuitemcheckbox changes.",
+              "description": "(React: onChange) This event is dispatched when the menuitemradio changes.",
               "name": "change",
               "reactName": "onChange"
             },
             {
-              "description": "(React: onClick) This event is dispatched when the menuitemcheckbox is clicked.",
+              "description": "(React: onClick) This event is dispatched when the menuitemradio is clicked.",
               "name": "click",
               "reactName": "onClick",
               "inheritedFrom": {
@@ -17560,7 +17503,7 @@
               }
             },
             {
-              "description": "(React: onFocus) This event is dispatched when the menuitemcheckbox receives focus.",
+              "description": "(React: onFocus) This event is dispatched when the menuitemradio receives focus.",
               "name": "focus",
               "reactName": "onFocus",
               "inheritedFrom": {
@@ -17593,19 +17536,10 @@
               "type": {
                 "text": "AriaCheckedStates"
               },
-              "description": "The aria-checked attribute is used to indicate that the menuitemcheckbox is checked or not.",
+              "description": "The aria-checked attribute is used to indicate that the menuitemradio is checked or not.",
               "default": "'false'",
               "fieldName": "ariaChecked"
             },
-            {
-              "name": "indicator",
-              "type": {
-                "text": "Indicator"
-              },
-              "description": "The indicator attribute is used to differentiate between <b>checkbox</b> and <b>toggle</b>.",
-              "default": "'checkbox'",
-              "fieldName": "indicator"
-            },
             {
               "name": "arrow-position",
               "type": {
@@ -17759,8 +17693,8 @@
             "name": "MenuItem",
             "module": "/src/components/menuitem/menuitem.component"
           },
-          "tagName": "mdc-menuitemcheckbox",
-          "jsDoc": "/**\n * A menuitemcheckbox component is a checkable menuitem.\n * There should be no focusable descendants inside this menuitemcheckbox component.\n *\n * The `aria-checked` attribute indicates whether the menuitemcheckbox is checked or not.\n *\n * The `indicator` attribute is used to differentiate between <b>checkbox</b>, <b>checkmark</b> and <b>toggle</b>.\n * By default the `indicator` is set to <b>checkbox</b>.<br/>\n *\n * The checkbox will always be positioned on the leading side of the menuitem label and\n * the toggle and checkmark will always be positioned on the trailing side.\n *\n * The checkbox will have the possible states of `true` or `false`.\n * If the indicator is set to <b>checkmark</b> and if the `aria-checked` attribute is set to `true`,\n * then the checkmark will be displayed. if not, then no indicator will be displayed.\n *\n * If you want only one item in a group to be checked, consider using menuitemradio component.\n *\n * If a menuitemcheckbox is disabled, then the `aria-disabled` attribute is set to `true`.\n *\n * @dependency mdc-staticcheckbox\n * @dependency mdc-statictoggle\n * @dependency mdc-icon\n *\n * @tagname mdc-menuitemcheckbox\n *\n * @cssproperty --mdc-checkmark-indicator-color - Allows customization of the checkmark indicator color\n *\n * @event change - (React: onChange) This event is dispatched when the menuitemcheckbox changes.\n * @event click - (React: onClick) This event is dispatched when the menuitemcheckbox is clicked.\n * @event focus - (React: onFocus) This event is dispatched when the menuitemcheckbox receives focus.\n */",
+          "tagName": "mdc-menuitemradio",
+          "jsDoc": "/**\n * A menuitemradio component is a checkable menuitem that is used in a menu.\n * A menuitemradio should be checked only one at a time. <br/>\n * There should be no focusable descendants inside this menuitemradio component.\n *\n * The `aria-checked` menuitemradio attribute is used to indicate that the menuitemradio is checked or not.\n *\n * If you want more than one item in a group to be checked, consider using menuitemcheckbox component.\n *\n * If a menuitemradio is disabled, then the `aria-disabled` attribute is set to `true`.\n *\n * @dependency mdc-staticradio\n * @dependency mdc-text\n *\n * @tagname mdc-menuitemradio\n *\n * @event change - (React: onChange) This event is dispatched when the menuitemradio changes.\n * @event click - (React: onClick) This event is dispatched when the menuitemradio is clicked.\n * @event focus - (React: onFocus) This event is dispatched when the menuitemradio receives focus.\n */",
           "customElement": true,
           "slots": [
             {
@@ -17819,33 +17753,99 @@
                 "module": "src/components/listitem/listitem.component.ts"
               }
             }
-          ]
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "default",
-          "declaration": {
-            "name": "MenuItemCheckbox",
-            "module": "components/menuitemcheckbox/menuitemcheckbox.component.js"
-          }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "components/menupopover/menupopover.component.js",
-      "declarations": [
-        {
-          "kind": "class",
-          "description": "A popover menu component that displays a list of menu items in a floating container.\nIt's designed to work in conjunction with `mdc-menubar` and `mdc-menuitem` to create\naccessible, nested menu structures with the following features:\n- Appears adjacent to the triggering menu item\n- Supports keyboard navigation (arrow keys, Home, End)\n- Manages focus trapping when open\n- Closes on Escape key or outside click\n- Supports both mouse and keyboard interactions\n- Automatically handles ARIA attributes for accessibility\n\nThe component extends `mdc-popover` and adds menu-specific behaviors and styling.\nWhen nested within another `mdc-menupopover`, it automatically adjusts its behavior\nto work as a submenu (right-aligned, shows on hover).\n\nThe orientation of the menu popover is always set to `vertical`.",
-          "name": "MenuPopover",
-          "slots": [
+          ],
+          "cssProperties": [
             {
-              "description": "Contains the menu items to be displayed in the popover",
-              "name": "default"
-            },
+              "description": "Allows customization of the default background color.",
+              "name": "--mdc-listitem-default-background-color",
+              "inheritedFrom": {
+                "name": "ListItem",
+                "module": "src/components/listitem/listitem.component.ts"
+              }
+            },
+            {
+              "description": "Allows customization of the background color on hover.",
+              "name": "--mdc-listitem-background-color-hover",
+              "inheritedFrom": {
+                "name": "ListItem",
+                "module": "src/components/listitem/listitem.component.ts"
+              }
+            },
+            {
+              "description": "Allows customization of the background color when pressed.",
+              "name": "--mdc-listitem-background-color-active",
+              "inheritedFrom": {
+                "name": "ListItem",
+                "module": "src/components/listitem/listitem.component.ts"
+              }
+            },
+            {
+              "description": "Allows customization of the primary label, side header and subline text slot color.",
+              "name": "--mdc-listitem-primary-label-color",
+              "inheritedFrom": {
+                "name": "ListItem",
+                "module": "src/components/listitem/listitem.component.ts"
+              }
+            },
+            {
+              "description": "Allows customization of the secondary and tertiary label text slot color.",
+              "name": "--mdc-listitem-secondary-label-color",
+              "inheritedFrom": {
+                "name": "ListItem",
+                "module": "src/components/listitem/listitem.component.ts"
+              }
+            },
+            {
+              "description": "Allows customization of the disabled color.",
+              "name": "--mdc-listitem-disabled-color",
+              "inheritedFrom": {
+                "name": "ListItem",
+                "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-and-right",
+              "inheritedFrom": {
+                "name": "ListItem",
+                "module": "src/components/listitem/listitem.component.ts"
+              }
+            }
+          ]
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "default",
+          "declaration": {
+            "name": "MenuItemRadio",
+            "module": "components/menuitemradio/menuitemradio.component.js"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "components/menupopover/menupopover.component.js",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "A popover menu component that displays a list of menu items in a floating container.\nIt's designed to work in conjunction with `mdc-menubar` and `mdc-menuitem` to create\naccessible, nested menu structures with the following features:\n- Appears adjacent to the triggering menu item\n- Supports keyboard navigation (arrow keys, Home, End)\n- Manages focus trapping when open\n- Closes on Escape key or outside click\n- Supports both mouse and keyboard interactions\n- Automatically handles ARIA attributes for accessibility\n\nThe component extends `mdc-popover` and adds menu-specific behaviors and styling.\nWhen nested within another `mdc-menupopover`, it automatically adjusts its behavior\nto work as a submenu (right-aligned, shows on hover).\n\nThe orientation of the menu popover is always set to `vertical`.",
+          "name": "MenuPopover",
+          "slots": [
+            {
+              "description": "Contains the menu items to be displayed in the popover",
+              "name": "default"
+            },
             {
               "description": "Default slot for the popover content",
               "name": "",
@@ -29014,123 +29014,149 @@
     },
     {
       "kind": "javascript-module",
-      "path": "components/spinner/spinner.component.js",
+      "path": "components/sidenavigation/sidenavigation.component.js",
       "declarations": [
         {
           "kind": "class",
-          "description": "`mdc-spinner` is loading spinner which is an indeterminate progress indicator, meaning\nit's best for cases where the  progress or duration of a process is variable or unknown.\n\nSpinner Variants:\n- **Standalone (Default)**: Track has a blue color.\n- **Button**: To be used when placed in a button to show that the button’s action is currently in progress.\nTo ensure a minimum 3:1 contrast ratio, the color is changed internally to be the same color as the button’s\nicon or label text.\n\nSpinner Sizes:\n- **Large (96px)**: Use when replacing entire regions or pages that are still loading\n- **MidSize (48px) (Default)**: Use for most use cases.\n- **Small (24px)**: Use for inline with loading text.\n\nCustomisation of the spinner size is allowed by setting the size to undefined and using the --mdc-spinner-size\nCSS property.\n\nSpinner Colors:\n- **Default**: Use for most use cases.\n- **Inverted**: Only to be used within inverted components, such as coachmarks.\n\nRegarding accessibility, if an aria-label is provided, the role will be set to 'img'; if it is absent, the role\nwill be unset\nand aria-hidden will be set to 'true' so the spinner will be ignored by screen readers.",
-          "name": "Spinner",
+          "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-navitemlist` and `mdc-navitem`\n\n### Usage:\nIn a sidenavigation, navitems can be used in the following ways:\n\n1. **Simple navitem** – No submenu or interaction beyond selection.\n\n2. **Navitem with submenu**:\n   - Provide an `id` on the `mdc-navitem`\n   - Set the `triggerId` on the corresponding `mdc-menupopover` to match the navitem'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 navitem (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-navitem` and `mdc-navitemlist`\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": "Allows customization of the default spinner color.",
-              "name": "--mdc-spinner-default-color"
-            },
-            {
-              "description": "Allows customization of the inverted spinner color.",
-              "name": "--mdc-spinner-inverted-color"
-            },
-            {
-              "description": "Allows customization of the spinner Button variant color.",
-              "name": "--mdc-spinner-button-variant-color"
+              "description": "width of the sideNavigation when expanded",
+              "name": "--mdc-sidenavigation-expanded-width"
             },
             {
-              "description": "Allows customization of the spinner size.",
-              "name": "--mdc-spinner-size"
+              "description": "width of the sideNavigation when collpased",
+              "name": "--mdc-sidenavigation-collapsed-width"
             }
           ],
-          "cssParts": [
+          "slots": [
             {
-              "description": "The svg which contains the circle spinner.",
-              "name": "container"
+              "description": "Slot for the scrollable content area of the side navigation.",
+              "name": "scrollable-section"
             },
             {
-              "description": "The circle of the spinner.",
-              "name": "circle"
+              "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": "inverted",
-              "description": "The spinner color can be inverted by setting the inverted attribute to true.",
-              "default": "false",
-              "attribute": "inverted",
+              "name": "Context",
+              "privacy": "public",
+              "static": true,
+              "readonly": true
+            },
+            {
+              "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": "size",
+              "name": "customerName",
               "type": {
-                "text": "SpinnerSize | undefined"
+                "text": "string"
               },
-              "description": "Size of the spinner.\nAcceptable values include:\n\n- 'small'\n- 'midsize'\n- 'large'\n- 'undefined'",
-              "default": "midsize",
-              "attribute": "size",
+              "default": "''",
+              "description": "Name of the customer. This is displayed in the bottom section of the side-navigation component.",
+              "attribute": "customer-name",
               "reflects": true
             },
             {
               "kind": "field",
-              "name": "ariaLabel",
+              "name": "grabberBtnAriaLabel",
               "type": {
-                "text": "string | null"
+                "text": "string | undefined"
               },
-              "default": "null",
-              "description": "Aria-label attribute to be set for accessibility",
-              "attribute": "aria-label"
+              "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": "variant",
+              "name": "parentNavTooltipText",
               "type": {
-                "text": "SpinnerVariant"
+                "text": "string | undefined"
               },
-              "description": "There are 2 variants of spinner: default and button. Their coloring is different.\n- **Standalone (Default)**: Track has a blue color.\n- **Button**: To be used when placed in a button to show that the button’s action is currently in progress.\nTo ensure a minimum 3:1 contrast ratio, change the active indicator color to be the same color as the button’s\nicon or label text.",
-              "default": "standalone",
-              "attribute": "variant",
+              "description": "Tooltip text shown on parent nav items when a child is active.",
+              "attribute": "parent-nav-tooltip-text",
               "reflects": 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"
+            }
+          ],
+          "events": [
+            {
+              "description": "(React: onActiveChange) Dispatched when the active state of the navitem changes.",
+              "name": "activechange",
+              "reactName": "onActiveChange"
             }
           ],
           "attributes": [
             {
-              "name": "inverted",
-              "description": "The spinner color can be inverted by setting the inverted attribute to true.",
-              "default": "false",
-              "fieldName": "inverted"
+              "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": "size",
+              "name": "customer-name",
               "type": {
-                "text": "SpinnerSize | undefined"
+                "text": "string"
               },
-              "description": "Size of the spinner.\nAcceptable values include:\n\n- 'small'\n- 'midsize'\n- 'large'\n- 'undefined'",
-              "default": "midsize",
-              "fieldName": "size"
+              "default": "''",
+              "description": "Name of the customer. This is displayed in the bottom section of the side-navigation component.",
+              "fieldName": "customerName"
             },
             {
-              "name": "aria-label",
+              "name": "grabber-btn-aria-label",
               "type": {
-                "text": "string | null"
+                "text": "string | undefined"
               },
-              "default": "null",
-              "description": "Aria-label attribute to be set for accessibility",
-              "fieldName": "ariaLabel"
+              "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": "variant",
+              "name": "parent-nav-tooltip-text",
               "type": {
-                "text": "SpinnerVariant"
+                "text": "string | undefined"
               },
-              "description": "There are 2 variants of spinner: default and button. Their coloring is different.\n- **Standalone (Default)**: Track has a blue color.\n- **Button**: To be used when placed in a button to show that the button’s action is currently in progress.\nTo ensure a minimum 3:1 contrast ratio, change the active indicator color to be the same color as the button’s\nicon or label text.",
-              "default": "standalone",
-              "fieldName": "variant"
+              "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-spinner",
-          "jsDoc": "/**\n * `mdc-spinner` is loading spinner which is an indeterminate progress indicator, meaning\n * it's best for cases where the  progress or duration of a process is variable or unknown.\n *\n * Spinner Variants:\n * - **Standalone (Default)**: Track has a blue color.\n * - **Button**: To be used when placed in a button to show that the button’s action is currently in progress.\n * To ensure a minimum 3:1 contrast ratio, the color is changed internally to be the same color as the button’s\n * icon or label text.\n *\n * Spinner Sizes:\n * - **Large (96px)**: Use when replacing entire regions or pages that are still loading\n * - **MidSize (48px) (Default)**: Use for most use cases.\n * - **Small (24px)**: Use for inline with loading text.\n *\n * Customisation of the spinner size is allowed by setting the size to undefined and using the --mdc-spinner-size\n * CSS property.\n *\n * Spinner Colors:\n * - **Default**: Use for most use cases.\n * - **Inverted**: Only to be used within inverted components, such as coachmarks.\n *\n * Regarding accessibility, if an aria-label is provided, the role will be set to 'img'; if it is absent, the role\n * will be unset\n * and aria-hidden will be set to 'true' so the spinner will be ignored by screen readers.\n *\n * @tagname mdc-spinner\n *\n * @cssproperty --mdc-spinner-default-color - Allows customization of the default spinner color.\n * @cssproperty --mdc-spinner-inverted-color - Allows customization of the inverted spinner color.\n * @cssproperty --mdc-spinner-button-variant-color - Allows customization of the spinner Button variant color.\n * @cssproperty --mdc-spinner-size - Allows customization of the spinner size.\n *\n * @csspart container - The svg which contains the circle spinner.\n * @csspart circle - The circle of the spinner.\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-navitemlist` and `mdc-navitem`\n *\n * ### Usage:\n * In a sidenavigation, navitems can be used in the following ways:\n *\n * 1. **Simple navitem** – No submenu or interaction beyond selection.\n *\n * 2. **Navitem with submenu**:\n *    - Provide an `id` on the `mdc-navitem`\n *    - Set the `triggerId` on the corresponding `mdc-menupopover` to match the navitem'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 navitem (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-navitem` and `mdc-navitemlist`\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 *\n * @event activechange - (React: onActiveChange) Dispatched when the active state of the navitem 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 * @cssproperty --mdc-sidenavigation-expanded-width - width of the sideNavigation when expanded\n * @cssproperty --mdc-sidenavigation-collapsed-width - width of the sideNavigation when collpased\n */",
           "customElement": true
         }
       ],
@@ -29139,28 +29165,243 @@
           "kind": "js",
           "name": "default",
           "declaration": {
-            "name": "Spinner",
-            "module": "components/spinner/spinner.component.js"
+            "name": "SideNavigation",
+            "module": "components/sidenavigation/sidenavigation.component.js"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "components/staticcheckbox/staticcheckbox.component.js",
+      "path": "components/skeleton/skeleton.component.js",
       "declarations": [
         {
           "kind": "class",
-          "description": "This is a decorative component that is styled to look as a checkbox.\n\nIt has 3 properties - checked, indeterminate and disabled.\n\nWe are using the same styling that has been created for the `mdc-checkbox` component.",
-          "name": "StaticCheckbox",
+          "description": "`mdc-skeleton` is a component that shows a grey placeholder area.\nIt provides visual feedback to users that content is being loaded.\n\n**Skeleton Variants:**\n- **rectangular**: Default variant with 0.25rem border radius\n- **rounded**: Has 0.5rem border radius\n- **circular**: Has 50% border radius for circular shapes\n- **button**: Optimized for button placeholders with 1.25rem border radius\n\n**Sizing Behavior:**\n1. If wrapping content, takes dimensions of wrapped content\n2. Otherwise grows to fill parent container",
+          "name": "Skeleton",
           "cssProperties": [
             {
-              "description": "Border color in high contrast.",
-              "name": "--mdc-staticcheckbox-border-color"
+              "description": "background color of the skeleton",
+              "name": "--mdc-skeleton-background-color"
             },
             {
-              "description": "Background color for a selected checkbox.",
-              "name": "--mdc-staticcheckbox-checked-background-color"
+              "description": "height of the skeleton",
+              "name": "--mdc-skeleton-height"
+            },
+            {
+              "description": "width of the skeleton",
+              "name": "--mdc-skeleton-width"
+            }
+          ],
+          "slots": [
+            {
+              "description": "Content to wrap (optional). When provided, skeleton takes dimensions of this content.",
+              "name": ""
+            }
+          ],
+          "members": [
+            {
+              "kind": "field",
+              "name": "variant",
+              "type": {
+                "text": "SkeletonVariant"
+              },
+              "description": "The variant of skeleton to display\n- **rectangular**: Default rectangular shape with 0.25rem border radius\n- **rounded**: Rounded rectangle with 0.5rem border radius\n- **circular**: Circular shape with 50% border radius\n- **button**: Button placeholder with 1.25rem border radius",
+              "default": "rectangular",
+              "attribute": "variant",
+              "reflects": true
+            },
+            {
+              "kind": "method",
+              "name": "checkSlotContent",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              }
+            }
+          ],
+          "attributes": [
+            {
+              "name": "variant",
+              "type": {
+                "text": "SkeletonVariant"
+              },
+              "description": "The variant of skeleton to display\n- **rectangular**: Default rectangular shape with 0.25rem border radius\n- **rounded**: Rounded rectangle with 0.5rem border radius\n- **circular**: Circular shape with 50% border radius\n- **button**: Button placeholder with 1.25rem border radius",
+              "default": "rectangular",
+              "fieldName": "variant"
+            }
+          ],
+          "superclass": {
+            "name": "Component",
+            "module": "/src/models"
+          },
+          "tagName": "mdc-skeleton",
+          "jsDoc": "/**\n * `mdc-skeleton` is a component that shows a grey placeholder area.\n * It provides visual feedback to users that content is being loaded.\n *\n * **Skeleton Variants:**\n * - **rectangular**: Default variant with 0.25rem border radius\n * - **rounded**: Has 0.5rem border radius\n * - **circular**: Has 50% border radius for circular shapes\n * - **button**: Optimized for button placeholders with 1.25rem border radius\n *\n * **Sizing Behavior:**\n * 1. If wrapping content, takes dimensions of wrapped content\n * 2. Otherwise grows to fill parent container\n *\n * @tagname mdc-skeleton\n *\n * @slot - Content to wrap (optional). When provided, skeleton takes dimensions of this content.\n *\n * @cssproperty --mdc-skeleton-background-color - background color of the skeleton\n * @cssproperty --mdc-skeleton-height - height of the skeleton\n * @cssproperty --mdc-skeleton-width - width of the skeleton\n */",
+          "customElement": true
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "default",
+          "declaration": {
+            "name": "Skeleton",
+            "module": "components/skeleton/skeleton.component.js"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "components/spinner/spinner.component.js",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "`mdc-spinner` is loading spinner which is an indeterminate progress indicator, meaning\nit's best for cases where the  progress or duration of a process is variable or unknown.\n\nSpinner Variants:\n- **Standalone (Default)**: Track has a blue color.\n- **Button**: To be used when placed in a button to show that the button’s action is currently in progress.\nTo ensure a minimum 3:1 contrast ratio, the color is changed internally to be the same color as the button’s\nicon or label text.\n\nSpinner Sizes:\n- **Large (96px)**: Use when replacing entire regions or pages that are still loading\n- **MidSize (48px) (Default)**: Use for most use cases.\n- **Small (24px)**: Use for inline with loading text.\n\nCustomisation of the spinner size is allowed by setting the size to undefined and using the --mdc-spinner-size\nCSS property.\n\nSpinner Colors:\n- **Default**: Use for most use cases.\n- **Inverted**: Only to be used within inverted components, such as coachmarks.\n\nRegarding accessibility, if an aria-label is provided, the role will be set to 'img'; if it is absent, the role\nwill be unset\nand aria-hidden will be set to 'true' so the spinner will be ignored by screen readers.",
+          "name": "Spinner",
+          "cssProperties": [
+            {
+              "description": "Allows customization of the default spinner color.",
+              "name": "--mdc-spinner-default-color"
+            },
+            {
+              "description": "Allows customization of the inverted spinner color.",
+              "name": "--mdc-spinner-inverted-color"
+            },
+            {
+              "description": "Allows customization of the spinner Button variant color.",
+              "name": "--mdc-spinner-button-variant-color"
+            },
+            {
+              "description": "Allows customization of the spinner size.",
+              "name": "--mdc-spinner-size"
+            }
+          ],
+          "cssParts": [
+            {
+              "description": "The svg which contains the circle spinner.",
+              "name": "container"
+            },
+            {
+              "description": "The circle of the spinner.",
+              "name": "circle"
+            }
+          ],
+          "members": [
+            {
+              "kind": "field",
+              "name": "inverted",
+              "description": "The spinner color can be inverted by setting the inverted attribute to true.",
+              "default": "false",
+              "attribute": "inverted",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "size",
+              "type": {
+                "text": "SpinnerSize | undefined"
+              },
+              "description": "Size of the spinner.\nAcceptable values include:\n\n- 'small'\n- 'midsize'\n- 'large'\n- 'undefined'",
+              "default": "midsize",
+              "attribute": "size",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "ariaLabel",
+              "type": {
+                "text": "string | null"
+              },
+              "default": "null",
+              "description": "Aria-label attribute to be set for accessibility",
+              "attribute": "aria-label"
+            },
+            {
+              "kind": "field",
+              "name": "variant",
+              "type": {
+                "text": "SpinnerVariant"
+              },
+              "description": "There are 2 variants of spinner: default and button. Their coloring is different.\n- **Standalone (Default)**: Track has a blue color.\n- **Button**: To be used when placed in a button to show that the button’s action is currently in progress.\nTo ensure a minimum 3:1 contrast ratio, change the active indicator color to be the same color as the button’s\nicon or label text.",
+              "default": "standalone",
+              "attribute": "variant",
+              "reflects": true
+            }
+          ],
+          "attributes": [
+            {
+              "name": "inverted",
+              "description": "The spinner color can be inverted by setting the inverted attribute to true.",
+              "default": "false",
+              "fieldName": "inverted"
+            },
+            {
+              "name": "size",
+              "type": {
+                "text": "SpinnerSize | undefined"
+              },
+              "description": "Size of the spinner.\nAcceptable values include:\n\n- 'small'\n- 'midsize'\n- 'large'\n- 'undefined'",
+              "default": "midsize",
+              "fieldName": "size"
+            },
+            {
+              "name": "aria-label",
+              "type": {
+                "text": "string | null"
+              },
+              "default": "null",
+              "description": "Aria-label attribute to be set for accessibility",
+              "fieldName": "ariaLabel"
+            },
+            {
+              "name": "variant",
+              "type": {
+                "text": "SpinnerVariant"
+              },
+              "description": "There are 2 variants of spinner: default and button. Their coloring is different.\n- **Standalone (Default)**: Track has a blue color.\n- **Button**: To be used when placed in a button to show that the button’s action is currently in progress.\nTo ensure a minimum 3:1 contrast ratio, change the active indicator color to be the same color as the button’s\nicon or label text.",
+              "default": "standalone",
+              "fieldName": "variant"
+            }
+          ],
+          "superclass": {
+            "name": "Component",
+            "module": "/src/models"
+          },
+          "tagName": "mdc-spinner",
+          "jsDoc": "/**\n * `mdc-spinner` is loading spinner which is an indeterminate progress indicator, meaning\n * it's best for cases where the  progress or duration of a process is variable or unknown.\n *\n * Spinner Variants:\n * - **Standalone (Default)**: Track has a blue color.\n * - **Button**: To be used when placed in a button to show that the button’s action is currently in progress.\n * To ensure a minimum 3:1 contrast ratio, the color is changed internally to be the same color as the button’s\n * icon or label text.\n *\n * Spinner Sizes:\n * - **Large (96px)**: Use when replacing entire regions or pages that are still loading\n * - **MidSize (48px) (Default)**: Use for most use cases.\n * - **Small (24px)**: Use for inline with loading text.\n *\n * Customisation of the spinner size is allowed by setting the size to undefined and using the --mdc-spinner-size\n * CSS property.\n *\n * Spinner Colors:\n * - **Default**: Use for most use cases.\n * - **Inverted**: Only to be used within inverted components, such as coachmarks.\n *\n * Regarding accessibility, if an aria-label is provided, the role will be set to 'img'; if it is absent, the role\n * will be unset\n * and aria-hidden will be set to 'true' so the spinner will be ignored by screen readers.\n *\n * @tagname mdc-spinner\n *\n * @cssproperty --mdc-spinner-default-color - Allows customization of the default spinner color.\n * @cssproperty --mdc-spinner-inverted-color - Allows customization of the inverted spinner color.\n * @cssproperty --mdc-spinner-button-variant-color - Allows customization of the spinner Button variant color.\n * @cssproperty --mdc-spinner-size - Allows customization of the spinner size.\n *\n * @csspart container - The svg which contains the circle spinner.\n * @csspart circle - The circle of the spinner.\n */",
+          "customElement": true
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "default",
+          "declaration": {
+            "name": "Spinner",
+            "module": "components/spinner/spinner.component.js"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "components/staticcheckbox/staticcheckbox.component.js",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "This is a decorative component that is styled to look as a checkbox.\n\nIt has 3 properties - checked, indeterminate and disabled.\n\nWe are using the same styling that has been created for the `mdc-checkbox` component.",
+          "name": "StaticCheckbox",
+          "cssProperties": [
+            {
+              "description": "Border color in high contrast.",
+              "name": "--mdc-staticcheckbox-border-color"
+            },
+            {
+              "description": "Background color for a selected checkbox.",
+              "name": "--mdc-staticcheckbox-checked-background-color"
             },
             {
               "description": "Background color for a disabled checkbox.",
@@ -29437,247 +29678,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-navitemlist` and `mdc-navitem`\n\n### Usage:\nIn a sidenavigation, navitems can be used in the following ways:\n\n1. **Simple navitem** – No submenu or interaction beyond selection.\n\n2. **Navitem with submenu**:\n   - Provide an `id` on the `mdc-navitem`\n   - Set the `triggerId` on the corresponding `mdc-menupopover` to match the navitem'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 navitem (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-navitem` and `mdc-navitemlist`\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 collpased",
-              "name": "--mdc-sidenavigation-collapsed-width"
-            }
-          ],
-          "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": "Context",
-              "privacy": "public",
-              "static": true,
-              "readonly": true
-            },
-            {
-              "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": "customerName",
-              "type": {
-                "text": "string"
-              },
-              "default": "''",
-              "description": "Name of the customer. This is displayed in the bottom section of the side-navigation component.",
-              "attribute": "customer-name",
-              "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": "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"
-            }
-          ],
-          "events": [
-            {
-              "description": "(React: onActiveChange) Dispatched when the active state of the navitem 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": "customer-name",
-              "type": {
-                "text": "string"
-              },
-              "default": "''",
-              "description": "Name of the customer. This is displayed in the bottom section of the side-navigation component.",
-              "fieldName": "customerName"
-            },
-            {
-              "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-navitemlist` and `mdc-navitem`\n *\n * ### Usage:\n * In a sidenavigation, navitems can be used in the following ways:\n *\n * 1. **Simple navitem** – No submenu or interaction beyond selection.\n *\n * 2. **Navitem with submenu**:\n *    - Provide an `id` on the `mdc-navitem`\n *    - Set the `triggerId` on the corresponding `mdc-menupopover` to match the navitem'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 navitem (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-navitem` and `mdc-navitemlist`\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 *\n * @event activechange - (React: onActiveChange) Dispatched when the active state of the navitem 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 * @cssproperty --mdc-sidenavigation-expanded-width - width of the sideNavigation when expanded\n * @cssproperty --mdc-sidenavigation-collapsed-width - width of the sideNavigation when collpased\n */",
-          "customElement": true
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "default",
-          "declaration": {
-            "name": "SideNavigation",
-            "module": "components/sidenavigation/sidenavigation.component.js"
-          }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "components/skeleton/skeleton.component.js",
-      "declarations": [
-        {
-          "kind": "class",
-          "description": "`mdc-skeleton` is a component that shows a grey placeholder area.\nIt provides visual feedback to users that content is being loaded.\n\n**Skeleton Variants:**\n- **rectangular**: Default variant with 0.25rem border radius\n- **rounded**: Has 0.5rem border radius\n- **circular**: Has 50% border radius for circular shapes\n- **button**: Optimized for button placeholders with 1.25rem border radius\n\n**Sizing Behavior:**\n1. If wrapping content, takes dimensions of wrapped content\n2. Otherwise grows to fill parent container",
-          "name": "Skeleton",
-          "cssProperties": [
-            {
-              "description": "background color of the skeleton",
-              "name": "--mdc-skeleton-background-color"
-            },
-            {
-              "description": "height of the skeleton",
-              "name": "--mdc-skeleton-height"
-            },
-            {
-              "description": "width of the skeleton",
-              "name": "--mdc-skeleton-width"
-            }
-          ],
-          "slots": [
-            {
-              "description": "Content to wrap (optional). When provided, skeleton takes dimensions of this content.",
-              "name": ""
-            }
-          ],
-          "members": [
-            {
-              "kind": "field",
-              "name": "variant",
-              "type": {
-                "text": "SkeletonVariant"
-              },
-              "description": "The variant of skeleton to display\n- **rectangular**: Default rectangular shape with 0.25rem border radius\n- **rounded**: Rounded rectangle with 0.5rem border radius\n- **circular**: Circular shape with 50% border radius\n- **button**: Button placeholder with 1.25rem border radius",
-              "default": "rectangular",
-              "attribute": "variant",
-              "reflects": true
-            },
-            {
-              "kind": "method",
-              "name": "checkSlotContent",
-              "privacy": "private",
-              "return": {
-                "type": {
-                  "text": "void"
-                }
-              }
-            }
-          ],
-          "attributes": [
-            {
-              "name": "variant",
-              "type": {
-                "text": "SkeletonVariant"
-              },
-              "description": "The variant of skeleton to display\n- **rectangular**: Default rectangular shape with 0.25rem border radius\n- **rounded**: Rounded rectangle with 0.5rem border radius\n- **circular**: Circular shape with 50% border radius\n- **button**: Button placeholder with 1.25rem border radius",
-              "default": "rectangular",
-              "fieldName": "variant"
-            }
-          ],
-          "superclass": {
-            "name": "Component",
-            "module": "/src/models"
-          },
-          "tagName": "mdc-skeleton",
-          "jsDoc": "/**\n * `mdc-skeleton` is a component that shows a grey placeholder area.\n * It provides visual feedback to users that content is being loaded.\n *\n * **Skeleton Variants:**\n * - **rectangular**: Default variant with 0.25rem border radius\n * - **rounded**: Has 0.5rem border radius\n * - **circular**: Has 50% border radius for circular shapes\n * - **button**: Optimized for button placeholders with 1.25rem border radius\n *\n * **Sizing Behavior:**\n * 1. If wrapping content, takes dimensions of wrapped content\n * 2. Otherwise grows to fill parent container\n *\n * @tagname mdc-skeleton\n *\n * @slot - Content to wrap (optional). When provided, skeleton takes dimensions of this content.\n *\n * @cssproperty --mdc-skeleton-background-color - background color of the skeleton\n * @cssproperty --mdc-skeleton-height - height of the skeleton\n * @cssproperty --mdc-skeleton-width - width of the skeleton\n */",
-          "customElement": true
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "default",
-          "declaration": {
-            "name": "Skeleton",
-            "module": "components/skeleton/skeleton.component.js"
-          }
-        }
-      ]
-    },
     {
       "kind": "javascript-module",
       "path": "components/statictoggle/statictoggle.component.js",