@momentum-design/components 0.129.28 → 0.129.30

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

@@ -3,10 +3,29 @@ import FormfieldWrapper from '../formfieldwrapper/formfieldwrapper.component';
 import { AssociatedFormControl } from '../../utils/mixins/FormInternalsMixin';
 declare const Radio_base: 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;
 /**
- * Radio allow users to select single options from a list or turn an item/feature on or off.
- * These are often used in forms, settings, and selection in lists.
+ * 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
+ * at a time within the same group. These are commonly used in forms, surveys, and settings where users
+ * need to make a single selection from multiple options.
  *
- * A radio component contains an optional label, optional info icon and an optional helper text.
+ * 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.
+ *
+ * ## 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.
+ *
+ * ## 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.
  *
  * @dependency mdc-button
  * @dependency mdc-icon
@@ -19,12 +38,6 @@ 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-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.
  * @csspart required-indicator - The required indicator element that is displayed next to the label when the `required` property is set to true.
@@ -33,13 +46,14 @@ declare const Radio_base: import("../../utils/mixins/index.types").Constructor<i
  * @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.
+ * @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.
  */
 declare class Radio extends Radio_base implements AssociatedFormControl {
     /**
-     * Determines whether the radio is selected or unselected.
-     *
+     * Determines whether the radio is checked (selected) or unchecked.
+     * Within a radio group, only one radio can be checked at a time.
      * @default false
      */
     checked: boolean;
@@ -47,6 +61,7 @@ declare class Radio extends Radio_base implements AssociatedFormControl {
     protected firstUpdated(_changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>): void;
     /**
      * Returns all radios within the same group (name).
+     * @internal
      */
     private getAllRadiosWithinSameGroup;
     /** @internal */
@@ -54,6 +69,8 @@ declare class Radio extends Radio_base implements AssociatedFormControl {
     /** @internal */
     formStateRestoreCallback(state: string): void;
     /**
+     * Sets the validity state of the radio component.
+     * @param isValid - Boolean value to set the validity
      * @internal
      */
     setComponentValidity(isValid: boolean): void;
@@ -61,39 +78,48 @@ declare class Radio extends Radio_base implements AssociatedFormControl {
      * Sets the validity of the group of radios.
      * @param radios - Array of radios of the same group
      * @param isValid - Boolean value to set the validity of the group
+     * @internal
      */
     private setGroupValidity;
     /**
      * Updates the form value to reflect the current state of the radio.
-     * If checked, the value is set to the user-provided value.
+     * If checked, the value is set to the user-provided value or 'on' if no value is provided.
      * If unchecked, the value is set to null.
+     * @internal
      */
     private setActualFormValue;
     /**
      * Handles the change event on the radio element.
-     * This will toggle the state of the radio element.
+     * Unchecks all other radios in the same group and checks this radio.
      * Dispatches the change event.
+     * @internal
      */
     private handleChange;
     /**
      * Updates the state of the radio button at the specified index within the enabled radios.
-     * Focuses the radio button and triggers the change event if the radio button is not read-only.
-     *
+     * Focuses the radio button and triggers the change event.
      * @param enabledRadios - An array of enabled radio buttons within the same group.
      * @param index - The index of the radio button to be updated within the enabled radios array.
+     * @internal
      */
     private updateRadio;
     /**
-     * Handles the keydown event (Arrow Up/Down/Left/Right) on the radio element.
+     * 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.
+     * @param event - The keyboard event.
+     * @internal
      */
     private handleKeyDown;
     /**
-     * Update tab index for all radios in the same group (name)
-     * If any radio group is checked, it will have a tab index of 0
-     * If no radio group is checked, the first enabled radio will have a tab index of 0
+     * Updates tab index for all radios in the same group (name).
+     * If any radio in the group is checked, it will have a tab index of 0.
+     * If no radio is checked, the first enabled radio will have a tab index of 0.
+     * This ensures proper keyboard navigation within radio groups.
+     * @internal
      */
     private updateTabIndex;
     update(changedProperties: PropertyValues): void;
+    /** @internal */
     private renderLabelAndHelperText;
     render(): import("lit-html").TemplateResult<1>;
     static styles: Array<CSSResult>;

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

@@ -20,10 +20,29 @@ import { KEYS } from '../../utils/keys';
 import { AutoFocusOnMountMixin } from '../../utils/mixins/AutoFocusOnMountMixin';
 import styles from './radio.styles';
 /**
- * Radio allow users to select single options from a list or turn an item/feature on or off.
- * These are often used in forms, settings, and selection in lists.
+ * 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
+ * at a time within the same group. These are commonly used in forms, surveys, and settings where users
+ * need to make a single selection from multiple options.
  *
- * A radio component contains an optional label, optional info icon and an optional helper text.
+ * 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.
+ *
+ * ## 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.
+ *
+ * ## 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.
  *
  * @dependency mdc-button
  * @dependency mdc-icon
@@ -36,12 +55,6 @@ 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-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.
  * @csspart required-indicator - The required indicator element that is displayed next to the label when the `required` property is set to true.
@@ -50,18 +63,20 @@ import styles from './radio.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 radio-input - The native radio input element.
+ * @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.
  */
 class Radio extends AutoFocusOnMountMixin(FormInternalsMixin(DataAriaLabelMixin(FormfieldWrapper))) {
     constructor() {
         super(...arguments);
         /**
-         * Determines whether the radio is selected or unselected.
-         *
+         * 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;
@@ -85,6 +100,7 @@ class Radio extends AutoFocusOnMountMixin(FormInternalsMixin(DataAriaLabelMixin(
     }
     /**
      * Returns all radios within the same group (name).
+     * @internal
      */
     getAllRadiosWithinSameGroup() {
         return Array.from(document.querySelectorAll(`mdc-radio[name="${this.name}"]`));
@@ -112,6 +128,8 @@ class Radio extends AutoFocusOnMountMixin(FormInternalsMixin(DataAriaLabelMixin(
         }
     }
     /**
+     * Sets the validity state of the radio component.
+     * @param isValid - Boolean value to set the validity
      * @internal
      */
     setComponentValidity(isValid) {
@@ -133,6 +151,7 @@ class Radio extends AutoFocusOnMountMixin(FormInternalsMixin(DataAriaLabelMixin(
      * Sets the validity of the group of radios.
      * @param radios - Array of radios of the same group
      * @param isValid - Boolean value to set the validity of the group
+     * @internal
      */
     setGroupValidity(radios, isValid) {
         this.updateComplete
@@ -149,8 +168,9 @@ class Radio extends AutoFocusOnMountMixin(FormInternalsMixin(DataAriaLabelMixin(
     }
     /**
      * Updates the form value to reflect the current state of the radio.
-     * If checked, the value is set to the user-provided value.
+     * If checked, the value is set to the user-provided value or 'on' if no value is provided.
      * If unchecked, the value is set to null.
+     * @internal
      */
     setActualFormValue() {
         let actualValue = '';
@@ -174,8 +194,9 @@ class Radio extends AutoFocusOnMountMixin(FormInternalsMixin(DataAriaLabelMixin(
     }
     /**
      * Handles the change event on the radio element.
-     * This will toggle the state of the radio element.
+     * Unchecks all other radios in the same group and checks this radio.
      * Dispatches the change event.
+     * @internal
      */
     handleChange() {
         var _a;
@@ -202,10 +223,10 @@ class Radio extends AutoFocusOnMountMixin(FormInternalsMixin(DataAriaLabelMixin(
     }
     /**
      * Updates the state of the radio button at the specified index within the enabled radios.
-     * Focuses the radio button and triggers the change event if the radio button is not read-only.
-     *
+     * Focuses the radio button and triggers the change event.
      * @param enabledRadios - An array of enabled radio buttons within the same group.
      * @param index - The index of the radio button to be updated within the enabled radios array.
+     * @internal
      */
     updateRadio(enabledRadios, index) {
         var _a, _b;
@@ -213,7 +234,10 @@ class Radio extends AutoFocusOnMountMixin(FormInternalsMixin(DataAriaLabelMixin(
         enabledRadios[index].handleChange();
     }
     /**
-     * Handles the keydown event (Arrow Up/Down/Left/Right) on the radio element.
+     * 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.
+     * @param event - The keyboard event.
+     * @internal
      */
     handleKeyDown(event) {
         var _a;
@@ -244,9 +268,11 @@ class Radio extends AutoFocusOnMountMixin(FormInternalsMixin(DataAriaLabelMixin(
         }
     }
     /**
-     * Update tab index for all radios in the same group (name)
-     * If any radio group is checked, it will have a tab index of 0
-     * If no radio group is checked, the first enabled radio will have a tab index of 0
+     * Updates tab index for all radios in the same group (name).
+     * If any radio in the group is checked, it will have a tab index of 0.
+     * If no radio is checked, the first enabled radio will have a tab index of 0.
+     * This ensures proper keyboard navigation within radio groups.
+     * @internal
      */
     updateTabIndex() {
         const radios = this.getAllRadiosWithinSameGroup();

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

@@ -4,6 +4,9 @@ const styles = [
     hostFitContentStyles,
     css `
     :host {
+      --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);
       display: flex;
       flex-direction: row;
       align-items: start;
@@ -28,35 +31,28 @@ const styles = [
       flex: 1;
     }
 
-    :host::part(required-indicator) {
-      display: none;
-    }
-
     :host::part(label) {
       cursor: pointer;
       word-break: break-word;
       white-space: normal;
-      --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(:hover)::part(static-radio) {
-      --mdc-radio-outer-circle-background-color: var(--mds-color-theme-control-inactive-hover);
+      --mdc-staticradio-outer-circle-background-color: var(--mds-color-theme-control-inactive-hover);
     }
 
     :host(:active)::part(static-radio) {
-      --mdc-radio-outer-circle-background-color: var(--mds-color-theme-control-inactive-pressed);
+      --mdc-staticradio-outer-circle-background-color: var(--mds-color-theme-control-inactive-pressed);
     }
 
     :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);
+      --mdc-staticradio-outer-circle-border-color: var(--mds-color-theme-control-active-hover);
+      --mdc-staticradio-outer-circle-background-color: var(--mds-color-theme-control-active-hover);
     }
 
     :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);
+      --mdc-staticradio-outer-circle-border-color: var(--mds-color-theme-control-active-pressed);
+      --mdc-staticradio-outer-circle-background-color: var(--mds-color-theme-control-active-pressed);
     }
 
     :host([readonly]),

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

@@ -2,39 +2,40 @@ import { CSSResult } from 'lit';
 import { Component } from '../../models';
 declare const StaticRadio_base: import("../../utils/mixins/index.types").Constructor<import("../../utils/mixins/DisabledMixin").DisabledMixinInterface> & typeof Component;
 /**
- * This is a decorative component that is styled to look as a radio.
- * It has 4 properties - checked, disabled, readonly and soft-disabled.
+ * StaticRadio is a decorative component styled as a radio button for visual presentation.
+ * Unlike the interactive `mdc-radio`, this component does not handle user interactions or form submissions.
+ * It is used purely for displaying radio button states in read-only scenarios.
  *
- * We are using the same styling that has been created for the `mdc-radio` component.
+ * This component supports four display states: checked, disabled, readonly, and soft-disabled.
  *
  * @tagname mdc-staticradio
  *
- * @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
+ * @cssproperty --mdc-staticradio-inner-circle-size - The size of the inner circle when checked.
+ * @cssproperty --mdc-staticradio-outer-circle-size - The size of the outer circle border.
+ * @cssproperty --mdc-staticradio-inner-circle-background-color - The background color of the inner circle when checked.
+ * @cssproperty --mdc-staticradio-outer-circle-border-color - The border color of the outer circle.
+ * @cssproperty --mdc-staticradio-outer-circle-background-color - The background color of the outer circle.
  *
- * @csspart radio-icon - The radio icon.
+ * @csspart radio-icon - The radio icon element
  *
- * @slot - Default slot for the label of the radio.
+ * @slot - Default slot for the label of the radio
  */
 declare class StaticRadio extends StaticRadio_base {
     /**
-     * Determines whether the radio is selected or unselected.
-     *
+     * Determines whether the radio appears checked (selected) or unchecked.
      * @default false
      */
     checked: boolean;
     /**
-     * Determines whether the radio is read-only.
-     *
+     * Determines whether the radio appears in a read-only state.
+     * Note: This is purely visual as StaticRadio is non-interactive by design.
      * @default false
      */
     readonly: boolean;
     /**
-     * Determines whether the radio is soft-disabled.
-     *
+     * Determines whether the radio appears in a soft-disabled state.
+     * Soft-disabled provides a less prominent disabled appearance than the standard disabled state.
+     * Note: This is purely visual as StaticRadio is non-interactive by design.
      * @default false
      */
     softDisabled: boolean;

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

@@ -13,41 +13,42 @@ import { Component } from '../../models';
 import { DisabledMixin } from '../../utils/mixins/DisabledMixin';
 import styles from './staticradio.styles';
 /**
- * This is a decorative component that is styled to look as a radio.
- * It has 4 properties - checked, disabled, readonly and soft-disabled.
+ * StaticRadio is a decorative component styled as a radio button for visual presentation.
+ * Unlike the interactive `mdc-radio`, this component does not handle user interactions or form submissions.
+ * It is used purely for displaying radio button states in read-only scenarios.
  *
- * We are using the same styling that has been created for the `mdc-radio` component.
+ * This component supports four display states: checked, disabled, readonly, and soft-disabled.
  *
  * @tagname mdc-staticradio
  *
- * @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
+ * @cssproperty --mdc-staticradio-inner-circle-size - The size of the inner circle when checked.
+ * @cssproperty --mdc-staticradio-outer-circle-size - The size of the outer circle border.
+ * @cssproperty --mdc-staticradio-inner-circle-background-color - The background color of the inner circle when checked.
+ * @cssproperty --mdc-staticradio-outer-circle-border-color - The border color of the outer circle.
+ * @cssproperty --mdc-staticradio-outer-circle-background-color - The background color of the outer circle.
  *
- * @csspart radio-icon - The radio icon.
+ * @csspart radio-icon - The radio icon element
  *
- * @slot - Default slot for the label of the radio.
+ * @slot - Default slot for the label of the radio
  */
 class StaticRadio extends DisabledMixin(Component) {
     constructor() {
         super(...arguments);
         /**
-         * Determines whether the radio is selected or unselected.
-         *
+         * Determines whether the radio appears checked (selected) or unchecked.
          * @default false
          */
         this.checked = false;
         /**
-         * Determines whether the radio is read-only.
-         *
+         * Determines whether the radio appears in a read-only state.
+         * Note: This is purely visual as StaticRadio is non-interactive by design.
          * @default false
          */
         this.readonly = false;
         /**
-         * Determines whether the radio is soft-disabled.
-         *
+         * Determines whether the radio appears in a soft-disabled state.
+         * Soft-disabled provides a less prominent disabled appearance than the standard disabled state.
+         * Note: This is purely visual as StaticRadio is non-interactive by design.
          * @default false
          */
         this.softDisabled = false;

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

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

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

@@ -11,6 +11,7 @@ const styles = [
       --mdc-statictoggle-icon-background-color: var(--mds-color-theme-common-text-primary-normal);
 
       border-radius: var(--mdc-statictoggle-border-radius);
+      position: relative;
     }
 
     :host::part(slider) {
@@ -24,7 +25,7 @@ const styles = [
       justify-content: flex-start;
       transition: background-color 0.3s ease;
       outline: none;
-      padding: 0.125rem;
+      padding: calc(0.125rem - 1px);
     }
 
     :host::part(toggle-icon) {