@momentum-design/components 0.53.2 → 0.53.4

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

@@ -76,8 +76,6 @@ declare class Button extends Buttonsimple {
     role: string;
     /** @internal */
     private typeInternal;
-    /** @internal */
-    private iconSize;
     /**
      * @internal
      */

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

@@ -12,7 +12,7 @@ import { property, state } from 'lit/decorators.js';
 import Buttonsimple from '../buttonsimple/buttonsimple.component';
 import { BUTTON_COLORS, BUTTON_TYPE_INTERNAL, BUTTON_VARIANTS, DEFAULTS, ICON_BUTTON_SIZES, PILL_BUTTON_SIZES, } from './button.constants';
 import styles from './button.styles';
-import { getIconNameWithoutStyle, getIconSize } from './button.utils';
+import { getIconNameWithoutStyle } from './button.utils';
 /**
  * `mdc-button` is a component that can be configured in various ways to suit different use cases.
  *
@@ -79,8 +79,6 @@ class Button extends Buttonsimple {
         this.role = 'button';
         /** @internal */
         this.typeInternal = DEFAULTS.TYPE_INTERNAL;
-        /** @internal */
-        this.iconSize = 1;
     }
     update(changedProperties) {
         super.update(changedProperties);
@@ -156,7 +154,6 @@ class Button extends Buttonsimple {
                 && !(size === ICON_BUTTON_SIZES[20] && this.variant !== BUTTON_VARIANTS.TERTIARY)
             : Object.values(PILL_BUTTON_SIZES).includes(size);
         this.setAttribute('size', isValidSize ? `${size}` : `${DEFAULTS.SIZE}`);
-        this.iconSize = getIconSize(size);
     }
     /**
      * Sets the color attribute for the button.
@@ -198,7 +195,6 @@ class Button extends Buttonsimple {
             ? html ` <mdc-icon
             name="${this.prefixIcon}"
             part="prefix-icon"
-            size=${this.iconSize}
             length-unit="rem"
           >
           </mdc-icon>`
@@ -208,7 +204,6 @@ class Button extends Buttonsimple {
             ? html ` <mdc-icon
             name="${this.postfixIcon}"
             part="postfix-icon"
-            size=${this.iconSize}
             length-unit="rem"
           >
           </mdc-icon>`
@@ -245,8 +240,4 @@ __decorate([
     state(),
     __metadata("design:type", String)
 ], Button.prototype, "typeInternal", void 0);
-__decorate([
-    state(),
-    __metadata("design:type", Object)
-], Button.prototype, "iconSize", void 0);
 export default Button;

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

@@ -31,6 +31,33 @@ const styles = css `
     --mdc-button-line-height-size-32: var(--mds-font-lineheight-body-large);
     --mdc-button-line-height-size-28: var(--mds-font-lineheight-body-midsize);
     --mdc-button-line-height-size-24: var(--mds-font-lineheight-body-small);
+
+    --mdc-button-prefix-icon-size: 1rem;
+    --mdc-button-postfix-icon-size: 1rem;
+  }
+
+  :host([size="64"]) {
+    --mdc-button-prefix-icon-size: 2rem;
+    --mdc-button-postfix-icon-size: 2rem;
+  }
+
+  :host([size="52"]) {
+    --mdc-button-prefix-icon-size: 1.75rem;
+    --mdc-button-postfix-icon-size: 1.75rem;
+  }
+
+  :host([size="40"]) {
+    --mdc-button-prefix-icon-size: 1.25rem;
+    --mdc-button-postfix-icon-size: 1.25rem;
+  }
+
+  /* Apply icon size for prefix and postfix icons */
+  :host::part(prefix-icon) {
+    --mdc-icon-size: var(--mdc-button-prefix-icon-size);
+  }
+
+  :host::part(postfix-icon) {
+    --mdc-icon-size: var(--mdc-button-postfix-icon-size);
   }
 
   :host([active]){

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

@@ -1,11 +1,3 @@
-import { IconButtonSize } from './button.types';
-/**
- * Returns the icon size multiplier based on the provided button size.
- *
- * @param size - The size of the button.
- * @returns The multiplier for the icon size.
- */
-declare const getIconSize: (size: IconButtonSize) => number;
 /**
  * Returns the name of the icon without the style suffix.
  *
@@ -13,4 +5,4 @@ declare const getIconSize: (size: IconButtonSize) => number;
  * @returns The name of the icon without the suffix.
  */
 declare const getIconNameWithoutStyle: (iconName: string) => string;
-export { getIconSize, getIconNameWithoutStyle };
+export { getIconNameWithoutStyle };

package/dist/components/button/button.utils.js

@@ -1,18 +1,3 @@
-import { ICON_BUTTON_SIZES } from './button.constants';
-/**
- * Returns the icon size multiplier based on the provided button size.
- *
- * @param size - The size of the button.
- * @returns The multiplier for the icon size.
- */
-const getIconSize = (size) => {
-    switch (size) {
-        case ICON_BUTTON_SIZES[64]: return 2;
-        case ICON_BUTTON_SIZES[52]: return 1.75;
-        case ICON_BUTTON_SIZES[40]: return 1.25;
-        default: return 1;
-    }
-};
 /**
  * Returns the name of the icon without the style suffix.
  *
@@ -24,4 +9,4 @@ const getIconNameWithoutStyle = (iconName) => {
     const variants = ['bold', 'filled', 'regular', 'light'];
     return iconParts.filter((part) => !variants.includes(part)).join('-');
 };
-export { getIconSize, getIconNameWithoutStyle };
+export { getIconNameWithoutStyle };

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/custom-elements.json

@@ -1802,77 +1802,6 @@
         }
       ]
     },
-    {
-      "kind": "javascript-module",
-      "path": "components/bullet/bullet.component.js",
-      "declarations": [
-        {
-          "kind": "class",
-          "description": "Bullet component, which is a visual marker\nand be used to organize and present items in a list format.",
-          "name": "Bullet",
-          "cssProperties": [
-            {
-              "description": "background color of the bullet",
-              "name": "--mdc-bullet-background-color"
-            },
-            {
-              "description": "small size value of the bullet",
-              "name": "--mdc-bullet-size-small"
-            },
-            {
-              "description": "medium size value of the bullet",
-              "name": "--mdc-bullet-size-medium"
-            },
-            {
-              "description": "large size value of the bullet",
-              "name": "--mdc-bullet-size-large"
-            }
-          ],
-          "members": [
-            {
-              "kind": "field",
-              "name": "size",
-              "type": {
-                "text": "Size"
-              },
-              "privacy": "public",
-              "description": "Size of the bullet\n\nPossible values: 'small', 'medium', 'large'",
-              "default": "small",
-              "attribute": "size",
-              "reflects": true
-            }
-          ],
-          "attributes": [
-            {
-              "name": "size",
-              "type": {
-                "text": "Size"
-              },
-              "description": "Size of the bullet\n\nPossible values: 'small', 'medium', 'large'",
-              "default": "small",
-              "fieldName": "size"
-            }
-          ],
-          "superclass": {
-            "name": "Component",
-            "module": "/src/models"
-          },
-          "tagName": "mdc-bullet",
-          "jsDoc": "/**\n * Bullet component, which is a visual marker\n * and be used to organize and present items in a list format.\n *\n * @tagname mdc-bullet\n *\n * @cssproperty --mdc-bullet-background-color - background color of the bullet\n * @cssproperty --mdc-bullet-size-small - small size value of the bullet\n * @cssproperty --mdc-bullet-size-medium - medium size value of the bullet\n * @cssproperty --mdc-bullet-size-large - large size value of the bullet\n*/",
-          "customElement": true
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "default",
-          "declaration": {
-            "name": "Bullet",
-            "module": "components/bullet/bullet.component.js"
-          }
-        }
-      ]
-    },
     {
       "kind": "javascript-module",
       "path": "components/button/button.component.js",
@@ -2434,6 +2363,77 @@
         }
       ]
     },
+    {
+      "kind": "javascript-module",
+      "path": "components/bullet/bullet.component.js",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "Bullet component, which is a visual marker\nand be used to organize and present items in a list format.",
+          "name": "Bullet",
+          "cssProperties": [
+            {
+              "description": "background color of the bullet",
+              "name": "--mdc-bullet-background-color"
+            },
+            {
+              "description": "small size value of the bullet",
+              "name": "--mdc-bullet-size-small"
+            },
+            {
+              "description": "medium size value of the bullet",
+              "name": "--mdc-bullet-size-medium"
+            },
+            {
+              "description": "large size value of the bullet",
+              "name": "--mdc-bullet-size-large"
+            }
+          ],
+          "members": [
+            {
+              "kind": "field",
+              "name": "size",
+              "type": {
+                "text": "Size"
+              },
+              "privacy": "public",
+              "description": "Size of the bullet\n\nPossible values: 'small', 'medium', 'large'",
+              "default": "small",
+              "attribute": "size",
+              "reflects": true
+            }
+          ],
+          "attributes": [
+            {
+              "name": "size",
+              "type": {
+                "text": "Size"
+              },
+              "description": "Size of the bullet\n\nPossible values: 'small', 'medium', 'large'",
+              "default": "small",
+              "fieldName": "size"
+            }
+          ],
+          "superclass": {
+            "name": "Component",
+            "module": "/src/models"
+          },
+          "tagName": "mdc-bullet",
+          "jsDoc": "/**\n * Bullet component, which is a visual marker\n * and be used to organize and present items in a list format.\n *\n * @tagname mdc-bullet\n *\n * @cssproperty --mdc-bullet-background-color - background color of the bullet\n * @cssproperty --mdc-bullet-size-small - small size value of the bullet\n * @cssproperty --mdc-bullet-size-medium - medium size value of the bullet\n * @cssproperty --mdc-bullet-size-large - large size value of the bullet\n*/",
+          "customElement": true
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "default",
+          "declaration": {
+            "name": "Bullet",
+            "module": "components/bullet/bullet.component.js"
+          }
+        }
+      ]
+    },
     {
       "kind": "javascript-module",
       "path": "components/buttonsimple/buttonsimple.component.js",

package/dist/react/index.d.ts

@@ -4,8 +4,8 @@ export { default as Avatar } from './avatar';
 export { default as AvatarButton } from './avatarbutton';
 export { default as Badge } from './badge';
 export { default as Brandvisual } from './brandvisual';
-export { default as Bullet } from './bullet';
 export { default as Button } from './button';
+export { default as Bullet } from './bullet';
 export { default as Buttonsimple } from './buttonsimple';
 export { default as Checkbox } from './checkbox';
 export { default as Chip } from './chip';

package/dist/react/index.js

@@ -4,8 +4,8 @@ export { default as Avatar } from './avatar';
 export { default as AvatarButton } from './avatarbutton';
 export { default as Badge } from './badge';
 export { default as Brandvisual } from './brandvisual';
-export { default as Bullet } from './bullet';
 export { default as Button } from './button';
+export { default as Bullet } from './bullet';
 export { default as Buttonsimple } from './buttonsimple';
 export { default as Checkbox } from './checkbox';
 export { default as Chip } from './chip';

package/package.json

@@ -39,5 +39,5 @@
     "lit": "^3.2.0",
     "uuid": "^11.0.5"
   },
-  "version": "0.53.2"
+  "version": "0.53.4"
 }