@momentum-design/components 0.53.6 → 0.53.8

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

@@ -69,21 +69,21 @@ const styles = css `
     font-weight: var(--mds-font-apps-body-large-bold-font-weight);
   }
 
-  :host([active]:not([variant='primary'])) {
+  :host([active][color='default']:not([variant='primary'])) {
     font-weight: var(--mds-font-apps-body-large-bold-font-weight);
     background: var(--mdc-button-active-background-color);
   }
-  :host([active]:not([variant='primary']):hover) {
+  :host([active][color='default']:not([variant='primary']):hover) {
     font-weight: var(--mds-font-apps-body-large-bold-font-weight);
     background: var(--mdc-button-active-hover-background-color);
   }
-  :host([active]:not([variant='primary']):active),
-  :host([active]:not([variant='primary']).pressed) {
+  :host([active][color='default']:not([variant='primary']):active),
+  :host([active][color='default']:not([variant='primary']).pressed) {
     font-weight: var(--mds-font-apps-body-large-bold-font-weight);
     background: var(--mdc-button-active-pressed-background-color);
   }
-  :host([active]:not([variant='primary'])[disabled]),
-  :host([active]:not([variant='primary'])[soft-disabled]) {
+  :host([active][color='default']:not([variant='primary'])[disabled]),
+  :host([active][color='default']:not([variant='primary'])[soft-disabled]) {
     font-weight: var(--mds-font-apps-body-large-bold-font-weight);
     background: var(--mdc-button-active-disabled-background-color);
   }

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

@@ -59,9 +59,9 @@ declare class Buttonsimple extends Buttonsimple_base {
      * a comma separated string.
      * For example: `aria-pressed,aria-expanded`
      *
-     * @default 'aria-pressed'
+     * @default 'aria-pressed' (when)
      */
-    ariaStateKey: string;
+    ariaStateKey?: string;
     /**
      * This property defines the type attribute for the button element.
      * The type attribute specifies the behavior of the button when it is clicked.

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

@@ -46,19 +46,6 @@ class Buttonsimple extends TabIndexMixin(DisabledMixin(Component)) {
          * @default button
          */
         this.role = DEFAULTS.ROLE;
-        /**
-         * This property defines the ARIA state key, which will be toggled when the
-         * Button is set to `active`.
-         * The default value is 'aria-pressed', which is commonly used for toggle buttons.
-         *
-         * Consumers can override this property to use a different ARIA state key if needed.
-         * In case multiple aria attributes should be toggled, they can be passed in as
-         * a comma separated string.
-         * For example: `aria-pressed,aria-expanded`
-         *
-         * @default 'aria-pressed'
-         */
-        this.ariaStateKey = DEFAULTS.ARIA_STATE_KEY;
         /**
          * This property defines the type attribute for the button element.
          * The type attribute specifies the behavior of the button when it is clicked.
@@ -88,6 +75,10 @@ class Buttonsimple extends TabIndexMixin(DisabledMixin(Component)) {
             this.setSoftDisabled(this, this.softDisabled);
         }
         if (changedProperties.has('active')) {
+            if (this.active) {
+                // if active is true and no ariaStateKey is provided, set it to the default (= aria-pressed)
+                this.ariaStateKey = this.ariaStateKey || DEFAULTS.ARIA_STATE_KEY;
+            }
             this.setActive(this, this.active);
         }
     }
@@ -237,7 +228,7 @@ __decorate([
 ], Buttonsimple.prototype, "role", void 0);
 __decorate([
     property({ type: String, reflect: true }),
-    __metadata("design:type", Object)
+    __metadata("design:type", String)
 ], Buttonsimple.prototype, "ariaStateKey", void 0);
 __decorate([
     property({ reflect: true }),