Update checked for radio buttons without group.

Make radio button group `name` a required property.

COMPONENT_INDEX.md

@@ -2967,7 +2967,7 @@ None.
 | selected      | No       | <code>let</code> | Yes      | <code>string &#124; number</code>           | <code>undefined</code>    | Set the selected radio button value                      |
 | disabled      | No       | <code>let</code> | No       | <code>boolean</code>                        | <code>false</code>        | Set to `true` to disable the radio buttons               |
 | required      | No       | <code>let</code> | No       | <code>boolean</code>                        | <code>undefined</code>    | Set to `true` to require the selection of a radio button |
-| name          | No       | <code>let</code> | No       | <code>string</code>                         | <code>undefined</code>    | Specify a name attribute for the radio button inputs     |
+| name          | Yes      | <code>let</code> | No       | <code>string</code>                         | <code>undefined</code>    | Specify a name attribute for the radio button inputs     |
 | legendText    | No       | <code>let</code> | No       | <code>string</code>                         | <code>""</code>           | Specify the legend text                                  |
 | hideLegend    | No       | <code>let</code> | No       | <code>boolean</code>                        | <code>false</code>        | Set to `true` to visually hide the legend                |
 | labelPosition | No       | <code>let</code> | No       | <code>"right" &#124; "left"</code>          | <code>"right"</code>      | Specify the label position                               |

docs/src/COMPONENT_API.json

@@ -9540,7 +9540,7 @@
           "type": "string",
           "isFunction": false,
           "isFunctionDeclaration": false,
-          "isRequired": false,
+          "isRequired": true,
           "constant": false,
           "reactive": false
         },

docs/src/pages/_layout.svelte

@@ -85,7 +85,10 @@
   bind:theme="{$theme}"
   on:update="{(e) => {
     const theme = e.detail.theme;
-    document.documentElement.style.setProperty("color-scheme", ["white", "g10"].includes(theme) ? "light" : "dark");
+    document.documentElement.style.setProperty(
+      'color-scheme',
+      ['white', 'g10'].includes(theme) ? 'light' : 'dark'
+    );
   }}"
 >
   <Header

docs/src/pages/framed/_reset.svelte

@@ -15,9 +15,12 @@
     // NOTE: we *do not* want to persist the theme as this can
     // conflict with how the iframe is displayed in the docs.
     // Instead, we want the theme to be overridden in the standalone page.
-    if ([ "white", "g10", "g80", "g90", "g100" ].includes(current_theme)) {
+    if (["white", "g10", "g80", "g90", "g100"].includes(current_theme)) {
-      document.documentElement.setAttribute("theme", current_theme)
+      document.documentElement.setAttribute("theme", current_theme);
-      document.documentElement.style.setProperty("color-scheme", ["white", "g10"].includes(current_theme) ? "light" : "dark");
+      document.documentElement.style.setProperty(
+        "color-scheme",
+        ["white", "g10"].includes(current_theme) ? "light" : "dark"
+      );
     }
   }
 </script>

src/RadioButton/RadioButton.svelte

@@ -54,6 +54,22 @@
   }
 
   $: checked = $selectedValue === value;
+
+  function onChange() {
+    if (update) {
+      update(value);
+    } else {
+      checked = ref.checked;
+
+      if (name != null && name != "") {
+        Array.from(document.getElementsByName(name))
+          .filter((element) => element !== ref)
+          .forEach((element) =>
+            element.dispatchEvent(new CustomEvent("carbon:checked-change"))
+          );
+      }
+    }
+  }
 </script>
 
 <div
@@ -72,10 +88,9 @@
     value="{value}"
     class:bx--radio-button="{true}"
     on:change
-    on:change="{() => {
+    on:change="{onChange}"
-      if (update) {
+    on:carbon:checked-change="{(e) => {
-        update(value);
+      checked = e.currentTarget.checked;
-      }
     }}"
   />
   <label class:bx--radio-button__label="{true}" for="{id}">

src/RadioButtonGroup/RadioButtonGroup.svelte

@@ -22,7 +22,7 @@
    * Specify a name attribute for the radio button inputs
    * @type {string}
    */
-  export let name = undefined;
+  export let name;
 
   /** Specify the legend text */
   export let legendText = "";

types/RadioButtonGroup/RadioButtonGroup.svelte.d.ts

@@ -26,7 +26,7 @@ export interface RadioButtonGroupProps extends RestProps {
    * Specify a name attribute for the radio button inputs
    * @default undefined
    */
-  name?: string;
+  name: string;
 
   /**
    * Specify the legend text