@momentum-design/components 0.129.15 → 0.129.17

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

@@ -109,14 +109,6 @@ declare class Badge extends Badge_base {
      * Otherwise, the role will be null.
      */
     private setRoleByAriaLabel;
-    /**
-     * Generates the badge content based on the badge type.
-     * Utilizes various helper methods to create the appropriate badge template based on the
-     * current badge type. Supports 'dot', 'icon', 'counter', 'success', 'warning', and 'error'
-     * types, returning the corresponding template result for each type.
-     * @returns the TemplateResult for the current badge type.
-     */
-    private getBadgeContentBasedOnType;
     update(changedProperties: PropertyValues): void;
     render(): TemplateResult;
     static styles: Array<CSSResult>;

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

@@ -78,7 +78,7 @@ class Badge extends IconNameMixin(Component) {
          * where the badge will be layered on top of a button.
          * @default false
          */
-        this.overlay = false;
+        this.overlay = DEFAULTS.OVERLAY;
         /**
          * Aria-label attribute to be set for accessibility
          * @default null
@@ -156,14 +156,13 @@ class Badge extends IconNameMixin(Component) {
             this.role = null;
         }
     }
-    /**
-     * Generates the badge content based on the badge type.
-     * Utilizes various helper methods to create the appropriate badge template based on the
-     * current badge type. Supports 'dot', 'icon', 'counter', 'success', 'warning', and 'error'
-     * types, returning the corresponding template result for each type.
-     * @returns the TemplateResult for the current badge type.
-     */
-    getBadgeContentBasedOnType() {
+    update(changedProperties) {
+        super.update(changedProperties);
+        if (changedProperties.has('ariaLabel')) {
+            this.setRoleByAriaLabel();
+        }
+    }
+    render() {
         if (this.variant && !Object.values(ICON_VARIANT).includes(this.variant)) {
             this.variant = DEFAULTS.VARIANT;
         }
@@ -185,15 +184,6 @@ class Badge extends IconNameMixin(Component) {
                 return this.getBadgeDot();
         }
     }
-    update(changedProperties) {
-        super.update(changedProperties);
-        if (changedProperties.has('ariaLabel')) {
-            this.setRoleByAriaLabel();
-        }
-    }
-    render() {
-        return this.getBadgeContentBasedOnType();
-    }
 }
 Badge.styles = [...Component.styles, ...styles];
 __decorate([
@@ -214,7 +204,7 @@ __decorate([
 ], Badge.prototype, "maxCounter", void 0);
 __decorate([
     property({ type: Boolean }),
-    __metadata("design:type", Object)
+    __metadata("design:type", Boolean)
 ], Badge.prototype, "overlay", void 0);
 __decorate([
     property({ type: String, attribute: 'aria-label' }),

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

@@ -23,5 +23,6 @@ declare const DEFAULTS: {
     readonly MAX_COUNTER_LIMIT: 999;
     readonly VARIANT: "primary";
     readonly ICON_SIZE: 1;
+    readonly OVERLAY: false;
 };
-export { TAG_NAME, DEFAULTS, TYPE, ICON_VARIANT, ICON_NAMES_LIST };
+export { DEFAULTS, ICON_NAMES_LIST, ICON_VARIANT, TAG_NAME, TYPE };

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

@@ -23,5 +23,6 @@ const DEFAULTS = {
     MAX_COUNTER_LIMIT: 999,
     VARIANT: ICON_VARIANT.PRIMARY,
     ICON_SIZE: 1,
+    OVERLAY: false,
 };
-export { TAG_NAME, DEFAULTS, TYPE, ICON_VARIANT, ICON_NAMES_LIST };
+export { DEFAULTS, ICON_NAMES_LIST, ICON_VARIANT, TAG_NAME, TYPE };

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/custom-elements.json

@@ -4496,17 +4496,6 @@
               "description": "Counter is the number which can be provided in the badge.",
               "attribute": "counter"
             },
-            {
-              "kind": "method",
-              "name": "getBadgeContentBasedOnType",
-              "privacy": "private",
-              "return": {
-                "type": {
-                  "text": ""
-                }
-              },
-              "description": "Generates the badge content based on the badge type.\nUtilizes various helper methods to create the appropriate badge template based on the\ncurrent badge type. Supports 'dot', 'icon', 'counter', 'success', 'warning', and 'error'\ntypes, returning the corresponding template result for each type."
-            },
             {
               "kind": "method",
               "name": "getBadgeCounterText",
@@ -4607,8 +4596,8 @@
               "type": {
                 "text": "boolean"
               },
-              "default": "false",
               "description": "Overlay is to add a thin outline to the badge.\nThis will help distinguish between the badge and the button,\nwhere the badge will be layered on top of a button.",
+              "default": "false",
               "attribute": "overlay"
             },
             {
@@ -4684,8 +4673,8 @@
               "type": {
                 "text": "boolean"
               },
-              "default": "false",
               "description": "Overlay is to add a thin outline to the badge.\nThis will help distinguish between the badge and the button,\nwhere the badge will be layered on top of a button.",
+              "default": "false",
               "fieldName": "overlay"
             },
             {
@@ -4906,6 +4895,16 @@
           "kind": "class",
           "description": "The `mdc-brandvisual` component is responsible for rendering logos dynamically & ensures they are\ndisplayed correctly within applications.\n\nFeatures:\n- Dynamically loads brandvisuals based on the `name` attribute.\n- Emits a `load` event when the brandvisual is successfully fetched.\n- Emits an `error` event when the brandvisual import fails.\n- Supports accessibility best practices.\n- Used for brand representation within the design system.",
           "name": "Brandvisual",
+          "cssParts": [
+            {
+              "description": "Set styles for the brandvisual svg container",
+              "name": "brandvisual"
+            },
+            {
+              "description": "Set styles for the brandvisual image container",
+              "name": "brandvisualImage"
+            }
+          ],
           "members": [
             {
               "kind": "field",
@@ -4914,7 +4913,7 @@
                 "text": "string | undefined"
               },
               "description": "Alt text for the brandvisual image for accessibility.\nThis will only be set if the brandvisual is an image (png).",
-              "attribute": "altText",
+              "attribute": "alt-text",
               "reflects": true
             },
             {
@@ -5046,7 +5045,7 @@
               "fieldName": "name"
             },
             {
-              "name": "altText",
+              "name": "alt-text",
               "type": {
                 "text": "string | undefined"
               },
@@ -5059,7 +5058,7 @@
             "module": "/src/models"
           },
           "tagName": "mdc-brandvisual",
-          "jsDoc": "/**\n * The `mdc-brandvisual` component is responsible for rendering logos dynamically & ensures they are\n * displayed correctly within applications.\n *\n * Features:\n * - Dynamically loads brandvisuals based on the `name` attribute.\n * - Emits a `load` event when the brandvisual is successfully fetched.\n * - Emits an `error` event when the brandvisual import fails.\n * - Supports accessibility best practices.\n * - Used for brand representation within the design system.\n *\n * @tagname mdc-brandvisual\n *\n * @event load - (React: onLoad) This event is dispatched when the brandvisual has been successfully loaded.\n * @event error - (React: onError) This event is dispatched when the brandvisual fetching has failed.\n *\n */",
+          "jsDoc": "/**\n * The `mdc-brandvisual` component is responsible for rendering logos dynamically & ensures they are\n * displayed correctly within applications.\n *\n * Features:\n * - Dynamically loads brandvisuals based on the `name` attribute.\n * - Emits a `load` event when the brandvisual is successfully fetched.\n * - Emits an `error` event when the brandvisual import fails.\n * - Supports accessibility best practices.\n * - Used for brand representation within the design system.\n *\n * @tagname mdc-brandvisual\n *\n * @event load - (React: onLoad) This event is dispatched when the brandvisual has been successfully loaded.\n * @event error - (React: onError) This event is dispatched when the brandvisual fetching has failed.\n *\n * @csspart brandvisual - Set styles for the brandvisual svg container\n * @csspart brandvisualImage - Set styles for the brandvisual image container\n */",
           "customElement": true
         }
       ],

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

@@ -17,6 +17,8 @@ import type { Events } from '../../components/brandvisual/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 const reactWrapper: import("@lit/react").ReactWebComponent<Component, {
     onLoad: EventName<Events["onLoadEvent"]>;

package/dist/react/brandvisual/index.js

@@ -18,6 +18,8 @@ import { TAG_NAME } from '../../components/brandvisual/brandvisual.constants';
  * @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
  */
 const reactWrapper = createComponent({
     tagName: TAG_NAME,

package/dist/utils/roles.d.ts

@@ -11,6 +11,7 @@ declare const ROLE: {
     readonly LIST: "list";
     readonly LISTBOX: "listbox";
     readonly LISTITEM: "listitem";
+    readonly MAIN: "main";
     readonly MENU: "menu";
     readonly MENUBAR: "menubar";
     readonly MENUITEM: "menuitem";

package/dist/utils/roles.js

@@ -11,6 +11,7 @@ const ROLE = {
     LIST: 'list',
     LISTBOX: 'listbox',
     LISTITEM: 'listitem',
+    MAIN: 'main',
     MENU: 'menu',
     MENUBAR: 'menubar',
     MENUITEM: 'menuitem',

package/package.json

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