@momentum-design/components 0.129.28 → 0.129.29

package/dist/components/statictoggle/statictoggle.styles.js

@@ -11,6 +11,7 @@ const styles = [
       --mdc-statictoggle-icon-background-color: var(--mds-color-theme-common-text-primary-normal);
 
       border-radius: var(--mdc-statictoggle-border-radius);
+      position: relative;
     }
 
     :host::part(slider) {
@@ -24,7 +25,7 @@ const styles = [
       justify-content: flex-start;
       transition: background-color 0.3s ease;
       outline: none;
-      padding: 0.125rem;
+      padding: calc(0.125rem - 1px);
     }
 
     :host::part(toggle-icon) {

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) {

package/dist/custom-elements.json

@@ -153,8 +153,8 @@
               "attribute": "disabled",
               "reflects": true,
               "inheritedFrom": {
-                "name": "DisabledMixin",
-                "module": "utils/mixins/DisabledMixin.js"
+                "name": "AccordionButton",
+                "module": "components/accordionbutton/accordionbutton.component.js"
               }
             },
             {
@@ -412,8 +412,8 @@
               "default": "undefined",
               "fieldName": "disabled",
               "inheritedFrom": {
-                "name": "DisabledMixin",
-                "module": "src/utils/mixins/DisabledMixin.ts"
+                "name": "AccordionButton",
+                "module": "src/components/accordionbutton/accordionbutton.component.ts"
               }
             },
             {
@@ -48509,7 +48509,7 @@
       "declarations": [
         {
           "kind": "class",
-          "description": "The Toggle component is an interactive control used to switch between two mutually exclusive states,\nsuch as On/Off or Active/Inactive. It is commonly used in settings panels, forms, and preference selections\nwhere users need to enable or disable a feature.\n\nTo create a group of toggles, use the `mdc-formfieldgroup` component.\n\n**Note:** This component internally renders a native checkbox input element styled as a toggle switch.\n\n## When to use\nUse toggles for binary choices where the change takes effect immediately, such as enabling/disabling settings or features.\n\n## Accessibility\n- Provide clear labels that describe what the toggle controls\n- Use `data-aria-label` when a visual label is not present\n- Keyboard navigation: Space to toggle, Tab to navigate, Enter to submit form\n\n## Styling\nUse the `static-toggle` part to apply custom styles to the toggle switch visual element.\nThis part exposes the underlying [StaticToggle](?path=/docs/components-decorator-statictoggle--docs) component for advanced styling.",
+          "description": "The Toggle component is an interactive control used to switch between two mutually exclusive states,\nsuch as On/Off or Active/Inactive. It is commonly used in settings panels, forms, and preference selections\nwhere users need to enable or disable a feature.\n\nTo create a group of toggles, use the `mdc-formfieldgroup` component.\n\n**Note:** This component internally renders a native checkbox input element with the `switch` role, styled as a toggle switch.\n\n## When to use\nUse toggles for binary choices where the change takes effect immediately, such as enabling/disabling settings or features.\n\n## Accessibility\n- Provide clear labels that describe what the toggle controls\n- Use `data-aria-label` when a visual label is not present\n- Keyboard navigation: Space to toggle, Tab to navigate, Enter to submit form\n\n## Styling\nUse the `static-toggle` part to apply custom styles to the toggle switch visual element.\nThis part exposes the underlying [StaticToggle](?path=/docs/components-decorator-statictoggle--docs) component for advanced styling.",
           "name": "Toggle",
           "cssParts": [
             {
@@ -48576,12 +48576,16 @@
                 "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
               }
             },
+            {
+              "description": "The container for the label and helper text elements.",
+              "name": "text-container"
+            },
             {
               "description": "The statictoggle that provides the visual toggle switch appearance.",
               "name": "static-toggle"
             },
             {
-              "description": "The native checkbox input element that provides the interactive functionality.",
+              "description": "The native input element with switch role that provides the interactive functionality.",
               "name": "toggle-input"
             }
           ],
@@ -49234,7 +49238,7 @@
             "module": "/src/components/formfieldwrapper"
           },
           "tagName": "mdc-toggle",
-          "jsDoc": "/**\n * The Toggle component is an interactive control used to switch between two mutually exclusive states,\n * such as On/Off or Active/Inactive. It is commonly used in settings panels, forms, and preference selections\n * where users need to enable or disable a feature.\n *\n * To create a group of toggles, use the `mdc-formfieldgroup` component.\n *\n * **Note:** This component internally renders a native checkbox input element styled as a toggle switch.\n *\n * ## When to use\n * Use toggles for binary choices where the change takes effect immediately, such as enabling/disabling settings or features.\n *\n * ## Accessibility\n * - Provide clear labels that describe what the toggle controls\n * - Use `data-aria-label` when a visual label is not present\n * - Keyboard navigation: Space to toggle, Tab to navigate, Enter to submit form\n *\n * ## Styling\n * Use the `static-toggle` part to apply custom styles to the toggle switch visual element.\n * This part exposes the underlying [StaticToggle](?path=/docs/components-decorator-statictoggle--docs) component for advanced styling.\n *\n * @dependency mdc-button\n * @dependency mdc-icon\n * @dependency mdc-statictoggle\n * @dependency mdc-text\n * @dependency mdc-toggletip\n *\n * @tagname mdc-toggle\n *\n * @event change - (React: onChange) Event that gets dispatched when the toggle state changes.\n * @event focus - (React: onFocus) Event that gets dispatched when the toggle receives focus.\n *\n * @csspart label - The label element.\n * @csspart label-text - The container for the label and required indicator elements.\n * @csspart required-indicator - The required indicator element that is displayed next to the label when the `required` property is set to true.\n * @csspart info-icon-btn - The info icon button element that is displayed next to the label when the `toggletip-text` property is set.\n * @csspart label-toggletip - The toggletip element that is displayed when the info icon button is clicked.\n * @csspart help-text - The helper/validation text element.\n * @csspart helper-icon - The helper/validation icon element that is displayed next to the helper/validation text.\n * @csspart help-text-container - The container for the helper/validation icon and text elements.\n * @csspart static-toggle - The statictoggle that provides the visual toggle switch appearance.\n * @csspart toggle-input - The native checkbox input element that provides the interactive functionality.\n */",
+          "jsDoc": "/**\n * The Toggle component is an interactive control used to switch between two mutually exclusive states,\n * such as On/Off or Active/Inactive. It is commonly used in settings panels, forms, and preference selections\n * where users need to enable or disable a feature.\n *\n * To create a group of toggles, use the `mdc-formfieldgroup` component.\n *\n * **Note:** This component internally renders a native checkbox input element with the `switch` role, styled as a toggle switch.\n *\n * ## When to use\n * Use toggles for binary choices where the change takes effect immediately, such as enabling/disabling settings or features.\n *\n * ## Accessibility\n * - Provide clear labels that describe what the toggle controls\n * - Use `data-aria-label` when a visual label is not present\n * - Keyboard navigation: Space to toggle, Tab to navigate, Enter to submit form\n *\n * ## Styling\n * Use the `static-toggle` part to apply custom styles to the toggle switch visual element.\n * This part exposes the underlying [StaticToggle](?path=/docs/components-decorator-statictoggle--docs) component for advanced styling.\n *\n * @dependency mdc-button\n * @dependency mdc-icon\n * @dependency mdc-statictoggle\n * @dependency mdc-text\n * @dependency mdc-toggletip\n *\n * @tagname mdc-toggle\n *\n * @event change - (React: onChange) Event that gets dispatched when the toggle state changes.\n * @event focus - (React: onFocus) Event that gets dispatched when the toggle receives focus.\n *\n * @csspart label - The label element.\n * @csspart label-text - The container for the label and required indicator elements.\n * @csspart required-indicator - The required indicator element that is displayed next to the label when the `required` property is set to true.\n * @csspart info-icon-btn - The info icon button element that is displayed next to the label when the `toggletip-text` property is set.\n * @csspart label-toggletip - The toggletip element that is displayed when the info icon button is clicked.\n * @csspart help-text - The helper/validation text element.\n * @csspart helper-icon - The helper/validation icon element that is displayed next to the helper/validation text.\n * @csspart help-text-container - The container for the helper/validation icon and text elements.\n * @csspart text-container - The container for the label and helper text elements.\n * @csspart static-toggle - The statictoggle that provides the visual toggle switch appearance.\n * @csspart toggle-input - The native input element with switch role that provides the interactive functionality.\n */",
           "customElement": true,
           "slots": [
             {

package/dist/react/toggle/index.d.ts

@@ -8,7 +8,7 @@ import type { Events } from '../../components/toggle/toggle.types';
  *
  * 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.
@@ -41,8 +41,9 @@ import type { Events } from '../../components/toggle/toggle.types';
  * @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 const reactWrapper: import("@lit/react").ReactWebComponent<Component, {
     onChange: EventName<Events["onChangeEvent"]>;

package/dist/react/toggle/index.js

@@ -9,7 +9,7 @@ import { TAG_NAME } from '../../components/toggle/toggle.constants';
  *
  * 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.
@@ -42,8 +42,9 @@ import { TAG_NAME } from '../../components/toggle/toggle.constants';
  * @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.
  */
 const reactWrapper = createComponent({
     tagName: TAG_NAME,

package/dist/utils/roles.d.ts

@@ -24,6 +24,7 @@ declare const ROLE: {
     readonly RADIO: "radio";
     readonly RADIOGROUP: "radiogroup";
     readonly REGION: "region";
+    readonly SWITCH: "switch";
     readonly TAB: "tab";
     readonly TABLIST: "tablist";
     readonly TOOLTIP: "tooltip";

package/dist/utils/roles.js

@@ -24,6 +24,7 @@ const ROLE = {
     RADIO: 'radio',
     RADIOGROUP: 'radiogroup',
     REGION: 'region',
+    SWITCH: 'switch',
     TAB: 'tab',
     TABLIST: 'tablist',
     TOOLTIP: 'tooltip',

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@momentum-design/components",
   "packageManager": "yarn@3.2.4",
-  "version": "0.129.28",
+  "version": "0.129.29",
   "engines": {
     "node": ">=20.0.0",
     "npm": ">=8.0.0"