@momentum-design/components 0.123.2 → 0.123.4

package/dist/components/combobox/combobox.styles.js

@@ -54,9 +54,6 @@ const styles = css `
   :host([disabled])::part(combobox__button) {
     border-inline-start-color: var(--mdc-combobox-text-color-disabled);
   }
-  :host::part(mdc-input) {
-    width: calc(100% - 1.5rem);
-  }
   :host::part(combobox__button-icon) {
     --mdc-icon-fill-color: var(--mdc-combobox-icon-color);
   }
@@ -66,6 +63,10 @@ const styles = css `
   :host::part(no-result-text) {
     pointer-events: none;
   }
+  :host::part(input-text) {
+    /* 2rem is the complete width of dropdown button */
+    width: calc(100% - 2rem);
+  }
   :host([disabled]) input,
   :host([disabled]) mdc-input {
     user-select: none;

package/dist/components/input/input.styles.js

@@ -20,7 +20,17 @@ const styles = [
 
     :host::part(input-text),
     ::slotted(input) {
-      font-family: inherit;
+      /* Unset default native input placeholder padding */
+      padding-block: unset;
+      padding-inline: unset;
+
+      /* Set midsize regular font family to native input text */
+      font-family: var(--mdc-themeprovider-font-family);
+      font-size: var(--mds-font-apps-body-midsize-regular-font-size);
+      font-weight: var(--mds-font-apps-body-midsize-regular-font-weight);
+      line-height: var(--mds-font-apps-body-midsize-regular-line-height);
+      text-decoration: var(--mds-font-apps-body-midsize-regular-text-decoration);
+      text-transform: var(--mds-font-apps-body-midsize-regular-text-case);
     }
 
     :host::part(input-container) {

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

@@ -253,9 +253,9 @@ declare class Popover extends Popover_base {
     isBackdropInvisible?: boolean;
     /**
      * Changes the placement of popover to keep it in view when scrolling.
-     * @default true
+     * @default false
      */
-    flip: boolean;
+    disableFlip: boolean;
     /**
      * Changes the size of popover to keep it in view when scrolling.
      * @default false

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

@@ -272,9 +272,9 @@ class Popover extends BackdropMixin(PreventScrollMixin(FocusTrapMixin(Component)
         this.isBackdropInvisible = DEFAULTS.IS_BACKDROP_INVISIBLE;
         /**
          * Changes the placement of popover to keep it in view when scrolling.
-         * @default true
+         * @default false
          */
-        this.flip = DEFAULTS.FLIP;
+        this.disableFlip = DEFAULTS.DISABLE_FLIP;
         /**
          * Changes the size of popover to keep it in view when scrolling.
          * @default false
@@ -613,7 +613,7 @@ class Popover extends BackdropMixin(PreventScrollMixin(FocusTrapMixin(Component)
                 }),
             ];
             let popoverOffset = this.offset;
-            if (this.flip) {
+            if (!this.disableFlip) {
                 middleware.push(flip({
                     boundary,
                     rootBoundary,
@@ -1023,9 +1023,9 @@ __decorate([
     __metadata("design:type", Boolean)
 ], Popover.prototype, "isBackdropInvisible", void 0);
 __decorate([
-    property({ type: Boolean, reflect: true }),
+    property({ type: Boolean, reflect: true, attribute: 'disable-flip' }),
     __metadata("design:type", Boolean)
-], Popover.prototype, "flip", void 0);
+], Popover.prototype, "disableFlip", void 0);
 __decorate([
     property({ type: Boolean, reflect: true }),
     __metadata("design:type", Boolean)

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

@@ -47,7 +47,7 @@ declare const DEFAULTS: {
     readonly HIDE_ON_CLICK_OUTSIDE: false;
     readonly FOCUS_BACK: false;
     readonly BACKDROP: false;
-    readonly FLIP: true;
+    readonly DISABLE_FLIP: false;
     readonly SIZE: false;
     readonly DELAY: "0,0";
     readonly ROLE: "dialog";

package/dist/components/popover/popover.constants.js

@@ -49,7 +49,7 @@ const DEFAULTS = {
     HIDE_ON_CLICK_OUTSIDE: false,
     FOCUS_BACK: false,
     BACKDROP: false,
-    FLIP: true,
+    DISABLE_FLIP: false,
     SIZE: false,
     DELAY: '0,0',
     ROLE: ROLE.DIALOG,

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

@@ -115,6 +115,11 @@ declare class Select extends Select_base implements AssociatedFormControl {
      * @default 1000
      */
     popoverZIndex: number;
+    /**
+     * Determines whether the dropdown should flip its position when it hits the boundary.
+     * @default false
+     */
+    disableFlip: boolean;
     /**
      * ID of the element where the backdrop will be appended to.
      * This is useful to ensure that the backdrop is appended to the correct element in the DOM.

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

@@ -22,10 +22,10 @@ import { ROLE } from '../../utils/roles';
 import FormfieldWrapper from '../formfieldwrapper/formfieldwrapper.component';
 import { DEFAULTS as FORMFIELD_DEFAULTS, VALIDATION } from '../formfieldwrapper/formfieldwrapper.constants';
 import { TAG_NAME as OPTION_TAG_NAME } from '../option/option.constants';
-import { DEFAULTS as POPOVER_DEFAULTS, POPOVER_PLACEMENT } from '../popover/popover.constants';
+import { DEFAULTS as POPOVER_DEFAULTS, POPOVER_PLACEMENT, TRIGGER } from '../popover/popover.constants';
 import { TYPE, VALID_TEXT_TAGS } from '../text/text.constants';
 import { debounce } from '../../utils/debounce';
-import { ARROW_ICON, LISTBOX_ID, TRIGGER_ID } from './select.constants';
+import { ARROW_ICON, DEFAULTS, LISTBOX_ID, TRIGGER_ID } from './select.constants';
 import styles from './select.styles';
 /**
  * The mdc-select component is a dropdown selection control that allows users to pick an option from a predefined list.
@@ -132,6 +132,11 @@ class Select extends ListNavigationMixin(CaptureDestroyEventForChildElement(Auto
          * @default 1000
          */
         this.popoverZIndex = POPOVER_DEFAULTS.Z_INDEX;
+        /**
+         * Determines whether the dropdown should flip its position when it hits the boundary.
+         * @default false
+         */
+        this.disableFlip = DEFAULTS.DISABLE_FLIP;
         /** @internal */
         this.displayPopover = false;
         /** @internal */
@@ -554,28 +559,33 @@ class Select extends ListNavigationMixin(CaptureDestroyEventForChildElement(Auto
             case KEYS.ENTER:
             case KEYS.SPACE:
                 this.displayPopover = true;
+                event.preventDefault();
                 event.stopPropagation();
                 break;
             case KEYS.HOME: {
                 this.displayPopover = true;
                 this.resetTabIndexAndSetFocusAfterUpdate(0);
+                event.preventDefault();
+                event.stopPropagation();
                 break;
             }
             case KEYS.END: {
                 this.displayPopover = true;
                 this.resetTabIndexAndSetFocusAfterUpdate(this.navItems.length - 1);
+                event.preventDefault();
+                event.stopPropagation();
                 break;
             }
             default: {
                 if (event.key.length === 1) {
                     this.displayPopover = true;
                     this.handleSelectedOptionByKeyInput(event.key);
+                    event.preventDefault();
+                    event.stopPropagation();
                 }
                 break;
             }
         }
-        event.preventDefault();
-        event.stopPropagation();
     }
     resetTabIndexAndSetFocusAfterUpdate(newOptionIndex) {
         if (this.displayPopover) {
@@ -653,13 +663,13 @@ class Select extends ListNavigationMixin(CaptureDestroyEventForChildElement(Auto
           >
             ${(_f = (_e = this.selectedOption) === null || _e === void 0 ? void 0 : _e.label) !== null && _f !== void 0 ? _f : this.placeholder}
           </mdc-text>
-          <div part="icon-container">
-            <mdc-icon
-              size="1"
-              length-unit="rem"
-              name="${this.displayPopover ? ARROW_ICON.ARROW_UP : ARROW_ICON.ARROW_DOWN}"
-            ></mdc-icon>
-          </div>
+        </div>
+        <div part="icon-container">
+          <mdc-icon
+            size="1"
+            length-unit="rem"
+            name="${this.displayPopover ? ARROW_ICON.ARROW_UP : ARROW_ICON.ARROW_DOWN}"
+          ></mdc-icon>
         </div>
         <input
           id="${this.inputId}"
@@ -676,7 +686,7 @@ class Select extends ListNavigationMixin(CaptureDestroyEventForChildElement(Auto
           aria-disabled="${ifDefined(this.disabled || this.softDisabled)}"
         />
         <mdc-popover
-          trigger="manual"
+          trigger="${TRIGGER.MANUAL}"
           triggerid="${TRIGGER_ID}"
           interactive
           ?visible="${this.displayPopover}"
@@ -689,6 +699,7 @@ class Select extends ListNavigationMixin(CaptureDestroyEventForChildElement(Auto
           focus-trap
           size
           @keydown="${this.handleKeydownPopover}"
+          ?disable-flip="${this.disableFlip}"
           boundary="${ifDefined(this.boundary)}"
           strategy="${ifDefined(this.strategy)}"
           placement="${this.placement}"
@@ -729,6 +740,10 @@ __decorate([
     property({ type: Number, reflect: true, attribute: 'popover-z-index' }),
     __metadata("design:type", Number)
 ], Select.prototype, "popoverZIndex", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true, attribute: 'disable-flip' }),
+    __metadata("design:type", Boolean)
+], Select.prototype, "disableFlip", void 0);
 __decorate([
     property({ type: String, reflect: true, attribute: 'backdrop-append-to' }),
     __metadata("design:type", String)

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

@@ -6,4 +6,7 @@ declare const ARROW_ICON: {
 };
 declare const TRIGGER_ID = "select-base-triggerid";
 declare const LISTBOX_ID = "select-listbox";
-export { ARROW_ICON, TAG_NAME, TRIGGER_ID, LISTBOX_ID };
+declare const DEFAULTS: {
+    readonly DISABLE_FLIP: false;
+};
+export { ARROW_ICON, DEFAULTS, TAG_NAME, TRIGGER_ID, LISTBOX_ID };

package/dist/components/select/select.constants.js

@@ -6,4 +6,7 @@ const ARROW_ICON = {
 };
 const TRIGGER_ID = 'select-base-triggerid';
 const LISTBOX_ID = 'select-listbox';
-export { ARROW_ICON, TAG_NAME, TRIGGER_ID, LISTBOX_ID };
+const DEFAULTS = {
+    DISABLE_FLIP: false,
+};
+export { ARROW_ICON, DEFAULTS, TAG_NAME, TRIGGER_ID, LISTBOX_ID };

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

@@ -28,8 +28,10 @@ const styles = css `
     z-index: -1;
   }
   :host::part(container) {
+    height: 2rem;
     width: 100%;
     position: relative;
+    display: flex;
   }
   :host ::slotted(mdc-selectlistbox) {
     display: flex;
@@ -46,6 +48,7 @@ const styles = css `
     gap: 0.375rem;
     align-items: center;
     user-select: none;
+    width: 100%;
   }
   :host::part(base-container):hover {
     --mdc-select-background-color: var(--mds-color-theme-background-primary-hover);
@@ -54,8 +57,9 @@ const styles = css `
     --mdc-select-background-color: var(--mds-color-theme-background-primary-active);
   }
   :host::part(base-text) {
-    height: 1.3125rem;
-    width: 100%;
+    height: 100%;
+    /* 2rem is the complete width of dropdown icon */
+    width: calc(100% - 2rem);
     color: var(--mdc-select-text-color);
     overflow: hidden;
     text-overflow: ellipsis;
@@ -68,9 +72,9 @@ const styles = css `
     flex-shrink: 0;
   }
   :host::part(icon-container) {
-    margin-left: auto;
-    display: flex;
-    padding: 2px;
+    padding: 0.5rem;
+    position: absolute;
+    inset-inline-end: 0%;
   }
 
   /* Popover height, width & padding overrides */

package/dist/components/tooltip/tooltip.component.js

@@ -58,7 +58,7 @@ class Tooltip extends Popover {
         this.role = ROLE.TOOLTIP;
         this.trigger = 'mouseenter focusin';
         this.preventScroll = false;
-        this.flip = true;
+        this.disableFlip = false;
         this.preventScroll = false;
         this.closeButton = false;
         this.hideOnOutsideClick = false;