@momentum-design/components 0.98.0 → 0.99.0

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,14 +95,19 @@ 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']) {
     margin-bottom: 0.5rem;
   }
 
-  :host::part(text) {
-    margin: unset;
+  mdc-text::part(text) {
+    margin: 0;
   }
 `;
 export default [hostFitContentStyles, styles];

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.

package/dist/components/toast/index.d.ts

@@ -0,0 +1,11 @@
+import Toast from './toast.component';
+import '../icon';
+import '../text';
+import '../button';
+import '../linkbutton';
+declare global {
+    interface HTMLElementTagNameMap {
+        ['mdc-toast']: Toast;
+    }
+}
+export default Toast;

package/dist/components/toast/index.js

@@ -0,0 +1,8 @@
+import Toast from './toast.component';
+import { TAG_NAME } from './toast.constants';
+import '../icon';
+import '../text';
+import '../button';
+import '../linkbutton';
+Toast.register(TAG_NAME);
+export default Toast;

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

@@ -0,0 +1,101 @@
+import type { CSSResult, PropertyValues } from 'lit';
+import { nothing } from 'lit';
+import { Component } from '../../models';
+import type { TagName } from '../text/text.types';
+import type { ToastVariant } from './toast.types';
+declare const Toast_base: import("../../utils/mixins/index.types").Constructor<import("../../utils/mixins/FooterMixin").FooterMixinInterface> & typeof Component;
+/**
+ * `mdc-toast` is a lightweight, non-blocking alert used to inform users about application processes.
+ * It supports success, warning, error, and custom messages, and is designed to be controlled externally.
+ *
+ * **Note**: When using `slot="toast-body-normal"` and `slot="toast-body-detailed"`, it's strongly recommended to wrap the content with `<mdc-text tagname="span">`.
+ * If not used, ensure your custom content is styled appropriately to match the design and alignment expectations of the toast component.
+ *
+ * @dependency mdc-icon
+ * @dependency mdc-text
+ * @dependency mdc-button
+ * @dependency mdc-linkbutton
+ *
+ * @slot content-prefix - Slot for custom content before the icon (only for custom variant).
+ * @slot toast-body-normal - Slot for the main body content of the toast.
+ * @slot toast-body-detailed - Slot for additional detailed content, shown when expanded.
+ * @slot footer - Slot for custom footer content. Prefer using footer-button-primary and footer-button-secondary slots.
+ * @slot footer-button-primary - Slot for passing the primary variant of `mdc-button` in the footer.
+ * @slot footer-button-secondary - Slot for passing the secondary variant of `mdc-button` in the footer.
+ *
+ * @tagname mdc-toast
+ *
+ * @event close - (React: onClose) Dispatched when the Close Button is clicked using mouse or keyboard.
+ *
+ * @csspart content-container - The container for the toast's main content, including icon, text, and close button.
+ * @csspart toast-prefix-icon - The icon shown at the start of the toast, styled by variant.
+ * @csspart toast-content - The container for the header and body content of the toast.
+ * @csspart toast-header - The header text of the toast.
+ * @csspart footer - The container for the toast's footer, including toggle and action buttons.
+ * @csspart footer-button-toggle - The toggle button for showing/hiding detailed content.
+ * @csspart toast-close-btn - The close button for the toast.
+ *
+ * @cssproperty --mdc-toast-background-color - Background color of the toast.
+ * @cssproperty --mdc-toast-border-color - Border color of the toast.
+ * @cssproperty --mdc-toast-header-text-color - Color of the header text in the toast.
+ * @cssproperty --mdc-toast-icon-color - Color of the icon in the toast.
+ * @cssproperty --mdc-toast-elevation-3 - Elevation effect applied to the toast.
+ * @cssproperty --mdc-toast-width - Width of the toast.
+ * @cssproperty --mdc-toast-padding - Padding inside the toast.
+ */
+declare class Toast extends Toast_base {
+    /**
+     * Type of toast
+     * - Can be `custom`, `success`, `warning` or `error`.
+     * @default 'custom'
+     */
+    variant: ToastVariant;
+    /**
+     * Defines aria-label attribute for close button accessibility
+     */
+    closeButtonAriaLabel?: string;
+    /**
+     * Defines a string value to display as the title of the toast
+     */
+    headerText?: string;
+    /**
+     * The html tag to be used for the header text
+     * @default 'h2'
+     */
+    headerTagName: TagName;
+    /**
+     * Defines aria-label attribute when header is not used
+     */
+    ariaLabel: string | null;
+    /**
+     * Defines the text shown on the linkbutton when detailed content is hidden.
+     */
+    showMoreText?: string;
+    /**
+     * Defines the text shown on the linkbutton when detailed content is visible.
+     */
+    showLessText?: string;
+    private isDetailVisible;
+    private hasDetailedSlot;
+    private detailedElements;
+    private hasFooterButtons;
+    /**
+     * Fired when Close Button is clicked using mouse or keyboard.
+     * This method dispatches the close event.
+     * It is used to notify that the toast should be closed.
+     */
+    private closeToast;
+    private toggleDetailVisibility;
+    private updateDetailedSlotPresence;
+    private updateFooterButtonsPresence;
+    protected firstUpdated(changedProperties: PropertyValues): void;
+    protected renderIcon(iconName: string): import("lit-html").TemplateResult<1> | typeof nothing;
+    private shouldRenderToggleButton;
+    private renderToggleDetailButton;
+    protected renderHeader(): import("lit-html").TemplateResult<1> | typeof nothing;
+    protected handleFooterSlot(tagname: string, variant?: string | undefined): void;
+    protected renderFooter(): import("lit-html").TemplateResult<1>;
+    render(): import("lit-html").TemplateResult<1>;
+    static styles: Array<CSSResult>;
+}
+export default Toast;