From 64f5e0f76ea713cb78a2f4199ccf46d5e7027cb3 Mon Sep 17 00:00:00 2001
From: Shinichi Okada <147320+shinokada@users.noreply.github.com>
Date: Wed, 30 Oct 2024 16:13:49 +0100
Subject: [PATCH] fix: #1463 by adding tag label to Button and RadioButton

---
 src/lib/buttons/Button.svelte    |  6 +++++-
 src/lib/forms/Radio.svelte       |  2 +-
 src/lib/forms/RadioButton.svelte |  2 +-
 src/routes/docs/forms/radio.md   | 12 ++++++------
 4 files changed, 13 insertions(+), 9 deletions(-)

diff --git a/src/lib/buttons/Button.svelte b/src/lib/buttons/Button.svelte
index 585949bb8..be5d46728 100644
--- a/src/lib/buttons/Button.svelte
+++ b/src/lib/buttons/Button.svelte
@@ -11,7 +11,7 @@
     size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
     color?: ButtonColor;
     shadow?: boolean;
-    tag?: 'a' | 'button';
+    tag?: 'a' | 'button'| 'label'; 
     checked?: boolean;
   }
 
@@ -142,6 +142,10 @@
   <a {href} {...$$restProps} class={buttonClass} role="button" on:click on:change on:keydown on:keyup on:touchstart|passive on:touchend on:touchcancel on:mouseenter on:mouseleave>
     <slot />
   </a>
+{:else if tag === 'label'}
+  <label {...$$restProps} class={buttonClass}>
+    <slot />
+  </label>
 {:else if tag === 'button' }
   <button {type} {...$$restProps} {disabled} class={buttonClass} on:click on:change on:keydown on:keyup on:touchstart|passive on:touchend on:touchcancel on:mouseenter on:mouseleave>
     <slot />
diff --git a/src/lib/forms/Radio.svelte b/src/lib/forms/Radio.svelte
index 86dbefcfb..9c24a9987 100644
--- a/src/lib/forms/Radio.svelte
+++ b/src/lib/forms/Radio.svelte
@@ -51,7 +51,7 @@
 </script>
 
 <Label class={labelClass(inline, $$props.class)} show={$$slots.default}>
-  <input type="radio" bind:group={group} on:blur on:change on:click on:focus on:keydown on:keypress on:keyup on:mouseenter on:mouseleave on:mouseover on:paste {value} {...$$restProps} class={inputClass(custom, color, false, background, spacing, $$slots.default || $$props.class)} />
+  <input type="radio" {...$$restProps} bind:group={group} on:blur on:change on:click on:focus on:keydown on:keypress on:keyup on:mouseenter on:mouseleave on:mouseover on:paste {value} class={inputClass(custom, color, false, background, spacing, $$slots.default || $$props.class)} />
   <slot />
 </Label>
 
diff --git a/src/lib/forms/RadioButton.svelte b/src/lib/forms/RadioButton.svelte
index 4aa58ca53..fa3db8d27 100644
--- a/src/lib/forms/RadioButton.svelte
+++ b/src/lib/forms/RadioButton.svelte
@@ -28,7 +28,7 @@
   $: buttonClass = twMerge(inline ? 'inline-flex' : 'flex', $$props.class);
 </script>
 
-<Button checked={value === group} {pill} {outline} {size} {color} {shadow} class={buttonClass}>
+<Button tag="label" checked={value === group} {pill} {outline} {size} {color} {shadow} class={buttonClass}>
   <input
     type="radio"
     bind:group
diff --git a/src/routes/docs/forms/radio.md b/src/routes/docs/forms/radio.md
index 56427bd57..6afba8a84 100644
--- a/src/routes/docs/forms/radio.md
+++ b/src/routes/docs/forms/radio.md
@@ -302,15 +302,15 @@ This component accepts all props from the [Button](/docs/components/buttons) for
 </script>
 
 <div>
-  <RadioButton value={"notes"} bind:group={radioGroup}><ListMusicSolid class="w-7 h-7" /></RadioButton>
-  <RadioButton value={"numbers"} bind:group={radioGroup}><OrderedListOutline class="w-7 h-7"/></RadioButton>
-  <RadioButton value={"bullets"} bind:group={radioGroup}><ListOutline class="w-7 h-7"/></RadioButton>
+  <RadioButton value="notes" bind:group={radioGroup}><ListMusicSolid class="w-7 h-7" /></RadioButton>
+  <RadioButton value="numbers" bind:group={radioGroup}><OrderedListOutline class="w-7 h-7"/></RadioButton>
+  <RadioButton value="bullets" bind:group={radioGroup}><ListOutline class="w-7 h-7"/></RadioButton>
 </div>
 
 <ButtonGroup>
-  <RadioButton value={"notes"} bind:group={radioGroup}><ListMusicSolid class="w-7 h-7"/></RadioButton>
-  <RadioButton value={"numbers"} bind:group={radioGroup}><OrderedListOutline class="w-7 h-7"/></RadioButton>
-  <RadioButton value={"bullets"} bind:group={radioGroup}><ListOutline class="w-7 h-7"/></RadioButton>
+  <RadioButton value="notes" bind:group={radioGroup}><ListMusicSolid class="w-7 h-7"/></RadioButton>
+  <RadioButton value="numbers" bind:group={radioGroup}><OrderedListOutline class="w-7 h-7"/></RadioButton>
+  <RadioButton value="bullets" bind:group={radioGroup}><ListOutline class="w-7 h-7"/></RadioButton>
 </ButtonGroup>
 
 <p>List style: {radioGroup}</p>