fix(tile-group): add name and required props

Author: metonym

src/Tile/RadioTile.svelte

@@ -8,6 +8,9 @@
   /** Set to `true` to disable the tile */
   export let disabled = false;
 
+  /** Set to `true` to mark the field as required */
+  export let required = false;
+
   /** Specify the value of the radio input */
   export let value = "";
 
@@ -23,10 +26,16 @@
   /** Specify a name attribute for the input */
   export let name = "";
 
-  import { getContext } from "svelte";
+  import { getContext, readable } from "svelte";
   import CheckmarkFilled from "../icons/CheckmarkFilled.svelte";
 
-  const { add, update, selectedValue } = getContext("TileGroup");
+  const { add, update, selectedValue, groupName, groupRequired } = getContext(
+    "TileGroup"
+  ) ?? {
+    groupName: readable(undefined),
+    groupRequired: readable(undefined),
+    selectedValue: readable(checked ? value : undefined),
+  };
 
   add({ value, checked });
 
@@ -36,11 +45,12 @@
 <input
   type="radio"
   id="{id}"
-  name="{name}"
+  name="{$groupName ?? name}"
   value="{value}"
   checked="{checked}"
   tabindex="{disabled ? undefined : tabindex}"
   disabled="{disabled}"
+  required="{$groupRequired ?? required}"
   class:bx--tile-input="{true}"
   on:change
   on:change="{() => {

src/Tile/TileGroup.svelte

@@ -8,17 +8,31 @@
   /** Set to `true` to disable the tile group */
   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 legend = "";
 
   import { createEventDispatcher, setContext } from "svelte";
-  import { writable } from "svelte/store";
+  import { writable, readonly } from "svelte/store";
 
   const dispatch = createEventDispatcher();
   const selectedValue = writable(selected);
 
   setContext("TileGroup", {
     selectedValue,
+    groupName: readonly(groupName),
+    groupRequired: readonly(groupRequired),
     add: ({ checked, value }) => {
       if (checked) {
         selectedValue.set(value);