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

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 = "";
 
@@ -20,13 +23,23 @@
   /** 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 = "";
+  /**
+   * Specify a name attribute for the radio tile input
+   * @type {string}
+   */
+  export let name = undefined;
 
   import { getContext } from "svelte";
+  import { readable } from "svelte/store";
   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 +49,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,33 @@
   /** 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);
+  const groupName = writable(name);
+  const groupRequired = writable(required);
 
   setContext("TileGroup", {
     selectedValue,
+    groupName: readonly(groupName),
+    groupRequired: readonly(groupRequired),
     add: ({ checked, value }) => {
       if (checked) {
         selectedValue.set(value);
@@ -32,6 +48,8 @@
 
   $: selected = $selectedValue;
   $: selectedValue.set(selected);
+  $: $groupName = name;
+  $: $groupRequired = required;
 </script>
 
 <fieldset disabled="{disabled}" class:bx--tile-group="{true}" {...$$restProps}>