@momentum-design/components 0.109.0 → 0.109.2

package/dist/browser/index.js

@@ -2144,6 +2144,7 @@
     --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;
 
@@ -2157,7 +2158,8 @@
     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']) {
@@ -2191,7 +2193,6 @@
     position: relative;
     cursor: default;
     padding: 0.75rem;
-    min-width: max-content;
     z-index: 9998;
     max-height: var(--mdc-popover-max-height);
   }
@@ -3523,7 +3524,6 @@
   }
   :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);
@@ -3537,11 +3537,8 @@
   :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),
@@ -3583,11 +3580,16 @@
     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);
@@ -3600,12 +3602,19 @@
   :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;
   }
 `,mf=[VE,...xt()];var Ve=class extends zt(Xe(pf(W))){constructor(){super();this.variant=nf.VARIANT;this.addEventListener("keydown",this.handleKeyDown.bind(this)),this.addEventListener("click",this.handleClick.bind(this))}connectedCallback(){super.connectedCallback(),this.role=this.role||tt.LISTITEM}handleClick(t){this.disabled&&(t.stopImmediatePropagation(),t.preventDefault())}handleKeyDown(t){(t.key===J.ENTER||t.key===J.SPACE)&&(this.triggerClickEvent(),t.preventDefault())}triggerClickEvent(){let t=new MouseEvent("click",{bubbles:!0,cancelable:!0,view:window});this.dispatchEvent(t)}getText(t,o,a){return I`
       <slot name="${t}">
@@ -4248,41 +4257,42 @@
       </div>
     `}};bs.styles=[...W.styles,...zf],p([u({type:String,reflect:!0})],bs.prototype,"label",2),p([Lt({selector:"mdc-option"})],bs.prototype,"options",2);var Od=bs;Od.register($f);var hT=Od;var Vf="check-bold",li=H.constructTagName("option");var pT=U`
   :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);
   }
 `,Bf=[pT];var xo=class extends Pe(si){constructor(){super(...arguments);this.selected=!1;this.ariaLabel=null}connectedCallback(){super.connectedCallback(),this.role="option",this.variant=Aa.INSET_RECTANGLE,this.setAttribute("aria-selected",`${this.selected}`),this.setAttribute("aria-disabled",`${!!this.disabled}`),this.name=void 0,this.sideHeaderText=void 0,this.sublineText=void 0}update(t){super.update(t),t.has("selected")&&(this.setAttribute("aria-selected",`${this.selected}`),this.dispatchModifiedEvent(this.selected?"selected":"unselected"))}render(){let t=this.prefixIcon?I`
           <div part="leading-icon">
             <mdc-icon length-unit="rem" slot="leading-controls" name="${st(this.prefixIcon)}"></mdc-icon>
           </div>
-        `:j,o=this.selected?I` <mdc-icon length-unit="rem" slot="trailing-controls" name="${Vf}"></mdc-icon> `:j;return I`
+        `:j,o=this.selected?I`
+            <mdc-icon length-unit="rem" slot="trailing-controls" name="${Vf}"></mdc-icon>
+        `:j;return I`
       ${t}
       <div part="leading-text">
         ${this.getText("leading-text-primary-label",ot.BODY_MIDSIZE_REGULAR,this.label)}
         ${this.getText("leading-text-secondary-label",ot.BODY_SMALL_REGULAR,this.secondaryLabel)}
       </div>
-      <div part="trailing">${o}</div>
+      <div part="trailing">
+        ${o}
+      </div>
     `}};xo.styles=[...si.styles,...Bf],p([u({type:Boolean,reflect:!0})],xo.prototype,"selected",2),p([u({type:String,reflect:!0,attribute:"prefix-icon"})],xo.prototype,"prefixIcon",2),p([u({type:String,reflect:!0,attribute:"aria-label"})],xo.prototype,"ariaLabel",2);var Pd=xo;Pd.register(li);var mT=Pd;var Dd={HIDE_BOLD:"hide-bold",SHOW_BOLD:"show-bold"},Uf=H.constructTagName("password");var Ao=class extends oi{constructor(){super(...arguments);this.showHideButtonAriaLabel="";this.helpTextType=Dt.VALIDATION;this.showPassword=!1}connectedCallback(){super.connectedCallback(),this.trailingButton=!0}toggleShowPassword(){this.showPassword=!this.showPassword}renderTrailingButton(t=!1){let o=t||this.value;return o?I`
       <mdc-button
         part="trailing-button"