@momentum-design/components 0.120.31 → 0.120.32

package/dist/components/staticcheckbox/staticcheckbox.styles.js

@@ -2,82 +2,80 @@ import { css } from 'lit';
 const styles = [
     css `
     :host {
+      --mdc-checkbox-border-color: var(--mds-color-theme-outline-input-normal);
+      --mdc-checkbox-background-color: var(--mds-color-theme-control-inactive-normal);
+      --mdc-checkbox-icon-color: var(--mds-color-theme-inverted-text-primary-normal);
+      --mdc-checkbox-size: 1rem;
       margin: 0.125rem 0;
       border-radius: 0.125rem;
-      --mdc-staticcheckbox-border-color: var(--mds-color-theme-outline-button-normal);
-      --mdc-staticcheckbox-checked-background-color: var(--mds-color-theme-control-active-normal);
-      --mdc-staticcheckbox-disabled-background-color: var(--mds-color-theme-control-inactive-disabled);
-      --mdc-staticcheckbox-disabled-icon-color: var(--mds-color-theme-text-primary-disabled);
-      --mdc-staticcheckbox-icon-background-color: var(--mds-color-theme-control-inactive-normal);
-      --mdc-staticcheckbox-icon-border-color: var(--mds-color-theme-outline-input-normal);
-      --mdc-staticcheckbox-icon-color: var(--mds-color-theme-inverted-text-primary-normal);
-      --mdc-staticcheckbox-disabled-border-color: var(--mds-color-theme-outline-primary-disabled);
-      --mdc-staticcheckbox-disabled-checked-icon-color: var(--mds-color-theme-control-active-disabled);
-      --mdc-staticcheckbox-readonly-border-color: var(--mds-color-theme-outline-primary-normal);
-      --mdc-staticcheckbox-text-normal-color: var(--mds-color-theme-text-primary-normal);
-    }
-
-    :host([checked])::part(icon-container),
-    :host([indeterminate])::part(icon-container) {
-      background-color: var(--mdc-staticcheckbox-checked-background-color);
-      border-color: transparent;
-    }
-
-    :host([disabled])::part(icon-container),
-    :host([soft-disabled])::part(icon-container),
-    :host([disabled][readonly])::part(icon-container),
-    :host([soft-disabled][readonly])::part(icon-container) {
-      border-color: var(--mdc-staticcheckbox-disabled-border-color);
-      background-color: var(--mdc-staticcheckbox-disabled-background-color);
-    }
-
-    :host([disabled][checked])::part(icon-container),
-    :host([disabled][indeterminate])::part(icon-container),
-    :host([soft-disabled][checked])::part(icon-container),
-    :host([soft-disabled][indeterminate])::part(icon-container),
-    :host([disabled][readonly][checked])::part(icon-container),
-    :host([disabled][readonly][indeterminate])::part(icon-container),
-    :host([soft-disabled][readonly][checked])::part(icon-container),
-    :host([soft-disabled][readonly][indeterminate])::part(icon-container) {
-      background-color: var(--mdc-staticcheckbox-disabled-checked-icon-color);
-      border: 0.0625rem solid var(--mdc-staticcheckbox-disabled-border-color);
     }
 
     :host::part(icon-container) {
       display: flex;
       align-items: center;
-      border: 0.0625rem solid var(--mdc-staticcheckbox-icon-border-color);
-      background-color: var(--mdc-staticcheckbox-icon-background-color);
-      width: 1rem;
-      height: 1rem;
+      border: 0.0625rem solid var(--mdc-checkbox-border-color);
+      background-color: var(--mdc-checkbox-background-color);
+      width: var(--mdc-checkbox-size);
+      height: var(--mdc-checkbox-size);
       border-radius: 0.125rem;
     }
 
-    :host([readonly])::part(icon-container) {
-      border-color: var(--mdc-staticcheckbox-readonly-border-color);
-      background-color: unset;
+    :host::part(checkbox-icon) {
+      --mdc-icon-fill-color: var(--mdc-checkbox-icon-color);
     }
 
-    :host::part(checkbox-icon) {
-      --mdc-icon-fill-color: var(--mdc-staticcheckbox-icon-color);
+    :host([checked]),
+    :host([indeterminate]) {
+      --mdc-checkbox-background-color: var(--mds-color-theme-control-active-normal);
+      --mdc-checkbox-border-color: transparent;
+    }
+
+    :host([readonly]) {
+      --mdc-checkbox-border-color: var(--mds-color-theme-outline-primary-normal);
+      --mdc-checkbox-background-color: var(--mds-color-theme-control-inactive-disabled);
+      --mdc-checkbox-icon-color: var(--mds-color-theme-text-primary-normal);
     }
 
-    :host([disabled])::part(checkbox-icon),
-    :host([soft-disabled])::part(checkbox-icon),
-    :host([disabled][readonly])::part(checkbox-icon),
-    :host([soft-disabled][readonly])::part(checkbox-icon) {
-      --mdc-icon-fill-color: var(--mdc-staticcheckbox-disabled-icon-color);
+    :host([disabled]),
+    :host([soft-disabled]) {
+      --mdc-checkbox-border-color: var(--mds-color-theme-outline-primary-disabled);
+      --mdc-checkbox-background-color: var(--mds-color-theme-control-inactive-disabled);
+      --mdc-checkbox-icon-color: var(--mds-color-theme-text-primary-disabled);
+      cursor: default;
     }
 
-    :host([readonly])::part(checkbox-icon) {
-      --mdc-icon-fill-color: var(--mdc-staticcheckbox-text-normal-color);
+    :host([disabled][checked]),
+    :host([disabled][indeterminate]),
+    :host([soft-disabled][checked]),
+    :host([soft-disabled][indeterminate]) {
+      --mdc-checkbox-background-color: var(--mds-color-theme-control-active-disabled);
+      --mdc-checkbox-border-color: var(--mds-color-theme-outline-primary-disabled);
     }
 
     /* High Contrast Mode */
     @media (forced-colors: active) {
-      :host([checked])::part(icon-container),
-      :host([indeterminate])::part(icon-container) {
-        border: 0.0625rem solid var(--mdc-staticcheckbox-border-color);
+      :host([checked]),
+      :host([indeterminate]) {
+        --mdc-checkbox-background-color: SelectedItem;
+        --mdc-checkbox-border-color: SelectedItemText;
+        --mdc-checkbox-icon-color: SelectedItemText;
+      }
+      :host([readonly]) {
+        --mdc-checkbox-border-color: Highlight;
+        --mdc-checkbox-icon-color: HighlightText;
+      }
+      :host([disabled]),
+      :host([soft-disabled]) {
+        --mdc-checkbox-background-color: GrayText;
+        --mdc-checkbox-border-color: GrayText;
+        --mdc-checkbox-icon-color: GrayText;
+      }
+      :host([disabled][checked]),
+      :host([disabled][indeterminate]),
+      :host([soft-disabled][checked]),
+      :host([soft-disabled][indeterminate]) {
+        --mdc-checkbox-border-color: GrayText;
+        --mdc-checkbox-icon-color: GrayText;
       }
     }
   `,

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

@@ -9,18 +9,11 @@ declare const StaticRadio_base: import("../../utils/mixins/index.types").Constru
  *
  * @tagname mdc-staticradio
  *
- * @cssproperty --mdc-staticradio-inner-circle-size - size of the inner circle
- * @cssproperty --mdc-staticradio-text-disabled-color - color of the label when disabled
- * @cssproperty --mdc-staticradio-normal-border-color - color of the radio button border when normal
- * @cssproperty --mdc-staticradio-disabled-border-color - color of the radio button border when disabled
- * @cssproperty --mdc-staticradio-inner-circle-normal-background - background color of the inner circle when normal
- * @cssproperty --mdc-staticradio-inner-circle-disabled-background - background color of the inner circle when disabled
- * @cssproperty --mdc-staticradio-control-inactive-color - color of the radio button when inactive
- * @cssproperty --mdc-staticradio-control-inactive-disabled-background - background color of the radio button when
- *  inactive and disabled
- * @cssproperty --mdc-staticradio-control-active-color - color of the radio button when active
- * @cssproperty --mdc-staticradio-control-active-disabled-background - background color of the radio button
- *  when active and disabled
+ * @cssproperty --mdc-radio-inner-circle-size - size of the inner circle
+ * @cssproperty --mdc-radio-outer-circle-size - size of the outer circle
+ * @cssproperty --mdc-radio-inner-circle-background-color - background color of the inner circle
+ * @cssproperty --mdc-radio-outer-circle-border-color - border color of the outer circle
+ * @cssproperty --mdc-radio-outer-circle-background-color - background color of the outer circle
  *
  * @csspart radio-icon - The radio icon.
  *

package/dist/components/staticradio/staticradio.component.js

@@ -20,18 +20,11 @@ import styles from './staticradio.styles';
  *
  * @tagname mdc-staticradio
  *
- * @cssproperty --mdc-staticradio-inner-circle-size - size of the inner circle
- * @cssproperty --mdc-staticradio-text-disabled-color - color of the label when disabled
- * @cssproperty --mdc-staticradio-normal-border-color - color of the radio button border when normal
- * @cssproperty --mdc-staticradio-disabled-border-color - color of the radio button border when disabled
- * @cssproperty --mdc-staticradio-inner-circle-normal-background - background color of the inner circle when normal
- * @cssproperty --mdc-staticradio-inner-circle-disabled-background - background color of the inner circle when disabled
- * @cssproperty --mdc-staticradio-control-inactive-color - color of the radio button when inactive
- * @cssproperty --mdc-staticradio-control-inactive-disabled-background - background color of the radio button when
- *  inactive and disabled
- * @cssproperty --mdc-staticradio-control-active-color - color of the radio button when active
- * @cssproperty --mdc-staticradio-control-active-disabled-background - background color of the radio button
- *  when active and disabled
+ * @cssproperty --mdc-radio-inner-circle-size - size of the inner circle
+ * @cssproperty --mdc-radio-outer-circle-size - size of the outer circle
+ * @cssproperty --mdc-radio-inner-circle-background-color - background color of the inner circle
+ * @cssproperty --mdc-radio-outer-circle-border-color - border color of the outer circle
+ * @cssproperty --mdc-radio-outer-circle-background-color - background color of the outer circle
  *
  * @csspart radio-icon - The radio icon.
  *

package/dist/components/staticradio/staticradio.styles.js

@@ -2,69 +2,40 @@ import { css } from 'lit';
 const styles = [
     css `
     :host {
+      --mdc-radio-inner-circle-size: 0.375rem;
+      --mdc-radio-outer-circle-size: 1rem;
+      --mdc-radio-inner-circle-background-color: var(--mds-color-theme-inverted-text-primary-normal);
+      --mdc-radio-outer-circle-border-color: var(--mds-color-theme-outline-input-normal);
+      --mdc-radio-outer-circle-background-color: var(--mds-color-theme-control-inactive-normal);
+
       display: block;
       position: relative;
       width: 1rem;
       height: 1rem;
       margin: 0.125rem 0;
       border-radius: 50%;
-
-      --mdc-staticradio-inner-circle-size: 0.375rem;
-      --mdc-staticradio-text-normal-color: var(--mds-color-theme-text-primary-normal);
-      --mdc-staticradio-text-disabled-color: var(--mds-color-theme-text-primary-disabled);
-      --mdc-staticradio-disabled-border-color: var(--mds-color-theme-outline-primary-disabled);
-      --mdc-staticradio-normal-border-color: var(--mds-color-theme-outline-input-normal);
-      --mdc-staticradio-inner-circle-normal-background: var(--mds-color-theme-inverted-text-primary-normal);
-      --mdc-staticradio-inner-circle-disabled-background: var(--mds-color-theme-inverted-text-primary-disabled);
-      --mdc-staticradio-control-inactive-color: var(--mds-color-theme-control-inactive-normal);
-      --mdc-staticradio-control-inactive-disabled-background: var(--mds-color-theme-control-inactive-disabled);
-      --mdc-staticradio-control-active-color: var(--mds-color-theme-control-active-normal);
-      --mdc-staticradio-control-active-disabled-background: var(--mds-color-theme-control-active-disabled);
-    }
-
-    .radio-icon:after {
-      content: '';
-      position: absolute;
-      display: none;
-    }
-
-    :host([disabled])::part(radio-icon),
-    :host([soft-disabled])::part(radio-icon),
-    :host([disabled][readonly])::part(radio-icon),
-    :host([soft-disabled][readonly])::part(radio-icon) {
-      border-color: var(--mdc-staticradio-disabled-border-color);
-      background-color: var(--mdc-staticradio-control-inactive-disabled-background);
-    }
-
-    :host([disabled][checked])::part(radio-icon),
-    :host([soft-disabled][checked])::part(radio-icon),
-    :host([disabled][readonly][checked])::part(radio-icon),
-    :host([soft-disabled][readonly][checked])::part(radio-icon) {
-      border: var(--mdc-staticradio-control-active-disabled-background);
-      background-color: var(--mdc-staticradio-control-active-disabled-background);
-    }
-
-    :host([disabled][checked]) .radio-icon:after,
-    :host([soft-disabled][checked]) .radio-icon:after,
-    :host([disabled][readonly][checked]) .radio-icon:after,
-    :host([soft-disabled][readonly][checked]) .radio-icon:after {
-      background-color: var(--mdc-staticradio-inner-circle-disabled-background);
     }
 
     :host::part(radio-icon) {
       position: absolute;
       top: 0;
       left: 0;
-      width: 1rem;
-      height: 1rem;
-      border: 0.0625rem solid var(--mdc-staticradio-normal-border-color);
-      background-color: var(--mdc-staticradio-control-inactive-color);
+      width: var(--mdc-radio-outer-circle-size);
+      height: var(--mdc-radio-outer-circle-size);
+      border: 0.0625rem solid var(--mdc-radio-outer-circle-border-color);
+      background-color: var(--mdc-radio-outer-circle-background-color);
       border-radius: 50%;
     }
 
-    :host([checked])::part(radio-icon) {
-      border-color: var(--mdc-staticradio-control-active-color);
-      background-color: var(--mdc-staticradio-control-active-color);
+    .radio-icon:after {
+      content: '';
+      position: absolute;
+      display: none;
+    }
+
+    :host([checked]) {
+      --mdc-radio-outer-circle-border-color: var(--mds-color-theme-control-active-normal);
+      --mdc-radio-outer-circle-background-color: var(--mds-color-theme-control-active-normal);
     }
 
     :host([checked]) .radio-icon:after {
@@ -72,23 +43,59 @@ const styles = [
       top: 50%;
       left: 50%;
       transform: translate(-50%, -50%);
-      width: var(--mdc-staticradio-inner-circle-size);
-      height: var(--mdc-staticradio-inner-circle-size);
+      width: var(--mdc-radio-inner-circle-size);
+      height: var(--mdc-radio-inner-circle-size);
       border-radius: 50%;
-      background-color: var(--mdc-staticradio-inner-circle-normal-background);
+      background-color: var(--mdc-radio-inner-circle-background-color);
+    }
+
+    :host([readonly]) {
+      --mdc-radio-outer-circle-border-color: var(--mds-color-theme-outline-input-normal);
+      --mdc-radio-outer-circle-background-color: transparent;
     }
 
-    :host([readonly])::part(radio-icon) {
-      border-color: var(--mdc-staticradio-normal-border-color);
-      background-color: unset;
+    :host([readonly][checked]) {
+      --mdc-radio-inner-circle-background-color: var(--mds-color-theme-text-primary-normal);
+      --mdc-radio-outer-circle-border-color: var(--mds-color-theme-outline-input-normal);
+      --mdc-radio-outer-circle-background-color: transparent;
     }
 
-    :host([readonly][checked])::part(radio-icon) {
-      border-color: var(--mdc-staticradio-normal-border-color);
+    :host([disabled]),
+    :host([soft-disabled]) {
+      --mdc-radio-outer-circle-border-color: var(--mds-color-theme-outline-primary-disabled);
+      --mdc-radio-outer-circle-background-color: var(--mds-color-theme-control-inactive-disabled);
     }
 
-    :host([readonly][checked]) .radio-icon:after {
-      background-color: var(--mdc-staticradio-text-normal-color);
+    :host([disabled][checked]),
+    :host([soft-disabled][checked]) {
+      --mdc-radio-inner-circle-background-color: var(--mds-color-theme-inverted-text-primary-disabled);
+      --mdc-radio-outer-circle-border-color: transparent;
+      --mdc-radio-outer-circle-background-color: var(--mds-color-theme-control-active-disabled);
+    }
+
+    @media (forced-colors: active) {
+      :host([checked]) {
+        --mdc-radio-outer-circle-border-color: SelectedItem;
+        --mdc-radio-outer-circle-background-color: SelectedItem;
+      }
+      :host([readonly]),
+      :host([readonly][checked]) {
+        --mdc-radio-inner-circle-background-color: Highlight;
+        --mdc-radio-outer-circle-border-color: Highlight;
+        --mdc-radio-outer-circle-background-color: ButtonFace;
+      }
+      :host([disabled]),
+      :host([soft-disabled]) {
+        --mdc-radio-outer-circle-border-color: GrayText;
+        --mdc-radio-outer-circle-background-color: GrayText;
+        --mdc-radio-inner-circle-background-color: GrayText;
+      }
+
+      :host([disabled][checked]),
+      :host([soft-disabled][checked]) {
+        --mdc-radio-outer-circle-border-color: GrayText;
+        --mdc-radio-outer-circle-background-color: GrayText;
+      }
     }
   `,
 ];

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

@@ -13,21 +13,13 @@ declare const StaticToggle_base: import("../../utils/mixins/index.types").Constr
  *
  * @slot default - This is a default/unnamed slot
  *
- * @cssproperty --mdc-statictoggle-width - Width of the toggle
- * @cssproperty --mdc-statictoggle-height - Height of the toggle
- * @cssproperty --mdc-statictoggle-width-compact - Width of the toggle when it's size is compact
- * @cssproperty --mdc-statictoggle-height-compact - Height of the toggle when it's size is compact
- * @cssproperty --mdc-statictoggle-border-radius - Border radius of the toggle
- * @cssproperty --mdc-statictoggle-border-radius-compact - Border radius of the toggle when it's size is compact
- * @cssproperty --mdc-statictoggle-border - Border of the toggle
- * @cssproperty --mdc-statictoggle-inactive-rest-color - Background color of the inactive toggle in rest state
- * @cssproperty --mdc-statictoggle-inactive-disabled-color - Background color of the inactive toggle in disabled state
- * @cssproperty --mdc-statictoggle-active-rest-color - Background color of the active toggle in rest state
- * @cssproperty --mdc-statictoggle-active-disabled-color - Background color of the active toggle in disabled state
- * @cssproperty --mdc-statictoggle-icon-color-normal - Color of the icon in normal state
- * @cssproperty --mdc-statictoggle-icon-color-disabled - Color of the icon in disabled state
- * @cssproperty --mdc-statictoggle-icon-background-color-normal - Background color of the icon in normal state
- * @cssproperty --mdc-statictoggle-icon-background-color-disabled - Background color of the icon in disabled 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 slider - The slider part of the toggle
  * @csspart toggle-icon - The icon part of the toggle

package/dist/components/statictoggle/statictoggle.component.js

@@ -24,21 +24,13 @@ import styles from './statictoggle.styles';
  *
  * @slot default - This is a default/unnamed slot
  *
- * @cssproperty --mdc-statictoggle-width - Width of the toggle
- * @cssproperty --mdc-statictoggle-height - Height of the toggle
- * @cssproperty --mdc-statictoggle-width-compact - Width of the toggle when it's size is compact
- * @cssproperty --mdc-statictoggle-height-compact - Height of the toggle when it's size is compact
- * @cssproperty --mdc-statictoggle-border-radius - Border radius of the toggle
- * @cssproperty --mdc-statictoggle-border-radius-compact - Border radius of the toggle when it's size is compact
- * @cssproperty --mdc-statictoggle-border - Border of the toggle
- * @cssproperty --mdc-statictoggle-inactive-rest-color - Background color of the inactive toggle in rest state
- * @cssproperty --mdc-statictoggle-inactive-disabled-color - Background color of the inactive toggle in disabled state
- * @cssproperty --mdc-statictoggle-active-rest-color - Background color of the active toggle in rest state
- * @cssproperty --mdc-statictoggle-active-disabled-color - Background color of the active toggle in disabled state
- * @cssproperty --mdc-statictoggle-icon-color-normal - Color of the icon in normal state
- * @cssproperty --mdc-statictoggle-icon-color-disabled - Color of the icon in disabled state
- * @cssproperty --mdc-statictoggle-icon-background-color-normal - Background color of the icon in normal state
- * @cssproperty --mdc-statictoggle-icon-background-color-disabled - Background color of the icon in disabled 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 slider - The slider part of the toggle
  * @csspart toggle-icon - The icon part of the toggle

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

@@ -2,34 +2,23 @@ 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-disabled-border-color: var(--mds-color-theme-outline-primary-disabled);
+      --mdc-toggle-width: 3rem;
+      --mdc-toggle-height: 1.5rem;
+      --mdc-toggle-border-radius: 0.75rem;
+      --mdc-toggle-border-color: var(--mds-color-theme-outline-input-normal);
+      --mdc-toggle-background-color: var(--mds-color-theme-control-inactive-normal);
+      --mdc-toggle-icon-color: var(--mds-color-theme-common-inverted-text-primary-normal);
+      --mdc-toggle-icon-background-color: var(--mds-color-theme-common-text-primary-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);
+      border-radius: var(--mdc-toggle-border-radius);
     }
 
     :host::part(slider) {
-      width: var(--mdc-statictoggle-width);
-      height: var(--mdc-statictoggle-height);
-      background-color: var(--mdc-statictoggle-inactive-rest-color);
-      border-radius: var(--mdc-statictoggle-border-radius);
-      border: var(--mdc-statictoggle-border);
+      width: var(--mdc-toggle-width);
+      height: var(--mdc-toggle-height);
+      background-color: var(--mdc-toggle-background-color);
+      border: 1px solid var(--mdc-toggle-border-color);
+      border-radius: var(--mdc-toggle-border-radius);
       display: flex;
       align-items: center;
       justify-content: flex-start;
@@ -38,69 +27,71 @@ const styles = [
       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);
-    }
-
     :host::part(toggle-icon) {
       padding: 0.25rem;
-      --mdc-icon-fill-color: var(--mdc-statictoggle-icon-color-normal);
-      background-color: var(--mdc-statictoggle-icon-background-color-normal);
+      --mdc-icon-fill-color: var(--mdc-toggle-icon-color);
+      background-color: var(--mdc-toggle-icon-background-color);
       border-radius: 50%;
     }
 
-    :host([disabled])::part(toggle-icon),
-    :host([soft-disabled])::part(toggle-icon),
-    :host([disabled][readonly])::part(toggle-icon),
-    :host([soft-disabled][readonly])::part(toggle-icon) {
-      --mdc-icon-fill-color: var(--mdc-statictoggle-icon-color-disabled);
-      background-color: var(--mdc-statictoggle-icon-background-color-disabled);
+    :host([size='compact'])::part(slider) {
+      --mdc-toggle-width: 2rem;
+      --mdc-toggle-height: 1rem;
+      --mdc-toggle-border-radius: 0.5rem;
     }
 
     :host([size='compact'])::part(toggle-icon) {
       padding: 0.125rem;
     }
 
-    :host([disabled])::part(slider),
-    :host([soft-disabled])::part(slider),
-    :host([readonly])::part(slider) {
-      background-color: var(--mdc-statictoggle-inactive-disabled-color);
-      border-color: var(--mdc-statictoggle-disabled-border-color);
+    :host([checked]) {
+      --mdc-toggle-border-color: transparent;
+      --mdc-toggle-background-color: var(--mds-color-theme-control-active-normal);
+    }
+    :host([checked])::part(slider) {
+      justify-content: flex-end;
     }
 
-    :host([disabled][checked])::part(slider),
-    :host([soft-disabled][checked])::part(slider),
-    :host([disabled][readonly][checked])::part(slider),
-    :host([soft-disabled][readonly][checked])::part(slider) {
-      background-color: var(--mdc-statictoggle-active-disabled-color);
-      border-color: transparent;
+    :host([readonly]) {
+      --mdc-toggle-icon-background-color: var(--mds-color-theme-common-text-primary-normal);
+      --mdc-toggle-border-color: var(--mds-color-theme-outline-primary-disabled);
+      --mdc-toggle-background-color: var(--mds-color-theme-control-inactive-disabled);
     }
 
-    :host([readonly])::part(toggle-icon) {
-      background-color: var(--mdc-statictoggle-icon-background-color-normal);
+    :host([disabled]),
+    :host([soft-disabled]) {
+      --mdc-toggle-icon-color: var(--mds-color-theme-common-inverted-text-primary-disabled);
+      --mdc-toggle-icon-background-color: var(--mds-color-theme-common-text-primary-disabled);
+      --mdc-toggle-border-color: var(--mds-color-theme-outline-primary-disabled);
+      --mdc-toggle-background-color: var(--mds-color-theme-control-inactive-disabled);
+      cursor: default;
     }
 
-    :host([disabled][readonly])::part(slider),
-    :host([soft-disabled][readonly])::part(slider) {
-      background-color: var(--mdc-statictoggle-inactive-disabled-color);
+    :host([checked][disabled]),
+    :host([checked][soft-disabled]) {
+      --mdc-toggle-icon-color: var(--mds-color-theme-common-inverted-text-primary-disabled);
+      --mdc-toggle-icon-background-color: var(--mds-color-theme-common-text-primary-disabled);
+      --mdc-toggle-border-color: transparent;
+      --mdc-toggle-background-color: var(--mds-color-theme-control-active-disabled);
     }
 
     /* High Contrast Mode */
     @media (forced-colors: active) {
-      :host([checked])::part(slider),
       :host::part(toggle-icon) {
-        border: var(--mdc-statictoggle-border);
+        --mdc-toggle-icon-color: CanvasText;
+        border: 1px solid var(--mdc-toggle-border-color);
       }
-      :host::part(toggle-icon) {
-        --mdc-icon-fill-color: CanvasText;
+
+      :host([checked]) {
+        --mdc-toggle-icon-color: SelectedItemText;
+        --mdc-toggle-border-color: SelectedItem;
+        --mdc-toggle-background-color: SelectedItem;
+      }
+
+      :host([disabled])::part(toggle-icon),
+      :host([soft-disabled])::part(toggle-icon) {
+        --mdc-toggle-icon-color: GrayText;
+        border: 1px solid GrayText;
       }
     }
   `,

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

@@ -59,6 +59,7 @@ declare const Textarea_base: import("../../utils/mixins/index.types").Constructo
  * @cssproperty --mdc-help-text-font-weight - Font weight for the help text.
  * @cssproperty --mdc-help-text-line-height - Line height for the help text.
  * @cssproperty --mdc-help-text-color - Color for the help text.
+ * @cssproperty --mdc-required-indicator-color - Color for the required indicator text.
  * @cssproperty --mdc-textarea-text-color - Text color for the textarea field
  * @cssproperty --mdc-textarea-background-color - Background color for the textarea field
  * @cssproperty --mdc-textarea-border-color - Border color for the textarea field

package/dist/components/textarea/textarea.component.js

@@ -74,6 +74,7 @@ import styles from './textarea.styles';
  * @cssproperty --mdc-help-text-font-weight - Font weight for the help text.
  * @cssproperty --mdc-help-text-line-height - Line height for the help text.
  * @cssproperty --mdc-help-text-color - Color for the help text.
+ * @cssproperty --mdc-required-indicator-color - Color for the required indicator text.
  * @cssproperty --mdc-textarea-text-color - Text color for the textarea field
  * @cssproperty --mdc-textarea-background-color - Background color for the textarea field
  * @cssproperty --mdc-textarea-border-color - Border color for the textarea field

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

@@ -24,16 +24,13 @@ declare const Toggle_base: import("../../utils/mixins/index.types").Constructor<
  * @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.
@@ -43,7 +40,7 @@ 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 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.
  */
 declare class Toggle extends Toggle_base implements AssociatedFormControl {