@momentum-design/components 0.120.31 → 0.120.32

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

@@ -34,6 +34,7 @@ declare const Checkbox_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.
  *
  * @slot label - Slot for the label element. If not provided, the `label` property will be used to render the label.
  * @slot toggletip - Slot for the toggletip info icon button. If not provided, the `toggletip-text` property will be used to render the info icon button and toggletip.
@@ -50,6 +51,7 @@ declare const Checkbox_base: import("../../utils/mixins/index.types").Constructo
  * @csspart help-text-container - The container for the helper/validation icon and text elements.
  * @csspart checkbox-input - The native checkbox input element.
  * @csspart text-container - The container for the label and helper text elements.
+ * @csspart static-checkbox - The static checkbox element.
  */
 declare class Checkbox extends Checkbox_base implements AssociatedFormControl {
     /**

package/dist/components/checkbox/checkbox.component.js

@@ -49,6 +49,7 @@ import styles from './checkbox.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.
  *
  * @slot label - Slot for the label element. If not provided, the `label` property will be used to render the label.
  * @slot toggletip - Slot for the toggletip info icon button. If not provided, the `toggletip-text` property will be used to render the info icon button and toggletip.
@@ -65,6 +66,7 @@ import styles from './checkbox.styles';
  * @csspart help-text-container - The container for the helper/validation icon and text elements.
  * @csspart checkbox-input - The native checkbox input element.
  * @csspart text-container - The container for the label and helper text elements.
+ * @csspart static-checkbox - The static checkbox element.
  */
 class Checkbox extends AutoFocusOnMountMixin(FormInternalsMixin(DataAriaLabelMixin(FormfieldWrapper))) {
     constructor() {
@@ -201,6 +203,7 @@ class Checkbox extends AutoFocusOnMountMixin(FormInternalsMixin(DataAriaLabelMix
         var _a;
         return html `
       <mdc-staticcheckbox
+        part="static-checkbox"
         class="mdc-focus-ring"
         ?checked="${this.checked}"
         ?indeterminate="${this.indeterminate}"

package/dist/components/checkbox/checkbox.styles.js

@@ -2,21 +2,12 @@ import { css } from 'lit';
 import { hostFocusRingStyles } from '../../utils/styles';
 const styles = [
     css `
-    /* Base styles and CSS custom properties */
     :host {
-      --mdc-checkbox-background-color-hover: var(--mds-color-theme-control-inactive-hover);
-      --mdc-checkbox-pressed-icon-color: var(--mds-color-theme-control-inactive-pressed);
-      --mdc-checkbox-checked-pressed-icon-color: var(--mds-color-theme-control-active-pressed);
-      --mdc-checkbox-checked-background-color-hover: var(--mds-color-theme-control-active-hover);
-      --mdc-checkbox-disabled-checked-icon-color: var(--mds-color-theme-control-active-disabled);
-      --mdc-checkbox-disabled-text-color: var(--mds-color-theme-text-primary-disabled);
-
       flex-direction: row;
       align-items: flex-start;
     }
 
-    /* Component structure and layout */
-    :host mdc-staticcheckbox {
+    :host::part(static-checkbox) {
       position: relative;
     }
 
@@ -29,8 +20,8 @@ const styles = [
       opacity: 0.1%;
       overflow: visible;
       z-index: 1;
-      width: 1rem;
-      height: 1rem;
+      width: var(--mdc-checkbox-size);
+      height: var(--mdc-checkbox-size);
       border-radius: 0.125rem;
     }
 
@@ -48,63 +39,34 @@ const styles = [
       white-space: normal;
     }
 
-    /* Default interactive states */
     :host::part(label),
     :host::part(checkbox-input) {
       cursor: pointer;
     }
 
-    :host(:hover) mdc-staticcheckbox {
-      background-color: var(--mdc-checkbox-background-color-hover);
+    :host(:hover)::part(static-checkbox) {
+      --mdc-checkbox-background-color: var(--mds-color-theme-control-inactive-hover);
     }
 
-    :host(:active) mdc-staticcheckbox {
-      background-color: var(--mdc-checkbox-pressed-icon-color);
+    :host(:active)::part(static-checkbox) {
+      --mdc-checkbox-background-color: var(--mds-color-theme-control-inactive-pressed);
     }
 
-    :host([checked]:hover)::part(icon-container),
-    :host([indeterminate]:hover)::part(icon-container) {
-      background-color: var(--mdc-checkbox-checked-background-color-hover);
+    :host([checked]:hover)::part(static-checkbox),
+    :host([indeterminate]:hover)::part(static-checkbox) {
+      --mdc-checkbox-background-color: var(--mds-color-theme-control-active-hover);
     }
 
-    :host([checked]:active)::part(icon-container),
-    :host([indeterminate]:active)::part(icon-container) {
-      background-color: var(--mdc-checkbox-checked-pressed-icon-color);
+    :host([checked]:active)::part(static-checkbox),
+    :host([indeterminate]:active)::part(static-checkbox) {
+      --mdc-checkbox-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(checkbox-input),
-    :host([soft-disabled])::part(label),
-    :host([soft-disabled])::part(checkbox-input) {
-      cursor: default;
-    }
-
-    :host([disabled]) mdc-staticcheckbox,
-    :host([soft-disabled]) mdc-staticcheckbox {
-      background-color: unset;
-    }
-
-    :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) {
-      background-color: var(--mdc-checkbox-disabled-checked-icon-color);
-    }
-
-    :host([disabled])::part(label),
-    :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-checkbox-disabled-text-color);
-    }
   `,
     ...hostFocusRingStyles(true),
 ];

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

@@ -62,6 +62,7 @@ declare const Combobox_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.
  *
  * @csspart label - The label element.
  * @csspart label-text - The container for the label and required indicator elements.

package/dist/components/combobox/combobox.component.js

@@ -88,6 +88,7 @@ import styles from './combobox.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.
  *
  * @csspart label - The label element.
  * @csspart label-text - The container for the label and required indicator elements.

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

@@ -49,6 +49,7 @@ declare const FormfieldGroup_base: import("../../utils/mixins/index.types").Cons
  * @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.
  */
 declare class FormfieldGroup extends FormfieldGroup_base {
     /**

package/dist/components/formfieldgroup/formfieldgroup.component.js

@@ -53,6 +53,7 @@ import styles from './formfieldgroup.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.
  */
 class FormfieldGroup extends DataAriaLabelMixin(FormfieldWrapper) {
     constructor() {

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

@@ -37,6 +37,7 @@ declare const FormfieldWrapper_base: import("../../utils/mixins/index.types").Co
  * @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.
  */
 declare class FormfieldWrapper extends FormfieldWrapper_base {
     /**

package/dist/components/formfieldwrapper/formfieldwrapper.component.js

@@ -51,6 +51,7 @@ import { getHelperIcon } from './formfieldwrapper.utils';
  * @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.
  */
 class FormfieldWrapper extends DisabledMixin(Component) {
     constructor() {

package/dist/components/formfieldwrapper/formfieldwrapper.styles.js

@@ -10,6 +10,7 @@ const styles = css `
     --mdc-help-text-font-weight: var(--mds-font-apps-body-midsize-regular-font-weight);
     --mdc-help-text-line-height: var(--mds-font-apps-body-midsize-regular-line-height);
     --mdc-help-text-color: var(--mds-color-theme-text-secondary-normal);
+    --mdc-required-indicator-color: var(--mds-color-theme-text-error-normal);
 
     flex-direction: column;
     align-items: flex-start;
@@ -17,7 +18,7 @@ const styles = css `
   }
 
   :host::part(required-indicator) {
-    color: var(--mds-color-theme-text-error-normal);
+    color: var(--mdc-required-indicator-color);
   }
 
   :host::part(label-text),
@@ -69,10 +70,13 @@ const styles = css `
   }
 
   :host([disabled]),
-  :host([disabled])::part(label),
-  :host([disabled])::part(help-text-container),
-  :host([disabled])::part(required-indicator) {
+  :host([soft-disabled]) {
+    --mdc-label-color: var(--mds-color-theme-text-primary-disabled);
+    --mdc-help-text-color: var(--mds-color-theme-text-primary-disabled);
+    --mdc-required-indicator-color: var(--mds-color-theme-text-primary-disabled);
     color: var(--mds-color-theme-text-primary-disabled);
+    pointer-events: none;
+    cursor: default;
   }
 `;
 export default [hostFitContentStyles, styles];

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

@@ -46,6 +46,7 @@ declare const Input_base: import("../../utils/mixins/index.types").Constructor<i
  * @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-input-text-color - Text color for the input field
  * @cssproperty --mdc-input-border-color - Border color for the input container
  * @cssproperty --mdc-input-background-color - Background color for the input field

package/dist/components/input/input.component.js

@@ -61,6 +61,7 @@ import styles from './input.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-input-text-color - Text color for the input field
  * @cssproperty --mdc-input-border-color - Border color for the input container
  * @cssproperty --mdc-input-background-color - Background color for the input field

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

@@ -52,6 +52,7 @@ import type { ValidationType } from '../formfieldwrapper/formfieldwrapper.types'
  * @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-input-text-color - Text color for the input field
  * @cssproperty --mdc-input-border-color - Border color for the input container
  * @cssproperty --mdc-input-background-color - Background color for the input field

package/dist/components/password/password.component.js

@@ -64,6 +64,7 @@ import { PASSWORD_VISIBILITY_ICONS } from './password.constants';
  * @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-input-text-color - Text color for the input field
  * @cssproperty --mdc-input-border-color - Border color for the input container
  * @cssproperty --mdc-input-background-color - Background color for the input field

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

@@ -33,6 +33,7 @@ declare const Progressbar_base: import("../../utils/mixins/index.types").Constru
  * @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-progressbar-background-color - Background color of the remaining progressbar portion.
  * @cssproperty --mdc-progressbar-progress-background-color - Background color of the elapsed progressbar portion.
  * @cssproperty --mdc-progressbar-height - The height of the progressbar.

package/dist/components/progressbar/progressbar.component.js

@@ -47,6 +47,7 @@ import styles from './progressbar.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-progressbar-background-color - Background color of the remaining progressbar portion.
  * @cssproperty --mdc-progressbar-progress-background-color - Background color of the elapsed progressbar portion.
  * @cssproperty --mdc-progressbar-height - The height of the progressbar.

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

@@ -19,14 +19,11 @@ declare const Radio_base: import("../../utils/mixins/index.types").Constructor<i
  * @event change - (React: onChange) Event that gets dispatched when the radio state changes.
  * @event focus - (React: onFocus) Event that gets dispatched when the radio receives focus.
  *
- * @cssproperty --mdc-radio-text-disabled-color - color of the label when disabled
- * @cssproperty --mdc-radio-control-inactive-hover - color of the radio button when inactive and hovered
- * @cssproperty --mdc-radio-control-inactive-pressed-color - color of the radio button when inactive and pressed
- * @cssproperty --mdc-radio-control-active-hover-color - color of the radio button when active and hovered
- * @cssproperty --mdc-radio-control-active-pressed-color - color of the radio button when active and pressed
- * @cssproperty --mdc-radio-disabled-border-color - color of the radio button when disabled
- * @cssproperty --mdc-radio-control-active-disabled-background - color of the radio button when active and disabled
- * @cssproperty --mdc-radio-control-inactive-disabled-background - color of the radio button when inactive 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 label - The label element.
  * @csspart label-text - The container for the label and required indicator elements.

package/dist/components/radio/radio.component.js

@@ -36,14 +36,11 @@ import styles from './radio.styles';
  * @event change - (React: onChange) Event that gets dispatched when the radio state changes.
  * @event focus - (React: onFocus) Event that gets dispatched when the radio receives focus.
  *
- * @cssproperty --mdc-radio-text-disabled-color - color of the label when disabled
- * @cssproperty --mdc-radio-control-inactive-hover - color of the radio button when inactive and hovered
- * @cssproperty --mdc-radio-control-inactive-pressed-color - color of the radio button when inactive and pressed
- * @cssproperty --mdc-radio-control-active-hover-color - color of the radio button when active and hovered
- * @cssproperty --mdc-radio-control-active-pressed-color - color of the radio button when active and pressed
- * @cssproperty --mdc-radio-disabled-border-color - color of the radio button when disabled
- * @cssproperty --mdc-radio-control-active-disabled-background - color of the radio button when active and disabled
- * @cssproperty --mdc-radio-control-inactive-disabled-background - color of the radio button when inactive 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 label - The label element.
  * @csspart label-text - The container for the label and required indicator elements.
@@ -284,6 +281,7 @@ class Radio extends AutoFocusOnMountMixin(FormInternalsMixin(DataAriaLabelMixin(
         ?disabled="${this.disabled}"
         ?readonly="${this.readonly}"
         ?soft-disabled="${this.softDisabled}"
+        part="static-radio"
       >
         <input
           id="${this.inputId}"

package/dist/components/radio/radio.styles.js

@@ -3,24 +3,13 @@ import { hostFitContentStyles, hostFocusRingStyles } from '../../utils/styles';
 const styles = [
     hostFitContentStyles,
     css `
-    /* Base styles and CSS custom properties */
     :host {
       display: flex;
       flex-direction: row;
       align-items: start;
       gap: 0.5rem;
-
-      --mdc-radio-text-disabled-color: var(--mds-color-theme-text-primary-disabled);
-      --mdc-radio-control-inactive-hover: var(--mds-color-theme-control-inactive-hover);
-      --mdc-radio-control-inactive-pressed-color: var(--mds-color-theme-control-inactive-pressed);
-      --mdc-radio-control-active-hover-color: var(--mds-color-theme-control-active-hover);
-      --mdc-radio-control-active-pressed-color: var(--mds-color-theme-control-active-pressed);
-      --mdc-radio-control-active-disabled-background: var(--mds-color-theme-control-active-disabled);
-      --mdc-radio-control-inactive-disabled-background: var(--mds-color-theme-control-inactive-disabled);
-      --mdc-radio-disabled-border-color: var(--mds-color-theme-outline-primary-disabled);
     }
 
-    /* Component structure and layout */
     :host::part(radio-input) {
       position: absolute;
       opacity: 0;
@@ -28,7 +17,7 @@ const styles = [
       width: 100%;
       height: 100%;
       cursor: pointer;
-      z-index: 2;
+      z-index: 1;
     }
 
     :host::part(text-container) {
@@ -47,81 +36,34 @@ const styles = [
       cursor: pointer;
       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);
-    }
-
-    /* Default interactive states */
-    :host(:hover) mdc-staticradio {
-      background-color: var(--mdc-radio-control-inactive-hover);
-    }
-
-    :host(:active) mdc-staticradio {
-      background-color: var(--mdc-radio-control-inactive-pressed-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);
     }
 
-    :host([checked]:hover)::part(radio-icon) {
-      border-color: var(--mdc-radio-control-active-hover-color);
-      background-color: var(--mdc-radio-control-active-hover-color);
+    :host(:hover)::part(static-radio) {
+      --mdc-radio-outer-circle-background-color: var(--mds-color-theme-control-inactive-hover);
     }
 
-    :host([checked]:active)::part(radio-icon) {
-      border-color: var(--mdc-radio-control-active-pressed-color);
-      background-color: var(--mdc-radio-control-active-pressed-color);
+    :host(:active)::part(static-radio) {
+      --mdc-radio-outer-circle-background-color: var(--mds-color-theme-control-inactive-pressed);
     }
 
-    /* Readonly state - disables pointer events but allows specific hover behavior */
-    :host([readonly]) {
-      pointer-events: none;
+    :host([checked]:hover)::part(static-radio) {
+      --mdc-radio-outer-circle-border-color: var(--mds-color-theme-control-active-hover);
+      --mdc-radio-outer-circle-background-color: var(--mds-color-theme-control-active-hover);
     }
 
-    :host([readonly]:hover)::part(radio-icon) {
-      border-color: var(--mdc-staticradio-normal-border-color);
-      background-color: var(--mdc-staticradio-control-inactive-color);
+    :host([checked]:active)::part(static-radio) {
+      --mdc-radio-outer-circle-border-color: var(--mds-color-theme-control-active-pressed);
+      --mdc-radio-outer-circle-background-color: var(--mds-color-theme-control-active-pressed);
     }
 
+    :host([readonly]),
+    :host([disabled]),
     :host([soft-disabled]) {
       pointer-events: none;
     }
-
-    /* Disabled states override interactive styles */
-    :host([disabled])::part(radio-input),
-    :host([soft-disabled])::part(radio-input),
-    :host([readonly])::part(radio-input),
-    :host([disabled])::part(label),
-    :host([soft-disabled])::part(label),
-    :host([readonly])::part(label) {
-      cursor: default;
-    }
-
-    :host([disabled]:hover) mdc-staticradio,
-    :host([disabled]:active) mdc-staticradio,
-    :host([soft-disabled]:hover) mdc-staticradio,
-    :host([soft-disabled]:active) mdc-staticradio {
-      background-color: unset;
-    }
-
-    :host([disabled]:hover)::part(radio-icon),
-    :host([soft-disabled]:hover)::part(radio-icon),
-    :host([disabled][readonly]:hover)::part(radio-icon),
-    :host([soft-disabled][readonly]:hover)::part(radio-icon) {
-      border-color: var(--mdc-radio-disabled-border-color);
-      background-color: var(--mdc-radio-control-inactive-disabled-background);
-    }
-
-    :host([disabled][checked]:hover)::part(radio-icon),
-    :host([soft-disabled][checked]:hover)::part(radio-icon) {
-      background-color: var(--mdc-radio-control-active-disabled-background);
-    }
-
-    :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-radio-text-disabled-color);
-    }
   `,
     ...hostFocusRingStyles(true),
 ];

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

@@ -33,6 +33,7 @@ import Input from '../input/input.component';
  * @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-input-text-color - Text color for the input field
  * @cssproperty --mdc-input-border-color - Border color for the input container
  * @cssproperty --mdc-input-background-color - Background color for the input field

package/dist/components/searchfield/searchfield.component.js

@@ -47,6 +47,7 @@ import { DEFAULTS } from './searchfield.constants';
  * @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-input-text-color - Text color for the input field
  * @cssproperty --mdc-input-border-color - Border color for the input container
  * @cssproperty --mdc-input-background-color - Background color for the input field

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

@@ -57,6 +57,7 @@ declare const Select_base: import("../../utils/mixins/index.types").Constructor<
  * @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-select-background-color - The background color of the combobox of select.
  * @cssproperty --mdc-select-text-color - The text color of the select.
  * @cssproperty --mdc-select-border-color - The border color of the select.

package/dist/components/select/select.component.js

@@ -77,6 +77,7 @@ import styles from './select.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-select-background-color - The background color of the combobox of select.
  * @cssproperty --mdc-select-text-color - The text color of the select.
  * @cssproperty --mdc-select-border-color - The border color of the select.

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

@@ -12,15 +12,10 @@ declare const StaticCheckbox_base: import("../../utils/mixins/index.types").Cons
  *
  * @dependency mdc-icon
  *
- * @cssproperty --mdc-staticcheckbox-border-color - Border color in high contrast.
- * @cssproperty --mdc-staticcheckbox-checked-background-color - Background color for a selected checkbox.
- * @cssproperty --mdc-staticcheckbox-disabled-background-color - Background color for a disabled checkbox.
- * @cssproperty --mdc-checkbox-disabled-border-color - Border color for a disabled checkbox.
- * @cssproperty --mdc-checkbox-disabled-checked-icon-color - Background color for a disabled, selected checkbox.
- * @cssproperty --mdc-staticcheckbox-disabled-icon-color - Icon color for a disabled checkbox.
- * @cssproperty --mdc-staticcheckbox-icon-background-color - Background color for an unselected checkbox.
- * @cssproperty --mdc-staticcheckbox-icon-border-color - Default background color for an unselected checkbox.
- * @cssproperty --mdc-staticcheckbox-icon-color - Icon color for an unselected checkbox.
+ * @cssproperty --mdc-checkbox-border-color - Controls the border color of the checkbox.
+ * @cssproperty --mdc-checkbox-background-color - Controls the background color of the checkbox.
+ * @cssproperty --mdc-checkbox-icon-color - Controls the icon color of the checkbox.
+ * @cssproperty --mdc-checkbox-size - Controls the size of the checkbox.
  *
  * @csspart icon-container - The container for the checkbox icon.
  * @csspart checkbox-icon - The checkbox icon.

package/dist/components/staticcheckbox/staticcheckbox.component.js

@@ -24,15 +24,10 @@ import { ICON_NAME } from './staticcheckbox.constants';
  *
  * @dependency mdc-icon
  *
- * @cssproperty --mdc-staticcheckbox-border-color - Border color in high contrast.
- * @cssproperty --mdc-staticcheckbox-checked-background-color - Background color for a selected checkbox.
- * @cssproperty --mdc-staticcheckbox-disabled-background-color - Background color for a disabled checkbox.
- * @cssproperty --mdc-checkbox-disabled-border-color - Border color for a disabled checkbox.
- * @cssproperty --mdc-checkbox-disabled-checked-icon-color - Background color for a disabled, selected checkbox.
- * @cssproperty --mdc-staticcheckbox-disabled-icon-color - Icon color for a disabled checkbox.
- * @cssproperty --mdc-staticcheckbox-icon-background-color - Background color for an unselected checkbox.
- * @cssproperty --mdc-staticcheckbox-icon-border-color - Default background color for an unselected checkbox.
- * @cssproperty --mdc-staticcheckbox-icon-color - Icon color for an unselected checkbox.
+ * @cssproperty --mdc-checkbox-border-color - Controls the border color of the checkbox.
+ * @cssproperty --mdc-checkbox-background-color - Controls the background color of the checkbox.
+ * @cssproperty --mdc-checkbox-icon-color - Controls the icon color of the checkbox.
+ * @cssproperty --mdc-checkbox-size - Controls the size of the checkbox.
  *
  * @csspart icon-container - The container for the checkbox icon.
  * @csspart checkbox-icon - The checkbox icon.