@momentum-design/components 0.120.2 → 0.120.4

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

@@ -35,6 +35,9 @@ import { ICON_NAME } from './staticcheckbox.constants';
  * @cssproperty --mdc-staticcheckbox-icon-color - Icon color for an unselected checkbox.
  *
  * @csspart icon-container - The container for the checkbox icon.
+ * @csspart checkbox-icon - The checkbox icon.
+ *
+ * @slot - Default slot for adding label text.
  */
 class StaticCheckbox extends DisabledMixin(Component) {
     constructor() {
@@ -56,7 +59,7 @@ class StaticCheckbox extends DisabledMixin(Component) {
         const checkboxIconContent = this.checked || this.indeterminate
             ? html `
             <mdc-icon
-              class="icon"
+              part="checkbox-icon"
               name="${this.indeterminate ? ICON_NAME.INDETERMINATE : ICON_NAME.CHECKED}"
               size="1"
               length-unit="rem"

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

@@ -42,17 +42,18 @@ const styles = [
       border-radius: 0.125rem;
     }
 
-    .icon {
+    :host::part(checkbox-icon) {
       --mdc-icon-fill-color: var(--mdc-staticcheckbox-icon-color);
     }
 
-    :host([disabled]) .icon {
+    :host([disabled])::part(checkbox-icon) {
       --mdc-icon-fill-color: var(--mdc-staticcheckbox-disabled-icon-color);
     }
 
     /* High Contrast Mode */
     @media (forced-colors: active) {
-      :host([checked])::part(icon-container) :host([indeterminate])::part(icon-container) {
+      :host([checked])::part(icon-container),
+      :host([indeterminate])::part(icon-container) {
         border: 0.0625rem solid var(--mdc-staticcheckbox-border-color);
       }
     }

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

@@ -21,6 +21,10 @@ declare const StaticRadio_base: import("../../utils/mixins/index.types").Constru
  * @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
+ *
+ * @csspart radio-icon - The radio icon.
+ *
+ * @slot - Default slot for the label of the radio.
  */
 declare class StaticRadio extends StaticRadio_base {
     /**

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

@@ -32,6 +32,10 @@ import styles from './staticradio.styles';
  * @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
+ *
+ * @csspart radio-icon - The radio icon.
+ *
+ * @slot - Default slot for the label of the radio.
  */
 class StaticRadio extends DisabledMixin(Component) {
     constructor() {
@@ -51,7 +55,7 @@ class StaticRadio extends DisabledMixin(Component) {
     }
     render() {
         return html ` <slot></slot>
-      <span part="radio-icon" class="icon"></span>`;
+      <span part="radio-icon" class="radio-icon"></span>`;
     }
 }
 StaticRadio.styles = [...Component.styles, ...styles];

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

@@ -21,30 +21,30 @@ const styles = [
       --mdc-staticradio-control-active-disabled-background: var(--mds-color-theme-control-active-disabled);
     }
 
-    .icon:after {
+    .radio-icon:after {
       content: '';
       position: absolute;
       display: none;
     }
 
-    :host([disabled]) .icon,
-    :host([disabled][readonly]) .icon {
+    :host([disabled])::part(radio-icon),
+    :host([disabled][readonly])::part(radio-icon) {
       border-color: var(--mdc-staticradio-disabled-border-color);
       background: var(--mdc-staticradio-control-inactive-disabled-background);
     }
 
-    :host([disabled][checked]) .icon,
-    :host([disabled][readonly][checked]) .icon {
+    :host([disabled][checked])::part(radio-icon),
+    :host([disabled][readonly][checked])::part(radio-icon) {
       border: var(--mdc-staticradio-control-active-disabled-background);
       background: var(--mdc-staticradio-control-active-disabled-background);
     }
 
-    :host([disabled][checked]) .icon:after,
-    :host([disabled][readonly][checked]) .icon:after {
+    :host([disabled][checked]) .radio-icon:after,
+    :host([disabled][readonly][checked]) .radio-icon:after {
       background: var(--mdc-staticradio-inner-circle-disabled-background);
     }
 
-    .icon {
+    :host::part(radio-icon) {
       position: absolute;
       top: 0;
       left: 0;
@@ -55,12 +55,12 @@ const styles = [
       border-radius: 50%;
     }
 
-    :host([checked]) .icon {
+    :host([checked])::part(radio-icon) {
       border-color: var(--mdc-staticradio-control-active-color);
       background-color: var(--mdc-staticradio-control-active-color);
     }
 
-    :host([checked]) .icon:after {
+    :host([checked]) .radio-icon:after {
       display: block;
       top: 50%;
       left: 50%;
@@ -71,16 +71,16 @@ const styles = [
       background: var(--mdc-staticradio-inner-circle-normal-background);
     }
 
-    :host([readonly]) .icon {
+    :host([readonly])::part(radio-icon) {
       border-color: var(--mdc-staticradio-normal-border-color);
       background-color: var(--mdc-staticradio-control-inactive-color);
     }
 
-    :host([readonly][checked]) .icon {
+    :host([readonly][checked])::part(radio-icon) {
       border-color: var(--mdc-staticradio-normal-border-color);
     }
 
-    :host([readonly][checked]) .icon:after {
+    :host([readonly][checked]) .radio-icon:after {
       background-color: var(--mdc-staticradio-text-disabled-color);
     }
   `,

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

@@ -28,6 +28,11 @@ declare const StaticToggle_base: import("../../utils/mixins/index.types").Constr
  * @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
+ *
+ * @csspart slider - The slider part of the toggle
+ * @csspart toggle-icon - The icon part of the toggle
+ *
+ * @slot - Default slot for adding label text.
  */
 declare class StaticToggle extends StaticToggle_base {
     /**

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

@@ -39,6 +39,11 @@ import styles from './statictoggle.styles';
  * @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
+ *
+ * @csspart slider - The slider part of the toggle
+ * @csspart toggle-icon - The icon part of the toggle
+ *
+ * @slot - Default slot for adding label text.
  */
 class StaticToggle extends DisabledMixin(Component) {
     constructor() {
@@ -62,7 +67,7 @@ class StaticToggle extends DisabledMixin(Component) {
       <div part="slider">
         <mdc-icon
           name="${this.checked ? ICON_NAME.CHECKED : ICON_NAME.UNCHECKED}"
-          class="icon"
+          part="toggle-icon"
           length-unit="rem"
           size="${ICON_SIZE_IN_REM[this.size]}"
         ></mdc-icon>

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

@@ -49,19 +49,19 @@ const styles = [
       border-radius: var(--mdc-statictoggle-border-radius-compact);
     }
 
-    .icon {
+    :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);
       border-radius: 50%;
     }
 
-    :host([disabled]) .icon {
+    :host([disabled])::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']) .icon {
+    :host([size='compact'])::part(toggle-icon) {
       padding: 0.125rem;
     }
 
@@ -76,9 +76,12 @@ const styles = [
     /* High Contrast Mode */
     @media (forced-colors: active) {
       :host([checked])::part(slider),
-      .icon {
+      :host::part(toggle-icon) {
         border: var(--mdc-statictoggle-border);
       }
+      :host::part(toggle-icon) {
+        --mdc-icon-fill-color: CanvasText;
+      }
     }
   `,
 ];

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

@@ -52,7 +52,18 @@ declare const Textarea_base: import("../../utils/mixins/index.types").Constructo
  * @cssproperty --mdc-textarea-focused-background-color - Background color for the textarea container when focused
  * @cssproperty --mdc-textarea-focused-border-color - Border color for the textarea container when focused
  *
+ * @csspart label - The label element.
+ * @csspart label-text - The container for the label and required indicator elements.
+ * @csspart required-indicator - The required indicator element that is displayed next to the label when the `required` property is set to true.
+ * @csspart info-icon-btn - The info icon button element that is displayed next to the label when the `toggletip-text` property is set.
+ * @csspart label-toggletip - The toggletip element that is displayed when the info icon button is clicked.
+ * @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 character-counter - The character counter element that is displayed when the `max-character-limit` property is set.
+ * @csspart textarea-footer - The container for the help text and character counter elements.
  * @csspart textarea-container - The textarea container
+ * @csspart textarea - The textarea field element.
  */
 declare class Textarea extends Textarea_base {
     /**

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

@@ -67,7 +67,18 @@ import styles from './textarea.styles';
  * @cssproperty --mdc-textarea-focused-background-color - Background color for the textarea container when focused
  * @cssproperty --mdc-textarea-focused-border-color - Border color for the textarea container when focused
  *
+ * @csspart label - The label element.
+ * @csspart label-text - The container for the label and required indicator elements.
+ * @csspart required-indicator - The required indicator element that is displayed next to the label when the `required` property is set to true.
+ * @csspart info-icon-btn - The info icon button element that is displayed next to the label when the `toggletip-text` property is set.
+ * @csspart label-toggletip - The toggletip element that is displayed when the info icon button is clicked.
+ * @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 character-counter - The character counter element that is displayed when the `max-character-limit` property is set.
+ * @csspart textarea-footer - The container for the help text and character counter elements.
  * @csspart textarea-container - The textarea container
+ * @csspart textarea - The textarea field element.
  */
 class Textarea extends AutoFocusOnMountMixin(FormInternalsMixin(DataAriaLabelMixin(FormfieldWrapper))) {
     constructor() {

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

@@ -33,6 +33,7 @@ declare const Toast_base: import("../../utils/mixins/index.types").Constructor<i
  * @csspart footer - The container for the toast's footer, including toggle and action buttons.
  * @csspart footer-button-toggle - The toggle button for showing/hiding detailed content.
  * @csspart toast-close-btn - The close button for the toast.
+ * @csspart has-footer-buttons - Applied to the footer when it contains buttons or a toggle button.
  *
  * @cssproperty --mdc-toast-background-color - Background color of the toast.
  * @cssproperty --mdc-toast-border-color - Border color of the toast.

package/dist/components/toast/toast.component.js

@@ -45,6 +45,7 @@ import styles from './toast.styles';
  * @csspart footer - The container for the toast's footer, including toggle and action buttons.
  * @csspart footer-button-toggle - The toggle button for showing/hiding detailed content.
  * @csspart toast-close-btn - The close button for the toast.
+ * @csspart has-footer-buttons - Applied to the footer when it contains buttons or a toggle button.
  *
  * @cssproperty --mdc-toast-background-color - Background color of the toast.
  * @cssproperty --mdc-toast-border-color - Border color of the toast.
@@ -151,7 +152,7 @@ class Toast extends FooterMixin(Component) {
     renderFooter() {
         this.updateFooterButtonsPresence();
         return html ` <slot name="footer">
-      <div part="footer" class="${this.hasFooterButtons}">
+      <div part="footer ${this.hasFooterButtons}">
         ${this.renderToggleDetailButton()}
         <slot
           name="footer-button-secondary"

package/dist/components/toast/toast.styles.js

@@ -73,7 +73,7 @@ const styles = css `
     align-self: stretch;
   }
 
-  .has-footer-buttons {
+  :host::part(has-footer-buttons) {
     margin-top: 1rem;
   }
 

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

@@ -34,6 +34,17 @@ declare const Toggle_base: import("../../utils/mixins/index.types").Constructor<
  * @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
+ *
+ * @csspart label - The label element.
+ * @csspart label-text - The container for the label and required indicator elements.
+ * @csspart required-indicator - The required indicator element that is displayed next to the label when the `required` property is set to true.
+ * @csspart info-icon-btn - The info icon button element that is displayed next to the label when the `toggletip-text` property is set.
+ * @csspart label-toggletip - The toggletip element that is displayed when the info icon button is clicked.
+ * @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 toggle-input - The native checkbox input element styled as a toggle switch.
  */
 declare class Toggle extends Toggle_base implements AssociatedFormControl {
     /**

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

@@ -50,6 +50,17 @@ import styles from './toggle.styles';
  * @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
+ *
+ * @csspart label - The label element.
+ * @csspart label-text - The container for the label and required indicator elements.
+ * @csspart required-indicator - The required indicator element that is displayed next to the label when the `required` property is set to true.
+ * @csspart info-icon-btn - The info icon button element that is displayed next to the label when the `toggletip-text` property is set.
+ * @csspart label-toggletip - The toggletip element that is displayed when the info icon button is clicked.
+ * @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 toggle-input - The native checkbox input element styled as a toggle switch.
  */
 class Toggle extends AutoFocusOnMountMixin(FormInternalsMixin(DataAriaLabelMixin(FormfieldWrapper))) {
     constructor() {