Initial commit with files

Still need to fix the imports

src/lib/components/menu/MenuButton.svelte

@@ -0,0 +1,83 @@
+<script lang="ts">
+    import { useMenuContext, MenuStates } from "./Menu.svelte";
+    import { useId } from "./use-id";
+    import { Keys } from "./keyboard";
+    import { Focus } from "./calculate-active-index";
+    import { tick } from "svelte";
+    export let disabled = false;
+    const api = useMenuContext("MenuButton");
+    const id = `headlessui-menu-button-${useId()}`;
+
+    $: buttonStore = $api?.buttonStore;
+    $: itemsStore = $api?.itemsStore;
+    async function handleKeyDown(event: KeyboardEvent) {
+        switch (event.key) {
+            // Ref: https://www.w3.org/TR/wai-aria-practices-1.2/#keyboard-interaction-13
+
+            case Keys.Space:
+            case Keys.Enter:
+            case Keys.ArrowDown:
+                event.preventDefault();
+                event.stopPropagation();
+                $api.openMenu();
+                await tick();
+                $itemsStore?.focus({ preventScroll: true });
+                $api.goToItem(Focus.First);
+                break;
+
+            case Keys.ArrowUp:
+                event.preventDefault();
+                event.stopPropagation();
+                $api.openMenu();
+                await tick();
+                $itemsStore?.focus({ preventScroll: true });
+                $api.goToItem(Focus.Last);
+                break;
+        }
+    }
+
+    function handleKeyUp(event: KeyboardEvent) {
+        switch (event.key) {
+            case Keys.Space:
+                // Required for firefox, event.preventDefault() in handleKeyDown for
+                // the Space key doesn't cancel the handleKeyUp, which in turn
+                // triggers a *click*.
+                event.preventDefault();
+                break;
+        }
+    }
+
+    async function handleClick(event: MouseEvent) {
+        if (disabled) return;
+        if ($api.menuState === MenuStates.Open) {
+            $api.closeMenu();
+            await tick();
+            $buttonStore?.focus({ preventScroll: true });
+        } else {
+            event.preventDefault();
+            event.stopPropagation();
+            $api.openMenu();
+            await tick();
+            $itemsStore?.focus({ preventScroll: true });
+        }
+    }
+
+    $: propsWeControl = {
+        id,
+        "aria-haspopup": true,
+        "aria-controls": $itemsStore?.id,
+        "aria-expanded": disabled
+            ? undefined
+            : $api.menuState === MenuStates.Open,
+    };
+</script>
+
+<button
+    {...{ ...$$restProps, ...propsWeControl }}
+    bind:this={$buttonStore}
+    on:click={handleClick}
+    on:keydown={handleKeyDown}
+    on:keyup={handleKeyUp}
+>
+    <slot open={$api?.menuState === MenuStates.Open} />
+</button>