@momentum-design/components 0.28.6 → 0.28.7

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

@@ -89,6 +89,7 @@ declare class Checkbox extends Checkbox_base implements AssociatedFormControl {
      */
     handleChange(event: Event): void;
     update(changedProperties: PropertyValues): void;
+    private renderLabelAndHelperText;
     render(): import("lit-html").TemplateResult<1>;
     static styles: Array<CSSResult>;
 }

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

@@ -68,6 +68,14 @@ class Checkbox extends FormInternalsMixin(DataAriaLabelMixin(FormfieldWrapper))
          * @default false
          */
         this.autofocus = false;
+        this.renderLabelAndHelperText = () => {
+            if (!this.label)
+                return nothing;
+            return html `<div class="text-container">
+      ${this.renderLabel()}
+      ${this.renderHelperText()}
+    </div>`;
+        };
         // Checkbox does not contain helpTextType property.
         this.helpTextType = undefined;
     }
@@ -166,7 +174,6 @@ class Checkbox extends FormInternalsMixin(DataAriaLabelMixin(FormfieldWrapper))
         length-unit="rem"
       ></mdc-icon>
     ` : nothing;
-        const helpTextContent = this.helpText ? this.renderHelperText() : nothing;
         return html `
       <div class="container mdc-focus-ring">
         <input
@@ -189,10 +196,7 @@ class Checkbox extends FormInternalsMixin(DataAriaLabelMixin(FormfieldWrapper))
         />
         <div class="icon-container">${checkboxIconContent}</div>
       </div>
-      <div class="text-container">
-        ${this.renderLabel()}
-        ${helpTextContent}
-      </div>
+      ${this.renderLabelAndHelperText()}
     `;
     }
 }

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

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

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

@@ -108,6 +108,8 @@ class FormfieldWrapper extends DisabledMixin(Component) {
      * @returns void
      */
     renderLabel() {
+        if (!this.label)
+            return nothing;
         return html `<div class="mdc-label-text" part="label-text">
       <slot name="label">${this.renderLabelElement()}</slot>
       <slot name="required-label">${this.renderRequiredLabel()}</slot>

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

@@ -109,6 +109,7 @@ declare class Radio extends Radio_base implements AssociatedFormControl {
    */
     private updateTabIndex;
     update(changedProperties: PropertyValues): void;
+    private renderLabelAndHelperText;
     render(): import("lit-html").TemplateResult<1>;
     static styles: Array<CSSResult>;
 }

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

@@ -67,6 +67,14 @@ class Radio extends FormInternalsMixin(DataAriaLabelMixin(FormfieldWrapper)) {
        * @default false
        */
         this.autofocus = false;
+        this.renderLabelAndHelperText = () => {
+            if (!this.label)
+                return nothing;
+            return html `<div class="mdc-radio__label-container">
+      ${this.renderLabel()}
+      ${this.renderHelperText()}
+    </div>`;
+        };
         // Radio does not contain helpTextType property.
         this.helpTextType = undefined;
     }
@@ -267,7 +275,6 @@ class Radio extends FormInternalsMixin(DataAriaLabelMixin(FormfieldWrapper)) {
     }
     render() {
         var _a;
-        const helpTextContent = this.helpText ? this.renderHelperText() : nothing;
         return html `
       <div class="mdc-radio__container">
         <div class="mdc-radio__icon-container mdc-focus-ring">
@@ -291,10 +298,7 @@ class Radio extends FormInternalsMixin(DataAriaLabelMixin(FormfieldWrapper)) {
           />
           <span class="mdc-radio__icon"></span>
         </div>
-        <div class="mdc-radio__label-container">
-          ${this.renderLabel()}
-          ${helpTextContent}
-        </div>
+        ${this.renderLabelAndHelperText()}
       </div>
     `;
     }

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

@@ -29,7 +29,9 @@ const styles = [hostFitContentStyles, css `
     --mdc-toggle-icon-color-disabled: var(--mds-color-theme-common-inverted-text-primary-disabled);
     --mdc-toggle-icon-background-color-normal: var(--mds-color-theme-common-text-primary-normal);
     --mdc-toggle-icon-background-color-disabled: var(--mds-color-theme-common-text-primary-disabled);
+  }
 
+  :host([label]), :host([help-text]){
     display: grid;
     grid-template-rows: auto auto;
     grid-template-columns: auto auto;
@@ -38,6 +40,7 @@ const styles = [hostFitContentStyles, css `
   }
 
   :host([help-text='']) {
+    grid-template-rows: auto;
     row-gap: 0rem;
   }
 
@@ -49,9 +52,10 @@ const styles = [hostFitContentStyles, css `
   .mdc-toggle__input {
     opacity: 0;
     position: absolute;
+    cursor: pointer;
+    margin: 0;
     width: var(--mdc-toggle-width);
     height: var(--mdc-toggle-height);
-    cursor: pointer;
   }
 
   .mdc-toggle__slider {
@@ -79,7 +83,11 @@ const styles = [hostFitContentStyles, css `
     height: var(--mdc-toggle-height-compact);
     border-radius: var(--mdc-toggle-border-radius-compact);
   }
-  
+  :host([size='compact']) .mdc-toggle__input {
+    width: var(--mdc-toggle-width-compact);
+    height: var(--mdc-toggle-height-compact);
+  }
+
   .mdc-toggle__icon {
     padding: 0.25rem;
    --mdc-icon-fill-color: var(--mdc-toggle-icon-color-normal);

package/dist/custom-elements.json

@@ -2739,6 +2739,11 @@
               ],
               "description": "Toggles the state of the checkbox element.\nand dispatch the new change event."
             },
+            {
+              "kind": "field",
+              "name": "renderLabelAndHelperText",
+              "privacy": "private"
+            },
             {
               "kind": "field",
               "name": "helpTextType",
@@ -7587,6 +7592,11 @@
               },
               "description": "Update tab index for all radios in the same group (name)\nIf any radio group is checked, it will have a tab index of 0\nIf no radio group is checked, the first enabled radio will have a tab index of 0"
             },
+            {
+              "kind": "field",
+              "name": "renderLabelAndHelperText",
+              "privacy": "private"
+            },
             {
               "kind": "field",
               "name": "helpTextType",

package/package.json

@@ -38,5 +38,5 @@
     "lit": "^3.2.0",
     "uuid": "^11.0.5"
   },
-  "version": "0.28.6"
+  "version": "0.28.7"
 }