@momentum-design/components 0.57.0 → 0.58.1

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

@@ -0,0 +1,82 @@
+import { css } from 'lit';
+const styles = [css `
+  :host {
+    --mdc-statictoggle-width: 3rem;
+    --mdc-statictoggle-height: 1.5rem;
+    --mdc-statictoggle-width-compact: 2rem;
+    --mdc-statictoggle-height-compact: 1rem;
+    --mdc-statictoggle-border-radius: 0.75rem;
+    --mdc-statictoggle-border-radius-compact: 0.5rem;
+    --mdc-statictoggle-border: 1px solid var(--mds-color-theme-outline-input-normal);
+
+    --mdc-statictoggle-inactive-rest-color: var(--mds-color-theme-control-inactive-normal);
+    --mdc-statictoggle-inactive-disabled-color: var(--mds-color-theme-control-inactive-disabled);
+    --mdc-statictoggle-active-rest-color: var(--mds-color-theme-control-active-normal);
+    --mdc-statictoggle-active-disabled-color: var(--mds-color-theme-control-active-disabled);
+
+    --mdc-statictoggle-icon-color-normal: var(--mds-color-theme-common-inverted-text-primary-normal);
+    --mdc-statictoggle-icon-color-disabled: var(--mds-color-theme-common-inverted-text-primary-disabled);
+    --mdc-statictoggle-icon-background-color-normal: var(--mds-color-theme-common-text-primary-normal);
+    --mdc-statictoggle-icon-background-color-disabled: var(--mds-color-theme-common-text-primary-disabled);
+
+    border-radius: var(--mdc-statictoggle-border-radius);
+  }
+
+  :host::part(slider) {
+    width: var(--mdc-statictoggle-width);
+    height: var(--mdc-statictoggle-height);
+    background: var(--mdc-statictoggle-inactive-rest-color);
+    border-radius: var(--mdc-statictoggle-border-radius);
+    border: var(--mdc-statictoggle-border);
+    display: flex;
+    align-items: center;
+    justify-content: flex-start;
+    transition: background-color 0.3s ease;
+    outline: none;
+    padding: 1px;
+  }
+
+  :host([checked])::part(slider) {
+    background-color: var(--mdc-statictoggle-active-rest-color);
+    justify-content: flex-end;
+    border-color: transparent;
+  }
+
+  :host([size='compact'])::part(slider) {
+    width: var(--mdc-statictoggle-width-compact);
+    height: var(--mdc-statictoggle-height-compact);
+    border-radius: var(--mdc-statictoggle-border-radius-compact);
+  }
+  
+  .icon {
+    padding: 0.25rem;
+    --mdc-icon-fill-color: var(--mdc-statictoggle-icon-color-normal);
+    background-color: var(--mdc-statictoggle-icon-background-color-normal);
+    border-radius: 50%;
+  }
+
+  :host([disabled]) .icon {
+    --mdc-icon-fill-color: var(--mdc-statictoggle-icon-color-disabled);
+    background-color: var(--mdc-statictoggle-icon-background-color-disabled);
+  }
+
+  :host([size='compact']) .icon {
+    padding: 0.125rem;
+  }
+
+  :host([disabled])::part(slider) {
+    background-color: var(--mdc-statictoggle-inactive-disabled-color);
+  }
+
+  :host([disabled][checked])::part(slider) {
+    background-color: var(--mdc-statictoggle-active-disabled-color);
+  }
+
+  /* High Contrast Mode */
+  @media (forced-colors: active) {
+    :host([checked])::part(slider), .icon {
+      border: var(--mdc-statictoggle-border);
+    }
+  }
+`];
+export default styles;

package/dist/components/statictoggle/statictoggle.types.d.ts

@@ -0,0 +1,4 @@
+import type { ValueOf } from '../../utils/types';
+import { TOGGLE_SIZE } from './statictoggle.constants';
+type ToggleSize = ValueOf<typeof TOGGLE_SIZE>;
+export type { ToggleSize };

package/dist/components/statictoggle/statictoggle.types.js

@@ -0,0 +1 @@
+export {};

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

@@ -1,5 +1,6 @@
-import Toggle from './toggle.component';
 import '../icon';
+import '../statictoggle';
+import Toggle from './toggle.component';
 declare global {
     interface HTMLElementTagNameMap {
         ['mdc-toggle']: Toggle;

package/dist/components/toggle/index.js

@@ -1,5 +1,6 @@
+import '../icon';
+import '../statictoggle';
 import Toggle from './toggle.component';
 import { TAG_NAME } from './toggle.constants';
-import '../icon';
 Toggle.register(TAG_NAME);
 export default Toggle;

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

@@ -1,7 +1,7 @@
 import { CSSResult, PropertyValueMap } from 'lit';
-import FormfieldWrapper from '../formfieldwrapper';
-import { ToggleSize } from './toggle.types';
 import { AssociatedFormControl } from '../../utils/mixins/FormInternalsMixin';
+import FormfieldWrapper from '../formfieldwrapper';
+import type { ToggleSize } from './toggle.types';
 declare const Toggle_base: import("../../utils/mixins/index.types").Constructor<import("../../utils/mixins/FormInternalsMixin").FormInternalsMixinInterface> & import("../../utils/mixins/index.types").Constructor<import("../../utils/mixins/DataAriaLabelMixin").DataAriaLabelMixinInterface> & typeof FormfieldWrapper;
 /**
  * Toggle Component is an interactive control used to switch between two mutually exclusive options,
@@ -14,30 +14,26 @@ declare const Toggle_base: import("../../utils/mixins/index.types").Constructor<
  * Note: It internally renders a checkbox styled as a toggle switch.
  *
  * @dependency mdc-icon
+ * @dependency mdc-statictoggle
  *
  * @tagname mdc-toggle
  *
  * @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-border-radius - border radius of the toggle
- * @cssproperty --mdc-toggle-border-radius-compact - border radius of the toggle when it's size is compact
- * @cssproperty --mdc-toggle-border - border of the toggle
- * @cssproperty --mdc-toggle-inactive-rest-color - background color of the inactive toggle in rest 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-inactive-disabled-color - background color of the inactive toggle in disabled state
- * @cssproperty --mdc-toggle-active-rest-color - background color of the active toggle in rest state
- * @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-active-disabled-color - background color of the active toggle in disabled state
- * @cssproperty --mdc-toggle-help-text-color -  color of the help text label
- * @cssproperty --mdc-toggle-label-color-disabled - color of the toggle label and help text in disabled state
- *
+ * @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-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
+ * @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
  */
 declare class Toggle extends Toggle_base implements AssociatedFormControl {
     /**

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

@@ -10,12 +10,12 @@ var __metadata = (this && this.__metadata) || function (k, v) {
 import { html } from 'lit';
 import { property } from 'lit/decorators.js';
 import { ifDefined } from 'lit/directives/if-defined.js';
-import styles from './toggle.styles';
-import FormfieldWrapper from '../formfieldwrapper';
-import { DEFAULTS as FORMFIELD_DEFAULTS } from '../formfieldwrapper/formfieldwrapper.constants';
-import { DEFAULTS, ICON_NAME, ICON_SIZE_IN_REM, TOGGLE_SIZE } from './toggle.constants';
 import { DataAriaLabelMixin } from '../../utils/mixins/DataAriaLabelMixin';
 import { FormInternalsMixin } from '../../utils/mixins/FormInternalsMixin';
+import FormfieldWrapper from '../formfieldwrapper';
+import { DEFAULTS as FORMFIELD_DEFAULTS } from '../formfieldwrapper/formfieldwrapper.constants';
+import { DEFAULTS, TOGGLE_SIZE } from './toggle.constants';
+import styles from './toggle.styles';
 /**
  * Toggle Component is an interactive control used to switch between two mutually exclusive options,
  * such as On/Off, Active/Inactive. These are commonly used in settings panels, forms, and preference selections
@@ -27,30 +27,26 @@ import { FormInternalsMixin } from '../../utils/mixins/FormInternalsMixin';
  * Note: It internally renders a checkbox styled as a toggle switch.
  *
  * @dependency mdc-icon
+ * @dependency mdc-statictoggle
  *
  * @tagname mdc-toggle
  *
  * @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-border-radius - border radius of the toggle
- * @cssproperty --mdc-toggle-border-radius-compact - border radius of the toggle when it's size is compact
- * @cssproperty --mdc-toggle-border - border of the toggle
- * @cssproperty --mdc-toggle-inactive-rest-color - background color of the inactive toggle in rest 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-inactive-disabled-color - background color of the inactive toggle in disabled state
- * @cssproperty --mdc-toggle-active-rest-color - background color of the active toggle in rest state
- * @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-active-disabled-color - background color of the active toggle in disabled state
- * @cssproperty --mdc-toggle-help-text-color -  color of the help text label
- * @cssproperty --mdc-toggle-label-color-disabled - color of the toggle label and help text in disabled state
- *
+ * @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-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
+ * @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
  */
 class Toggle extends FormInternalsMixin(DataAriaLabelMixin(FormfieldWrapper)) {
     constructor() {
@@ -177,11 +173,17 @@ class Toggle extends FormInternalsMixin(DataAriaLabelMixin(FormfieldWrapper)) {
     render() {
         var _a;
         return html `
-        <div class="mdc-toggle__container mdc-focus-ring">
+        <mdc-statictoggle
+          ?checked="${this.checked}"
+          ?disabled="${this.disabled}"
+          size="${this.size}"
+          class="mdc-focus-ring"
+          part="container"
+        >
           <input
             id="${this.id}"
             type="checkbox"
-            class="mdc-toggle__input"
+            part="toggle-input"
             role="switch"
             ?autofocus="${this.autofocus}"
             ?required="${!!this.requiredLabel}"
@@ -196,15 +198,7 @@ class Toggle extends FormInternalsMixin(DataAriaLabelMixin(FormfieldWrapper)) {
             @change="${this.handleChange}"
             @keydown="${this.handleKeyDown}"
           />
-          <div class="mdc-toggle__slider">
-            <mdc-icon
-              name="${this.checked ? ICON_NAME.CHECKED : ICON_NAME.UNCHECKED}"
-              class="mdc-toggle__icon"
-              length-unit="rem"
-              size="${ICON_SIZE_IN_REM[this.size]}"
-            ></mdc-icon>
-          </div>
-        </div>
+        </mdc-statictoggle>
         ${this.renderLabel()}
         ${this.renderHelperText()}
     `;

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

@@ -6,18 +6,6 @@ const styles = [hostFitContentStyles, css `
     --mdc-toggle-height: 1.5rem;
     --mdc-toggle-width-compact: 2rem;
     --mdc-toggle-height-compact: 1rem;
-    --mdc-toggle-border-radius: 0.75rem;
-    --mdc-toggle-border-radius-compact: 0.5rem;
-    --mdc-toggle-border: 0.0625rem solid var(--mds-color-theme-outline-input-normal);
-
-    --mdc-toggle-inactive-rest-color: var(--mds-color-theme-control-inactive-normal);
-    --mdc-toggle-inactive-hover-color: var(--mds-color-theme-control-inactive-hover);
-    --mdc-toggle-inactive-pressed-color: var(--mds-color-theme-control-inactive-pressed);
-    --mdc-toggle-inactive-disabled-color: var(--mds-color-theme-control-inactive-disabled);
-    --mdc-toggle-active-rest-color: var(--mds-color-theme-control-active-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-active-disabled-color: var(--mds-color-theme-control-active-disabled);
 
     --mdc-toggle-label-lineheight: var(--mds-font-lineheight-body-midsize);
     --mdc-toggle-label-fontsize: var(--mds-font-size-body-midsize);
@@ -25,10 +13,10 @@ const styles = [hostFitContentStyles, css `
     --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-icon-color-normal: var(--mds-color-theme-common-inverted-text-primary-normal);
-    --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);
+    --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);
   }
 
   :host([label]), :host([help-text]){
@@ -44,113 +32,55 @@ const styles = [hostFitContentStyles, css `
     row-gap: 0rem;
   }
 
-  .mdc-toggle__container {
-    position: relative;
-    border-radius: var(--mdc-toggle-border-radius);
-  }
-
-  .mdc-toggle__input {
-    opacity: 0;
-    position: absolute;
-    cursor: pointer;
+  :host::part(toggle-input) {
     margin: 0;
+    padding: 0;
+    position: absolute;
+    opacity: 0.1%;
+    overflow: visible;
+    z-index: 1;
     width: var(--mdc-toggle-width);
     height: var(--mdc-toggle-height);
   }
 
-  .mdc-toggle__slider {
-    width: var(--mdc-toggle-width);
-    height: var(--mdc-toggle-height);
-    background: var(--mdc-toggle-inactive-rest-color);
-    border-radius: var(--mdc-toggle-border-radius);
-    border: var(--mdc-toggle-border);
-    display: flex;
-    align-items: center;
-    justify-content: flex-start;
-    transition: background-color 0.3s ease;
-    outline: none;
-    padding: 0.0625rem;
-  }
-
-  :host([checked]) .mdc-toggle__slider {
-    background-color: var(--mdc-toggle-active-rest-color);
-    justify-content: flex-end;
-    border-color: transparent;
-  }
-
-  :host([size='compact']) .mdc-toggle__slider {
-    width: var(--mdc-toggle-width-compact);
-    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-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);
+    grid-column: 2;
   }
 
-  .mdc-toggle__icon {
-    padding: 0.25rem;
-   --mdc-icon-fill-color: var(--mdc-toggle-icon-color-normal);
-   background-color: var(--mdc-toggle-icon-background-color-normal);
-   border-radius: 50%;
+  .mdc-label, :host::part(toggle-input) {
+    cursor: pointer;
   }
 
-  :host([disabled]) .mdc-toggle__icon {
-    --mdc-icon-fill-color: var(--mdc-toggle-icon-color-disabled);
+  :host([disabled]) .mdc-label,
+  :host([disabled])::part(toggle-input) {
+    cursor: default;
   }
 
-  :host([size='compact']) .mdc-toggle__icon {
-    padding: 0.125rem;
+  .mdc-help-text {
+    color: var(--mdc-toggle-help-text-color);
   }
 
-  :host(:not([disabled])) .mdc-toggle__container:hover .mdc-toggle__slider {
+  :host(:hover:not([disabled]))::part(container) {
     background-color: var(--mdc-toggle-inactive-hover-color);
   }
 
-  :host(:not([disabled])) .mdc-toggle__container:active .mdc-toggle__slider {
+  :host(:active:not([disabled]))::part(container) {
     background-color: var(--mdc-toggle-inactive-pressed-color);
   }
 
-  :host(:not([disabled])[checked]) .mdc-toggle__container:hover .mdc-toggle__slider {
+  :host(:hover:not([disabled])[checked])::part(container) {
     background-color: var(--mdc-toggle-active-hover-color);
   }
 
-  :host(:not([disabled])[checked]) .mdc-toggle__container:active .mdc-toggle__slider {
+  :host(:active:not([disabled])[checked])::part(container) {
     background-color: var(--mdc-toggle-active-pressed-color);
   }
 
-  :host([disabled]) .mdc-toggle__slider {
-    background-color: var(--mdc-toggle-inactive-disabled-color);
-  }
-
-  :host([disabled][checked]) .mdc-toggle__slider {
-    background-color: var(--mdc-toggle-active-disabled-color);
-  }
-
-  :host([disabled]) .mdc-toggle__icon {
-    background-color: var(--mdc-toggle-icon-background-color-disabled);
-  }
-
-  .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);
-    grid-column: 2;
-  }
-
-  .mdc-help-text {
-    color: var(--mdc-toggle-help-text-color);
-  }
-
   :host([disabled]) .mdc-label-text, :host([disabled]) .mdc-help-text {
     color: var(--mdc-toggle-label-color-disabled);
   }
-
-   /* High Contrast Mode */
-   @media (forced-colors: active) {
-    :host([checked]) .mdc-toggle__slider, .mdc-toggle__icon {
-      border: var(--mdc-toggle-border);
-    }
-  }
 `, ...hostFocusRingStyles(true)];
 export default styles;