@momentum-design/components 0.97.0 → 0.98.1

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

@@ -12,15 +12,14 @@ declare const Card_base: import("../../utils/mixins/index.types").Constructor<im
  *    - Subtitle
  * - Body
  *
- * The card can either be vertically or horizontally oriented.
+ * The card can either be vertically or horizontally oriented. The vertical card has a min-width of 20rem and the horizontal card has a min-width of 40rem.
  *
  * There are 2 variants for the card that represent the border styling - 'border' and 'ghost'.
  *
  * To make this card interactive, use the following slots:
  * - `icon-button`: This slot supports action icon buttons in the header section (maximum of 3 buttons).
  * - `footer-link`: This slot is for passing `mdc-link` component within the footer section.
- * - `footer-button-primary`: This slot is for passing primary variant of
- * `mdc-button` component within the footer section.
+ * - `footer-button-primary`: This slot is for passing primary variant of `mdc-button` component within the footer section.
  * - `footer-button-secondary`: This slot is for passing secondary variant of `mdc-button` component
  * within the footer section.
  *
@@ -37,14 +36,23 @@ declare const Card_base: import("../../utils/mixins/index.types").Constructor<im
  * @slot footer -  This slot is for passing custom footer content. Only use this if really needed,
  * using the footer-link and footer-button slots is preferred.
  *
+ * @csspart header - The header part of the card
+ * @csspart icon - The icon part of the card header
+ * @csspart body - The body part of the card
+ * @csspart image - The image part of the card
+ * @csspart footer - The footer part of the card
+ * @csspart footer-link - The link part of the card footer
+ * @csspart footer-button-primary - The primary button part of the card footer
+ * @csspart footer-button-secondary - The secondary button part of the card footer
+ * @csspart icon-button - The icon button part of the card header
+ * @csspart text - The text part of the card
+ *
  * @tagname mdc-card
  *
  * @dependency mdc-icon
  * @dependency mdc-text
  *
- * @slot before-body - This slot is for passing the content before the body
- * @slot body - This slot is for passing the text content for the card
- * @slot after-body - This slot is for passing the content after the body
+ * @cssproperty --mdc-card-width - The width of the card
  *
  */
 declare class Card extends Card_base {

package/dist/components/card/card.component.js

@@ -26,15 +26,14 @@ import styles from './card.styles';
  *    - Subtitle
  * - Body
  *
- * The card can either be vertically or horizontally oriented.
+ * The card can either be vertically or horizontally oriented. The vertical card has a min-width of 20rem and the horizontal card has a min-width of 40rem.
  *
  * There are 2 variants for the card that represent the border styling - 'border' and 'ghost'.
  *
  * To make this card interactive, use the following slots:
  * - `icon-button`: This slot supports action icon buttons in the header section (maximum of 3 buttons).
  * - `footer-link`: This slot is for passing `mdc-link` component within the footer section.
- * - `footer-button-primary`: This slot is for passing primary variant of
- * `mdc-button` component within the footer section.
+ * - `footer-button-primary`: This slot is for passing primary variant of `mdc-button` component within the footer section.
  * - `footer-button-secondary`: This slot is for passing secondary variant of `mdc-button` component
  * within the footer section.
  *
@@ -51,14 +50,23 @@ import styles from './card.styles';
  * @slot footer -  This slot is for passing custom footer content. Only use this if really needed,
  * using the footer-link and footer-button slots is preferred.
  *
+ * @csspart header - The header part of the card
+ * @csspart icon - The icon part of the card header
+ * @csspart body - The body part of the card
+ * @csspart image - The image part of the card
+ * @csspart footer - The footer part of the card
+ * @csspart footer-link - The link part of the card footer
+ * @csspart footer-button-primary - The primary button part of the card footer
+ * @csspart footer-button-secondary - The secondary button part of the card footer
+ * @csspart icon-button - The icon button part of the card header
+ * @csspart text - The text part of the card
+ *
  * @tagname mdc-card
  *
  * @dependency mdc-icon
  * @dependency mdc-text
  *
- * @slot before-body - This slot is for passing the content before the body
- * @slot body - This slot is for passing the text content for the card
- * @slot after-body - This slot is for passing the content after the body
+ * @cssproperty --mdc-card-width - The width of the card
  *
  */
 class Card extends CardComponentMixin(FooterMixin(Component)) {
@@ -72,20 +80,11 @@ class Card extends CardComponentMixin(FooterMixin(Component)) {
         this.handleIconButtons = () => {
             var _a;
             (_a = this.iconButtons) === null || _a === void 0 ? void 0 : _a.forEach(element => {
-                if (!element.matches(DEFAULTS.BUTTON) && element.getAttribute('data-btn-type') !== 'icon') {
-                    element.remove();
-                }
-                else {
+                if (element.matches(DEFAULTS.BUTTON)) {
                     element.setAttribute('variant', BUTTON_VARIANTS.TERTIARY);
                     element.setAttribute('size', '32');
                 }
             });
-            // limit to show only first 3 buttons defined in the slot
-            if (this.iconButtons && this.iconButtons.length > 3) {
-                for (let i = 3; i < this.iconButtons.length; i += 1) {
-                    this.iconButtons[i].remove();
-                }
-            }
         };
     }
     update(changedProperties) {
@@ -112,9 +111,11 @@ class Card extends CardComponentMixin(FooterMixin(Component)) {
       ${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>
     `;

package/dist/components/card/card.styles.js

@@ -2,25 +2,31 @@ import { css } from 'lit';
 import { hostFitContentStyles } from '../../utils/styles';
 const styles = css `
   :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;
@@ -28,12 +34,19 @@ const styles = css `
   }
 
   :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;
@@ -45,6 +58,7 @@ const styles = css `
 
   :host::part(body) {
     width: 100%;
+    height: inherit;
     padding: 1.5rem;
     display: flex;
     flex-direction: column;
@@ -81,6 +95,11 @@ const styles = css `
     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']) {

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

@@ -12,10 +12,6 @@ declare const CardButton_base: import("../../utils/mixins/index.types").Construc
  * @dependency mdc-icon
  * @dependency mdc-text
  *
- * @slot before-body - This slot is for passing the content before the body
- * @slot body - This slot is for passing the text content for the card
- * @slot after-body - This slot is for passing the content after the body
- *
  * @event click - (React: onClick) Event that gets dispatched when the card is clicked.
  * @event keydown - (React: onKeyDown) This event is dispatched when a key is pressed down on the card.
  * It fires the click event when enter key is used.
@@ -23,6 +19,24 @@ declare const CardButton_base: import("../../utils/mixins/index.types").Construc
  * It fires the click event when space key is used.
  * @event focus - (React: onFocus) Event that gets dispatched when the card receives focus.
  *
+ * @slot before-body - This slot is for passing the content before the body
+ * @slot body - This slot is for passing the text content for the card
+ * @slot after-body - This slot is for passing the content after the body
+ * @slot footer-link - This slot is for passing `mdc-link` component within the footer section.
+ * @slot footer-button-primary - This slot is for passing primary variant of `mdc-button` component within the footer section.
+ *
+ * @csspart header - The header part of the card
+ * @csspart icon - The icon part of the card header
+ * @csspart body - The body part of the card
+ * @csspart image - The image part of the card
+ * @csspart footer - The footer part of the card
+ * @csspart footer-link - The link part of the card footer
+ * @csspart footer-button-primary - The primary button part of the card footer
+ * @csspart footer-button-secondary - The secondary button part of the card footer
+ * @csspart icon-button - The icon button part of the card header
+ * @csspart text - The text part of the card
+ *
+ * @cssproperty --mdc-card-width - The width of the card
  */
 declare class CardButton extends CardButton_base {
     connectedCallback(): void;

package/dist/components/cardbutton/cardbutton.component.js

@@ -14,10 +14,6 @@ import styles from './cardbutton.styles';
  * @dependency mdc-icon
  * @dependency mdc-text
  *
- * @slot before-body - This slot is for passing the content before the body
- * @slot body - This slot is for passing the text content for the card
- * @slot after-body - This slot is for passing the content after the body
- *
  * @event click - (React: onClick) Event that gets dispatched when the card is clicked.
  * @event keydown - (React: onKeyDown) This event is dispatched when a key is pressed down on the card.
  * It fires the click event when enter key is used.
@@ -25,6 +21,24 @@ import styles from './cardbutton.styles';
  * It fires the click event when space key is used.
  * @event focus - (React: onFocus) Event that gets dispatched when the card receives focus.
  *
+ * @slot before-body - This slot is for passing the content before the body
+ * @slot body - This slot is for passing the text content for the card
+ * @slot after-body - This slot is for passing the content after the body
+ * @slot footer-link - This slot is for passing `mdc-link` component within the footer section.
+ * @slot footer-button-primary - This slot is for passing primary variant of `mdc-button` component within the footer section.
+ *
+ * @csspart header - The header part of the card
+ * @csspart icon - The icon part of the card header
+ * @csspart body - The body part of the card
+ * @csspart image - The image part of the card
+ * @csspart footer - The footer part of the card
+ * @csspart footer-link - The link part of the card footer
+ * @csspart footer-button-primary - The primary button part of the card footer
+ * @csspart footer-button-secondary - The secondary button part of the card footer
+ * @csspart icon-button - The icon button part of the card header
+ * @csspart text - The text part of the card
+ *
+ * @cssproperty --mdc-card-width - The width of the card
  */
 class CardButton extends CardComponentMixin(Buttonsimple) {
     connectedCallback() {

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

@@ -22,6 +22,24 @@ declare const CardCheckbox_base: import("../../utils/mixins/index.types").Constr
  * @slot before-body - This slot is for passing the content before the body
  * @slot body - This slot is for passing the text content for the card
  * @slot after-body - This slot is for passing the content after the body
+ * @slot footer-link - This slot is for passing `mdc-link` component within the footer section.
+ * @slot footer-button-primary - This slot is for passing primary variant of `mdc-button` component within the footer section.
+ *
+ * @csspart header - The header part of the card
+ * @csspart icon - The icon part of the card header
+ * @csspart body - The body part of the card
+ * @csspart image - The image part of the card
+ * @csspart footer - The footer part of the card
+ * @csspart footer-link - The link part of the card footer
+ * @csspart footer-button-primary - The primary button part of the card footer
+ * @csspart footer-button-secondary - The secondary button part of the card footer
+ * @csspart icon-button - The icon button part of the card header
+ * @csspart text - The text part of the card
+ * @csspart check - The check part of the card
+ * @csspart check-icon - The check icon part of the card
+ * @csspart check-icon-button - The check icon button part of the card
+ *
+ * @cssproperty --mdc-card-width - The width of the card
  *
  * @event click - (React: onClick) Event that gets dispatched when the card is clicked. It toggles the checked state.
  * @event keydown - (React: onKeyDown) This event is dispatched when a key is pressed down on the card.

package/dist/components/cardcheckbox/cardcheckbox.component.js

@@ -36,6 +36,24 @@ import styles from './cardcheckbox.styles';
  * @slot before-body - This slot is for passing the content before the body
  * @slot body - This slot is for passing the text content for the card
  * @slot after-body - This slot is for passing the content after the body
+ * @slot footer-link - This slot is for passing `mdc-link` component within the footer section.
+ * @slot footer-button-primary - This slot is for passing primary variant of `mdc-button` component within the footer section.
+ *
+ * @csspart header - The header part of the card
+ * @csspart icon - The icon part of the card header
+ * @csspart body - The body part of the card
+ * @csspart image - The image part of the card
+ * @csspart footer - The footer part of the card
+ * @csspart footer-link - The link part of the card footer
+ * @csspart footer-button-primary - The primary button part of the card footer
+ * @csspart footer-button-secondary - The secondary button part of the card footer
+ * @csspart icon-button - The icon button part of the card header
+ * @csspart text - The text part of the card
+ * @csspart check - The check part of the card
+ * @csspart check-icon - The check icon part of the card
+ * @csspart check-icon-button - The check icon button part of the card
+ *
+ * @cssproperty --mdc-card-width - The width of the card
  *
  * @event click - (React: onClick) Event that gets dispatched when the card is clicked. It toggles the checked state.
  * @event keydown - (React: onKeyDown) This event is dispatched when a key is pressed down on the card.

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

@@ -21,6 +21,24 @@ declare const CardRadio_base: import("../../utils/mixins/index.types").Construct
  * @slot before-body - This slot is for passing the content before the body
  * @slot body - This slot is for passing the text content for the card
  * @slot after-body - This slot is for passing the content after the body
+ * @slot footer-link - This slot is for passing `mdc-link` component within the footer section.
+ * @slot footer-button-primary - This slot is for passing primary variant of `mdc-button` component within the footer section.
+ *
+ * @csspart header - The header part of the card
+ * @csspart icon - The icon part of the card header
+ * @csspart body - The body part of the card
+ * @csspart image - The image part of the card
+ * @csspart footer - The footer part of the card
+ * @csspart footer-link - The link part of the card footer
+ * @csspart footer-button-primary - The primary button part of the card footer
+ * @csspart footer-button-secondary - The secondary button part of the card footer
+ * @csspart icon-button - The icon button part of the card header
+ * @csspart text - The text part of the card
+ * @csspart check - The check part of the card
+ * @csspart check-icon - The check icon part of the card
+ * @csspart check-icon-button - The check icon button part of the card
+ *
+ * @cssproperty --mdc-card-width - The width of the card
  *
  * @event click - (React: onClick) Event that gets dispatched when the card is clicked. It toggles the checked state.
  * @event keydown - (React: onKeyDown) This event is dispatched when a key is pressed down on the card.

package/dist/components/cardradio/cardradio.component.js

@@ -36,6 +36,24 @@ import styles from './cardradio.styles';
  * @slot before-body - This slot is for passing the content before the body
  * @slot body - This slot is for passing the text content for the card
  * @slot after-body - This slot is for passing the content after the body
+ * @slot footer-link - This slot is for passing `mdc-link` component within the footer section.
+ * @slot footer-button-primary - This slot is for passing primary variant of `mdc-button` component within the footer section.
+ *
+ * @csspart header - The header part of the card
+ * @csspart icon - The icon part of the card header
+ * @csspart body - The body part of the card
+ * @csspart image - The image part of the card
+ * @csspart footer - The footer part of the card
+ * @csspart footer-link - The link part of the card footer
+ * @csspart footer-button-primary - The primary button part of the card footer
+ * @csspart footer-button-secondary - The secondary button part of the card footer
+ * @csspart icon-button - The icon button part of the card header
+ * @csspart text - The text part of the card
+ * @csspart check - The check part of the card
+ * @csspart check-icon - The check icon part of the card
+ * @csspart check-icon-button - The check icon button part of the card
+ *
+ * @cssproperty --mdc-card-width - The width of the card
  *
  * @event click - (React: onClick) Event that gets dispatched when the card is clicked. It toggles the checked state.
  * @event keydown - (React: onKeyDown) This event is dispatched when a key is pressed down on the card.