fix: RadioButton

Author: shinokada

src/lib/forms/radio-button/RadioButton.svelte

@@ -6,11 +6,32 @@
 
   let { children, group = $bindable<T>(), value = $bindable<T>(), inline, pill, outline, size, color, shadow, class: className, ...restProps }: RadioButtonProps<T> = $props();
 
+  let inputEl: HTMLInputElement;
   let base = $derived(radioButton({ inline, checked: value == group, class: clsx(className) }));
+
+  function clickHandler() {
+    inputEl?.click(); // manually trigger the click on the hidden input
+  }
 </script>
 
-<Button tag="label" checked={value === group} {pill} {outline} {size} {color} {shadow} class={base}>
-  <input type="radio" bind:group {value} {...restProps} class="sr-only" />
+<Button
+  tag="label"
+  onclick={clickHandler}
+  {pill}
+  {outline}
+  {size}
+  {color}
+  {shadow}
+  class={base}
+>
+  <input
+    bind:this={inputEl}
+    type="radio"
+    class="sr-only"
+    value={value}
+    bind:group={group}
+    {...restProps}
+  />
   {@render children?.()}
 </Button>
 

src/routes/docs/forms/checkbox.md

@@ -67,7 +67,7 @@ If you need separate control over the label and the checkbox you can use the ver
     <TableHeadCell>Left column</TableHeadCell>
     <TableHeadCell>Right column</TableHeadCell>
   </TableHead>
-  <TableBody tableBodyClass="divide-y dark:divide-gray-700">
+  <TableBody class="divide-y dark:divide-gray-700">
     <TableBodyRow class="divide-x rtl:divide-x-reverse dark:divide-gray-700">
       <TableBodyCell><Label for="checkbox1">Default checkbox</Label></TableBodyCell>
       <TableBodyCell><Label for="checkbox2">Disabled checkbox</Label></TableBodyCell>

src/routes/docs/forms/radio.md

@@ -274,7 +274,7 @@ Use this example of an advanced layout of radio elements where the label parent
     </div>
   </Radio>
   <Radio name="custom" custom>
-    <div for="hosting-big" class="dark:peer-checked:text-primary-500 peer-checked:border-primary-600 peer-checked:text-primary-600 inline-flex w-full cursor-pointer items-center justify-between rounded-lg border border-gray-200 bg-white p-5 text-gray-500 hover:bg-gray-100 hover:text-gray-600 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-gray-300">
+    <div class="dark:peer-checked:text-primary-500 peer-checked:border-primary-600 peer-checked:text-primary-600 inline-flex w-full cursor-pointer items-center justify-between rounded-lg border border-gray-200 bg-white p-5 text-gray-500 hover:bg-gray-100 hover:text-gray-600 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-gray-300">
       <div class="block">
         <div class="w-full text-lg font-semibold">500-1000 MB</div>
         <div class="w-full">Good for large websites</div>