@momentum-design/components 0.129.14 → 0.129.16

package/dist/components/brandvisual/brandvisual.component.d.ts

@@ -17,6 +17,8 @@ import type { BrandVisualNames } from './brandvisual.types';
  * @event load - (React: onLoad) This event is dispatched when the brandvisual has been successfully loaded.
  * @event error - (React: onError) This event is dispatched when the brandvisual fetching has failed.
  *
+ * @csspart brandvisual - Set styles for the brandvisual svg container
+ * @csspart brandvisualImage - Set styles for the brandvisual image container
  */
 declare class Brandvisual extends Component {
     private brandVisualData?;

package/dist/components/brandvisual/brandvisual.component.js

@@ -27,6 +27,8 @@ import styles from './brandvisual.styles';
  * @event load - (React: onLoad) This event is dispatched when the brandvisual has been successfully loaded.
  * @event error - (React: onError) This event is dispatched when the brandvisual fetching has failed.
  *
+ * @csspart brandvisual - Set styles for the brandvisual svg container
+ * @csspart brandvisualImage - Set styles for the brandvisual image container
  */
 class Brandvisual extends Component {
     async getBrandVisualData() {
@@ -118,7 +120,7 @@ __decorate([
     __metadata("design:type", String)
 ], Brandvisual.prototype, "name", void 0);
 __decorate([
-    property({ type: String, reflect: true }),
+    property({ type: String, reflect: true, attribute: 'alt-text' }),
     __metadata("design:type", String)
 ], Brandvisual.prototype, "altText", void 0);
 export default Brandvisual;

package/dist/components/bullet/bullet.component.d.ts

@@ -14,9 +14,12 @@ import type { Size } from './bullet.types';
  */
 declare class Bullet extends Component {
     /**
-     * Size of the bullet
+     * Specifies the size of the bullet visual indicator.
+     *
+     * - `small` (default): 0.25rem (4px) - Compact bullet for dense layouts
+     * - `medium`: 0.5rem (8px) - Standard bullet for most use cases
+     * - `large`: 1rem (16px) - Prominent bullet for emphasis
      *
-     * Possible values: 'small', 'medium', 'large'
      * @default small
      */
     size: Size;

package/dist/components/bullet/bullet.component.js

@@ -26,9 +26,12 @@ class Bullet extends Component {
     constructor() {
         super(...arguments);
         /**
-         * Size of the bullet
+         * Specifies the size of the bullet visual indicator.
+         *
+         * - `small` (default): 0.25rem (4px) - Compact bullet for dense layouts
+         * - `medium`: 0.5rem (8px) - Standard bullet for most use cases
+         * - `large`: 1rem (16px) - Prominent bullet for emphasis
          *
-         * Possible values: 'small', 'medium', 'large'
          * @default small
          */
         this.size = SIZE.SMALL;

package/dist/components/button/button.component.d.ts

@@ -7,28 +7,43 @@ declare const Button_base: import("../../utils/mixins/index.types").Constructor<
 /**
  * `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
  *
@@ -41,6 +56,8 @@ declare const Button_base: import("../../utils/mixins/index.types").Constructor<
  * @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
@@ -52,18 +69,37 @@ declare const Button_base: import("../../utils/mixins/index.types").Constructor<
  */
 declare class Button extends Button_base {
     /**
-     * Button sizing is based on the button type.
-     * - **Pill button**: 40, 32, 28, 24.
-     * - **Icon button**: 64, 52, 40, 32, 28, 24.
-     * - Tertiary icon button can also be 20.
+     * Specifies the size of the button in pixels. Available sizes depend on the button type:
+     *
+     * **Pill button** (with text):
+     * - `40`: Large size (2.5rem)
+     * - `32`: Default size (2rem)
+     * - `28`: Medium size (1.75rem)
+     * - `24`: Small size (1.5rem)
+     *
+     * **Icon button** (icon only):
+     * - `64`: Extra large (4rem)
+     * - `52`: Large (3.25rem)
+     * - `40`: Medium-large (2.5rem)
+     * - `32`: Default (2rem)
+     * - `28`: Medium (1.75rem)
+     * - `24`: Small (1.5rem)
+     * - `20`: Extra small (1.25rem) - Only available for tertiary variant
+     *
      * @default 32
      */
     size: PillButtonSize | IconButtonSize;
     /**
-     * The button color can be inverted by setting the inverted attribute to true.
+     * Inverts the button's color scheme for use on dark backgrounds.
+     * When enabled, the button adapts its colors to maintain proper contrast on inverted surfaces.
+     *
+     * **Requirements:**
+     * - Only works with `variant="primary"`
+     * - Only works with `color="default"`
+     * - Button must not be in `active` state
+     *
+     * **Use case:** Place buttons on dark-colored backgrounds or inverted theme sections.
      *
-     * Only applies when variant is set to `primary`, color is set to `default`
-     * and button is not `active`.
      * @default false
      */
     inverted: boolean;

package/dist/components/button/button.component.js

@@ -18,28 +18,43 @@ import { getIconNameWithoutStyle } from './button.utils';
 /**
  * `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
  *
@@ -52,6 +67,8 @@ import { getIconNameWithoutStyle } from './button.utils';
  * @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
@@ -65,18 +82,37 @@ class Button extends ButtonComponentMixin(Buttonsimple) {
     constructor() {
         super(...arguments);
         /**
-         * Button sizing is based on the button type.
-         * - **Pill button**: 40, 32, 28, 24.
-         * - **Icon button**: 64, 52, 40, 32, 28, 24.
-         * - Tertiary icon button can also be 20.
+         * Specifies the size of the button in pixels. Available sizes depend on the button type:
+         *
+         * **Pill button** (with text):
+         * - `40`: Large size (2.5rem)
+         * - `32`: Default size (2rem)
+         * - `28`: Medium size (1.75rem)
+         * - `24`: Small size (1.5rem)
+         *
+         * **Icon button** (icon only):
+         * - `64`: Extra large (4rem)
+         * - `52`: Large (3.25rem)
+         * - `40`: Medium-large (2.5rem)
+         * - `32`: Default (2rem)
+         * - `28`: Medium (1.75rem)
+         * - `24`: Small (1.5rem)
+         * - `20`: Extra small (1.25rem) - Only available for tertiary variant
+         *
          * @default 32
          */
         this.size = DEFAULTS.SIZE;
         /**
-         * The button color can be inverted by setting the inverted attribute to true.
+         * Inverts the button's color scheme for use on dark backgrounds.
+         * When enabled, the button adapts its colors to maintain proper contrast on inverted surfaces.
+         *
+         * **Requirements:**
+         * - Only works with `variant="primary"`
+         * - Only works with `color="default"`
+         * - Button must not be in `active` state
+         *
+         * **Use case:** Place buttons on dark-colored backgrounds or inverted theme sections.
          *
-         * Only applies when variant is set to `primary`, color is set to `default`
-         * and button is not `active`.
          * @default false
          */
         this.inverted = DEFAULTS.INVERTED;

package/dist/components/buttongroup/buttongroup.component.d.ts

@@ -2,24 +2,22 @@ import { CSSResult, PropertyValues } from 'lit';
 import { Component } from '../../models';
 import type { ButtonGroupOrientation, ButtonGroupSize, ButtonGroupVariant } from './buttongroup.types';
 /**
- * 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.
+ * `mdc-buttongroup` is a wrapper component that groups multiple buttons together.
  *
- * 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.
+ * ## Supported button types
+ * - Icon buttons
+ * - Pill buttons
+ * - Combination of icon and pill buttons
  *
- * Buttons of sizes 24, 28, 32, and 40 are only supported inside a button group. Default size is 28.
+ * ## 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
  *
- * 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.
+ * ## Usage
+ * - Only `mdc-button` components are allowed as direct children
+ * - The `size` and `variant` set on buttongroup override individual button settings
  *
  * @tagname mdc-buttongroup
  *
@@ -33,23 +31,30 @@ import type { ButtonGroupOrientation, ButtonGroupSize, ButtonGroupVariant } from
  */
 declare class ButtonGroup extends Component {
     /**
-     * Orientation of the buttongroup.
+     * Layout direction of the buttons within the group.
+     * - `horizontal`: Buttons are arranged side by side (default)
+     * - `vertical`: Buttons are stacked vertically
      * @default 'horizontal'
      */
     orientation: ButtonGroupOrientation;
     /**
-     * Variant of the buttons within the buttongroup.
+     * Visual style variant applied to all buttons in the group.
+     * - `primary`: Solid background color
+     * - `secondary`: Transparent background with solid border
+     * - `tertiary`: No background or border, text-only appearance
      * @default 'primary'
      */
     variant: ButtonGroupVariant;
     /**
-     * Size of the buttons within the buttongroup.
-     * @default '28'
+     * Size applied to all buttons in the group.
+     * Available sizes: 24, 28, 32, 40
+     * @default 28
      */
     size: ButtonGroupSize;
     /**
-     * When this is true, the buttons within the buttongroup will be compact.
-     * i.e. Irrespective of the size of the buttons, they will have a height of 24px.
+     * Enables compact mode with reduced height.
+     * When true, all buttons have a fixed height of 24px regardless of their size setting.
+     * Useful for space-constrained layouts.
      * @default false
      */
     compact: boolean;

package/dist/components/buttongroup/buttongroup.component.js

@@ -13,24 +13,22 @@ import { Component } from '../../models';
 import { DEFAULTS } from './buttongroup.constants';
 import styles from './buttongroup.styles';
 /**
- * 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.
+ * `mdc-buttongroup` is a wrapper component that groups multiple buttons together.
  *
- * 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.
+ * ## Supported button types
+ * - Icon buttons
+ * - Pill buttons
+ * - Combination of icon and pill buttons
  *
- * Buttons of sizes 24, 28, 32, and 40 are only supported inside a button group. Default size is 28.
+ * ## 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
  *
- * 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.
+ * ## Usage
+ * - Only `mdc-button` components are allowed as direct children
+ * - The `size` and `variant` set on buttongroup override individual button settings
  *
  * @tagname mdc-buttongroup
  *
@@ -46,23 +44,30 @@ class ButtonGroup extends Component {
     constructor() {
         super(...arguments);
         /**
-         * Orientation of the buttongroup.
+         * Layout direction of the buttons within the group.
+         * - `horizontal`: Buttons are arranged side by side (default)
+         * - `vertical`: Buttons are stacked vertically
          * @default 'horizontal'
          */
         this.orientation = DEFAULTS.ORIENTATION;
         /**
-         * Variant of the buttons within the buttongroup.
+         * Visual style variant applied to all buttons in the group.
+         * - `primary`: Solid background color
+         * - `secondary`: Transparent background with solid border
+         * - `tertiary`: No background or border, text-only appearance
          * @default 'primary'
          */
         this.variant = DEFAULTS.VARIANT;
         /**
-         * Size of the buttons within the buttongroup.
-         * @default '28'
+         * Size applied to all buttons in the group.
+         * Available sizes: 24, 28, 32, 40
+         * @default 28
          */
         this.size = DEFAULTS.SIZE;
         /**
-         * When this is true, the buttons within the buttongroup will be compact.
-         * i.e. Irrespective of the size of the buttons, they will have a height of 24px.
+         * Enables compact mode with reduced height.
+         * When true, all buttons have a fixed height of 24px regardless of their size setting.
+         * Useful for space-constrained layouts.
          * @default false
          */
         this.compact = false;

package/dist/components/buttonsimple/buttonsimple.component.d.ts

@@ -9,16 +9,18 @@ declare const Buttonsimple_base: import("../../utils/mixins/index.types").Constr
  * 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 class Buttonsimple extends Buttonsimple_base {

package/dist/components/buttonsimple/buttonsimple.component.js

@@ -21,16 +21,18 @@ import styles from './buttonsimple.styles';
  * 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
  */
 class Buttonsimple extends AutoFocusOnMountMixin(TabIndexMixin(DisabledMixin(Component))) {