@momentum-design/components 0.120.31 → 0.120.32

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

@@ -40,16 +40,13 @@ import styles from './toggle.styles';
  * @event change - (React: onChange) Event that gets dispatched when the toggle state changes.
  * @event focus - (React: onFocus) Event that gets dispatched when the toggle receives focus.
  *
- * @cssproperty --mdc-toggle-width - Width of the toggle
- * @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-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
- * @cssproperty --mdc-toggle-active-pressed-color - Background color of the active toggle in pressed state
- * @cssproperty --mdc-toggle-inactive-hover-color - Background color of the inactive toggle in hover state
- * @cssproperty --mdc-toggle-inactive-pressed-color - Background color of the inactive toggle in pressed state
+ * @cssproperty --mdc-toggle-width - The width of the toggle
+ * @cssproperty --mdc-toggle-height - The height of the toggle
+ * @cssproperty --mdc-toggle-border-radius - The border radius of the toggle
+ * @cssproperty --mdc-toggle-border-color - The border color of the toggle
+ * @cssproperty --mdc-toggle-background-color - The background color of the toggle
+ * @cssproperty --mdc-toggle-icon-color - The icon color of the toggle
+ * @cssproperty --mdc-toggle-icon-background-color - The icon background color of the toggle
  *
  * @csspart label - The label element.
  * @csspart label-text - The container for the label and required indicator elements.
@@ -59,7 +56,7 @@ 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 container - The container element that wraps the toggle input.
+ * @csspart static-toggle - The static-toggle element that wraps the toggle input.
  * @csspart toggle-input - The native checkbox input element styled as a toggle switch.
  */
 class Toggle extends AutoFocusOnMountMixin(FormInternalsMixin(DataAriaLabelMixin(FormfieldWrapper))) {
@@ -80,7 +77,7 @@ class Toggle extends AutoFocusOnMountMixin(FormInternalsMixin(DataAriaLabelMixin
     }
     connectedCallback() {
         super.connectedCallback();
-        // Toggle does not contain helpTextType property.   
+        // Toggle does not contain helpTextType property.
         this.helpTextType = undefined;
     }
     firstUpdated(_changedProperties) {
@@ -202,7 +199,7 @@ class Toggle extends AutoFocusOnMountMixin(FormInternalsMixin(DataAriaLabelMixin
         ?soft-disabled="${this.softDisabled}"
         size="${this.size}"
         class="mdc-focus-ring"
-        part="container"
+        part="static-toggle"
       >
         <input
           id="${this.inputId}"

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

@@ -3,22 +3,6 @@ import { hostFitContentStyles, hostFocusRingStyles } from '../../utils/styles';
 const styles = [
     hostFitContentStyles,
     css `
-    /* Base styles and CSS custom properties */
-    :host {
-      --mdc-toggle-width: 3rem;
-      --mdc-toggle-height: 1.5rem;
-      --mdc-toggle-width-compact: 2rem;
-      --mdc-toggle-height-compact: 1rem;
-
-      --mdc-toggle-label-color-disabled: var(--mds-color-theme-text-primary-disabled);
-      --mdc-toggle-help-text-color: var(--mds-color-theme-text-secondary-normal);
-
-      --mdc-toggle-active-hover-color: var(--mds-color-theme-control-active-hover);
-      --mdc-toggle-active-pressed-color: var(--mds-color-theme-control-active-pressed);
-      --mdc-toggle-inactive-hover-color: var(--mds-color-theme-control-inactive-hover);
-      --mdc-toggle-inactive-pressed-color: var(--mds-color-theme-control-inactive-pressed);
-    }
-
     /* Grid layout for labeled toggles */
     :host([label]),
     :host([help-text]) {
@@ -54,13 +38,9 @@ const styles = [
     :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::part(help-text) {
-      color: var(--mdc-toggle-help-text-color);
+      --mdc-label-font-size: var(--mds-font-apps-body-midsize-regular-font-size);
+      --mdc-label-font-weight: var(--mds-font-apps-body-midsize-regular-font-weight);
+      --mdc-label-line-height: var(--mds-font-apps-body-midsize-regular-line-height);
     }
 
     /* Default interactive states */
@@ -69,54 +49,28 @@ const styles = [
       cursor: pointer;
     }
 
-    :host(:hover)::part(container) {
-      background-color: var(--mdc-toggle-inactive-hover-color);
+    :host(:hover)::part(static-toggle) {
+      --mdc-toggle-background-color: var(--mds-color-theme-control-inactive-hover);
     }
 
-    :host(:active)::part(container) {
-      background-color: var(--mdc-toggle-inactive-pressed-color);
+    :host(:active)::part(static-toggle) {
+      --mdc-toggle-background-color: var(--mds-color-theme-control-inactive-pressed);
     }
 
-    :host([checked]:hover)::part(container) {
-      background-color: var(--mdc-toggle-active-hover-color);
+    :host([checked]:hover)::part(static-toggle) {
+      --mdc-toggle-background-color: var(--mds-color-theme-control-active-hover);
     }
 
-    :host([checked]:active)::part(container) {
-      background-color: var(--mdc-toggle-active-pressed-color);
+    :host([checked]:active)::part(static-toggle) {
+      --mdc-toggle-background-color: var(--mds-color-theme-control-active-pressed);
     }
 
     /* Readonly state - disables pointer events */
     :host([readonly]),
+    :host([disabled]),
     :host([soft-disabled]) {
       pointer-events: none;
     }
-
-    /* Disabled states override interactive styles */
-    :host([disabled])::part(label),
-    :host([disabled])::part(toggle-input),
-    :host([soft-disabled])::part(label),
-    :host([soft-disabled])::part(toggle-input) {
-      cursor: default;
-    }
-
-    :host([disabled]:hover)::part(container),
-    :host([disabled]:active)::part(container),
-    :host([disabled][checked]:hover)::part(container),
-    :host([disabled][checked]:active)::part(container),
-    :host([soft-disabled]:hover)::part(container),
-    :host([soft-disabled]:active)::part(container),
-    :host([soft-disabled][checked]:hover)::part(container),
-    :host([soft-disabled][checked]:active)::part(container) {
-      background-color: unset;
-    }
-
-    :host([disabled])::part(label-text),
-    :host([disabled])::part(help-text),
-    :host([soft-disabled])::part(label),
-    :host([soft-disabled])::part(label-text),
-    :host([soft-disabled])::part(help-text) {
-      color: var(--mdc-toggle-label-color-disabled);
-    }
   `,
     ...hostFocusRingStyles(true),
 ];