@momentum-design/components 0.133.7 → 0.133.9

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

@@ -140,11 +140,11 @@ const styles = css `
     --mdc-button-text-color: var(--mds-color-theme-common-text-primary-normal);
     --mdc-button-background: var(--mds-color-theme-button-accent-normal);
   }
-  :host([color='accent'][variant='primary']:hover) {
+  :host([color='accent'][variant='primary']:hover:not([disabled]):not([soft-disabled])) {
     --mdc-button-background: var(--mds-color-theme-button-accent-hover);
   }
-  :host([color='accent'][variant='primary']:active),
-  :host([color='accent'][variant='primary'].pressed) {
+  :host([color='accent'][variant='primary']:active:not([disabled]):not([soft-disabled])),
+  :host([color='accent'][variant='primary'].pressed:not([disabled]):not([soft-disabled])) {
     --mdc-button-background: var(--mds-color-theme-button-accent-pressed);
   }
 
@@ -152,11 +152,11 @@ const styles = css `
     --mdc-button-text-color: var(--mds-color-theme-text-accent-normal);
     --mdc-button-border-color: var(--mds-color-theme-outline-theme-normal);
   }
-  :host([color='accent'][variant='secondary']:hover) {
+  :host([color='accent'][variant='secondary']:hover:not([disabled]):not([soft-disabled])) {
     --mdc-button-background: var(--mds-color-theme-button-secondary-hover);
   }
-  :host([color='accent'][variant='secondary']:active),
-  :host([color='accent'][variant='secondary'].pressed) {
+  :host([color='accent'][variant='secondary']:active:not([disabled]):not([soft-disabled])),
+  :host([color='accent'][variant='secondary'].pressed:not([disabled]):not([soft-disabled])) {
     --mdc-button-background: var(--mds-color-theme-button-secondary-pressed);
   }
 
@@ -164,11 +164,11 @@ const styles = css `
     --mdc-button-text-color: var(--mds-color-theme-common-text-primary-normal);
     --mdc-button-background: var(--mds-color-theme-button-join-normal);
   }
-  :host([color='positive'][variant='primary']:hover) {
+  :host([color='positive'][variant='primary']:hover:not([disabled]):not([soft-disabled])) {
     --mdc-button-background: var(--mds-color-theme-button-join-hover);
   }
-  :host([color='positive'][variant='primary']:active),
-  :host([color='positive'][variant='primary'].pressed) {
+  :host([color='positive'][variant='primary']:active:not([disabled]):not([soft-disabled])),
+  :host([color='positive'][variant='primary'].pressed:not([disabled]):not([soft-disabled])) {
     --mdc-button-background: var(--mds-color-theme-button-join-pressed);
   }
 
@@ -176,11 +176,11 @@ const styles = css `
     --mdc-button-text-color: var(--mds-color-theme-text-success-normal);
     --mdc-button-border-color: var(--mds-color-theme-outline-join-normal);
   }
-  :host([color='positive'][variant='secondary']:hover) {
+  :host([color='positive'][variant='secondary']:hover:not([disabled]):not([soft-disabled])) {
     --mdc-button-background: var(--mds-color-theme-button-secondary-hover);
   }
-  :host([color='positive'][variant='secondary']:active),
-  :host([color='positive'][variant='secondary'].pressed) {
+  :host([color='positive'][variant='secondary']:active:not([disabled]):not([soft-disabled])),
+  :host([color='positive'][variant='secondary'].pressed:not([disabled]):not([soft-disabled])) {
     --mdc-button-background: var(--mds-color-theme-button-secondary-pressed);
   }
 
@@ -188,11 +188,11 @@ const styles = css `
     --mdc-button-text-color: var(--mds-color-theme-common-text-primary-normal);
     --mdc-button-background: var(--mds-color-theme-button-cancel-normal);
   }
-  :host([color='negative'][variant='primary']:hover) {
+  :host([color='negative'][variant='primary']:hover:not([disabled]):not([soft-disabled])) {
     --mdc-button-background: var(--mds-color-theme-button-cancel-hover);
   }
-  :host([color='negative'][variant='primary']:active),
-  :host([color='negative'][variant='primary'].pressed) {
+  :host([color='negative'][variant='primary']:active:not([disabled]):not([soft-disabled])),
+  :host([color='negative'][variant='primary'].pressed:not([disabled]):not([soft-disabled])) {
     --mdc-button-background: var(--mds-color-theme-button-cancel-pressed);
   }
 
@@ -200,11 +200,11 @@ const styles = css `
     --mdc-button-text-color: var(--mds-color-theme-text-error-normal);
     --mdc-button-border-color: var(--mds-color-theme-outline-cancel-normal);
   }
-  :host([color='negative'][variant='secondary']:hover) {
+  :host([color='negative'][variant='secondary']:hover:not([disabled]):not([soft-disabled])) {
     --mdc-button-background: var(--mds-color-theme-button-secondary-hover);
   }
-  :host([color='negative'][variant='secondary']:active),
-  :host([color='negative'][variant='secondary'].pressed) {
+  :host([color='negative'][variant='secondary']:active:not([disabled]):not([soft-disabled])),
+  :host([color='negative'][variant='secondary'].pressed:not([disabled]):not([soft-disabled])) {
     --mdc-button-background: var(--mds-color-theme-button-secondary-pressed);
   }
 
@@ -212,11 +212,11 @@ const styles = css `
     --mdc-button-text-color: var(--mds-color-theme-common-text-primary-normal);
     --mdc-button-background: var(--mds-color-theme-common-button-promotion-normal);
   }
-  :host([color='promotional'][variant='primary']:hover) {
+  :host([color='promotional'][variant='primary']:hover:not([disabled]):not([soft-disabled])) {
     --mdc-button-background: var(--mds-color-theme-common-button-promotion-hover);
   }
-  :host([color='promotional'][variant='primary']:active),
-  :host([color='promotional'][variant='primary'].pressed) {
+  :host([color='promotional'][variant='primary']:active:not([disabled]):not([soft-disabled])),
+  :host([color='promotional'][variant='primary'].pressed:not([disabled]):not([soft-disabled])) {
     --mdc-button-background: var(--mds-color-theme-common-button-promotion-active);
   }
 
@@ -224,11 +224,11 @@ const styles = css `
     --mdc-button-text-color: var(--mds-color-theme-text-primary-normal);
     --mdc-button-border-color: var(--mds-color-theme-outline-promotion-normal);
   }
-  :host([color='promotional'][variant='secondary']:hover) {
+  :host([color='promotional'][variant='secondary']:hover:not([disabled]):not([soft-disabled])) {
     --mdc-button-background: var(--mds-color-theme-button-secondary-hover);
   }
-  :host([color='promotional'][variant='secondary']:active),
-  :host([color='promotional'][variant='secondary'].pressed) {
+  :host([color='promotional'][variant='secondary']:active:not([disabled]):not([soft-disabled])),
+  :host([color='promotional'][variant='secondary'].pressed:not([disabled]):not([soft-disabled])) {
     --mdc-button-background: var(--mds-color-theme-button-secondary-pressed);
   }
 

package/dist/components/formfieldgroup/formfieldgroup.component.js

@@ -67,13 +67,20 @@ class FormfieldGroup extends FormfieldWrapper {
         this.disabled = undefined;
         this.role = this.isRadio ? ROLE.RADIOGROUP : ROLE.GROUP;
         this.ariaDescription = (_a = this.helpText) !== null && _a !== void 0 ? _a : '';
-        this.ariaLabel = this.label || '';
+        // Add aria-label if not provided by the consumer, to make it accessible.
+        // It will use the label property for the aria-label if aria-label is not provided.
+        if (!this.hasAttribute('aria-label')) {
+            this.setAttribute('aria-label', this.label || '');
+        }
     }
     update(changedProperties) {
         super.update(changedProperties);
         if (changedProperties.has('label') && !this.ariaLabel) {
             this.ariaLabel = this.label || '';
         }
+        if (changedProperties.has('helpText') && !this.ariaDescription) {
+            this.ariaDescription = this.helpText || '';
+        }
     }
     render() {
         return html `

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

@@ -16,6 +16,7 @@ declare class RadioGroup extends FormfieldGroup {
      */
     name: string;
     constructor();
+    connectedCallback(): void;
     /**
      * Using name property to group the radio buttons together.
      * If the name is not set, it will be set to the name of the radio group.

package/dist/components/radiogroup/radiogroup.component.js

@@ -32,6 +32,12 @@ class RadioGroup extends FormfieldGroup {
         // This is used to set the role of the component as `radiogroup`.
         this.isRadio = true;
     }
+    connectedCallback() {
+        super.connectedCallback();
+        // toggletipPlacement and toggletipStrategy are set to undefined as they are not used by radiogroup.
+        this.toggletipPlacement = undefined;
+        this.toggletipStrategy = undefined;
+    }
     /**
      * Using name property to group the radio buttons together.
      * If the name is not set, it will be set to the name of the radio group.
@@ -51,7 +57,7 @@ class RadioGroup extends FormfieldGroup {
 }
 RadioGroup.styles = [...FormfieldGroup.styles];
 __decorate([
-    property({ type: String }),
+    property({ type: String, reflect: true }),
     __metadata("design:type", Object)
 ], RadioGroup.prototype, "name", void 0);
 export default RadioGroup;

package/dist/custom-elements.json

@@ -37321,7 +37321,8 @@
               },
               "default": "''",
               "description": "Name of the radio group.\nThey are used to group elements in a form together.",
-              "attribute": "name"
+              "attribute": "name",
+              "reflects": true
             },
             {
               "kind": "field",

package/package.json

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