@momentum-design/components 0.53.3 → 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/option/option.component.js

@@ -98,6 +98,7 @@ class Option extends FormInternalsMixin(ListItem) {
         tooltip.textContent = (_b = this.label) !== null && _b !== void 0 ? _b : '';
         tooltip.setAttribute('triggerid', this.id);
         tooltip.setAttribute('visible', '');
+        tooltip.setAttribute('show-arrow', '');
         // Add tooltip programmatically after the nearest select component or the parent element.
         const parent = this.closest(SELECT_TAG_NAME) || this.parentElement;
         parent === null || parent === void 0 ? void 0 : parent.after(tooltip);

package/dist/components/popover/popover.component.js

@@ -493,7 +493,10 @@ class Popover extends FocusTrapMixin(Component) {
                 this.triggerElement.removeAttribute('aria-expanded');
             }
             if (this.interactive) {
-                this.triggerElement.removeAttribute('aria-haspopup');
+                const triggerElementRole = this.triggerElement.getAttribute('aria-haspopup');
+                if (triggerElementRole === 'dialog' || triggerElementRole === 'alertdialog') {
+                    this.triggerElement.removeAttribute('aria-haspopup');
+                }
             }
             if (this.focusBackToTrigger) {
                 (_c = this.triggerElement) === null || _c === void 0 ? void 0 : _c.focus();

package/dist/components/popover/popover.utils.js

@@ -89,7 +89,9 @@ export class PopoverUtils {
      */
     setupAccessibility() {
         var _a, _b, _c;
-        this.popover.toggleAttribute('aria-modal', this.popover.interactive);
+        if (this.popover.role === 'dialog' || this.popover.role === 'alertdialog') {
+            this.popover.toggleAttribute('aria-modal', this.popover.interactive);
+        }
         if (this.popover.interactive) {
             if (!this.popover.ariaLabel) {
                 this.popover.ariaLabel = ((_a = this.popover.triggerElement) === null || _a === void 0 ? void 0 : _a.ariaLabel)

package/dist/components/select/select.component.js

@@ -90,9 +90,11 @@ class Select extends FormInternalsMixin(DataAriaLabelMixin(FormfieldWrapper)) {
         }).flat()) || [];
     }
     handlePopoverOpen() {
+        this.displayPopover = true;
         this.baseIconName = ARROW_ICON.ARROW_UP;
     }
     handlePopoverClose() {
+        this.displayPopover = false;
         this.baseIconName = ARROW_ICON.ARROW_DOWN;
     }
     /**
@@ -220,10 +222,12 @@ class Select extends FormInternalsMixin(DataAriaLabelMixin(FormfieldWrapper)) {
             case KEYS.SPACE:
                 this.updateTabIndexForAllOptions(event.target);
                 this.closePopover();
+                event.preventDefault();
                 break;
             case KEYS.ENTER:
                 this.updateTabIndexForAllOptions(event.target);
                 this.closePopover();
+                event.preventDefault();
                 // if the popover is closed, then we submit the form.
                 (_a = this.form) === null || _a === void 0 ? void 0 : _a.requestSubmit();
                 break;
@@ -232,9 +236,11 @@ class Select extends FormInternalsMixin(DataAriaLabelMixin(FormfieldWrapper)) {
                 break;
             case KEYS.HOME:
                 this.setFocusAndTabIndex(0);
+                event.preventDefault();
                 break;
             case KEYS.END:
                 this.setFocusAndTabIndex(this.getAllValidOptions().length - 1);
+                event.preventDefault();
                 break;
             case KEYS.ARROW_DOWN:
             case KEYS.ARROW_UP:
@@ -269,10 +275,12 @@ class Select extends FormInternalsMixin(DataAriaLabelMixin(FormfieldWrapper)) {
             case KEYS.HOME:
                 this.openPopover();
                 this.setFocusAndTabIndex(0);
+                event.preventDefault();
                 break;
             case KEYS.END:
                 this.openPopover();
                 this.setFocusAndTabIndex(this.getAllValidOptions().length - 1);
+                event.preventDefault();
                 break;
             default:
                 break;
@@ -379,7 +387,6 @@ class Select extends FormInternalsMixin(DataAriaLabelMixin(FormfieldWrapper)) {
      * @returns A TemplateResult representing the native select element.
      */
     getNativeSelect() {
-        var _a;
         return html `
       <select
         part="native-select"
@@ -391,11 +398,6 @@ class Select extends FormInternalsMixin(DataAriaLabelMixin(FormfieldWrapper)) {
         ?autofocus="${this.autofocus}"
         ?disabled="${this.disabled}"
         ?required="${!!this.requiredLabel}"
-        aria-activedescendant="${this.activeDescendant}"
-        aria-expanded="${this.displayPopover}"
-        aria-haspopup="listbox"
-        aria-label="${(_a = this.dataAriaLabel) !== null && _a !== void 0 ? _a : ''}"
-        aria-labelledby="${this.label ? FORMFIELD_DEFAULTS.HEADING_ID : ''}"
         @mousedown="${(event) => event.preventDefault()}"
       >
         ${this.getOptionsContentFromSlot()}
@@ -447,7 +449,6 @@ class Select extends FormInternalsMixin(DataAriaLabelMixin(FormfieldWrapper)) {
         hide-on-outside-click
         focus-back-to-trigger
         focus-trap
-        prevent-scroll
         role="listbox"
         placement="${POPOVER_PLACEMENT.BOTTOM_START}"
         @shown="${this.handlePopoverOpen}"
@@ -466,7 +467,7 @@ class Select extends FormInternalsMixin(DataAriaLabelMixin(FormfieldWrapper)) {
         }
     }
     render() {
-        var _a;
+        var _a, _b;
         return html `
       ${this.renderLabel()}
       <div part="container">
@@ -475,13 +476,19 @@ class Select extends FormInternalsMixin(DataAriaLabelMixin(FormfieldWrapper)) {
           part="base-container"
           tabindex="${this.disabled ? '-1' : '0'}"
           class="${this.disabled ? '' : 'mdc-focus-ring'}"
+          role="combobox"
+          aria-activedescendant="${this.activeDescendant}"
+          aria-haspopup="listbox"
+          aria-label="${(_a = this.dataAriaLabel) !== null && _a !== void 0 ? _a : ''}"
+          aria-labelledby="${this.label ? FORMFIELD_DEFAULTS.HEADING_ID : ''}"
+          aria-expanded="${this.displayPopover ? 'true' : 'false'}"
         >
           <mdc-text
             part="base-text ${this.selectedValueText ? 'selected' : ''}"
             type="${TYPE.BODY_MIDSIZE_REGULAR}"
             tagname="${VALID_TEXT_TAGS.SPAN}"
           >
-            ${(_a = this.selectedValueText) !== null && _a !== void 0 ? _a : this.placeholder}
+            ${(_b = this.selectedValueText) !== null && _b !== void 0 ? _b : this.placeholder}
           </mdc-text>
           <div part="icon-container">
             <mdc-icon size="1" length-unit="rem" name="${this.baseIconName}"></mdc-icon>

package/dist/components/select/select.styles.js

@@ -29,7 +29,7 @@ const styles = css `
     position: absolute;
     width: 100%;
     height: 1px;
-    z-index: 1;
+    z-index: -1;
   }
   :host::part(container) {
     width: 100%;

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;