@momentum-design/components 0.129.14 → 0.129.15

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.14",
+  "version": "0.129.15",
   "engines": {
     "node": ">=20.0.0",
     "npm": ">=8.0.0"