@momentum-design/components 0.84.3 → 0.84.4

package/dist/components/checkbox/checkbox.styles.js

@@ -1,71 +1,73 @@
 import { css } from 'lit';
 import { hostFocusRingStyles } from '../../utils/styles';
-const styles = [css `
-  :host {
-    --mdc-checkbox-background-color-hover: var(--mds-color-theme-control-inactive-hover);
-    --mdc-checkbox-pressed-icon-color: var(--mds-color-theme-control-inactive-pressed);
-    --mdc-checkbox-checked-pressed-icon-color: var(--mds-color-theme-control-active-pressed);
-    --mdc-checkbox-checked-background-color-hover: var(--mds-color-theme-control-active-hover);
-    --mdc-checkbox-disabled-checked-icon-color: var(--mds-color-theme-control-active-disabled);
-    
-    flex-direction: row;
-    align-items: flex-start;
-  }
-  .mdc-label, .input {
-    cursor: pointer;
-  }
+const styles = [
+    css `
+    :host {
+      --mdc-checkbox-background-color-hover: var(--mds-color-theme-control-inactive-hover);
+      --mdc-checkbox-pressed-icon-color: var(--mds-color-theme-control-inactive-pressed);
+      --mdc-checkbox-checked-pressed-icon-color: var(--mds-color-theme-control-active-pressed);
+      --mdc-checkbox-checked-background-color-hover: var(--mds-color-theme-control-active-hover);
+      --mdc-checkbox-disabled-checked-icon-color: var(--mds-color-theme-control-active-disabled);
 
-  :host([disabled]) .mdc-label,
-  :host([disabled]) .input {
-    cursor: default;
-  }
+      flex-direction: row;
+      align-items: flex-start;
+    }
+    .mdc-label,
+    .input {
+      cursor: pointer;
+    }
 
-  :host(:hover) mdc-staticcheckbox{
-    background: var(--mdc-checkbox-background-color-hover);
-  }
-  :host(:active) mdc-staticcheckbox{
-    background: var(--mdc-checkbox-pressed-icon-color);
-  }
+    :host([disabled]) .mdc-label,
+    :host([disabled]) .input {
+      cursor: default;
+    }
 
-  :host([checked]:hover)::part(icon-container),
-  :host([indeterminate]:hover)::part(icon-container) {
-    background: var(--mdc-checkbox-checked-background-color-hover);
-  }
-  :host([checked]:active)::part(icon-container),
-  :host([indeterminate]:active)::part(icon-container) {
-    background: var(--mdc-checkbox-checked-pressed-icon-color);
-  }
+    :host(:hover) mdc-staticcheckbox {
+      background: var(--mdc-checkbox-background-color-hover);
+    }
+    :host(:active) mdc-staticcheckbox {
+      background: var(--mdc-checkbox-pressed-icon-color);
+    }
 
-  :host([disabled])  mdc-staticcheckbox {
-    background: unset;
-  }
+    :host([checked]:hover)::part(icon-container),
+    :host([indeterminate]:hover)::part(icon-container) {
+      background: var(--mdc-checkbox-checked-background-color-hover);
+    }
+    :host([checked]:active)::part(icon-container),
+    :host([indeterminate]:active)::part(icon-container) {
+      background: var(--mdc-checkbox-checked-pressed-icon-color);
+    }
 
-  :host([disabled][checked])::part(icon-container),
-  :host([disabled][indeterminate])::part(icon-container) {
-    background-color: var(--mdc-checkbox-disabled-checked-icon-color);
-  }
+    :host([disabled]) mdc-staticcheckbox {
+      background: unset;
+    }
 
-  .input {
-    margin: 0;
-    padding: 0;
-    position: absolute;
-    opacity: 0.1%;
-    overflow: visible;
-    z-index: 1;
-  }
+    :host([disabled][checked])::part(icon-container),
+    :host([disabled][indeterminate])::part(icon-container) {
+      background-color: var(--mdc-checkbox-disabled-checked-icon-color);
+    }
 
-  .input {
-    width: 1rem;
-    height: 1rem;
-    border-radius: 0.125rem;
-  }
- 
-  .text-container {
-    display: flex;
-    flex-direction: column;
-    gap: 0.25rem;
-  }
-  
+    .input {
+      margin: 0;
+      padding: 0;
+      position: absolute;
+      opacity: 0.1%;
+      overflow: visible;
+      z-index: 1;
+    }
 
-`, ...hostFocusRingStyles(true)];
+    .input {
+      width: 1rem;
+      height: 1rem;
+      border-radius: 0.125rem;
+    }
+
+    .text-container {
+      display: flex;
+      flex-direction: column;
+      gap: 0.25rem;
+    }
+  `,
+    ...hostFocusRingStyles(true),
+];
 export default styles;

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

@@ -1,6 +1,6 @@
 import { CSSResult } from 'lit';
-import type { ColorType } from './chip.types';
 import Buttonsimple from '../buttonsimple/buttonsimple.component';
+import type { ColorType } from './chip.types';
 declare const Chip_base: import("../../utils/mixins/index.types").Constructor<import("../../utils/mixins/IconNameMixin").IconNameMixinInterface> & typeof Buttonsimple;
 /**
  * mdc-chip is an interactive element that can be used to represent a chip. It supports a leading icon along with label.

package/dist/components/chip/chip.component.js

@@ -9,11 +9,11 @@ var __metadata = (this && this.__metadata) || function (k, v) {
 };
 import { html, nothing } from 'lit';
 import { property } from 'lit/decorators.js';
-import styles from './chip.styles';
 import { IconNameMixin } from '../../utils/mixins/IconNameMixin';
 import { Component } from '../../models';
-import { DEFAULTS } from './chip.constants';
 import Buttonsimple from '../buttonsimple/buttonsimple.component';
+import { DEFAULTS } from './chip.constants';
+import styles from './chip.styles';
 /**
  * mdc-chip is an interactive element that can be used to represent a chip. It supports a leading icon along with label.
  * Consumers can wrap this component around a tooltip to provide additional context.
@@ -75,18 +75,13 @@ class Chip extends IconNameMixin(Buttonsimple) {
     renderIcon() {
         if (!this.iconName)
             return nothing;
-        return html `
-      <mdc-icon 
-        name="${this.iconName}" 
-        length-unit="rem" 
-        size="1"></mdc-icon>
-    `;
+        return html ` <mdc-icon name="${this.iconName}" length-unit="rem" size="1"></mdc-icon> `;
     }
     render() {
         return html `
-        ${this.renderIcon()}
-        <mdc-text type="${DEFAULTS.TEXT_TYPE}" tagname="${DEFAULTS.TAG_NAME}">${this.label}</mdc-text>
-      `;
+      ${this.renderIcon()}
+      <mdc-text type="${DEFAULTS.TEXT_TYPE}" tagname="${DEFAULTS.TAG_NAME}">${this.label}</mdc-text>
+    `;
     }
 }
 Chip.styles = [...Component.styles, ...styles];

package/dist/components/chip/chip.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-label-default-normal);
@@ -144,7 +144,9 @@ const styles = css `
     --mdc-chip-background-color: var(--mds-color-theme-background-label-violet-active);
   }
 
-  :host([disabled]), :host([disabled]:hover), :host([disabled]:active) {
+  :host([disabled]),
+  :host([disabled]:hover),
+  :host([disabled]:active) {
     --mdc-chip-border-color: var(--mds-color-theme-outline-primary-disabled);
     --mdc-chip-background-color: var(--mds-color-theme-background-primary-disabled);
     --mdc-chip-color: var(--mds-color-theme-text-primary-disabled);

package/dist/components/dialog/dialog.component.js

@@ -10,15 +10,15 @@ var __metadata = (this && this.__metadata) || function (k, v) {
 import { html, nothing } from 'lit';
 import { ifDefined } from 'lit/directives/if-defined.js';
 import { property } from 'lit/decorators.js';
-import styles from './dialog.styles';
 import { Component } from '../../models';
 import { FocusTrapMixin } from '../../utils/mixins/FocusTrapMixin';
 import { PreventScrollMixin } from '../../utils/mixins/PreventScrollMixin';
-import { DEFAULTS } from './dialog.constants';
 import { TYPE, VALID_TEXT_TAGS } from '../text/text.constants';
-import { DialogEventManager } from './dialog.events';
 import { BUTTON_VARIANTS, ICON_BUTTON_SIZES } from '../button/button.constants';
 import { CardAndDialogFooterMixin } from '../../utils/mixins/CardAndDialogFooterMixin';
+import { DEFAULTS } from './dialog.constants';
+import { DialogEventManager } from './dialog.events';
+import styles from './dialog.styles';
 /**
  * Dialog component is a modal dialog that can be used to display information or prompt the user for input.
  * It can be used to create custom dialogs where content for the body and footer actions is provided by the consumer.
@@ -221,12 +221,12 @@ class Dialog extends PreventScrollMixin(FocusTrapMixin(CardAndDialogFooterMixin(
         if (changedProperties.has('variant')) {
             this.updateFooterButtonColors(this.variant);
         }
-        if (changedProperties.has('ariaLabel')
-            || changedProperties.has('ariaLabelledBy')
-            || changedProperties.has('ariaDescribedBy')
-            || changedProperties.has('ariaDescription')
-            || changedProperties.has('headerText')
-            || changedProperties.has('descriptionText')) {
+        if (changedProperties.has('ariaLabel') ||
+            changedProperties.has('ariaLabelledBy') ||
+            changedProperties.has('ariaDescribedBy') ||
+            changedProperties.has('ariaDescription') ||
+            changedProperties.has('headerText') ||
+            changedProperties.has('descriptionText')) {
             this.setupAriaLabelledDescribedBy();
         }
         if (changedProperties.has('focusTrap')) {
@@ -364,28 +364,27 @@ class Dialog extends PreventScrollMixin(FocusTrapMixin(CardAndDialogFooterMixin(
     render() {
         return html `
       ${this.headerText
-            ? html `
-      <div part="header-section">
-        <div part="header">
-          <slot name="header-prefix"></slot>
-          <mdc-text
-            part="header-text"
-            tagname="${VALID_TEXT_TAGS[this.headerTagName.toUpperCase()]}"
-            type="${TYPE.BODY_LARGE_BOLD}"  
-          >
-            ${this.headerText}
-          </mdc-text>
-        </div>
-        ${this.descriptionText
+            ? html ` <div part="header-section">
+            <div part="header">
+              <slot name="header-prefix"></slot>
+              <mdc-text
+                part="header-text"
+                tagname="${VALID_TEXT_TAGS[this.headerTagName.toUpperCase()]}"
+                type="${TYPE.BODY_LARGE_BOLD}"
+              >
+                ${this.headerText}
+              </mdc-text>
+            </div>
+            ${this.descriptionText
                 ? html `<mdc-text
-          part="description-text"
-          tagname="${VALID_TEXT_TAGS[this.descriptionTagName.toUpperCase()]}"
-          type="${TYPE.BODY_MIDSIZE_REGULAR}"
-        >
-        ${this.descriptionText}
-        </mdc-text>`
+                  part="description-text"
+                  tagname="${VALID_TEXT_TAGS[this.descriptionTagName.toUpperCase()]}"
+                  type="${TYPE.BODY_MIDSIZE_REGULAR}"
+                >
+                  ${this.descriptionText}
+                </mdc-text>`
                 : nothing}
-      </div>`
+          </div>`
             : nothing}
       <mdc-button
         part="dialog-close-btn"

package/dist/components/dialog/dialog.styles.js

@@ -7,7 +7,7 @@ const styles = css `
     --mdc-dialog-description-text-color: var(--mds-color-theme-text-secondary-normal);
     --mdc-dialog-elevation-3: var(--mds-elevation-3);
     --mdc-dialog-width: 27rem; /* Default to small */
-    
+
     background-color: var(--mdc-dialog-primary-background-color);
     border: 0.0625rem solid var(--mdc-dialog-border-color);
     border-radius: 0.5rem;
@@ -21,17 +21,15 @@ const styles = css `
     position: absolute;
     right: 50%;
     bottom: 50%;
-    transform: translate(50%,50%);
+    transform: translate(50%, 50%);
   }
 
-
-  :host([variant='promotional']){
+  :host([variant='promotional']) {
     --mdc-dialog-border-color: var(--mds-color-theme-outline-promotion-normal);
   }
-    
+
   :host([visible]) {
     display: flex;
-      
   }
 
   :host([size='medium']) {
@@ -46,7 +44,7 @@ const styles = css `
     width: var(--mdc-dialog-width);
     max-width: 100%;
   }
-    
+
   :host::part(header-section),
   :host::part(body),
   :host::part(footer) {
@@ -64,18 +62,18 @@ const styles = css `
     display: flex;
     align-items: center;
     gap: 0.25rem;
-    width: 100%
+    width: 100%;
   }
 
   :host::part(header-text) {
     width: calc(100% - 2rem);
     color: var(--mdc-dialog-header-text-color);
   }
-    
+
   :host::part(description-text) {
     color: var(--mdc-dialog-description-text-color);
   }
-    
+
   :host::part(body) {
     flex-direction: column;
     justify-content: center;
@@ -97,12 +95,12 @@ const styles = css `
     right: 1rem;
     cursor: pointer;
   }
-  
+
   :host(:dir(rtl))::part(dialog-close-btn) {
     right: auto;
     left: 1rem;
   }
-    
+
   mdc-text::part(text) {
     margin: 0;
   }

package/dist/components/divider/divider.component.js

@@ -126,9 +126,7 @@ class Divider extends Component {
      * @param arrowDirection - The arrowDirection to set.
      */
     ensureValidDirections() {
-        const defaultDirection = this.orientation === DIVIDER_ORIENTATION.HORIZONTAL
-            ? DIRECTIONS.NEGATIVE
-            : DIRECTIONS.POSITIVE;
+        const defaultDirection = this.orientation === DIVIDER_ORIENTATION.HORIZONTAL ? DIRECTIONS.NEGATIVE : DIRECTIONS.POSITIVE;
         if (!Object.values(DIRECTIONS).includes(this.buttonPosition)) {
             this.buttonPosition = defaultDirection;
         }
@@ -174,9 +172,9 @@ class Divider extends Component {
         if (changedProperties.has('variant')) {
             this.setVariant(this.variant);
         }
-        if (changedProperties.has('orientation')
-            || changedProperties.has('arrowDirection')
-            || changedProperties.has('buttonPosition')) {
+        if (changedProperties.has('orientation') ||
+            changedProperties.has('arrowDirection') ||
+            changedProperties.has('buttonPosition')) {
             this.setGrabberButton();
         }
     }
@@ -190,8 +188,8 @@ class Divider extends Component {
         const assignedElements = (slot === null || slot === void 0 ? void 0 : slot.assignedElements({ flatten: true })) || [];
         if (assignedElements.length > 1)
             return;
-        const hasTextChild = assignedElements.some((el) => el.tagName === TEXT_TAG.toUpperCase());
-        const hasButtonChild = assignedElements.some((el) => el.tagName === BUTTON_TAG.toUpperCase());
+        const hasTextChild = assignedElements.some(el => el.tagName === TEXT_TAG.toUpperCase());
+        const hasButtonChild = assignedElements.some(el => el.tagName === BUTTON_TAG.toUpperCase());
         if (hasTextChild && !hasButtonChild) {
             this.setAttribute('data-type', 'mdc-text-divider');
         }

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

@@ -29,4 +29,4 @@ declare const DEFAULTS: {
     readonly ARROW_DIRECTION: "negative";
     readonly BUTTON_DIRECTION: "negative";
 };
-export { TAG_NAME, DEFAULTS, DIVIDER_VARIANT, DIVIDER_ORIENTATION, DIRECTIONS, BUTTON_TAG, TEXT_TAG, ARROW_ICONS, };
+export { TAG_NAME, DEFAULTS, DIVIDER_VARIANT, DIVIDER_ORIENTATION, DIRECTIONS, BUTTON_TAG, TEXT_TAG, ARROW_ICONS };

package/dist/components/divider/divider.constants.js

@@ -30,4 +30,4 @@ const DEFAULTS = {
     ARROW_DIRECTION: DIRECTIONS.NEGATIVE,
     BUTTON_DIRECTION: DIRECTIONS.NEGATIVE,
 };
-export { TAG_NAME, DEFAULTS, DIVIDER_VARIANT, DIVIDER_ORIENTATION, DIRECTIONS, BUTTON_TAG, TEXT_TAG, ARROW_ICONS, };
+export { TAG_NAME, DEFAULTS, DIVIDER_VARIANT, DIVIDER_ORIENTATION, DIRECTIONS, BUTTON_TAG, TEXT_TAG, ARROW_ICONS };

package/dist/components/divider/divider.styles.js

@@ -110,19 +110,13 @@ const styles = [
     :host([orientation='vertical']) ::slotted(mdc-button) {
       width: 1.25rem;
       height: 2.5rem;
-      border-radius: 0
-          var(--mdc-divider-grabber-button-border-radius)
-          var(--mdc-divider-grabber-button-border-radius)
-          0;
+      border-radius: 0 var(--mdc-divider-grabber-button-border-radius) var(--mdc-divider-grabber-button-border-radius) 0;
     }
 
     :host([orientation='horizontal']) ::slotted(mdc-button) {
       height: 1.25rem;
       width: 2.5rem;
-      border-radius: 0
-          0
-          var(--mdc-divider-grabber-button-border-radius)
-          var(--mdc-divider-grabber-button-border-radius);
+      border-radius: 0 0 var(--mdc-divider-grabber-button-border-radius) var(--mdc-divider-grabber-button-border-radius);
     }
 
     :host([orientation='horizontal'][button-position='positive']),
@@ -136,10 +130,7 @@ const styles = [
     }
 
     :host([orientation='horizontal'][button-position='positive']) ::slotted(mdc-button) {
-      border-radius: var(--mdc-divider-grabber-button-border-radius)
-          var(--mdc-divider-grabber-button-border-radius)
-          0
-          0;
+      border-radius: var(--mdc-divider-grabber-button-border-radius) var(--mdc-divider-grabber-button-border-radius) 0 0;
       margin: 0;
       margin-bottom: var(--mdc-divider-width);
       border-bottom: 0;
@@ -153,10 +144,7 @@ const styles = [
 
     :host([orientation='vertical'][button-position='negative']:dir(ltr)) ::slotted(mdc-button),
     :host([orientation='vertical'][button-position='negative']:dir(rtl)) ::slotted(mdc-button) {
-      border-radius: var(--mdc-divider-grabber-button-border-radius)
-          0
-          0
-          var(--mdc-divider-grabber-button-border-radius);
+      border-radius: var(--mdc-divider-grabber-button-border-radius) 0 0 var(--mdc-divider-grabber-button-border-radius);
       margin: 0;
       margin-right: var(--mdc-divider-width);
       border-right: 0;
@@ -170,10 +158,7 @@ const styles = [
     }
 
     :host([orientation='vertical'][button-position='positive']:dir(rtl)) ::slotted(mdc-button) {
-      border-radius: 0
-          var(--mdc-divider-grabber-button-border-radius)
-          var(--mdc-divider-grabber-button-border-radius)
-          0;
+      border-radius: 0 var(--mdc-divider-grabber-button-border-radius) var(--mdc-divider-grabber-button-border-radius) 0;
       transform: rotate(180deg);
       margin: 0;
       margin-right: var(--mdc-divider-width);

package/dist/components/filterchip/filterchip.styles.js

@@ -1,6 +1,6 @@
 import { css } from 'lit';
 const styles = css `
-  :host([selected]){
+  :host([selected]) {
     border: 2px solid;
     --mdc-chip-background-color: var(--mds-color-theme-background-label-default-active);
   }
@@ -13,7 +13,9 @@ const styles = css `
     --mdc-chip-background-color: var(--mds-color-theme-background-label-default-active);
   }
 
-  :host([disabled]), :host([disabled]:hover), :host([disabled]:active) {
+  :host([disabled]),
+  :host([disabled]:hover),
+  :host([disabled]:active) {
     --mdc-chip-border-color: var(--mds-color-theme-outline-primary-disabled);
     --mdc-chip-background-color: var(--mds-color-theme-background-primary-disabled);
     --mdc-chip-color: var(--mds-color-theme-text-primary-disabled);

package/dist/components/formfieldgroup/formfieldgroup.component.js

@@ -56,10 +56,7 @@ class FormfieldGroup extends DataAriaLabelMixin(FormfieldWrapper) {
         aria-describedby="${ifDefined(this.helpText ? FORMFIELD_DEFAULTS.HELPER_TEXT_ID : '')}"
         aria-label="${(_a = this.dataAriaLabel) !== null && _a !== void 0 ? _a : ''}"
       >
-        <div part="group-header">
-          ${this.renderLabel()}
-          ${this.renderHelperText()}
-        </div>
+        <div part="group-header">${this.renderLabel()} ${this.renderHelperText()}</div>
         <slot></slot>
       </div>
     `;

package/dist/components/formfieldgroup/formfieldgroup.styles.js

@@ -1,6 +1,5 @@
 import { css } from 'lit';
 const styles = css `
-
   :host::part(container) {
     display: flex;
     flex-direction: column;
@@ -13,7 +12,7 @@ const styles = css `
     gap: 0.25rem;
   }
 
-  :host::part(label-text){
+  :host::part(label-text) {
     font-weight: bold;
   }
 `;

package/dist/components/formfieldwrapper/formfieldwrapper.component.js

@@ -12,8 +12,8 @@ import { property } from 'lit/decorators.js';
 import { ifDefined } from 'lit/directives/if-defined.js';
 import { Component } from '../../models';
 import { DisabledMixin } from '../../utils/mixins/DisabledMixin';
-import { DEFAULTS, MDC_TEXT_OPTIONS } from './formfieldwrapper.constants';
 import { BUTTON_VARIANTS } from '../button/button.constants';
+import { DEFAULTS, MDC_TEXT_OPTIONS } from './formfieldwrapper.constants';
 import styles from './formfieldwrapper.styles';
 import { getHelperIcon } from './formfieldwrapper.utils';
 /**
@@ -120,22 +120,24 @@ class FormfieldWrapper extends DisabledMixin(Component) {
         return html `<div class="mdc-label-text" part="label-text">
       <slot name="label">${this.renderLabelElement()}</slot>
       ${this.required ? html `<span part="required-indicator">*</span>` : nothing}
-      ${this.toggletipText ? html `
-        <mdc-button 
-        part="info-icon-btn"
-        prefix-icon="${DEFAULTS.INFO_ICON}" 
-        size="${DEFAULTS.ICON_SIZE}"
-        variant="${BUTTON_VARIANTS.TERTIARY}"
-        aria-label="${ifDefined(this.infoIconAriaLabel)}"
-        id="info-icon-id"></mdc-button>
-        <mdc-toggletip
-          part="label-toggletip"
-          triggerid="info-icon-id"
-          id="label-toggletip-id"
-          placement="${this.toggletipPlacement}"
-          show-arrow
-          >${this.toggletipText}</mdc-toggletip
-      >` : nothing}
+      ${this.toggletipText
+            ? html ` <mdc-button
+              part="info-icon-btn"
+              prefix-icon="${DEFAULTS.INFO_ICON}"
+              size="${DEFAULTS.ICON_SIZE}"
+              variant="${BUTTON_VARIANTS.TERTIARY}"
+              aria-label="${ifDefined(this.infoIconAriaLabel)}"
+              id="info-icon-id"
+            ></mdc-button>
+            <mdc-toggletip
+              part="label-toggletip"
+              triggerid="info-icon-id"
+              id="label-toggletip-id"
+              placement="${this.toggletipPlacement}"
+              show-arrow
+              >${this.toggletipText}</mdc-toggletip
+            >`
+            : nothing}
     </div>`;
     }
     /**

package/dist/components/formfieldwrapper/formfieldwrapper.styles.js

@@ -30,7 +30,8 @@ const styles = [
       width: 100%;
     }
 
-    .mdc-label, .mdc-help-text{
+    .mdc-label,
+    .mdc-help-text {
       font-size: var(--mds-font-apps-body-midsize-regular-font-size);
       font-weight: var(--mds-font-apps-body-midsize-regular-font-weight);
       line-height: var(--mds-font-apps-body-midsize-regular-line-height);

package/dist/components/formfieldwrapper/formfieldwrapper.subcomponent.js

@@ -6,10 +6,10 @@ import FormfieldWrapper from './formfieldwrapper.component';
 class SubComponentFormFieldWrapper extends FormfieldWrapper {
     render() {
         return html `
-          ${this.renderLabel()}
-          <slot></slot>
-          ${this.renderHelperText()}
-        `;
+      ${this.renderLabel()}
+      <slot></slot>
+      ${this.renderHelperText()}
+    `;
     }
 }
 SubComponentFormFieldWrapper.register('mdc-subcomponent-formfieldwrapper');

package/dist/components/icon/icon.component.js

@@ -9,10 +9,10 @@ var __metadata = (this && this.__metadata) || function (k, v) {
 };
 import { html } from 'lit';
 import { property, state } from 'lit/decorators.js';
-import styles from './icon.styles';
 import { Component } from '../../models';
 import providerUtils from '../../utils/provider';
 import IconProvider from '../iconprovider/iconprovider.component';
+import styles from './icon.styles';
 import { svgFetch } from './icon.utils';
 import { DEFAULTS } from './icon.constants';
 /**
@@ -124,22 +124,22 @@ class Icon extends Component {
                     cacheStrategy,
                     renewSignal,
                 })
-                    .then((iconData) => {
+                    .then(iconData => {
                     // parse the fetched icon string to an html element and set the attributes
                     const iconElement = this.prepareIconElement(iconData);
                     this.handleIconLoadedSuccess(iconElement);
                 })
-                    .catch((error) => {
+                    .catch(error => {
                     this.handleIconLoadedFailure(error);
                 });
             }
             if (iconSet === 'momentum-icons' && this.name) {
                 // dynamic import of the lit template from the momentum icons package
                 return import(`@momentum-design/icons/dist/ts/${this.name}.ts`)
-                    .then((module) => {
+                    .then(module => {
                     this.handleIconLoadedSuccess(module.default());
                 })
-                    .catch((error) => {
+                    .catch(error => {
                     this.handleIconLoadedFailure(error);
                 });
             }
@@ -196,14 +196,14 @@ class Icon extends Component {
         super.updated(changedProperties);
         if (changedProperties.has('name')) {
             // fetch icon data if name changes:
-            this.getIconData().catch((err) => {
+            this.getIconData().catch(err => {
                 if (err.name !== 'AbortError' && this.onerror) {
                     this.onerror(err);
                 }
             });
         }
         if (changedProperties.has('ariaLabel') || changedProperties.has('ariaLabelledBy')) {
-            this.role = (this.ariaLabel || this.ariaLabelledBy) ? 'img' : null;
+            this.role = this.ariaLabel || this.ariaLabelledBy ? 'img' : null;
         }
         if (changedProperties.has('size') || changedProperties.has('lengthUnit')) {
             this.updateSize();