@momentum-design/components 0.129.29 → 0.129.30

package/dist/custom-elements.json

@@ -153,8 +153,8 @@
               "attribute": "disabled",
               "reflects": true,
               "inheritedFrom": {
-                "name": "AccordionButton",
-                "module": "components/accordionbutton/accordionbutton.component.js"
+                "name": "DisabledMixin",
+                "module": "utils/mixins/DisabledMixin.js"
               }
             },
             {
@@ -412,8 +412,8 @@
               "default": "undefined",
               "fieldName": "disabled",
               "inheritedFrom": {
-                "name": "AccordionButton",
-                "module": "src/components/accordionbutton/accordionbutton.component.ts"
+                "name": "DisabledMixin",
+                "module": "src/utils/mixins/DisabledMixin.ts"
               }
             },
             {
@@ -36915,102 +36915,8 @@
       "declarations": [
         {
           "kind": "class",
-          "description": "Radio allow users to select single options from a list or turn an item/feature on or off.\nThese are often used in forms, settings, and selection in lists.\n\nA radio component contains an optional label, optional info icon and an optional helper text.",
+          "description": "The Radio component allows users to select a single option from a group of mutually exclusive choices.\nUnlike checkboxes which allow multiple selections, radio buttons ensure only one option can be selected\nat a time within the same group. These are commonly used in forms, surveys, and settings where users\nneed to make a single selection from multiple options.\n\nTo create a group of radio buttons, use the `mdc-radiogroup` component or ensure all radio buttons\nshare the same `name` attribute.\n\n**Note:** This component internally renders a native radio input element with custom styling.\n\n## When to use\nUse radio buttons when users must select exactly one option from a list of 2-5 choices. For longer lists,\nconsider using a dropdown menu instead.\n\n## Accessibility\n- Provide clear labels that describe each option\n- Use `data-aria-label` when a visual label is not present\n- Keyboard navigation: Arrow keys to move between options, Space to select, Tab to navigate groups, Enter to submit form\n- Group related radio buttons using the same `name` attribute or `mdc-radiogroup` component\n\n## Styling\nUse the `static-radio` part to apply custom styles to the radio visual element.\nThis part exposes the underlying [StaticRadio](?path=/docs/components-decorator-staticradio--docs) component for advanced styling.",
           "name": "Radio",
-          "cssProperties": [
-            {
-              "description": "size of the inner circle",
-              "name": "--mdc-radio-inner-circle-size"
-            },
-            {
-              "description": "size of the outer circle",
-              "name": "--mdc-radio-outer-circle-size"
-            },
-            {
-              "description": "background color of the inner circle",
-              "name": "--mdc-radio-inner-circle-background-color"
-            },
-            {
-              "description": "border color of the outer circle",
-              "name": "--mdc-radio-outer-circle-border-color"
-            },
-            {
-              "description": "background color of the outer circle",
-              "name": "--mdc-radio-outer-circle-background-color"
-            },
-            {
-              "description": "Font size for the label text.",
-              "name": "--mdc-label-font-size",
-              "inheritedFrom": {
-                "name": "FormfieldWrapper",
-                "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
-              }
-            },
-            {
-              "description": "Font weight for the label text.",
-              "name": "--mdc-label-font-weight",
-              "inheritedFrom": {
-                "name": "FormfieldWrapper",
-                "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
-              }
-            },
-            {
-              "description": "Line height for the label text.",
-              "name": "--mdc-label-line-height",
-              "inheritedFrom": {
-                "name": "FormfieldWrapper",
-                "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
-              }
-            },
-            {
-              "description": "Color for the label text.",
-              "name": "--mdc-label-color",
-              "inheritedFrom": {
-                "name": "FormfieldWrapper",
-                "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
-              }
-            },
-            {
-              "description": "Font size for the help text.",
-              "name": "--mdc-help-text-font-size",
-              "inheritedFrom": {
-                "name": "FormfieldWrapper",
-                "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
-              }
-            },
-            {
-              "description": "Font weight for the help text.",
-              "name": "--mdc-help-text-font-weight",
-              "inheritedFrom": {
-                "name": "FormfieldWrapper",
-                "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
-              }
-            },
-            {
-              "description": "Line height for the help text.",
-              "name": "--mdc-help-text-line-height",
-              "inheritedFrom": {
-                "name": "FormfieldWrapper",
-                "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
-              }
-            },
-            {
-              "description": "Color for the help text.",
-              "name": "--mdc-help-text-color",
-              "inheritedFrom": {
-                "name": "FormfieldWrapper",
-                "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
-              }
-            },
-            {
-              "description": "Color for the required indicator text.",
-              "name": "--mdc-required-indicator-color",
-              "inheritedFrom": {
-                "name": "FormfieldWrapper",
-                "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
-              }
-            }
-          ],
           "cssParts": [
             {
               "description": "The label element.",
@@ -37077,12 +36983,16 @@
               }
             },
             {
-              "description": "The native radio input element.",
+              "description": "The native radio input element that provides the interactive functionality.",
               "name": "radio-input"
             },
             {
               "description": "The container for the label and helper text elements.",
               "name": "text-container"
+            },
+            {
+              "description": "The staticradio that provides the visual radio appearance.",
+              "name": "static-radio"
             }
           ],
           "members": [
@@ -37108,7 +37018,7 @@
                 "text": "boolean"
               },
               "default": "false",
-              "description": "Determines whether the radio is selected or unselected.",
+              "description": "Determines whether the radio is checked (selected) or unchecked.\nWithin a radio group, only one radio can be checked at a time.",
               "attribute": "checked",
               "reflects": true
             },
@@ -37155,47 +37065,6 @@
                 "module": "components/formfieldwrapper/formfieldwrapper.component.js"
               }
             },
-            {
-              "kind": "method",
-              "name": "getAllRadiosWithinSameGroup",
-              "privacy": "private",
-              "return": {
-                "type": {
-                  "text": "Radio[]"
-                }
-              },
-              "description": "Returns all radios within the same group (name)."
-            },
-            {
-              "kind": "method",
-              "name": "handleChange",
-              "privacy": "private",
-              "return": {
-                "type": {
-                  "text": "void"
-                }
-              },
-              "description": "Handles the change event on the radio element.\nThis will toggle the state of the radio element.\nDispatches the change event."
-            },
-            {
-              "kind": "method",
-              "name": "handleKeyDown",
-              "privacy": "private",
-              "return": {
-                "type": {
-                  "text": "void"
-                }
-              },
-              "parameters": [
-                {
-                  "name": "event",
-                  "type": {
-                    "text": "KeyboardEvent"
-                  }
-                }
-              ],
-              "description": "Handles the keydown event (Arrow Up/Down/Left/Right) on the radio element."
-            },
             {
               "kind": "field",
               "name": "helpText",
@@ -37343,11 +37212,6 @@
                 "module": "components/formfieldwrapper/formfieldwrapper.component.js"
               }
             },
-            {
-              "kind": "field",
-              "name": "renderLabelAndHelperText",
-              "privacy": "private"
-            },
             {
               "kind": "method",
               "name": "renderLabelElement",
@@ -37386,34 +37250,6 @@
                 "module": "components/formfieldwrapper/formfieldwrapper.component.js"
               }
             },
-            {
-              "kind": "method",
-              "name": "setActualFormValue",
-              "privacy": "private",
-              "description": "Updates the form value to reflect the current state of the radio.\nIf checked, the value is set to the user-provided value.\nIf unchecked, the value is set to null."
-            },
-            {
-              "kind": "method",
-              "name": "setGroupValidity",
-              "privacy": "private",
-              "parameters": [
-                {
-                  "name": "radios",
-                  "type": {
-                    "text": "Radio[]"
-                  },
-                  "description": "Array of radios of the same group"
-                },
-                {
-                  "name": "isValid",
-                  "type": {
-                    "text": "boolean"
-                  },
-                  "description": "Boolean value to set the validity of the group"
-                }
-              ],
-              "description": "Sets the validity of the group of radios."
-            },
             {
               "kind": "method",
               "name": "setValidity",
@@ -37487,39 +37323,6 @@
                 "module": "components/formfieldwrapper/formfieldwrapper.component.js"
               }
             },
-            {
-              "kind": "method",
-              "name": "updateRadio",
-              "privacy": "private",
-              "parameters": [
-                {
-                  "name": "enabledRadios",
-                  "type": {
-                    "text": "Radio[]"
-                  },
-                  "description": "An array of enabled radio buttons within the same group."
-                },
-                {
-                  "name": "index",
-                  "type": {
-                    "text": "number"
-                  },
-                  "description": "The index of the radio button to be updated within the enabled radios array."
-                }
-              ],
-              "description": "Updates the state of the radio button at the specified index within the enabled radios.\nFocuses the radio button and triggers the change event if the radio button is not read-only."
-            },
-            {
-              "kind": "method",
-              "name": "updateTabIndex",
-              "privacy": "private",
-              "return": {
-                "type": {
-                  "text": "void"
-                }
-              },
-              "description": "Update tab index for all radios in the same group (name)\nIf any radio group is checked, it will have a tab index of 0\nIf no radio group is checked, the first enabled radio will have a tab index of 0"
-            },
             {
               "kind": "field",
               "name": "validationMessage",
@@ -37593,7 +37396,7 @@
                 "text": "boolean"
               },
               "default": "false",
-              "description": "Determines whether the radio is selected or unselected.",
+              "description": "Determines whether the radio is checked (selected) or unchecked.\nWithin a radio group, only one radio can be checked at a time.",
               "fieldName": "checked"
             },
             {
@@ -37819,7 +37622,7 @@
             "module": "/src/components/formfieldwrapper/formfieldwrapper.component"
           },
           "tagName": "mdc-radio",
-          "jsDoc": "/**\n * Radio allow users to select single options from a list or turn an item/feature on or off.\n * These are often used in forms, settings, and selection in lists.\n *\n * A radio component contains an optional label, optional info icon and an optional helper text.\n *\n * @dependency mdc-button\n * @dependency mdc-icon\n * @dependency mdc-text\n * @dependency mdc-staticradio\n * @dependency mdc-toggletip\n *\n * @tagname mdc-radio\n *\n * @event change - (React: onChange) Event that gets dispatched when the radio state changes.\n * @event focus - (React: onFocus) Event that gets dispatched when the radio receives focus.\n *\n * @cssproperty --mdc-radio-inner-circle-size - size of the inner circle\n * @cssproperty --mdc-radio-outer-circle-size - size of the outer circle\n * @cssproperty --mdc-radio-inner-circle-background-color - background color of the inner circle\n * @cssproperty --mdc-radio-outer-circle-border-color - border color of the outer circle\n * @cssproperty --mdc-radio-outer-circle-background-color - background color of the outer circle\n *\n * @csspart label - The label element.\n * @csspart label-text - The container for the label and required indicator elements.\n * @csspart required-indicator - The required indicator element that is displayed next to the label when the `required` property is set to true.\n * @csspart info-icon-btn - The info icon button element that is displayed next to the label when the `toggletip-text` property is set.\n * @csspart label-toggletip - The toggletip element that is displayed when the info icon button is clicked.\n * @csspart help-text - The helper/validation text element.\n * @csspart helper-icon - The helper/validation icon element that is displayed next to the helper/validation text.\n * @csspart help-text-container - The container for the helper/validation icon and text elements.\n * @csspart radio-input - The native radio input element.\n * @csspart text-container - The container for the label and helper text elements.\n */",
+          "jsDoc": "/**\n * The Radio component allows users to select a single option from a group of mutually exclusive choices.\n * Unlike checkboxes which allow multiple selections, radio buttons ensure only one option can be selected\n * at a time within the same group. These are commonly used in forms, surveys, and settings where users\n * need to make a single selection from multiple options.\n *\n * To create a group of radio buttons, use the `mdc-radiogroup` component or ensure all radio buttons\n * share the same `name` attribute.\n *\n * **Note:** This component internally renders a native radio input element with custom styling.\n *\n * ## When to use\n * Use radio buttons when users must select exactly one option from a list of 2-5 choices. For longer lists,\n * consider using a dropdown menu instead.\n *\n * ## Accessibility\n * - Provide clear labels that describe each option\n * - Use `data-aria-label` when a visual label is not present\n * - Keyboard navigation: Arrow keys to move between options, Space to select, Tab to navigate groups, Enter to submit form\n * - Group related radio buttons using the same `name` attribute or `mdc-radiogroup` component\n *\n * ## Styling\n * Use the `static-radio` part to apply custom styles to the radio visual element.\n * This part exposes the underlying [StaticRadio](?path=/docs/components-decorator-staticradio--docs) component for advanced styling.\n *\n * @dependency mdc-button\n * @dependency mdc-icon\n * @dependency mdc-text\n * @dependency mdc-staticradio\n * @dependency mdc-toggletip\n *\n * @tagname mdc-radio\n *\n * @event change - (React: onChange) Event that gets dispatched when the radio state changes.\n * @event focus - (React: onFocus) Event that gets dispatched when the radio receives focus.\n *\n * @csspart label - The label element.\n * @csspart label-text - The container for the label and required indicator elements.\n * @csspart required-indicator - The required indicator element that is displayed next to the label when the `required` property is set to true.\n * @csspart info-icon-btn - The info icon button element that is displayed next to the label when the `toggletip-text` property is set.\n * @csspart label-toggletip - The toggletip element that is displayed when the info icon button is clicked.\n * @csspart help-text - The helper/validation text element.\n * @csspart helper-icon - The helper/validation icon element that is displayed next to the helper/validation text.\n * @csspart help-text-container - The container for the helper/validation icon and text elements.\n * @csspart radio-input - The native radio input element that provides the interactive functionality.\n * @csspart text-container - The container for the label and helper text elements.\n * @csspart static-radio - The staticradio that provides the visual radio appearance.\n */",
           "customElement": true,
           "slots": [
             {
@@ -37854,6 +37657,80 @@
                 "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
               }
             }
+          ],
+          "cssProperties": [
+            {
+              "description": "Font size for the label text.",
+              "name": "--mdc-label-font-size",
+              "inheritedFrom": {
+                "name": "FormfieldWrapper",
+                "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
+              }
+            },
+            {
+              "description": "Font weight for the label text.",
+              "name": "--mdc-label-font-weight",
+              "inheritedFrom": {
+                "name": "FormfieldWrapper",
+                "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
+              }
+            },
+            {
+              "description": "Line height for the label text.",
+              "name": "--mdc-label-line-height",
+              "inheritedFrom": {
+                "name": "FormfieldWrapper",
+                "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
+              }
+            },
+            {
+              "description": "Color for the label text.",
+              "name": "--mdc-label-color",
+              "inheritedFrom": {
+                "name": "FormfieldWrapper",
+                "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
+              }
+            },
+            {
+              "description": "Font size for the help text.",
+              "name": "--mdc-help-text-font-size",
+              "inheritedFrom": {
+                "name": "FormfieldWrapper",
+                "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
+              }
+            },
+            {
+              "description": "Font weight for the help text.",
+              "name": "--mdc-help-text-font-weight",
+              "inheritedFrom": {
+                "name": "FormfieldWrapper",
+                "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
+              }
+            },
+            {
+              "description": "Line height for the help text.",
+              "name": "--mdc-help-text-line-height",
+              "inheritedFrom": {
+                "name": "FormfieldWrapper",
+                "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
+              }
+            },
+            {
+              "description": "Color for the help text.",
+              "name": "--mdc-help-text-color",
+              "inheritedFrom": {
+                "name": "FormfieldWrapper",
+                "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
+              }
+            },
+            {
+              "description": "Color for the required indicator text.",
+              "name": "--mdc-required-indicator-color",
+              "inheritedFrom": {
+                "name": "FormfieldWrapper",
+                "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
+              }
+            }
           ]
         }
       ],
@@ -44962,39 +44839,39 @@
       "declarations": [
         {
           "kind": "class",
-          "description": "This is a decorative component that is styled to look as a radio.\nIt has 4 properties - checked, disabled, readonly and soft-disabled.\n\nWe are using the same styling that has been created for the `mdc-radio` component.",
+          "description": "StaticRadio is a decorative component styled as a radio button for visual presentation.\nUnlike the interactive `mdc-radio`, this component does not handle user interactions or form submissions.\nIt is used purely for displaying radio button states in read-only scenarios.\n\nThis component supports four display states: checked, disabled, readonly, and soft-disabled.",
           "name": "StaticRadio",
           "cssProperties": [
             {
-              "description": "size of the inner circle",
-              "name": "--mdc-radio-inner-circle-size"
+              "description": "The size of the inner circle when checked.",
+              "name": "--mdc-staticradio-inner-circle-size"
             },
             {
-              "description": "size of the outer circle",
-              "name": "--mdc-radio-outer-circle-size"
+              "description": "The size of the outer circle border.",
+              "name": "--mdc-staticradio-outer-circle-size"
             },
             {
-              "description": "background color of the inner circle",
-              "name": "--mdc-radio-inner-circle-background-color"
+              "description": "The background color of the inner circle when checked.",
+              "name": "--mdc-staticradio-inner-circle-background-color"
             },
             {
-              "description": "border color of the outer circle",
-              "name": "--mdc-radio-outer-circle-border-color"
+              "description": "The border color of the outer circle.",
+              "name": "--mdc-staticradio-outer-circle-border-color"
             },
             {
-              "description": "background color of the outer circle",
-              "name": "--mdc-radio-outer-circle-background-color"
+              "description": "The background color of the outer circle.",
+              "name": "--mdc-staticradio-outer-circle-background-color"
             }
           ],
           "cssParts": [
             {
-              "description": "The radio icon.",
+              "description": "The radio icon element",
               "name": "radio-icon"
             }
           ],
           "slots": [
             {
-              "description": "Default slot for the label of the radio.",
+              "description": "Default slot for the label of the radio",
               "name": ""
             }
           ],
@@ -45006,7 +44883,7 @@
                 "text": "boolean"
               },
               "default": "false",
-              "description": "Determines whether the radio is selected or unselected.",
+              "description": "Determines whether the radio appears checked (selected) or unchecked.",
               "attribute": "checked",
               "reflects": true
             },
@@ -45032,7 +44909,7 @@
                 "text": "boolean"
               },
               "default": "false",
-              "description": "Determines whether the radio is read-only.",
+              "description": "Determines whether the radio appears in a read-only state.\nNote: This is purely visual as StaticRadio is non-interactive by design.",
               "attribute": "readonly",
               "reflects": true
             },
@@ -45043,7 +44920,7 @@
                 "text": "boolean"
               },
               "default": "false",
-              "description": "Determines whether the radio is soft-disabled.",
+              "description": "Determines whether the radio appears in a soft-disabled state.\nSoft-disabled provides a less prominent disabled appearance than the standard disabled state.\nNote: This is purely visual as StaticRadio is non-interactive by design.",
               "attribute": "soft-disabled",
               "reflects": true
             }
@@ -45055,7 +44932,7 @@
                 "text": "boolean"
               },
               "default": "false",
-              "description": "Determines whether the radio is selected or unselected.",
+              "description": "Determines whether the radio appears checked (selected) or unchecked.",
               "fieldName": "checked"
             },
             {
@@ -45064,7 +44941,7 @@
                 "text": "boolean"
               },
               "default": "false",
-              "description": "Determines whether the radio is read-only.",
+              "description": "Determines whether the radio appears in a read-only state.\nNote: This is purely visual as StaticRadio is non-interactive by design.",
               "fieldName": "readonly"
             },
             {
@@ -45073,7 +44950,7 @@
                 "text": "boolean"
               },
               "default": "false",
-              "description": "Determines whether the radio is soft-disabled.",
+              "description": "Determines whether the radio appears in a soft-disabled state.\nSoft-disabled provides a less prominent disabled appearance than the standard disabled state.\nNote: This is purely visual as StaticRadio is non-interactive by design.",
               "fieldName": "softDisabled"
             },
             {
@@ -45101,7 +44978,7 @@
             "module": "/src/models"
           },
           "tagName": "mdc-staticradio",
-          "jsDoc": "/**\n * This is a decorative component that is styled to look as a radio.\n * It has 4 properties - checked, disabled, readonly and soft-disabled.\n *\n * We are using the same styling that has been created for the `mdc-radio` component.\n *\n * @tagname mdc-staticradio\n *\n * @cssproperty --mdc-radio-inner-circle-size - size of the inner circle\n * @cssproperty --mdc-radio-outer-circle-size - size of the outer circle\n * @cssproperty --mdc-radio-inner-circle-background-color - background color of the inner circle\n * @cssproperty --mdc-radio-outer-circle-border-color - border color of the outer circle\n * @cssproperty --mdc-radio-outer-circle-background-color - background color of the outer circle\n *\n * @csspart radio-icon - The radio icon.\n *\n * @slot - Default slot for the label of the radio.\n */",
+          "jsDoc": "/**\n * StaticRadio is a decorative component styled as a radio button for visual presentation.\n * Unlike the interactive `mdc-radio`, this component does not handle user interactions or form submissions.\n * It is used purely for displaying radio button states in read-only scenarios.\n *\n * This component supports four display states: checked, disabled, readonly, and soft-disabled.\n *\n * @tagname mdc-staticradio\n *\n * @cssproperty --mdc-staticradio-inner-circle-size - The size of the inner circle when checked.\n * @cssproperty --mdc-staticradio-outer-circle-size - The size of the outer circle border.\n * @cssproperty --mdc-staticradio-inner-circle-background-color - The background color of the inner circle when checked.\n * @cssproperty --mdc-staticradio-outer-circle-border-color - The border color of the outer circle.\n * @cssproperty --mdc-staticradio-outer-circle-background-color - The background color of the outer circle.\n *\n * @csspart radio-icon - The radio icon element\n *\n * @slot - Default slot for the label of the radio\n */",
           "customElement": true
         }
       ],

package/dist/react/radio/index.d.ts

@@ -2,10 +2,29 @@ import { type EventName } from '@lit/react';
 import Component from '../../components/radio';
 import type { Events } from '../../components/radio/radio.types';
 /**
- * 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
@@ -18,12 +37,6 @@ import type { Events } from '../../components/radio/radio.types';
  * @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.
@@ -32,8 +45,9 @@ import type { Events } from '../../components/radio/radio.types';
  * @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 const reactWrapper: import("@lit/react").ReactWebComponent<Component, {
     onChange: EventName<Events["onChangeEvent"]>;

package/dist/react/radio/index.js

@@ -3,10 +3,29 @@ import { createComponent } from '@lit/react';
 import Component from '../../components/radio';
 import { TAG_NAME } from '../../components/radio/radio.constants';
 /**
- * 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 @@ import { TAG_NAME } from '../../components/radio/radio.constants';
  * @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,8 +46,9 @@ import { TAG_NAME } from '../../components/radio/radio.constants';
  * @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.
  */
 const reactWrapper = createComponent({
     tagName: TAG_NAME,