@momentum-design/components 0.61.0 → 0.61.2

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([

package/dist/components/tablist/index.d.ts

@@ -1,6 +1,5 @@
 import Tablist from './tablist.component';
 import '../button';
-import '../tab';
 declare global {
     interface HTMLElementTagNameMap {
         ['mdc-tablist']: Tablist;

package/dist/components/tablist/index.js

@@ -1,6 +1,5 @@
 import Tablist from './tablist.component';
 import { TAG_NAME } from './tablist.constants';
 import '../button';
-import '../tab';
 Tablist.register(TAG_NAME);
 export default Tablist;

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

@@ -20,9 +20,7 @@ import { Component } from '../../models';
  * **Accessibility notes for consuming (have to be explicitly set when you consume the component)**
  *
  * - Each element that contains the `content panel` for a `tab` has role `tabpanel`.
- * - If the tab list has a visible label,
- *   the element with role `tablist` has `aria-labelledby` needs to be a value that refers to the labelling element.
- *   Otherwise, the `tablist` element needs to have a label provided by `aria-label`.
+ * - The `tablist` element needs to have a label provided by `data-aria-label`.
  * - Each element with role `tab` has the property `aria-controls`
  *  that should refer to its associated `tabpanel` element.
  * - Each element with role `tabpanel` has the property `aria-labelledby` referring to its associated `tab` element.
@@ -52,16 +50,8 @@ declare class TabList extends Component {
      */
     activeTabId?: string;
     /**
-     * Selector for the element that provides a label for the tablist.
-     */
-    dataAriaLabelledby?: string;
-    /**
-     * Label for the tablist in case aria-labelledby is not provided.
+     * Label for the tablist.
      * This is used when the tablist does not have a visible label.
-     * Defaults to 'Tab List'.
-     * <br/>
-     * Note: If both `data-aria-labelledby` and `data-aria-label` are provided,
-     * the `data-aria-labelledby` will be used.
      */
     dataAriaLabel?: string;
     /**
@@ -120,14 +110,6 @@ declare class TabList extends Component {
      * @param changedProperties - Map of changed properties with old values.
      */
     update(changedProperties: PropertyValues<this>): Promise<void>;
-    /**
-     * Set aria-labelledby attribute on the tablist element.
-     * If it does not exist, set aria-label attribute.
-     * As fallback, set aria-label to 'Tab List'.
-     *
-     * @internal
-     */
-    private setAriaLabelledByOrAriaLabel;
     /**
      * Dispatch the change event.
      *

package/dist/components/tablist/tablist.component.js

@@ -9,6 +9,7 @@ var __metadata = (this && this.__metadata) || function (k, v) {
 };
 import { html, nothing } from 'lit';
 import { property, query, queryAssignedElements, state } from 'lit/decorators.js';
+import { ifDefined } from 'lit/directives/if-defined.js';
 import styles from './tablist.styles';
 import { Component } from '../../models';
 import { ARROW_BUTTON_DIRECTION, KEYCODES } from './tablist.constants';
@@ -34,9 +35,7 @@ import { getFirstTab, getLastTab, getNextTab, getPreviousTab, findTab, getActive
  * **Accessibility notes for consuming (have to be explicitly set when you consume the component)**
  *
  * - Each element that contains the `content panel` for a `tab` has role `tabpanel`.
- * - If the tab list has a visible label,
- *   the element with role `tablist` has `aria-labelledby` needs to be a value that refers to the labelling element.
- *   Otherwise, the `tablist` element needs to have a label provided by `aria-label`.
+ * - The `tablist` element needs to have a label provided by `data-aria-label`.
  * - Each element with role `tab` has the property `aria-controls`
  *  that should refer to its associated `tabpanel` element.
  * - Each element with role `tabpanel` has the property `aria-labelledby` referring to its associated `tab` element.
@@ -81,24 +80,6 @@ class TabList extends Component {
          * @internal
          */
         this.isRtl = () => { var _a; return ((_a = document.querySelector('html')) === null || _a === void 0 ? void 0 : _a.getAttribute('dir')) === 'rtl' || window.getComputedStyle(this).direction === 'rtl'; };
-        /**
-         * Set aria-labelledby attribute on the tablist element.
-         * If it does not exist, set aria-label attribute.
-         * As fallback, set aria-label to 'Tab List'.
-         *
-         * @internal
-         */
-        this.setAriaLabelledByOrAriaLabel = () => {
-            var _a, _b, _c, _d;
-            if (this.dataAriaLabelledby) {
-                (_a = this.tabsContainer) === null || _a === void 0 ? void 0 : _a.setAttribute('aria-labelledby', this.dataAriaLabelledby);
-                (_b = this.tabsContainer) === null || _b === void 0 ? void 0 : _b.removeAttribute('aria-label');
-            }
-            else {
-                (_c = this.tabsContainer) === null || _c === void 0 ? void 0 : _c.setAttribute('aria-label', this.dataAriaLabel || 'Tab List');
-                (_d = this.tabsContainer) === null || _d === void 0 ? void 0 : _d.removeAttribute('aria-labelledby');
-            }
-        };
         /**
          * Dispatch the change event.
          *
@@ -108,7 +89,7 @@ class TabList extends Component {
          */
         this.fireTabChangeEvent = (newTab) => {
             const event = new CustomEvent('change', {
-                detail: newTab.tabId,
+                detail: { tabId: newTab.tabId },
             });
             this.dispatchEvent(event);
         };
@@ -160,6 +141,7 @@ class TabList extends Component {
          * @param event - Custom Event fired from the nested tab.
          */
         this.handleNestedTabActiveChange = async (event) => {
+            event.stopPropagation();
             const tab = event.target;
             if (!(tab instanceof Tab)) {
                 return;
@@ -209,11 +191,10 @@ class TabList extends Component {
          * @param tab - Tab to set focus on.
          */
         this.focusTab = async (tab) => {
-            var _a;
             if (!(tab instanceof Tab)) {
                 return;
             }
-            if (tab !== ((_a = this.shadowRoot) === null || _a === void 0 ? void 0 : _a.activeElement)) {
+            if (tab !== (document === null || document === void 0 ? void 0 : document.activeElement)) {
                 this.resetTabIndexAndSetNewTabIndex(tab);
                 tab.focus();
             }
@@ -399,10 +380,8 @@ class TabList extends Component {
                 this.onerror('The tabs inside the tab list must have unique tab ids');
             }
         }
-        this.setAriaLabelledByOrAriaLabel();
         const resizeObserver = new ResizeObserver(async () => {
-            var _a, _b;
-            const activeElement = (_b = (_a = this.tabsContainer) === null || _a === void 0 ? void 0 : _a.shadowRoot) === null || _b === void 0 ? void 0 : _b.activeElement;
+            const { activeElement } = document;
             /**
              * Keep the focused element in view.
              */
@@ -433,9 +412,6 @@ class TabList extends Component {
      */
     async update(changedProperties) {
         super.update(changedProperties);
-        if (changedProperties.has('dataAriaLabelledby') || changedProperties.has('dataAriaLabel')) {
-            this.setAriaLabelledByOrAriaLabel();
-        }
         if (changedProperties.has('activeTabId')) {
             if (!this.tabs || !this.activeTabId) {
                 return;
@@ -446,7 +422,7 @@ class TabList extends Component {
             }
             this.setActiveTab(newTab);
             /**
-             * If the previous activeTabId was not undefined, fire the change event.
+             * If the previous activeTabId was not undefined, focus the new tab.
              *
              * Otherwise, reset the tabindex of all tabs and set the new tabindex.
              */
@@ -475,7 +451,11 @@ class TabList extends Component {
           ></mdc-button>`
             : nothing}`;
         return html ` ${arrowButton('backward')}
-      <div class="container" role="tablist" tabindex="-1">
+      <div 
+      class="container" 
+      role="tablist" 
+      tabindex="-1" 
+      aria-label="${ifDefined(this.dataAriaLabel)}">
         <slot></slot>
       </div>
       ${arrowButton(ARROW_BUTTON_DIRECTION.FORWARD)}`;
@@ -486,10 +466,6 @@ __decorate([
     property({ type: String, attribute: 'active-tab-id', reflect: true }),
     __metadata("design:type", String)
 ], TabList.prototype, "activeTabId", void 0);
-__decorate([
-    property({ type: String, attribute: 'data-aria-labelledby' }),
-    __metadata("design:type", String)
-], TabList.prototype, "dataAriaLabelledby", void 0);
 __decorate([
     property({ type: String, attribute: 'data-aria-label' }),
     __metadata("design:type", String)