@momentum-design/components 0.109.0 → 0.109.2

package/dist/components/listitem/listitem.styles.js

@@ -17,7 +17,6 @@ const styles = css `
   }
   :host {
     background-color: var(--mdc-listitem-default-background-color);
-    column-gap: var(--mdc-listitem-column-gap);
     display: flex;
     flex-direction: row;
     cursor: var(--mdc-listitem-cursor);
@@ -31,11 +30,8 @@ const styles = css `
   :host([variant='inset-pill']) {
     border-radius: 3.125rem;
   }
-  :host::part(leading-text) {
-    flex: 1;
-    /** 2x of column gap on both ends of the listitem - 100% width */
-    width: calc(100% - (2 * var(--mdc-listitem-padding-left-right)));
-  }
+  :host::part(leading-text),
+  :host::part(trailing-text),
   :host::part(leading-text-primary-label),
   :host::part(leading-text-secondary-label),
   :host::part(leading-text-tertiary-label),
@@ -77,11 +73,16 @@ const styles = css `
     align-items: center;
     column-gap: var(--mdc-listitem-column-gap);
     display: flex;
-    width: 100%;
+    min-width: 0;
+  }
+  :host::part(leading) {
+    flex: 1;
   }
   :host::part(trailing) {
+    flex: 0 1 auto;
     justify-content: flex-end;
   }
+
   :host::part(leading-text-secondary-label),
   :host::part(leading-text-tertiary-label) {
     color: var(--mdc-listitem-secondary-label-color);
@@ -94,12 +95,19 @@ const styles = css `
   :host::part(trailing-text) {
     text-align: right;
   }
+
+  :host::part(trailing-text-side-header),
+  :host::part(trailing-text-subline) {
+    margin-inline-start: var(--mdc-listitem-column-gap);
+  }
+
   ::slotted([slot='leading-controls']),
   ::slotted([slot='trailing-controls']) {
     align-items: center;
     column-gap: var(--mdc-listitem-column-gap);
     display: flex;
     flex-direction: row;
+    flex-shrink: 0;
   }
 `;
 export default [styles, ...hostFocusRingStyles()];

package/dist/components/option/option.component.js

@@ -79,8 +79,10 @@ class Option extends FormInternalsMixin(ListItem) {
           </div>
         `
             : nothing;
-        const selectedIcon = this.selected
-            ? html ` <mdc-icon length-unit="rem" slot="trailing-controls" name="${SELECTED_ICON_NAME}"></mdc-icon> `
+        const trailingContent = this.selected
+            ? html `
+            <mdc-icon length-unit="rem" slot="trailing-controls" name="${SELECTED_ICON_NAME}"></mdc-icon>
+        `
             : nothing;
         return html `
       ${prefixIconContent}
@@ -88,7 +90,9 @@ class Option extends FormInternalsMixin(ListItem) {
         ${this.getText('leading-text-primary-label', TYPE.BODY_MIDSIZE_REGULAR, this.label)}
         ${this.getText('leading-text-secondary-label', TYPE.BODY_SMALL_REGULAR, this.secondaryLabel)}
       </div>
-      <div part="trailing">${selectedIcon}</div>
+      <div part="trailing">
+        ${trailingContent}
+      </div>
     `;
     }
 }

package/dist/components/option/option.styles.js

@@ -1,29 +1,26 @@
 import { css } from 'lit';
 const styles = css `
   :host {
+    --mdc-listitem-column-gap: 0.75rem;
     --mdc-option-icon-width: 1rem;
+  }
 
-    flex-shrink: 0;
-
+  :host::part(leading-icon),
+  :host::part(trailing) {
     display: flex;
-    flex-direction: row;
     align-items: center;
+    width: var(--mdc-option-icon-width);
   }
-  :host::part(list-item) {
-    height: 2.25rem;
+
+  :host::part(leading-text) {
+    flex: 1;
   }
-  :host::part(default-slot) {
-    display: none;
+ 
+  :host::part(leading-icon) {
+    margin-inline-end: var(--mdc-listitem-column-gap);
   }
-  :host::part(leading-icon),
   :host::part(trailing) {
-    flex: 1;
-    max-width: var(--mdc-option-icon-width);
-  }
-  :host::part(leading-text) {
-    flex: 1;
-    /** 2x of leading and trailing icon width + 2x of column gap on both sides of the label text */
-    width: calc(100% - (2 * var(--mdc-option-icon-width)) - (2 * var(--mdc-listitem-column-gap)));
+    margin-inline-start: var(--mdc-listitem-column-gap);
   }
 `;
 export default [styles];

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

@@ -32,6 +32,7 @@ declare const Popover_base: import("../../utils/mixins/index.types").Constructor
  * @cssproperty --mdc-popover-elevation-3 - elevation of the popover
  * @cssproperty --mdc-popover-max-width - max width of the popover
  * @cssproperty --mdc-popover-max-height - max height of the popover
+ * @cssproperty --mdc-popover-width - width of the popover
  *
  * @slot - Default slot for the popover content
  *

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

@@ -51,6 +51,7 @@ import { PopoverUtils } from './popover.utils';
  * @cssproperty --mdc-popover-elevation-3 - elevation of the popover
  * @cssproperty --mdc-popover-max-width - max width of the popover
  * @cssproperty --mdc-popover-max-height - max height of the popover
+ * @cssproperty --mdc-popover-width - width of the popover
  *
  * @slot - Default slot for the popover content
  *

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

@@ -10,6 +10,7 @@ const styles = css `
     --mdc-popover-inverted-border-color: var(--mds-color-theme-inverted-outline-primary-normal);
     --mdc-popover-inverted-text-color: var(--mds-color-theme-inverted-text-primary-normal);
     --mdc-popover-elevation-3: var(--mds-elevation-3);
+    --mdc-popover-width: unset;
     --mdc-popover-max-width: max-content;
     --mdc-popover-max-height: auto;
 
@@ -23,7 +24,8 @@ const styles = css `
     border-radius: 0.5rem;
     border: 0.0625rem solid var(--mdc-popover-border-color);
     filter: var(--mdc-popover-elevation-3);
-    width: var(--mdc-popover-max-width);
+    max-width: var(--mdc-popover-max-width);
+    width: var(--mdc-popover-width, var(--mdc-popover-max-width));
   }
 
   :host([strategy='absolute']) {
@@ -57,7 +59,6 @@ const styles = css `
     position: relative;
     cursor: default;
     padding: 0.75rem;
-    min-width: max-content;
     z-index: 9998;
     max-height: var(--mdc-popover-max-height);
   }