@momentum-design/components 0.81.1 → 0.81.2

package/dist/custom-elements.json

@@ -14941,231 +14941,6 @@
         }
       ]
     },
-    {
-      "kind": "javascript-module",
-      "path": "components/menu/menu.component.js",
-      "declarations": [
-        {
-          "kind": "class",
-          "description": "mdc-menu component is used to display a group of menu items. It is used as a container to wrap menu items.\nIt contains the menu header component.",
-          "name": "Menu",
-          "slots": [
-            {
-              "description": "This is a default/unnamed slot",
-              "name": "default",
-              "inheritedFrom": {
-                "name": "List",
-                "module": "src/components/list/list.component.ts"
-              }
-            }
-          ],
-          "members": [
-            {
-              "kind": "field",
-              "name": "dataAriaLabel",
-              "type": {
-                "text": "string | null"
-              },
-              "default": "null",
-              "description": "Defines a string value that labels the current element.\nThe Aria-Label attribute to be set for accessibility.",
-              "attribute": "data-aria-label",
-              "reflects": true,
-              "inheritedFrom": {
-                "name": "List",
-                "module": "components/list/list.component.js"
-              }
-            },
-            {
-              "kind": "field",
-              "name": "headerText",
-              "type": {
-                "text": "string | undefined"
-              },
-              "description": "The header text of the list.",
-              "attribute": "header-text",
-              "reflects": true,
-              "inheritedFrom": {
-                "name": "List",
-                "module": "components/list/list.component.js"
-              }
-            },
-            {
-              "kind": "method",
-              "name": "handleKeyDown",
-              "privacy": "private",
-              "return": {
-                "type": {
-                  "text": "void"
-                }
-              },
-              "parameters": [
-                {
-                  "name": "event",
-                  "type": {
-                    "text": "KeyboardEvent"
-                  },
-                  "description": "The keyboard event."
-                }
-              ],
-              "description": "Handles the keydown event on the list element.\nIf the key is 'ArrowUp' or 'ArrowDown', it focuses to the previous or next list item\nand sets the active tabindex of the list item.\nPrevents the default event behavior.",
-              "inheritedFrom": {
-                "name": "List",
-                "module": "components/list/list.component.js"
-              }
-            },
-            {
-              "kind": "method",
-              "name": "getCurrentIndex",
-              "privacy": "private",
-              "return": {
-                "type": {
-                  "text": ""
-                }
-              },
-              "parameters": [
-                {
-                  "name": "target",
-                  "type": {
-                    "text": "EventTarget | null"
-                  },
-                  "description": "The target element to find the index of."
-                }
-              ],
-              "description": "Returns the index of the given target in the listItems array.\nIf the target is not a list item, but a child element of a list item,\nit returns the index of the parent list item.",
-              "inheritedFrom": {
-                "name": "List",
-                "module": "components/list/list.component.js"
-              }
-            },
-            {
-              "kind": "method",
-              "name": "getNewIndexBasedOnKey",
-              "privacy": "private",
-              "return": {
-                "type": {
-                  "text": ""
-                }
-              },
-              "parameters": [
-                {
-                  "name": "key",
-                  "type": {
-                    "text": "string"
-                  },
-                  "description": "The key that was pressed."
-                },
-                {
-                  "name": "currentIndex",
-                  "type": {
-                    "text": "number"
-                  },
-                  "description": "The current index of the focused list item."
-                },
-                {
-                  "name": "wrappedDivsCount",
-                  "type": {
-                    "text": "number"
-                  },
-                  "description": "The total number of list items."
-                }
-              ],
-              "description": "Calculates a new index based on the pressed keyboard key.\nSupports navigation keys for moving focus within a list.",
-              "inheritedFrom": {
-                "name": "List",
-                "module": "components/list/list.component.js"
-              }
-            },
-            {
-              "kind": "method",
-              "name": "handleMouseClick",
-              "privacy": "protected",
-              "return": {
-                "type": {
-                  "text": "void"
-                }
-              },
-              "parameters": [
-                {
-                  "name": "event",
-                  "type": {
-                    "text": "MouseEvent"
-                  },
-                  "description": "The mouse event."
-                }
-              ],
-              "description": "Handles the mouse click event on the list element.\nFinds the index of the target element in the list items array and calls\n`resetTabIndexAndSetActiveTabIndex` with that index.",
-              "inheritedFrom": {
-                "name": "List",
-                "module": "components/list/list.component.js"
-              }
-            },
-            {
-              "kind": "method",
-              "name": "resetTabIndexAndSetActiveTabIndex",
-              "privacy": "private",
-              "parameters": [
-                {
-                  "name": "newIndex",
-                  "type": {
-                    "text": "number"
-                  },
-                  "description": "The index of the new active element in the list."
-                }
-              ],
-              "description": "Resets all list items tabindex to -1 and sets the tabindex of the\nelement at the given index to 0, effectively setting the active\nelement. This is used when navigating the list via keyboard.",
-              "inheritedFrom": {
-                "name": "List",
-                "module": "components/list/list.component.js"
-              }
-            }
-          ],
-          "superclass": {
-            "name": "List",
-            "module": "/src/components/list/list.component"
-          },
-          "tagName": "mdc-menu",
-          "jsDoc": "/**\n * mdc-menu component is used to display a group of menu items. It is used as a container to wrap menu items.\n * It contains the menu header component.\n *\n * @dependency mdc-text\n *\n * @tagname mdc-menu\n *\n * @slot default - This is a default/unnamed slot\n */",
-          "customElement": true,
-          "attributes": [
-            {
-              "name": "data-aria-label",
-              "type": {
-                "text": "string | null"
-              },
-              "default": "null",
-              "description": "Defines a string value that labels the current element.\nThe Aria-Label attribute to be set for accessibility.",
-              "fieldName": "dataAriaLabel",
-              "inheritedFrom": {
-                "name": "List",
-                "module": "src/components/list/list.component.ts"
-              }
-            },
-            {
-              "name": "header-text",
-              "type": {
-                "text": "string | undefined"
-              },
-              "description": "The header text of the list.",
-              "fieldName": "headerText",
-              "inheritedFrom": {
-                "name": "List",
-                "module": "src/components/list/list.component.ts"
-              }
-            }
-          ]
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "default",
-          "declaration": {
-            "name": "Menu",
-            "module": "components/menu/menu.component.js"
-          }
-        }
-      ]
-    },
     {
       "kind": "javascript-module",
       "path": "components/menubar/menubar.component.js",
@@ -16536,176 +16311,65 @@
     },
     {
       "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": "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": [
             {
-              "description": "Allows customization of the checkmark indicator color",
-              "name": "--mdc-checkmark-indicator-color"
+              "kind": "field",
+              "name": "ariaChecked",
+              "type": {
+                "text": "AriaCheckedStates"
+              },
+              "description": "The aria-checked attribute is used to indicate that the menuitemradio is checked or not.",
+              "default": "'false'",
+              "attribute": "aria-checked",
+              "reflects": true
             },
             {
-              "description": "Allows customization of the default background color.",
-              "name": "--mdc-listitem-default-background-color",
+              "kind": "field",
+              "name": "arrowPosition",
+              "type": {
+                "text": "ArrowPositions | undefined"
+              },
+              "description": "Defines where the arrow icon will appear.\n- `'leading'`: Icon appears on the leading edge (start).\n- `'trailing'`: Icon appears on the trailing edge (end).\n\nIf not set, no arrow is displayed.",
+              "attribute": "arrow-position",
+              "reflects": true,
               "inheritedFrom": {
-                "name": "ListItem",
-                "module": "src/components/listitem/listitem.component.ts"
+                "name": "MenuItem",
+                "module": "components/menuitem/menuitem.component.js"
               }
             },
             {
-              "description": "Allows customization of the background color on hover.",
-              "name": "--mdc-listitem-background-color-hover",
+              "kind": "field",
+              "name": "arrowDirection",
+              "type": {
+                "text": "ArrowDirections | undefined"
+              },
+              "description": "Defines the direction the arrow icon points.\n- `'positive'`: Arrow points toward the trailing side.\n- `'negative'`: Arrow points toward the leading side.",
+              "attribute": "arrow-direction",
+              "reflects": true,
               "inheritedFrom": {
-                "name": "ListItem",
-                "module": "src/components/listitem/listitem.component.ts"
+                "name": "MenuItem",
+                "module": "components/menuitem/menuitem.component.js"
               }
             },
             {
-              "description": "Allows customization of the background color when pressed.",
-              "name": "--mdc-listitem-background-color-active",
+              "kind": "method",
+              "name": "renderTrailingControls",
+              "privacy": "protected",
+              "description": "Renders the trailing controls slot and optionally the trailing arrow icon,\nbased on `arrowPosition` and `arrowDirection`.",
+              "return": {
+                "type": {
+                  "text": ""
+                }
+              },
               "inheritedFrom": {
                 "name": "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",
-              "name": "ariaChecked",
-              "type": {
-                "text": "AriaCheckedStates"
-              },
-              "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",
-              "type": {
-                "text": "ArrowPositions | undefined"
-              },
-              "description": "Defines where the arrow icon will appear.\n- `'leading'`: Icon appears on the leading edge (start).\n- `'trailing'`: Icon appears on the trailing edge (end).\n\nIf not set, no arrow is displayed.",
-              "attribute": "arrow-position",
-              "reflects": true,
-              "inheritedFrom": {
-                "name": "MenuItem",
-                "module": "components/menuitem/menuitem.component.js"
-              }
-            },
-            {
-              "kind": "field",
-              "name": "arrowDirection",
-              "type": {
-                "text": "ArrowDirections | undefined"
-              },
-              "description": "Defines the direction the arrow icon points.\n- `'positive'`: Arrow points toward the trailing side.\n- `'negative'`: Arrow points toward the leading side.",
-              "attribute": "arrow-direction",
-              "reflects": true,
-              "inheritedFrom": {
-                "name": "MenuItem",
-                "module": "components/menuitem/menuitem.component.js"
-              }
-            },
-            {
-              "kind": "method",
-              "name": "renderTrailingControls",
-              "privacy": "protected",
-              "description": "Renders the trailing controls slot and optionally the trailing arrow icon,\nbased on `arrowPosition` and `arrowDirection`.",
-              "return": {
-                "type": {
-                  "text": ""
-                }
-              },
-              "inheritedFrom": {
-                "name": "ListItem",
-                "module": "components/listitem/listitem.component.js"
+                "module": "components/listitem/listitem.component.js"
               }
             },
             {
@@ -17036,12 +16700,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": {
@@ -17050,7 +16714,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": {
@@ -17083,19 +16747,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": {
@@ -17249,8 +16904,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": [
             {
@@ -17309,111 +16964,288 @@
                 "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/menuitemradio/menuitemradio.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",
-          "members": [
-            {
-              "kind": "field",
-              "name": "ariaChecked",
-              "type": {
-                "text": "AriaCheckedStates"
-              },
-              "description": "The aria-checked attribute is used to indicate that the menuitemradio is checked or not.",
-              "default": "'false'",
-              "attribute": "aria-checked",
-              "reflects": true
-            },
+          ],
+          "cssProperties": [
             {
-              "kind": "field",
-              "name": "arrowPosition",
-              "type": {
-                "text": "ArrowPositions | undefined"
-              },
-              "description": "Defines where the arrow icon will appear.\n- `'leading'`: Icon appears on the leading edge (start).\n- `'trailing'`: Icon appears on the trailing edge (end).\n\nIf not set, no arrow is displayed.",
-              "attribute": "arrow-position",
-              "reflects": true,
+              "description": "Allows customization of the default background color.",
+              "name": "--mdc-listitem-default-background-color",
               "inheritedFrom": {
-                "name": "MenuItem",
-                "module": "components/menuitem/menuitem.component.js"
+                "name": "ListItem",
+                "module": "src/components/listitem/listitem.component.ts"
               }
             },
             {
-              "kind": "field",
-              "name": "arrowDirection",
-              "type": {
-                "text": "ArrowDirections | undefined"
-              },
-              "description": "Defines the direction the arrow icon points.\n- `'positive'`: Arrow points toward the trailing side.\n- `'negative'`: Arrow points toward the leading side.",
-              "attribute": "arrow-direction",
-              "reflects": true,
+              "description": "Allows customization of the background color on hover.",
+              "name": "--mdc-listitem-background-color-hover",
               "inheritedFrom": {
-                "name": "MenuItem",
-                "module": "components/menuitem/menuitem.component.js"
+                "name": "ListItem",
+                "module": "src/components/listitem/listitem.component.ts"
               }
             },
             {
-              "kind": "method",
-              "name": "renderTrailingControls",
-              "privacy": "protected",
-              "description": "Renders the trailing controls slot and optionally the trailing arrow icon,\nbased on `arrowPosition` and `arrowDirection`.",
-              "return": {
-                "type": {
-                  "text": ""
-                }
-              },
+              "description": "Allows customization of the background color when pressed.",
+              "name": "--mdc-listitem-background-color-active",
               "inheritedFrom": {
                 "name": "ListItem",
-                "module": "components/listitem/listitem.component.js"
+                "module": "src/components/listitem/listitem.component.ts"
               }
             },
             {
-              "kind": "method",
-              "name": "renderLeadingControls",
-              "privacy": "protected",
-              "description": "Renders the leading controls slot and optionally the leading arrow icon,\nbased on `arrowPosition` and `arrowDirection`.",
-              "return": {
-                "type": {
-                  "text": ""
-                }
-              },
+              "description": "Allows customization of the primary label, side header and subline text slot color.",
+              "name": "--mdc-listitem-primary-label-color",
               "inheritedFrom": {
                 "name": "ListItem",
-                "module": "components/listitem/listitem.component.js"
+                "module": "src/components/listitem/listitem.component.ts"
               }
             },
             {
-              "kind": "field",
-              "name": "disabled",
-              "type": {
-                "text": "boolean | undefined"
-              },
-              "description": "Indicates whether the component is disabled.\nWhen the component is disabled for user interaction; it is not focusable or clickable.",
-              "default": "undefined",
-              "attribute": "disabled",
-              "reflects": true,
+              "description": "Allows customization of the secondary and tertiary label text slot color.",
+              "name": "--mdc-listitem-secondary-label-color",
               "inheritedFrom": {
                 "name": "ListItem",
-                "module": "components/listitem/listitem.component.js"
+                "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/menuitemcheckbox/menuitemcheckbox.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"
+              }
+            }
+          ],
+          "members": [
+            {
+              "kind": "field",
+              "name": "ariaChecked",
+              "type": {
+                "text": "AriaCheckedStates"
+              },
+              "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",
+              "type": {
+                "text": "ArrowPositions | undefined"
+              },
+              "description": "Defines where the arrow icon will appear.\n- `'leading'`: Icon appears on the leading edge (start).\n- `'trailing'`: Icon appears on the trailing edge (end).\n\nIf not set, no arrow is displayed.",
+              "attribute": "arrow-position",
+              "reflects": true,
+              "inheritedFrom": {
+                "name": "MenuItem",
+                "module": "components/menuitem/menuitem.component.js"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "arrowDirection",
+              "type": {
+                "text": "ArrowDirections | undefined"
+              },
+              "description": "Defines the direction the arrow icon points.\n- `'positive'`: Arrow points toward the trailing side.\n- `'negative'`: Arrow points toward the leading side.",
+              "attribute": "arrow-direction",
+              "reflects": true,
+              "inheritedFrom": {
+                "name": "MenuItem",
+                "module": "components/menuitem/menuitem.component.js"
+              }
+            },
+            {
+              "kind": "method",
+              "name": "renderTrailingControls",
+              "privacy": "protected",
+              "description": "Renders the trailing controls slot and optionally the trailing arrow icon,\nbased on `arrowPosition` and `arrowDirection`.",
+              "return": {
+                "type": {
+                  "text": ""
+                }
+              },
+              "inheritedFrom": {
+                "name": "ListItem",
+                "module": "components/listitem/listitem.component.js"
+              }
+            },
+            {
+              "kind": "method",
+              "name": "renderLeadingControls",
+              "privacy": "protected",
+              "description": "Renders the leading controls slot and optionally the leading arrow icon,\nbased on `arrowPosition` and `arrowDirection`.",
+              "return": {
+                "type": {
+                  "text": ""
+                }
+              },
+              "inheritedFrom": {
+                "name": "ListItem",
+                "module": "components/listitem/listitem.component.js"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "disabled",
+              "type": {
+                "text": "boolean | undefined"
+              },
+              "description": "Indicates whether the component is disabled.\nWhen the component is disabled for user interaction; it is not focusable or clickable.",
+              "default": "undefined",
+              "attribute": "disabled",
+              "reflects": true,
+              "inheritedFrom": {
+                "name": "ListItem",
+                "module": "components/listitem/listitem.component.js"
               }
             },
             {
@@ -17714,12 +17546,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": {
@@ -17728,7 +17560,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": {
@@ -17761,10 +17593,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": {
@@ -17918,8 +17759,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": [
             {
@@ -17963,82 +17804,16 @@
               }
             },
             {
-              "description": "slot for list item subline text.",
-              "name": "trailing-text-subline",
-              "inheritedFrom": {
-                "name": "ListItem",
-                "module": "src/components/listitem/listitem.component.ts"
-              }
-            },
-            {
-              "description": "slot for list item controls to appear of trailing end.",
-              "name": "trailing-controls",
-              "inheritedFrom": {
-                "name": "ListItem",
-                "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",
+              "description": "slot for list item subline text.",
+              "name": "trailing-text-subline",
               "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",
+              "description": "slot for list item controls to appear of trailing end.",
+              "name": "trailing-controls",
               "inheritedFrom": {
                 "name": "ListItem",
                 "module": "src/components/listitem/listitem.component.ts"
@@ -18052,8 +17827,8 @@
           "kind": "js",
           "name": "default",
           "declaration": {
-            "name": "MenuItemRadio",
-            "module": "components/menuitemradio/menuitemradio.component.js"
+            "name": "MenuItemCheckbox",
+            "module": "components/menuitemcheckbox/menuitemcheckbox.component.js"
           }
         }
       ]
@@ -29212,258 +28987,17 @@
               "name": "FormInternalsMixin",
               "module": "/src/utils/mixins/FormInternalsMixin"
             },
-            {
-              "name": "DataAriaLabelMixin",
-              "module": "/src/utils/mixins/DataAriaLabelMixin"
-            }
-          ],
-          "superclass": {
-            "name": "FormfieldWrapper",
-            "module": "/src/components/formfieldwrapper/formfieldwrapper.component"
-          },
-          "tagName": "mdc-select",
-          "jsDoc": "/**\n * The mdc-select component is a dropdown selection control that allows users to pick an option from a predefined list.\n * It is designed to work with `mdc-option` for individual options and `mdc-optgroup` for grouping related options.\n * The component ensures accessibility and usability while handling various use cases,\n * including long text truncation with tooltip support.\n *\n * @dependency mdc-button\n * @dependency mdc-icon\n * @dependency mdc-popover\n * @dependency mdc-text\n * @dependency mdc-toggletip\n *\n * @tagname mdc-select\n *\n * @slot default - This is a default/unnamed slot for options and/or option group.\n *\n * @event click - (React: onClick) This event is dispatched when the select is clicked.\n * @event change - (React: onChange) This event is dispatched when the select is changed.\n * @event keydown - (React: onKeyDown) This event is dispatched when a key is pressed down on the select.\n * @event focus - (React: onFocus) This event is dispatched when the select receives focus.\n */",
-          "customElement": true
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "default",
-          "declaration": {
-            "name": "Select",
-            "module": "components/select/select.component.js"
-          }
-        }
-      ]
-    },
-    {
-      "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"
+            {
+              "name": "DataAriaLabelMixin",
+              "module": "/src/utils/mixins/DataAriaLabelMixin"
             }
           ],
           "superclass": {
-            "name": "Component",
-            "module": "/src/models"
+            "name": "FormfieldWrapper",
+            "module": "/src/components/formfieldwrapper/formfieldwrapper.component"
           },
-          "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 */",
+          "tagName": "mdc-select",
+          "jsDoc": "/**\n * The mdc-select component is a dropdown selection control that allows users to pick an option from a predefined list.\n * It is designed to work with `mdc-option` for individual options and `mdc-optgroup` for grouping related options.\n * The component ensures accessibility and usability while handling various use cases,\n * including long text truncation with tooltip support.\n *\n * @dependency mdc-button\n * @dependency mdc-icon\n * @dependency mdc-popover\n * @dependency mdc-text\n * @dependency mdc-toggletip\n *\n * @tagname mdc-select\n *\n * @slot default - This is a default/unnamed slot for options and/or option group.\n *\n * @event click - (React: onClick) This event is dispatched when the select is clicked.\n * @event change - (React: onChange) This event is dispatched when the select is changed.\n * @event keydown - (React: onKeyDown) This event is dispatched when a key is pressed down on the select.\n * @event focus - (React: onFocus) This event is dispatched when the select receives focus.\n */",
           "customElement": true
         }
       ],
@@ -29472,8 +29006,8 @@
           "kind": "js",
           "name": "default",
           "declaration": {
-            "name": "Skeleton",
-            "module": "components/skeleton/skeleton.component.js"
+            "name": "Select",
+            "module": "components/select/select.component.js"
           }
         }
       ]
@@ -29903,6 +29437,247 @@
         }
       ]
     },
+    {
+      "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",