Fix binding bug

COMPONENT_INDEX.md

@@ -2906,8 +2906,8 @@ None.
 | Prop name       | Kind             | Reactive | Type                                      | Default value                                    | Description                                                   |
 | :-------------- | :--------------- | :------- | :---------------------------------------- | ------------------------------------------------ | ------------------------------------------------------------- |
 | ref             | <code>let</code> | Yes      | <code>null &#124; HTMLInputElement</code> | <code>null</code>                                | Obtain a reference to the input HTML element                  |
+| light           | <code>let</code> | Yes      | <code>boolean</code>                      | <code>false</code>                               | Set to `true` to enable the light variant                     |
 | selected        | <code>let</code> | Yes      | <code>boolean</code>                      | <code>false</code>                               | Set to `true` to select the tile                              |
-| light           | <code>let</code> | No       | <code>boolean</code>                      | <code>false</code>                               | Set to `true` to enable the light variant                     |
 | title           | <code>let</code> | No       | <code>string</code>                       | <code>"title"</code>                             | Specify the title of the selectable tile                      |
 | value           | <code>let</code> | No       | <code>string</code>                       | <code>"value"</code>                             | Specify the value of the selectable tile                      |
 | tabindex        | <code>let</code> | No       | <code>string</code>                       | <code>"0"</code>                                 | Specify the tabindex                                          |
@@ -2935,10 +2935,12 @@ None.
 
 ### Props
 
-| Prop name      | Kind             | Reactive | Type                | Default value   | Description                 |
+| Prop name      | Kind             | Reactive | Type                 | Default value      | Description                                                    |
-| :------------- | :--------------- | :------- | :------------------ | --------------- | --------------------------- |
+| :------------- | :--------------- | :------- | :------------------- | ------------------ | -------------------------------------------------------------- |
-| selectedValues | <code>let</code> | Yes      | <code>any[]</code>  | <code>[]</code> | Specify the selected tile's |
+| selectedValues | <code>let</code> | Yes      | <code>any[]</code>   | <code>[]</code>    | Specify the selected tile's                                    |
-| legend         | <code>let</code> | No       | <code>string</code> | <code>""</code> | Specify the legend text     |
+| disabled       | <code>let</code> | No       | <code>boolean</code> | <code>false</code> | Set to `true` to disable the tile group                        |
+| legend         | <code>let</code> | No       | <code>string</code>  | <code>""</code>    | Specify the legend text                                        |
+| light          | <code>let</code> | No       | <code>boolean</code> | <code>false</code> | Set to `true` to enable the light variant throughout the group |
 
 ### Slots
 

docs/src/COMPONENT_API.json

@@ -8534,7 +8534,7 @@
           "value": "false",
           "isFunction": false,
           "constant": false,
-          "reactive": false
+          "reactive": true
         },
         {
           "name": "title",
@@ -8768,6 +8768,16 @@
           "constant": false,
           "reactive": true
         },
+        {
+          "name": "disabled",
+          "kind": "let",
+          "description": "Set to `true` to disable the tile group",
+          "type": "boolean",
+          "value": "false",
+          "isFunction": false,
+          "constant": false,
+          "reactive": false
+        },
         {
           "name": "legend",
           "kind": "let",
@@ -8777,6 +8787,16 @@
           "isFunction": false,
           "constant": false,
           "reactive": false
+        },
+        {
+          "name": "light",
+          "kind": "let",
+          "description": "Set to `true` to enable the light variant throughout the group",
+          "type": "boolean",
+          "value": "false",
+          "isFunction": false,
+          "constant": false,
+          "reactive": false
         }
       ],
       "slots": [{ "name": "__default__", "default": true, "slot_props": "{}" }],

docs/src/pages/components/SelectableTile.svx

@@ -16,21 +16,21 @@ components: ["SelectableTile", "SelectableTileGroup"]
   <SelectableTile title="Option 2" value="2" selected>
     Option 2
   </SelectableTile>
-  <SelectableTile title="Option 3" value="3">
+  <SelectableTile light title="Option 3" value="3">
-    Option 3
+    Option 3 (light variant)
   </SelectableTile>
 </SelectableTileGroup>
 
 ### Light variant
 
-<SelectableTileGroup legend="Select the options you require">
+<SelectableTileGroup light legend="Select the options you require">
-  <SelectableTile light title="Option 1" value="option1" selected>
+  <SelectableTile title="Option 1" value="1" selected>
     Option 1
   </SelectableTile>
-  <SelectableTile light title="Option 2" value="2" selected>
+  <SelectableTile title="Option 2" value="2" selected>
     Option 2
   </SelectableTile>
-  <SelectableTile light title="Option 3" value="3">
+  <SelectableTile title="Option 3" value="3">
     Option 3
   </SelectableTile>
 </SelectableTileGroup>

src/Tile/SelectableTile.svelte

@@ -32,9 +32,13 @@
   import { getContext } from "svelte";
   import CheckmarkFilled16 from "carbon-icons-svelte/lib/CheckmarkFilled16";
 
-  const { update, selectedValues } = getContext("SelectableTileGroup");
+  const { update, selectedValues, _light } = getContext("SelectableTileGroup");
 
-  update({ value, selected });
+  if (selected) {
+    update({ value, selected });
+  }
+
+  light = light || _light;
 
   $: selected = $selectedValues.indexOf(value) > -1;
 </script>

src/Tile/SelectableTileGroup.svelte

@@ -5,9 +5,15 @@
    */
   export let selectedValues = [];
 
+  /** Set to `true` to disable the tile group */
+  export let disabled = false;
+
   /** Specify the legend text */
   export let legend = "";
 
+  /** Set to `true` to enable the light variant throughout the group */
+  export let light = false;
+
   import { createEventDispatcher, setContext } from "svelte";
   import { writable } from "svelte/store";
 
@@ -15,6 +21,7 @@
   const _selectedValues = writable(selectedValues);
 
   setContext("SelectableTileGroup", {
+    _light: light,
     selectedValues: _selectedValues,
     update: ({ selected, value }) =>
       _selectedValues.update((_) => {
@@ -29,11 +36,15 @@
   $: dispatch("select", $_selectedValues);
 </script>
 
-<fieldset class:bx--tile-group="{true}" {...$$restProps}>
+<fieldset disabled="{disabled}" class:bx--tile-group="{true}" {...$$restProps}>
   {#if legend}
     <legend class:bx--label="{true}">{legend}</legend>
   {/if}
-  <div>
+  <div
+    role="group"
+    aria-label="{$$props['aria-label'] || 'Selectable tiles'}"
+    data-selected="{selectedValues}"
+  >
     <slot />
   </div>
 </fieldset>

types/Tile/SelectableTileGroup.d.ts

@@ -7,11 +7,23 @@ export interface SelectableTileGroupProps extends svelte.JSX.HTMLAttributes<HTML
    */
   selectedValues?: any[];
 
+  /**
+   * Set to `true` to disable the tile group
+   * @default false
+   */
+  disabled?: boolean;
+
   /**
    * Specify the legend text
    * @default ""
    */
   legend?: string;
+
+  /**
+   * Set to `true` to enable the light variant throughout the group
+   * @default false
+   */
+  light?: boolean;
 }
 
 export default class SelectableTileGroup {