@momentum-design/components 0.129.13 → 0.129.15

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

@@ -1,22 +1,26 @@
 import Component from '../../components/appheader';
 /**
- * The `mdc-appheader` component provides a structured and accessible app header layout.
- * It consists of three primary sections: leading, center, and trailing.
+ * The `mdc-appheader` component provides a structured and accessible app header layout with three sections: leading, center, and trailing.
  *
- * - The **leading section** typically holds a **brand logo**, **brand name** or **menu icon**.
- * - The **center section** can contain a **search bar**, **icons** or action controls.
- * - The **trailing section** generally includes a **profile avatar**, **additional icons** or **action controls**.
+ * ## Layout sections
+ * - **Leading** - Typically holds brand logo, brand name, or menu icon
+ * - **Center** - Can contain search bar, icons, navigation links, or action controls
+ * - **Trailing** - Generally includes profile avatar, icons, settings, or additional action controls
+ *
+ * Each section automatically handles flex alignment: leading aligns left, center aligns center, trailing aligns right.
  *
  * @tagname mdc-appheader
  *
- * @slot leading - Slot for the leading section (e.g., brand logo, brand name).
- * @slot center - Slot for the center section (e.g., search bar, icons).
- * @slot trailing - Slot for the trailing section (e.g., profile avatar, icons).
+ * @slot leading - Content for the leading section (left-aligned).
+ * @slot center - Content for the center section (center-aligned).
+ * @slot trailing - Content for the trailing section (right-aligned).
+ *
+ * @cssproperty --mdc-appheader-height - Height of the app header. Default is 4rem (64px).
  *
- * @csspart container - The main container for styling the header.
- * @csspart leading-section - The leading section of the header.
- * @csspart center-section - The center section of the header.
- * @csspart trailing-section - The trailing section of the header.
+ * @csspart container - The main header container.
+ * @csspart leading-section - The leading section wrapper (left side).
+ * @csspart center-section - The center section wrapper (middle).
+ * @csspart trailing-section - The trailing section wrapper (right side).
  */
 declare const reactWrapper: import("@lit/react").ReactWebComponent<Component, {}>;
 export default reactWrapper;

package/dist/react/appheader/index.js

@@ -3,23 +3,27 @@ import { createComponent } from '@lit/react';
 import Component from '../../components/appheader';
 import { TAG_NAME } from '../../components/appheader/appheader.constants';
 /**
- * The `mdc-appheader` component provides a structured and accessible app header layout.
- * It consists of three primary sections: leading, center, and trailing.
+ * The `mdc-appheader` component provides a structured and accessible app header layout with three sections: leading, center, and trailing.
  *
- * - The **leading section** typically holds a **brand logo**, **brand name** or **menu icon**.
- * - The **center section** can contain a **search bar**, **icons** or action controls.
- * - The **trailing section** generally includes a **profile avatar**, **additional icons** or **action controls**.
+ * ## Layout sections
+ * - **Leading** - Typically holds brand logo, brand name, or menu icon
+ * - **Center** - Can contain search bar, icons, navigation links, or action controls
+ * - **Trailing** - Generally includes profile avatar, icons, settings, or additional action controls
+ *
+ * Each section automatically handles flex alignment: leading aligns left, center aligns center, trailing aligns right.
  *
  * @tagname mdc-appheader
  *
- * @slot leading - Slot for the leading section (e.g., brand logo, brand name).
- * @slot center - Slot for the center section (e.g., search bar, icons).
- * @slot trailing - Slot for the trailing section (e.g., profile avatar, icons).
+ * @slot leading - Content for the leading section (left-aligned).
+ * @slot center - Content for the center section (center-aligned).
+ * @slot trailing - Content for the trailing section (right-aligned).
+ *
+ * @cssproperty --mdc-appheader-height - Height of the app header. Default is 4rem (64px).
  *
- * @csspart container - The main container for styling the header.
- * @csspart leading-section - The leading section of the header.
- * @csspart center-section - The center section of the header.
- * @csspart trailing-section - The trailing section of the header.
+ * @csspart container - The main header container.
+ * @csspart leading-section - The leading section wrapper (left side).
+ * @csspart center-section - The center section wrapper (middle).
+ * @csspart trailing-section - The trailing section wrapper (right side).
  */
 const reactWrapper = createComponent({
     tagName: TAG_NAME,

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

@@ -1,23 +1,30 @@
 import Component from '../../components/avatar';
 /**
- * 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/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/dist/react/button/index.d.ts

@@ -4,28 +4,43 @@ import type { Events as EventsInherited } from '../../components/buttonsimple/bu
 /**
  * `mdc-button` is a component that can be configured in various ways to suit different use cases.
  *
- * Button Variants:
- * - **Primary**: Solid background color.
- * - **Secondary**: Transparent background with a solid border.
- * - **Tertiary**: No background or border, appears as plain text but retains all button functionalities.
- *
- * Button Colors:
- * - **Positive**: Green color.
- * - **Negative**: Red color.
- * - **Accent**: Blue color.
- * - **Promotional**: Purple color.
- * - **Default**: White color.
- *
- * Button Sizes (in REM units):
- * - **Pill button**: 40, 32, 28, 24.
- * - **Icon button**: 64, 52, 40, 32, 28, 24.
- * - **Tertiary icon button**: 20.
- *
- * Button Types:
- * - **Pill button**: A button that contains text value. Commonly used for call to action, tags, or filters.
- * - **Pill button with icons**: A button containing an icon either on the left or right side of the button.
- * - **Icon button**: A button represented by just an icon without any text.
- * The type of button is inferred based on the presence of slot and/or prefix and postfix icons/slots.
+ * ## Button configuration
+ *
+ * The appearance of the button depends on combination of multiple attributes.
+ *
+ * ### Button Types
+ *
+ * The type of button is inferred based on the presence of slot and/or prefix and postfix icons/slots:
+ *
+ * - **Pill button**: Contains text value, commonly used for call to action, tags, or filters
+ * - **Pill button with icons**: Contains an icon on the left or right side of the button
+ * - **Icon button**: Represented by just an icon without any text
+ *
+ * ### Button Variants:
+ *
+ * Options for button backgrounds and borders:
+ *
+ * - **Primary**: Solid background color
+ * - **Secondary**: Transparent background with solid border
+ * - **Tertiary**: No background or border, text-only appearance
+ *
+ * ### Button Colors
+ *
+ * Color options for **Primary** and **Secondary** buttons:
+ *
+ * - **Default**: For standard actions
+ * - **Positive**: For success or confirmation actions
+ * - **Negative**: For destructive or error actions
+ * - **Accent**: For informational actions
+ * - **Promotional**: For promotional actions
+ *
+ * ### Button Sizes
+ *
+ * Size options for different button configurations in REM:
+ *
+ * - **Pill button**: 40, 32, 28, 24
+ * - **Icon button**: 64, 52, 40, 32, 28, 24
+ * - **Tertiary icon button**: 20
  *
  * @dependency mdc-icon
  *
@@ -38,6 +53,8 @@ import type { Events as EventsInherited } from '../../components/buttonsimple/bu
  * @csspart button-text - Text label of the button, passed in default slot
  * @csspart prefix - Content before the text label, passed in `prefix` slot
  * @csspart postfix - Content after the text label, passed in `postfix` slot
+ * @csspart prefix-icon - Icon element displayed before the text label when `prefix-icon` attribute is set
+ * @csspart postfix-icon - Icon element displayed after the text label when `postfix-icon` attribute is set
  *
  * @cssproperty --mdc-button-height - Height for button size
  * @cssproperty --mdc-button-background - Background of the button

package/dist/react/button/index.js

@@ -5,28 +5,43 @@ import { TAG_NAME } from '../../components/button/button.constants';
 /**
  * `mdc-button` is a component that can be configured in various ways to suit different use cases.
  *
- * Button Variants:
- * - **Primary**: Solid background color.
- * - **Secondary**: Transparent background with a solid border.
- * - **Tertiary**: No background or border, appears as plain text but retains all button functionalities.
- *
- * Button Colors:
- * - **Positive**: Green color.
- * - **Negative**: Red color.
- * - **Accent**: Blue color.
- * - **Promotional**: Purple color.
- * - **Default**: White color.
- *
- * Button Sizes (in REM units):
- * - **Pill button**: 40, 32, 28, 24.
- * - **Icon button**: 64, 52, 40, 32, 28, 24.
- * - **Tertiary icon button**: 20.
- *
- * Button Types:
- * - **Pill button**: A button that contains text value. Commonly used for call to action, tags, or filters.
- * - **Pill button with icons**: A button containing an icon either on the left or right side of the button.
- * - **Icon button**: A button represented by just an icon without any text.
- * The type of button is inferred based on the presence of slot and/or prefix and postfix icons/slots.
+ * ## Button configuration
+ *
+ * The appearance of the button depends on combination of multiple attributes.
+ *
+ * ### Button Types
+ *
+ * The type of button is inferred based on the presence of slot and/or prefix and postfix icons/slots:
+ *
+ * - **Pill button**: Contains text value, commonly used for call to action, tags, or filters
+ * - **Pill button with icons**: Contains an icon on the left or right side of the button
+ * - **Icon button**: Represented by just an icon without any text
+ *
+ * ### Button Variants:
+ *
+ * Options for button backgrounds and borders:
+ *
+ * - **Primary**: Solid background color
+ * - **Secondary**: Transparent background with solid border
+ * - **Tertiary**: No background or border, text-only appearance
+ *
+ * ### Button Colors
+ *
+ * Color options for **Primary** and **Secondary** buttons:
+ *
+ * - **Default**: For standard actions
+ * - **Positive**: For success or confirmation actions
+ * - **Negative**: For destructive or error actions
+ * - **Accent**: For informational actions
+ * - **Promotional**: For promotional actions
+ *
+ * ### Button Sizes
+ *
+ * Size options for different button configurations in REM:
+ *
+ * - **Pill button**: 40, 32, 28, 24
+ * - **Icon button**: 64, 52, 40, 32, 28, 24
+ * - **Tertiary icon button**: 20
  *
  * @dependency mdc-icon
  *
@@ -39,6 +54,8 @@ import { TAG_NAME } from '../../components/button/button.constants';
  * @csspart button-text - Text label of the button, passed in default slot
  * @csspart prefix - Content before the text label, passed in `prefix` slot
  * @csspart postfix - Content after the text label, passed in `postfix` slot
+ * @csspart prefix-icon - Icon element displayed before the text label when `prefix-icon` attribute is set
+ * @csspart postfix-icon - Icon element displayed after the text label when `postfix-icon` attribute is set
  *
  * @cssproperty --mdc-button-height - Height for button size
  * @cssproperty --mdc-button-background - Background of the button

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

@@ -1,23 +1,21 @@
 import Component from '../../components/buttongroup';
 /**
- * buttongroup component, is a wrapper to group multiple buttons.
- * It can support icon buttons, combination of icon and pill buttons, and text buttons.
- * Button group can be positioned in horizontal orientation and vertical orientation.
- *
- * The sizes of buttons within the button group can be set using the `size` attribute on the button group,
- * which will apply the size to all buttons within the group.
- *
- * Buttons of sizes 24, 28, 32, and 40 are only supported inside a button group. Default size is 28.
- *
- * The variant of buttons within the button group can be set using the `variant` attribute on the button group,
- * which will apply the variant to all buttons within the group. Default variant is `primary`.
- *
- * All buttons are placed horizontally by default. To change the orientation to vertical, set the `orientation` attribute to `vertical`.
- *
- * Things to note:
- * - Button group will allow only `mdc-button` components as its direct children.
- * - Button group will set the `size` and `variant` attributes on the buttons within it,
- *   so any `size` or `variant` set directly on any button will be overridden.
+ * `mdc-buttongroup` is a wrapper component that groups multiple buttons together.
+ *
+ * ## Supported button types
+ * - Icon buttons
+ * - Pill buttons
+ * - Combination of icon and pill buttons
+ *
+ * ## Features
+ * - Horizontal or vertical orientation
+ * - Unified size and variant applied to all child buttons
+ * - Optional compact mode for reduced height
+ * - Supported sizes: 24, 28 (default), 32, 40
+ *
+ * ## Usage
+ * - Only `mdc-button` components are allowed as direct children
+ * - The `size` and `variant` set on buttongroup override individual button settings
  *
  * @tagname mdc-buttongroup
  *

package/dist/react/buttongroup/index.js

@@ -3,24 +3,22 @@ import { createComponent } from '@lit/react';
 import Component from '../../components/buttongroup';
 import { TAG_NAME } from '../../components/buttongroup/buttongroup.constants';
 /**
- * buttongroup component, is a wrapper to group multiple buttons.
- * It can support icon buttons, combination of icon and pill buttons, and text buttons.
- * Button group can be positioned in horizontal orientation and vertical orientation.
- *
- * The sizes of buttons within the button group can be set using the `size` attribute on the button group,
- * which will apply the size to all buttons within the group.
- *
- * Buttons of sizes 24, 28, 32, and 40 are only supported inside a button group. Default size is 28.
- *
- * The variant of buttons within the button group can be set using the `variant` attribute on the button group,
- * which will apply the variant to all buttons within the group. Default variant is `primary`.
- *
- * All buttons are placed horizontally by default. To change the orientation to vertical, set the `orientation` attribute to `vertical`.
- *
- * Things to note:
- * - Button group will allow only `mdc-button` components as its direct children.
- * - Button group will set the `size` and `variant` attributes on the buttons within it,
- *   so any `size` or `variant` set directly on any button will be overridden.
+ * `mdc-buttongroup` is a wrapper component that groups multiple buttons together.
+ *
+ * ## Supported button types
+ * - Icon buttons
+ * - Pill buttons
+ * - Combination of icon and pill buttons
+ *
+ * ## Features
+ * - Horizontal or vertical orientation
+ * - Unified size and variant applied to all child buttons
+ * - Optional compact mode for reduced height
+ * - Supported sizes: 24, 28 (default), 32, 40
+ *
+ * ## Usage
+ * - Only `mdc-button` components are allowed as direct children
+ * - The `size` and `variant` set on buttongroup override individual button settings
  *
  * @tagname mdc-buttongroup
  *

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

@@ -6,16 +6,18 @@ import type { Events } from '../../components/buttonsimple/buttonsimple.types';
  * It is used as an internal component and is not intended to be used directly by consumers.
  * Consumers should use the `mdc-button` component instead.
  *
+ * @tagname mdc-buttonsimple
+ *
+ * @slot - Text label of the button.
+ *
  * @event click - (React: onClick) This event is dispatched when the button is clicked.
  * @event keydown - (React: onKeyDown) This event is dispatched when a key is pressed down on the button.
  * @event keyup - (React: onKeyUp) This event is dispatched when a key is released on the button.
  * @event focus - (React: onFocus) This event is dispatched when the button receives focus.
  *
- * @tagname mdc-buttonsimple
- *
  * @cssproperty --mdc-button-height - Height for button size
  * @cssproperty --mdc-button-background - Background color of the button
- * @cssproperty --mdc-button-border-color - Borer color of the button
+ * @cssproperty --mdc-button-border-color - Border color of the button
  * @cssproperty --mdc-button-text-color - Text color of the button
  */
 declare const reactWrapper: import("@lit/react").ReactWebComponent<Component, {

package/dist/react/buttonsimple/index.js

@@ -7,16 +7,18 @@ import { TAG_NAME } from '../../components/buttonsimple/buttonsimple.constants';
  * It is used as an internal component and is not intended to be used directly by consumers.
  * Consumers should use the `mdc-button` component instead.
  *
+ * @tagname mdc-buttonsimple
+ *
+ * @slot - Text label of the button.
+ *
  * @event click - (React: onClick) This event is dispatched when the button is clicked.
  * @event keydown - (React: onKeyDown) This event is dispatched when a key is pressed down on the button.
  * @event keyup - (React: onKeyUp) This event is dispatched when a key is released on the button.
  * @event focus - (React: onFocus) This event is dispatched when the button receives focus.
  *
- * @tagname mdc-buttonsimple
- *
  * @cssproperty --mdc-button-height - Height for button size
  * @cssproperty --mdc-button-background - Background color of the button
- * @cssproperty --mdc-button-border-color - Borer color of the button
+ * @cssproperty --mdc-button-border-color - Border color of the button
  * @cssproperty --mdc-button-text-color - Text color of the button
  */
 const reactWrapper = createComponent({

package/dist/utils/mixins/ButtonComponentMixin.js

@@ -15,15 +15,22 @@ export const ButtonComponentMixin = (superClass) => {
         constructor() {
             super(...arguments);
             /**
-             * There are 3 variants of button: primary, secondary, tertiary. They are styled differently.
-             * - **Primary**: Solid background color.
-             * - **Secondary**: Transparent background with a solid border.
-             * - **Tertiary**: No background or border, appears as plain text but retains all button functionalities.
+             * The visual style variant of the button.
+             * - `primary`: Solid background color
+             * - `secondary`: Transparent background with solid border
+             * - `tertiary`: No background or border, text-only appearance
              * @default primary
              */
             this.variant = DEFAULTS.VARIANT;
             /**
-             * There are 5 colors for button: positive, negative, accent, promotional, default.
+             * The semantic color of the button.
+             * - `positive`: For success or confirmation actions
+             * - `negative`: For destructive or error actions
+             * - `accent`: For informational actions
+             * - `promotional`: For promotional actions
+             * - `default`: For standard actions
+             *
+             * Note: Tertiary buttons always use default color.
              * @default default
              */
             this.color = DEFAULTS.COLOR;

package/package.json

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