@momentum-design/components 0.120.6 → 0.120.8

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

@@ -38,11 +38,6 @@ declare const Badge_base: import("../../utils/mixins/index.types").Constructor<i
  *
  * @csspart badge-dot - The dot notification badge.
  * @csspart badge-icon - The icon badge.
- * @csspart badge-icon__error - The error icon badge.
- * @csspart badge-icon__primary - The primary icon badge.
- * @csspart badge-icon__secondary - The secondary icon badge.
- * @csspart badge-icon__success - The success icon badge.
- * @csspart badge-icon__warning - The warning icon badge.
  * @csspart badge-overlay - The overlay badge.
  * @csspart badge-text - The text badge.
  */
@@ -93,7 +88,6 @@ declare class Badge extends Badge_base {
     /**
      * Method to generate the badge icon.
      * @param iconName - the name of the icon from the icon set
-     * @param backgroundPartPostfix - postfix for the part to style the badge icon.
      * @returns the template result of the icon.
      */
     private getBadgeIcon;

package/dist/components/badge/badge.component.js

@@ -14,7 +14,7 @@ import { Component } from '../../models';
 import { IconNameMixin } from '../../utils/mixins/IconNameMixin';
 import { ROLE } from '../../utils/roles';
 import { TYPE as FONT_TYPE, VALID_TEXT_TAGS } from '../text/text.constants';
-import { DEFAULTS, ICON_NAMES_LIST, ICON_STATE, ICON_VARIANT, TYPE as BADGE_TYPE } from './badge.constants';
+import { DEFAULTS, ICON_NAMES_LIST, ICON_VARIANT, TYPE as BADGE_TYPE } from './badge.constants';
 import styles from './badge.styles';
 /**
  * The `mdc-badge` component is a versatile UI element used to
@@ -52,11 +52,6 @@ import styles from './badge.styles';
  *
  * @csspart badge-dot - The dot notification badge.
  * @csspart badge-icon - The icon badge.
- * @csspart badge-icon__error - The error icon badge.
- * @csspart badge-icon__primary - The primary icon badge.
- * @csspart badge-icon__secondary - The secondary icon badge.
- * @csspart badge-icon__success - The success icon badge.
- * @csspart badge-icon__warning - The warning icon badge.
  * @csspart badge-overlay - The overlay badge.
  * @csspart badge-text - The text badge.
  */
@@ -113,13 +108,12 @@ class Badge extends IconNameMixin(Component) {
     /**
      * Method to generate the badge icon.
      * @param iconName - the name of the icon from the icon set
-     * @param backgroundPartPostfix - postfix for the part to style the badge icon.
      * @returns the template result of the icon.
      */
-    getBadgeIcon(iconName, backgroundPartPostfix) {
+    getBadgeIcon(iconName) {
         return html `
       <mdc-icon
-        part="badge-icon ${this.overlay ? 'badge-overlay' : ''} badge-icon__${backgroundPartPostfix}"
+        part="badge-icon ${this.overlay ? 'badge-overlay' : ''}"
         name="${ifDefined(iconName)}"
         size="${DEFAULTS.ICON_SIZE}"
       ></mdc-icon>
@@ -171,18 +165,18 @@ class Badge extends IconNameMixin(Component) {
         if (this.variant && !Object.values(ICON_VARIANT).includes(this.variant)) {
             this.variant = DEFAULTS.VARIANT;
         }
-        const { iconName, type, variant } = this;
+        const { iconName, type } = this;
         switch (type) {
             case BADGE_TYPE.ICON:
-                return this.getBadgeIcon(iconName || '', variant);
+                return this.getBadgeIcon(iconName || '');
             case BADGE_TYPE.COUNTER:
                 return this.getBadgeCounterText();
             case BADGE_TYPE.SUCCESS:
-                return this.getBadgeIcon(ICON_NAMES_LIST.SUCCESS_ICON_NAME, ICON_STATE.SUCCESS);
+                return this.getBadgeIcon(ICON_NAMES_LIST.SUCCESS_ICON_NAME);
             case BADGE_TYPE.WARNING:
-                return this.getBadgeIcon(ICON_NAMES_LIST.WARNING_ICON_NAME, ICON_STATE.WARNING);
+                return this.getBadgeIcon(ICON_NAMES_LIST.WARNING_ICON_NAME);
             case BADGE_TYPE.ERROR:
-                return this.getBadgeIcon(ICON_NAMES_LIST.ERROR_ICON_NAME, ICON_STATE.ERROR);
+                return this.getBadgeIcon(ICON_NAMES_LIST.ERROR_ICON_NAME);
             case BADGE_TYPE.DOT:
             default:
                 this.type = BADGE_TYPE.DOT;

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

@@ -1,3 +1,4 @@
+import type { IconNames } from '../icon/icon.types';
 declare const TAG_NAME: "mdc-badge";
 declare const TYPE: {
     readonly DOT: "dot";
@@ -8,26 +9,14 @@ declare const TYPE: {
     readonly ERROR: "error";
 };
 declare const ICON_NAMES_LIST: {
-    readonly SUCCESS_ICON_NAME: "check-circle-badge-filled";
-    readonly WARNING_ICON_NAME: "warning-badge-filled";
-    readonly ERROR_ICON_NAME: "error-legacy-badge-filled";
+    readonly SUCCESS_ICON_NAME: Extract<IconNames, "check-circle-badge-filled">;
+    readonly WARNING_ICON_NAME: Extract<IconNames, "warning-badge-filled">;
+    readonly ERROR_ICON_NAME: Extract<IconNames, "error-legacy-badge-filled">;
 };
 declare const ICON_VARIANT: {
     readonly PRIMARY: "primary";
     readonly SECONDARY: "secondary";
 };
-declare const ICON_STATE: {
-    readonly SUCCESS: "success";
-    readonly WARNING: "warning";
-    readonly ERROR: "error";
-};
-declare const BACKGROUND_STYLES: {
-    readonly SUCCESS: "success";
-    readonly WARNING: "warning";
-    readonly ERROR: "error";
-    readonly PRIMARY: "primary";
-    readonly SECONDARY: "secondary";
-};
 declare const DEFAULTS: {
     readonly TYPE: "dot";
     readonly MAX_COUNTER: 99;
@@ -35,4 +24,4 @@ declare const DEFAULTS: {
     readonly VARIANT: "primary";
     readonly ICON_SIZE: 1;
 };
-export { TAG_NAME, DEFAULTS, TYPE, ICON_STATE, ICON_VARIANT, ICON_NAMES_LIST, BACKGROUND_STYLES };
+export { TAG_NAME, DEFAULTS, TYPE, ICON_VARIANT, ICON_NAMES_LIST };

package/dist/components/badge/badge.constants.js

@@ -17,15 +17,6 @@ const ICON_VARIANT = {
     PRIMARY: 'primary',
     SECONDARY: 'secondary',
 };
-const ICON_STATE = {
-    SUCCESS: 'success',
-    WARNING: 'warning',
-    ERROR: 'error',
-};
-const BACKGROUND_STYLES = {
-    ...ICON_VARIANT,
-    ...ICON_STATE,
-};
 const DEFAULTS = {
     TYPE: TYPE.DOT,
     MAX_COUNTER: 99,
@@ -33,4 +24,4 @@ const DEFAULTS = {
     VARIANT: ICON_VARIANT.PRIMARY,
     ICON_SIZE: 1,
 };
-export { TAG_NAME, DEFAULTS, TYPE, ICON_STATE, ICON_VARIANT, ICON_NAMES_LIST, BACKGROUND_STYLES };
+export { TAG_NAME, DEFAULTS, TYPE, ICON_VARIANT, ICON_NAMES_LIST };

package/dist/components/badge/badge.styles.js

@@ -44,26 +44,26 @@ const styles = [
       padding: 2px;
       border-radius: 50%;
     }
-    :host::part(badge-icon__primary) {
+    :host([type='icon'][variant='primary'])::part(badge-icon) {
       background-color: var(--mdc-badge-primary-background-color);
       color: var(--mdc-badge-primary-foreground-color);
     }
-    :host::part(badge-icon__success) {
+    :host([type='icon'][variant='secondary'])::part(badge-icon) {
+      background-color: var(--mdc-badge-secondary-background-color);
+      color: var(--mdc-badge-secondary-foreground-color);
+    }
+    :host([type='success'])::part(badge-icon) {
       background-color: var(--mdc-badge-success-background-color);
       color: var(--mdc-badge-success-foreground-color);
     }
-    :host::part(badge-icon__warning) {
+    :host([type='warning'])::part(badge-icon) {
       background-color: var(--mdc-badge-warning-background-color);
       color: var(--mdc-badge-warning-foreground-color);
     }
-    :host::part(badge-icon__error) {
+    :host([type='error'])::part(badge-icon) {
       background-color: var(--mdc-badge-error-background-color);
       color: var(--mdc-badge-error-foreground-color);
     }
-    :host::part(badge-icon__secondary) {
-      background-color: var(--mdc-badge-secondary-background-color);
-      color: var(--mdc-badge-secondary-foreground-color);
-    }
 
     /* High Contrast Mode */
     @media (forced-colors: active) {

package/dist/custom-elements.json

@@ -4273,26 +4273,6 @@
               "description": "The icon badge.",
               "name": "badge-icon"
             },
-            {
-              "description": "The error icon badge.",
-              "name": "badge-icon__error"
-            },
-            {
-              "description": "The primary icon badge.",
-              "name": "badge-icon__primary"
-            },
-            {
-              "description": "The secondary icon badge.",
-              "name": "badge-icon__secondary"
-            },
-            {
-              "description": "The success icon badge.",
-              "name": "badge-icon__success"
-            },
-            {
-              "description": "The warning icon badge.",
-              "name": "badge-icon__warning"
-            },
             {
               "description": "The overlay badge.",
               "name": "badge-overlay"
@@ -4408,13 +4388,6 @@
                     "text": "string"
                   },
                   "description": "the name of the icon from the icon set"
-                },
-                {
-                  "name": "backgroundPartPostfix",
-                  "type": {
-                    "text": "string"
-                  },
-                  "description": "postfix for the part to style the badge icon."
                 }
               ],
               "description": "Method to generate the badge icon."
@@ -4554,7 +4527,7 @@
             "module": "/src/models"
           },
           "tagName": "mdc-badge",
-          "jsDoc": "/**\n * The `mdc-badge` component is a versatile UI element used to\n * display dot, icons, counters, success, warning and error type badge.\n *\n * Supported badge types:\n * - `dot`: Displays a dot notification badge with a blue color.\n * - `icon`: Displays a badge with a specified icon using the `icon-name` attribute.\n * - `counter`: Displays a badge with a counter value. If the counter exceeds the `max-counter`,\n * it shows `maxCounter+`. The maximum value of the counter is 999 and anything above that will be set to `999+`.\n * - `success`: Displays a success badge with a check circle icon and green color.\n * - `warning`: Displays a warning badge with a warning icon and yellow color.\n * - `error`: Displays a error badge with a error legacy icon and red color.\n *\n * For `icon`, `success`, `warning` and `error` types, the `mdc-icon` component is used to render the icon.\n *\n * For the `counter` type, the `mdc-text` component is used to render the counter value.\n *\n * @dependency mdc-icon\n * @dependency mdc-text\n *\n * @tagname mdc-badge\n *\n * @cssproperty --mdc-badge-primary-foreground-color - The foreground color of the primary badge.\n * @cssproperty --mdc-badge-primary-background-color - The background color of the primary badge.\n * @cssproperty --mdc-badge-secondary-foreground-color - The foreground color of the secondary badge.\n * @cssproperty --mdc-badge-secondary-background-color - The background color of the secondary badge.\n * @cssproperty --mdc-badge-success-foreground-color - The foreground color of the success badge.\n * @cssproperty --mdc-badge-success-background-color - The background color of the success badge.\n * @cssproperty --mdc-badge-warning-foreground-color - The foreground color of the warning badge.\n * @cssproperty --mdc-badge-warning-background-color - The background color of the warning badge.\n * @cssproperty --mdc-badge-error-foreground-color - The foreground color of the error badge.\n * @cssproperty --mdc-badge-error-background-color - The background color of the error badge.\n * @cssproperty --mdc-badge-overlay-background-color - The background color of the badge overlay.\n *\n * @csspart badge-dot - The dot notification badge.\n * @csspart badge-icon - The icon badge.\n * @csspart badge-icon__error - The error icon badge.\n * @csspart badge-icon__primary - The primary icon badge.\n * @csspart badge-icon__secondary - The secondary icon badge.\n * @csspart badge-icon__success - The success icon badge.\n * @csspart badge-icon__warning - The warning icon badge.\n * @csspart badge-overlay - The overlay badge.\n * @csspart badge-text - The text badge.\n */",
+          "jsDoc": "/**\n * The `mdc-badge` component is a versatile UI element used to\n * display dot, icons, counters, success, warning and error type badge.\n *\n * Supported badge types:\n * - `dot`: Displays a dot notification badge with a blue color.\n * - `icon`: Displays a badge with a specified icon using the `icon-name` attribute.\n * - `counter`: Displays a badge with a counter value. If the counter exceeds the `max-counter`,\n * it shows `maxCounter+`. The maximum value of the counter is 999 and anything above that will be set to `999+`.\n * - `success`: Displays a success badge with a check circle icon and green color.\n * - `warning`: Displays a warning badge with a warning icon and yellow color.\n * - `error`: Displays a error badge with a error legacy icon and red color.\n *\n * For `icon`, `success`, `warning` and `error` types, the `mdc-icon` component is used to render the icon.\n *\n * For the `counter` type, the `mdc-text` component is used to render the counter value.\n *\n * @dependency mdc-icon\n * @dependency mdc-text\n *\n * @tagname mdc-badge\n *\n * @cssproperty --mdc-badge-primary-foreground-color - The foreground color of the primary badge.\n * @cssproperty --mdc-badge-primary-background-color - The background color of the primary badge.\n * @cssproperty --mdc-badge-secondary-foreground-color - The foreground color of the secondary badge.\n * @cssproperty --mdc-badge-secondary-background-color - The background color of the secondary badge.\n * @cssproperty --mdc-badge-success-foreground-color - The foreground color of the success badge.\n * @cssproperty --mdc-badge-success-background-color - The background color of the success badge.\n * @cssproperty --mdc-badge-warning-foreground-color - The foreground color of the warning badge.\n * @cssproperty --mdc-badge-warning-background-color - The background color of the warning badge.\n * @cssproperty --mdc-badge-error-foreground-color - The foreground color of the error badge.\n * @cssproperty --mdc-badge-error-background-color - The background color of the error badge.\n * @cssproperty --mdc-badge-overlay-background-color - The background color of the badge overlay.\n *\n * @csspart badge-dot - The dot notification badge.\n * @csspart badge-icon - The icon badge.\n * @csspart badge-overlay - The overlay badge.\n * @csspart badge-text - The text badge.\n */",
           "customElement": true
         }
       ],
@@ -41049,6 +41022,94 @@
         }
       ]
     },
+    {
+      "kind": "javascript-module",
+      "path": "components/stepperconnector/stepperconnector.component.js",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "StepperConnector component visually represents the connection between two stepper items.\nIndicates whether the connection is complete or incomplete, and supports vertical or horizontal orientation.\nThey are used between 2 `mdc-stepperitem` components to visually connect them and wrapped in a `mdc-stepper` component.",
+          "name": "StepperConnector",
+          "cssProperties": [
+            {
+              "description": "Background color for the complete connector",
+              "name": "--mdc-stepperconnector-complete-background"
+            },
+            {
+              "description": "Background color for the incomplete connector",
+              "name": "--mdc-stepperconnector-incomplete-background"
+            }
+          ],
+          "cssParts": [
+            {
+              "description": "The main connector line between steps",
+              "name": "connector"
+            }
+          ],
+          "members": [
+            {
+              "kind": "field",
+              "name": "status",
+              "type": {
+                "text": "StatusType"
+              },
+              "description": "The status of the connector (complete or incomplete)",
+              "default": "\"incomplete\"",
+              "attribute": "status",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "orientation",
+              "type": {
+                "text": "OrientationType"
+              },
+              "description": "The orientation of the connector (vertical or horizontal)",
+              "default": "\"horizontal\"",
+              "attribute": "orientation",
+              "reflects": true
+            }
+          ],
+          "attributes": [
+            {
+              "name": "status",
+              "type": {
+                "text": "StatusType"
+              },
+              "description": "The status of the connector (complete or incomplete)",
+              "default": "\"incomplete\"",
+              "fieldName": "status"
+            },
+            {
+              "name": "orientation",
+              "type": {
+                "text": "OrientationType"
+              },
+              "description": "The orientation of the connector (vertical or horizontal)",
+              "default": "\"horizontal\"",
+              "fieldName": "orientation"
+            }
+          ],
+          "superclass": {
+            "name": "Component",
+            "module": "/src/models"
+          },
+          "tagName": "mdc-stepperconnector",
+          "jsDoc": "/**\n * StepperConnector component visually represents the connection between two stepper items.\n * Indicates whether the connection is complete or incomplete, and supports vertical or horizontal orientation.\n * They are used between 2 `mdc-stepperitem` components to visually connect them and wrapped in a `mdc-stepper` component.\n *\n * @tagname mdc-stepperconnector\n *\n * @csspart connector - The main connector line between steps\n *\n * @cssproperty --mdc-stepperconnector-complete-background - Background color for the complete connector\n * @cssproperty --mdc-stepperconnector-incomplete-background - Background color for the incomplete connector\n */",
+          "customElement": true
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "default",
+          "declaration": {
+            "name": "StepperConnector",
+            "module": "components/stepperconnector/stepperconnector.component.js"
+          }
+        }
+      ]
+    },
     {
       "kind": "javascript-module",
       "path": "components/stepper/stepper.component.js",
@@ -41146,94 +41207,6 @@
         }
       ]
     },
-    {
-      "kind": "javascript-module",
-      "path": "components/stepperconnector/stepperconnector.component.js",
-      "declarations": [
-        {
-          "kind": "class",
-          "description": "StepperConnector component visually represents the connection between two stepper items.\nIndicates whether the connection is complete or incomplete, and supports vertical or horizontal orientation.\nThey are used between 2 `mdc-stepperitem` components to visually connect them and wrapped in a `mdc-stepper` component.",
-          "name": "StepperConnector",
-          "cssProperties": [
-            {
-              "description": "Background color for the complete connector",
-              "name": "--mdc-stepperconnector-complete-background"
-            },
-            {
-              "description": "Background color for the incomplete connector",
-              "name": "--mdc-stepperconnector-incomplete-background"
-            }
-          ],
-          "cssParts": [
-            {
-              "description": "The main connector line between steps",
-              "name": "connector"
-            }
-          ],
-          "members": [
-            {
-              "kind": "field",
-              "name": "status",
-              "type": {
-                "text": "StatusType"
-              },
-              "description": "The status of the connector (complete or incomplete)",
-              "default": "\"incomplete\"",
-              "attribute": "status",
-              "reflects": true
-            },
-            {
-              "kind": "field",
-              "name": "orientation",
-              "type": {
-                "text": "OrientationType"
-              },
-              "description": "The orientation of the connector (vertical or horizontal)",
-              "default": "\"horizontal\"",
-              "attribute": "orientation",
-              "reflects": true
-            }
-          ],
-          "attributes": [
-            {
-              "name": "status",
-              "type": {
-                "text": "StatusType"
-              },
-              "description": "The status of the connector (complete or incomplete)",
-              "default": "\"incomplete\"",
-              "fieldName": "status"
-            },
-            {
-              "name": "orientation",
-              "type": {
-                "text": "OrientationType"
-              },
-              "description": "The orientation of the connector (vertical or horizontal)",
-              "default": "\"horizontal\"",
-              "fieldName": "orientation"
-            }
-          ],
-          "superclass": {
-            "name": "Component",
-            "module": "/src/models"
-          },
-          "tagName": "mdc-stepperconnector",
-          "jsDoc": "/**\n * StepperConnector component visually represents the connection between two stepper items.\n * Indicates whether the connection is complete or incomplete, and supports vertical or horizontal orientation.\n * They are used between 2 `mdc-stepperitem` components to visually connect them and wrapped in a `mdc-stepper` component.\n *\n * @tagname mdc-stepperconnector\n *\n * @csspart connector - The main connector line between steps\n *\n * @cssproperty --mdc-stepperconnector-complete-background - Background color for the complete connector\n * @cssproperty --mdc-stepperconnector-incomplete-background - Background color for the incomplete connector\n */",
-          "customElement": true
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "default",
-          "declaration": {
-            "name": "StepperConnector",
-            "module": "components/stepperconnector/stepperconnector.component.js"
-          }
-        }
-      ]
-    },
     {
       "kind": "javascript-module",
       "path": "components/stepperitem/stepperitem.component.js",

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

@@ -35,11 +35,6 @@ import Component from '../../components/badge';
  *
  * @csspart badge-dot - The dot notification badge.
  * @csspart badge-icon - The icon badge.
- * @csspart badge-icon__error - The error icon badge.
- * @csspart badge-icon__primary - The primary icon badge.
- * @csspart badge-icon__secondary - The secondary icon badge.
- * @csspart badge-icon__success - The success icon badge.
- * @csspart badge-icon__warning - The warning icon badge.
  * @csspart badge-overlay - The overlay badge.
  * @csspart badge-text - The text badge.
  */

package/dist/react/badge/index.js

@@ -38,11 +38,6 @@ import { TAG_NAME } from '../../components/badge/badge.constants';
  *
  * @csspart badge-dot - The dot notification badge.
  * @csspart badge-icon - The icon badge.
- * @csspart badge-icon__error - The error icon badge.
- * @csspart badge-icon__primary - The primary icon badge.
- * @csspart badge-icon__secondary - The secondary icon badge.
- * @csspart badge-icon__success - The success icon badge.
- * @csspart badge-icon__warning - The warning icon badge.
  * @csspart badge-overlay - The overlay badge.
  * @csspart badge-text - The text badge.
  */

package/dist/react/index.d.ts

@@ -70,8 +70,8 @@ export { default as StaticCheckbox } from './staticcheckbox';
 export { default as StaticChip } from './staticchip';
 export { default as StaticRadio } from './staticradio';
 export { default as StaticToggle } from './statictoggle';
-export { default as Stepper } from './stepper';
 export { default as StepperConnector } from './stepperconnector';
+export { default as Stepper } from './stepper';
 export { default as StepperItem } from './stepperitem';
 export { default as Tab } from './tab';
 export { default as TabList } from './tablist';

package/dist/react/index.js

@@ -70,8 +70,8 @@ export { default as StaticCheckbox } from './staticcheckbox';
 export { default as StaticChip } from './staticchip';
 export { default as StaticRadio } from './staticradio';
 export { default as StaticToggle } from './statictoggle';
-export { default as Stepper } from './stepper';
 export { default as StepperConnector } from './stepperconnector';
+export { default as Stepper } from './stepper';
 export { default as StepperItem } from './stepperitem';
 export { default as Tab } from './tab';
 export { default as TabList } from './tablist';

package/package.json

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