@momentum-design/components 0.129.13 → 0.129.14

package/dist/react/avatar/index.js

@@ -3,24 +3,31 @@ import { createComponent } from '@lit/react';
 import Component from '../../components/avatar';
 import { TAG_NAME } from '../../components/avatar/avatar.constants';
 /**
- * The `mdc-avatar` component is used to represent a person or a space.
- * An avatar can be an icon, initials, counter and photo.
- *
- * To set the photo of an avatar,
- * you need to set "src" attribute.
- *
- * While the avatar image is loading, as a placeholder,
- * we will show the initials text.
- * If the initials are not specified then,
- * we will show `user-regular` icon as a placeholder.
- *
- * By default, if there are no attributes specified,
- * then the default avatar will be an icon with `user-regular` name.
- *
- * The avatar component is non clickable and non interactive/focusable component.
- * If the avatar is typing, then the loading indicator will be displayed.
- * If the counter type avatar is set to a negative number, then we will display 0.
- * The presence indicator will be hidden when the counter property is set.
+ * The `mdc-avatar` component represents a person or a space. It displays as a photo, initials, icon, or counter.
+ *
+ * ## Display Priority
+ *
+ * When multiple attributes are provided, the component determines what to display based on this priority:
+ * 1. **Photo** (`src`) - Takes highest priority
+ *    - While loading: Shows `initials` as placeholder if provided (instant), otherwise shows icon (requires loading)
+ *    - After loading: Shows the photo
+ *    - On error: Placeholder remains visible (initials or icon)
+ * 2. **Icon** (`icon-name`) - Takes priority if no `src` is provided
+ *    - Shows custom icon if `icon-name` is set (requires icon library to load)
+ *    - **Note:** If both `icon-name` and `initials` are provided (without `src`), icon takes precedence and initials are ignored.
+ *      This means users may see a delay while the icon loads, even though initials render instantly.
+ *    - Defaults to `user-regular` icon if no other content is available
+ * 3. **Initials** (`initials`) - Displayed only if no `src` or `icon-name` is provided
+ *    - Shows first two characters, converted to uppercase
+ *    - Renders instantly (no loading required)
+ * 4. **Counter** (`counter`) - Displayed only if none of the above are provided
+ *    - Shows numeric value (max 99+)
+ *    - Negative values display as 0
+ *
+ * ## Behavior
+ * - Non-interactive and non-focusable component (use `mdc-avatarbutton` for clickable avatars)
+ * - Shows loading indicator overlay when `is-typing` is true (displays on top of existing content)
+ * - Presence indicator hidden when counter is set or when typing
  *
  * @dependency mdc-icon
  * @dependency mdc-presence

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

@@ -2,25 +2,27 @@ import { type EventName } from '@lit/react';
 import Component from '../../components/avatarbutton';
 import type { Events as EventsInherited } from '../../components/buttonsimple/buttonsimple.types';
 /**
- * The `mdc-avatarbutton` component is an interactable version of the `mdc-avatar` component.
+ * The `mdc-avatarbutton` component is an interactive, clickable version of `mdc-avatar`.
+ * It wraps the avatar component in a button, making it focusable and actionable.
  *
- * This component is made by extending `buttonsimple` class.
- * The button component acts as a wrapper for the avatar component.
+ * This component extends `buttonsimple` and includes all avatar display features (photo, initials, icon, counter, presence).
+ * Use CSS parts to customize the avatar's appearance inside the button.
  *
- * To override styles of the avatar inside, use the specified css parts.
+ * ## Accessibility
+ * - Always provide an `aria-label` attribute to describe the button's purpose
  *
  * @dependency mdc-avatar
  *
- * @event click - (React: onClick) This event is dispatched when the avatarbutton is clicked.
- * @event keydown - (React: onKeyDown) This event is dispatched when a key is pressed down on the avatarbutton.
- * @event keyup - (React: onKeyUp) This event is dispatched when a key is released on the avatarbutton.
- * @event focus - (React: onFocus) This event is dispatched when the avatarbutton receives focus.
+ * @event click - (React: onClick) Dispatched when the avatar button is clicked.
+ * @event keydown - (React: onKeyDown) Dispatched when a key is pressed on the avatar button.
+ * @event keyup - (React: onKeyUp) Dispatched when a key is released on the avatar button.
+ * @event focus - (React: onFocus) Dispatched when the avatar button receives focus.
  *
  * @tagname mdc-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
+ * @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.

package/dist/react/avatarbutton/index.js

@@ -3,25 +3,27 @@ import { createComponent } from '@lit/react';
 import Component from '../../components/avatarbutton';
 import { TAG_NAME } from '../../components/avatarbutton/avatarbutton.constants';
 /**
- * The `mdc-avatarbutton` component is an interactable version of the `mdc-avatar` component.
+ * The `mdc-avatarbutton` component is an interactive, clickable version of `mdc-avatar`.
+ * It wraps the avatar component in a button, making it focusable and actionable.
  *
- * This component is made by extending `buttonsimple` class.
- * The button component acts as a wrapper for the avatar component.
+ * This component extends `buttonsimple` and includes all avatar display features (photo, initials, icon, counter, presence).
+ * Use CSS parts to customize the avatar's appearance inside the button.
  *
- * To override styles of the avatar inside, use the specified css parts.
+ * ## Accessibility
+ * - Always provide an `aria-label` attribute to describe the button's purpose
  *
  * @dependency mdc-avatar
  *
- * @event click - (React: onClick) This event is dispatched when the avatarbutton is clicked.
- * @event keydown - (React: onKeyDown) This event is dispatched when a key is pressed down on the avatarbutton.
- * @event keyup - (React: onKeyUp) This event is dispatched when a key is released on the avatarbutton.
- * @event focus - (React: onFocus) This event is dispatched when the avatarbutton receives focus.
+ * @event click - (React: onClick) Dispatched when the avatar button is clicked.
+ * @event keydown - (React: onKeyDown) Dispatched when a key is pressed on the avatar button.
+ * @event keyup - (React: onKeyUp) Dispatched when a key is released on the avatar button.
+ * @event focus - (React: onFocus) Dispatched when the avatar button receives focus.
  *
  * @tagname mdc-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
+ * @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.

package/package.json

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