@momentum-design/components 0.60.0 → 0.61.1

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

@@ -44,6 +44,14 @@ declare class Button extends Button_base {
      * @default 32
      */
     size: PillButtonSize | IconButtonSize;
+    /**
+     * The button color can be inverted by setting the inverted attribute to true.
+     *
+     * Only applies when variant is set to `primary`, color is set to `default`
+     * and button is not `active`.
+     * @default false
+     */
+    inverted: boolean;
     /**
      * This property defines the ARIA role for the element. By default, it is set to 'button'.
      * Consumers should override this role when:

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

@@ -57,6 +57,14 @@ class Button extends ButtonComponentMixin(Buttonsimple) {
          * @default 32
          */
         this.size = DEFAULTS.SIZE;
+        /**
+         * The button color can be inverted by setting the inverted attribute to true.
+         *
+         * Only applies when variant is set to `primary`, color is set to `default`
+         * and button is not `active`.
+         * @default false
+         */
+        this.inverted = DEFAULTS.INVERTED;
         /**
          * This property defines the ARIA role for the element. By default, it is set to 'button'.
          * Consumers should override this role when:
@@ -128,6 +136,10 @@ __decorate([
     property({ type: Number }),
     __metadata("design:type", Number)
 ], Button.prototype, "size", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true }),
+    __metadata("design:type", Boolean)
+], Button.prototype, "inverted", void 0);
 __decorate([
     property({ type: String, reflect: true }),
     __metadata("design:type", Object)

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

@@ -38,5 +38,6 @@ declare const DEFAULTS: {
     COLOR: "default";
     TYPE_INTERNAL: "icon";
     TYPE: "button";
+    INVERTED: boolean;
 };
 export { TAG_NAME, DEFAULTS, BUTTON_VARIANTS, PILL_BUTTON_SIZES, ICON_BUTTON_SIZES, BUTTON_COLORS, BUTTON_TYPE_INTERNAL, BUTTON_TYPE, };

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

@@ -36,5 +36,6 @@ const DEFAULTS = {
     COLOR: BUTTON_COLORS.DEFAULT,
     TYPE_INTERNAL: BUTTON_TYPE_INTERNAL.ICON,
     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, };

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

@@ -226,5 +226,14 @@ const styles = css `
     --mdc-button-secondary-hover-background-color: var(--mds-color-theme-button-secondary-hover);
     --mdc-button-secondary-pressed-background-color: var(--mds-color-theme-button-secondary-pressed);
   }
+
+  :host([inverted][variant='primary'][color='default']) {
+    --mdc-button-primary-color: var(--mds-color-theme-text-primary-normal);
+    --mdc-button-primary-background-color: var(--mds-color-theme-inverted-button-primary-normal);
+    --mdc-button-primary-hover-background-color: var(--mds-color-theme-inverted-button-primary-hover);
+    --mdc-button-primary-pressed-background-color: var(--mds-color-theme-inverted-button-primary-pressed);
+    --mdc-button-primary-disabled-background-color: var(--mds-color-theme-inverted-button-primary-disabled);
+    --mdc-button-primary-disabled-color: var(--mds-color-theme-inverted-text-primary-disabled);
+  }
 `;
 export default [styles];

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

@@ -185,9 +185,11 @@ class Buttonsimple extends TabIndexMixin(DisabledMixin(Component)) {
             if (event.key === 'Enter') {
                 this.triggerClickEvent();
             }
-            if (event.key === ' ') {
-                event.preventDefault();
-            }
+            // preventing the default event behavior for space key
+            // to avoid scrolling etc in the host application
+            // preventing the default event behavior for enter key
+            // to avoid the keyup event to be triggered
+            event.preventDefault();
         }
     }
     /**
@@ -217,7 +219,7 @@ __decorate([
     __metadata("design:type", Boolean)
 ], Buttonsimple.prototype, "active", void 0);
 __decorate([
-    property({ type: Boolean, attribute: 'soft-disabled' }),
+    property({ type: Boolean, attribute: 'soft-disabled', reflect: true }),
     __metadata("design:type", Boolean)
 ], Buttonsimple.prototype, "softDisabled", void 0);
 __decorate([