@momentum-design/components 0.102.0 → 0.102.2

package/dist/browser/index.js

@@ -3481,16 +3481,21 @@
     --mdc-listitem-secondary-label-color: var(--mds-color-theme-text-secondary-normal);
     --mdc-listitem-disabled-color: var(--mds-color-theme-text-primary-disabled);
     --mdc-listitem-column-gap: 0.75rem;
-    --mdc-listitem-padding-left-and-right: 0.75rem;
+    --mdc-listitem-padding-left-right: 0.75rem;
+    --mdc-listitem-padding-top-bottom: 0.5rem;
+    --mdc-listitem-cursor: pointer;
+    --mdc-listitem-width: 100%;
+    --mdc-listitem-height: auto;
   }
   :host {
     background-color: var(--mdc-listitem-default-background-color);
     column-gap: var(--mdc-listitem-column-gap);
-    cursor: pointer;
     display: flex;
     flex-direction: row;
-    padding: 0.5rem var(--mdc-listitem-padding-left-and-right);
-    width: 100%;
+    cursor: var(--mdc-listitem-cursor);
+    padding: var(--mdc-listitem-padding-top-bottom) var(--mdc-listitem-padding-left-right);
+    width: var(--mdc-listitem-width);
+    height: var(--mdc-listitem-height);
   }
   :host([variant='inset-rectangle']) {
     border-radius: 0.5rem;
@@ -3501,7 +3506,7 @@
   :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-and-right)));
+    width: calc(100% - (2 * var(--mdc-listitem-padding-left-right)));
   }
   :host::part(leading-text-primary-label),
   :host::part(leading-text-secondary-label),
@@ -3582,21 +3587,23 @@
       @keyup=${this.stopEventPropagation}
       @keydown=${this.stopEventPropagation}
     ></slot>`}stopEventPropagation(t){(t instanceof KeyboardEvent&&(t.key===J.ENTER||t.key===J.SPACE)||t instanceof MouseEvent)&&t.stopPropagation()}render(){return C`
-      <div part="leading">
-        ${this.renderLeadingControls()}
-        <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)}
-          ${this.getText("leading-text-tertiary-label",ot.BODY_SMALL_REGULAR,this.tertiaryLabel)}
+      <slot name="content">
+        <div part="leading">
+          ${this.renderLeadingControls()}
+          <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)}
+            ${this.getText("leading-text-tertiary-label",ot.BODY_SMALL_REGULAR,this.tertiaryLabel)}
+          </div>
         </div>
-      </div>
-      <div part="trailing">
-        <div part="trailing-text">
-          ${this.getText("trailing-text-side-header",ot.BODY_MIDSIZE_REGULAR,this.sideHeaderText)}
-          ${this.getText("trailing-text-subline",ot.BODY_SMALL_REGULAR,this.sublineText)}
+        <div part="trailing">
+          <div part="trailing-text">
+            ${this.getText("trailing-text-side-header",ot.BODY_MIDSIZE_REGULAR,this.sideHeaderText)}
+            ${this.getText("trailing-text-subline",ot.BODY_SMALL_REGULAR,this.sublineText)}
+          </div>
+          ${this.renderTrailingControls()}
         </div>
-        ${this.renderTrailingControls()}
-      </div>
+      </slot>
     `}};xe.styles=[...j.styles,...Zu],p([Nt({slot:"leading-controls"})],xe.prototype,"leadingControlsSlot",2),p([Nt({slot:"trailing-controls"})],xe.prototype,"trailingControlsSlot",2),p([g({type:String,reflect:!0})],xe.prototype,"variant",2),p([g({type:String,reflect:!0})],xe.prototype,"label",2),p([g({type:String,reflect:!0,attribute:"secondary-label"})],xe.prototype,"secondaryLabel",2),p([g({type:String,reflect:!0,attribute:"tertiary-label"})],xe.prototype,"tertiaryLabel",2),p([g({type:String,reflect:!0,attribute:"side-header-text"})],xe.prototype,"sideHeaderText",2),p([g({type:String,reflect:!0,attribute:"subline-text"})],xe.prototype,"sublineText",2),p([g({type:Boolean,reflect:!0,attribute:"soft-disabled"})],xe.prototype,"softDisabled",2),p([g({type:String,reflect:!0,attribute:"tooltip-text"})],xe.prototype,"tooltipText",2),p([g({type:String,reflect:!0,attribute:"tooltip-placement"})],xe.prototype,"tooltipPlacement",2);var ii=xe;ii.register(pl);var TE=ii;var xE=H`
   :host {
     --mdc-marker-width: 0.25rem;