Merge pull request #3 from N0tExisting/main

Fix Component Height & make the component more accesible

Author: chanced

package.json

@@ -1,15 +1,22 @@
 {
 	"name": "filedrop-svelte",
-	"version": "0.0.10",
+	"description": "svelte component and action to create drag-and-drop file dropzones.",
+	"version": "0.0.11",
+	"license": "MIT",
 	"author": {
 		"name": "chance dinkins",
 		"email": "[email protected]"
 	},
-	"license": "mit",
+	"contributors": [
+		"not_existing"
+	],
 	"repository": {
 		"url": "https://github.com/chanced/filedrop-svelte",
 		"type": "git"
 	},
+	"bugs": {
+		"url": "https://github.com/chanced/filedrop-svelte/issues"
+	},
 	"keywords": [
 		"svelte",
 		"sveltekit",
@@ -18,18 +25,23 @@
 		"file upload",
 		"drag-and-drop"
 	],
-	"description": "svelte component and action to create drag-and-drop file dropzones.",
+	"type": "module",
 	"scripts": {
 		"package": "svelte-kit package",
 		"dev": "svelte-kit dev",
 		"build": "svelte-kit build",
 		"preview": "svelte-kit preview",
 		"check": "svelte-check --tsconfig ./tsconfig.json",
 		"check:watch": "svelte-check --tsconfig ./tsconfig.json --watch",
-		"lint": "prettier --check∆ --plugin-search-dir=. . && eslint --ignore-path .gitignore .",
+		"lint": "prettier --check --plugin-search-dir=. . && eslint --ignore-path .gitignore .",
 		"format": "prettier --write --plugin-search-dir=. .",
 		"test": "playwright test"
 	},
+	"dependencies": {
+		"file-selector": "^0.2.4",
+		"filesize": "^7.0.0",
+		"attr-accept": "^2.2.2"
+	},
 	"devDependencies": {
 		"@playwright/test": "^1.13.0",
 		"@sveltejs/kit": "next",
@@ -48,11 +60,5 @@
 		"ts-node": "^10.1.0",
 		"tslib": "^2.0.0",
 		"typescript": "^4.0.0"
-	},
-	"dependencies": {
-		"file-selector": "^0.2.4",
-		"filesize": "^7.0.0",
-		"attr-accept": "^2.2.2"
-	},
-	"type": "module"
-}
+	}
+}

src/lib/components/FileDrop/FileDrop.svelte

@@ -44,7 +44,7 @@
 	$: isMulti = (fileLimit === undefined || fileLimit > 1) && (multiple === undefined || multiple);
 </script>
 
-<div
+<label
 	{id}
 	class:filedrop={!containerClass}
 	use:filedrop={options}
@@ -63,12 +63,11 @@
 	<slot>
 		<p>Drag &amp; drop or select to upload {isMulti ? "files" : "a file "}</p>
 	</slot>
-</div>
+</label>
 
 <style>
 	.filedrop {
 		background-color: #f0f0f0;
-		height: 200px;
 		display: flex;
 		flex-direction: column;
 		align-items: center;