Associate Switch labels with their respective switches

ts/deckoptions/Label.svelte

@@ -5,6 +5,9 @@
 <script lang="ts">
     import { onMount, createEventDispatcher } from "svelte";
 
+    let forId: string;
+    export { forId as for };
+
     const dispatch = createEventDispatcher();
 
     let spanRef: HTMLSpanElement;
@@ -14,4 +17,4 @@
     });
 </script>
 
-<span bind:this={spanRef}><slot /></span>
+<label bind:this={spanRef} for={forId}><slot /></label>

ts/deckoptions/Switch.svelte

@@ -3,12 +3,19 @@ Copyright: Ankitects Pty Ltd and contributors
 License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 -->
 <script lang="ts">
+    export let id: string | undefined;
     export let value: boolean;
     export let disabled = false;
 </script>
 
 <div class="form-check form-switch">
-    <input class="form-check-input" type="checkbox" bind:checked={value} {disabled} />
+    <input
+        {id}
+        class="form-check-input"
+        type="checkbox"
+        bind:checked={value}
+        {disabled}
+    />
 </div>
 
 <style lang="scss">

ts/deckoptions/SwitchRow.svelte

@@ -13,15 +13,18 @@
     export let value: boolean;
     export let defaultValue: boolean;
     export let markdownTooltip: string | undefined = undefined;
+
+    const id = Math.random().toString(36).substring(2);
 </script>
 
 <Row>
     <Col>
-        {#if markdownTooltip}<TooltipLabel {markdownTooltip}><slot /></TooltipLabel
+        {#if markdownTooltip}<TooltipLabel for={id} {markdownTooltip}
-            >{:else}<Label><slot /></Label>{/if}
+                ><slot /></TooltipLabel
+            >{:else}<Label for={id}><slot /></Label>{/if}
     </Col>
     <Col grow={false}>
-        <Switch bind:value />
+        <Switch {id} bind:value />
         <RevertButton bind:value {defaultValue} />
     </Col>
 </Row>

ts/deckoptions/TooltipLabel.svelte

@@ -10,12 +10,16 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     import Badge from "./Badge.svelte";
 
     export let markdownTooltip: string;
+    let forId: string;
+    export { forId as for };
 </script>
 
-<Label
+<span
-    ><slot /><WithTooltip tooltip={marked(markdownTooltip)} let:createTooltip
+    ><Label for={forId}><slot /></Label><WithTooltip
+        tooltip={marked(markdownTooltip)}
+        let:createTooltip
         ><Badge on:mount={(event) => createTooltip(event.detail.span)}
             >{@html infoCircle}</Badge
         ></WithTooltip
-    ></Label
+    ></span
 >