@momentum-design/components 0.118.4 → 0.118.5

package/dist/components/checkbox/checkbox.component.js

@@ -73,7 +73,7 @@ class Checkbox extends AutoFocusOnMountMixin(FormInternalsMixin(DataAriaLabelMix
         this.renderLabelAndHelperText = () => {
             if (!this.label)
                 return nothing;
-            return html `<div class="text-container">${this.renderLabel()} ${this.renderHelperText()}</div>`;
+            return html `<div part="text-container">${this.renderLabel()} ${this.renderHelperText()}</div>`;
         };
     }
     connectedCallback() {
@@ -187,7 +187,7 @@ class Checkbox extends AutoFocusOnMountMixin(FormInternalsMixin(DataAriaLabelMix
         <input
           id="${this.inputId}"
           type="checkbox"
-          class="input"
+          part="checkbox-input"
           name="${ifDefined(this.name)}"
           value="${ifDefined(this.value)}"
           ?required="${this.required}"

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

@@ -12,13 +12,18 @@ const styles = [
       flex-direction: row;
       align-items: flex-start;
     }
-    .mdc-label,
-    .input {
+
+    :host::part(label) {
+      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);
+    }
+
+    :host::part(label) :host::part(checkbox-input) {
       cursor: pointer;
     }
 
-    :host([disabled]) .mdc-label,
-    :host([disabled]) .input {
+    :host([disabled])::part(label) :host([disabled])::part(checkbox-input) {
       cursor: default;
     }
 
@@ -51,7 +56,7 @@ const styles = [
       position: relative;
     }
 
-    .input {
+    :host::part(checkbox-input) {
       margin: 0;
       padding: 0;
       position: absolute;
@@ -62,19 +67,19 @@ const styles = [
       z-index: 1;
     }
 
-    .input {
+    :host::part(checkbox-input) {
       width: 1rem;
       height: 1rem;
       border-radius: 0.125rem;
     }
 
-    .text-container {
+    :host::part(text-container) {
       display: flex;
       flex-direction: column;
       gap: 0.25rem;
     }
 
-    .mdc-label {
+    :host::part(label) {
       word-break: break-word;
       white-space: normal;
     }

package/dist/components/combobox/combobox.component.js

@@ -692,7 +692,7 @@ class Combobox extends CaptureDestroyEventForChildElement(AutoFocusOnMountMixin(
     `;
     }
 }
-Combobox.styles = [...FormfieldWrapper.styles, ...Input.styles, ...styles];
+Combobox.styles = [...Input.styles, ...FormfieldWrapper.styles, ...styles];
 __decorate([
     property({ type: String }),
     __metadata("design:type", String)

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

@@ -11,9 +11,5 @@ const styles = css `
     flex-direction: column;
     gap: 0.25rem;
   }
-
-  :host::part(label-text) {
-    font-weight: bold;
-  }
 `;
 export default [styles];

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

@@ -82,12 +82,12 @@ declare class FormfieldWrapper extends FormfieldWrapper_base {
      */
     protected renderHelpText(): import("lit-html").TemplateResult<1> | typeof nothing;
     /**
-     * renders the mdc-label-text container that contains the label and labelInfoToggleTip.
+     * renders the label container that contains the label and labelInfoToggleTip.
      * @returns void
      */
     protected renderLabel(): import("lit-html").TemplateResult<1> | typeof nothing;
     /**
-     * renders the mdc-help-text container that contains the helpertext icon and helpertext.
+     * renders the help-text container that contains the helpertext icon and helpertext.
      * @returns void
      */
     protected renderHelperText(): import("lit-html").TemplateResult<1> | typeof nothing;

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

@@ -72,9 +72,7 @@ class FormfieldWrapper extends DisabledMixin(Component) {
             return nothing;
         }
         return this.shouldRenderLabel
-            ? html `<label for="${this.inputId}" id="${DEFAULTS.HEADING_ID}" class="mdc-label" part="label"
-          >${this.label}</label
-        >`
+            ? html `<label for="${this.inputId}" id="${DEFAULTS.HEADING_ID}" part="label">${this.label}</label>`
             : html ` <mdc-text
           id="${DEFAULTS.HEADING_ID}"
           tagname="${MDC_TEXT_OPTIONS.TAGNAME}"
@@ -119,14 +117,14 @@ class FormfieldWrapper extends DisabledMixin(Component) {
     `;
     }
     /**
-     * renders the mdc-label-text container that contains the label and labelInfoToggleTip.
+     * renders the label container that contains the label and labelInfoToggleTip.
      * @returns void
      */
     renderLabel() {
         if (!this.label)
             return nothing;
         const triggerId = `toggletip-trigger-${uuidv4()}`;
-        return html `<div class="mdc-label-text" part="label-text">
+        return html `<div part="label-text">
       <slot name="label">${this.renderLabelElement()}</slot>
       ${this.required ? html `<span part="required-indicator">*</span>` : nothing}
       <slot name="toggletip">
@@ -154,14 +152,14 @@ class FormfieldWrapper extends DisabledMixin(Component) {
     </div>`;
     }
     /**
-     * renders the mdc-help-text container that contains the helpertext icon and helpertext.
+     * renders the help-text container that contains the helpertext icon and helpertext.
      * @returns void
      */
     renderHelperText() {
         if (!this.helpText) {
             return nothing;
         }
-        return html `<div class="mdc-help-text" part="help-text">
+        return html `<div part="help-text-container">
       <slot name="help-icon">${this.renderHelpTextIcon()}</slot>
       <slot name="help-text">${this.renderHelpText()}</slot>
     </div>`;

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

@@ -9,13 +9,13 @@ const styles = [
       gap: 0.5rem;
     }
     :host([disabled]),
-    :host([disabled]) .mdc-label,
-    :host([disabled]) .mdc-help-text,
+    :host([disabled])::part(label),
+    :host([disabled])::part(help-text-container),
     :host([disabled])::part(required-indicator),
-    :host([disabled][help-text-type='error']) .mdc-help-text,
-    :host([disabled][help-text-type='success']) .mdc-help-text,
-    :host([disabled][help-text-type='warning']) .mdc-help-text,
-    :host([disabled][help-text-type='priority']) .mdc-help-text {
+    :host([disabled][help-text-type='error'])::part(help-text-container),
+    :host([disabled][help-text-type='success'])::part(help-text-container),
+    :host([disabled][help-text-type='warning'])::part(help-text-container),
+    :host([disabled][help-text-type='priority'])::part(help-text-container) {
       color: var(--mds-color-theme-text-primary-disabled);
     }
 
@@ -23,29 +23,35 @@ const styles = [
       color: var(--mds-color-theme-text-error-normal);
     }
 
-    .mdc-label-text,
-    .mdc-help-text {
+    :host::part(label-text),
+    :host::part(help-text-container) {
       display: flex;
       align-items: center;
       gap: 0.5rem;
       width: 100%;
     }
 
-    .mdc-label,
-    .mdc-help-text {
+    :host::part(label) {
+      font-size: var(--mds-font-apps-body-midsize-medium-font-size);
+      font-weight: var(--mds-font-apps-body-midsize-medium-font-weight);
+      line-height: var(--mds-font-apps-body-midsize-medium-line-height);
+    }
+
+    :host::part(help-text),
+    :host::part(help-text-container) {
       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);
     }
 
-    .mdc-label {
+    :host::part(label) {
       color: var(--mds-color-theme-text-primary-normal);
       overflow: hidden;
       text-overflow: ellipsis;
       white-space: nowrap;
     }
 
-    .mdc-help-text {
+    :host::part(help-text-container) {
       color: var(--mds-color-theme-text-secondary-normal);
     }
 
@@ -53,16 +59,16 @@ const styles = [
       align-self: flex-start;
     }
 
-    :host([help-text-type='error']) .mdc-help-text {
+    :host([help-text-type='error'])::part(help-text-container) {
       color: var(--mds-color-theme-text-error-normal);
     }
-    :host([help-text-type='warning']) .mdc-help-text {
+    :host([help-text-type='warning'])::part(help-text-container) {
       color: var(--mds-color-theme-text-warning-normal);
     }
-    :host([help-text-type='success']) .mdc-help-text {
+    :host([help-text-type='success'])::part(help-text-container) {
       color: var(--mds-color-theme-text-success-normal);
     }
-    :host([help-text-type='priority']) .mdc-help-text {
+    :host([help-text-type='priority'])::part(help-text-container) {
       color: var(--mds-color-theme-text-accent-normal);
     }
   `,

package/dist/components/progressbar/progressbar.styles.js

@@ -13,9 +13,9 @@ const styles = [
       --mdc-progressbar-border-radius: var(--mdc-progressbar-height);
 
       --mdc-progressbar-label-color: var(--mds-color-theme-text-primary-normal);
-      --mdc-progressbar-label-line-height: var(--mds-font-lineheight-body-midsize);
-      --mdc-progressbar-label-font-size: var(--mds-font-size-body-midsize);
-      --mdc-progressbar-label-font-weight: var(--mds-font-weight-regular);
+      --mdc-progressbar-label-line-height: var(--mds-font-apps-body-midsize-regular-line-height);
+      --mdc-progressbar-label-font-size: var(--mds-font-apps-body-midsize-regular-font-size);
+      --mdc-progressbar-label-font-weight: var(--mds-font-apps-body-midsize-regular-font-weight);
       --mdc-progressbar-help-text-color: var(--mds-color-theme-text-secondary-normal);
 
       width: 100%;
@@ -71,8 +71,6 @@ const styles = [
       border-radius: var(--mdc-progressbar-border-radius);
     }
 
-    :host::part(label-text),
-    :host::part(help-text),
     :host::part(percentage) {
       font-size: var(--mdc-progressbar-label-font-size);
       font-weight: var(--mdc-progressbar-label-font-weight);

package/dist/components/radio/radio.component.js

@@ -64,7 +64,7 @@ class Radio extends AutoFocusOnMountMixin(FormInternalsMixin(DataAriaLabelMixin(
         this.renderLabelAndHelperText = () => {
             if (!this.label)
                 return nothing;
-            return html `<div class="mdc-radio__label-container">${this.renderLabel()} ${this.renderHelperText()}</div>`;
+            return html `<div part="text-container">${this.renderLabel()} ${this.renderHelperText()}</div>`;
         };
     }
     connectedCallback() {
@@ -279,6 +279,7 @@ class Radio extends AutoFocusOnMountMixin(FormInternalsMixin(DataAriaLabelMixin(
       >
         <input
           id="${this.inputId}"
+          part="radio-input"
           type="radio"
           role="${ROLE.RADIO}"
           ?autofocus="${this.autofocus}"
@@ -290,7 +291,6 @@ class Radio extends AutoFocusOnMountMixin(FormInternalsMixin(DataAriaLabelMixin(
           ?checked=${this.checked}
           ?readonly=${this.readonly}
           ?disabled=${this.disabled}
-          class="mdc-radio__input"
           aria-checked="${this.checked}"
           aria-describedby="${ifDefined(this.helpText ? FORMFIELD_DEFAULTS.HELPER_TEXT_ID : '')}"
           aria-label="${(_a = this.dataAriaLabel) !== null && _a !== void 0 ? _a : ''}"

package/dist/components/radio/radio.styles.js

@@ -52,25 +52,21 @@ const styles = [
       background-color: var(--mdc-radio-control-active-disabled-background);
     }
 
-    :host([readonly]) .mdc-radio__input,
-    :host([disabled]) .mdc-radio__input,
-    :host([disabled]) .mdc-label,
-    :host([readonly]) .mdc-label {
+    :host([readonly])::part(radio-input) :host([disabled])::part(radio-input) :host([disabled])::part(label),
+    :host([readonly])::part(label) {
       cursor: default;
     }
 
-    .mdc-label {
+    :host::part(label) {
       cursor: pointer;
       word-break: break-word;
       white-space: normal;
+      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);
     }
 
-    :host([disabled]) .mdc-radio__label-text,
-    :host([disabled]) .mdc-radio__help-text {
-      color: var(--mdc-radio-text-disabled-color);
-    }
-
-    .mdc-radio__input {
+    :host::part(radio-input) {
       position: absolute;
       opacity: 0;
       margin: 0;
@@ -80,7 +76,7 @@ const styles = [
       z-index: 2;
     }
 
-    .mdc-radio__label-container {
+    :host::part(text-container) {
       display: flex;
       flex-direction: column;
       justify-content: center;

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

@@ -28,9 +28,6 @@ declare const Toggle_base: import("../../utils/mixins/index.types").Constructor<
  * @cssproperty --mdc-toggle-height - Height of the toggle
  * @cssproperty --mdc-toggle-width-compact - Width of the toggle when it's size is compact
  * @cssproperty --mdc-toggle-height-compact - Height of the toggle when it's size is compact
- * @cssproperty --mdc-toggle-label-lineheight - Line height of the toggle label
- * @cssproperty --mdc-toggle-label-fontsize - Font size of the toggle label
- * @cssproperty --mdc-toggle-label-fontweight - Font weight of the toggle label
  * @cssproperty --mdc-toggle-label-color-disabled - Color of the toggle label and help text in disabled state
  * @cssproperty --mdc-toggle-help-text-color - Color of the help text label
  * @cssproperty --mdc-toggle-active-hover-color - Background color of the active toggle in hover state

package/dist/components/toggle/toggle.component.js

@@ -44,9 +44,6 @@ import styles from './toggle.styles';
  * @cssproperty --mdc-toggle-height - Height of the toggle
  * @cssproperty --mdc-toggle-width-compact - Width of the toggle when it's size is compact
  * @cssproperty --mdc-toggle-height-compact - Height of the toggle when it's size is compact
- * @cssproperty --mdc-toggle-label-lineheight - Line height of the toggle label
- * @cssproperty --mdc-toggle-label-fontsize - Font size of the toggle label
- * @cssproperty --mdc-toggle-label-fontweight - Font weight of the toggle label
  * @cssproperty --mdc-toggle-label-color-disabled - Color of the toggle label and help text in disabled state
  * @cssproperty --mdc-toggle-help-text-color - Color of the help text label
  * @cssproperty --mdc-toggle-active-hover-color - Background color of the active toggle in hover state

package/dist/components/toggle/toggle.styles.js

@@ -9,9 +9,6 @@ const styles = [
       --mdc-toggle-width-compact: 2rem;
       --mdc-toggle-height-compact: 1rem;
 
-      --mdc-toggle-label-lineheight: var(--mds-font-lineheight-body-midsize);
-      --mdc-toggle-label-fontsize: var(--mds-font-size-body-midsize);
-      --mdc-toggle-label-fontweight: 400;
       --mdc-toggle-label-color-disabled: var(--mds-color-theme-text-primary-disabled);
       --mdc-toggle-help-text-color: var(--mds-color-theme-text-secondary-normal);
 
@@ -46,30 +43,30 @@ const styles = [
       height: var(--mdc-toggle-height);
     }
 
-    .mdc-label-text,
-    .mdc-help-text {
-      font-size: var(--mdc-toggle-label-fontsize);
-      font-weight: var(--mdc-toggle-label-fontweight);
-      line-height: var(--mdc-toggle-label-lineheight);
+    :host::part(label-text),
+    :host::part(help-text-container) {
       grid-column: 2;
     }
 
-    .mdc-label,
+    :host::part(label),
     :host::part(toggle-input) {
       cursor: pointer;
     }
 
-    .mdc-label {
+    :host::part(label) {
       word-break: break-word;
       white-space: normal;
+      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);
     }
 
-    :host([disabled]) .mdc-label,
+    :host([disabled])::part(label),
     :host([disabled])::part(toggle-input) {
       cursor: default;
     }
 
-    .mdc-help-text {
+    :host::part(help-text) {
       color: var(--mdc-toggle-help-text-color);
     }
 
@@ -89,8 +86,8 @@ const styles = [
       background-color: var(--mdc-toggle-active-pressed-color);
     }
 
-    :host([disabled]) .mdc-label-text,
-    :host([disabled]) .mdc-help-text {
+    :host([disabled])::part(label-text),
+    :host([disabled])::part(help-text) {
       color: var(--mdc-toggle-label-color-disabled);
     }
   `,