@momentum-design/components 0.134.1 → 0.134.2

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

@@ -37,6 +37,12 @@ declare const Button_base: import("../../utils/mixins/index.types").Constructor<
  * - **Accent**: For informational actions
  * - **Promotional**: For promotional actions
  *
+ * Color options for **Tertiary** buttons:
+ *
+ * - **Default**: For standard actions
+ * - **Accent**: For informational actions
+ * - **Negative**: For destructive or error actions
+ *
  * ### Button Sizes
  *
  * Size options for different button configurations in REM:

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

@@ -49,6 +49,12 @@ import { getIconNameWithoutStyle } from './button.utils';
  * - **Accent**: For informational actions
  * - **Promotional**: For promotional actions
  *
+ * Color options for **Tertiary** buttons:
+ *
+ * - **Default**: For standard actions
+ * - **Accent**: For informational actions
+ * - **Negative**: For destructive or error actions
+ *
  * ### Button Sizes
  *
  * Size options for different button configurations in REM:
@@ -143,6 +149,7 @@ class Button extends OverflowMixin(ButtonComponentMixin(Buttonsimple)) {
         }
         if (changedProperties.has('variant')) {
             this.setVariant(this.variant);
+            this.setColor(this.color);
             this.setSize(this.size);
         }
         if (changedProperties.has('color')) {

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

@@ -32,6 +32,11 @@ declare const BUTTON_TYPE_INTERNAL: {
     readonly ICON: "icon";
     readonly PILL_WITH_ICON: "pill-with-icon";
 };
+declare const TERTIARY_BUTTON_COLORS: {
+    readonly DEFAULT: "default";
+    readonly ACCENT: "accent";
+    readonly NEGATIVE: "negative";
+};
 declare const DEFAULTS: {
     readonly VARIANT: "primary";
     readonly SIZE: 32;
@@ -40,4 +45,4 @@ declare const DEFAULTS: {
     readonly TYPE: "button";
     readonly INVERTED: false;
 };
-export { TAG_NAME, DEFAULTS, BUTTON_VARIANTS, PILL_BUTTON_SIZES, ICON_BUTTON_SIZES, BUTTON_COLORS, BUTTON_TYPE_INTERNAL, BUTTON_TYPE, };
+export { TAG_NAME, DEFAULTS, BUTTON_VARIANTS, PILL_BUTTON_SIZES, ICON_BUTTON_SIZES, BUTTON_COLORS, TERTIARY_BUTTON_COLORS, BUTTON_TYPE_INTERNAL, BUTTON_TYPE, };

package/dist/components/button/button.constants.js

@@ -30,6 +30,11 @@ const BUTTON_TYPE_INTERNAL = {
     ICON: 'icon',
     PILL_WITH_ICON: 'pill-with-icon',
 };
+const TERTIARY_BUTTON_COLORS = {
+    DEFAULT: BUTTON_COLORS.DEFAULT,
+    ACCENT: BUTTON_COLORS.ACCENT,
+    NEGATIVE: BUTTON_COLORS.NEGATIVE,
+};
 const DEFAULTS = {
     VARIANT: BUTTON_VARIANTS.PRIMARY,
     SIZE: PILL_BUTTON_SIZES[32],
@@ -38,4 +43,4 @@ const DEFAULTS = {
     TYPE: BUTTON_TYPE.BUTTON,
     INVERTED: false,
 };
-export { TAG_NAME, DEFAULTS, BUTTON_VARIANTS, PILL_BUTTON_SIZES, ICON_BUTTON_SIZES, BUTTON_COLORS, BUTTON_TYPE_INTERNAL, BUTTON_TYPE, };
+export { TAG_NAME, DEFAULTS, BUTTON_VARIANTS, PILL_BUTTON_SIZES, ICON_BUTTON_SIZES, BUTTON_COLORS, TERTIARY_BUTTON_COLORS, BUTTON_TYPE_INTERNAL, BUTTON_TYPE, };

package/dist/components/button/button.styles.js

@@ -99,6 +99,28 @@ const styles = css `
     --mdc-button-background: var(--mds-color-theme-button-secondary-pressed);
   }
 
+  :host([color='accent'][variant='tertiary']) {
+    --mdc-button-text-color: var(--mds-color-theme-text-accent-normal);
+  }
+  :host([color='accent'][variant='tertiary']:hover:not([disabled]):not([soft-disabled])) {
+    --mdc-button-background: var(--mds-color-theme-button-secondary-hover);
+  }
+  :host([color='accent'][variant='tertiary']:active:not([disabled]):not([soft-disabled])),
+  :host([color='accent'][variant='tertiary'].pressed:not([disabled]):not([soft-disabled])) {
+    --mdc-button-background: var(--mds-color-theme-button-secondary-pressed);
+  }
+
+  :host([color='negative'][variant='tertiary']) {
+    --mdc-button-text-color: var(--mds-color-theme-text-error-normal);
+  }
+  :host([color='negative'][variant='tertiary']:hover:not([disabled]):not([soft-disabled])) {
+    --mdc-button-background: var(--mds-color-theme-button-secondary-hover);
+  }
+  :host([color='negative'][variant='tertiary']:active:not([disabled]):not([soft-disabled])),
+  :host([color='negative'][variant='tertiary'].pressed:not([disabled]):not([soft-disabled])) {
+    --mdc-button-background: var(--mds-color-theme-button-secondary-pressed);
+  }
+
   :host([size='64'][data-btn-type='icon']),
   :host([size='52'][data-btn-type='icon']),
   :host([size='40'][data-btn-type='icon']),

package/dist/components/buttonlink/buttonlink.component.js

@@ -87,6 +87,7 @@ class ButtonLink extends ButtonComponentMixin(Linksimple) {
         }
         if (changedProperties.has('variant')) {
             this.setVariant(this.variant);
+            this.setColor(this.color);
             this.setSize(this.size);
         }
         if (changedProperties.has('color')) {

package/dist/custom-elements.json

@@ -4897,7 +4897,7 @@
       "declarations": [
         {
           "kind": "class",
-          "description": "`mdc-button` is a component that can be configured in various ways to suit different use cases.\n\n## Button configuration\n\nThe appearance of the button depends on combination of multiple attributes.\n\n### Button Types\n\nThe type of button is inferred based on the presence of slot and/or prefix and postfix icons/slots:\n\n- **Pill button**: Contains text value, commonly used for call to action, tags, or filters\n- **Pill button with icons**: Contains an icon on the left or right side of the button\n- **Icon button**: Represented by just an icon without any text\n\n### Button Variants:\n\nOptions for button backgrounds and borders:\n\n- **Primary**: Solid background color\n- **Secondary**: Transparent background with solid border\n- **Tertiary**: No background or border, text-only appearance\n\n### Button Colors\n\nColor options for **Primary** and **Secondary** buttons:\n\n- **Default**: For standard actions\n- **Positive**: For success or confirmation actions\n- **Negative**: For destructive or error actions\n- **Accent**: For informational actions\n- **Promotional**: For promotional actions\n\n### Button Sizes\n\nSize options for different button configurations in REM:\n\n- **Pill button**: 40, 32, 28, 24\n- **Icon button**: 64, 52, 40, 32, 28, 24\n- **Tertiary icon button**: 20",
+          "description": "`mdc-button` is a component that can be configured in various ways to suit different use cases.\n\n## Button configuration\n\nThe appearance of the button depends on combination of multiple attributes.\n\n### Button Types\n\nThe type of button is inferred based on the presence of slot and/or prefix and postfix icons/slots:\n\n- **Pill button**: Contains text value, commonly used for call to action, tags, or filters\n- **Pill button with icons**: Contains an icon on the left or right side of the button\n- **Icon button**: Represented by just an icon without any text\n\n### Button Variants:\n\nOptions for button backgrounds and borders:\n\n- **Primary**: Solid background color\n- **Secondary**: Transparent background with solid border\n- **Tertiary**: No background or border, text-only appearance\n\n### Button Colors\n\nColor options for **Primary** and **Secondary** buttons:\n\n- **Default**: For standard actions\n- **Positive**: For success or confirmation actions\n- **Negative**: For destructive or error actions\n- **Accent**: For informational actions\n- **Promotional**: For promotional actions\n\nColor options for **Tertiary** buttons:\n\n- **Default**: For standard actions\n- **Accent**: For informational actions\n- **Negative**: For destructive or error actions\n\n### Button Sizes\n\nSize options for different button configurations in REM:\n\n- **Pill button**: 40, 32, 28, 24\n- **Icon button**: 64, 52, 40, 32, 28, 24\n- **Tertiary icon button**: 20",
           "name": "Button",
           "cssProperties": [
             {
@@ -5037,7 +5037,7 @@
               "type": {
                 "text": "ButtonColor"
               },
-              "description": "The semantic color of the button.\n- `positive`: For success or confirmation actions\n- `negative`: For destructive or error actions\n- `accent`: For informational actions\n- `promotional`: For promotional actions\n- `default`: For standard actions\n\nNote: Tertiary buttons always use default color.",
+              "description": "The semantic color of the button.\n- `positive`: For success or confirmation actions\n- `negative`: For destructive or error actions\n- `accent`: For informational actions\n- `promotional`: For promotional actions\n- `default`: For standard actions\n\nNote: Tertiary buttons only support default, accent, and negative colors.",
               "default": "default",
               "attribute": "color",
               "inheritedFrom": {
@@ -5272,7 +5272,7 @@
                   "description": "The color to set."
                 }
               ],
-              "description": "Sets the color attribute for the button.\nDefaults to DEFAULTS.COLOR if invalid or for tertiary button.",
+              "description": "Sets the color attribute for the button.\nDefaults to DEFAULTS.COLOR if invalid or if the color is not supported for the current variant.\nTertiary buttons only support default, accent, and negative colors.",
               "inheritedFrom": {
                 "name": "ButtonComponentMixin",
                 "module": "utils/mixins/ButtonComponentMixin.js"
@@ -5545,7 +5545,7 @@
               "type": {
                 "text": "ButtonColor"
               },
-              "description": "The semantic color of the button.\n- `positive`: For success or confirmation actions\n- `negative`: For destructive or error actions\n- `accent`: For informational actions\n- `promotional`: For promotional actions\n- `default`: For standard actions\n\nNote: Tertiary buttons always use default color.",
+              "description": "The semantic color of the button.\n- `positive`: For success or confirmation actions\n- `negative`: For destructive or error actions\n- `accent`: For informational actions\n- `promotional`: For promotional actions\n- `default`: For standard actions\n\nNote: Tertiary buttons only support default, accent, and negative colors.",
               "default": "default",
               "fieldName": "color",
               "inheritedFrom": {
@@ -5684,7 +5684,7 @@
             "module": "/src/components/buttonsimple/buttonsimple.component"
           },
           "tagName": "mdc-button",
-          "jsDoc": "/**\n * `mdc-button` is a component that can be configured in various ways to suit different use cases.\n *\n * ## Button configuration\n *\n * The appearance of the button depends on combination of multiple attributes.\n *\n * ### Button Types\n *\n * The type of button is inferred based on the presence of slot and/or prefix and postfix icons/slots:\n *\n * - **Pill button**: Contains text value, commonly used for call to action, tags, or filters\n * - **Pill button with icons**: Contains an icon on the left or right side of the button\n * - **Icon button**: Represented by just an icon without any text\n *\n * ### Button Variants:\n *\n * Options for button backgrounds and borders:\n *\n * - **Primary**: Solid background color\n * - **Secondary**: Transparent background with solid border\n * - **Tertiary**: No background or border, text-only appearance\n *\n * ### Button Colors\n *\n * Color options for **Primary** and **Secondary** buttons:\n *\n * - **Default**: For standard actions\n * - **Positive**: For success or confirmation actions\n * - **Negative**: For destructive or error actions\n * - **Accent**: For informational actions\n * - **Promotional**: For promotional actions\n *\n * ### Button Sizes\n *\n * Size options for different button configurations in REM:\n *\n * - **Pill button**: 40, 32, 28, 24\n * - **Icon button**: 64, 52, 40, 32, 28, 24\n * - **Tertiary icon button**: 20\n *\n * @dependency mdc-icon\n *\n * @tagname mdc-button\n *\n * @slot - Text label of the button.\n * @slot prefix - Content to be displayed before the text label.\n * @slot postfix - Content to be displayed after the text label.\n *\n * @csspart button-text - Text label of the button, passed in default slot\n * @csspart prefix - Content before the text label, passed in `prefix` slot\n * @csspart postfix - Content after the text label, passed in `postfix` slot\n * @csspart prefix-icon - Icon element displayed before the text label when `prefix-icon` attribute is set\n * @csspart postfix-icon - Icon element displayed after the text label when `postfix-icon` attribute is set\n *\n * @cssproperty --mdc-button-height - Height for button size\n * @cssproperty --mdc-button-background - Background of the button\n * @cssproperty --mdc-button-border-color - Border color of the button\n * @cssproperty --mdc-button-text-color - Text color of the button\n * @cssproperty --mdc-button-prefix-icon-size - Size of the prefix icon\n * @cssproperty --mdc-button-postfix-icon-size - Size of the postfix icon\n * @cssproperty --mdc-button-line-height - Line height of the button text\n *\n */",
+          "jsDoc": "/**\n * `mdc-button` is a component that can be configured in various ways to suit different use cases.\n *\n * ## Button configuration\n *\n * The appearance of the button depends on combination of multiple attributes.\n *\n * ### Button Types\n *\n * The type of button is inferred based on the presence of slot and/or prefix and postfix icons/slots:\n *\n * - **Pill button**: Contains text value, commonly used for call to action, tags, or filters\n * - **Pill button with icons**: Contains an icon on the left or right side of the button\n * - **Icon button**: Represented by just an icon without any text\n *\n * ### Button Variants:\n *\n * Options for button backgrounds and borders:\n *\n * - **Primary**: Solid background color\n * - **Secondary**: Transparent background with solid border\n * - **Tertiary**: No background or border, text-only appearance\n *\n * ### Button Colors\n *\n * Color options for **Primary** and **Secondary** buttons:\n *\n * - **Default**: For standard actions\n * - **Positive**: For success or confirmation actions\n * - **Negative**: For destructive or error actions\n * - **Accent**: For informational actions\n * - **Promotional**: For promotional actions\n *\n * Color options for **Tertiary** buttons:\n *\n * - **Default**: For standard actions\n * - **Accent**: For informational actions\n * - **Negative**: For destructive or error actions\n *\n * ### Button Sizes\n *\n * Size options for different button configurations in REM:\n *\n * - **Pill button**: 40, 32, 28, 24\n * - **Icon button**: 64, 52, 40, 32, 28, 24\n * - **Tertiary icon button**: 20\n *\n * @dependency mdc-icon\n *\n * @tagname mdc-button\n *\n * @slot - Text label of the button.\n * @slot prefix - Content to be displayed before the text label.\n * @slot postfix - Content to be displayed after the text label.\n *\n * @csspart button-text - Text label of the button, passed in default slot\n * @csspart prefix - Content before the text label, passed in `prefix` slot\n * @csspart postfix - Content after the text label, passed in `postfix` slot\n * @csspart prefix-icon - Icon element displayed before the text label when `prefix-icon` attribute is set\n * @csspart postfix-icon - Icon element displayed after the text label when `postfix-icon` attribute is set\n *\n * @cssproperty --mdc-button-height - Height for button size\n * @cssproperty --mdc-button-background - Background of the button\n * @cssproperty --mdc-button-border-color - Border color of the button\n * @cssproperty --mdc-button-text-color - Text color of the button\n * @cssproperty --mdc-button-prefix-icon-size - Size of the prefix icon\n * @cssproperty --mdc-button-postfix-icon-size - Size of the postfix icon\n * @cssproperty --mdc-button-line-height - Line height of the button text\n *\n */",
           "customElement": true,
           "events": [
             {
@@ -6028,7 +6028,7 @@
               "type": {
                 "text": "ButtonColor"
               },
-              "description": "The semantic color of the button.\n- `positive`: For success or confirmation actions\n- `negative`: For destructive or error actions\n- `accent`: For informational actions\n- `promotional`: For promotional actions\n- `default`: For standard actions\n\nNote: Tertiary buttons always use default color.",
+              "description": "The semantic color of the button.\n- `positive`: For success or confirmation actions\n- `negative`: For destructive or error actions\n- `accent`: For informational actions\n- `promotional`: For promotional actions\n- `default`: For standard actions\n\nNote: Tertiary buttons only support default, accent, and negative colors.",
               "default": "default",
               "attribute": "color",
               "inheritedFrom": {
@@ -6264,7 +6264,7 @@
                   "description": "The color to set."
                 }
               ],
-              "description": "Sets the color attribute for the button.\nDefaults to DEFAULTS.COLOR if invalid or for tertiary button.",
+              "description": "Sets the color attribute for the button.\nDefaults to DEFAULTS.COLOR if invalid or if the color is not supported for the current variant.\nTertiary buttons only support default, accent, and negative colors.",
               "inheritedFrom": {
                 "name": "ButtonComponentMixin",
                 "module": "utils/mixins/ButtonComponentMixin.js"
@@ -6528,7 +6528,7 @@
               "type": {
                 "text": "ButtonColor"
               },
-              "description": "The semantic color of the button.\n- `positive`: For success or confirmation actions\n- `negative`: For destructive or error actions\n- `accent`: For informational actions\n- `promotional`: For promotional actions\n- `default`: For standard actions\n\nNote: Tertiary buttons always use default color.",
+              "description": "The semantic color of the button.\n- `positive`: For success or confirmation actions\n- `negative`: For destructive or error actions\n- `accent`: For informational actions\n- `promotional`: For promotional actions\n- `default`: For standard actions\n\nNote: Tertiary buttons only support default, accent, and negative colors.",
               "default": "default",
               "fieldName": "color",
               "inheritedFrom": {
@@ -56070,7 +56070,7 @@
               "type": {
                 "text": "ButtonColor"
               },
-              "description": "The semantic color of the button.\n- `positive`: For success or confirmation actions\n- `negative`: For destructive or error actions\n- `accent`: For informational actions\n- `promotional`: For promotional actions\n- `default`: For standard actions\n\nNote: Tertiary buttons always use default color.",
+              "description": "The semantic color of the button.\n- `positive`: For success or confirmation actions\n- `negative`: For destructive or error actions\n- `accent`: For informational actions\n- `promotional`: For promotional actions\n- `default`: For standard actions\n\nNote: Tertiary buttons only support default, accent, and negative colors.",
               "default": "default",
               "attribute": "color"
             },
@@ -56119,7 +56119,7 @@
                   "description": "The color to set."
                 }
               ],
-              "description": "Sets the color attribute for the button.\nDefaults to DEFAULTS.COLOR if invalid or for tertiary button."
+              "description": "Sets the color attribute for the button.\nDefaults to DEFAULTS.COLOR if invalid or if the color is not supported for the current variant.\nTertiary buttons only support default, accent, and negative colors."
             },
             {
               "kind": "method",
@@ -56193,7 +56193,7 @@
               "type": {
                 "text": "ButtonColor"
               },
-              "description": "The semantic color of the button.\n- `positive`: For success or confirmation actions\n- `negative`: For destructive or error actions\n- `accent`: For informational actions\n- `promotional`: For promotional actions\n- `default`: For standard actions\n\nNote: Tertiary buttons always use default color.",
+              "description": "The semantic color of the button.\n- `positive`: For success or confirmation actions\n- `negative`: For destructive or error actions\n- `accent`: For informational actions\n- `promotional`: For promotional actions\n- `default`: For standard actions\n\nNote: Tertiary buttons only support default, accent, and negative colors.",
               "default": "default",
               "fieldName": "color"
             }

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

@@ -34,6 +34,12 @@ import type { Events as EventsInherited } from '../../components/buttonsimple/bu
  * - **Accent**: For informational actions
  * - **Promotional**: For promotional actions
  *
+ * Color options for **Tertiary** buttons:
+ *
+ * - **Default**: For standard actions
+ * - **Accent**: For informational actions
+ * - **Negative**: For destructive or error actions
+ *
  * ### Button Sizes
  *
  * Size options for different button configurations in REM:

package/dist/react/button/index.js

@@ -35,6 +35,12 @@ import { TAG_NAME } from '../../components/button/button.constants';
  * - **Accent**: For informational actions
  * - **Promotional**: For promotional actions
  *
+ * Color options for **Tertiary** buttons:
+ *
+ * - **Default**: For standard actions
+ * - **Accent**: For informational actions
+ * - **Negative**: For destructive or error actions
+ *
  * ### Button Sizes
  *
  * Size options for different button configurations in REM:

package/dist/utils/mixins/ButtonComponentMixin.js

@@ -9,7 +9,7 @@ var __metadata = (this && this.__metadata) || function (k, v) {
 };
 /* eslint-disable max-classes-per-file */
 import { property, state } from 'lit/decorators.js';
-import { BUTTON_COLORS, BUTTON_TYPE_INTERNAL, BUTTON_VARIANTS, DEFAULTS, ICON_BUTTON_SIZES, PILL_BUTTON_SIZES, } from '../../components/button/button.constants';
+import { BUTTON_COLORS, BUTTON_TYPE_INTERNAL, BUTTON_VARIANTS, DEFAULTS, ICON_BUTTON_SIZES, PILL_BUTTON_SIZES, TERTIARY_BUTTON_COLORS, } from '../../components/button/button.constants';
 export const ButtonComponentMixin = (superClass) => {
     class InnerMixinClass extends superClass {
         constructor() {
@@ -30,7 +30,7 @@ export const ButtonComponentMixin = (superClass) => {
              * - `promotional`: For promotional actions
              * - `default`: For standard actions
              *
-             * Note: Tertiary buttons always use default color.
+             * Note: Tertiary buttons only support default, accent, and negative colors.
              * @default default
              */
             this.color = DEFAULTS.COLOR;
@@ -49,12 +49,15 @@ export const ButtonComponentMixin = (superClass) => {
         }
         /**
          * Sets the color attribute for the button.
-         * Defaults to DEFAULTS.COLOR if invalid or for tertiary button.
+         * Defaults to DEFAULTS.COLOR if invalid or if the color is not supported for the current variant.
+         * Tertiary buttons only support default, accent, and negative colors.
          *
          * @param color - The color to set.
          */
         setColor(color) {
-            if (!Object.values(BUTTON_COLORS).includes(color) || this.variant === BUTTON_VARIANTS.TERTIARY) {
+            const isValidColor = Object.values(BUTTON_COLORS).includes(color);
+            const isTertiaryUnsupported = this.variant === BUTTON_VARIANTS.TERTIARY && !Object.values(TERTIARY_BUTTON_COLORS).includes(color);
+            if (!isValidColor || isTertiaryUnsupported) {
                 this.setAttribute('color', `${DEFAULTS.COLOR}`);
             }
             else {

package/package.json

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