@momentum-design/components 0.53.4 → 0.53.5

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.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;