@momentum-design/components 0.129.28 → 0.129.30

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

@@ -10,7 +10,7 @@ declare const Toggle_base: import("../../utils/mixins/index.types").Constructor<
  *
  * To create a group of toggles, use the `mdc-formfieldgroup` component.
  *
- * **Note:** This component internally renders a native checkbox input element styled as a toggle switch.
+ * **Note:** This component internally renders a native checkbox input element with the `switch` role, styled as a toggle switch.
  *
  * ## When to use
  * Use toggles for binary choices where the change takes effect immediately, such as enabling/disabling settings or features.
@@ -43,8 +43,9 @@ declare const Toggle_base: import("../../utils/mixins/index.types").Constructor<
  * @csspart help-text - The helper/validation text element.
  * @csspart helper-icon - The helper/validation icon element that is displayed next to the helper/validation text.
  * @csspart help-text-container - The container for the helper/validation icon and text elements.
+ * @csspart text-container - The container for the label and helper text elements.
  * @csspart static-toggle - The statictoggle that provides the visual toggle switch appearance.
- * @csspart toggle-input - The native checkbox input element that provides the interactive functionality.
+ * @csspart toggle-input - The native input element with switch role that provides the interactive functionality.
  */
 declare class Toggle extends Toggle_base implements AssociatedFormControl {
     /**
@@ -64,15 +65,15 @@ declare class Toggle extends Toggle_base implements AssociatedFormControl {
     connectedCallback(): void;
     protected firstUpdated(_changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>): void;
     /** @internal
-     * Resets the checkbox to its initial state.
+     * Resets the toggle switch to its initial state.
      * The checked property is set to false.
      */
     formResetCallback(): void;
     /** @internal */
     formStateRestoreCallback(state: string): void;
     /**
-     * Manages the required state of the checkbox.
-     * If the checkbox is not checked and the required property is set, then the checkbox is invalid.
+     * Manages the required state of the toggle switch.
+     * If the toggle switch is not checked and the required property is set, then the toggle switch is invalid.
      * If the validationMessage is set, it will be used as the custom validity message.
      * If the validationMessage is not set, it will clear the custom validity message.
      * @internal
@@ -114,6 +115,8 @@ declare class Toggle extends Toggle_base implements AssociatedFormControl {
      */
     private setToggleSize;
     update(changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>): void;
+    /** @internal */
+    private renderLabelAndHelperText;
     render(): import("lit-html").TemplateResult<1>;
     static styles: Array<CSSResult>;
 }

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

@@ -7,7 +7,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 var __metadata = (this && this.__metadata) || function (k, v) {
     if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
 };
-import { html } from 'lit';
+import { html, nothing } from 'lit';
 import { property } from 'lit/decorators.js';
 import { ifDefined } from 'lit/directives/if-defined.js';
 import { KEYS } from '../../utils/keys';
@@ -26,7 +26,7 @@ import styles from './toggle.styles';
  *
  * To create a group of toggles, use the `mdc-formfieldgroup` component.
  *
- * **Note:** This component internally renders a native checkbox input element styled as a toggle switch.
+ * **Note:** This component internally renders a native checkbox input element with the `switch` role, styled as a toggle switch.
  *
  * ## When to use
  * Use toggles for binary choices where the change takes effect immediately, such as enabling/disabling settings or features.
@@ -59,8 +59,9 @@ import styles from './toggle.styles';
  * @csspart help-text - The helper/validation text element.
  * @csspart helper-icon - The helper/validation icon element that is displayed next to the helper/validation text.
  * @csspart help-text-container - The container for the helper/validation icon and text elements.
+ * @csspart text-container - The container for the label and helper text elements.
  * @csspart static-toggle - The statictoggle that provides the visual toggle switch appearance.
- * @csspart toggle-input - The native checkbox input element that provides the interactive functionality.
+ * @csspart toggle-input - The native input element with switch role that provides the interactive functionality.
  */
 class Toggle extends AutoFocusOnMountMixin(FormInternalsMixin(DataAriaLabelMixin(FormfieldWrapper))) {
     constructor() {
@@ -79,6 +80,12 @@ class Toggle extends AutoFocusOnMountMixin(FormInternalsMixin(DataAriaLabelMixin
          * @default default
          */
         this.size = DEFAULTS.SIZE;
+        /** @internal */
+        this.renderLabelAndHelperText = () => {
+            if (!this.label)
+                return nothing;
+            return html `<div part="text-container">${this.renderLabel()} ${this.renderHelperText()}</div>`;
+        };
     }
     connectedCallback() {
         super.connectedCallback();
@@ -95,7 +102,7 @@ class Toggle extends AutoFocusOnMountMixin(FormInternalsMixin(DataAriaLabelMixin
         super.firstUpdated(_changedProperties);
     }
     /** @internal
-     * Resets the checkbox to its initial state.
+     * Resets the toggle switch to its initial state.
      * The checked property is set to false.
      */
     formResetCallback() {
@@ -108,8 +115,8 @@ class Toggle extends AutoFocusOnMountMixin(FormInternalsMixin(DataAriaLabelMixin
         }
     }
     /**
-     * Manages the required state of the checkbox.
-     * If the checkbox is not checked and the required property is set, then the checkbox is invalid.
+     * Manages the required state of the toggle switch.
+     * If the toggle switch is not checked and the required property is set, then the toggle switch is invalid.
      * If the validationMessage is set, it will be used as the custom validity message.
      * If the validationMessage is not set, it will clear the custom validity message.
      * @internal
@@ -216,7 +223,7 @@ class Toggle extends AutoFocusOnMountMixin(FormInternalsMixin(DataAriaLabelMixin
           id="${this.inputId}"
           type="checkbox"
           part="toggle-input"
-          role="${ROLE.CHECKBOX}"
+          role="${ROLE.SWITCH}"
           ?required="${this.required}"
           name="${ifDefined(this.name)}"
           value="${ifDefined(this.value)}"
@@ -231,7 +238,7 @@ class Toggle extends AutoFocusOnMountMixin(FormInternalsMixin(DataAriaLabelMixin
           @keydown="${this.handleKeyDown}"
         />
       </mdc-statictoggle>
-      ${this.renderLabel()} ${this.renderHelperText()}
+      ${this.renderLabelAndHelperText()}
     `;
     }
 }

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

@@ -9,24 +9,27 @@ const styles = [
       --mdc-label-line-height: var(--mds-font-apps-body-midsize-regular-line-height);
     }
 
-    /* Grid layout for labeled toggles */
+    /* Flexbox layout for labeled toggles */
     :host([label]),
     :host([help-text]) {
-      display: grid;
-      grid-template-rows: auto auto;
-      grid-template-columns: auto auto;
-      column-gap: 0.75rem;
-      row-gap: 0.25rem;
+      display: flex;
+      flex-direction: row;
+      align-items: flex-start;
+      gap: 0.75rem;
     }
 
-    :host([help-text='']) {
-      grid-template-rows: auto;
-      row-gap: 0rem;
+    :host([size='default'])::part(label-text) {
+      margin: 0.125rem 0;
     }
 
-    :host::part(label-text),
-    :host::part(help-text-container) {
-      grid-column: 2;
+    :host([size='compact'])::part(static-toggle) {
+      margin: 0.125rem 0;
+    }
+
+    :host::part(text-container) {
+      display: flex;
+      flex-direction: column;
+      gap: 0.25rem;
     }
 
     /* Component structure and layout */
@@ -37,8 +40,11 @@ const styles = [
       opacity: 0.1%;
       overflow: visible;
       z-index: 1;
-      width: var(--mdc-statictoggle-width);
-      height: var(--mdc-statictoggle-height);
+      width: 100%;
+      height: 100%;
+      top: 0;
+      left: 0;
+      cursor: pointer;
     }
 
     :host::part(label) {