@momentum-design/components 0.123.4 → 0.124.0

package/dist/react/index.d.ts

@@ -1,6 +1,6 @@
-export { default as AccordionButton } from './accordionbutton';
-export { default as AccordionGroup } from './accordiongroup';
 export { default as Accordion } from './accordion';
+export { default as AccordionGroup } from './accordiongroup';
+export { default as AccordionButton } from './accordionbutton';
 export { default as AlertChip } from './alertchip';
 export { default as Animation } from './animation';
 export { default as AnnouncementDialog } from './announcementdialog';
@@ -18,9 +18,9 @@ export { default as Buttonsimple } from './buttonsimple';
 export { default as Card } from './card';
 export { default as CardButton } from './cardbutton';
 export { default as CardCheckbox } from './cardcheckbox';
+export { default as CardRadio } from './cardradio';
 export { default as Checkbox } from './checkbox';
 export { default as Chip } from './chip';
-export { default as CardRadio } from './cardradio';
 export { default as Coachmark } from './coachmark';
 export { default as Combobox } from './combobox';
 export { default as ControlTypeProvider } from './controltypeprovider';

package/dist/react/index.js

@@ -1,6 +1,6 @@
-export { default as AccordionButton } from './accordionbutton';
-export { default as AccordionGroup } from './accordiongroup';
 export { default as Accordion } from './accordion';
+export { default as AccordionGroup } from './accordiongroup';
+export { default as AccordionButton } from './accordionbutton';
 export { default as AlertChip } from './alertchip';
 export { default as Animation } from './animation';
 export { default as AnnouncementDialog } from './announcementdialog';
@@ -18,9 +18,9 @@ export { default as Buttonsimple } from './buttonsimple';
 export { default as Card } from './card';
 export { default as CardButton } from './cardbutton';
 export { default as CardCheckbox } from './cardcheckbox';
+export { default as CardRadio } from './cardradio';
 export { default as Checkbox } from './checkbox';
 export { default as Chip } from './chip';
-export { default as CardRadio } from './cardradio';
 export { default as Coachmark } from './coachmark';
 export { default as Combobox } from './combobox';
 export { default as ControlTypeProvider } from './controltypeprovider';

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/package.json

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