@momentum-design/components 0.84.3 → 0.84.4

package/dist/components/badge/badge.styles.js

@@ -12,15 +12,15 @@ const styles = [
 
       --mdc-badge-success-foreground-color: var(--mds-color-theme-text-success-normal);
       --mdc-badge-success-background-color: var(--mds-color-theme-background-alert-success-normal);
-      
+
       --mdc-badge-warning-foreground-color: var(--mds-color-theme-text-warning-normal);
       --mdc-badge-warning-background-color: var(--mds-color-theme-background-alert-warning-normal);
-      
+
       --mdc-badge-error-foreground-color: var(--mds-color-theme-text-error-normal);
       --mdc-badge-error-background-color: var(--mds-color-theme-background-alert-error-normal);
-      
+
       --mdc-badge-overlay-background-color: var(--mds-color-theme-background-solid-primary-normal);
-      
+
       color: var(--mdc-badge-primary-foreground-color);
     }
     .mdc-badge-overlay {
@@ -67,10 +67,12 @@ const styles = [
 
     /* High Contrast Mode */
     @media (forced-colors: active) {
-    .mdc-badge-dot, .mdc-badge-icon, .mdc-badge-text {
-      outline: 0.125rem solid;
+      .mdc-badge-dot,
+      .mdc-badge-icon,
+      .mdc-badge-text {
+        outline: 0.125rem solid;
+      }
     }
-  }
   `,
 ];
 export default styles;

package/dist/components/brandvisual/brandvisual.component.js

@@ -9,8 +9,8 @@ var __metadata = (this && this.__metadata) || function (k, v) {
 };
 import { html } from 'lit';
 import { property, state } from 'lit/decorators.js';
-import styles from './brandvisual.styles';
 import { Component } from '../../models';
+import styles from './brandvisual.styles';
 import { DEFAULTS } from './brandvisual.constants';
 /**
  * The `mdc-brandvisual` component is responsible for rendering logos dynamically & ensures they are
@@ -41,10 +41,10 @@ class Brandvisual extends Component {
         if (this.name) {
             // dynamic import of the lit template from the momentum brand-visuals package
             return import(`@momentum-design/brand-visuals/dist/logos/ts/${this.name}.ts`)
-                .then((module) => {
+                .then(module => {
                 this.handleBrandVisualLoadedSuccess(module.default());
             })
-                .catch((error) => {
+                .catch(error => {
                 this.handleBrandVisualLoadedFailure(error);
             });
         }
@@ -55,7 +55,7 @@ class Brandvisual extends Component {
         super.updated(changedProperties);
         if (changedProperties.has('name')) {
             // import brandVisual data if name changes:
-            this.getBrandVisualData().catch((err) => {
+            this.getBrandVisualData().catch(err => {
                 if (this.onerror) {
                     this.onerror(err);
                 }

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

@@ -11,7 +11,7 @@ import type { Size } from './bullet.types';
  * @cssproperty --mdc-bullet-size-small - small size value of the bullet
  * @cssproperty --mdc-bullet-size-medium - medium size value of the bullet
  * @cssproperty --mdc-bullet-size-large - large size value of the bullet
-*/
+ */
 declare class Bullet extends Component {
     /**
      * Size of the bullet

package/dist/components/bullet/bullet.component.js

@@ -8,8 +8,8 @@ var __metadata = (this && this.__metadata) || function (k, v) {
     if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
 };
 import { property } from 'lit/decorators.js';
-import styles from './bullet.styles';
 import { Component } from '../../models';
+import styles from './bullet.styles';
 import { SIZE } from './bullet.constants';
 /**
  * Bullet component, which is a visual marker
@@ -21,7 +21,7 @@ import { SIZE } from './bullet.constants';
  * @cssproperty --mdc-bullet-size-small - small size value of the bullet
  * @cssproperty --mdc-bullet-size-medium - medium size value of the bullet
  * @cssproperty --mdc-bullet-size-large - large size value of the bullet
-*/
+ */
 class Bullet extends Component {
     constructor() {
         super(...arguments);

package/dist/components/bullet/bullet.styles.js

@@ -11,13 +11,13 @@ const styles = css `
     aspect-ratio: 1;
     background-color: var(--mdc-bullet-background-color);
   }
-  :host([size="small"]) {
+  :host([size='small']) {
     height: var(--mdc-bullet-size-small);
   }
-  :host([size="medium"]) {
+  :host([size='medium']) {
     height: var(--mdc-bullet-size-medium);
   }
-  :host([size="large"]) {
+  :host([size='large']) {
     height: var(--mdc-bullet-size-large);
   }
 `;

package/dist/components/button/button.component.js

@@ -122,13 +122,19 @@ class Button extends ButtonComponentMixin(Buttonsimple) {
     render() {
         return html `
       ${this.prefixFilledIconName
-            ? html ` <mdc-icon name="${this.prefixFilledIconName}" 
-    part="prefix-icon" length-unit="rem"></mdc-icon>`
+            ? html ` <mdc-icon
+            name="${this.prefixFilledIconName}"
+            part="prefix-icon"
+            length-unit="rem"
+          ></mdc-icon>`
             : ''}
       <slot @slotchange=${this.inferButtonType}></slot>
       ${this.postfixFilledIconName
-            ? html ` <mdc-icon name="${this.postfixFilledIconName}" 
-    part="postfix-icon" length-unit="rem"></mdc-icon>`
+            ? html ` <mdc-icon
+            name="${this.postfixFilledIconName}"
+            part="postfix-icon"
+            length-unit="rem"
+          ></mdc-icon>`
             : ''}
     `;
     }

package/dist/components/button/button.utils.js

@@ -7,6 +7,6 @@
 const getIconNameWithoutStyle = (iconName) => {
     const iconParts = iconName.split('-');
     const variants = ['bold', 'filled', 'regular', 'light'];
-    return iconParts.filter((part) => !variants.includes(part)).join('-');
+    return iconParts.filter(part => !variants.includes(part)).join('-');
 };
 export { getIconNameWithoutStyle };

package/dist/components/buttongroup/buttongroup.component.js

@@ -55,7 +55,7 @@ class ButtonGroup extends Component {
      * @internal
      */
     handleSlotChange() {
-        this.buttons.forEach((button) => {
+        this.buttons.forEach(button => {
             button.setAttribute('size', this.size.toString());
             button.setAttribute('variant', this.variant);
         });

package/dist/components/buttongroup/buttongroup.styles.js

@@ -1,81 +1,81 @@
 import { css } from 'lit';
 import { hostFitContentStyles } from '../../utils/styles';
 const styles = css `
-:host{
-  --mdc-buttongroup-border-radius: 1.25rem;
-  --mdc-buttongroup-border-color: var(--mds-color-theme-outline-button-normal);
-  --mdc-buttongroup-divider-color: var(--mds-color-theme-outline-secondary-normal);
+  :host {
+    --mdc-buttongroup-border-radius: 1.25rem;
+    --mdc-buttongroup-border-color: var(--mds-color-theme-outline-button-normal);
+    --mdc-buttongroup-divider-color: var(--mds-color-theme-outline-secondary-normal);
 
-  border-radius: var(--mdc-buttongroup-border-radius);
-  border: 1px solid var(--mdc-buttongroup-border-color);
-}
+    border-radius: var(--mdc-buttongroup-border-radius);
+    border: 1px solid var(--mdc-buttongroup-border-color);
+  }
 
-:host([variant='primary']){
-  border: none;
-  background-color: var(--mds-color-theme-outline-primary-normal);
-  gap: 1px;
-}
+  :host([variant='primary']) {
+    border: none;
+    background-color: var(--mds-color-theme-outline-primary-normal);
+    gap: 1px;
+  }
 
-::slotted(mdc-button){
-  border-radius: 0;
-  border: none;
-  box-sizing: content-box;
-}
+  ::slotted(mdc-button) {
+    border-radius: 0;
+    border: none;
+    box-sizing: content-box;
+  }
 
-:host([orientation="vertical"]){
-  flex-direction: column;
-}
+  :host([orientation='vertical']) {
+    flex-direction: column;
+  }
 
-:host([orientation="horizontal"][variant="secondary"]:dir(ltr)) ::slotted(mdc-button:not(:last-child)){
-  border-right: 1px solid var(--mdc-buttongroup-divider-color);
-}
-:host([orientation="horizontal"][variant="secondary"]:dir(rtl)) ::slotted(mdc-button:not(:last-child)){
-  border-left: 1px solid var(--mdc-buttongroup-divider-color);
-}
-:host([orientation="vertical"][variant="secondary"]) ::slotted(mdc-button:not(:last-child)){
-  border-bottom: 1px solid var(--mdc-buttongroup-divider-color);
-}
+  :host([orientation='horizontal'][variant='secondary']:dir(ltr)) ::slotted(mdc-button:not(:last-child)) {
+    border-right: 1px solid var(--mdc-buttongroup-divider-color);
+  }
+  :host([orientation='horizontal'][variant='secondary']:dir(rtl)) ::slotted(mdc-button:not(:last-child)) {
+    border-left: 1px solid var(--mdc-buttongroup-divider-color);
+  }
+  :host([orientation='vertical'][variant='secondary']) ::slotted(mdc-button:not(:last-child)) {
+    border-bottom: 1px solid var(--mdc-buttongroup-divider-color);
+  }
 
-:host([orientation="vertical"]) ::slotted(mdc-button:first-child){
-  border-top-left-radius: var(--mdc-buttongroup-border-radius);
-  border-top-right-radius: var(--mdc-buttongroup-border-radius);
-}
-:host([orientation="vertical"]) ::slotted(mdc-button:last-child){
-  border-bottom-left-radius: var(--mdc-buttongroup-border-radius);
-  border-bottom-right-radius: var(--mdc-buttongroup-border-radius);
-}
+  :host([orientation='vertical']) ::slotted(mdc-button:first-child) {
+    border-top-left-radius: var(--mdc-buttongroup-border-radius);
+    border-top-right-radius: var(--mdc-buttongroup-border-radius);
+  }
+  :host([orientation='vertical']) ::slotted(mdc-button:last-child) {
+    border-bottom-left-radius: var(--mdc-buttongroup-border-radius);
+    border-bottom-right-radius: var(--mdc-buttongroup-border-radius);
+  }
 
-:host([orientation="horizontal"]:dir(ltr)) ::slotted(mdc-button:first-child){
-  border-top-left-radius: var(--mdc-buttongroup-border-radius);
-  border-bottom-left-radius: var(--mdc-buttongroup-border-radius);
-}
-:host([orientation="horizontal"]:dir(rtl)) ::slotted(mdc-button:first-child){
-  border-top-right-radius: var(--mdc-buttongroup-border-radius);
-  border-bottom-right-radius: var(--mdc-buttongroup-border-radius);
-}
-:host([orientation="horizontal"]:dir(ltr)) ::slotted(mdc-button:last-child){
-  border-top-right-radius: var(--mdc-buttongroup-border-radius);
-  border-bottom-right-radius: var(--mdc-buttongroup-border-radius);
-}
-:host([orientation="horizontal"]:dir(rtl)) ::slotted(mdc-button:last-child){
-  border-top-left-radius: var(--mdc-buttongroup-border-radius);
-  border-bottom-left-radius: var(--mdc-buttongroup-border-radius);
-}
+  :host([orientation='horizontal']:dir(ltr)) ::slotted(mdc-button:first-child) {
+    border-top-left-radius: var(--mdc-buttongroup-border-radius);
+    border-bottom-left-radius: var(--mdc-buttongroup-border-radius);
+  }
+  :host([orientation='horizontal']:dir(rtl)) ::slotted(mdc-button:first-child) {
+    border-top-right-radius: var(--mdc-buttongroup-border-radius);
+    border-bottom-right-radius: var(--mdc-buttongroup-border-radius);
+  }
+  :host([orientation='horizontal']:dir(ltr)) ::slotted(mdc-button:last-child) {
+    border-top-right-radius: var(--mdc-buttongroup-border-radius);
+    border-bottom-right-radius: var(--mdc-buttongroup-border-radius);
+  }
+  :host([orientation='horizontal']:dir(rtl)) ::slotted(mdc-button:last-child) {
+    border-top-left-radius: var(--mdc-buttongroup-border-radius);
+    border-bottom-left-radius: var(--mdc-buttongroup-border-radius);
+  }
 
-:host([compact][orientation="horizontal"]) ::slotted(mdc-button){
-  height: 1.5rem;
-}
-:host([compact][orientation="horizontal"][size="24"]) ::slotted(mdc-button){
-  width: 1.5rem;
-}
-:host([compact][orientation="horizontal"][size="28"]) ::slotted(mdc-button){
-  width: 1.75rem;
-}
-:host([compact][orientation="horizontal"][size="32"]) ::slotted(mdc-button){
-  width: 2rem;
-}
-:host([compact][orientation="horizontal"][size="40"]) ::slotted(mdc-button){
-  width: 2.5rem;
-}
+  :host([compact][orientation='horizontal']) ::slotted(mdc-button) {
+    height: 1.5rem;
+  }
+  :host([compact][orientation='horizontal'][size='24']) ::slotted(mdc-button) {
+    width: 1.5rem;
+  }
+  :host([compact][orientation='horizontal'][size='28']) ::slotted(mdc-button) {
+    width: 1.75rem;
+  }
+  :host([compact][orientation='horizontal'][size='32']) ::slotted(mdc-button) {
+    width: 2rem;
+  }
+  :host([compact][orientation='horizontal'][size='40']) ::slotted(mdc-button) {
+    width: 2.5rem;
+  }
 `;
 export default [hostFitContentStyles, styles];

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

@@ -26,11 +26,11 @@ declare const ButtonLink_base: import("../../utils/mixins/index.types").Construc
 declare class ButtonLink extends ButtonLink_base {
     /**
      * ButtonLink sizing is based on the buttonlink type.
-      * - **Pill buttonlink**: 40, 32, 28, 24.
-      * - **Icon buttonlink**: 64, 52, 40, 32, 28, 24.
-      * - Tertiary icon buttonlink can also be 20.
-      * @default 32
-      */
+     * - **Pill buttonlink**: 40, 32, 28, 24.
+     * - **Icon buttonlink**: 64, 52, 40, 32, 28, 24.
+     * - Tertiary icon buttonlink can also be 20.
+     * @default 32
+     */
     size: PillButtonSize | IconButtonSize;
     /**
      * Indicates whether the buttonlink is soft disabled.

package/dist/components/buttonlink/buttonlink.component.js

@@ -39,11 +39,11 @@ class ButtonLink extends ButtonComponentMixin(Linksimple) {
         super(...arguments);
         /**
          * ButtonLink sizing is based on the buttonlink type.
-          * - **Pill buttonlink**: 40, 32, 28, 24.
-          * - **Icon buttonlink**: 64, 52, 40, 32, 28, 24.
-          * - Tertiary icon buttonlink can also be 20.
-          * @default 32
-          */
+         * - **Pill buttonlink**: 40, 32, 28, 24.
+         * - **Icon buttonlink**: 64, 52, 40, 32, 28, 24.
+         * - Tertiary icon buttonlink can also be 20.
+         * @default 32
+         */
         this.size = DEFAULTS.SIZE;
     }
     /**
@@ -86,12 +86,12 @@ class ButtonLink extends ButtonComponentMixin(Linksimple) {
     }
     render() {
         return html `
-      ${this.prefixIcon ? html ` <mdc-icon name="${this.prefixIcon}" 
-        part="prefix-icon" length-unit="rem"></mdc-icon>` : ''}
+      ${this.prefixIcon
+            ? html ` <mdc-icon name="${this.prefixIcon}" part="prefix-icon" length-unit="rem"></mdc-icon>`
+            : ''}
       <slot @slotchange=${this.inferButtonType}></slot>
       ${this.postfixIcon
-            ? html ` <mdc-icon name="${this.postfixIcon}" 
-    part="postfix-icon" length-unit="rem"></mdc-icon>`
+            ? html ` <mdc-icon name="${this.postfixIcon}" part="postfix-icon" length-unit="rem"></mdc-icon>`
             : ''}
     `;
     }

package/dist/components/buttonsimple/buttonsimple.component.js

@@ -102,8 +102,8 @@ class Buttonsimple extends AutoFocusMixin(TabIndexMixin(DisabledMixin(Component)
         if (this.ariaStateKey) {
             const ariaStateKeys = this.ariaStateKey.split(',');
             ariaStateKeys
-                .filter((key) => key.trim().startsWith('aria-'))
-                .forEach((key) => {
+                .filter(key => key.trim().startsWith('aria-'))
+                .forEach(key => {
                 if (active === true) {
                     element.setAttribute(key.trim(), 'true');
                 }

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

@@ -23,4 +23,4 @@ declare const DEFAULTS: {
     ROLE: string;
     ARIA_STATE_KEY: string;
 };
-export { TAG_NAME, DEFAULTS, BUTTON_TYPE, BUTTON_SIZES, };
+export { TAG_NAME, DEFAULTS, BUTTON_TYPE, BUTTON_SIZES };

package/dist/components/buttonsimple/buttonsimple.constants.js

@@ -24,4 +24,4 @@ const DEFAULTS = {
     ROLE: 'button',
     ARIA_STATE_KEY: 'aria-pressed',
 };
-export { TAG_NAME, DEFAULTS, BUTTON_TYPE, BUTTON_SIZES, };
+export { TAG_NAME, DEFAULTS, BUTTON_TYPE, BUTTON_SIZES };

package/dist/components/buttonsimple/buttonsimple.styles.js

@@ -1,61 +1,66 @@
 import { css } from 'lit';
 import { hostFitContentStyles, hostFocusRingStyles } from '../../utils/styles';
-const styles = [hostFitContentStyles, css `
-  :host {
-    border: 0.0625rem solid transparent;
-    cursor: pointer;
-    user-select: none;
-    
-    background-color: var(--mds-color-theme-text-primary-normal); 
-    color: var(--mds-color-theme-inverted-text-secondary-normal);
-    font-size: var(--mds-font-apps-body-midsize-regular-font-size);
-    outline: none;
+const styles = [
+    hostFitContentStyles,
+    css `
+    :host {
+      border: 0.0625rem solid transparent;
+      cursor: pointer;
+      user-select: none;
 
-    --mdc-button-height-size-124: 7.75rem;
-    --mdc-button-height-size-88: 5.5rem;
-    --mdc-button-height-size-72: 4.5rem;
-    --mdc-button-height-size-64: 4rem;
-    --mdc-button-height-size-52: 3.25rem;
-    --mdc-button-height-size-40: 2.5rem;
-    --mdc-button-height-size-32: 2rem;
-    --mdc-button-height-size-28: 1.75rem;
-    --mdc-button-height-size-24: 1.5rem;
-    --mdc-button-height-size-20: 1.25rem;
-  }
-  
-  :host([disabled]), :host([soft-disabled]){
-    background-color: var(--mds-color-theme-text-primary-disabled);
-  }
-  :host([size="124"]){
-    height: var(--mdc-button-height-size-124);
-  }
-  :host([size="88"]){
-    height: var(--mdc-button-height-size-88);
-  }
-  :host([size="72"]){
-    height: var(--mdc-button-height-size-72);
-  }
-  :host([size="64"]){
-    height: var(--mdc-button-height-size-64);
-  }
-  :host([size="52"]){
-    height: var(--mdc-button-height-size-52);
-  }
-  :host([size="40"]){
-    height: var(--mdc-button-height-size-40);
-  }
-  :host([size="32"]){
-    height: var(--mdc-button-height-size-32);
-  }
-  :host([size="28"]){
-    height: var(--mdc-button-height-size-28);
-    font-size: var(--mds-font-size-body-midsize);
-  }
-  :host([size="24"]){
-    height: var(--mdc-button-height-size-24);
-  }
-  :host([size="20"]){
-    height: var(--mdc-button-height-size-20);
-  }
-`, ...hostFocusRingStyles()];
+      background-color: var(--mds-color-theme-text-primary-normal);
+      color: var(--mds-color-theme-inverted-text-secondary-normal);
+      font-size: var(--mds-font-apps-body-midsize-regular-font-size);
+      outline: none;
+
+      --mdc-button-height-size-124: 7.75rem;
+      --mdc-button-height-size-88: 5.5rem;
+      --mdc-button-height-size-72: 4.5rem;
+      --mdc-button-height-size-64: 4rem;
+      --mdc-button-height-size-52: 3.25rem;
+      --mdc-button-height-size-40: 2.5rem;
+      --mdc-button-height-size-32: 2rem;
+      --mdc-button-height-size-28: 1.75rem;
+      --mdc-button-height-size-24: 1.5rem;
+      --mdc-button-height-size-20: 1.25rem;
+    }
+
+    :host([disabled]),
+    :host([soft-disabled]) {
+      background-color: var(--mds-color-theme-text-primary-disabled);
+    }
+    :host([size='124']) {
+      height: var(--mdc-button-height-size-124);
+    }
+    :host([size='88']) {
+      height: var(--mdc-button-height-size-88);
+    }
+    :host([size='72']) {
+      height: var(--mdc-button-height-size-72);
+    }
+    :host([size='64']) {
+      height: var(--mdc-button-height-size-64);
+    }
+    :host([size='52']) {
+      height: var(--mdc-button-height-size-52);
+    }
+    :host([size='40']) {
+      height: var(--mdc-button-height-size-40);
+    }
+    :host([size='32']) {
+      height: var(--mdc-button-height-size-32);
+    }
+    :host([size='28']) {
+      height: var(--mdc-button-height-size-28);
+      font-size: var(--mds-font-size-body-midsize);
+    }
+    :host([size='24']) {
+      height: var(--mdc-button-height-size-24);
+    }
+    :host([size='20']) {
+      height: var(--mdc-button-height-size-20);
+    }
+  `,
+    ...hostFocusRingStyles(),
+];
 export default styles;

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

@@ -49,9 +49,9 @@ declare const Card_base: import("../../utils/mixins/index.types").Constructor<im
  */
 declare class Card extends Card_base {
     /**
-    * The icon buttons in the header section
-    * @internal
-    */
+     * The icon buttons in the header section
+     * @internal
+     */
     iconButtons?: Array<HTMLElement>;
     update(changedProperties: PropertyValues<Card>): void;
     /**
@@ -61,9 +61,9 @@ declare class Card extends Card_base {
      */
     private handleIconButtons;
     /**
-    * Renders the header of the card if title is provided
-    * @returns The header element
-    */
+     * Renders the header of the card if title is provided
+     * @returns The header element
+     */
     protected renderHeader(): import("lit-html").TemplateResult<1> | typeof nothing;
     render(): import("lit-html").TemplateResult<1>;
     static styles: Array<CSSResult>;

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

@@ -9,12 +9,12 @@ var __metadata = (this && this.__metadata) || function (k, v) {
 };
 import { html, nothing } from 'lit';
 import { queryAssignedElements } from 'lit/decorators.js';
-import styles from './card.styles';
 import { Component } from '../../models';
-import { DEFAULTS } from './card.constants';
 import { BUTTON_VARIANTS } from '../button/button.constants';
 import { CardComponentMixin } from '../../utils/mixins/CardComponentMixin';
 import { CardAndDialogFooterMixin } from '../../utils/mixins/CardAndDialogFooterMixin';
+import { DEFAULTS } from './card.constants';
+import styles from './card.styles';
 /**
  * The card component allows users to organize information in a structured and tangible
  * format that is visually appealing. `mdc-card` is a static component that supports
@@ -71,7 +71,7 @@ class Card extends CardComponentMixin(CardAndDialogFooterMixin(Component)) {
          */
         this.handleIconButtons = () => {
             var _a;
-            (_a = this.iconButtons) === null || _a === void 0 ? void 0 : _a.forEach((element) => {
+            (_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();
                 }
@@ -95,29 +95,28 @@ class Card extends CardComponentMixin(CardAndDialogFooterMixin(Component)) {
         }
     }
     /**
-    * Renders the header of the card if title is provided
-    * @returns The header element
-    */
+     * Renders the header of the card if title is provided
+     * @returns The header element
+     */
     renderHeader() {
         if (!this.cardTitle) {
             return nothing;
         }
         return html `<div part="header">
-      ${this.renderIcon()}
-      ${this.renderTitle()}
+      ${this.renderIcon()} ${this.renderTitle()}
       <div part="icon-button"><slot name="icon-button" @slotchange=${this.handleIconButtons}></slot></div>
     </div>`;
     }
     render() {
         return html `
-  ${this.renderImage()}
-    <div part="body">
-    ${this.renderHeader()}
-      <slot name="before-body"></slot>
-      <slot name="body"></slot>
-      <slot name="after-body"></slot>
-      ${this.renderFooter()}
-    </div>
+      ${this.renderImage()}
+      <div part="body">
+        ${this.renderHeader()}
+        <slot name="before-body"></slot>
+        <slot name="body"></slot>
+        <slot name="after-body"></slot>
+        ${this.renderFooter()}
+      </div>
     `;
     }
 }