@momentum-design/components 0.54.1 → 0.54.3

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

@@ -80,11 +80,11 @@ declare class Button extends Buttonsimple {
     /**
      * @internal
      */
-    private prevPrefixIcon?;
+    private prefixFilledIconName?;
     /**
      * @internal
      */
-    private prevPostfixIcon?;
+    private postfixFilledIconName?;
     update(changedProperties: PropertyValues): void;
     /**
      * Modifies the icon name based on the active state.
@@ -94,7 +94,7 @@ declare class Button extends Buttonsimple {
      *
      * @param active - The active state.
      */
-    private modifyIconName;
+    private inferFilledIconName;
     /**
      * Sets the variant attribute for the button component.
      * If the provided variant is not included in the BUTTON_VARIANTS,

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

@@ -83,7 +83,7 @@ class Button extends Buttonsimple {
     update(changedProperties) {
         super.update(changedProperties);
         if (changedProperties.has('active')) {
-            this.modifyIconName(this.active);
+            this.inferFilledIconName(this.active);
         }
         if (changedProperties.has('size')) {
             this.setSize(this.size);
@@ -99,6 +99,7 @@ class Button extends Buttonsimple {
             this.setSize(this.size);
         }
         if (changedProperties.has('prefixIcon') || changedProperties.has('postfixIcon')) {
+            this.inferFilledIconName(this.active);
             this.inferButtonType();
         }
     }
@@ -110,24 +111,18 @@ class Button extends Buttonsimple {
      *
      * @param active - The active state.
      */
-    modifyIconName(active) {
+    inferFilledIconName(active) {
         if (active) {
             if (this.prefixIcon) {
-                this.prevPrefixIcon = this.prefixIcon;
-                this.prefixIcon = `${getIconNameWithoutStyle(this.prefixIcon)}-filled`;
+                this.prefixFilledIconName = `${getIconNameWithoutStyle(this.prefixIcon)}-filled`;
             }
             if (this.postfixIcon) {
-                this.prevPostfixIcon = this.postfixIcon;
-                this.postfixIcon = `${getIconNameWithoutStyle(this.postfixIcon)}-filled`;
+                this.postfixFilledIconName = `${getIconNameWithoutStyle(this.postfixIcon)}-filled`;
             }
         }
         else {
-            if (this.prevPrefixIcon) {
-                this.prefixIcon = this.prevPrefixIcon;
-            }
-            if (this.prevPostfixIcon) {
-                this.postfixIcon = this.prevPostfixIcon;
-            }
+            this.prefixFilledIconName = this.prefixIcon;
+            this.postfixFilledIconName = this.postfixIcon;
         }
     }
     /**
@@ -191,10 +186,12 @@ class Button extends Buttonsimple {
     }
     render() {
         return html `
-      ${this.prefixIcon ? html ` <mdc-icon name="${this.prefixIcon}" part="prefix-icon"></mdc-icon>` : ''}
+      ${this.prefixFilledIconName
+            ? html ` <mdc-icon name="${this.prefixFilledIconName}" part="prefix-icon"></mdc-icon>`
+            : ''}
       <slot @slotchange=${this.inferButtonType}></slot>
-      ${this.postfixIcon
-            ? html ` <mdc-icon name="${this.postfixIcon}" part="postfix-icon"></mdc-icon>`
+      ${this.postfixFilledIconName
+            ? html ` <mdc-icon name="${this.postfixFilledIconName}" part="postfix-icon"></mdc-icon>`
             : ''}
     `;
     }
@@ -228,4 +225,12 @@ __decorate([
     state(),
     __metadata("design:type", String)
 ], Button.prototype, "typeInternal", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", String)
+], Button.prototype, "prefixFilledIconName", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", String)
+], Button.prototype, "postfixFilledIconName", void 0);
 export default Button;

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

@@ -1,6 +1,6 @@
 import { CSSResult, PropertyValues } from 'lit';
 import { Component } from '../../models';
-import type { PopoverPlacement, PopoverTrigger, PopoverColor } from './popover.types';
+import { PopoverColor, PopoverPlacement, PopoverTrigger } from './popover.types';
 declare const Popover_base: import("../../utils/mixins/index.types").Constructor<HTMLElement & import("../../utils/mixins/FocusTrapMixin").FocusTrapClassInterface> & typeof Component;
 /**
  * Popover component is a lightweight floating UI element that displays additional content when triggered.

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

@@ -7,16 +7,16 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 var __metadata = (this && this.__metadata) || function (k, v) {
     if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
 };
+import { arrow, autoUpdate, computePosition, flip, offset, shift, size } from '@floating-ui/dom';
 import { html, nothing } from 'lit';
-import { ifDefined } from 'lit/directives/if-defined.js';
 import { property } from 'lit/decorators.js';
-import { computePosition, autoUpdate, offset, flip, shift, arrow, size } from '@floating-ui/dom';
-import styles from './popover.styles';
+import { ifDefined } from 'lit/directives/if-defined.js';
 import { Component } from '../../models';
 import { FocusTrapMixin } from '../../utils/mixins/FocusTrapMixin';
-import { popoverStack } from './popover.stack';
-import { DEFAULTS, POPOVER_PLACEMENT, TRIGGER, COLOR } from './popover.constants';
+import { COLOR, DEFAULTS, POPOVER_PLACEMENT, TRIGGER } from './popover.constants';
 import { PopoverEventManager } from './popover.events';
+import { popoverStack } from './popover.stack';
+import styles from './popover.styles';
 import { PopoverUtils } from './popover.utils';
 /**
  * Popover component is a lightweight floating UI element that displays additional content when triggered.
@@ -536,6 +536,7 @@ class Popover extends FocusTrapMixin(Component) {
                         return;
                     Object.assign(popoverContent.style, {
                         maxHeight: `${availableHeight}px`,
+                        overflowY: 'auto',
                     });
                 },
                 padding: 50,

package/dist/components/popover/popover.styles.js

@@ -48,7 +48,6 @@ const styles = css `
   :host::part(popover-content) {
     position: relative;
     padding: 0.75rem;
-    overflow-y: auto;
     min-width: max-content;
     z-index: 9998;
     max-height: var(--mdc-popover-max-height);

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

@@ -35,7 +35,7 @@ declare class Select extends Select_base implements AssociatedFormControl {
     /**
      * height attribute of the select field. If set,
      * then a scroll bar will be visible when there more options than the adjusted height.
-     * @default 'auto'
+     * @default auto
      */
     height: string;
     /** @internal */
@@ -50,6 +50,8 @@ declare class Select extends Select_base implements AssociatedFormControl {
     displayPopover: boolean;
     /** @internal */
     activeDescendant: string;
+    /** @internal */
+    popoverWidth: string;
     /**
      * @internal
      * The native select element

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

@@ -50,7 +50,7 @@ class Select extends FormInternalsMixin(DataAriaLabelMixin(FormfieldWrapper)) {
         /**
          * height attribute of the select field. If set,
          * then a scroll bar will be visible when there more options than the adjusted height.
-         * @default 'auto'
+         * @default auto
          */
         this.height = 'auto';
         /** @internal */
@@ -61,6 +61,8 @@ class Select extends FormInternalsMixin(DataAriaLabelMixin(FormfieldWrapper)) {
         this.displayPopover = false;
         /** @internal */
         this.activeDescendant = '';
+        /** @internal */
+        this.popoverWidth = '100%';
     }
     connectedCallback() {
         super.connectedCallback();
@@ -233,6 +235,7 @@ class Select extends FormInternalsMixin(DataAriaLabelMixin(FormfieldWrapper)) {
                 break;
             case KEYS.ESCAPE:
                 this.closePopover();
+                event.stopPropagation();
                 break;
             case KEYS.HOME:
                 this.setFocusAndTabIndex(0);
@@ -453,7 +456,7 @@ class Select extends FormInternalsMixin(DataAriaLabelMixin(FormfieldWrapper)) {
         placement="${POPOVER_PLACEMENT.BOTTOM_START}"
         @shown="${this.handlePopoverOpen}"
         @hidden="${this.handlePopoverClose}"
-        style="--mdc-popover-max-width: 100%; --mdc-popover-max-height: ${this.height};"
+        style="--mdc-popover-max-width: ${this.popoverWidth}; --mdc-popover-max-height: ${this.height};"
       >
         <slot @click="${this.handleOptionsClick}"></slot>
       </mdc-popover>
@@ -511,7 +514,7 @@ __decorate([
     __metadata("design:type", Object)
 ], Select.prototype, "readonly", void 0);
 __decorate([
-    property({ type: String, attribute: 'height' }),
+    property({ type: String }),
     __metadata("design:type", Object)
 ], Select.prototype, "height", void 0);
 __decorate([
@@ -538,6 +541,10 @@ __decorate([
     state(),
     __metadata("design:type", Object)
 ], Select.prototype, "activeDescendant", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Object)
+], Select.prototype, "popoverWidth", void 0);
 __decorate([
     query('select'),
     __metadata("design:type", HTMLInputElement)

package/dist/custom-elements.json

@@ -2020,7 +2020,7 @@
             },
             {
               "kind": "method",
-              "name": "modifyIconName",
+              "name": "inferFilledIconName",
               "privacy": "private",
               "parameters": [
                 {
@@ -9533,77 +9533,6 @@
         }
       ]
     },
-    {
-      "kind": "javascript-module",
-      "path": "components/marker/marker.component.js",
-      "declarations": [
-        {
-          "kind": "class",
-          "description": "`mdc-marker`, which is a vertical line and\nused to draw attention to specific parts of\nthe content or to signify important information.\n\n**Marker Variants**:\n- **solid**: Solid marker.\n- **striped**: Striped marker.",
-          "name": "Marker",
-          "cssProperties": [
-            {
-              "description": "Allows customization of the default background color in solid variant.",
-              "name": "--mdc-marker-solid-background-color"
-            },
-            {
-              "description": "Allows customization of the default stripes in striped variant.",
-              "name": "--mdc-marker-striped-color"
-            },
-            {
-              "description": "Allows customization of the default background color in striped variant.",
-              "name": "--mdc-marker-striped-background-color"
-            },
-            {
-              "description": "Allows customization of the default width.",
-              "name": "--mdc-marker-width"
-            }
-          ],
-          "members": [
-            {
-              "kind": "field",
-              "name": "variant",
-              "type": {
-                "text": "MarkerVariants"
-              },
-              "privacy": "public",
-              "description": "There are two variants of markers, each with a width of 0.25rem:\n- **solid**: Solid marker.\n- **striped**: Striped marker.",
-              "default": "solid",
-              "attribute": "variant",
-              "reflects": true
-            }
-          ],
-          "attributes": [
-            {
-              "name": "variant",
-              "type": {
-                "text": "MarkerVariants"
-              },
-              "description": "There are two variants of markers, each with a width of 0.25rem:\n- **solid**: Solid marker.\n- **striped**: Striped marker.",
-              "default": "solid",
-              "fieldName": "variant"
-            }
-          ],
-          "superclass": {
-            "name": "Component",
-            "module": "/src/models"
-          },
-          "tagName": "mdc-marker",
-          "jsDoc": "/**\n * `mdc-marker`, which is a vertical line and\n * used to draw attention to specific parts of\n * the content or to signify important information.\n *\n * **Marker Variants**:\n * - **solid**: Solid marker.\n * - **striped**: Striped marker.\n *\n * @tagname mdc-marker\n *\n * @cssproperty --mdc-marker-solid-background-color - Allows customization of the default background color\n * in solid variant.\n * @cssproperty --mdc-marker-striped-color - Allows customization of the default stripes in striped variant.\n * @cssproperty --mdc-marker-striped-background-color - Allows customization of the default background color\n * in striped variant.\n * @cssproperty --mdc-marker-width - Allows customization of the default width.\n */",
-          "customElement": true
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "default",
-          "declaration": {
-            "name": "Marker",
-            "module": "components/marker/marker.component.js"
-          }
-        }
-      ]
-    },
     {
       "kind": "javascript-module",
       "path": "components/optgroup/optgroup.component.js",
@@ -10511,6 +10440,77 @@
         }
       ]
     },
+    {
+      "kind": "javascript-module",
+      "path": "components/marker/marker.component.js",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "`mdc-marker`, which is a vertical line and\nused to draw attention to specific parts of\nthe content or to signify important information.\n\n**Marker Variants**:\n- **solid**: Solid marker.\n- **striped**: Striped marker.",
+          "name": "Marker",
+          "cssProperties": [
+            {
+              "description": "Allows customization of the default background color in solid variant.",
+              "name": "--mdc-marker-solid-background-color"
+            },
+            {
+              "description": "Allows customization of the default stripes in striped variant.",
+              "name": "--mdc-marker-striped-color"
+            },
+            {
+              "description": "Allows customization of the default background color in striped variant.",
+              "name": "--mdc-marker-striped-background-color"
+            },
+            {
+              "description": "Allows customization of the default width.",
+              "name": "--mdc-marker-width"
+            }
+          ],
+          "members": [
+            {
+              "kind": "field",
+              "name": "variant",
+              "type": {
+                "text": "MarkerVariants"
+              },
+              "privacy": "public",
+              "description": "There are two variants of markers, each with a width of 0.25rem:\n- **solid**: Solid marker.\n- **striped**: Striped marker.",
+              "default": "solid",
+              "attribute": "variant",
+              "reflects": true
+            }
+          ],
+          "attributes": [
+            {
+              "name": "variant",
+              "type": {
+                "text": "MarkerVariants"
+              },
+              "description": "There are two variants of markers, each with a width of 0.25rem:\n- **solid**: Solid marker.\n- **striped**: Striped marker.",
+              "default": "solid",
+              "fieldName": "variant"
+            }
+          ],
+          "superclass": {
+            "name": "Component",
+            "module": "/src/models"
+          },
+          "tagName": "mdc-marker",
+          "jsDoc": "/**\n * `mdc-marker`, which is a vertical line and\n * used to draw attention to specific parts of\n * the content or to signify important information.\n *\n * **Marker Variants**:\n * - **solid**: Solid marker.\n * - **striped**: Striped marker.\n *\n * @tagname mdc-marker\n *\n * @cssproperty --mdc-marker-solid-background-color - Allows customization of the default background color\n * in solid variant.\n * @cssproperty --mdc-marker-striped-color - Allows customization of the default stripes in striped variant.\n * @cssproperty --mdc-marker-striped-background-color - Allows customization of the default background color\n * in striped variant.\n * @cssproperty --mdc-marker-width - Allows customization of the default width.\n */",
+          "customElement": true
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "default",
+          "declaration": {
+            "name": "Marker",
+            "module": "components/marker/marker.component.js"
+          }
+        }
+      ]
+    },
     {
       "kind": "javascript-module",
       "path": "components/popover/popover.component.js",

package/dist/react/index.d.ts

@@ -21,9 +21,9 @@ export { default as InputChip } from './inputchip';
 export { default as Link } from './link';
 export { default as List } from './list';
 export { default as ListItem } from './listitem';
-export { default as Marker } from './marker';
 export { default as OptGroup } from './optgroup';
 export { default as Option } from './option';
+export { default as Marker } from './marker';
 export { default as Popover } from './popover';
 export { default as Presence } from './presence';
 export { default as Progressbar } from './progressbar';

package/dist/react/index.js

@@ -21,9 +21,9 @@ export { default as InputChip } from './inputchip';
 export { default as Link } from './link';
 export { default as List } from './list';
 export { default as ListItem } from './listitem';
-export { default as Marker } from './marker';
 export { default as OptGroup } from './optgroup';
 export { default as Option } from './option';
+export { default as Marker } from './marker';
 export { default as Popover } from './popover';
 export { default as Presence } from './presence';
 export { default as Progressbar } from './progressbar';

package/package.json

@@ -39,5 +39,5 @@
     "lit": "^3.2.0",
     "uuid": "^11.0.5"
   },
-  "version": "0.54.1"
+  "version": "0.54.3"
 }