🧼 Updates inputs after svelte migration

app/src/lib/components/input/VerticalSlider.svelte

@@ -1,7 +1,4 @@
 <script lang="ts">
-  import { createBubbler } from 'svelte/legacy';
-
-  const bubble = createBubbler();
     interface Props {
         min?: number;
         max?: number;
@@ -13,7 +10,8 @@
         min = 0,
         max = 100,
         step = 1,
-    value = $bindable((max - min) / 2)
+        value = $bindable((max - min) / 2),
+        ...rest
     }: Props = $props();
 </script>
 
@@ -21,17 +19,16 @@
     type="range"
     style="writing-mode: vertical-lr; direction: rtl"
     class="cursor-pointer"
-    min={min}
-    max={max}
-    step={step}
+    {min}
+    {max}
+    {step}
     bind:value
-    oninput={bubble('input')}
-    onchange={bubble('change')}
+    {...rest}
 />
 
 <style>
-input[type=range]::-webkit-slider-runnable-track {
-  background: oklch(var(--p)/1);
+    input[type='range']::-webkit-slider-runnable-track {
+        background: oklch(var(--p) / 1);
         border-radius: var(--rounded-box, 1rem);
-} 
+    }
 </style>

app/src/lib/components/widget/Selector.svelte

@@ -1,11 +1,9 @@
 <script lang="ts">
-	import { createBubbler } from 'svelte/legacy';
-
-	const bubble = createBubbler();
     interface Props {
         options?: string[];
         selectedOption?: string;
-		[key: string]: any
+        change: () => void;
+        [key: string]: any;
     }
 
     let { options = [], selectedOption = $bindable(''), ...rest }: Props = $props();
@@ -13,7 +11,7 @@
 
 <select
     bind:value={selectedOption}
-	onchange={bubble('change')}
+    {...rest}
     class="select select-bordered select-sm lg:select-md max-w-xs {rest.class || ''}"
 >
     {#each options as option}