@momentum-design/components 0.123.5 → 0.124.1

package/dist/react/index.d.ts

@@ -9,8 +9,8 @@ export { default as Avatar } from './avatar';
 export { default as AvatarButton } from './avatarbutton';
 export { default as Badge } from './badge';
 export { default as Banner } from './banner';
-export { default as Brandvisual } from './brandvisual';
 export { default as Bullet } from './bullet';
+export { default as Brandvisual } from './brandvisual';
 export { default as Button } from './button';
 export { default as ButtonGroup } from './buttongroup';
 export { default as ButtonLink } from './buttonlink';

package/dist/react/index.js

@@ -9,8 +9,8 @@ export { default as Avatar } from './avatar';
 export { default as AvatarButton } from './avatarbutton';
 export { default as Badge } from './badge';
 export { default as Banner } from './banner';
-export { default as Brandvisual } from './brandvisual';
 export { default as Bullet } from './bullet';
+export { default as Brandvisual } from './brandvisual';
 export { default as Button } from './button';
 export { default as ButtonGroup } from './buttongroup';
 export { default as ButtonLink } from './buttonlink';

package/dist/react/menusection/index.d.ts

@@ -21,6 +21,11 @@ import type { Events } from '../../components/menusection/menusection.types';
  * @csspart align-header - The header of the menusection when it is aligned to the start.
  * @csspart container - The container of the menusection.
  * @csspart divider - The divider of the menusection.
+ *
+ * @cssproperty --mdc-menusection-divider-margin-block - Sets the margin block of the divider.
+ * @cssproperty --mdc-menusection-gap - Sets the gap between items in the menusection.
+ * @cssproperty --mdc-menusection-divider-width - Sets the width of the divider.
+ * @cssproperty --mdc-menusection-header-padding - Sets the padding of the header, if present.
  */
 declare const reactWrapper: import("@lit/react").ReactWebComponent<Component, {
     onChange: EventName<Events["onChangeEvent"]>;

package/dist/react/menusection/index.js

@@ -22,6 +22,11 @@ import { TAG_NAME } from '../../components/menusection/menusection.constants';
  * @csspart align-header - The header of the menusection when it is aligned to the start.
  * @csspart container - The container of the menusection.
  * @csspart divider - The divider of the menusection.
+ *
+ * @cssproperty --mdc-menusection-divider-margin-block - Sets the margin block of the divider.
+ * @cssproperty --mdc-menusection-gap - Sets the gap between items in the menusection.
+ * @cssproperty --mdc-menusection-divider-width - Sets the width of the divider.
+ * @cssproperty --mdc-menusection-header-padding - Sets the padding of the header, if present.
  */
 const reactWrapper = createComponent({
     tagName: TAG_NAME,

package/dist/react/navmenuitem/index.d.ts

@@ -6,6 +6,8 @@ import type { Events as EventsInherited } from '../../components/listitem/listit
  * `mdc-navmenuitem` is a menuitem styled to work as a navigation tab.
  * It supports a leading icon, optional badge and dynamic text rendering.
  *
+ * The navmenuitem can be in an active or inactive state, indicating whether it is currently selected.
+ *
  * Note: `mdc-navmenuitem` is intended to be used inside `mdc-menubar` as part of the sideNavigation
  * component. Its structure, spacing, and interactions are designed to align with
  * the visual and functional requirements of side navigation layouts.
@@ -25,17 +27,21 @@ import type { Events as EventsInherited } from '../../components/listitem/listit
  * @event focus - (React: onFocus) This event is dispatched when the navmenuitem receives focus.
  * @event activechange - (React: onActiveChange) Dispatched when the active state of the navmenuitem changes.
  *
+ * @cssproperty --mdc-navmenuitem-in-sidenav-expanded-width - Width of the navmenuitem when expanded.
+ * @cssproperty --mdc-navmenuitem-in-sidenav-expanded-margin-left - Left margin of the navmenuitem, when expanded.
+ * @cssproperty --mdc-navmenuitem-in-sidenav-expanded-margin-right - Right margin of the navmenuitem, when expanded.
+ * @cssproperty --mdc-navmenuitem-in-sidenav-collapsed-width - Width of the navmenuitem when collapsed.
+ * @cssproperty --mdc-navmenuitem-in-sidenav-collapsed-margin-left - Left margin of the navmenuitem, when collapsed.
+ * @cssproperty --mdc-navmenuitem-in-sidenav-collapsed-margin-right - Right margin of the navmenuitem, when collapsed.
  * @cssproperty --mdc-navmenuitem-color - Text color of the navmenuitem in its normal state.
- * @cssproperty --mdc-navmenuitem-border-color - Border color of the navmenuitem in its normal state.
  * @cssproperty --mdc-navmenuitem-disabled-color - Text color of the navmenuitem when disabled.
- * @cssproperty --mdc-navmenuitem-expanded-width - Width of the navmenuitem when expanded.
+ * @cssproperty --mdc-navmenuitem-rest-active-background-color - Background color of the active nav item in its rest state.
  * @cssproperty --mdc-navmenuitem-hover-background-color - Background color of the navmenuitem when hovered.
  * @cssproperty --mdc-navmenuitem-hover-active-background-color - Background color of the active navmenuitem when hovered.
  * @cssproperty --mdc-navmenuitem-pressed-background-color - Background color of the navmenuitem when pressed.
  * @cssproperty --mdc-navmenuitem-pressed-active-background-color - Background color of the active navmenuitem when pressed.
  * @cssproperty --mdc-navmenuitem-disabled-background-color - Background color of the navmenuitem when disabled.
  * @cssproperty --mdc-navmenuitem-disabled-active-background-color - Background color of the active navmenuitem when disabled.
- * @cssproperty --mdc-navmenuitem-rest-active-background-color - Background color of the active nav item in its rest state.
  *
  * @csspart arrow - The arrow of the navmenuitem.
  * @csspart badge - The badge of the navmenuitem.

package/dist/react/navmenuitem/index.js

@@ -6,6 +6,8 @@ import { TAG_NAME } from '../../components/navmenuitem/navmenuitem.constants';
  * `mdc-navmenuitem` is a menuitem styled to work as a navigation tab.
  * It supports a leading icon, optional badge and dynamic text rendering.
  *
+ * The navmenuitem can be in an active or inactive state, indicating whether it is currently selected.
+ *
  * Note: `mdc-navmenuitem` is intended to be used inside `mdc-menubar` as part of the sideNavigation
  * component. Its structure, spacing, and interactions are designed to align with
  * the visual and functional requirements of side navigation layouts.
@@ -25,17 +27,21 @@ import { TAG_NAME } from '../../components/navmenuitem/navmenuitem.constants';
  * @event focus - (React: onFocus) This event is dispatched when the navmenuitem receives focus.
  * @event activechange - (React: onActiveChange) Dispatched when the active state of the navmenuitem changes.
  *
+ * @cssproperty --mdc-navmenuitem-in-sidenav-expanded-width - Width of the navmenuitem when expanded.
+ * @cssproperty --mdc-navmenuitem-in-sidenav-expanded-margin-left - Left margin of the navmenuitem, when expanded.
+ * @cssproperty --mdc-navmenuitem-in-sidenav-expanded-margin-right - Right margin of the navmenuitem, when expanded.
+ * @cssproperty --mdc-navmenuitem-in-sidenav-collapsed-width - Width of the navmenuitem when collapsed.
+ * @cssproperty --mdc-navmenuitem-in-sidenav-collapsed-margin-left - Left margin of the navmenuitem, when collapsed.
+ * @cssproperty --mdc-navmenuitem-in-sidenav-collapsed-margin-right - Right margin of the navmenuitem, when collapsed.
  * @cssproperty --mdc-navmenuitem-color - Text color of the navmenuitem in its normal state.
- * @cssproperty --mdc-navmenuitem-border-color - Border color of the navmenuitem in its normal state.
  * @cssproperty --mdc-navmenuitem-disabled-color - Text color of the navmenuitem when disabled.
- * @cssproperty --mdc-navmenuitem-expanded-width - Width of the navmenuitem when expanded.
+ * @cssproperty --mdc-navmenuitem-rest-active-background-color - Background color of the active nav item in its rest state.
  * @cssproperty --mdc-navmenuitem-hover-background-color - Background color of the navmenuitem when hovered.
  * @cssproperty --mdc-navmenuitem-hover-active-background-color - Background color of the active navmenuitem when hovered.
  * @cssproperty --mdc-navmenuitem-pressed-background-color - Background color of the navmenuitem when pressed.
  * @cssproperty --mdc-navmenuitem-pressed-active-background-color - Background color of the active navmenuitem when pressed.
  * @cssproperty --mdc-navmenuitem-disabled-background-color - Background color of the navmenuitem when disabled.
  * @cssproperty --mdc-navmenuitem-disabled-active-background-color - Background color of the active navmenuitem when disabled.
- * @cssproperty --mdc-navmenuitem-rest-active-background-color - Background color of the active nav item in its rest state.
  *
  * @csspart arrow - The arrow of the navmenuitem.
  * @csspart badge - The badge of the navmenuitem.

package/dist/react/sidenavigation/index.d.ts

@@ -6,7 +6,7 @@ import type { Events } from '../../components/sidenavigation/sidenavigation.type
  * typically used in layouts with persistent or collapsible sidebars.
  *
  * ## Features:
- * - Supports four layout variants: `fixed-collapsed`, `fixed-expanded`, `flexible`, and `hidden`
+ * - Supports five layout variants: `fixed-collapsed`, `fixed-expanded`, `flexible`, `flexible-on-hover`, and `hidden`
  * - Toggleable expand/collapse behavior
  * - Displays brand logo and customer name
  * - Serves as a context provider for descendant components - `mdc-menubar` and `mdc-navmenuitem`
@@ -46,13 +46,17 @@ import type { Events } from '../../components/sidenavigation/sidenavigation.type
  * @tagname mdc-sidenavigation
  *
  * @slot scrollable-section - Slot for the scrollable content area of the side navigation.
+ * @slot scrollable-menubar - Slot for the menubar inside the scrollable section.
  * @slot fixed-section - Slot for the fixed content area of the side navigation.
+ * @slot fixed-menubar - Slot for the menubar inside the fixed section.
  * @slot brand-logo - Slot for the brand logo (e.g., icon or img).
  *
  * @csspart side-navigation-container - The main container wrapping the entire side navigation.
  * @csspart scrollable-section - The scrollable section of the side navigation.
- * @csspart fixed-section - The fixed section of the side navigation.
+ * @csspart scrollable-menubar - The menubar inside the scrollable section.
  * @csspart separator - The divider between the scrollable and fixed sections.
+ * @csspart fixed-section - The fixed section of the side navigation.
+ * @csspart fixed-menubar - The menubar inside the fixed section.
  * @csspart brand-logo-container - The container wrapping the brand logo and footer text.
  * @csspart footer-text - The footer text label in the fixed section.
  * @csspart vertical-divider - The vertical divider between the scrollable and fixed sections.
@@ -62,7 +66,13 @@ import type { Events } from '../../components/sidenavigation/sidenavigation.type
  * @event activechange - (React: onActiveChange) Dispatched when the active state of a nested navmenuitem changes.
  *
  * @cssproperty --mdc-sidenavigation-expanded-width - width of the sideNavigation when expanded
+ * @cssproperty --mdc-sidenavigation-expanded-left-padding - padding for the left side of navmenuitems, when expanded
+ * @cssproperty --mdc-sidenavigation-expanded-right-padding - padding for the right side of navmenuitems, when expanded
  * @cssproperty --mdc-sidenavigation-collapsed-width - width of the sideNavigation when collapsed
+ * @cssproperty --mdc-sidenavigation-collapsed-left-padding - padding for the left side of navmenuitems, when collapsed
+ * @cssproperty --mdc-sidenavigation-collapsed-right-padding - padding for the right side of navmenuitems, when collapsed
+ * @cssproperty --mdc-sidenavigation-top-padding - padding for the top of the scrollable section - note: if setting to 0 focus ring might be cut off
+ * @cssproperty --mdc-sidenavigation-bottom-padding - padding for the bottom of the scrollable section
  * @cssproperty --mdc-sidenavigation-vertical-divider-button-z-index - z-index of the vertical divider button
  */
 declare const reactWrapper: import("@lit/react").ReactWebComponent<Component, {

package/dist/react/sidenavigation/index.js

@@ -7,7 +7,7 @@ import { TAG_NAME } from '../../components/sidenavigation/sidenavigation.constan
  * typically used in layouts with persistent or collapsible sidebars.
  *
  * ## Features:
- * - Supports four layout variants: `fixed-collapsed`, `fixed-expanded`, `flexible`, and `hidden`
+ * - Supports five layout variants: `fixed-collapsed`, `fixed-expanded`, `flexible`, `flexible-on-hover`, and `hidden`
  * - Toggleable expand/collapse behavior
  * - Displays brand logo and customer name
  * - Serves as a context provider for descendant components - `mdc-menubar` and `mdc-navmenuitem`
@@ -47,13 +47,17 @@ import { TAG_NAME } from '../../components/sidenavigation/sidenavigation.constan
  * @tagname mdc-sidenavigation
  *
  * @slot scrollable-section - Slot for the scrollable content area of the side navigation.
+ * @slot scrollable-menubar - Slot for the menubar inside the scrollable section.
  * @slot fixed-section - Slot for the fixed content area of the side navigation.
+ * @slot fixed-menubar - Slot for the menubar inside the fixed section.
  * @slot brand-logo - Slot for the brand logo (e.g., icon or img).
  *
  * @csspart side-navigation-container - The main container wrapping the entire side navigation.
  * @csspart scrollable-section - The scrollable section of the side navigation.
- * @csspart fixed-section - The fixed section of the side navigation.
+ * @csspart scrollable-menubar - The menubar inside the scrollable section.
  * @csspart separator - The divider between the scrollable and fixed sections.
+ * @csspart fixed-section - The fixed section of the side navigation.
+ * @csspart fixed-menubar - The menubar inside the fixed section.
  * @csspart brand-logo-container - The container wrapping the brand logo and footer text.
  * @csspart footer-text - The footer text label in the fixed section.
  * @csspart vertical-divider - The vertical divider between the scrollable and fixed sections.
@@ -63,7 +67,13 @@ import { TAG_NAME } from '../../components/sidenavigation/sidenavigation.constan
  * @event activechange - (React: onActiveChange) Dispatched when the active state of a nested navmenuitem changes.
  *
  * @cssproperty --mdc-sidenavigation-expanded-width - width of the sideNavigation when expanded
+ * @cssproperty --mdc-sidenavigation-expanded-left-padding - padding for the left side of navmenuitems, when expanded
+ * @cssproperty --mdc-sidenavigation-expanded-right-padding - padding for the right side of navmenuitems, when expanded
  * @cssproperty --mdc-sidenavigation-collapsed-width - width of the sideNavigation when collapsed
+ * @cssproperty --mdc-sidenavigation-collapsed-left-padding - padding for the left side of navmenuitems, when collapsed
+ * @cssproperty --mdc-sidenavigation-collapsed-right-padding - padding for the right side of navmenuitems, when collapsed
+ * @cssproperty --mdc-sidenavigation-top-padding - padding for the top of the scrollable section - note: if setting to 0 focus ring might be cut off
+ * @cssproperty --mdc-sidenavigation-bottom-padding - padding for the bottom of the scrollable section
  * @cssproperty --mdc-sidenavigation-vertical-divider-button-z-index - z-index of the vertical divider button
  */
 const reactWrapper = createComponent({

package/dist/react/textarea/index.d.ts

@@ -21,6 +21,21 @@ import type { Events } from '../../components/textarea/textarea.types';
  * help-text attribute with the error message using limitexceeded event.
  * The same help-text value will be used for the validation message to be displayed.
  *
+ * ### Accessibility
+ *
+ * #### Resize
+ *
+ * Accessible text area resizing can be turned on with the `resizable`.
+ * 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.
+ *
+ * #### Best practices
+ *
+ * - Always provide a `label` for screen readers to identify the textarea's purpose
+ * - Use `help-text` to provide additional context or instructions
+ * - When using `max-character-limit`, consider providing `character-limit-announcement` for screen reader updates
+ * - Use appropriate `help-text-type` (error, warning, success) to convey validation state
+ * - Ensure `validation-message` is set for form validation errors
+ *
  * @tagname mdc-textarea
  *
  * @event input - (React: onInput) This event is dispatched when the value of the textarea field changes (every press).
@@ -45,6 +60,11 @@ import type { Events } from '../../components/textarea/textarea.types';
  * @csspart required-indicator - The required indicator element that is displayed next to the label when the `required` property is set to true.
  * @csspart info-icon-btn - The info icon button element that is displayed next to the label when the `toggletip-text` property is set.
  * @csspart label-toggletip - The toggletip element that is displayed when the info icon button is clicked.
+ * @csspart textarea - The textarea element.
+ * @csspart textarea-container - The container element that wraps the textarea and resize button.
+ * @csspart textarea-footer - The footer element that contains the character counter.
+ * @csspart character-counter - The character counter element.
+ * @csspart resize-button - The resize button element (shown when `resizable` is true).
  * @csspart help-text - The helper/validation text element.
  * @csspart helper-icon - The helper/validation icon element that is displayed next to the helper/validation text.
  * @csspart help-text-container - The container for the helper/validation icon and text elements.

package/dist/react/textarea/index.js

@@ -22,6 +22,21 @@ import { TAG_NAME } from '../../components/textarea/textarea.constants';
  * help-text attribute with the error message using limitexceeded event.
  * The same help-text value will be used for the validation message to be displayed.
  *
+ * ### Accessibility
+ *
+ * #### Resize
+ *
+ * Accessible text area resizing can be turned on with the `resizable`.
+ * 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.
+ *
+ * #### Best practices
+ *
+ * - Always provide a `label` for screen readers to identify the textarea's purpose
+ * - Use `help-text` to provide additional context or instructions
+ * - When using `max-character-limit`, consider providing `character-limit-announcement` for screen reader updates
+ * - Use appropriate `help-text-type` (error, warning, success) to convey validation state
+ * - Ensure `validation-message` is set for form validation errors
+ *
  * @tagname mdc-textarea
  *
  * @event input - (React: onInput) This event is dispatched when the value of the textarea field changes (every press).
@@ -46,6 +61,11 @@ import { TAG_NAME } from '../../components/textarea/textarea.constants';
  * @csspart required-indicator - The required indicator element that is displayed next to the label when the `required` property is set to true.
  * @csspart info-icon-btn - The info icon button element that is displayed next to the label when the `toggletip-text` property is set.
  * @csspart label-toggletip - The toggletip element that is displayed when the info icon button is clicked.
+ * @csspart textarea - The textarea element.
+ * @csspart textarea-container - The container element that wraps the textarea and resize button.
+ * @csspart textarea-footer - The footer element that contains the character counter.
+ * @csspart character-counter - The character counter element.
+ * @csspart resize-button - The resize button element (shown when `resizable` is true).
  * @csspart help-text - The helper/validation text element.
  * @csspart helper-icon - The helper/validation icon element that is displayed next to the helper/validation text.
  * @csspart help-text-container - The container for the helper/validation icon and text elements.

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@momentum-design/components",
   "packageManager": "yarn@3.2.4",
-  "version": "0.123.5",
+  "version": "0.124.1",
   "engines": {
     "node": ">=20.0.0",
     "npm": ">=8.0.0"