@momentum-design/components 0.118.4 → 0.118.6

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

@@ -73,7 +73,7 @@ class Checkbox extends AutoFocusOnMountMixin(FormInternalsMixin(DataAriaLabelMix
         this.renderLabelAndHelperText = () => {
             if (!this.label)
                 return nothing;
-            return html `<div class="text-container">${this.renderLabel()} ${this.renderHelperText()}</div>`;
+            return html `<div part="text-container">${this.renderLabel()} ${this.renderHelperText()}</div>`;
         };
     }
     connectedCallback() {
@@ -187,7 +187,7 @@ class Checkbox extends AutoFocusOnMountMixin(FormInternalsMixin(DataAriaLabelMix
         <input
           id="${this.inputId}"
           type="checkbox"
-          class="input"
+          part="checkbox-input"
           name="${ifDefined(this.name)}"
           value="${ifDefined(this.value)}"
           ?required="${this.required}"

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

@@ -12,13 +12,18 @@ const styles = [
       flex-direction: row;
       align-items: flex-start;
     }
-    .mdc-label,
-    .input {
+
+    :host::part(label) {
+      font-size: var(--mds-font-apps-body-midsize-regular-font-size);
+      font-weight: var(--mds-font-apps-body-midsize-regular-font-weight);
+      line-height: var(--mds-font-apps-body-midsize-regular-line-height);
+    }
+
+    :host::part(label) :host::part(checkbox-input) {
       cursor: pointer;
     }
 
-    :host([disabled]) .mdc-label,
-    :host([disabled]) .input {
+    :host([disabled])::part(label) :host([disabled])::part(checkbox-input) {
       cursor: default;
     }
 
@@ -51,7 +56,7 @@ const styles = [
       position: relative;
     }
 
-    .input {
+    :host::part(checkbox-input) {
       margin: 0;
       padding: 0;
       position: absolute;
@@ -62,19 +67,19 @@ const styles = [
       z-index: 1;
     }
 
-    .input {
+    :host::part(checkbox-input) {
       width: 1rem;
       height: 1rem;
       border-radius: 0.125rem;
     }
 
-    .text-container {
+    :host::part(text-container) {
       display: flex;
       flex-direction: column;
       gap: 0.25rem;
     }
 
-    .mdc-label {
+    :host::part(label) {
       word-break: break-word;
       white-space: normal;
     }

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

@@ -692,7 +692,7 @@ class Combobox extends CaptureDestroyEventForChildElement(AutoFocusOnMountMixin(
     `;
     }
 }
-Combobox.styles = [...FormfieldWrapper.styles, ...Input.styles, ...styles];
+Combobox.styles = [...Input.styles, ...FormfieldWrapper.styles, ...styles];
 __decorate([
     property({ type: String }),
     __metadata("design:type", String)

package/dist/components/formfieldgroup/formfieldgroup.styles.js

@@ -11,9 +11,5 @@ const styles = css `
     flex-direction: column;
     gap: 0.25rem;
   }
-
-  :host::part(label-text) {
-    font-weight: bold;
-  }
 `;
 export default [styles];

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

@@ -82,12 +82,12 @@ declare class FormfieldWrapper extends FormfieldWrapper_base {
      */
     protected renderHelpText(): import("lit-html").TemplateResult<1> | typeof nothing;
     /**
-     * renders the mdc-label-text container that contains the label and labelInfoToggleTip.
+     * renders the label container that contains the label and labelInfoToggleTip.
      * @returns void
      */
     protected renderLabel(): import("lit-html").TemplateResult<1> | typeof nothing;
     /**
-     * renders the mdc-help-text container that contains the helpertext icon and helpertext.
+     * renders the help-text container that contains the helpertext icon and helpertext.
      * @returns void
      */
     protected renderHelperText(): import("lit-html").TemplateResult<1> | typeof nothing;

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

@@ -72,9 +72,7 @@ class FormfieldWrapper extends DisabledMixin(Component) {
             return nothing;
         }
         return this.shouldRenderLabel
-            ? html `<label for="${this.inputId}" id="${DEFAULTS.HEADING_ID}" class="mdc-label" part="label"
-          >${this.label}</label
-        >`
+            ? html `<label for="${this.inputId}" id="${DEFAULTS.HEADING_ID}" part="label">${this.label}</label>`
             : html ` <mdc-text
           id="${DEFAULTS.HEADING_ID}"
           tagname="${MDC_TEXT_OPTIONS.TAGNAME}"
@@ -119,14 +117,14 @@ class FormfieldWrapper extends DisabledMixin(Component) {
     `;
     }
     /**
-     * renders the mdc-label-text container that contains the label and labelInfoToggleTip.
+     * renders the label container that contains the label and labelInfoToggleTip.
      * @returns void
      */
     renderLabel() {
         if (!this.label)
             return nothing;
         const triggerId = `toggletip-trigger-${uuidv4()}`;
-        return html `<div class="mdc-label-text" part="label-text">
+        return html `<div part="label-text">
       <slot name="label">${this.renderLabelElement()}</slot>
       ${this.required ? html `<span part="required-indicator">*</span>` : nothing}
       <slot name="toggletip">
@@ -154,14 +152,14 @@ class FormfieldWrapper extends DisabledMixin(Component) {
     </div>`;
     }
     /**
-     * renders the mdc-help-text container that contains the helpertext icon and helpertext.
+     * renders the help-text container that contains the helpertext icon and helpertext.
      * @returns void
      */
     renderHelperText() {
         if (!this.helpText) {
             return nothing;
         }
-        return html `<div class="mdc-help-text" part="help-text">
+        return html `<div part="help-text-container">
       <slot name="help-icon">${this.renderHelpTextIcon()}</slot>
       <slot name="help-text">${this.renderHelpText()}</slot>
     </div>`;

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

@@ -9,13 +9,13 @@ const styles = [
       gap: 0.5rem;
     }
     :host([disabled]),
-    :host([disabled]) .mdc-label,
-    :host([disabled]) .mdc-help-text,
+    :host([disabled])::part(label),
+    :host([disabled])::part(help-text-container),
     :host([disabled])::part(required-indicator),
-    :host([disabled][help-text-type='error']) .mdc-help-text,
-    :host([disabled][help-text-type='success']) .mdc-help-text,
-    :host([disabled][help-text-type='warning']) .mdc-help-text,
-    :host([disabled][help-text-type='priority']) .mdc-help-text {
+    :host([disabled][help-text-type='error'])::part(help-text-container),
+    :host([disabled][help-text-type='success'])::part(help-text-container),
+    :host([disabled][help-text-type='warning'])::part(help-text-container),
+    :host([disabled][help-text-type='priority'])::part(help-text-container) {
       color: var(--mds-color-theme-text-primary-disabled);
     }
 
@@ -23,29 +23,35 @@ const styles = [
       color: var(--mds-color-theme-text-error-normal);
     }
 
-    .mdc-label-text,
-    .mdc-help-text {
+    :host::part(label-text),
+    :host::part(help-text-container) {
       display: flex;
       align-items: center;
       gap: 0.5rem;
       width: 100%;
     }
 
-    .mdc-label,
-    .mdc-help-text {
+    :host::part(label) {
+      font-size: var(--mds-font-apps-body-midsize-medium-font-size);
+      font-weight: var(--mds-font-apps-body-midsize-medium-font-weight);
+      line-height: var(--mds-font-apps-body-midsize-medium-line-height);
+    }
+
+    :host::part(help-text),
+    :host::part(help-text-container) {
       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);
     }
 
-    .mdc-label {
+    :host::part(label) {
       color: var(--mds-color-theme-text-primary-normal);
       overflow: hidden;
       text-overflow: ellipsis;
       white-space: nowrap;
     }
 
-    .mdc-help-text {
+    :host::part(help-text-container) {
       color: var(--mds-color-theme-text-secondary-normal);
     }
 
@@ -53,16 +59,16 @@ const styles = [
       align-self: flex-start;
     }
 
-    :host([help-text-type='error']) .mdc-help-text {
+    :host([help-text-type='error'])::part(help-text-container) {
       color: var(--mds-color-theme-text-error-normal);
     }
-    :host([help-text-type='warning']) .mdc-help-text {
+    :host([help-text-type='warning'])::part(help-text-container) {
       color: var(--mds-color-theme-text-warning-normal);
     }
-    :host([help-text-type='success']) .mdc-help-text {
+    :host([help-text-type='success'])::part(help-text-container) {
       color: var(--mds-color-theme-text-success-normal);
     }
-    :host([help-text-type='priority']) .mdc-help-text {
+    :host([help-text-type='priority'])::part(help-text-container) {
       color: var(--mds-color-theme-text-accent-normal);
     }
   `,

package/dist/components/popover/index.js

@@ -1,5 +1,7 @@
 import Popover from './popover.component';
+import { PopoverPortal, TAG_NAME as POPOVER_PORTAL_TAG_NAME } from './popover.portal.component';
 import { TAG_NAME } from './popover.constants';
 import '../button';
 Popover.register(TAG_NAME);
+PopoverPortal.register(POPOVER_PORTAL_TAG_NAME);
 export default Popover;

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

@@ -3,20 +3,56 @@ import { Component } from '../../models';
 import type { PopoverColor, PopoverPlacement, PopoverStrategy, PopoverTrigger } from './popover.types';
 declare const Popover_base: import("../../utils/mixins/index.types").Constructor<Component & import("../../utils/mixins/BackdropMixin").BackdropMixinInterface> & import("../../utils/mixins/index.types").Constructor<Component & import("../../utils/mixins/PreventScrollMixin").PreventScrollMixinInterface> & import("../../utils/mixins/index.types").Constructor<Component & import("../../utils/mixins/FocusTrapMixin").FocusTrapClassInterface> & typeof Component;
 /**
- * Popover component is a lightweight floating UI element that displays additional content when triggered.
- * It can be used for tooltips, dropdowns, or contextual menus.
+ * Popover is genric overlay which can be trigered by any actinable element.
+ *
+ * It can be used for tooltips, dropdowns, menus or any showing any other contextual content.
+ *
  * The popover automatically positions itself based on available space and
- * supports dynamic height adjustments with scrollable content when needed。
+ * supports dynamic height adjustments with scrollable content when needed.
+ * It uses [Floating UI](https://floating-ui.com/) for maintaining the position of the popover.
+ *
+ * ## Limitations
+ *
+ * ### On trigger for multiple popovers
+ *
+ * A component (button, etc.) can trigger more than one popover, but only one of them should change the
+ * aria-expanded and aria-haspopup attributes on the trigger.
+ *
+ * To prevent unexpected attribute changes on the trigger `disable-aria-expanded` attribute must be set on all linked
+ * Popoers except one.
  *
- * Note:
- *  - A component (button) can trigger more than one popover, but only one of them should change the
- *    aria-expanded and aria-haspopup, the rest of the popovers must have `disable-aria-expanded` attribute.
+ * ### React Popover with append-to attribute
+ *
+ * React mounts the popover based on the virtual DOM, but when the append-to attribute is set, the popover removes itself
+ * and mounts to the specified element. React will not know about the move and will not know about the
+ * newly created mdc-popoverportal element either. This throws a `NotFoundError` error when the Popover is directly
+ * added/removed by React, for example:
+ *
+ * ```tsx
+ * const SomeComponent = () => {
+ *    const [isOpen, setIsOpen] = useState(false);
+ *    return (<div>
+ *      {isOpen && <Popover append-to="some-element-id">...</mdc-popover>}
+ *    </div>);
+ * }
+ * ```
+ * As a workaround Popover need to wrap with any other element/component, for example:
+ * ```tsx
+ * const SomeComponent = () => {
+ *    const [isOpen, setIsOpen] = useState(false);
+ *    return (<div>
+ *      {isOpen && <div>
+ *        <Popover append-to="some-element-id">...</mdc-popover>
+ *      <div>}
+ *    </div>);
+ * }
+ * ```
+ * Note the wrapper <div> around the Popover component (React.Fragment does not work).
  *
  * @dependency mdc-button
  *
  * @tagname mdc-popover
  *
- *
  * @event shown - (React: onShown) This event is dispatched when the popover is shown
  * @event hidden - (React: onHidden) This event is dispatched when the popover is hidden
  * @event created - (React: onCreated) This event is dispatched when the popover is created (added to the DOM)
@@ -312,9 +348,9 @@ declare class Popover extends Popover_base {
      */
     get triggerElement(): HTMLElement | null;
     constructor();
+    private parseTrigger;
     protected firstUpdated(changedProperties: PropertyValues): Promise<void>;
     connectedCallback(): void;
-    private parseTrigger;
     disconnectedCallback(): Promise<void>;
     /**
      * Sets up the trigger related event listeners, based on the trigger type.

package/dist/components/popover/popover.component.js

@@ -22,20 +22,56 @@ import { popoverStack } from './popover.stack';
 import styles from './popover.styles';
 import { PopoverUtils } from './popover.utils';
 /**
- * Popover component is a lightweight floating UI element that displays additional content when triggered.
- * It can be used for tooltips, dropdowns, or contextual menus.
+ * Popover is genric overlay which can be trigered by any actinable element.
+ *
+ * It can be used for tooltips, dropdowns, menus or any showing any other contextual content.
+ *
  * The popover automatically positions itself based on available space and
- * supports dynamic height adjustments with scrollable content when needed。
+ * supports dynamic height adjustments with scrollable content when needed.
+ * It uses [Floating UI](https://floating-ui.com/) for maintaining the position of the popover.
+ *
+ * ## Limitations
+ *
+ * ### On trigger for multiple popovers
+ *
+ * A component (button, etc.) can trigger more than one popover, but only one of them should change the
+ * aria-expanded and aria-haspopup attributes on the trigger.
+ *
+ * To prevent unexpected attribute changes on the trigger `disable-aria-expanded` attribute must be set on all linked
+ * Popoers except one.
+ *
+ * ### React Popover with append-to attribute
+ *
+ * React mounts the popover based on the virtual DOM, but when the append-to attribute is set, the popover removes itself
+ * and mounts to the specified element. React will not know about the move and will not know about the
+ * newly created mdc-popoverportal element either. This throws a `NotFoundError` error when the Popover is directly
+ * added/removed by React, for example:
  *
- * Note:
- *  - A component (button) can trigger more than one popover, but only one of them should change the
- *    aria-expanded and aria-haspopup, the rest of the popovers must have `disable-aria-expanded` attribute.
+ * ```tsx
+ * const SomeComponent = () => {
+ *    const [isOpen, setIsOpen] = useState(false);
+ *    return (<div>
+ *      {isOpen && <Popover append-to="some-element-id">...</mdc-popover>}
+ *    </div>);
+ * }
+ * ```
+ * As a workaround Popover need to wrap with any other element/component, for example:
+ * ```tsx
+ * const SomeComponent = () => {
+ *    const [isOpen, setIsOpen] = useState(false);
+ *    return (<div>
+ *      {isOpen && <div>
+ *        <Popover append-to="some-element-id">...</mdc-popover>
+ *      <div>}
+ *    </div>);
+ * }
+ * ```
+ * Note the wrapper <div> around the Popover component (React.Fragment does not work).
  *
  * @dependency mdc-button
  *
  * @tagname mdc-popover
  *
- *
  * @event shown - (React: onShown) This event is dispatched when the popover is shown
  * @event hidden - (React: onHidden) This event is dispatched when the popover is hidden
  * @event created - (React: onCreated) This event is dispatched when the popover is created (added to the DOM)
@@ -632,12 +668,12 @@ class Popover extends BackdropMixin(PreventScrollMixin(FocusTrapMixin(Component)
     }
     async firstUpdated(changedProperties) {
         super.firstUpdated(changedProperties);
-        this.style.zIndex = `${this.zIndex}`;
-        this.utils.setupAppendTo();
         PopoverEventManager.onCreatedPopover(this);
     }
     connectedCallback() {
         super.connectedCallback();
+        this.style.zIndex = `${this.zIndex}`;
+        this.utils.setupAppendTo();
         this.setupTriggerListeners();
     }
     async disconnectedCallback() {
@@ -656,6 +692,7 @@ class Popover extends BackdropMixin(PreventScrollMixin(FocusTrapMixin(Component)
                 this.connectedTooltip.shouldSuppressOpening = false;
             }
         }
+        this.utils.cleanupAppendTo();
         PopoverEventManager.onDestroyedPopover(this);
         popoverStack.remove(this);
     }
@@ -683,8 +720,13 @@ class Popover extends BackdropMixin(PreventScrollMixin(FocusTrapMixin(Component)
         if (changedProperties.has('zIndex')) {
             this.setAttribute('z-index', `${this.zIndex}`);
         }
-        if (changedProperties.has('append-to')) {
-            this.utils.setupAppendTo();
+        if (changedProperties.has('appendTo')) {
+            if (this.appendTo) {
+                this.utils.setupAppendTo();
+            }
+            else {
+                this.utils.cleanupAppendTo();
+            }
         }
         if (changedProperties.has('interactive') ||
             changedProperties.has('aria-label') ||

package/dist/components/popover/popover.portal.component.d.ts

@@ -0,0 +1,29 @@
+import { Component } from '../../models';
+export declare const TAG_NAME: "mdc-popoverportal";
+/**
+ * PopoverPortal in a placeholder component
+ *
+ * When the popover appended to another container, this component is used to mark the original place of the
+ * popover in the DOM. When the portal removed from the DOM, we remove the popover from the container as well.
+ *
+ * We need this behavior to support on hover menus. Without the portal:
+ * - Each time when then consumer renders the menu we append a new instance of the popover to the container which
+ *   cause memory leak.
+ * - Trigger component will open all popovers at once, because all of them has the same triggerID and all
+ *   listeners attached to the document.
+ *
+ * Portal component make sure the popover clean up when it was normally (without append-to) removed from the DOM.
+ * This is especially important when the popover is used in a framework like React or Angular, where virtual does not
+ * know about the popover moved to another place in the DOM.
+ *
+ * @internal
+ */
+export declare class PopoverPortal extends Component {
+    onDisconnect: Function | undefined;
+    connectedCallback(): void;
+    /**
+     * When the portal removed from the DOM, we remove the popover from the container as well.
+     * @internal
+     */
+    disconnectedCallback(): void;
+}

package/dist/components/popover/popover.portal.component.js

@@ -0,0 +1,37 @@
+import { Component } from '../../models';
+import utils from '../../utils/tag-name';
+export const TAG_NAME = utils.constructTagName('popoverportal');
+/**
+ * PopoverPortal in a placeholder component
+ *
+ * When the popover appended to another container, this component is used to mark the original place of the
+ * popover in the DOM. When the portal removed from the DOM, we remove the popover from the container as well.
+ *
+ * We need this behavior to support on hover menus. Without the portal:
+ * - Each time when then consumer renders the menu we append a new instance of the popover to the container which
+ *   cause memory leak.
+ * - Trigger component will open all popovers at once, because all of them has the same triggerID and all
+ *   listeners attached to the document.
+ *
+ * Portal component make sure the popover clean up when it was normally (without append-to) removed from the DOM.
+ * This is especially important when the popover is used in a framework like React or Angular, where virtual does not
+ * know about the popover moved to another place in the DOM.
+ *
+ * @internal
+ */
+export class PopoverPortal extends Component {
+    connectedCallback() {
+        super.connectedCallback();
+        // We don't want the portal to be focusable or visible for screen readers
+        this.ariaHidden = 'true';
+    }
+    /**
+     * When the portal removed from the DOM, we remove the popover from the container as well.
+     * @internal
+     */
+    disconnectedCallback() {
+        var _a;
+        super.disconnectedCallback();
+        (_a = this.onDisconnect) === null || _a === void 0 ? void 0 : _a.call(this);
+    }
+}

package/dist/components/popover/popover.utils.d.ts

@@ -2,6 +2,17 @@ import type Popover from './popover.component';
 export declare class PopoverUtils {
     /** @internal */
     private popover;
+    /**
+     * The portal element used when the popover is appended to another container.
+     * @internal
+     */
+    private portalElement;
+    /**
+     * Flag to indicate if the popover was diconnected because it was appended to another container, or
+     * it was actually removed from the DOM.
+     * @internal
+     */
+    private disconnectAfterAppendTo;
     /** @internal */
     private arrowPixelChange;
     constructor(popover: Popover);
@@ -24,6 +35,10 @@ export declare class PopoverUtils {
      * DOM element by its ID, and appends this popover as a child of that element.
      */
     setupAppendTo(): void;
+    /**
+     * Remove portal component to when the popover appended to somewhere else and removed from the DOM
+     */
+    cleanupAppendTo(): void;
     /**
      * Sets up the aria labels
      */

package/dist/components/popover/popover.utils.js

@@ -1,6 +1,18 @@
 import { ROLE } from '../../utils/roles';
+import { TAG_NAME as POPOVER_PORTAL_TAG_NAME } from './popover.portal.component';
 export class PopoverUtils {
     constructor(popover) {
+        /**
+         * The portal element used when the popover is appended to another container.
+         * @internal
+         */
+        this.portalElement = null;
+        /**
+         * Flag to indicate if the popover was diconnected because it was appended to another container, or
+         * it was actually removed from the DOM.
+         * @internal
+         */
+        this.disconnectAfterAppendTo = false;
         /** @internal */
         this.arrowPixelChange = false;
         this.popover = popover;
@@ -78,13 +90,30 @@ export class PopoverUtils {
      * DOM element by its ID, and appends this popover as a child of that element.
      */
     setupAppendTo() {
+        var _a, _b;
         if (this.popover.appendTo) {
-            const appendToElement = document.getElementById(this.popover.appendTo);
-            if (appendToElement) {
-                appendToElement.appendChild(this.popover);
+            const appendToEl = document.getElementById(this.popover.appendTo);
+            if (appendToEl && !Array.from(appendToEl.children).includes(this.popover)) {
+                this.disconnectAfterAppendTo = true;
+                this.portalElement = document.createElement(POPOVER_PORTAL_TAG_NAME);
+                this.portalElement.onDisconnect = () => {
+                    this.popover.remove();
+                    this.portalElement = null;
+                };
+                (_b = (_a = this.popover.parentElement) === null || _a === void 0 ? void 0 : _a.appendChild) === null || _b === void 0 ? void 0 : _b.call(_a, this.portalElement);
+                appendToEl.appendChild(this.popover);
             }
         }
     }
+    /**
+     * Remove portal component to when the popover appended to somewhere else and removed from the DOM
+     */
+    cleanupAppendTo() {
+        if (!this.disconnectAfterAppendTo && this.portalElement) {
+            this.portalElement.remove();
+        }
+        this.disconnectAfterAppendTo = false;
+    }
     /**
      * Sets up the aria labels
      */

package/dist/components/progressbar/progressbar.styles.js

@@ -13,9 +13,9 @@ const styles = [
       --mdc-progressbar-border-radius: var(--mdc-progressbar-height);
 
       --mdc-progressbar-label-color: var(--mds-color-theme-text-primary-normal);
-      --mdc-progressbar-label-line-height: var(--mds-font-lineheight-body-midsize);
-      --mdc-progressbar-label-font-size: var(--mds-font-size-body-midsize);
-      --mdc-progressbar-label-font-weight: var(--mds-font-weight-regular);
+      --mdc-progressbar-label-line-height: var(--mds-font-apps-body-midsize-regular-line-height);
+      --mdc-progressbar-label-font-size: var(--mds-font-apps-body-midsize-regular-font-size);
+      --mdc-progressbar-label-font-weight: var(--mds-font-apps-body-midsize-regular-font-weight);
       --mdc-progressbar-help-text-color: var(--mds-color-theme-text-secondary-normal);
 
       width: 100%;
@@ -71,8 +71,6 @@ const styles = [
       border-radius: var(--mdc-progressbar-border-radius);
     }
 
-    :host::part(label-text),
-    :host::part(help-text),
     :host::part(percentage) {
       font-size: var(--mdc-progressbar-label-font-size);
       font-weight: var(--mdc-progressbar-label-font-weight);

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

@@ -64,7 +64,7 @@ class Radio extends AutoFocusOnMountMixin(FormInternalsMixin(DataAriaLabelMixin(
         this.renderLabelAndHelperText = () => {
             if (!this.label)
                 return nothing;
-            return html `<div class="mdc-radio__label-container">${this.renderLabel()} ${this.renderHelperText()}</div>`;
+            return html `<div part="text-container">${this.renderLabel()} ${this.renderHelperText()}</div>`;
         };
     }
     connectedCallback() {
@@ -279,6 +279,7 @@ class Radio extends AutoFocusOnMountMixin(FormInternalsMixin(DataAriaLabelMixin(
       >
         <input
           id="${this.inputId}"
+          part="radio-input"
           type="radio"
           role="${ROLE.RADIO}"
           ?autofocus="${this.autofocus}"
@@ -290,7 +291,6 @@ class Radio extends AutoFocusOnMountMixin(FormInternalsMixin(DataAriaLabelMixin(
           ?checked=${this.checked}
           ?readonly=${this.readonly}
           ?disabled=${this.disabled}
-          class="mdc-radio__input"
           aria-checked="${this.checked}"
           aria-describedby="${ifDefined(this.helpText ? FORMFIELD_DEFAULTS.HELPER_TEXT_ID : '')}"
           aria-label="${(_a = this.dataAriaLabel) !== null && _a !== void 0 ? _a : ''}"