@momentum-design/components 0.98.0 → 0.98.1

package/dist/browser/index.js

@@ -1396,25 +1396,31 @@
         </div>
       </slot>`}}return f([Ft({slot:"footer-link"})],i.prototype,"footerLink",2),f([Ft({slot:"footer-button-primary"})],i.prototype,"footerButtonPrimary",2),f([Ft({slot:"footer-button-secondary"})],i.prototype,"footerButtonSecondary",2),i};var ib=H`
   :host {
+    --mdc-card-width: 20rem;
     align-items: flex-start;
     border-radius: 0.5rem;
     border: 1px solid var(--mds-color-theme-outline-primary-normal);
     box-shadow: none;
     transition: box-shadow 0.2s;
+    width: var(--mdc-card-width);
   }
+
   :host([variant='ghost']) {
     border-color: transparent;
   }
+
   :host([orientation='horizontal']) {
-    max-width: 40rem;
+    min-width: 40rem;
+    --mdc-card-width: 40rem;
   }
 
   :host([orientation='vertical']) {
-    max-width: 20rem;
+    min-width: 20rem;
     flex-direction: column;
   }
 
   :host([orientation='vertical'])::part(image) {
+    object-fit: cover;
     height: 12.5rem;
     width: 100%;
     border-top-left-radius: 0.5rem;
@@ -1422,12 +1428,19 @@
   }
 
   :host([orientation='horizontal'])::part(image) {
+    object-fit: cover;
     width: 10rem;
     height: 100%;
     border-top-left-radius: 0.5rem;
     border-bottom-left-radius: 0.5rem;
   }
 
+  :host::part(text-content) {
+    display: flex;
+    flex-direction: column;
+    flex-grow: 1;
+  }
+
   :host::part(header) {
     display: flex;
     gap: 0.5rem;
@@ -1439,6 +1452,7 @@
 
   :host::part(body) {
     width: 100%;
+    height: inherit;
     padding: 1.5rem;
     display: flex;
     flex-direction: column;
@@ -1475,6 +1489,11 @@
     gap: 1rem;
   }
 
+  ::slotted([slot='before-body']),
+  ::slotted([slot='after-body']) {
+    margin-top: 1rem;
+  }
+
   ::slotted([slot='footer-link']),
   ::slotted([slot='footer-button-primary']),
   ::slotted([slot='footer-button-secondary']) {
@@ -1484,16 +1503,18 @@
   :host::part(text) {
     margin: unset;
   }
-`,tm=[Et,ib];var qs=class extends kn(Cn(q)){constructor(){super(...arguments);this.handleIconButtons=()=>{var t;if((t=this.iconButtons)==null||t.forEach(s=>{!s.matches(ee.BUTTON)&&s.getAttribute("data-btn-type")!=="icon"?s.remove():(s.setAttribute("variant",Bt.TERTIARY),s.setAttribute("size","32"))}),this.iconButtons&&this.iconButtons.length>3)for(let s=3;s<this.iconButtons.length;s+=1)this.iconButtons[s].remove()}}update(t){super.update(t),t.has("variant")&&this.updateFooterButtonColors(this.variant)}renderHeader(){return this.cardTitle?L`<div part="header">
+`,tm=[Et,ib];var qs=class extends kn(Cn(q)){constructor(){super(...arguments);this.handleIconButtons=()=>{var t;(t=this.iconButtons)==null||t.forEach(s=>{s.matches(ee.BUTTON)&&(s.setAttribute("variant",Bt.TERTIARY),s.setAttribute("size","32"))})}}update(t){super.update(t),t.has("variant")&&this.updateFooterButtonColors(this.variant)}renderHeader(){return this.cardTitle?L`<div part="header">
       ${this.renderIcon()} ${this.renderTitle()}
       <div part="icon-button"><slot name="icon-button" @slotchange=${this.handleIconButtons}></slot></div>
     </div>`:W}render(){return L`
       ${this.renderImage()}
       <div part="body">
         ${this.renderHeader()}
-        <slot name="before-body"></slot>
-        <slot name="body"></slot>
-        <slot name="after-body"></slot>
+        <div part="text-content">
+          <slot name="before-body"></slot>
+          <slot name="body"></slot>
+          <slot name="after-body"></slot>
+        </div>
         ${this.renderFooter()}
       </div>
     `}};qs.styles=[...q.styles,...tm],f([Ft({slot:"icon-button"})],qs.prototype,"iconButtons",2);var lr=qs;lr.register(Qp);var ob=lr;var sb=H`