@momentum-design/components 0.123.5 → 0.124.1

package/dist/custom-elements.json

@@ -4838,6 +4838,77 @@
         }
       ]
     },
+    {
+      "kind": "javascript-module",
+      "path": "components/bullet/bullet.component.js",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "Bullet component, which is a visual marker\nand be used to organize and present items in a list format.",
+          "name": "Bullet",
+          "cssProperties": [
+            {
+              "description": "background color of the bullet",
+              "name": "--mdc-bullet-background-color"
+            },
+            {
+              "description": "small size value of the bullet",
+              "name": "--mdc-bullet-size-small"
+            },
+            {
+              "description": "medium size value of the bullet",
+              "name": "--mdc-bullet-size-medium"
+            },
+            {
+              "description": "large size value of the bullet",
+              "name": "--mdc-bullet-size-large"
+            }
+          ],
+          "members": [
+            {
+              "kind": "field",
+              "name": "size",
+              "type": {
+                "text": "Size"
+              },
+              "privacy": "public",
+              "description": "Size of the bullet\n\nPossible values: 'small', 'medium', 'large'",
+              "default": "small",
+              "attribute": "size",
+              "reflects": true
+            }
+          ],
+          "attributes": [
+            {
+              "name": "size",
+              "type": {
+                "text": "Size"
+              },
+              "description": "Size of the bullet\n\nPossible values: 'small', 'medium', 'large'",
+              "default": "small",
+              "fieldName": "size"
+            }
+          ],
+          "superclass": {
+            "name": "Component",
+            "module": "/src/models"
+          },
+          "tagName": "mdc-bullet",
+          "jsDoc": "/**\n * Bullet component, which is a visual marker\n * and be used to organize and present items in a list format.\n *\n * @tagname mdc-bullet\n *\n * @cssproperty --mdc-bullet-background-color - background color of the bullet\n * @cssproperty --mdc-bullet-size-small - small size value of the bullet\n * @cssproperty --mdc-bullet-size-medium - medium size value of the bullet\n * @cssproperty --mdc-bullet-size-large - large size value of the bullet\n */",
+          "customElement": true
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "default",
+          "declaration": {
+            "name": "Bullet",
+            "module": "components/bullet/bullet.component.js"
+          }
+        }
+      ]
+    },
     {
       "kind": "javascript-module",
       "path": "components/brandvisual/brandvisual.component.js",
@@ -5014,77 +5085,6 @@
         }
       ]
     },
-    {
-      "kind": "javascript-module",
-      "path": "components/bullet/bullet.component.js",
-      "declarations": [
-        {
-          "kind": "class",
-          "description": "Bullet component, which is a visual marker\nand be used to organize and present items in a list format.",
-          "name": "Bullet",
-          "cssProperties": [
-            {
-              "description": "background color of the bullet",
-              "name": "--mdc-bullet-background-color"
-            },
-            {
-              "description": "small size value of the bullet",
-              "name": "--mdc-bullet-size-small"
-            },
-            {
-              "description": "medium size value of the bullet",
-              "name": "--mdc-bullet-size-medium"
-            },
-            {
-              "description": "large size value of the bullet",
-              "name": "--mdc-bullet-size-large"
-            }
-          ],
-          "members": [
-            {
-              "kind": "field",
-              "name": "size",
-              "type": {
-                "text": "Size"
-              },
-              "privacy": "public",
-              "description": "Size of the bullet\n\nPossible values: 'small', 'medium', 'large'",
-              "default": "small",
-              "attribute": "size",
-              "reflects": true
-            }
-          ],
-          "attributes": [
-            {
-              "name": "size",
-              "type": {
-                "text": "Size"
-              },
-              "description": "Size of the bullet\n\nPossible values: 'small', 'medium', 'large'",
-              "default": "small",
-              "fieldName": "size"
-            }
-          ],
-          "superclass": {
-            "name": "Component",
-            "module": "/src/models"
-          },
-          "tagName": "mdc-bullet",
-          "jsDoc": "/**\n * Bullet component, which is a visual marker\n * and be used to organize and present items in a list format.\n *\n * @tagname mdc-bullet\n *\n * @cssproperty --mdc-bullet-background-color - background color of the bullet\n * @cssproperty --mdc-bullet-size-small - small size value of the bullet\n * @cssproperty --mdc-bullet-size-medium - medium size value of the bullet\n * @cssproperty --mdc-bullet-size-large - large size value of the bullet\n */",
-          "customElement": true
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "default",
-          "declaration": {
-            "name": "Bullet",
-            "module": "components/bullet/bullet.component.js"
-          }
-        }
-      ]
-    },
     {
       "kind": "javascript-module",
       "path": "components/button/button.component.js",
@@ -29170,6 +29170,24 @@
           "kind": "class",
           "description": "`mdc-menusection` is a container element used to group a set of menu items.\n\nThis component supports a mix of `menuitem`, `menuitemcheckbox`, and `menuitemradio` components.\n\n- If multiple `menuitemradio` components are slotted into the section, the group enforces a single-selection rule:\n  only one radio item can be selected at a time.\n- If `menuitemcheckbox` components are included, their checked state can be toggled independently.",
           "name": "MenuSection",
+          "cssProperties": [
+            {
+              "description": "Sets the margin block of the divider.",
+              "name": "--mdc-menusection-divider-margin-block"
+            },
+            {
+              "description": "Sets the gap between items in the menusection.",
+              "name": "--mdc-menusection-gap"
+            },
+            {
+              "description": "Sets the width of the divider.",
+              "name": "--mdc-menusection-divider-width"
+            },
+            {
+              "description": "Sets the padding of the header, if present.",
+              "name": "--mdc-menusection-header-padding"
+            }
+          ],
           "cssParts": [
             {
               "description": "The header of the menusection.",
@@ -29311,7 +29329,7 @@
             "module": "/src/models"
           },
           "tagName": "mdc-menusection",
-          "jsDoc": "/**\n * `mdc-menusection` is a container element used to group a set of menu items.\n *\n * This component supports a mix of `menuitem`, `menuitemcheckbox`, and `menuitemradio` components.\n *\n * - If multiple `menuitemradio` components are slotted into the section, the group enforces a single-selection rule:\n *   only one radio item can be selected at a time.\n * - If `menuitemcheckbox` components are included, their checked state can be toggled independently.\n *\n * @tagname mdc-menusection\n *\n * @slot - Default slot for inserting `menuitem`, `menuitemcheckbox`, or `menuitemradio`\n *\n * @event change - (React: onChange) This event is dispatched when a `menuitemcheckbox`, or `menuitemradio` changes.\n * @event action - (React: onAction) This event is dispatched when a `menuitem` selected.\n *\n * @csspart header - The header of the menusection.\n * @csspart align-header - The header of the menusection when it is aligned to the start.\n * @csspart container - The container of the menusection.\n * @csspart divider - The divider of the menusection.\n */",
+          "jsDoc": "/**\n * `mdc-menusection` is a container element used to group a set of menu items.\n *\n * This component supports a mix of `menuitem`, `menuitemcheckbox`, and `menuitemradio` components.\n *\n * - If multiple `menuitemradio` components are slotted into the section, the group enforces a single-selection rule:\n *   only one radio item can be selected at a time.\n * - If `menuitemcheckbox` components are included, their checked state can be toggled independently.\n *\n * @tagname mdc-menusection\n *\n * @slot - Default slot for inserting `menuitem`, `menuitemcheckbox`, or `menuitemradio`\n *\n * @event change - (React: onChange) This event is dispatched when a `menuitemcheckbox`, or `menuitemradio` changes.\n * @event action - (React: onAction) This event is dispatched when a `menuitem` selected.\n *\n * @csspart header - The header of the menusection.\n * @csspart align-header - The header of the menusection when it is aligned to the start.\n * @csspart container - The container of the menusection.\n * @csspart divider - The divider of the menusection.\n *\n * @cssproperty --mdc-menusection-divider-margin-block - Sets the margin block of the divider.\n * @cssproperty --mdc-menusection-gap - Sets the gap between items in the menusection.\n * @cssproperty --mdc-menusection-divider-width - Sets the width of the divider.\n * @cssproperty --mdc-menusection-header-padding - Sets the padding of the header, if present.\n */",
           "customElement": true
         }
       ],
@@ -29332,24 +29350,44 @@
       "declarations": [
         {
           "kind": "class",
-          "description": "`mdc-navmenuitem` is a menuitem styled to work as a navigation tab.\nIt supports a leading icon, optional badge and dynamic text rendering.\n\nNote: `mdc-navmenuitem` is intended to be used inside `mdc-menubar` as part of the sideNavigation\ncomponent. Its structure, spacing, and interactions are designed to align with\nthe visual and functional requirements of side navigation layouts.\n\nBy providing the tooltip-text attribute, a tooltip will be displayed on hover of the navmenuitem. This tooltip is useful when an active navmenuitem is present within a submenu of the sidenavigation component.",
+          "description": "`mdc-navmenuitem` is a menuitem styled to work as a navigation tab.\nIt supports a leading icon, optional badge and dynamic text rendering.\n\nThe navmenuitem can be in an active or inactive state, indicating whether it is currently selected.\n\nNote: `mdc-navmenuitem` is intended to be used inside `mdc-menubar` as part of the sideNavigation\ncomponent. Its structure, spacing, and interactions are designed to align with\nthe visual and functional requirements of side navigation layouts.\n\nBy providing the tooltip-text attribute, a tooltip will be displayed on hover of the navmenuitem. This tooltip is useful when an active navmenuitem is present within a submenu of the sidenavigation component.",
           "name": "NavMenuItem",
           "cssProperties": [
             {
-              "description": "Text color of the navmenuitem in its normal state.",
-              "name": "--mdc-navmenuitem-color"
+              "description": "Width of the navmenuitem when expanded.",
+              "name": "--mdc-navmenuitem-in-sidenav-expanded-width"
+            },
+            {
+              "description": "Left margin of the navmenuitem, when expanded.",
+              "name": "--mdc-navmenuitem-in-sidenav-expanded-margin-left"
+            },
+            {
+              "description": "Right margin of the navmenuitem, when expanded.",
+              "name": "--mdc-navmenuitem-in-sidenav-expanded-margin-right"
+            },
+            {
+              "description": "Width of the navmenuitem when collapsed.",
+              "name": "--mdc-navmenuitem-in-sidenav-collapsed-width"
             },
             {
-              "description": "Border color of the navmenuitem in its normal state.",
-              "name": "--mdc-navmenuitem-border-color"
+              "description": "Left margin of the navmenuitem, when collapsed.",
+              "name": "--mdc-navmenuitem-in-sidenav-collapsed-margin-left"
+            },
+            {
+              "description": "Right margin of the navmenuitem, when collapsed.",
+              "name": "--mdc-navmenuitem-in-sidenav-collapsed-margin-right"
+            },
+            {
+              "description": "Text color of the navmenuitem in its normal state.",
+              "name": "--mdc-navmenuitem-color"
             },
             {
               "description": "Text color of the navmenuitem when disabled.",
               "name": "--mdc-navmenuitem-disabled-color"
             },
             {
-              "description": "Width of the navmenuitem when expanded.",
-              "name": "--mdc-navmenuitem-expanded-width"
+              "description": "Background color of the active nav item in its rest state.",
+              "name": "--mdc-navmenuitem-rest-active-background-color"
             },
             {
               "description": "Background color of the navmenuitem when hovered.",
@@ -29375,10 +29413,6 @@
               "description": "Background color of the active navmenuitem when disabled.",
               "name": "--mdc-navmenuitem-disabled-active-background-color"
             },
-            {
-              "description": "Background color of the active nav item in its rest state.",
-              "name": "--mdc-navmenuitem-rest-active-background-color"
-            },
             {
               "description": "Allows customization of the default background color.",
               "name": "--mdc-listitem-default-background-color",
@@ -29549,7 +29583,7 @@
               "type": {
                 "text": "boolean | undefined"
               },
-              "description": "The navmenuitem's active state indicates whether it is currently toggled on (active) or off (inactive).\nWhen the active state is true, the navmenuitem is considered to be in an active state, meaning it is toggled on.\nConversely, when the active state is false, the navmenuitem is in an inactive state, indicating it is toggled off.",
+              "description": "The navmenuitem's active state indicates whether it is currently toggled on (active) or off (inactive).\nIf cannotActivate is set to true, the surrounding SideNavigation will\nnot set this property when the navmenuitem is clicked.",
               "default": "undefined",
               "attribute": "active",
               "reflects": true,
@@ -29558,6 +29592,27 @@
                 "module": "components/listitem/listitem.component.js"
               }
             },
+            {
+              "kind": "field",
+              "name": "cannotActivate",
+              "type": {
+                "text": "boolean | undefined"
+              },
+              "description": "When set to true, prevents the navmenuitem from being activated.\nThis is useful for cases where the navmenuitem is used as a button\nor link, where not the content on the current page is changing.\nBy default this is set to false, making the navmenuitem activatable (= aria-current gets set when active).",
+              "default": "false",
+              "attribute": "cannot-activate",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "iconName",
+              "type": {
+                "text": "IconNames | undefined"
+              },
+              "description": "Name of the leading icon (= filename).\n\nIf no `icon-name` is provided, no icon will be rendered.",
+              "attribute": "icon-name",
+              "reflects": true
+            },
             {
               "kind": "field",
               "name": "badgeType",
@@ -29600,6 +29655,17 @@
               "attribute": "nav-id",
               "reflects": true
             },
+            {
+              "kind": "field",
+              "name": "showLabel",
+              "type": {
+                "text": "boolean | undefined"
+              },
+              "description": "Determines whether the nav item is expanded or not.\n\nIf used in SideNavigation, this property is automatically managed by the SideNavigation component.",
+              "default": "undefined",
+              "attribute": "show-label",
+              "reflects": true
+            },
             {
               "kind": "field",
               "name": "ariaLabel",
@@ -29616,7 +29682,8 @@
               "type": {
                 "text": "boolean | undefined"
               },
-              "description": "When set to true, prevents the automatic setting of the `aria-current` attribute on the navmenuitem\nwhen it becomes active. This is useful for cases where you want to maintain the visual active styling\nbut need to handle aria-current attribute differently or not at all.\nThe active button styling will still be applied regardless of this setting.",
+              "description": "When set to true, prevents the automatic setting of the `aria-current` attribute on the navmenuitem\nwhen it becomes active. This is useful for cases where you want to maintain the visual active styling\nbut need to handle aria-current attribute differently or not at all.\nThe active button styling will still be applied regardless of this setting.\n\nIf you also want to prevent activation, use the `cannot-activate` property instead.",
+              "default": "undefined",
               "attribute": "disable-aria-current",
               "reflects": true
             },
@@ -29626,14 +29693,52 @@
               "type": {
                 "text": "string | undefined"
               },
-              "description": "The tooltip text is displayed on hover of the list item.",
+              "description": "The tooltip text is displayed on hover of the nav item.\nWill only be shown when the `show-label` property is false\n(i.e., when the nav item is collapsed).",
               "attribute": "tooltip-text",
               "reflects": true
             },
             {
-              "kind": "method",
-              "name": "removeTooltip",
-              "privacy": "private"
+              "kind": "field",
+              "name": "tooltipPlacement",
+              "type": {
+                "text": "PopoverPlacement"
+              },
+              "default": "'right'",
+              "description": "The placement of the tooltip relative to the nav item.",
+              "attribute": "tooltip-placement",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "tooltipAppearance",
+              "type": {
+                "text": "'when-collapsed' | 'always'"
+              },
+              "default": "'when-collapsed'",
+              "description": "The appearance behavior of the tooltip.\nOptions are 'when-collapsed' (default) or 'always'.",
+              "attribute": "tooltip-appearance",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "tooltipBoundaryPadding",
+              "type": {
+                "text": "number | undefined"
+              },
+              "description": "The boundary padding for the tooltip.\nThis defines the minimum distance in pixels between the tooltip and the edges of the viewport.",
+              "default": "0",
+              "attribute": "tooltip-boundary-padding",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "isActiveParentTooltipText",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "Tooltip text shown when this parent NavItem has a active child navitem.\nThis is useful for nested navmenuitems within a sidenavigation.\n\nMake sure to include what was normally used as the `tooltip-text` in this property.\ni.e. `Messaging, contains active navmenuitem`",
+              "attribute": "is-active-parent-tooltip-text",
+              "reflects": true
             },
             {
               "kind": "method",
@@ -29645,6 +29750,11 @@
                 }
               }
             },
+            {
+              "kind": "method",
+              "name": "removeTooltip",
+              "privacy": "private"
+            },
             {
               "kind": "method",
               "name": "isNested",
@@ -29668,34 +29778,23 @@
             },
             {
               "kind": "method",
-              "name": "renderTextLabel",
+              "name": "getFilledIconName",
               "privacy": "private",
-              "parameters": [
-                {
-                  "name": "label",
-                  "type": {
-                    "text": "string | undefined"
-                  }
-                }
-              ]
-            },
-            {
-              "kind": "method",
-              "name": "renderArrowIcon",
-              "privacy": "private",
-              "parameters": [
-                {
-                  "name": "showLabel",
-                  "type": {
-                    "text": "boolean | undefined"
-                  }
+              "return": {
+                "type": {
+                  "text": "IconNames | undefined"
                 }
-              ]
+              }
             },
             {
               "kind": "method",
               "name": "renderBadge",
               "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "TemplateResult | typeof nothing"
+                }
+              },
               "parameters": [
                 {
                   "name": "showLabel",
@@ -29705,19 +29804,6 @@
                 }
               ]
             },
-            {
-              "kind": "field",
-              "name": "iconName",
-              "type": {
-                "text": "IconNames | undefined"
-              },
-              "description": "Name of the icon (= filename).\n\nIf no `icon-name` is provided, no icon will be rendered.",
-              "attribute": "icon-name",
-              "inheritedFrom": {
-                "name": "IconNameMixin",
-                "module": "utils/mixins/IconNameMixin.js"
-              }
-            },
             {
               "kind": "field",
               "name": "arrowPosition",
@@ -30219,7 +30305,7 @@
               "type": {
                 "text": "boolean | undefined"
               },
-              "description": "The navmenuitem's active state indicates whether it is currently toggled on (active) or off (inactive).\nWhen the active state is true, the navmenuitem is considered to be in an active state, meaning it is toggled on.\nConversely, when the active state is false, the navmenuitem is in an inactive state, indicating it is toggled off.",
+              "description": "The navmenuitem's active state indicates whether it is currently toggled on (active) or off (inactive).\nIf cannotActivate is set to true, the surrounding SideNavigation will\nnot set this property when the navmenuitem is clicked.",
               "default": "undefined",
               "fieldName": "active",
               "inheritedFrom": {
@@ -30227,6 +30313,23 @@
                 "module": "src/components/listitem/listitem.component.ts"
               }
             },
+            {
+              "name": "cannot-activate",
+              "type": {
+                "text": "boolean | undefined"
+              },
+              "description": "When set to true, prevents the navmenuitem from being activated.\nThis is useful for cases where the navmenuitem is used as a button\nor link, where not the content on the current page is changing.\nBy default this is set to false, making the navmenuitem activatable (= aria-current gets set when active).",
+              "default": "false",
+              "fieldName": "cannotActivate"
+            },
+            {
+              "name": "icon-name",
+              "type": {
+                "text": "IconNames | undefined"
+              },
+              "description": "Name of the leading icon (= filename).\n\nIf no `icon-name` is provided, no icon will be rendered.",
+              "fieldName": "iconName"
+            },
             {
               "name": "badge-type",
               "type": {
@@ -30261,6 +30364,15 @@
               "default": "undefined",
               "fieldName": "navId"
             },
+            {
+              "name": "show-label",
+              "type": {
+                "text": "boolean | undefined"
+              },
+              "description": "Determines whether the nav item is expanded or not.\n\nIf used in SideNavigation, this property is automatically managed by the SideNavigation component.",
+              "default": "undefined",
+              "fieldName": "showLabel"
+            },
             {
               "name": "aria-label",
               "type": {
@@ -30275,7 +30387,8 @@
               "type": {
                 "text": "boolean | undefined"
               },
-              "description": "When set to true, prevents the automatic setting of the `aria-current` attribute on the navmenuitem\nwhen it becomes active. This is useful for cases where you want to maintain the visual active styling\nbut need to handle aria-current attribute differently or not at all.\nThe active button styling will still be applied regardless of this setting.",
+              "description": "When set to true, prevents the automatic setting of the `aria-current` attribute on the navmenuitem\nwhen it becomes active. This is useful for cases where you want to maintain the visual active styling\nbut need to handle aria-current attribute differently or not at all.\nThe active button styling will still be applied regardless of this setting.\n\nIf you also want to prevent activation, use the `cannot-activate` property instead.",
+              "default": "undefined",
               "fieldName": "disableAriaCurrent"
             },
             {
@@ -30283,20 +30396,43 @@
               "type": {
                 "text": "string | undefined"
               },
-              "description": "The tooltip text is displayed on hover of the list item.",
+              "description": "The tooltip text is displayed on hover of the nav item.\nWill only be shown when the `show-label` property is false\n(i.e., when the nav item is collapsed).",
               "fieldName": "tooltipText"
             },
             {
-              "name": "icon-name",
+              "name": "tooltip-placement",
               "type": {
-                "text": "IconNames | undefined"
+                "text": "PopoverPlacement"
               },
-              "description": "Name of the icon (= filename).\n\nIf no `icon-name` is provided, no icon will be rendered.",
-              "fieldName": "iconName",
-              "inheritedFrom": {
-                "name": "IconNameMixin",
-                "module": "src/utils/mixins/IconNameMixin.ts"
-              }
+              "default": "'right'",
+              "description": "The placement of the tooltip relative to the nav item.",
+              "fieldName": "tooltipPlacement"
+            },
+            {
+              "name": "tooltip-appearance",
+              "type": {
+                "text": "'when-collapsed' | 'always'"
+              },
+              "default": "'when-collapsed'",
+              "description": "The appearance behavior of the tooltip.\nOptions are 'when-collapsed' (default) or 'always'.",
+              "fieldName": "tooltipAppearance"
+            },
+            {
+              "name": "tooltip-boundary-padding",
+              "type": {
+                "text": "number | undefined"
+              },
+              "description": "The boundary padding for the tooltip.\nThis defines the minimum distance in pixels between the tooltip and the edges of the viewport.",
+              "default": "0",
+              "fieldName": "tooltipBoundaryPadding"
+            },
+            {
+              "name": "is-active-parent-tooltip-text",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "Tooltip text shown when this parent NavItem has a active child navitem.\nThis is useful for nested navmenuitems within a sidenavigation.\n\nMake sure to include what was normally used as the `tooltip-text` in this property.\ni.e. `Messaging, contains active navmenuitem`",
+              "fieldName": "isActiveParentTooltipText"
             },
             {
               "name": "arrow-position",
@@ -30472,18 +30608,12 @@
               }
             }
           ],
-          "mixins": [
-            {
-              "name": "IconNameMixin",
-              "module": "/src/utils/mixins/IconNameMixin"
-            }
-          ],
           "superclass": {
             "name": "MenuItem",
             "module": "/src/components/menuitem/menuitem.component"
           },
           "tagName": "mdc-navmenuitem",
-          "jsDoc": "/**\n * `mdc-navmenuitem` is a menuitem styled to work as a navigation tab.\n * It supports a leading icon, optional badge and dynamic text rendering.\n *\n * Note: `mdc-navmenuitem` is intended to be used inside `mdc-menubar` as part of the sideNavigation\n * component. Its structure, spacing, and interactions are designed to align with\n * the visual and functional requirements of side navigation layouts.\n *\n * By providing the tooltip-text attribute, a tooltip will be displayed on hover of the navmenuitem. This tooltip is useful when an active navmenuitem is present within a submenu of the sidenavigation component.\n *\n * @tagname mdc-navmenuitem\n *\n * @dependency mdc-icon\n * @dependency mdc-text\n * @dependency mdc-badge\n * @dependency mdc-tooltip\n *\n * @event click - (React: onClick) This event is dispatched when the navmenuitem is clicked.\n * @event keydown - (React: onKeyDown) This event is dispatched when a key is pressed down on the navmenuitem.\n * @event keyup - (React: onKeyUp) This event is dispatched when a key is released on the navmenuitem.\n * @event focus - (React: onFocus) This event is dispatched when the navmenuitem receives focus.\n * @event activechange - (React: onActiveChange) Dispatched when the active state of the navmenuitem changes.\n *\n * @cssproperty --mdc-navmenuitem-color - Text color of the navmenuitem in its normal state.\n * @cssproperty --mdc-navmenuitem-border-color - Border color of the navmenuitem in its normal state.\n * @cssproperty --mdc-navmenuitem-disabled-color - Text color of the navmenuitem when disabled.\n * @cssproperty --mdc-navmenuitem-expanded-width - Width of the navmenuitem when expanded.\n * @cssproperty --mdc-navmenuitem-hover-background-color - Background color of the navmenuitem when hovered.\n * @cssproperty --mdc-navmenuitem-hover-active-background-color - Background color of the active navmenuitem when hovered.\n * @cssproperty --mdc-navmenuitem-pressed-background-color - Background color of the navmenuitem when pressed.\n * @cssproperty --mdc-navmenuitem-pressed-active-background-color - Background color of the active navmenuitem when pressed.\n * @cssproperty --mdc-navmenuitem-disabled-background-color - Background color of the navmenuitem when disabled.\n * @cssproperty --mdc-navmenuitem-disabled-active-background-color - Background color of the active navmenuitem when disabled.\n * @cssproperty --mdc-navmenuitem-rest-active-background-color - Background color of the active nav item in its rest state.\n *\n * @csspart arrow - The arrow of the navmenuitem.\n * @csspart badge - The badge of the navmenuitem.\n * @csspart icon-container - The container of the icon.\n * @csspart text-container - The container of the text.\n * @csspart trailing-arrow - The trailing arrow of the navmenuitem.\n */",
+          "jsDoc": "/**\n * `mdc-navmenuitem` is a menuitem styled to work as a navigation tab.\n * It supports a leading icon, optional badge and dynamic text rendering.\n *\n * The navmenuitem can be in an active or inactive state, indicating whether it is currently selected.\n *\n * Note: `mdc-navmenuitem` is intended to be used inside `mdc-menubar` as part of the sideNavigation\n * component. Its structure, spacing, and interactions are designed to align with\n * the visual and functional requirements of side navigation layouts.\n *\n * By providing the tooltip-text attribute, a tooltip will be displayed on hover of the navmenuitem. This tooltip is useful when an active navmenuitem is present within a submenu of the sidenavigation component.\n *\n * @tagname mdc-navmenuitem\n *\n * @dependency mdc-icon\n * @dependency mdc-text\n * @dependency mdc-badge\n * @dependency mdc-tooltip\n *\n * @event click - (React: onClick) This event is dispatched when the navmenuitem is clicked.\n * @event keydown - (React: onKeyDown) This event is dispatched when a key is pressed down on the navmenuitem.\n * @event keyup - (React: onKeyUp) This event is dispatched when a key is released on the navmenuitem.\n * @event focus - (React: onFocus) This event is dispatched when the navmenuitem receives focus.\n * @event activechange - (React: onActiveChange) Dispatched when the active state of the navmenuitem changes.\n *\n * @cssproperty --mdc-navmenuitem-in-sidenav-expanded-width - Width of the navmenuitem when expanded.\n * @cssproperty --mdc-navmenuitem-in-sidenav-expanded-margin-left - Left margin of the navmenuitem, when expanded.\n * @cssproperty --mdc-navmenuitem-in-sidenav-expanded-margin-right - Right margin of the navmenuitem, when expanded.\n * @cssproperty --mdc-navmenuitem-in-sidenav-collapsed-width - Width of the navmenuitem when collapsed.\n * @cssproperty --mdc-navmenuitem-in-sidenav-collapsed-margin-left - Left margin of the navmenuitem, when collapsed.\n * @cssproperty --mdc-navmenuitem-in-sidenav-collapsed-margin-right - Right margin of the navmenuitem, when collapsed.\n * @cssproperty --mdc-navmenuitem-color - Text color of the navmenuitem in its normal state.\n * @cssproperty --mdc-navmenuitem-disabled-color - Text color of the navmenuitem when disabled.\n * @cssproperty --mdc-navmenuitem-rest-active-background-color - Background color of the active nav item in its rest state.\n * @cssproperty --mdc-navmenuitem-hover-background-color - Background color of the navmenuitem when hovered.\n * @cssproperty --mdc-navmenuitem-hover-active-background-color - Background color of the active navmenuitem when hovered.\n * @cssproperty --mdc-navmenuitem-pressed-background-color - Background color of the navmenuitem when pressed.\n * @cssproperty --mdc-navmenuitem-pressed-active-background-color - Background color of the active navmenuitem when pressed.\n * @cssproperty --mdc-navmenuitem-disabled-background-color - Background color of the navmenuitem when disabled.\n * @cssproperty --mdc-navmenuitem-disabled-active-background-color - Background color of the active navmenuitem when disabled.\n *\n * @csspart arrow - The arrow of the navmenuitem.\n * @csspart badge - The badge of the navmenuitem.\n * @csspart icon-container - The container of the icon.\n * @csspart text-container - The container of the text.\n * @csspart trailing-arrow - The trailing arrow of the navmenuitem.\n */",
           "customElement": true,
           "slots": [
             {
@@ -42859,17 +42989,41 @@
       "declarations": [
         {
           "kind": "class",
-          "description": "The `mdc-sidenavigation` component provides a vertically stacked navigation experience,\ntypically used in layouts with persistent or collapsible sidebars.\n\n## Features:\n- Supports four layout variants: `fixed-collapsed`, `fixed-expanded`, `flexible`, and `hidden`\n- Toggleable expand/collapse behavior\n- Displays brand logo and customer name\n- Serves as a context provider for descendant components - `mdc-menubar` and `mdc-navmenuitem`\n\n### Usage:\nIn a sidenavigation, navmenuitems can be used in the following ways:\n\n1. **Simple navmenuitem** – No submenu or interaction beyond selection.\n\n2. **NavMenuItem with submenu**:\n   - Provide an `id` on the `mdc-navmenuitem`\n   - Set the `triggerId` on the corresponding `mdc-menupopover` to match the navmenuitem's `id`\n   - Set `parent-nav-tooltip-text` with appropriate text that will display when a child menu item\n     inside the nested menupopover is active, conveying which submenu item is currently selected\n\n3. **Actionable navmenuitem (no submenu)**:\n   - Performs an action such as navigation or alert trigger\n   - Set `disable-aria-current=\"true\"` to maintain visual active state without navigation behavior\n\n### Recommendations:\n- Use `mdc-text` for section headers\n- Use `mdc-divider` with the attribute `variant=\"gradient\"` for section dividers\n- For the brand logo, use an informative icon. Refer to `Momentum Informative Icons`\n\n#### Accessibility Notes:\n- Always provide meaningful `aria-label` attributes for both `mdc-navmenuitem` and `mdc-menubar`\nto ensure screen reader support\n- Set `grabber-btn-aria-label` to provide accessible labels for the expand/collapse grabber button",
+          "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 five layout variants: `fixed-collapsed`, `fixed-expanded`, `flexible`, `flexible-on-hover`, and `hidden`\n- Toggleable expand/collapse behavior\n- Displays brand logo and customer name\n- Serves as a context provider for descendant components - `mdc-menubar` and `mdc-navmenuitem`\n\n### Usage:\nIn a sidenavigation, navmenuitems can be used in the following ways:\n\n1. **Simple navmenuitem** – No submenu or interaction beyond selection.\n\n2. **NavMenuItem with submenu**:\n   - Provide an `id` on the `mdc-navmenuitem`\n   - Set the `triggerId` on the corresponding `mdc-menupopover` to match the navmenuitem's `id`\n   - Set `parent-nav-tooltip-text` with appropriate text that will display when a child menu item\n     inside the nested menupopover is active, conveying which submenu item is currently selected\n\n3. **Actionable navmenuitem (no submenu)**:\n   - Performs an action such as navigation or alert trigger\n   - Set `disable-aria-current=\"true\"` to maintain visual active state without navigation behavior\n\n### Recommendations:\n- Use `mdc-text` for section headers\n- Use `mdc-divider` with the attribute `variant=\"gradient\"` for section dividers\n- For the brand logo, use an informative icon. Refer to `Momentum Informative Icons`\n\n#### Accessibility Notes:\n- Always provide meaningful `aria-label` attributes for both `mdc-navmenuitem` and `mdc-menubar`\nto ensure screen reader support\n- Set `grabber-btn-aria-label` to provide accessible labels for the expand/collapse grabber button",
           "name": "SideNavigation",
           "cssProperties": [
             {
               "description": "width of the sideNavigation when expanded",
               "name": "--mdc-sidenavigation-expanded-width"
             },
+            {
+              "description": "padding for the left side of navmenuitems, when expanded",
+              "name": "--mdc-sidenavigation-expanded-left-padding"
+            },
+            {
+              "description": "padding for the right side of navmenuitems, when expanded",
+              "name": "--mdc-sidenavigation-expanded-right-padding"
+            },
             {
               "description": "width of the sideNavigation when collapsed",
               "name": "--mdc-sidenavigation-collapsed-width"
             },
+            {
+              "description": "padding for the left side of navmenuitems, when collapsed",
+              "name": "--mdc-sidenavigation-collapsed-left-padding"
+            },
+            {
+              "description": "padding for the right side of navmenuitems, when collapsed",
+              "name": "--mdc-sidenavigation-collapsed-right-padding"
+            },
+            {
+              "description": "padding for the top of the scrollable section - note: if setting to 0 focus ring might be cut off",
+              "name": "--mdc-sidenavigation-top-padding"
+            },
+            {
+              "description": "padding for the bottom of the scrollable section",
+              "name": "--mdc-sidenavigation-bottom-padding"
+            },
             {
               "description": "z-index of the vertical divider button",
               "name": "--mdc-sidenavigation-vertical-divider-button-z-index"
@@ -42885,13 +43039,21 @@
               "name": "scrollable-section"
             },
             {
-              "description": "The fixed section of the side navigation.",
-              "name": "fixed-section"
+              "description": "The menubar inside the scrollable section.",
+              "name": "scrollable-menubar"
             },
             {
               "description": "The divider between the scrollable and fixed sections.",
               "name": "separator"
             },
+            {
+              "description": "The fixed section of the side navigation.",
+              "name": "fixed-section"
+            },
+            {
+              "description": "The menubar inside the fixed section.",
+              "name": "fixed-menubar"
+            },
             {
               "description": "The container wrapping the brand logo and footer text.",
               "name": "brand-logo-container"
@@ -42914,10 +43076,18 @@
               "description": "Slot for the scrollable content area of the side navigation.",
               "name": "scrollable-section"
             },
+            {
+              "description": "Slot for the menubar inside the scrollable section.",
+              "name": "scrollable-menubar"
+            },
             {
               "description": "Slot for the fixed content area of the side navigation.",
               "name": "fixed-section"
             },
+            {
+              "description": "Slot for the menubar inside the fixed section.",
+              "name": "fixed-menubar"
+            },
             {
               "description": "Slot for the brand logo (e.g., icon or img).",
               "name": "brand-logo"
@@ -42930,7 +43100,7 @@
               "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.",
+              "description": "Five 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- **flexible-on-hover**: Similar to flexible, but the grabber button is only visible on hover or focus.\n- **hidden**: Removes the sidenavigation from the DOM.",
               "default": "flexible",
               "attribute": "variant",
               "reflects": true
@@ -42942,10 +43112,21 @@
                 "text": "string"
               },
               "default": "''",
-              "description": "Displays footer text in the bottom section of the sidenavigation.",
+              "description": "Displays footer text in the bottom section of the sidenavigation.\n\nNote: if footerText is not provided, the bottom brand logo section will not be rendered.",
               "attribute": "footer-text",
               "reflects": true
             },
+            {
+              "kind": "field",
+              "name": "expanded",
+              "type": {
+                "text": "boolean | undefined"
+              },
+              "description": "Determines whether the sideNavigation is expanded or not.\n\nNOTE: For `fixed-collapsed` and `fixed-expanded` variants, this property is hard set to `false` and `true` respectively.\nFor `flexible` and `flexible-on-hover` variants, this property can be toggled / controlled from parent.",
+              "default": "true",
+              "attribute": "expanded",
+              "reflects": true
+            },
             {
               "kind": "field",
               "name": "grabberBtnAriaLabel",
@@ -42959,14 +43140,33 @@
             },
             {
               "kind": "field",
-              "name": "parentNavTooltipText",
+              "name": "hideFixedSectionDivider",
               "type": {
-                "text": "string | undefined"
+                "text": "boolean"
               },
-              "description": "Tooltip text shown on parent nav items when a child is active.",
-              "attribute": "parent-nav-tooltip-text",
+              "default": "false",
+              "description": "Hides the divider between the scrollable and fixed sections when set to true.",
+              "attribute": "hide-fixed-section-divider",
               "reflects": true
             },
+            {
+              "kind": "field",
+              "name": "isHovered",
+              "type": {
+                "text": "boolean"
+              },
+              "privacy": "private",
+              "default": "false"
+            },
+            {
+              "kind": "field",
+              "name": "isFocused",
+              "type": {
+                "text": "boolean"
+              },
+              "privacy": "private",
+              "default": "false"
+            },
             {
               "kind": "field",
               "name": "Context",
@@ -43025,7 +43225,7 @@
               "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.",
+              "description": "Five 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- **flexible-on-hover**: Similar to flexible, but the grabber button is only visible on hover or focus.\n- **hidden**: Removes the sidenavigation from the DOM.",
               "default": "flexible",
               "fieldName": "variant"
             },
@@ -43035,9 +43235,18 @@
                 "text": "string"
               },
               "default": "''",
-              "description": "Displays footer text in the bottom section of the sidenavigation.",
+              "description": "Displays footer text in the bottom section of the sidenavigation.\n\nNote: if footerText is not provided, the bottom brand logo section will not be rendered.",
               "fieldName": "footerText"
             },
+            {
+              "name": "expanded",
+              "type": {
+                "text": "boolean | undefined"
+              },
+              "description": "Determines whether the sideNavigation is expanded or not.\n\nNOTE: For `fixed-collapsed` and `fixed-expanded` variants, this property is hard set to `false` and `true` respectively.\nFor `flexible` and `flexible-on-hover` variants, this property can be toggled / controlled from parent.",
+              "default": "true",
+              "fieldName": "expanded"
+            },
             {
               "name": "grabber-btn-aria-label",
               "type": {
@@ -43048,12 +43257,13 @@
               "fieldName": "grabberBtnAriaLabel"
             },
             {
-              "name": "parent-nav-tooltip-text",
+              "name": "hide-fixed-section-divider",
               "type": {
-                "text": "string | undefined"
+                "text": "boolean"
               },
-              "description": "Tooltip text shown on parent nav items when a child is active.",
-              "fieldName": "parentNavTooltipText"
+              "default": "false",
+              "description": "Hides the divider between the scrollable and fixed sections when set to true.",
+              "fieldName": "hideFixedSectionDivider"
             }
           ],
           "superclass": {
@@ -43061,7 +43271,7 @@
             "module": "/src/models"
           },
           "tagName": "mdc-sidenavigation",
-          "jsDoc": "/**\n * The `mdc-sidenavigation` component provides a vertically stacked navigation experience,\n * typically used in layouts with persistent or collapsible sidebars.\n *\n * ## Features:\n * - Supports four layout variants: `fixed-collapsed`, `fixed-expanded`, `flexible`, and `hidden`\n * - Toggleable expand/collapse behavior\n * - Displays brand logo and customer name\n * - Serves as a context provider for descendant components - `mdc-menubar` and `mdc-navmenuitem`\n *\n * ### Usage:\n * In a sidenavigation, navmenuitems can be used in the following ways:\n *\n * 1. **Simple navmenuitem** – No submenu or interaction beyond selection.\n *\n * 2. **NavMenuItem with submenu**:\n *    - Provide an `id` on the `mdc-navmenuitem`\n *    - Set the `triggerId` on the corresponding `mdc-menupopover` to match the navmenuitem's `id`\n *    - Set `parent-nav-tooltip-text` with appropriate text that will display when a child menu item\n *      inside the nested menupopover is active, conveying which submenu item is currently selected\n *\n * 3. **Actionable navmenuitem (no submenu)**:\n *    - Performs an action such as navigation or alert trigger\n *    - Set `disable-aria-current=\"true\"` to maintain visual active state without navigation behavior\n *\n * ### Recommendations:\n * - Use `mdc-text` for section headers\n * - Use `mdc-divider` with the attribute `variant=\"gradient\"` for section dividers\n * - For the brand logo, use an informative icon. Refer to `Momentum Informative Icons`\n *\n * #### Accessibility Notes:\n * - Always provide meaningful `aria-label` attributes for both `mdc-navmenuitem` and `mdc-menubar`\n * to ensure screen reader support\n * - Set `grabber-btn-aria-label` to provide accessible labels for the expand/collapse grabber button\n *\n * @dependency mdc-text\n * @dependency mdc-button\n * @dependency mdc-divider\n * @dependency mdc-menubar\n *\n * @event activechange - (React: onActiveChange) Dispatched when the active state of the navmenuitem changes.\n *\n * @tagname mdc-sidenavigation\n *\n * @slot scrollable-section - Slot for the scrollable content area of the side navigation.\n * @slot fixed-section - Slot for the fixed content area of the side navigation.\n * @slot brand-logo - Slot for the brand logo (e.g., icon or img).\n *\n * @csspart side-navigation-container - The main container wrapping the entire side navigation.\n * @csspart scrollable-section - The scrollable section of the side navigation.\n * @csspart fixed-section - The fixed section of the side navigation.\n * @csspart separator - The divider between the scrollable and fixed sections.\n * @csspart brand-logo-container - The container wrapping the brand logo and footer text.\n * @csspart footer-text - The footer text label in the fixed section.\n * @csspart vertical-divider - The vertical divider between the scrollable and fixed sections.\n * @csspart vertical-divider-button - The button inside the vertical divider used to toggle expand/collapse.\n *\n * @event toggle - (React: onToggle) Dispatched when the grabber button is clicked to expand/collapse the sidenavigation.\n * @event activechange - (React: onActiveChange) Dispatched when the active state of a nested navmenuitem changes.\n *\n * @cssproperty --mdc-sidenavigation-expanded-width - width of the sideNavigation when expanded\n * @cssproperty --mdc-sidenavigation-collapsed-width - width of the sideNavigation when collapsed\n * @cssproperty --mdc-sidenavigation-vertical-divider-button-z-index - z-index of the vertical divider button\n */",
+          "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 five layout variants: `fixed-collapsed`, `fixed-expanded`, `flexible`, `flexible-on-hover`, and `hidden`\n * - Toggleable expand/collapse behavior\n * - Displays brand logo and customer name\n * - Serves as a context provider for descendant components - `mdc-menubar` and `mdc-navmenuitem`\n *\n * ### Usage:\n * In a sidenavigation, navmenuitems can be used in the following ways:\n *\n * 1. **Simple navmenuitem** – No submenu or interaction beyond selection.\n *\n * 2. **NavMenuItem with submenu**:\n *    - Provide an `id` on the `mdc-navmenuitem`\n *    - Set the `triggerId` on the corresponding `mdc-menupopover` to match the navmenuitem's `id`\n *    - Set `parent-nav-tooltip-text` with appropriate text that will display when a child menu item\n *      inside the nested menupopover is active, conveying which submenu item is currently selected\n *\n * 3. **Actionable navmenuitem (no submenu)**:\n *    - Performs an action such as navigation or alert trigger\n *    - Set `disable-aria-current=\"true\"` to maintain visual active state without navigation behavior\n *\n * ### Recommendations:\n * - Use `mdc-text` for section headers\n * - Use `mdc-divider` with the attribute `variant=\"gradient\"` for section dividers\n * - For the brand logo, use an informative icon. Refer to `Momentum Informative Icons`\n *\n * #### Accessibility Notes:\n * - Always provide meaningful `aria-label` attributes for both `mdc-navmenuitem` and `mdc-menubar`\n * to ensure screen reader support\n * - Set `grabber-btn-aria-label` to provide accessible labels for the expand/collapse grabber button\n *\n * @dependency mdc-text\n * @dependency mdc-button\n * @dependency mdc-divider\n * @dependency mdc-menubar\n *\n * @event activechange - (React: onActiveChange) Dispatched when the active state of the navmenuitem changes.\n *\n * @tagname mdc-sidenavigation\n *\n * @slot scrollable-section - Slot for the scrollable content area of the side navigation.\n * @slot scrollable-menubar - Slot for the menubar inside the scrollable section.\n * @slot fixed-section - Slot for the fixed content area of the side navigation.\n * @slot fixed-menubar - Slot for the menubar inside the fixed section.\n * @slot brand-logo - Slot for the brand logo (e.g., icon or img).\n *\n * @csspart side-navigation-container - The main container wrapping the entire side navigation.\n * @csspart scrollable-section - The scrollable section of the side navigation.\n * @csspart scrollable-menubar - The menubar inside the scrollable section.\n * @csspart separator - The divider between the scrollable and fixed sections.\n * @csspart fixed-section - The fixed section of the side navigation.\n * @csspart fixed-menubar - The menubar inside the fixed section.\n * @csspart brand-logo-container - The container wrapping the brand logo and footer text.\n * @csspart footer-text - The footer text label in the fixed section.\n * @csspart vertical-divider - The vertical divider between the scrollable and fixed sections.\n * @csspart vertical-divider-button - The button inside the vertical divider used to toggle expand/collapse.\n *\n * @event toggle - (React: onToggle) Dispatched when the grabber button is clicked to expand/collapse the sidenavigation.\n * @event activechange - (React: onActiveChange) Dispatched when the active state of a nested navmenuitem changes.\n *\n * @cssproperty --mdc-sidenavigation-expanded-width - width of the sideNavigation when expanded\n * @cssproperty --mdc-sidenavigation-expanded-left-padding - padding for the left side of navmenuitems, when expanded\n * @cssproperty --mdc-sidenavigation-expanded-right-padding - padding for the right side of navmenuitems, when expanded\n * @cssproperty --mdc-sidenavigation-collapsed-width - width of the sideNavigation when collapsed\n * @cssproperty --mdc-sidenavigation-collapsed-left-padding - padding for the left side of navmenuitems, when collapsed\n * @cssproperty --mdc-sidenavigation-collapsed-right-padding - padding for the right side of navmenuitems, when collapsed\n * @cssproperty --mdc-sidenavigation-top-padding - padding for the top of the scrollable section - note: if setting to 0 focus ring might be cut off\n * @cssproperty --mdc-sidenavigation-bottom-padding - padding for the bottom of the scrollable section\n * @cssproperty --mdc-sidenavigation-vertical-divider-button-z-index - z-index of the vertical divider button\n */",
           "customElement": true
         }
       ],
@@ -46354,7 +46564,7 @@
       "declarations": [
         {
           "kind": "class",
-          "description": "mdc-textarea component, which is used to get the multi-line text input from the user.\nIt contains:\n- label: It is the title of the textarea field.\n- required: A boolean attribute depicting that the textarea field is required.\n- Textarea: It is the multi-line text input field.\n- helper-text: It is the text that provides additional information about the textarea field.\n- max-character-limit: It is the text that shows the character count of the textarea field.\n- Error, Warning, Success, Priority Help Text type: It is the text that provides additional information\n  about the textarea field based on the validation state.\n- limitexceeded: It is the event that is dispatched when the character limit exceeds or restored.\n  This event exposes 3 properties:\n  - currentCharacterCount - the current number of characters in the textarea field,\n  - maxCharacterLimit - the maximum number of characters allowed in the textarea field,\n  - value - the current value of the textarea field,\n\n**Note**: Consumers must set the help-text-type with 'error' and\nhelp-text attribute with the error message using limitexceeded event.\nThe same help-text value will be used for the validation message to be displayed.",
+          "description": "mdc-textarea component, which is used to get the multi-line text input from the user.\nIt contains:\n- label: It is the title of the textarea field.\n- required: A boolean attribute depicting that the textarea field is required.\n- Textarea: It is the multi-line text input field.\n- helper-text: It is the text that provides additional information about the textarea field.\n- max-character-limit: It is the text that shows the character count of the textarea field.\n- Error, Warning, Success, Priority Help Text type: It is the text that provides additional information\n  about the textarea field based on the validation state.\n- limitexceeded: It is the event that is dispatched when the character limit exceeds or restored.\n  This event exposes 3 properties:\n  - currentCharacterCount - the current number of characters in the textarea field,\n  - maxCharacterLimit - the maximum number of characters allowed in the textarea field,\n  - value - the current value of the textarea field,\n\n**Note**: Consumers must set the help-text-type with 'error' and\nhelp-text attribute with the error message using limitexceeded event.\nThe same help-text value will be used for the validation message to be displayed.\n\n### Accessibility \n\n#### Resize\n \nAccessible text area resizing can be turned on with the `resizable`. \nIt is strongly recommended to set the `resize-button-aria-label` attribute as well to describe what it is and what are the shortcuts (up/down arrows) of the button.\n\n#### Best practices\n\n- Always provide a `label` for screen readers to identify the textarea's purpose\n- Use `help-text` to provide additional context or instructions\n- When using `max-character-limit`, consider providing `character-limit-announcement` for screen reader updates\n- Use appropriate `help-text-type` (error, warning, success) to convey validation state\n- Ensure `validation-message` is set for form validation errors",
           "name": "Textarea",
           "cssProperties": [
             {
@@ -46499,6 +46709,26 @@
                 "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
               }
             },
+            {
+              "description": "The textarea element.",
+              "name": "textarea"
+            },
+            {
+              "description": "The container element that wraps the textarea and resize button.",
+              "name": "textarea-container"
+            },
+            {
+              "description": "The footer element that contains the character counter.",
+              "name": "textarea-footer"
+            },
+            {
+              "description": "The character counter element.",
+              "name": "character-counter"
+            },
+            {
+              "description": "The resize button element (shown when `resizable` is true).",
+              "name": "resize-button"
+            },
             {
               "description": "The helper/validation text element.",
               "name": "help-text",
@@ -46576,7 +46806,8 @@
               },
               "description": "The rows attribute specifies the visible number of lines in a text area.",
               "default": "5",
-              "attribute": "rows"
+              "attribute": "rows",
+              "reflects": true
             },
             {
               "kind": "field",
@@ -46663,6 +46894,27 @@
               "description": "Template string for the announcement that will be read by screen readers when the max character limit is set.\nConsumers must use the placeholders `%{number-of-characters}` and `%{max-character-limit}` in the string,\nwhich will be dynamically replaced with the actual values at runtime.\nFor example: `%{number-of-characters} out of %{max-character-limit} characters are typed.`\nExample output: \"93 out of 140 characters are typed.\"",
               "attribute": "character-limit-announcement"
             },
+            {
+              "kind": "field",
+              "name": "resizable",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Controls whether the textarea is resizable via the resize button.\nWhen set to false, the resize button will be hidden.",
+              "attribute": "resizable",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "resizeButtonAriaLabel",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "Provides an accessible label for the resize button.\nThis value is used to set the `aria-label` attribute for the button.",
+              "default": "''",
+              "attribute": "resize-button-aria-label"
+            },
             {
               "kind": "field",
               "name": "textarea",
@@ -46751,6 +47003,57 @@
               "name": "renderTextareaFooter",
               "privacy": "protected"
             },
+            {
+              "kind": "method",
+              "name": "handleResizeKeyDown",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "event",
+                  "type": {
+                    "text": "KeyboardEvent"
+                  },
+                  "description": "The keyboard event."
+                }
+              ],
+              "description": "Handles the resize button keydown event for keyboard-based resizing."
+            },
+            {
+              "kind": "field",
+              "name": "handlePointerDown",
+              "privacy": "private",
+              "description": "Handles the start of pointer-based resizing.",
+              "parameters": [
+                {
+                  "description": "The pointer event.",
+                  "name": "event"
+                }
+              ]
+            },
+            {
+              "kind": "field",
+              "name": "handlePointerMove",
+              "privacy": "private",
+              "description": "Handles pointer movement during resizing.",
+              "parameters": [
+                {
+                  "description": "The pointer event.",
+                  "name": "event"
+                }
+              ]
+            },
+            {
+              "kind": "field",
+              "name": "handlePointerUp",
+              "privacy": "private",
+              "description": "Handles the end of pointer-based resizing.",
+              "parameters": [
+                {
+                  "description": "The pointer event.",
+                  "name": "event"
+                }
+              ]
+            },
             {
               "kind": "field",
               "name": "autoFocusOnMount",
@@ -47244,6 +47547,24 @@
               "description": "Template string for the announcement that will be read by screen readers when the max character limit is set.\nConsumers must use the placeholders `%{number-of-characters}` and `%{max-character-limit}` in the string,\nwhich will be dynamically replaced with the actual values at runtime.\nFor example: `%{number-of-characters} out of %{max-character-limit} characters are typed.`\nExample output: \"93 out of 140 characters are typed.\"",
               "fieldName": "characterLimitAnnouncement"
             },
+            {
+              "name": "resizable",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Controls whether the textarea is resizable via the resize button.\nWhen set to false, the resize button will be hidden.",
+              "fieldName": "resizable"
+            },
+            {
+              "name": "resize-button-aria-label",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "Provides an accessible label for the resize button.\nThis value is used to set the `aria-label` attribute for the button.",
+              "default": "''",
+              "fieldName": "resizeButtonAriaLabel"
+            },
             {
               "name": "auto-focus-on-mount",
               "type": {
@@ -47464,7 +47785,7 @@
             "module": "/src/components/formfieldwrapper"
           },
           "tagName": "mdc-textarea",
-          "jsDoc": "/**\n * mdc-textarea component, which is used to get the multi-line text input from the user.\n * It contains:\n * - label: It is the title of the textarea field.\n * - required: A boolean attribute depicting that the textarea field is required.\n * - Textarea: It is the multi-line text input field.\n * - helper-text: It is the text that provides additional information about the textarea field.\n * - max-character-limit: It is the text that shows the character count of the textarea field.\n * - Error, Warning, Success, Priority Help Text type: It is the text that provides additional information\n *   about the textarea field based on the validation state.\n * - limitexceeded: It is the event that is dispatched when the character limit exceeds or restored.\n *   This event exposes 3 properties:\n *   - currentCharacterCount - the current number of characters in the textarea field,\n *   - maxCharacterLimit - the maximum number of characters allowed in the textarea field,\n *   - value - the current value of the textarea field,\n *\n * **Note**: Consumers must set the help-text-type with 'error' and\n * help-text attribute with the error message using limitexceeded event.\n * The same help-text value will be used for the validation message to be displayed.\n *\n * @tagname mdc-textarea\n *\n * @event input - (React: onInput) This event is dispatched when the value of the textarea field changes (every press).\n * @event change - (React: onChange) This event is dispatched when the value of the textarea field changes (on blur).\n * @event focus - (React: onFocus) This event is dispatched when the textarea receives focus.\n * @event blur - (React: onBlur) This event is dispatched when the textarea loses focus.\n * @event limitexceeded - (React: onLimitExceeded) This event is dispatched once when the character limit\n * exceeds or restored.\n *\n * @dependency mdc-button\n * @dependency mdc-icon\n * @dependency mdc-text\n * @dependency mdc-toggletip\n *\n * @slot label - Slot for the label element. If not provided, the `label` property will be used to render the label.\n * @slot toggletip - Slot for the toggletip info icon button. If not provided, the `toggletip-text` property will be used to render the info icon button and toggletip.\n * @slot help-icon - Slot for the helper/validation icon. If not provided, the icon will be rendered based on the `helpTextType` property.\n * @slot help-text - Slot for the helper/validation text. If not provided, the `helpText` property will be used to render the helper/validation text.\n *\n * @csspart label - The label element.\n * @csspart label-text - The container for the label and required indicator elements.\n * @csspart required-indicator - The required indicator element that is displayed next to the label when the `required` property is set to true.\n * @csspart info-icon-btn - The info icon button element that is displayed next to the label when the `toggletip-text` property is set.\n * @csspart label-toggletip - The toggletip element that is displayed when the info icon button is clicked.\n * @csspart help-text - The helper/validation text element.\n * @csspart helper-icon - The helper/validation icon element that is displayed next to the helper/validation text.\n * @csspart help-text-container - The container for the helper/validation icon and text elements.\n *\n * @cssproperty --mdc-label-font-size - Font size for the label text.\n * @cssproperty --mdc-label-font-weight - Font weight for the label text.\n * @cssproperty --mdc-label-line-height - Line height for the label text.\n * @cssproperty --mdc-label-color - Color for the label text.\n * @cssproperty --mdc-help-text-font-size - Font size for the help text.\n * @cssproperty --mdc-help-text-font-weight - Font weight for the help text.\n * @cssproperty --mdc-help-text-line-height - Line height for the help text.\n * @cssproperty --mdc-help-text-color - Color for the help text.\n * @cssproperty --mdc-required-indicator-color - Color for the required indicator text.\n * @cssproperty --mdc-textarea-text-color - Text color for the textarea field\n * @cssproperty --mdc-textarea-background-color - Background color for the textarea field\n * @cssproperty --mdc-textarea-border-color - Border color for the textarea field\n * @cssproperty --mdc-textarea-text-secondary-normal - Text color for the character counter\n * @cssproperty --mdc-textarea-text-font-size - Font size for the textarea field\n * @cssproperty --mdc-textarea-text-line-height - Line height for the textarea field\n * @cssproperty --mdc-textarea-container-background-color - Background color for the textarea container\n */",
+          "jsDoc": "/**\n * mdc-textarea component, which is used to get the multi-line text input from the user.\n * It contains:\n * - label: It is the title of the textarea field.\n * - required: A boolean attribute depicting that the textarea field is required.\n * - Textarea: It is the multi-line text input field.\n * - helper-text: It is the text that provides additional information about the textarea field.\n * - max-character-limit: It is the text that shows the character count of the textarea field.\n * - Error, Warning, Success, Priority Help Text type: It is the text that provides additional information\n *   about the textarea field based on the validation state.\n * - limitexceeded: It is the event that is dispatched when the character limit exceeds or restored.\n *   This event exposes 3 properties:\n *   - currentCharacterCount - the current number of characters in the textarea field,\n *   - maxCharacterLimit - the maximum number of characters allowed in the textarea field,\n *   - value - the current value of the textarea field,\n *\n * **Note**: Consumers must set the help-text-type with 'error' and\n * help-text attribute with the error message using limitexceeded event.\n * The same help-text value will be used for the validation message to be displayed.\n *\n * ### Accessibility \n * \n * #### Resize\n *  \n * Accessible text area resizing can be turned on with the `resizable`. \n * It is strongly recommended to set the `resize-button-aria-label` attribute as well to describe what it is and what are the shortcuts (up/down arrows) of the button.\n * \n * #### Best practices\n * \n * - Always provide a `label` for screen readers to identify the textarea's purpose\n * - Use `help-text` to provide additional context or instructions\n * - When using `max-character-limit`, consider providing `character-limit-announcement` for screen reader updates\n * - Use appropriate `help-text-type` (error, warning, success) to convey validation state\n * - Ensure `validation-message` is set for form validation errors\n *\n * @tagname mdc-textarea\n *\n * @event input - (React: onInput) This event is dispatched when the value of the textarea field changes (every press).\n * @event change - (React: onChange) This event is dispatched when the value of the textarea field changes (on blur).\n * @event focus - (React: onFocus) This event is dispatched when the textarea receives focus.\n * @event blur - (React: onBlur) This event is dispatched when the textarea loses focus.\n * @event limitexceeded - (React: onLimitExceeded) This event is dispatched once when the character limit\n * exceeds or restored.\n *\n * @dependency mdc-button\n * @dependency mdc-icon\n * @dependency mdc-text\n * @dependency mdc-toggletip\n *\n * @slot label - Slot for the label element. If not provided, the `label` property will be used to render the label.\n * @slot toggletip - Slot for the toggletip info icon button. If not provided, the `toggletip-text` property will be used to render the info icon button and toggletip.\n * @slot help-icon - Slot for the helper/validation icon. If not provided, the icon will be rendered based on the `helpTextType` property.\n * @slot help-text - Slot for the helper/validation text. If not provided, the `helpText` property will be used to render the helper/validation text.\n *\n * @csspart label - The label element.\n * @csspart label-text - The container for the label and required indicator elements.\n * @csspart required-indicator - The required indicator element that is displayed next to the label when the `required` property is set to true.\n * @csspart info-icon-btn - The info icon button element that is displayed next to the label when the `toggletip-text` property is set.\n * @csspart label-toggletip - The toggletip element that is displayed when the info icon button is clicked.\n * @csspart textarea - The textarea element.\n * @csspart textarea-container - The container element that wraps the textarea and resize button.\n * @csspart textarea-footer - The footer element that contains the character counter.\n * @csspart character-counter - The character counter element.\n * @csspart resize-button - The resize button element (shown when `resizable` is true).\n * @csspart help-text - The helper/validation text element.\n * @csspart helper-icon - The helper/validation icon element that is displayed next to the helper/validation text.\n * @csspart help-text-container - The container for the helper/validation icon and text elements.\n *\n * @cssproperty --mdc-label-font-size - Font size for the label text.\n * @cssproperty --mdc-label-font-weight - Font weight for the label text.\n * @cssproperty --mdc-label-line-height - Line height for the label text.\n * @cssproperty --mdc-label-color - Color for the label text.\n * @cssproperty --mdc-help-text-font-size - Font size for the help text.\n * @cssproperty --mdc-help-text-font-weight - Font weight for the help text.\n * @cssproperty --mdc-help-text-line-height - Line height for the help text.\n * @cssproperty --mdc-help-text-color - Color for the help text.\n * @cssproperty --mdc-required-indicator-color - Color for the required indicator text.\n * @cssproperty --mdc-textarea-text-color - Text color for the textarea field\n * @cssproperty --mdc-textarea-background-color - Background color for the textarea field\n * @cssproperty --mdc-textarea-border-color - Border color for the textarea field\n * @cssproperty --mdc-textarea-text-secondary-normal - Text color for the character counter\n * @cssproperty --mdc-textarea-text-font-size - Font size for the textarea field\n * @cssproperty --mdc-textarea-text-line-height - Line height for the textarea field\n * @cssproperty --mdc-textarea-container-background-color - Background color for the textarea container\n */",
           "customElement": true
         }
       ],