@momentum-design/components 0.104.2 → 0.104.3

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

@@ -46,6 +46,8 @@ declare const Select_base: import("../../utils/mixins/index.types").Constructor<
  * @cssproperty --mdc-select-border-color-warning - The border color of the select when in warning state.
  * @cssproperty --mdc-select-border-color-error - The border color of the select when in error state.
  * @cssproperty --mdc-select-width - The width of the select.
+ * @cssproperty --mdc-select-listbox-height - The height of the listbox inside the select.
+ * @cssproperty --mdc-select-listbox-width - The width of the listbox inside the select (default: `--mdc-select-width`).
  */
 declare class Select extends Select_base implements AssociatedFormControl {
     /**
@@ -57,12 +59,6 @@ declare class Select extends Select_base implements AssociatedFormControl {
      * @default false
      */
     readonly: boolean;
-    /**
-     * 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
-     */
-    height: string;
     /**
      * The placeholder text which will be shown on the text if provided.
      */

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

@@ -62,6 +62,8 @@ import styles from './select.styles';
  * @cssproperty --mdc-select-border-color-warning - The border color of the select when in warning state.
  * @cssproperty --mdc-select-border-color-error - The border color of the select when in error state.
  * @cssproperty --mdc-select-width - The width of the select.
+ * @cssproperty --mdc-select-listbox-height - The height of the listbox inside the select.
+ * @cssproperty --mdc-select-listbox-width - The width of the listbox inside the select (default: `--mdc-select-width`).
  */
 class Select extends FormInternalsMixin(DataAriaLabelMixin(FormfieldWrapper)) {
     constructor() {
@@ -71,12 +73,6 @@ class Select extends FormInternalsMixin(DataAriaLabelMixin(FormfieldWrapper)) {
          * @default false
          */
         this.readonly = false;
-        /**
-         * 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
-         */
-        this.height = 'auto';
         /**
          * The placeholder text which will be shown on the text if provided.
          */
@@ -563,7 +559,6 @@ class Select extends FormInternalsMixin(DataAriaLabelMixin(FormfieldWrapper)) {
           @closebyoutsideclick="${() => {
             this.displayPopover = false;
         }}"
-          style="--mdc-popover-max-width: var(--mdc-select-width); --mdc-popover-max-height: ${this.height};"
         >
           <slot @click="${this.handleOptionsClick}"></slot>
         </mdc-popover>
@@ -581,10 +576,6 @@ __decorate([
     property({ type: Boolean }),
     __metadata("design:type", Object)
 ], Select.prototype, "readonly", void 0);
-__decorate([
-    property({ type: String }),
-    __metadata("design:type", Object)
-], Select.prototype, "height", void 0);
 __decorate([
     property({ type: String, reflect: true }),
     __metadata("design:type", String)

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

@@ -15,6 +15,8 @@ const styles = css `
     --mdc-select-border-color-warning: var(--mds-color-theme-text-warning-normal);
     --mdc-select-border-color-error: var(--mds-color-theme-text-error-normal);
     --mdc-select-width: 100%;
+    --mdc-select-listbox-width: var(--mdc-select-width);
+    --mdc-select-listbox-height: auto;
 
     display: flex;
     flex-direction: column;
@@ -79,9 +81,13 @@ const styles = css `
     display: flex;
     padding: 2px;
   }
+
+  /* Popover height, width & padding overrides */
+  :host mdc-popover {
+    --mdc-popover-max-width: var(--mdc-select-listbox-width);
+    --mdc-popover-max-height: var(--mdc-select-listbox-height);
+  }
   :host mdc-popover::part(popover-content) {
-    min-width: auto;
-    width: var(--mdc-select-width);
     max-height: var(--mdc-popover-max-height);
     padding: 0.75rem 0.5rem;
   }