Propagate name and required from TileGroup.

Remove `name` from `RadioTile`.

src/Tile/RadioTile.svelte

@@ -20,13 +20,11 @@
   /** Set an id for the input element */
   export let id = "ccs-" + Math.random().toString(36);
 
-  /** Specify a name attribute for the input */
-  export let name = "";
-
   import { getContext } from "svelte";
   import CheckmarkFilled16 from "../icons/CheckmarkFilled16.svelte";
 
-  const { add, update, selectedValue } = getContext("TileGroup");
+  const { add, update, selectedValue, name, required } =
+    getContext("TileGroup");
 
   add({ value, checked });
 
@@ -36,11 +34,12 @@
 <input
   type="radio"
   id="{id}"
-  name="{name}"
+  name="{$name}"
   value="{value}"
   checked="{checked}"
   tabindex="{disabled ? undefined : tabindex}"
   disabled="{disabled}"
+  required="{$required}"
   class:bx--tile-input="{true}"
   on:change
   on:change="{() => {

src/Tile/TileGroup.svelte

@@ -8,6 +8,15 @@
   /** Set to `true` to disable the tile group */
   export let disabled = false;
 
+  /**
+   * Set to `true` to mark the selection as required.
+   * For validation to trigger, a `name` has to be specified as well.
+   */
+  export let required = false;
+
+  /** Specify a name attribute for the radio inputs */
+  export let name = "";
+
   /** Specify the legend text */
   export let legend = "";
 
@@ -16,9 +25,13 @@
 
   const dispatch = createEventDispatcher();
   const selectedValue = writable(selected);
+  const inputsName = writable(name);
+  const inputsRequired = writable(required);
 
   setContext("TileGroup", {
     selectedValue,
+    name: { subscribe: inputsName.subscribe },
+    required: { subscribe: inputsRequired.subscribe },
     add: ({ checked, value }) => {
       if (checked) {
         selectedValue.set(value);
@@ -30,6 +43,8 @@
   });
 
   $: selected = $selectedValue;
+  $: inputsName.set(name);
+  $: inputsRequired.set(required);
   $: dispatch("select", $selectedValue);
 </script>