implement change requests

docs/src/pages/components/RadioTile.svx

@@ -26,3 +26,17 @@ components: ["RadioTileGroup", "RadioTile"]
     Plus plan
   </RadioTile>
 </RadioTileGroup>
+
+### Light variant
+
+<RadioTileGroup legend="Service pricing tiers">
+  <RadioTile light value="0" checked>
+    Lite plan
+  </RadioTile>
+  <RadioTile light value="1">
+    Standard plan
+  </RadioTile>
+  <RadioTile light value="2">
+    Plus plan
+  </RadioTile>
+</RadioTileGroup>

docs/src/pages/components/SelectableTile.svx

@@ -7,7 +7,7 @@ components: ["SelectableTile", "SelectableTileGroup"]
   import Preview from "../../components/Preview.svelte";
 </script>
 
-### Multi-selectable tiles
+### Default
 
 <SelectableTileGroup legend="Select the options you require">
   <SelectableTile title="Option 1" value="option1" selected>
@@ -20,3 +20,17 @@ components: ["SelectableTile", "SelectableTileGroup"]
     Option 3
   </SelectableTile>
 </SelectableTileGroup>
+
+### Light variant
+
+<SelectableTileGroup legend="Select the options you require">
+  <SelectableTile light title="Option 1" value="option1" selected>
+    Option 1
+  </SelectableTile>
+  <SelectableTile light title="Option 2" value="2" selected>
+    Option 2
+  </SelectableTile>
+  <SelectableTile light title="Option 3" value="3">
+    Option 3
+  </SelectableTile>
+</SelectableTileGroup>

src/Tile/SelectableTileGroup.svelte

@@ -5,9 +5,6 @@
    */
   export let selectedValues = [];
 
-  /** Set to `true` to disable the tile group */
-  export let disabled = false;
-
   /** Specify the legend text */
   export let legend = "";
 
@@ -17,28 +14,22 @@
   const dispatch = createEventDispatcher();
   const _selectedValues = writable(selectedValues);
 
-  function newArray(value, selected) {
-    let a = [...$_selectedValues];
-    const i = a.indexOf(value);
-    if (selected && i === -1) {
-      a.push(value);
-    } else if (!selected && i > -1) {
-      a.splice(i, 1);
-    }
-    return a;
-  }
-
   setContext("SelectableTileGroup", {
     selectedValues: _selectedValues,
     update: ({ selected, value }) =>
-      _selectedValues.set(newArray(value, selected)),
+      _selectedValues.update((_) => {
+        if (_.includes(value)) {
+          return _.filter((i) => i !== value);
+        }
+        return [..._, value];
+      }),
   });
 
   $: selectedValues = $_selectedValues;
   $: dispatch("select", $_selectedValues);
 </script>
 
-<fieldset disabled="{disabled}" class:bx--tile-group="{true}" {...$$restProps}>
+<fieldset class:bx--tile-group="{true}" {...$$restProps}>
   {#if legend}
     <legend class:bx--label="{true}">{legend}</legend>
   {/if}