@momentum-design/components 0.53.4 → 0.53.6

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

@@ -1,6 +1,7 @@
 import type { PropertyValues } from 'lit';
 import { CSSResult } from 'lit';
 import Buttonsimple from '../buttonsimple/buttonsimple.component';
+import type { IconNames } from '../icon/icon.types';
 import type { ButtonColor, ButtonVariant, IconButtonSize, PillButtonSize } from './button.types';
 /**
  * `mdc-button` is a component that can be configured in various ways to suit different use cases.
@@ -39,12 +40,12 @@ declare class Button extends Buttonsimple {
      * The name of the icon to display as a prefix.
      * The icon is displayed on the left side of the button.
      */
-    prefixIcon?: string;
+    prefixIcon?: IconNames;
     /**
      * The name of the icon to display as a postfix.
      * The icon is displayed on the right side of the button.
      */
-    postfixIcon?: string;
+    postfixIcon?: IconNames;
     /**
      * There are 3 variants of button: primary, secondary, tertiary. They are styled differently.
      * - **Primary**: Solid background color.

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

@@ -191,22 +191,10 @@ class Button extends Buttonsimple {
     }
     render() {
         return html `
-      ${this.prefixIcon
-            ? html ` <mdc-icon
-            name="${this.prefixIcon}"
-            part="prefix-icon"
-            length-unit="rem"
-          >
-          </mdc-icon>`
-            : ''}
+      ${this.prefixIcon ? html ` <mdc-icon name="${this.prefixIcon}" part="prefix-icon"></mdc-icon>` : ''}
       <slot @slotchange=${this.inferButtonType}></slot>
       ${this.postfixIcon
-            ? html ` <mdc-icon
-            name="${this.postfixIcon}"
-            part="postfix-icon"
-            length-unit="rem"
-          >
-          </mdc-icon>`
+            ? html ` <mdc-icon name="${this.postfixIcon}" part="postfix-icon"></mdc-icon>`
             : ''}
     `;
     }

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

@@ -12,7 +12,7 @@ const styles = css `
     --mdc-button-primary-pressed-background-color: var(--mds-color-theme-button-primary-pressed);
     --mdc-button-primary-disabled-background-color: var(--mds-color-theme-button-primary-disabled);
     --mdc-button-primary-disabled-color: var(--mds-color-theme-text-primary-disabled);
-    
+
     --mdc-button-secondary-color: var(--mds-color-theme-text-primary-normal);
     --mdc-button-secondary-border-color: var(--mds-color-theme-outline-button-normal);
     --mdc-button-secondary-hover-background-color: var(--mds-color-theme-button-secondary-hover);
@@ -27,6 +27,11 @@ const styles = css `
     --mdc-button-tertiary-disabled-background-color: var(--mds-color-theme-button-secondary-disabled);
     --mdc-button-tertiary-disabled-color: var(--mds-color-theme-text-primary-disabled);
 
+    --mdc-button-active-background-color: var(--mds-color-theme-button-secondary-active-normal);
+    --mdc-button-active-hover-background-color: var(--mds-color-theme-button-secondary-active-hover);
+    --mdc-button-active-pressed-background-color: var(--mds-color-theme-button-secondary-active-pressed);
+    --mdc-button-active-disabled-background-color: var(--mds-color-theme-button-secondary-active-disabled);
+
     --mdc-button-line-height-size-40: var(--mds-font-lineheight-body-large);
     --mdc-button-line-height-size-32: var(--mds-font-lineheight-body-large);
     --mdc-button-line-height-size-28: var(--mds-font-lineheight-body-midsize);
@@ -36,17 +41,17 @@ const styles = css `
     --mdc-button-postfix-icon-size: 1rem;
   }
 
-  :host([size="64"]) {
+  :host([size='64']) {
     --mdc-button-prefix-icon-size: 2rem;
     --mdc-button-postfix-icon-size: 2rem;
   }
 
-  :host([size="52"]) {
+  :host([size='52']) {
     --mdc-button-prefix-icon-size: 1.75rem;
     --mdc-button-postfix-icon-size: 1.75rem;
   }
 
-  :host([size="40"]) {
+  :host([size='40']) {
     --mdc-button-prefix-icon-size: 1.25rem;
     --mdc-button-postfix-icon-size: 1.25rem;
   }
@@ -60,101 +65,124 @@ const styles = css `
     --mdc-icon-size: var(--mdc-button-postfix-icon-size);
   }
 
-  :host([active]){
+  :host([active]) {
+    font-weight: var(--mds-font-apps-body-large-bold-font-weight);
+  }
+
+  :host([active]: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) {
+    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) {
+    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]) {
     font-weight: var(--mds-font-apps-body-large-bold-font-weight);
+    background: var(--mdc-button-active-disabled-background-color);
   }
 
-  :host([variant="primary"]){
+  :host([variant='primary']) {
     background: var(--mdc-button-primary-background-color);
     color: var(--mdc-button-primary-color);
   }
-  :host([variant="primary"]:hover){
+  :host([variant='primary']:hover) {
     background: var(--mdc-button-primary-hover-background-color);
   }
-  :host([variant="primary"]:active), :host([variant="primary"].pressed){
+  :host([variant='primary']:active),
+  :host([variant='primary'].pressed) {
     background: var(--mdc-button-primary-pressed-background-color);
   }
-  :host([variant="primary"][disabled]), :host([variant="primary"][soft-disabled]){
+  :host([variant='primary'][disabled]),
+  :host([variant='primary'][soft-disabled]) {
     background: var(--mdc-button-primary-disabled-background-color);
     color: var(--mdc-button-primary-disabled-color);
     cursor: auto;
   }
 
-  :host([variant="secondary"]){
+  :host([variant='secondary']) {
     color: var(--mdc-button-secondary-color);
     border-color: var(--mdc-button-secondary-border-color);
   }
-  :host([variant="secondary"]:hover){
+  :host([variant='secondary']:hover) {
     background: var(--mdc-button-secondary-hover-background-color);
   }
-  :host([variant="secondary"]:active), :host([variant="secondary"].pressed){
+  :host([variant='secondary']:active),
+  :host([variant='secondary'].pressed) {
     background: var(--mdc-button-secondary-pressed-background-color);
   }
-  :host([variant="secondary"][disabled]),
-   :host([variant="secondary"][soft-disabled]){
+  :host([variant='secondary'][disabled]),
+  :host([variant='secondary'][soft-disabled]) {
     color: var(--mdc-button-primary-disabled-color);
     border-color: var(--mdc-button-secondary-disabled-border-color);
     background: var(--mdc-button-secondary-disabled-background-color);
     cursor: auto;
   }
 
-  :host([variant="tertiary"]){
+  :host([variant='tertiary']) {
     border-color: transparent;
     color: var(--mdc-button-tertiary-color);
   }
-  :host([variant="tertiary"]:hover){
+  :host([variant='tertiary']:hover) {
     background: var(--mdc-button-tertiary-hover-background-color);
   }
-  :host([variant="tertiary"]:active), :host([variant="tertiary"].pressed){
+  :host([variant='tertiary']:active),
+  :host([variant='tertiary'].pressed) {
     background: var(--mdc-button-tertiary-pressed-background-color);
   }
-  :host([variant="tertiary"][disabled]), 
-  :host([variant="tertiary"][soft-disabled]){
+  :host([variant='tertiary'][disabled]),
+  :host([variant='tertiary'][soft-disabled]) {
     color: var(--mdc-button-tertiary-disabled-color);
     background: var(--mdc-button-tertiary-disabled-background-color);
     cursor: auto;
   }
 
-  :host([size="64"][data-btn-type='icon']), 
-  :host([size="52"][data-btn-type='icon']), 
-  :host([size="40"][data-btn-type='icon']), 
-  :host([size="32"][data-btn-type='icon']),
-  :host([size="28"][data-btn-type='icon']),
-  :host([size="24"][data-btn-type='icon']){
+  :host([size='64'][data-btn-type='icon']),
+  :host([size='52'][data-btn-type='icon']),
+  :host([size='40'][data-btn-type='icon']),
+  :host([size='32'][data-btn-type='icon']),
+  :host([size='28'][data-btn-type='icon']),
+  :host([size='24'][data-btn-type='icon']) {
     border-radius: 6.25rem;
     aspect-ratio: 1;
     padding: unset;
   }
-  :host([size="40"]){
+  :host([size='40']) {
     font-size: var(--mds-font-size-body-large);
     line-height: var(--mdc-button-line-height-size-40);
     padding: 0 1rem;
     gap: 0.5rem;
   }
-  :host([size="32"]){
+  :host([size='32']) {
     font-size: var(--mds-font-size-body-large);
     line-height: var(--mdc-button-line-height-size-32);
     padding: 0 0.75rem;
     gap: 0.375rem;
   }
-  :host([size="28"]){
+  :host([size='28']) {
     font-size: var(--mds-font-size-body-midsize);
     line-height: var(--mdc-button-line-height-size-28);
     padding: 0 0.75rem;
     gap: 0.375rem;
   }
-  :host([size="24"]){
+  :host([size='24']) {
     font-size: var(--mds-font-size-body-small);
     line-height: var(--mdc-button-line-height-size-24);
     padding: 0 0.625rem;
     gap: 0.25rem;
   }
-  :host([size="20"]){
+  :host([size='20']) {
     padding: 0.0625rem;
     aspect-ratio: 1;
   }
 
-  :host([color="accent"]){
+  :host([color='accent']) {
     --mdc-button-primary-color: var(--mds-color-theme-common-text-primary-normal);
     --mdc-button-primary-background-color: var(--mds-color-theme-button-accent-normal);
     --mdc-button-primary-hover-background-color: var(--mds-color-theme-button-accent-hover);
@@ -165,7 +193,7 @@ 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([color="positive"]){
+  :host([color='positive']) {
     --mdc-button-primary-color: var(--mds-color-theme-common-text-primary-normal);
     --mdc-button-primary-background-color: var(--mds-color-theme-button-join-normal);
     --mdc-button-primary-hover-background-color: var(--mds-color-theme-button-join-hover);
@@ -176,7 +204,7 @@ 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([color="negative"]){
+  :host([color='negative']) {
     --mdc-button-primary-color: var(--mds-color-theme-common-text-primary-normal);
     --mdc-button-primary-background-color: var(--mds-color-theme-button-cancel-normal);
     --mdc-button-primary-hover-background-color: var(--mds-color-theme-button-cancel-hover);
@@ -187,7 +215,7 @@ 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([color="promotional"]){
+  :host([color='promotional']) {
     --mdc-button-primary-color: var(--mds-color-theme-common-text-primary-normal);
     --mdc-button-primary-background-color: var(--mds-color-theme-common-button-promotion-normal);
     --mdc-button-primary-hover-background-color: var(--mds-color-theme-common-button-promotion-hover);

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

@@ -1,8 +1,9 @@
+import type { IconNames } from '../icon/icon.types';
 /**
  * Returns the name of the icon without the style suffix.
  *
  * @param iconName - The name of the icon.
  * @returns The name of the icon without the suffix.
  */
-declare const getIconNameWithoutStyle: (iconName: string) => string;
+declare const getIconNameWithoutStyle: (iconName: IconNames) => string;
 export { getIconNameWithoutStyle };

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

@@ -20,9 +20,11 @@ declare class Buttonsimple extends Buttonsimple_base {
      * The button's active state indicates whether it is currently toggled on (active) or off (inactive).
      * When the active state is true, the button is considered to be in an active state, meaning it is toggled on.
      * Conversely, when the active state is false, the button is in an inactive state, indicating it is toggled off.
-     * @default false
+     *
+     * This attribute is used to set the provided `ariaStateKey` to true or false.
+     * @default undefined
      */
-    active: boolean;
+    active?: boolean;
     /**
      * Indicates whether the button is soft disabled.
      * When set to `true`, the button appears visually disabled but still allows
@@ -31,9 +33,9 @@ declare class Buttonsimple extends Buttonsimple_base {
      * **Important:** When using soft disabled, consumers must ensure that
      * the button behaves like a disabled button, allowing only focus and
      * preventing any interactions (clicks or keyboard actions) from triggering unintended actions.
-     * @default false
+     * @default undefined
      */
-    softDisabled: boolean;
+    softDisabled?: boolean;
     /**
      * Simplebutton size is a super set of all the sizes supported by children components.
      * @default 32
@@ -47,6 +49,19 @@ declare class Buttonsimple extends Buttonsimple_base {
      * @default button
      */
     role: string;
+    /**
+     * 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'
+     */
+    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.
@@ -70,11 +85,11 @@ declare class Buttonsimple extends Buttonsimple_base {
     update(changedProperties: PropertyValues): void;
     protected executeAction(): void;
     /**
-     * Sets the aria-pressed attribute based on the active state of the button.
+     * Sets the ariaStateKey attributes based on the active state of the button.
      * @param element - The button element
      * @param active - The active state of the element
      */
-    protected setActive(element: HTMLElement, active: boolean): void;
+    protected setActive(element: HTMLElement, active?: boolean): void;
     /**
      * Sets the soft-disabled attribute for the button.
      * When soft-disabled, the button looks to be disabled but remains focusable and clickable.

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

@@ -33,24 +33,6 @@ class Buttonsimple extends TabIndexMixin(DisabledMixin(Component)) {
     }
     constructor() {
         super();
-        /**
-         * The button's active state indicates whether it is currently toggled on (active) or off (inactive).
-         * When the active state is true, the button is considered to be in an active state, meaning it is toggled on.
-         * Conversely, when the active state is false, the button is in an inactive state, indicating it is toggled off.
-         * @default false
-         */
-        this.active = false;
-        /**
-         * Indicates whether the button is soft disabled.
-         * When set to `true`, the button appears visually disabled but still allows
-         * focus, click, and keyboard actions to be passed through.
-         *
-         * **Important:** When using soft disabled, consumers must ensure that
-         * the button behaves like a disabled button, allowing only focus and
-         * preventing any interactions (clicks or keyboard actions) from triggering unintended actions.
-         * @default false
-         */
-        this.softDisabled = false;
         /**
          * Simplebutton size is a super set of all the sizes supported by children components.
          * @default 32
@@ -64,6 +46,19 @@ 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.
@@ -105,16 +100,27 @@ class Buttonsimple extends TabIndexMixin(DisabledMixin(Component)) {
         }
     }
     /**
-     * Sets the aria-pressed attribute based on the active state of the button.
+     * Sets the ariaStateKey attributes based on the active state of the button.
      * @param element - The button element
      * @param active - The active state of the element
      */
     setActive(element, active) {
-        if (active) {
-            element.setAttribute('aria-pressed', 'true');
-        }
-        else {
-            element.removeAttribute('aria-pressed');
+        if (this.ariaStateKey) {
+            const ariaStateKeys = this.ariaStateKey.split(',');
+            ariaStateKeys
+                .filter((key) => key.trim().startsWith('aria-'))
+                .forEach((key) => {
+                if (active === true) {
+                    element.setAttribute(key.trim(), 'true');
+                }
+                else if (active === false) {
+                    element.setAttribute(key.trim(), 'false');
+                }
+                else {
+                    // If the active state is not a boolean, remove the attribute
+                    element.removeAttribute(key.trim());
+                }
+            });
         }
     }
     /**
@@ -207,9 +213,7 @@ class Buttonsimple extends TabIndexMixin(DisabledMixin(Component)) {
         }
     }
     render() {
-        return html `
-      <slot></slot>
-    `;
+        return html ` <slot></slot> `;
     }
 }
 /** @internal */
@@ -217,11 +221,11 @@ Buttonsimple.formAssociated = true;
 Buttonsimple.styles = [...Component.styles, ...styles];
 __decorate([
     property({ type: Boolean, reflect: true }),
-    __metadata("design:type", Object)
+    __metadata("design:type", Boolean)
 ], Buttonsimple.prototype, "active", void 0);
 __decorate([
     property({ type: Boolean, attribute: 'soft-disabled' }),
-    __metadata("design:type", Object)
+    __metadata("design:type", Boolean)
 ], Buttonsimple.prototype, "softDisabled", void 0);
 __decorate([
     property({ type: Number, reflect: true }),
@@ -231,6 +235,10 @@ __decorate([
     property({ type: String, reflect: true }),
     __metadata("design:type", Object)
 ], Buttonsimple.prototype, "role", void 0);
+__decorate([
+    property({ type: String, reflect: true }),
+    __metadata("design:type", Object)
+], Buttonsimple.prototype, "ariaStateKey", void 0);
 __decorate([
     property({ reflect: true }),
     __metadata("design:type", String)

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

@@ -21,5 +21,6 @@ declare const DEFAULTS: {
     SIZE: 32;
     TYPE: "button";
     ROLE: string;
+    ARIA_STATE_KEY: string;
 };
 export { TAG_NAME, DEFAULTS, BUTTON_TYPE, BUTTON_SIZES, };

package/dist/components/buttonsimple/buttonsimple.constants.js

@@ -22,5 +22,6 @@ const DEFAULTS = {
     SIZE: BUTTON_SIZES[32],
     TYPE: BUTTON_TYPE.BUTTON,
     ROLE: 'button',
+    ARIA_STATE_KEY: 'aria-pressed',
 };
 export { TAG_NAME, DEFAULTS, BUTTON_TYPE, BUTTON_SIZES, };

package/dist/components/buttonsimple/buttonsimple.styles.js

@@ -4,6 +4,7 @@ const styles = [hostFitContentStyles, css `
   :host {
     border: 0.0625rem solid transparent;
     cursor: pointer;
+    user-select: none;
     
     background-color: var(--mds-color-theme-text-primary-normal); 
     color: var(--mds-color-theme-inverted-text-secondary-normal);

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

@@ -100,6 +100,18 @@ declare const Tab_base: import("../../utils/mixins/index.types").Constructor<imp
  * @cssproperty --mdc-tab-pill-inactive-color-disabled - Text and icon color for inactive pill tab in disabled state.
  */
 declare class Tab extends Tab_base {
+    /**
+     * The tab's active state indicates whether it is currently toggled on (active) or off (inactive).
+     * When the active state is true, the tab is considered to be in an active state, meaning it is toggled on.
+     * Conversely, when the active state is false, the tab is in an inactive state, indicating it is toggled off.
+     *
+     * This attribute also controls the "aria-selected" attribute of the tab.
+     * When the tab is active, "aria-selected" is set to true, indicating that the tab is selected.
+     * When the tab is inactive, "aria-selected" is set to false, indicating that the tab is not selected.
+     *
+     * @default false
+     */
+    active?: boolean;
     /**
      * Text to be displayed in the tab.
      * If no `text` is provided, no text will be rendered,

package/dist/components/tab/tab.component.js

@@ -115,6 +115,18 @@ import { IconNameMixin } from '../../utils/mixins/IconNameMixin';
 class Tab extends IconNameMixin(Buttonsimple) {
     constructor() {
         super(...arguments);
+        /**
+         * The tab's active state indicates whether it is currently toggled on (active) or off (inactive).
+         * When the active state is true, the tab is considered to be in an active state, meaning it is toggled on.
+         * Conversely, when the active state is false, the tab is in an inactive state, indicating it is toggled off.
+         *
+         * This attribute also controls the "aria-selected" attribute of the tab.
+         * When the tab is active, "aria-selected" is set to true, indicating that the tab is selected.
+         * When the tab is inactive, "aria-selected" is set to false, indicating that the tab is not selected.
+         *
+         * @default false
+         */
+        this.active = DEFAULTS.ACTIVE;
         /**
          * Tab can have three variants:
          * - `glass`
@@ -144,6 +156,7 @@ class Tab extends IconNameMixin(Buttonsimple) {
         this.softDisabled = undefined;
         this.size = undefined;
         this.type = undefined;
+        this.ariaStateKey = 'aria-selected';
         if (!this.tabId && this.onerror) {
             this.onerror('tab id is required');
         }
@@ -186,7 +199,7 @@ class Tab extends IconNameMixin(Buttonsimple) {
      * @param active - The active state of the tab.
      */
     setActive(element, active) {
-        element.setAttribute('aria-selected', active ? 'true' : 'false');
+        super.setActive(element, active);
         this.modifyIconName(active);
     }
     executeAction() {
@@ -222,6 +235,10 @@ class Tab extends IconNameMixin(Buttonsimple) {
     }
 }
 Tab.styles = [...Buttonsimple.styles, ...styles];
+__decorate([
+    property({ type: Boolean, reflect: true }),
+    __metadata("design:type", Boolean)
+], Tab.prototype, "active", void 0);
 __decorate([
     property({ type: String, reflect: true }),
     __metadata("design:type", String)

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

@@ -6,5 +6,6 @@ declare const TAB_VARIANTS: {
 };
 declare const DEFAULTS: {
     readonly VARIANT: "pill";
+    readonly ACTIVE: false;
 };
 export { DEFAULTS, TAG_NAME, TAB_VARIANTS };

package/dist/components/tab/tab.constants.js

@@ -7,5 +7,6 @@ const TAB_VARIANTS = {
 };
 const DEFAULTS = {
     VARIANT: TAB_VARIANTS.PILL,
+    ACTIVE: false,
 };
 export { DEFAULTS, TAG_NAME, TAB_VARIANTS };

package/dist/components/tab/tab.styles.js

@@ -94,7 +94,7 @@ const styles = [hostFitContentStyles, css `
     flex-direction: column;
   }
 
-  :host::part(text)::after{
+  :host mdc-text::after {
     content: attr(data-text);
     height: 0;
     visibility: hidden;