WIP: SelectableTileGroup

src/Tile/SelectableTileGroup.svelte

@@ -0,0 +1,52 @@
+<script>
+  /**
+   * Specify the selected tile's
+   * @type {string}
+   */
+  export let selectedValues = [];
+
+  /** Set to `true` to disable the tile group */
+  export let disabled = false;
+
+  /** Set to `true` to enable the light variant */
+  export let light = false;
+
+  /** Specify the legend text */
+  export let legend = "";
+
+  import { createEventDispatcher, setContext } from "svelte";
+  import { writable } from "svelte/store";
+
+  const dispatch = createEventDispatcher();
+  const _selectedValues = writable(selectedValues);
+
+  function newArray(value, selected) {
+    let a = $_selectedValues;
+    const i = a.indexOf(value);
+    if (selected && i === -1) {
+      a = a.concat([value]);
+    } else if (!selected && i > -1) {
+      a = a.splice(index, 1);
+    }
+    return a;
+  }
+
+  setContext("SelectableTileGroup", {
+    _light: light,
+    selectedValues: _selectedValues,
+    update: ({ selected, value }) =>
+      _selectedValues.set(newArray(value, selected)),
+  });
+
+  $: selectedValues = $_selectedValues;
+  $: dispatch("select", $_selectedValues);
+</script>
+
+<fieldset disabled="{disabled}" class:bx--tile-group="{true}" {...$$restProps}>
+  {#if legend}
+    <legend class:bx--label="{true}">{legend}</legend>
+  {/if}
+  <div>
+    <slot />
+  </div>
+</fieldset>