fix(radio-button-group): set name attribute on inputs

COMPONENT_INDEX.md

@@ -2936,6 +2936,7 @@ None.
 | Prop name     | Required | Kind             | Reactive | Type                                      | Default value                                    | Description                                         |
 | :------------ | :------- | :--------------- | :------- | ----------------------------------------- | ------------------------------------------------ | --------------------------------------------------- |
 | ref           | No       | <code>let</code> | Yes      | <code>null &#124; HTMLInputElement</code> | <code>null</code>                                | Obtain a reference to the input HTML element        |
+| name          | No       | <code>let</code> | Yes      | <code>string</code>                       | <code>""</code>                                  | Specify a name attribute for the radio button input |
 | checked       | No       | <code>let</code> | Yes      | <code>boolean</code>                      | <code>false</code>                               | Set to `true` to check the radio button             |
 | value         | No       | <code>let</code> | No       | <code>string</code>                       | <code>""</code>                                  | Specify the value of the radio button               |
 | disabled      | No       | <code>let</code> | No       | <code>boolean</code>                      | <code>false</code>                               | Set to `true` to disable the radio button           |
@@ -2944,7 +2945,6 @@ None.
 | labelText     | No       | <code>let</code> | No       | <code>string</code>                       | <code>""</code>                                  | Specify the label text                              |
 | hideLabel     | No       | <code>let</code> | No       | <code>boolean</code>                      | <code>false</code>                               | Set to `true` to visually hide the label text       |
 | id            | No       | <code>let</code> | No       | <code>string</code>                       | <code>"ccs-" + Math.random().toString(36)</code> | Set an id for the input element                     |
-| name          | No       | <code>let</code> | No       | <code>string</code>                       | <code>""</code>                                  | Specify a name attribute for the radio button input |
 
 ### Slots
 
@@ -2962,15 +2962,16 @@ None.
 
 ### Props
 
-| Prop name     | Required | Kind             | Reactive | Type                                        | Default value             | Description                                  |
+| Prop name     | Required | Kind             | Reactive | Type                                        | Default value             | Description                                                     |
-| :------------ | :------- | :--------------- | :------- | ------------------------------------------- | ------------------------- | -------------------------------------------- |
+| :------------ | :------- | :--------------- | :------- | ------------------------------------------- | ------------------------- | --------------------------------------------------------------- |
-| selected      | No       | <code>let</code> | Yes      | <code>string</code>                         | <code>undefined</code>    | Set the selected radio button value          |
+| selected      | No       | <code>let</code> | Yes      | <code>string</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   |
+| disabled      | No       | <code>let</code> | No       | <code>boolean</code>                        | <code>false</code>        | Set to `true` to disable the radio buttons                      |
-| legendText    | No       | <code>let</code> | No       | <code>string</code>                         | <code>""</code>           | Specify the legend text                      |
+| 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    |
+| 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                   |
+| labelPosition | No       | <code>let</code> | No       | <code>"right" &#124; "left"</code>          | <code>"right"</code>      | Specify the label position                                      |
-| orientation   | No       | <code>let</code> | No       | <code>"horizontal" &#124; "vertical"</code> | <code>"horizontal"</code> | Specify the orientation of the radio buttons |
+| orientation   | No       | <code>let</code> | No       | <code>"horizontal" &#124; "vertical"</code> | <code>"horizontal"</code> | Specify the orientation of the radio buttons                    |
-| id            | No       | <code>let</code> | No       | <code>string</code>                         | <code>undefined</code>    | Set an id for the container div element      |
+| name          | No       | <code>let</code> | No       | <code>string</code>                         | <code>undefined</code>    | Set a name for all radio button input elements within the group |
+| id            | No       | <code>let</code> | No       | <code>string</code>                         | <code>undefined</code>    | Set an id for the container div element                         |
 
 ### Slots
 

docs/src/COMPONENT_API.json

@@ -9468,7 +9468,7 @@
           "isFunctionDeclaration": false,
           "isRequired": false,
           "constant": false,
-          "reactive": false
+          "reactive": true
         },
         {
           "name": "ref",
@@ -9571,6 +9571,17 @@
           "constant": false,
           "reactive": false
         },
+        {
+          "name": "name",
+          "kind": "let",
+          "description": "Set a name for all radio button input elements within the group",
+          "type": "string",
+          "isFunction": false,
+          "isFunctionDeclaration": false,
+          "isRequired": false,
+          "constant": false,
+          "reactive": false
+        },
         {
           "name": "id",
           "kind": "let",

src/RadioButton/RadioButton.svelte

@@ -32,7 +32,7 @@
   /** Obtain a reference to the input HTML element */
   export let ref = null;
 
-  import { getContext } from "svelte";
+  import { getContext, onMount } from "svelte";
   import { writable } from "svelte/store";
 
   const ctx = getContext("RadioButtonGroup");
@@ -40,6 +40,18 @@
     ? ctx.selectedValue
     : writable(checked ? value : undefined);
 
+  const unsubName = ctx?.name.subscribe((value) => {
+    // Use `name` if set on the `RadioButtonGroup`
+    if (value) {
+      name = value;
+    }
+  });
+  console.log(ctx)
+
+  onMount(() => {
+    return () => unsubName?.();
+  });
+
   if (ctx) {
     ctx.add({ id, checked, disabled, value });
   }

src/RadioButtonGroup/RadioButtonGroup.svelte

@@ -26,6 +26,12 @@
    */
   export let orientation = "horizontal";
 
+  /**
+   * Set a name for all radio button input elements within the group
+   * @type {string}
+   */
+  export let name = undefined;
+
   /**
    * Set an id for the container div element
    * @type {string}
@@ -42,9 +48,11 @@
 
   const dispatch = createEventDispatcher();
   const selectedValue = writable(selected);
+  const inputName = writable(name);
 
   setContext("RadioButtonGroup", {
     selectedValue,
+    name: inputName,
     add: ({ checked, value }) => {
       if (checked) {
         selectedValue.set(value);
@@ -67,6 +75,8 @@
     selected = value;
     dispatch("change", value);
   });
+
+  $: inputName.set(name);
 </script>
 
 <!-- svelte-ignore a11y-mouse-events-have-key-events -->

types/RadioButtonGroup/RadioButtonGroup.svelte.d.ts

@@ -40,6 +40,12 @@ export interface RadioButtonGroupProps extends RestProps {
    */
   orientation?: "horizontal" | "vertical";
 
+  /**
+   * Set a name for all radio button input elements within the group
+   * @default undefined
+   */
+  name?: string;
+
   /**
    * Set an id for the container div element
    * @default undefined