fix: ensure button renders custom tag

src/lib/buttons/Button.svelte

@@ -15,14 +15,14 @@
   let btnCls = $derived(cn(base(), outline && outline_(), shadow && shadow_(), className));
 </script>
 
-{#if restProps.href === undefined}
+{#if restProps.href !== undefined}
+  <a {...restProps} class={btnCls}>
+    {@render children?.()}
+  </a>
+{:else if tag === "button"}
   <button type="button" {...restProps} class={btnCls} disabled={isDisabled}>
     {@render children?.()}
   </button>
-{:else if restProps.href}
-  <a {...restProps} class={btnCls} role="button">
-    {@render children?.()}
-  </a>
 {:else}
   <svelte:element this={tag} {...restProps} class={btnCls}>
     {@render children?.()}

src/lib/forms/radio/RadioButton.svelte

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

src/tests/button/basic-button.test.svelte

@@ -0,0 +1,5 @@
+<script>
+  import Button from "$lib/buttons/Button.svelte";
+</script>
+
+<Button>Test</Button>

src/tests/button/button.test.ts

@@ -0,0 +1,46 @@
+import { cleanup, render, screen } from "@testing-library/svelte";
+import { expect, test, afterEach } from "vitest";
+
+import BasicButtonTest from "./basic-button.test.svelte";
+import SubmitButtonTest from "./submit-button.test.svelte";
+import LinkButtonTest from "./link-button.test.svelte";
+import LabelButtonTest from "./label-button.test.svelte";
+
+afterEach(() => {
+  cleanup();
+});
+
+test("basic button renders correctly", () => {
+  render(BasicButtonTest);
+  const button = screen.getByRole("button");
+
+  expect(button).toBeInTheDocument();
+  expect(button).toHaveTextContent("Test");
+  expect(button).toHaveAttribute("type", "button");
+});
+
+test("submit button renders correctly", () => {
+  render(SubmitButtonTest);
+  const button = screen.getByRole("button");
+
+  expect(button).toBeInTheDocument();
+  expect(button).toHaveTextContent("Save");
+  expect(button).toHaveAttribute("type", "submit");
+});
+
+test("link button renders correctly", () => {
+  render(LinkButtonTest);
+  const link = screen.getByRole("link");
+
+  expect(link).toHaveTextContent("Flowbite Svelte");
+  expect(link).not.toHaveAttribute("type");
+});
+
+test("renders button as label element correctly", () => {
+  render(LabelButtonTest);
+  const label = screen.getByTestId("label");
+
+  expect(label).toBeInTheDocument();
+  expect(label).not.toHaveAttribute("type");
+  expect(label).not.toHaveAttribute("role");
+});

src/tests/button/label-button.test.svelte

@@ -0,0 +1,5 @@
+<script>
+  import Button from "$lib/buttons/Button.svelte";
+</script>
+
+<Button tag="label" data-testid="label">Test</Button>

src/tests/button/link-button.test.svelte

@@ -0,0 +1,5 @@
+<script>
+  import Button from "$lib/buttons/Button.svelte";
+</script>
+
+<Button href="https://flowbite-svelte.com/">Flowbite Svelte</Button>

src/tests/button/submit-button.test.svelte

@@ -0,0 +1,5 @@
+<script>
+  import Button from "$lib/buttons/Button.svelte";
+</script>
+
+<Button type="submit">Save</Button>

src/tests/forms/radio/check-radio-button.test.svelte

@@ -0,0 +1,6 @@
+<script>
+  import { RadioButton } from "$lib";
+</script>
+
+<RadioButton name="test" value="A">A</RadioButton>
+<RadioButton name="test" value="B">B</RadioButton>

src/tests/forms/radio/radio-button.test.ts

@@ -0,0 +1,22 @@
+import { cleanup, render, screen } from "@testing-library/svelte";
+import { expect, test, afterEach } from "vitest";
+import { userEvent } from "@testing-library/user-event";
+
+import CheckRadioButtonTest from "./check-radio-button.test.svelte";
+
+afterEach(() => {
+  cleanup();
+});
+
+test("checking a radio button", async () => {
+  const user = userEvent.setup();
+  render(CheckRadioButtonTest);
+  const inputA = screen.getByLabelText("A");
+  const inputB = screen.getByLabelText("B");
+
+  expect(inputA).not.toBeChecked();
+  expect(inputB).not.toBeChecked();
+  await user.click(inputB.parentElement!);
+  expect(inputA).not.toBeChecked();
+  expect(inputB).toBeChecked();
+});