@momentum-design/components 0.85.3 → 0.85.5

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

@@ -18,6 +18,8 @@ import Component from '../../components/alertchip';
  * @cssproperty --mdc-chip-border-color - The border color of the alertchip
  * @cssproperty --mdc-chip-background-color - The background color of the alertchip
  *
+ * @csspart icon - The alert icon
+ * @csspart label - The text label of the alertchip
  */
 declare const reactWrapper: import("@lit/react").ReactWebComponent<Component, {
     onClick: EventName<MouseEvent>;

package/dist/react/alertchip/index.js

@@ -20,6 +20,8 @@ import { TAG_NAME } from '../../components/alertchip/alertchip.constants';
  * @cssproperty --mdc-chip-border-color - The border color of the alertchip
  * @cssproperty --mdc-chip-background-color - The background color of the alertchip
  *
+ * @csspart icon - The alert icon
+ * @csspart label - The text label of the alertchip
  */
 const reactWrapper = createComponent({
     tagName: TAG_NAME,

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

@@ -33,6 +33,12 @@ import Component from '../../components/avatar';
  *  Allows customization of the loading indicator foreground color.
  * @cssproperty --mdc-avatar-loading-overlay-background-color -
  *  Allows customization of the loading overlay background color.
+ *
+ * @csspart content - The main content of the avatar.
+ * @csspart photo - The photo of the avatar.
+ * @csspart presence - The presence indicator of the avatar.
+ * @csspart loading-wrapper - The wrapper for the loading indicator.
+ * @csspart loader - The loading indicator of the avatar.
  */
 declare const reactWrapper: import("@lit/react").ReactWebComponent<Component, {}>;
 export default reactWrapper;

package/dist/react/avatar/index.js

@@ -36,6 +36,12 @@ import { TAG_NAME } from '../../components/avatar/avatar.constants';
  *  Allows customization of the loading indicator foreground color.
  * @cssproperty --mdc-avatar-loading-overlay-background-color -
  *  Allows customization of the loading overlay background color.
+ *
+ * @csspart content - The main content of the avatar.
+ * @csspart photo - The photo of the avatar.
+ * @csspart presence - The presence indicator of the avatar.
+ * @csspart loading-wrapper - The wrapper for the loading indicator.
+ * @csspart loader - The loading indicator of the avatar.
  */
 const reactWrapper = createComponent({
     tagName: TAG_NAME,

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

@@ -6,6 +6,8 @@ import Component from '../../components/avatarbutton';
  * This component is made by extending `buttonsimple` class.
  * The button component acts as a wrapper for the avatar component.
  *
+ * To override styles of the avatar inside, use the specified css parts.
+ *
  * @dependency mdc-avatar
  *
  * @event click - (React: onClick) This event is dispatched when the avatarbutton is clicked.
@@ -18,6 +20,13 @@ import Component from '../../components/avatarbutton';
  * @cssproperty --mdc-avatarbutton-overlay-background-color-rest - Background color of the overlay in rest state
  * @cssproperty --mdc-avatarbutton-overlay-background-color-hover - Background color of the overlay in hover state
  * @cssproperty --mdc-avatarbutton-overlay-background-color-active - Background color of the overlay in active state
+ *
+ * @csspart overlay - The overlay part of the avatar button.
+ * @csspart content - The main content of the avatar.
+ * @csspart photo - The photo part of the avatar.
+ * @csspart presence - The presence indicator part of the avatar.
+ * @csspart loading-wrapper - The wrapper for the loading indicator of the avatar.
+ * @csspart loader - The loading indicator part of the avatar.
  */
 declare const reactWrapper: import("@lit/react").ReactWebComponent<Component, {
     onClick: EventName<MouseEvent>;

package/dist/react/avatarbutton/index.js

@@ -8,6 +8,8 @@ import { TAG_NAME } from '../../components/avatarbutton/avatarbutton.constants';
  * This component is made by extending `buttonsimple` class.
  * The button component acts as a wrapper for the avatar component.
  *
+ * To override styles of the avatar inside, use the specified css parts.
+ *
  * @dependency mdc-avatar
  *
  * @event click - (React: onClick) This event is dispatched when the avatarbutton is clicked.
@@ -20,6 +22,13 @@ import { TAG_NAME } from '../../components/avatarbutton/avatarbutton.constants';
  * @cssproperty --mdc-avatarbutton-overlay-background-color-rest - Background color of the overlay in rest state
  * @cssproperty --mdc-avatarbutton-overlay-background-color-hover - Background color of the overlay in hover state
  * @cssproperty --mdc-avatarbutton-overlay-background-color-active - Background color of the overlay in active state
+ *
+ * @csspart overlay - The overlay part of the avatar button.
+ * @csspart content - The main content of the avatar.
+ * @csspart photo - The photo part of the avatar.
+ * @csspart presence - The presence indicator part of the avatar.
+ * @csspart loading-wrapper - The wrapper for the loading indicator of the avatar.
+ * @csspart loader - The loading indicator part of the avatar.
  */
 const reactWrapper = createComponent({
     tagName: TAG_NAME,

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

@@ -44,6 +44,8 @@ import Component from '../../components/icon';
  * @cssproperty --mdc-icon-fill-color - Allows customization of the default fill color.
  * @cssproperty --mdc-icon-size - Allows customization of the icon size.
  * @cssproperty --mdc-icon-border-radius - Allows customization of the icon border radius.
+ *
+ * @csspart icon - The svg inside the icon element.
  */
 declare const reactWrapper: import("@lit/react").ReactWebComponent<Component, {}>;
 export default reactWrapper;

package/dist/react/icon/index.js

@@ -47,6 +47,8 @@ import { TAG_NAME } from '../../components/icon/icon.constants';
  * @cssproperty --mdc-icon-fill-color - Allows customization of the default fill color.
  * @cssproperty --mdc-icon-size - Allows customization of the icon size.
  * @cssproperty --mdc-icon-border-radius - Allows customization of the icon border radius.
+ *
+ * @csspart icon - The svg inside the icon element.
  */
 const reactWrapper = createComponent({
     tagName: TAG_NAME,

package/dist/react/index.d.ts

@@ -43,8 +43,8 @@ export { default as OptGroup } from './optgroup';
 export { default as Option } from './option';
 export { default as Popover } from './popover';
 export { default as Presence } from './presence';
-export { default as Progressspinner } from './progressspinner';
 export { default as Progressbar } from './progressbar';
+export { default as Progressspinner } from './progressspinner';
 export { default as Radio } from './radio';
 export { default as RadioGroup } from './radiogroup';
 export { default as ScreenreaderAnnouncer } from './screenreaderannouncer';

package/dist/react/index.js

@@ -43,8 +43,8 @@ export { default as OptGroup } from './optgroup';
 export { default as Option } from './option';
 export { default as Popover } from './popover';
 export { default as Presence } from './presence';
-export { default as Progressspinner } from './progressspinner';
 export { default as Progressbar } from './progressbar';
+export { default as Progressspinner } from './progressspinner';
 export { default as Radio } from './radio';
 export { default as RadioGroup } from './radiogroup';
 export { default as ScreenreaderAnnouncer } from './screenreaderannouncer';

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

@@ -1,13 +1,12 @@
 import Component from '../../components/menubar';
 /**
- * Menubar is a navigational menu component that provides a horizontal (default) or vertical fixed list of menu items,
+ * Menubar is a navigational menu component that provides a vertical fixed list of menu items,
  * with support for nested submenus and keyboard navigation. It serves as a container
  * for menu items and manages their interaction patterns, including:
- * - Keyboard navigation (arrow keys, Home, End)
+ * - Keyboard navigation (Arrow keys, Home, End)
  * - Menu item activation (Enter/Space)
  * - Submenu toggling (Right/Left arrow keys)
  * - Focus management
- * - Support for both horizontal and vertical orientations
  * - Integration with MenuPopover for nested menus
  *
  * A menubar will contain a set of menu items and their associated popovers.
@@ -16,6 +15,10 @@ import Component from '../../components/menubar';
  * The component automatically handles ARIA attributes and follows WAI-ARIA menu design patterns.
  * It works in conjunction with `mdc-menuitem` and `mdc-menupopover` to create accessible menu structures.
  *
+ * **Note:** A menubar contains three types of menu items, including menuitem, menuitemradio and menuitemcheckbox. These menu items may optionally be nested in one or more group containers. Groups or items may optionally by separated with separator elements.
+ *
+ * `mdc-menubar` contains a group that wraps all its chilren passed within the default slot. This has been added to ensure the right accessibility behavior while using screen readers.
+ *
  * @tagname mdc-menubar
  * @slot default - Contains the menu items and their associated popovers
  */

package/dist/react/menubar/index.js

@@ -3,14 +3,13 @@ import { createComponent } from '@lit/react';
 import Component from '../../components/menubar';
 import { TAG_NAME } from '../../components/menubar/menubar.constants';
 /**
- * Menubar is a navigational menu component that provides a horizontal (default) or vertical fixed list of menu items,
+ * Menubar is a navigational menu component that provides a vertical fixed list of menu items,
  * with support for nested submenus and keyboard navigation. It serves as a container
  * for menu items and manages their interaction patterns, including:
- * - Keyboard navigation (arrow keys, Home, End)
+ * - Keyboard navigation (Arrow keys, Home, End)
  * - Menu item activation (Enter/Space)
  * - Submenu toggling (Right/Left arrow keys)
  * - Focus management
- * - Support for both horizontal and vertical orientations
  * - Integration with MenuPopover for nested menus
  *
  * A menubar will contain a set of menu items and their associated popovers.
@@ -19,6 +18,10 @@ import { TAG_NAME } from '../../components/menubar/menubar.constants';
  * The component automatically handles ARIA attributes and follows WAI-ARIA menu design patterns.
  * It works in conjunction with `mdc-menuitem` and `mdc-menupopover` to create accessible menu structures.
  *
+ * **Note:** A menubar contains three types of menu items, including menuitem, menuitemradio and menuitemcheckbox. These menu items may optionally be nested in one or more group containers. Groups or items may optionally by separated with separator elements.
+ *
+ * `mdc-menubar` contains a group that wraps all its chilren passed within the default slot. This has been added to ensure the right accessibility behavior while using screen readers.
+ *
  * @tagname mdc-menubar
  * @slot default - Contains the menu items and their associated popovers
  */

package/package.json

@@ -41,5 +41,5 @@
     "lottie-web": "^5.12.2",
     "uuid": "^11.0.5"
   },
-  "version": "0.85.3"
+  "version": "0.85.5"
 }

package/dist/components/menubar/menubar.types.d.ts

@@ -1,4 +0,0 @@
-import type { ValueOf } from '../../utils/types';
-import { ORIENTATION } from './menubar.constants';
-type Orientation = ValueOf<typeof ORIENTATION>;
-export type { Orientation };

package/dist/components/menubar/menubar.types.js

@@ -1 +0,0 @@
-export {};

package/dist/utils/mixins/MenuMixin.d.ts

@@ -1,10 +0,0 @@
-import { LitElement } from 'lit';
-import type { Orientation } from '../../components/menubar/menubar.types';
-import type { Constructor } from './index.types';
-export declare class MenuMixinInterface {
-    ariaOrientation: Orientation;
-    protected handleKeyDown(event: KeyboardEvent): void;
-    protected handleMouseClick(event: MouseEvent): void;
-    protected updatePopoverPlacementBasedOnOrientation(): void;
-}
-export declare const MenuMixin: <T extends Constructor<LitElement>>(superClass: T) => Constructor<MenuMixinInterface> & T;