Refactored menu & menu items

Once again, breaking change for a lot of components, would be tackled separately

src/components/ui/menu/Menu.svelte

@@ -1,9 +1,9 @@
 <script lang="ts">
-  interface Props {
+  interface MenuProps {
     children?: import('svelte').Snippet;
   }
 
-  let { children }: Props = $props();
+  let { children }: MenuProps = $props();
 </script>
 
 <nav>

src/components/ui/menu/MenuCheckboxItem.svelte

@@ -1,33 +1,31 @@
-<script>
-  import { createBubbler, stopPropagation } from 'svelte/legacy';
+<script lang="ts">
   import MenuLink from "$components/ui/menu/MenuItem.svelte";
+  import type { Snippet } from "svelte";
+  import type { FormEventHandler, MouseEventHandler } from "svelte/elements";
 
-  const bubble = createBubbler();
+  interface MenuCheckboxItemProps {
+    checked: boolean;
+    name?: string;
+    value?: string;
+    href?: string;
+    children?: Snippet;
+    onclick?: MouseEventHandler<HTMLInputElement>;
+    oninput?: FormEventHandler<HTMLInputElement>;
+  }
 
-
-  /**
-   * @typedef {Object} Props
-   * @property {boolean} checked
-   * @property {string|undefined} [name]
-   * @property {string|undefined} [value]
-   * @property {string|null} [href]
-   * @property {import('svelte').Snippet} [children]
-   */
-
-  /** @type {Props} */
   let {
     checked = $bindable(),
     name = undefined,
     value = undefined,
-    href = null,
-    children
-  } = $props();
+    href = undefined,
+    children,
+    onclick,
+    oninput,
+  }: MenuCheckboxItemProps = $props();
 </script>
 
 <MenuLink {href}>
-  <input bind:checked={checked} {name} onclick={stopPropagation(bubble('click'))} oninput={bubble('input')}
-         type="checkbox"
-         {value}>
+  <input bind:checked={checked} {name} {onclick} {oninput} type="checkbox" {value}>
   {@render children?.()}
 </MenuLink>
 

src/components/ui/menu/MenuRadioItem.svelte

@@ -1,31 +1,31 @@
-<script>
-  import { createBubbler, stopPropagation } from 'svelte/legacy';
+<script lang="ts">
   import MenuLink from "$components/ui/menu/MenuItem.svelte";
+  import type { Snippet } from "svelte";
+  import type { FormEventHandler, MouseEventHandler } from "svelte/elements";
 
-  const bubble = createBubbler();
+  interface MenuRadioItemProps {
+    checked: boolean;
+    name: string;
+    value: string;
+    href?: string | null;
+    children?: Snippet;
+    onclick?: MouseEventHandler<HTMLInputElement>;
+    oninput?: FormEventHandler<HTMLInputElement>;
+  }
 
-
-  /**
-   * @typedef {Object} Props
-   * @property {boolean} checked
-   * @property {string} name
-   * @property {string} value
-   * @property {string|null} [href]
-   * @property {import('svelte').Snippet} [children]
-   */
-
-  /** @type {Props} */
   let {
     checked,
     name,
     value,
     href = null,
-    children
-  } = $props();
+    children,
+    onclick,
+    oninput,
+  }: MenuRadioItemProps = $props();
 </script>
 
 <MenuLink {href}>
-  <input {checked} {name} onclick={stopPropagation(bubble('click'))} oninput={bubble('input')} type="radio" {value}>
+  <input {checked} {name} {onclick} {oninput} type="radio" {value}>
   {@render children?.()}
 </MenuLink>