fix(radio-button-group): add name and required props (#1037)

Fixes #1036

src/ComboBox/ComboBox.svelte

@@ -224,9 +224,9 @@
       class:bx--label="{true}"
       class:bx--label--disabled="{disabled}"
     >
-    <slot name="titleText">
-      {titleText}
-    </slot>
+      <slot name="titleText">
+        {titleText}
+      </slot>
     </label>
   {/if}
   <ListBox

src/MultiSelect/MultiSelect.svelte

@@ -300,9 +300,9 @@
       class:bx--label--disabled="{disabled}"
       class:bx--visually-hidden="{hideLabel}"
     >
-    <slot name="titleText">
-      {titleText}
-    </slot>
+      <slot name="titleText">
+        {titleText}
+      </slot>
     </label>
   {/if}
   <ListBox

src/RadioButton/RadioButton.svelte

@@ -26,22 +26,28 @@
   /** Set an id for the input element */
   export let id = "ccs-" + Math.random().toString(36);
 
-  /** Specify a name attribute for the radio button input */
-  export let name = "";
+  /**
+   * Specify a name attribute for the radio button input
+   * @type {string}
+   */
+  export let name = undefined;
 
   /** Obtain a reference to the input HTML element */
   export let ref = null;
 
   import { getContext } from "svelte";
-  import { writable } from "svelte/store";
+  import { readable } from "svelte/store";
 
-  const ctx = getContext("RadioButtonGroup");
-  const selectedValue = ctx
-    ? ctx.selectedValue
-    : writable(checked ? value : undefined);
+  const { add, update, selectedValue, groupName, groupRequired } = getContext(
+    "RadioButtonGroup"
+  ) ?? {
+    groupName: readable(undefined),
+    groupRequired: readable(undefined),
+    selectedValue: readable(checked ? value : undefined),
+  };
 
-  if (ctx) {
-    ctx.add({ id, checked, disabled, value });
+  if (add) {
+    add({ id, checked, disabled, value });
   }
 
   $: checked = $selectedValue === value;
@@ -56,16 +62,16 @@
     bind:this="{ref}"
     type="radio"
     id="{id}"
-    name="{name}"
+    name="{$groupName ?? name}"
     checked="{checked}"
     disabled="{disabled}"
-    required="{required}"
+    required="{$groupRequired ?? required}"
     value="{value}"
     class:bx--radio-button="{true}"
     on:change
     on:change="{() => {
-      if (ctx) {
-        ctx.update(value);
+      if (update) {
+        update(value);
       }
     }}"
   />

src/RadioButtonGroup/RadioButtonGroup.svelte

@@ -8,6 +8,18 @@
   /** Set to `true` to disable the radio buttons */
   export let disabled = false;
 
+  /**
+   * Set to `true` to require the selection of a radio button
+   * @type {boolean}
+   */
+  export let required = undefined;
+
+  /**
+   * Specify a name attribute for the radio button inputs
+   * @type {string}
+   */
+  export let name = undefined;
+
   /** Specify the legend text */
   export let legendText = "";
 
@@ -38,13 +50,17 @@
     onMount,
     setContext,
   } from "svelte";
-  import { writable } from "svelte/store";
+  import { readonly, writable } from "svelte/store";
 
   const dispatch = createEventDispatcher();
   const selectedValue = writable(selected);
+  const groupName = writable(name);
+  const groupRequired = writable(required);
 
   setContext("RadioButtonGroup", {
     selectedValue,
+    groupName: readonly(groupName),
+    groupRequired: readonly(groupRequired),
     add: ({ checked, value }) => {
       if (checked) {
         selectedValue.set(value);
@@ -67,6 +83,9 @@
     selected = value;
     dispatch("change", value);
   });
+
+  $: $groupName = name;
+  $: $groupRequired = required;
 </script>
 
 <!-- svelte-ignore a11y-mouse-events-have-key-events -->

src/UIShell/Header.svelte

@@ -17,8 +17,9 @@
    */
   export let href = undefined;
 
-   /**
-   * Specify the company name.  
+  /**
+   * Specify the company name.
+   *
    * Alternatively, use the named slot "company" (e.g., `<span slot="company">...</span>`)
    * @type {string}
    */