@momentum-design/components 0.133.4 → 0.133.6

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

@@ -1,6 +1,5 @@
 import type { CSSResult } from 'lit';
 import FormfieldWrapper from '../formfieldwrapper/formfieldwrapper.component';
-declare const FormfieldGroup_base: import("../../utils/mixins/index.types").Constructor<import("../../utils/mixins/DataAriaLabelMixin").DataAriaLabelMixinInterface> & typeof FormfieldWrapper;
 /**
  * `mdc-formfieldgroup` component, groups the form field components together.
  * All passed in children will have a gap of 12px (0.75rem) each applied.
@@ -38,7 +37,6 @@ declare const FormfieldGroup_base: import("../../utils/mixins/index.types").Cons
  * @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 - Formfieldgroup host container
  * @csspart group-header - This contains the label and help text for the group
  *
  * @cssproperty --mdc-label-font-size - Font size for the label text.
@@ -51,13 +49,14 @@ declare const FormfieldGroup_base: import("../../utils/mixins/index.types").Cons
  * @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 {
+declare class FormfieldGroup extends FormfieldWrapper {
     /**
      * @internal
      * This is used to set the role of the component as `radiogroup` if this is true and to 'group' if it is false.
      */
     protected isRadio: boolean;
     connectedCallback(): void;
+    update(changedProperties: Map<string, unknown>): void;
     render(): import("lit-html").TemplateResult<1>;
     static styles: Array<CSSResult>;
 }

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

@@ -1,9 +1,6 @@
 import { html } from 'lit';
-import { ifDefined } from 'lit/directives/if-defined.js';
-import { DataAriaLabelMixin } from '../../utils/mixins/DataAriaLabelMixin';
 import { ROLE } from '../../utils/roles';
 import FormfieldWrapper from '../formfieldwrapper/formfieldwrapper.component';
-import { DEFAULTS as FORMFIELD_DEFAULTS } from '../formfieldwrapper/formfieldwrapper.constants';
 import styles from './formfieldgroup.styles';
 /**
  * `mdc-formfieldgroup` component, groups the form field components together.
@@ -42,7 +39,6 @@ import styles from './formfieldgroup.styles';
  * @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 - Formfieldgroup host container
  * @csspart group-header - This contains the label and help text for the group
  *
  * @cssproperty --mdc-label-font-size - Font size for the label text.
@@ -55,7 +51,7 @@ import styles from './formfieldgroup.styles';
  * @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) {
+class FormfieldGroup extends FormfieldWrapper {
     constructor() {
         super(...arguments);
         /**
@@ -65,23 +61,24 @@ class FormfieldGroup extends DataAriaLabelMixin(FormfieldWrapper) {
         this.isRadio = false;
     }
     connectedCallback() {
+        var _a;
         super.connectedCallback();
         this.shouldRenderLabel = false;
         this.disabled = undefined;
+        this.role = this.isRadio ? ROLE.RADIOGROUP : ROLE.GROUP;
+        this.ariaDescription = (_a = this.helpText) !== null && _a !== void 0 ? _a : '';
+        this.ariaLabel = this.label || '';
+    }
+    update(changedProperties) {
+        super.update(changedProperties);
+        if (changedProperties.has('label') && !this.ariaLabel) {
+            this.ariaLabel = this.label || '';
+        }
     }
     render() {
-        var _a;
         return html `
-      <div
-        part="container"
-        role="${this.isRadio ? ROLE.RADIOGROUP : ROLE.GROUP}"
-        aria-labelledby="${FORMFIELD_DEFAULTS.HEADING_ID}"
-        aria-describedby="${ifDefined(this.helpText ? FORMFIELD_DEFAULTS.HELPER_TEXT_ID : '')}"
-        aria-label="${(_a = this.dataAriaLabel) !== null && _a !== void 0 ? _a : ''}"
-      >
-        <div part="group-header">${this.renderLabel()} ${this.renderHelperText()}</div>
-        <slot></slot>
-      </div>
+      <div part="group-header">${this.renderLabel()} ${this.renderHelperText()}</div>
+      <slot></slot>
     `;
     }
 }

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

@@ -1,6 +1,6 @@
 import { css } from 'lit';
 const styles = css `
-  :host::part(container) {
+  :host {
     display: flex;
     flex-direction: column;
     gap: 0.75rem;

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

@@ -1,7 +1,7 @@
 import { CSSResult, PropertyValueMap, PropertyValues } from 'lit';
 import FormfieldWrapper from '../formfieldwrapper/formfieldwrapper.component';
 import { AssociatedFormControl } from '../../utils/mixins/FormInternalsMixin';
-declare const Radio_base: import("../../utils/mixins/index.types").Constructor<import("../../utils/mixins/KeyDownHandledMixin").KeyDownHandledMixinInterface> & import("../../utils/mixins/index.types").Constructor<import("../../utils/mixins/KeyToActionMixin").KeyToActionInterface> & import("../../utils/mixins/index.types").Constructor<import("../../models").Component & import("../../utils/mixins/AutoFocusOnMountMixin").AutoFocusOnMountMixinInterface> & import("../../utils/mixins/index.types").Constructor<import("../../utils/mixins/FormInternalsMixin").FormInternalsMixinInterface> & import("../../utils/mixins/index.types").Constructor<import("../../utils/mixins/DataAriaLabelMixin").DataAriaLabelMixinInterface> & typeof FormfieldWrapper;
+declare const Radio_base: import("../../utils/mixins/index.types").Constructor<import("../../utils/mixins/KeyDownHandledMixin").KeyDownHandledMixinInterface> & import("../../utils/mixins/index.types").Constructor<import("../../utils/mixins/KeyToActionMixin").KeyToActionInterface> & import("../../utils/mixins/index.types").Constructor<import("../../models").Component & import("../../utils/mixins/AutoFocusOnMountMixin").AutoFocusOnMountMixinInterface> & import("../../utils/mixins/index.types").Constructor<import("../../utils/mixins/FormInternalsMixin").FormInternalsMixinInterface> & typeof FormfieldWrapper;
 /**
  * The Radio component allows users to select a single option from a group of mutually exclusive choices.
  * Unlike checkboxes which allow multiple selections, radio buttons ensure only one option can be selected
@@ -11,19 +11,26 @@ declare const Radio_base: import("../../utils/mixins/index.types").Constructor<i
  * To create a group of radio buttons, use the `mdc-radiogroup` component or ensure all radio buttons
  * share the same `name` attribute.
  *
- * **Note:** This component internally renders a native radio input element with custom styling.
+ * ## Validation
  *
- * ## When to use
- * Use radio buttons when users must select exactly one option from a list of 2-5 choices. For longer lists,
- * consider using a dropdown menu instead.
+ * Radio component support native form validation. But it does not have default validation message.
+ * Also, `required` attribute does not render indicator (red asterisk) for the radio component.
+ *
+ * The recommended way to show validation message for radio groups is to wrap the `mdc-radio` with `mdc-radiogroup`
+ * and set the `help-text` of the `mdc-radiogroup` based on its validation state.
+ *
+ * Alternatively you can also set the `validation-message` attribute of the `mdc-radio`. This message will appear
+ * in a native tooltip when the radio is checked and invalid.
  *
  * ## Accessibility
+ *
  * - Provide clear labels that describe each option
  * - Use `data-aria-label` when a visual label is not present
  * - Keyboard navigation: Arrow keys to move between options, Space to select, Tab to navigate groups, Enter to submit form
  * - Group related radio buttons using the same `name` attribute or `mdc-radiogroup` component
  *
  * ## Styling
+ *
  * Use the `static-radio` part to apply custom styles to the radio visual element.
  * This part exposes the underlying [StaticRadio](?path=/docs/components-decorator-staticradio--docs) component for advanced styling.
  *
@@ -35,20 +42,16 @@ declare const Radio_base: import("../../utils/mixins/index.types").Constructor<i
  *
  * @tagname mdc-radio
  *
- * @event change - (React: onChange) Event that gets dispatched when the radio state changes.
+ * @event input - (React: onInput) Event that gets dispatched when the radio state changes (before the change event).
+ * @event change - (React: onChange) Event that gets dispatched when the radio state changes (after the input event).
  * @event focus - (React: onFocus) Event that gets dispatched when the radio receives focus.
  *
  * @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 radio-input - The native radio input element that provides the interactive functionality.
- * @csspart text-container - The container for the label and helper text elements.
  * @csspart static-radio - The staticradio that provides the visual radio appearance.
+ *
+ * @slot indicator - Slot for the radio indicator element. If not provided, a default styled radio will be rendered.
+ * @slot label - Slot for the label of the radio.
  */
 declare class Radio extends Radio_base implements AssociatedFormControl {
     /**
@@ -57,6 +60,7 @@ declare class Radio extends Radio_base implements AssociatedFormControl {
      * @default false
      */
     checked: boolean;
+    constructor();
     connectedCallback(): void;
     protected firstUpdated(_changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>): void;
     /**
@@ -92,6 +96,7 @@ declare class Radio extends Radio_base implements AssociatedFormControl {
      * Handles the change event on the radio element.
      * Unchecks all other radios in the same group and checks this radio.
      * Dispatches the change event.
+     * @param emitClick - A boolean when click event must be emitted before other events
      * @internal
      */
     private handleChange;
@@ -104,6 +109,8 @@ declare class Radio extends Radio_base implements AssociatedFormControl {
      * @internal
      */
     private updateRadio;
+    private handleClick;
+    private emitCheckedChangeEvent;
     /**
      * Handles the keydown event on the radio element.
      * Supports Arrow keys for navigation between radios in the same group, Space for selection, and Enter for form submission.
@@ -120,8 +127,12 @@ declare class Radio extends Radio_base implements AssociatedFormControl {
      */
     private updateTabIndex;
     update(changedProperties: PropertyValues): void;
-    /** @internal */
-    private renderLabelAndHelperText;
+    /**
+     * Updates the aria-label of the radio element based on the label or data-aria-label attribute.
+     * @internal
+     */
+    private updateAriaLabel;
+    setValidity(): void;
     render(): import("lit-html").TemplateResult<1>;
     static styles: Array<CSSResult>;
 }

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

@@ -8,13 +8,10 @@ var __metadata = (this && this.__metadata) || function (k, v) {
     if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
 };
 /* eslint-disable no-param-reassign */
-import { html, nothing } from 'lit';
+import { html } from 'lit';
 import { property } from 'lit/decorators.js';
-import { ifDefined } from 'lit/directives/if-defined.js';
 import FormfieldWrapper from '../formfieldwrapper/formfieldwrapper.component';
-import { DataAriaLabelMixin } from '../../utils/mixins/DataAriaLabelMixin';
 import { FormInternalsMixin } from '../../utils/mixins/FormInternalsMixin';
-import { DEFAULTS as FORMFIELD_DEFAULTS } from '../formfieldwrapper/formfieldwrapper.constants';
 import { ROLE } from '../../utils/roles';
 import { AutoFocusOnMountMixin } from '../../utils/mixins/AutoFocusOnMountMixin';
 import { ACTIONS, KeyToActionMixin, NAV_MODES } from '../../utils/mixins/KeyToActionMixin';
@@ -29,19 +26,26 @@ import styles from './radio.styles';
  * To create a group of radio buttons, use the `mdc-radiogroup` component or ensure all radio buttons
  * share the same `name` attribute.
  *
- * **Note:** This component internally renders a native radio input element with custom styling.
+ * ## Validation
  *
- * ## When to use
- * Use radio buttons when users must select exactly one option from a list of 2-5 choices. For longer lists,
- * consider using a dropdown menu instead.
+ * Radio component support native form validation. But it does not have default validation message.
+ * Also, `required` attribute does not render indicator (red asterisk) for the radio component.
+ *
+ * The recommended way to show validation message for radio groups is to wrap the `mdc-radio` with `mdc-radiogroup`
+ * and set the `help-text` of the `mdc-radiogroup` based on its validation state.
+ *
+ * Alternatively you can also set the `validation-message` attribute of the `mdc-radio`. This message will appear
+ * in a native tooltip when the radio is checked and invalid.
  *
  * ## Accessibility
+ *
  * - Provide clear labels that describe each option
  * - Use `data-aria-label` when a visual label is not present
  * - Keyboard navigation: Arrow keys to move between options, Space to select, Tab to navigate groups, Enter to submit form
  * - Group related radio buttons using the same `name` attribute or `mdc-radiogroup` component
  *
  * ## Styling
+ *
  * Use the `static-radio` part to apply custom styles to the radio visual element.
  * This part exposes the underlying [StaticRadio](?path=/docs/components-decorator-staticradio--docs) component for advanced styling.
  *
@@ -53,49 +57,46 @@ import styles from './radio.styles';
  *
  * @tagname mdc-radio
  *
- * @event change - (React: onChange) Event that gets dispatched when the radio state changes.
+ * @event input - (React: onInput) Event that gets dispatched when the radio state changes (before the change event).
+ * @event change - (React: onChange) Event that gets dispatched when the radio state changes (after the input event).
  * @event focus - (React: onFocus) Event that gets dispatched when the radio receives focus.
  *
  * @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 radio-input - The native radio input element that provides the interactive functionality.
- * @csspart text-container - The container for the label and helper text elements.
  * @csspart static-radio - The staticradio that provides the visual radio appearance.
+ *
+ * @slot indicator - Slot for the radio indicator element. If not provided, a default styled radio will be rendered.
+ * @slot label - Slot for the label of the radio.
  */
-class Radio extends KeyDownHandledMixin(KeyToActionMixin(AutoFocusOnMountMixin(FormInternalsMixin(DataAriaLabelMixin(FormfieldWrapper))))) {
+class Radio extends KeyDownHandledMixin(KeyToActionMixin(AutoFocusOnMountMixin(FormInternalsMixin(FormfieldWrapper)))) {
     constructor() {
-        super(...arguments);
+        super();
         /**
          * Determines whether the radio is checked (selected) or unchecked.
          * Within a radio group, only one radio can be checked at a time.
          * @default false
          */
         this.checked = false;
-        /** @internal */
-        this.renderLabelAndHelperText = () => {
-            if (!this.label)
-                return nothing;
-            return html `<div part="text-container">${this.renderLabel()} ${this.renderHelperText()}</div>`;
-        };
+        this.addEventListener('click', this.handleClick);
+        this.addEventListener('keydown', this.handleKeyDown);
     }
     connectedCallback() {
         super.connectedCallback();
-        // Radio does not contain helpTextType property.
+        this.role = ROLE.RADIO;
+        this.shouldRenderLabel = false;
+        // Radio should not contain these properties.
         this.helpTextType = undefined;
+        this.toggletipPlacement = undefined;
+        this.toggletipStrategy = undefined;
+        this.updateAriaLabel();
     }
     firstUpdated(_changedProperties) {
         this.updateTabIndex();
         // set the element to auto focus if autoFocusOnMount is set to true
         // before running the super method, so that the AutoFocusOnMountMixin can use it
         // to focus the correct element
-        if (this.inputElement && this.autoFocusOnMount) {
-            this.elementToAutoFocus = this.inputElement;
+        if (this.autoFocusOnMount) {
+            this.elementToAutoFocus = this;
         }
         super.firstUpdated(_changedProperties);
     }
@@ -138,12 +139,6 @@ class Radio extends KeyDownHandledMixin(KeyToActionMixin(AutoFocusOnMountMixin(F
             this.internals.setValidity({});
         }
         else if (this.required && !this.checked) {
-            if (this.validationMessage) {
-                this.inputElement.setCustomValidity(this.validationMessage);
-            }
-            else {
-                this.inputElement.setCustomValidity('');
-            }
             this.setValidity();
         }
         this.updateTabIndex();
@@ -157,15 +152,9 @@ class Radio extends KeyDownHandledMixin(KeyToActionMixin(AutoFocusOnMountMixin(F
     setGroupValidity(radios, isValid) {
         this.updateComplete
             .then(() => {
-            radios.forEach(radio => {
-                radio.setComponentValidity(isValid);
-            });
+            radios.forEach(radio => radio.setComponentValidity(isValid));
         })
-            .catch(error => {
-            if (this.onerror) {
-                this.onerror(error);
-            }
-        });
+            .catch(error => { var _a; return (_a = this.onerror) === null || _a === void 0 ? void 0 : _a.call(this, error); });
     }
     /**
      * Updates the form value to reflect the current state of the radio.
@@ -174,57 +163,43 @@ class Radio extends KeyDownHandledMixin(KeyToActionMixin(AutoFocusOnMountMixin(F
      * @internal
      */
     setActualFormValue() {
-        let actualValue = '';
-        if (this.checked) {
-            actualValue = !this.value ? 'on' : this.value;
-        }
-        else {
-            actualValue = null;
-        }
         const radios = this.getAllRadiosWithinSameGroup();
         if (this.checked) {
             this.setGroupValidity(radios, true);
+            this.internals.setFormValue(this.value || 'on');
         }
         else {
             const anyRequired = radios.some(r => r.required);
-            const anyChecked = !!radios.find(r => r.checked);
+            const anyChecked = radios.some(r => r.checked);
             const isInvalid = anyRequired && !anyChecked;
             this.setGroupValidity(radios, !isInvalid);
+            this.internals.setFormValue(null);
         }
-        this.internals.setFormValue(actualValue);
     }
     /**
      * Handles the change event on the radio element.
      * Unchecks all other radios in the same group and checks this radio.
      * Dispatches the change event.
+     * @param emitClick - A boolean when click event must be emitted before other events
      * @internal
      */
-    handleChange() {
-        var _a;
-        if (this.disabled || this.readonly || this.softDisabled)
+    handleChange(emitClick = false) {
+        if (this.checked || this.disabled || this.readonly || this.softDisabled)
             return;
         const radios = this.getAllRadiosWithinSameGroup();
+        //  Uncheck all radios in the same group (name)
         radios.forEach(radio => {
-            var _a;
-            /**
-             *  Uncheck all radios in the same group (name)
-             */
-            const radioElement = (_a = radio.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('input');
-            if (radioElement) {
-                radio.checked = false;
-                radioElement.checked = false;
-            }
+            radio.checked = false;
         });
         this.checked = true;
-        const inputElement = (_a = this.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('input');
-        if (inputElement) {
-            inputElement.checked = true;
+        // Native radio input emits click, input and change event in this order when
+        if (emitClick) {
+            super.click();
         }
-        this.dispatchEvent(new Event('change', { bubbles: true, composed: true }));
+        this.emitCheckedChangeEvent();
     }
     click() {
-        super.click();
-        this.handleChange();
+        this.handleChange(true);
     }
     /**
      * Updates the state of the radio button at the specified index within the enabled radios.
@@ -234,9 +209,18 @@ class Radio extends KeyDownHandledMixin(KeyToActionMixin(AutoFocusOnMountMixin(F
      * @internal
      */
     updateRadio(enabledRadios, index) {
-        var _a, _b;
-        (_b = (_a = enabledRadios[index].shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('input')) === null || _b === void 0 ? void 0 : _b.focus();
-        enabledRadios[index].handleChange();
+        const radio = enabledRadios[index];
+        radio.focus();
+        radio.handleChange();
+    }
+    handleClick() {
+        this.handleChange();
+    }
+    emitCheckedChangeEvent() {
+        if (this.checked) {
+            this.dispatchEvent(new Event('input', { bubbles: true, composed: true }));
+            this.dispatchEvent(new Event('change', { bubbles: true, composed: true }));
+        }
     }
     /**
      * Handles the keydown event on the radio element.
@@ -256,19 +240,12 @@ class Radio extends KeyDownHandledMixin(KeyToActionMixin(AutoFocusOnMountMixin(F
         const enabledRadios = radios.filter(radio => !radio.disabled);
         const currentIndex = enabledRadios.indexOf(this);
         // Leave navigation between radios to the spatial navigation context if it exists
-        if (this.getKeyboardNavMode() !== NAV_MODES.DEFAULT) {
+        if (this.getKeyboardNavMode() === NAV_MODES.SPATIAL) {
             if (action === ACTIONS.ENTER) {
                 this.updateRadio(enabledRadios, currentIndex);
                 this.keyDownEventHandled();
             }
-            const radios = this.getAllRadiosWithinSameGroup();
-            radios.forEach(radio => {
-                var _a;
-                const input = (_a = radio.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('input');
-                if (input) {
-                    input.tabIndex = 0;
-                }
-            });
+            this.updateTabIndex();
             return;
         }
         if (action === ACTIONS.DOWN || action === ACTIONS.RIGHT) {
@@ -297,60 +274,66 @@ class Radio extends KeyDownHandledMixin(KeyToActionMixin(AutoFocusOnMountMixin(F
      * @internal
      */
     updateTabIndex() {
+        // Leave navigation between radios to the spatial navigation context if it exists
+        const isSpatialNavMode = this.getKeyboardNavMode() === NAV_MODES.SPATIAL;
         const radios = this.getAllRadiosWithinSameGroup();
         const checked = radios.find(radio => radio.checked);
         const firstEnabledRadio = radios.find(radio => !radio.disabled);
         radios.forEach(radio => {
-            var _a;
-            const inputElement = (_a = radio.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('input');
-            if (inputElement) {
-                inputElement.tabIndex = -1;
-                if (radio === checked) {
-                    inputElement.tabIndex = 0;
-                }
-                else if (!checked && radio === firstEnabledRadio) {
-                    inputElement.tabIndex = 0;
-                }
+            radio.tabIndex = -1;
+            if (isSpatialNavMode) {
+                radio.tabIndex = 0;
+            }
+            else if (radio === checked) {
+                radio.tabIndex = 0;
+            }
+            else if (!checked && radio === firstEnabledRadio) {
+                radio.tabIndex = 0;
             }
         });
     }
     update(changedProperties) {
         super.update(changedProperties);
         if (changedProperties.has('checked')) {
+            this.ariaChecked = this.checked.toString();
             this.setActualFormValue();
         }
+        if (changedProperties.has('label')) {
+            this.updateAriaLabel();
+        }
+    }
+    /**
+     * Updates the aria-label of the radio element based on the label or data-aria-label attribute.
+     * @internal
+     */
+    updateAriaLabel() {
+        if (!this.ariaLabel && this.ariaLabel !== this.label) {
+            this.ariaLabel = this.label || '';
+        }
+    }
+    setValidity() {
+        if (this.required && !this.checked && this.validationMessage) {
+            this.internals.setValidity({ valueMissing: true, customError: true }, this.validationMessage, this);
+        }
+        this.internals.setValidity({});
     }
     render() {
-        var _a;
         return html `
-      <mdc-staticradio
-        class="mdc-focus-ring"
-        ?checked="${this.checked}"
-        ?disabled="${this.disabled}"
-        ?readonly="${this.readonly}"
-        ?soft-disabled="${this.softDisabled}"
-        part="static-radio"
-      >
-        <input
-          id="${this.inputId}"
-          part="radio-input"
-          type="radio"
-          role="${ROLE.RADIO}"
-          ?autofocus="${this.autofocus}"
-          name="${ifDefined(this.name)}"
-          value="${ifDefined(this.value)}"
-          ?required="${this.required}"
-          @change=${this.handleChange}
-          @keydown=${this.handleKeyDown}
-          ?checked=${this.checked}
-          ?readonly=${this.readonly}
-          ?disabled=${this.disabled}
-          aria-checked="${this.checked}"
-          aria-describedby="${ifDefined(this.helpText ? FORMFIELD_DEFAULTS.HELPER_TEXT_ID : '')}"
-          aria-label="${(_a = this.dataAriaLabel) !== null && _a !== void 0 ? _a : ''}"
-        />
-      </mdc-staticradio>
-      ${this.renderLabelAndHelperText()}
+      <slot name="indicator">
+        <mdc-staticradio
+          part="radio-indicator"
+          role="presentation"
+          class="mdc-focus-ring"
+          ?checked="${this.checked}"
+          ?disabled="${this.disabled}"
+          ?readonly="${this.readonly}"
+          ?soft-disabled="${this.softDisabled}"
+        >
+        </mdc-staticradio>
+      </slot>
+      <div part="label-text">
+        <slot name="label">${this.renderLabelElement()}</slot>
+      </div>
     `;
     }
 }

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

@@ -1,5 +1,5 @@
 import { css } from 'lit';
-import { hostFitContentStyles, hostFocusRingStyles } from '../../utils/styles';
+import { focusRingBoxShadow, hostFitContentStyles, hostFocusRingStyles } from '../../utils/styles';
 const styles = [
     hostFitContentStyles,
     css `
@@ -13,22 +13,8 @@ const styles = [
       gap: 0.5rem;
     }
 
-    :host::part(radio-input) {
-      position: absolute;
-      opacity: 0;
-      margin: 0;
-      width: 100%;
-      height: 100%;
-      cursor: pointer;
-      z-index: 1;
-    }
-
-    :host::part(text-container) {
-      display: flex;
-      flex-direction: column;
-      justify-content: center;
-      gap: 0.25rem;
-      flex: 1;
+    :host::part(radio-indicator) {
+      flex: none;
     }
 
     :host::part(label) {
@@ -37,6 +23,10 @@ const styles = [
       white-space: normal;
     }
 
+    :host::part(label-text) {
+      display: contents;
+    }
+
     :host(:hover)::part(static-radio) {
       --mdc-staticradio-outer-circle-background-color: var(--mds-color-theme-control-inactive-hover);
     }
@@ -60,6 +50,30 @@ const styles = [
     :host([soft-disabled]) {
       pointer-events: none;
     }
+
+    :host(:focus-within),
+    :host(:focus-visible) {
+      outline: none;
+    }
+
+    :host(:focus-visible)::part(radio-indicator) {
+      outline: none;
+    }
+    :host([disabled]:focus) {
+      box-shadow: none;
+    }
+
+    :host(:focus-within)::part(radio-indicator) {
+      position: relative;
+      box-shadow: ${focusRingBoxShadow};
+    }
+
+    /* High Contrast Mode */
+    @media (forced-colors: active) {
+      :host(:focus-visible)::part(radio-indicator) {
+        outline: 0.125rem solid var(--mds-color-theme-focus-default-0);
+      }
+    }
   `,
     ...hostFocusRingStyles(true),
 ];

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

@@ -1,7 +1,8 @@
-import type { OverrideEventTarget, TypedCustomEvent } from "../../utils/types";
-import type Radio from "./radio.component";
+import type { OverrideEventTarget, TypedCustomEvent } from '../../utils/types';
+import type Radio from './radio.component';
 interface Events {
     onChangeEvent: TypedCustomEvent<Radio>;
     onFocusEvent: OverrideEventTarget<FocusEvent, Radio>;
+    onInputEvent: OverrideEventTarget<Event, Radio>;
 }
 export type { Events };