docs(selectable-tile): add/update examples

Author: metonym

docs/src/pages/components/SelectableTile.svx

@@ -1,9 +1,9 @@
 ---
-components: ["SelectableTile"]
+components: ["SelectableTileGroup", "SelectableTile"]
 ---
 
 <script>
-  import { SelectableTile } from "carbon-components-svelte";
+  import { SelectableTileGroup, SelectableTile } from "carbon-components-svelte";
   import Preview from "../../components/Preview.svelte";
 </script>
 
@@ -13,46 +13,58 @@ components: ["SelectableTile"]
 
 Group multiple selectable tiles together for multi-selection scenarios.
 
-<div role="group" aria-label="selectable tiles">
-  <SelectableTile selected>
+<SelectableTileGroup legend="Select options" name="options" selected={["option1", "option2"]}>
+  <SelectableTile value="option1">
     Multi-select Tile
   </SelectableTile>
-  <SelectableTile selected>
+  <SelectableTile value="option2">
     Multi-select Tile
   </SelectableTile>
-  <SelectableTile>
+  <SelectableTile value="option3">
     Multi-select Tile
   </SelectableTile>
-</div>
+</SelectableTileGroup>
+
+## Reactive (one-way binding)
+
+Update the selected values using the `select` and `deselect` events.
+
+<FileSource src="/framed/SelectableTile/SelectableTileReactiveOneWay" />
+
+## Reactive (two-way binding)
+
+Bind to the `selected` prop for simpler state management.
+
+<FileSource src="/framed/SelectableTile/SelectableTileReactive" />
 
 ## Light variant
 
 Use the light variant for light backgrounds.
 
-<div role="group" aria-label="selectable tiles">
-  <SelectableTile light selected>
+<SelectableTileGroup legend="Select options" name="options-light" selected={["option1", "option2"]}>
+  <SelectableTile light value="option1">
     Multi-select Tile
   </SelectableTile>
-  <SelectableTile light selected>
+  <SelectableTile light value="option2">
     Multi-select Tile
   </SelectableTile>
-  <SelectableTile light>
+  <SelectableTile light value="option3">
     Multi-select Tile
   </SelectableTile>
-</div>
+</SelectableTileGroup>
 
 ## Disabled state
 
-Disable tiles to prevent interaction.
+Disable specific tiles to prevent interaction.
 
-<div role="group" aria-label="selectable tiles">
-  <SelectableTile selected>
+<SelectableTileGroup legend="Select options" name="options-disabled" selected={["option1"]}>
+  <SelectableTile value="option1">
     Multi-select Tile
   </SelectableTile>
-  <SelectableTile disabled>
+  <SelectableTile disabled value="option2">
     Multi-select Tile
   </SelectableTile>
-  <SelectableTile disabled>
+  <SelectableTile disabled value="option3">
     Multi-select Tile
   </SelectableTile>
-</div>
+</SelectableTileGroup>

docs/src/pages/framed/SelectableTile/SelectableTileReactive.svelte

@@ -0,0 +1,35 @@
+<script>
+  import {
+    Button,
+    SelectableTile,
+    SelectableTileGroup,
+  } from "carbon-components-svelte";
+
+  const values = ["Lite plan", "Standard plan", "Plus plan"];
+
+  let selected = [values[0], values[1]];
+</script>
+
+<SelectableTileGroup legend="Service pricing tiers" name="plan" bind:selected>
+  {#each values as value}
+    <SelectableTile {value}>{value}</SelectableTile>
+  {/each}
+</SelectableTileGroup>
+
+<div>
+  Selected: <strong>{selected.join(", ") || "None"}</strong>
+</div>
+
+<Button
+  size="small"
+  disabled={selected.length === 1 && selected[0] === values[1]}
+  on:click={() => (selected = [values[1]])}
+>
+  Set to "{values[1]}" only
+</Button>
+
+<style>
+  div {
+    margin: var(--cds-spacing-05) 0;
+  }
+</style>

docs/src/pages/framed/SelectableTile/SelectableTileReactiveOneWay.svelte

@@ -0,0 +1,27 @@
+<script>
+  import {
+    SelectableTile,
+    SelectableTileGroup,
+  } from "carbon-components-svelte";
+
+  const values = ["Lite plan", "Standard plan", "Plus plan"];
+
+  let selected = [values[0], values[1]];
+</script>
+
+<SelectableTileGroup
+  legend="Service pricing tiers"
+  name="plan"
+  on:select={({ detail }) => (selected = [...selected, detail])}
+  on:deselect={({ detail }) => (selected = selected.filter((v) => v !== detail))}
+>
+  {#each values as value}
+    <SelectableTile {value} selected={selected.includes(value)}>
+      {value}
+    </SelectableTile>
+  {/each}
+</SelectableTileGroup>
+
+<br />
+
+Selected: <strong>{selected.join(", ") || "None"}</strong>