Standardize event names to be consistent with @headlessui-react

Was previously using Vue names since Vue was the primary reference while porting, but as the public API is closer to the React one it makes sense to use that.

Fixes #8

src/lib/components/listbox/Listbox.svelte

@@ -164,7 +164,7 @@
     },
     select(value: unknown) {
       if (disabled) return;
-      dispatch("updateValue", { value });
+      dispatch("change", value);
     },
   });
   setContext(LISTBOX_CONTEXT_NAME, api);

src/lib/components/radio-group/RadioGroup.svelte

@@ -70,7 +70,7 @@
         (option) => option.propsRef.value === nextValue
       )?.propsRef;
       if (nextOption?.disabled) return false;
-      dispatch("updateValue", nextValue);
+      dispatch("change", nextValue);
       return true;
     },
     registerOption(action: Option) {

src/lib/components/switch/Switch.svelte

@@ -18,7 +18,7 @@
   $: switchStore = $api?.switchStore;
 
   function toggle() {
-    dispatch("updateValue", !checked);
+    dispatch("change", !checked);
   }
 
   function handleClick(event: MouseEvent) {

src/lib/components/tabs/TabGroup.svelte

@@ -61,7 +61,7 @@
     setSelectedIndex(index: number) {
       if (selectedIndex === index) return;
       selectedIndex = index;
-      dispatch("updateValue", index);
+      dispatch("change", index);
     },
     registerTab(tab: typeof tabs[number]) {
       if (!tabs.includes(tab)) tabs = [...tabs, tab];

src/routes/listbox/_PeopleList.svelte

@@ -36,9 +36,9 @@
   <div class="space-y-1">
     <Listbox
       value={active}
-      on:updateValue={(event) => {
+      on:change={(event) => {
-        console.log("value:", event.detail.value);
+        console.log("value:", event.detail);
-        active = event.detail.value;
+        active = event.detail;
       }}
     >
       <ListboxLabel class="block text-sm font-medium leading-5 text-gray-700">

src/routes/listbox/listbox-with-pure-tailwind.svelte

@@ -7,8 +7,6 @@
     ListboxOptions,
   } from "$lib";
 
-  import { onMount } from "svelte";
-
   function classNames(
     ...classes: (false | null | undefined | string)[]
   ): string {
@@ -36,8 +34,8 @@
     <div class="space-y-1">
       <Listbox
         value={active}
-        on:updateValue={(event) => {
+        on:change={(event) => {
-          active = event.detail.value;
+          active = event.detail;
         }}
       >
         <ListboxLabel class="block text-sm font-medium leading-5 text-gray-700">

src/routes/radio-group/radio-group.svelte

@@ -20,15 +20,12 @@
       description: "You are the only one able to access this project",
     },
   ];
-  let active;
+  let active: typeof access[number];
 </script>
 
 <div class="p-12 max-w-xl">
   <a href="/">Link before</a>
-  <RadioGroup
+  <RadioGroup value={active} on:change={(event) => (active = event.detail)}>
-    value={active}
-    on:updateValue={(event) => (active = event.detail)}
-  >
     <fieldset class="space-y-4">
       <legend>
         <h2 class="text-xl">Privacy setting</h2>

src/routes/switch/switch-with-pure-tailwind.svelte

@@ -15,7 +15,7 @@
     <Switch
       as="button"
       checked={state}
-      on:updateValue={(event) => (state = event.detail)}
+      on:change={(event) => (state = event.detail)}
       class={({ checked }) =>
         classNames(
           "relative inline-flex flex-shrink-0 h-6 border-2 border-transparent rounded-full cursor-pointer w-11 focus:outline-none focus:shadow-outline transition-colors ease-in-out duration-200",

src/routes/tabs/tabs-with-pure-tailwind.svelte

@@ -33,7 +33,7 @@
     <Switch
       as="button"
       checked={manual}
-      on:updateValue={(event) => (manual = event.detail)}
+      on:change={(event) => (manual = event.detail)}
       class={({ checked }) =>
         classNames(
           "relative inline-flex flex-shrink-0 h-6 border-2 border-transparent rounded-full cursor-pointer w-11 focus:outline-none focus:shadow-outline transition-colors ease-in-out duration-200",