@momentum-design/components 0.84.3 → 0.84.5

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

@@ -1,6 +1,6 @@
 import { CSSResult } from 'lit';
-import type { VariantType } from './alertchip.types';
 import Buttonsimple from '../buttonsimple/buttonsimple.component';
+import type { VariantType } from './alertchip.types';
 /**
  * mdc-alertchip component is an interactive chip that consumers can use to represent an alert.
  *

package/dist/components/alertchip/alertchip.component.js

@@ -9,11 +9,11 @@ var __metadata = (this && this.__metadata) || function (k, v) {
 };
 import { html } from 'lit';
 import { property } from 'lit/decorators.js';
-import styles from './alertchip.styles';
 import { Component } from '../../models';
+import Buttonsimple from '../buttonsimple/buttonsimple.component';
+import styles from './alertchip.styles';
 import { DEFAULTS } from './alertchip.constants';
 import { getAlertIcon } from './alertchip.utils';
-import Buttonsimple from '../buttonsimple/buttonsimple.component';
 /**
  * mdc-alertchip component is an interactive chip that consumers can use to represent an alert.
  *

package/dist/components/alertchip/alertchip.styles.js

@@ -9,7 +9,7 @@ const styles = css `
     border: 1px solid;
     cursor: pointer;
     white-space: nowrap;
-    
+
     --mdc-chip-color: var(--mds-color-theme-text-primary-normal);
     --mdc-chip-border-color: var(--mds-color-theme-outline-button-normal);
     --mdc-chip-background-color: var(--mds-color-theme-background-alert-default-normal);
@@ -19,88 +19,87 @@ const styles = css `
     background: var(--mdc-chip-background-color);
   }
 
-  :host::part(label){
+  :host::part(label) {
     color: var(--mdc-chip-color);
   }
 
-  :host::part(icon){
+  :host::part(icon) {
     color: var(--mdc-chip-icon-color);
   }
-  
 
-  :host([variant="neutral"]:hover){
+  :host([variant='neutral']:hover) {
     --mdc-chip-background-color: var(--mds-color-theme-background-alert-default-hover);
   }
 
-  :host([variant="neutral"]:active){
+  :host([variant='neutral']:active) {
     --mdc-chip-background-color: var(--mds-color-theme-background-alert-default-active);
   }
 
-  :host([variant="error"])::part(icon){
+  :host([variant='error'])::part(icon) {
     --mdc-chip-icon-color: var(--mds-color-theme-text-error-normal);
   }
-  
-  :host([variant="error"]){
+
+  :host([variant='error']) {
     --mdc-chip-border-color: var(--mds-color-theme-outline-cancel-normal);
     --mdc-chip-background-color: var(--mds-color-theme-background-alert-error-normal);
   }
 
-  :host([variant="error"]:hover){
+  :host([variant='error']:hover) {
     --mdc-chip-background-color: var(--mds-color-theme-background-alert-error-hover);
   }
 
-  :host([variant="error"]:active){
+  :host([variant='error']:active) {
     --mdc-chip-background-color: var(--mds-color-theme-background-alert-error-active);
   }
 
-  :host([variant="warning"])::part(icon){
+  :host([variant='warning'])::part(icon) {
     --mdc-chip-icon-color: var(--mds-color-theme-text-warning-normal);
   }
 
-  :host([variant="warning"]){
+  :host([variant='warning']) {
     --mdc-chip-border-color: var(--mds-color-theme-outline-warning-normal);
     --mdc-chip-background-color: var(--mds-color-theme-background-alert-warning-normal);
   }
 
-  :host([variant="warning"]:hover){
+  :host([variant='warning']:hover) {
     --mdc-chip-background-color: var(--mds-color-theme-background-alert-warning-hover);
   }
 
-  :host([variant="warning"]:active){
+  :host([variant='warning']:active) {
     --mdc-chip-background-color: var(--mds-color-theme-background-alert-warning-active);
   }
 
-  :host([variant="success"])::part(icon){
+  :host([variant='success'])::part(icon) {
     --mdc-chip-icon-color: var(--mds-color-theme-text-success-normal);
   }
 
-  :host([variant="success"]){
+  :host([variant='success']) {
     --mdc-chip-border-color: var(--mds-color-theme-outline-join-normal);
     --mdc-chip-background-color: var(--mds-color-theme-background-alert-success-normal);
   }
 
-  :host([variant="success"]:hover){
+  :host([variant='success']:hover) {
     --mdc-chip-background-color: var(--mds-color-theme-background-alert-success-hover);
   }
 
-  :host([variant="success"]:active){
+  :host([variant='success']:active) {
     --mdc-chip-background-color: var(--mds-color-theme-background-alert-success-active);
   }
 
-  :host([variant="informational"])::part(icon){
+  :host([variant='informational'])::part(icon) {
     --mdc-chip-icon-color: var(--mds-color-theme-text-accent-normal);
   }
 
-  :host([variant="informational"]){
+  :host([variant='informational']) {
     --mdc-chip-border-color: var(--mds-color-theme-outline-theme-normal);
     --mdc-chip-background-color: var(--mds-color-theme-background-alert-theme-normal);
   }
 
-  :host([variant="informational"]:hover){
+  :host([variant='informational']:hover) {
     --mdc-chip-background-color: var(--mds-color-theme-background-alert-theme-hover);
   }
 
-  :host([variant="informational"]:active){
+  :host([variant='informational']:active) {
     --mdc-chip-background-color: var(--mds-color-theme-background-alert-theme-active);
   }
 `;

package/dist/components/alertchip/alertchip.types.d.ts

@@ -1,6 +1,6 @@
 import type { ValueOf } from '../../utils/types';
-import { VARIANTS } from './alertchip.constants';
 import type { IconNames } from '../icon/icon.types';
+import { VARIANTS } from './alertchip.constants';
 type VariantType = ValueOf<typeof VARIANTS>;
 type IconListType = Extract<IconNames, 'error-legacy-badge-filled' | 'warning-badge-filled' | 'check-circle-badge-filled' | 'dnd-presence-badge-filled' | 'info-badge-filled'>;
 export type { VariantType, IconListType };

package/dist/components/animation/animation.component.js

@@ -12,8 +12,8 @@ import { property } from 'lit/decorators.js';
 import { createRef, ref } from 'lit/directives/ref.js';
 import lottie from 'lottie-web/build/player/lottie_light';
 import animationManifest from '@momentum-design/animations/dist/manifest';
-import styles from './animation.styles';
 import { Component } from '../../models';
+import styles from './animation.styles';
 import { DEFAULTS } from './animation.constants';
 /**
  * The `mdc-animation` component is a wrapper around the Lottie animation library.

package/dist/components/animation/animation.styles.js

@@ -1,8 +1,11 @@
 import { css } from 'lit';
 import { hostFitContentStyles } from '../../utils/styles';
-const styles = [hostFitContentStyles, css `
-  :host svg{
-    display: block;
-  }
-`];
+const styles = [
+    hostFitContentStyles,
+    css `
+    :host svg {
+      display: block;
+    }
+  `,
+];
 export default styles;

package/dist/components/appheader/appheader.component.js

@@ -1,6 +1,6 @@
 import { html } from 'lit';
-import styles from './appheader.styles';
 import { Component } from '../../models';
+import styles from './appheader.styles';
 /**
  * The `mdc-appheader` component provides a structured and accessible app header layout.
  * It consists of three primary sections: leading, center, and trailing.
@@ -26,18 +26,17 @@ class Appheader extends Component {
      * Uses `slots` for flexibility, allowing consumers to insert custom content.
      */
     render() {
-        return html `
-      <header part="container">
-        <div part="leading-section">
-          <slot name="leading"></slot>
-        </div>
-        <div part="center-section">
-          <slot name="center"></slot>
-        </div>
-        <div part="trailing-section">
-          <slot name="trailing"></slot>
-        </div>
-      </header>`;
+        return html ` <header part="container">
+      <div part="leading-section">
+        <slot name="leading"></slot>
+      </div>
+      <div part="center-section">
+        <slot name="center"></slot>
+      </div>
+      <div part="trailing-section">
+        <slot name="trailing"></slot>
+      </div>
+    </header>`;
     }
 }
 Appheader.styles = [...Component.styles, ...styles];

package/dist/components/appheader/appheader.styles.js

@@ -22,7 +22,6 @@ const styles = css `
 
   :host::part(leading-section) {
     justify-content: flex-start;
-    
   }
 
   :host::part(center-section) {

package/dist/components/avatar/avatar.component.js

@@ -132,11 +132,7 @@ class Avatar extends AvatarComponentMixin(IconNameMixin(Component)) {
     iconTemplate() {
         const name = this.iconName || DEFAULTS.ICON_NAME;
         return html `
-      <mdc-icon
-        name="${ifDefined(name)}"
-        length-unit="rem"
-        size="${getAvatarIconSize(this.size)}"
-      ></mdc-icon>
+      <mdc-icon name="${ifDefined(name)}" length-unit="rem" size="${getAvatarIconSize(this.size)}"></mdc-icon>
     `;
     }
     /**
@@ -148,14 +144,7 @@ class Avatar extends AvatarComponentMixin(IconNameMixin(Component)) {
      * @returns The template result containing the avatar text.
      */
     textTemplate(content) {
-        return html `
-      <mdc-text
-        type="${getAvatarTextFontSize(this.size)}"
-        tagname="span"
-      >
-        ${content}
-      </mdc-text>
-    `;
+        return html ` <mdc-text type="${getAvatarTextFontSize(this.size)}" tagname="span"> ${content} </mdc-text> `;
     }
     /**
      * @internal
@@ -298,9 +287,7 @@ class Avatar extends AvatarComponentMixin(IconNameMixin(Component)) {
         const type = this.getTypeBasedOnInputs();
         return html `
       <div part="content" aria-hidden="true">
-        ${this.getPhotoPlaceHolderContent(type)}
-        ${this.getTemplateBasedOnType(type)}
-        ${this.getLoadingContent()}
+        ${this.getPhotoPlaceHolderContent(type)} ${this.getTemplateBasedOnType(type)} ${this.getLoadingContent()}
         ${this.getPresenceTemplateBasedOnType(type)}
       </div>
     `;

package/dist/components/avatar/avatar.constants.d.ts

@@ -20,4 +20,4 @@ declare const DEFAULTS: {
     readonly SIZE: 32;
     readonly ICON_NAME: "user-regular";
 };
-export { TAG_NAME, DEFAULTS, AVATAR_TYPE, MAX_COUNTER, AVATAR_SIZE, };
+export { TAG_NAME, DEFAULTS, AVATAR_TYPE, MAX_COUNTER, AVATAR_SIZE };

package/dist/components/avatar/avatar.constants.js

@@ -22,4 +22,4 @@ const DEFAULTS = {
     SIZE: AVATAR_SIZE[32],
     ICON_NAME,
 };
-export { TAG_NAME, DEFAULTS, AVATAR_TYPE, MAX_COUNTER, AVATAR_SIZE, };
+export { TAG_NAME, DEFAULTS, AVATAR_TYPE, MAX_COUNTER, AVATAR_SIZE };

package/dist/components/avatar/avatar.styles.js

@@ -1,127 +1,134 @@
 import { css } from 'lit';
 import { hostFitContentStyles } from '../../utils/styles';
-const styles = [hostFitContentStyles, css `
-  :host {
-    --mdc-avatar-default-background-color: var(--mds-color-theme-avatar-default);
-    --mdc-avatar-default-foreground-color: var(--mds-color-theme-common-text-primary-normal);
-    --mdc-avatar-loading-indicator-background-color: var(--mds-color-theme-common-text-primary-disabled);
-    --mdc-avatar-loading-indicator-foreground-color: var(--mdc-avatar-default-foreground-color);
-    --mdc-avatar-loading-overlay-background-color: var(--mds-color-theme-common-overlays-secondary-normal);
-  }
-  :host([size="124"])::part(content) {
-    width: 7.75rem;
-    height: 7.75rem;
-  }
-  :host([size="88"])::part(content) {
-    width: 5.5rem;
-    height: 5.5rem;
-  }
-  :host([size="72"])::part(content) {
-    width: 4.5rem;
-    height: 4.5rem;
-  }
-  :host([size="64"])::part(content) {
-    width: 4rem;
-    height: 4rem;
-  }
-  :host([size="48"])::part(content) {
-    width: 3rem;
-    height: 3rem;
-  }
-  :host([size="32"])::part(content) {
-    width: 2rem;
-    height: 2rem;
-  }
-  :host([size="24"])::part(content) {
-    width: 1.5rem;
-    height: 1.5rem;
-  }
-  :host([size="124"])::part(loader) {
-    transform: scale(1.5);
-  }
-  :host([size="88"])::part(loader) {
-    transform: scale(1.2);
-  }
-  :host([size="72"])::part(loader),
-  :host([size="64"])::part(loader) {
-    transform: scale(0.8);
-  }
-  :host([size="48"])::part(loader) {
-    transform: scale(0.6);
-  }
-  :host([size="32"])::part(loader) {
-    transform: scale(0.4);
-  }
-  :host([size="24"])::part(loader) {
-    transform: scale(0.3);
-  }
-  :host::part(content) {
-    width: 2rem;
-    height: 2rem;
-    background-color: var(--mdc-avatar-default-background-color);
-    color: var(--mdc-avatar-default-foreground-color);
-    border-radius: 100vh;
-    position: relative;
-    display: grid;
-    place-items: center;
-  }
-  :host::part(photo) {
-    border-radius: 100vh;
-    height: 100%;
-    width: 100%;
-    object-fit: cover;
-    overflow: hidden;
-  }
-  :host::part(presence) {
-    position: absolute;
-    bottom: 0;
-    right: 0;
-  }
-  :host::part(loading-wrapper) {
-    position: absolute;
-    border-radius: 100vh;
-    width: 100%;
-    height: 100%;
-    background-color: var(--mdc-avatar-loading-overlay-background-color);
-    display: grid;
-    place-items: center;
-  }
-  :host::part(loader) {
-    position: absolute;
-    width: 1rem;
-    transform: scale(0.4);
-    aspect-ratio: 1;
-    border-radius: 100vh;
-    animation: loading-key 1s infinite linear alternate;
-  }
-  @keyframes loading-key {
-    0%  {
-      box-shadow: 1.25rem 0 var(--mdc-avatar-loading-indicator-foreground-color),
-        -1.25rem 0 var(--mdc-avatar-loading-indicator-background-color);
-      background: var(--mdc-avatar-loading-indicator-foreground-color);
-    }
-    33% {
-      box-shadow: 1.25rem 0 var(--mdc-avatar-loading-indicator-foreground-color),
-        -1.25rem 0 var(--mdc-avatar-loading-indicator-background-color);
-      background: var(--mdc-avatar-loading-indicator-background-color);
-    }
-    66% {
-      box-shadow: 1.25rem 0 var(--mdc-avatar-loading-indicator-background-color),
-        -1.25rem 0 var(--mdc-avatar-loading-indicator-foreground-color);
-      background: var(--mdc-avatar-loading-indicator-background-color);
-    }
-    100%{
-      box-shadow: 1.25rem 0 var(--mdc-avatar-loading-indicator-background-color),
-        -1.25rem 0 var(--mdc-avatar-loading-indicator-foreground-color);
-      background: var(--mdc-avatar-loading-indicator-foreground-color);
-    }
-  }
-
-  /* High Contrast Mode */
-  @media (forced-colors: active) {
+const styles = [
+    hostFitContentStyles,
+    css `
+    :host {
+      --mdc-avatar-default-background-color: var(--mds-color-theme-avatar-default);
+      --mdc-avatar-default-foreground-color: var(--mds-color-theme-common-text-primary-normal);
+      --mdc-avatar-loading-indicator-background-color: var(--mds-color-theme-common-text-primary-disabled);
+      --mdc-avatar-loading-indicator-foreground-color: var(--mdc-avatar-default-foreground-color);
+      --mdc-avatar-loading-overlay-background-color: var(--mds-color-theme-common-overlays-secondary-normal);
+    }
+    :host([size='124'])::part(content) {
+      width: 7.75rem;
+      height: 7.75rem;
+    }
+    :host([size='88'])::part(content) {
+      width: 5.5rem;
+      height: 5.5rem;
+    }
+    :host([size='72'])::part(content) {
+      width: 4.5rem;
+      height: 4.5rem;
+    }
+    :host([size='64'])::part(content) {
+      width: 4rem;
+      height: 4rem;
+    }
+    :host([size='48'])::part(content) {
+      width: 3rem;
+      height: 3rem;
+    }
+    :host([size='32'])::part(content) {
+      width: 2rem;
+      height: 2rem;
+    }
+    :host([size='24'])::part(content) {
+      width: 1.5rem;
+      height: 1.5rem;
+    }
+    :host([size='124'])::part(loader) {
+      transform: scale(1.5);
+    }
+    :host([size='88'])::part(loader) {
+      transform: scale(1.2);
+    }
+    :host([size='72'])::part(loader),
+    :host([size='64'])::part(loader) {
+      transform: scale(0.8);
+    }
+    :host([size='48'])::part(loader) {
+      transform: scale(0.6);
+    }
+    :host([size='32'])::part(loader) {
+      transform: scale(0.4);
+    }
+    :host([size='24'])::part(loader) {
+      transform: scale(0.3);
+    }
     :host::part(content) {
-      outline: 0.125rem solid;
+      width: 2rem;
+      height: 2rem;
+      background-color: var(--mdc-avatar-default-background-color);
+      color: var(--mdc-avatar-default-foreground-color);
+      border-radius: 100vh;
+      position: relative;
+      display: grid;
+      place-items: center;
+    }
+    :host::part(photo) {
+      border-radius: 100vh;
+      height: 100%;
+      width: 100%;
+      object-fit: cover;
+      overflow: hidden;
+    }
+    :host::part(presence) {
+      position: absolute;
+      bottom: 0;
+      right: 0;
+    }
+    :host::part(loading-wrapper) {
+      position: absolute;
+      border-radius: 100vh;
+      width: 100%;
+      height: 100%;
+      background-color: var(--mdc-avatar-loading-overlay-background-color);
+      display: grid;
+      place-items: center;
+    }
+    :host::part(loader) {
+      position: absolute;
+      width: 1rem;
+      transform: scale(0.4);
+      aspect-ratio: 1;
+      border-radius: 100vh;
+      animation: loading-key 1s infinite linear alternate;
+    }
+    @keyframes loading-key {
+      0% {
+        box-shadow:
+          1.25rem 0 var(--mdc-avatar-loading-indicator-foreground-color),
+          -1.25rem 0 var(--mdc-avatar-loading-indicator-background-color);
+        background: var(--mdc-avatar-loading-indicator-foreground-color);
+      }
+      33% {
+        box-shadow:
+          1.25rem 0 var(--mdc-avatar-loading-indicator-foreground-color),
+          -1.25rem 0 var(--mdc-avatar-loading-indicator-background-color);
+        background: var(--mdc-avatar-loading-indicator-background-color);
+      }
+      66% {
+        box-shadow:
+          1.25rem 0 var(--mdc-avatar-loading-indicator-background-color),
+          -1.25rem 0 var(--mdc-avatar-loading-indicator-foreground-color);
+        background: var(--mdc-avatar-loading-indicator-background-color);
+      }
+      100% {
+        box-shadow:
+          1.25rem 0 var(--mdc-avatar-loading-indicator-background-color),
+          -1.25rem 0 var(--mdc-avatar-loading-indicator-foreground-color);
+        background: var(--mdc-avatar-loading-indicator-foreground-color);
+      }
+    }
+
+    /* High Contrast Mode */
+    @media (forced-colors: active) {
+      :host::part(content) {
+        outline: 0.125rem solid;
+      }
     }
-  }
-`];
+  `,
+];
 export default styles;

package/dist/components/avatar/avatar.types.d.ts

@@ -1,5 +1,5 @@
-import { AVATAR_TYPE, AVATAR_SIZE } from './avatar.constants';
 import type { ValueOf } from '../../utils/types';
+import { AVATAR_TYPE, AVATAR_SIZE } from './avatar.constants';
 type AvatarType = ValueOf<typeof AVATAR_TYPE>;
 type AvatarSize = ValueOf<typeof AVATAR_SIZE>;
 export type { AvatarType, AvatarSize };

package/dist/components/avatar/avatar.utils.d.ts

@@ -4,4 +4,4 @@ import type { AvatarSize } from './avatar.types';
 declare const getPresenceSize: (size: AvatarSize) => PresenceSize;
 declare const getAvatarIconSize: (size: AvatarSize) => number;
 declare const getAvatarTextFontSize: (size: AvatarSize) => TextType;
-export { getAvatarIconSize, getAvatarTextFontSize, getPresenceSize, };
+export { getAvatarIconSize, getAvatarTextFontSize, getPresenceSize };

package/dist/components/avatar/avatar.utils.js

@@ -37,4 +37,4 @@ const getAvatarTextFontSize = (size) => {
     };
     return avatarTextFontSizeMap[size] || FONT_TYPE.BODY_MIDSIZE_MEDIUM; // default size of text font
 };
-export { getAvatarIconSize, getAvatarTextFontSize, getPresenceSize, };
+export { getAvatarIconSize, getAvatarTextFontSize, getPresenceSize };

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

@@ -23,8 +23,8 @@ declare const AvatarButton_base: import("../../utils/mixins/index.types").Constr
  */
 declare class AvatarButton extends AvatarButton_base {
     /**
-   * Aria-label attribute to be set for accessibility
-   */
+     * Aria-label attribute to be set for accessibility
+     */
     ariaLabel: string | null;
     connectedCallback(): void;
     update(changedProperties: PropertyValues): void;

package/dist/components/avatarbutton/avatarbutton.component.js

@@ -40,8 +40,8 @@ class AvatarButton extends AvatarComponentMixin(IconNameMixin(Buttonsimple)) {
     constructor() {
         super(...arguments);
         /**
-       * Aria-label attribute to be set for accessibility
-       */
+         * Aria-label attribute to be set for accessibility
+         */
         this.ariaLabel = null;
     }
     connectedCallback() {

package/dist/components/avatarbutton/avatarbutton.styles.js

@@ -1,33 +1,37 @@
 import { css } from 'lit';
 import { hostFitContentStyles, hostFocusRingStyles } from '../../utils/styles';
-const styles = [hostFitContentStyles, css `
-  :host {
-    --mdc-avatarbutton-overlay-background-color-rest: var(--mds-color-theme-avatar-ghost);
-    --mdc-avatarbutton-overlay-background-color-hover: var(--mds-color-theme-avatar-hover);
-    --mdc-avatarbutton-overlay-background-color-active: var(--mds-color-theme-avatar-pressed);
-    padding: unset;
-    margin: unset;
-    outline: none;
-    border-radius: 0.25rem;
-    position: relative;
-    cursor: pointer;
-  }
-  :host::part(overlay) {
-    position: absolute;
-    border-radius: 100vh;
-    height: 100%;
-    width: 100%;
-    z-index: 1;
-    background-color: var(--mdc-avatarbutton-overlay-background-color-rest);
-  }
-  :host(:not([is-typing]):hover)::part(overlay) {
-    background-color: var(--mdc-avatarbutton-overlay-background-color-hover);
-  }
-  :host(:not([is-typing]):active)::part(overlay) {
-    background-color: var(--mdc-avatarbutton-overlay-background-color-active);
-  }
-  :host::part(presence) {
-    z-index: 2;
-  }
-`, ...hostFocusRingStyles()];
+const styles = [
+    hostFitContentStyles,
+    css `
+    :host {
+      --mdc-avatarbutton-overlay-background-color-rest: var(--mds-color-theme-avatar-ghost);
+      --mdc-avatarbutton-overlay-background-color-hover: var(--mds-color-theme-avatar-hover);
+      --mdc-avatarbutton-overlay-background-color-active: var(--mds-color-theme-avatar-pressed);
+      padding: unset;
+      margin: unset;
+      outline: none;
+      border-radius: 0.25rem;
+      position: relative;
+      cursor: pointer;
+    }
+    :host::part(overlay) {
+      position: absolute;
+      border-radius: 100vh;
+      height: 100%;
+      width: 100%;
+      z-index: 1;
+      background-color: var(--mdc-avatarbutton-overlay-background-color-rest);
+    }
+    :host(:not([is-typing]):hover)::part(overlay) {
+      background-color: var(--mdc-avatarbutton-overlay-background-color-hover);
+    }
+    :host(:not([is-typing]):active)::part(overlay) {
+      background-color: var(--mdc-avatarbutton-overlay-background-color-active);
+    }
+    :host::part(presence) {
+      z-index: 2;
+    }
+  `,
+    ...hostFocusRingStyles(),
+];
 export default styles;