Develop

README.md

@@ -32,6 +32,22 @@ npm start
 
 to start a development server, that will typically be available at [http://localhost:5173](http://localhost:5173). For further available npm scripts, you can review the [package.json](./package.json)
 
+## Style Integration
+
+To import the default stylings, use 
+```css
+@import "path_to_node_modules/@samply/lens/dist/style.css";
+```
+in your main css file.
+
+Web components use "part" instead of "class". Here is how you can overwrite style properties:
+
+```css
+lens-info-button::part(info-button-icon) {
+  width: 20px;
+}
+```
+
 ## Roadmap 
 - On a short term, we plan on publishing the library on [npmjs](https://www.npmjs.com/). We plan to make it available as [@samply/lens](https://www.npmjs.com/package/@samply/lens)
 - After making the library available on npm, we will move the `AppCCP.svelte`, `AppBBMRI.svelte` and `AppGBA.svelte` to their separate repositories that are just using this library.

package.json

@@ -1,19 +1,21 @@
 {
   "name": "@samply/lens",
   "description": "A web component library for clinical data search and visualisation",
-  "version": "0.0.3-0",
+  "version": "0.0.3",
   "type": "module",
   "module": "dist/lens.js",
   "main": "dist/lens.umd.js",
   "types": "dist/types.d.ts",
+  "styles": "dist/style.css",
   "files": [
     "dist"
   ],
   "exports": {
     ".": {
       "import": "./dist/lens.js",
       "require": "./dist/lens.umd.js",
-      "types": "./dist/types.d.ts"
+      "types": "./dist/types.d.ts",
+      "styles": "./dist/style.css"
     }
   },
   "license": "MIT",
@@ -54,7 +56,6 @@
   },
   "dependencies": {
     "chart.js": "^4.4.0",
-    "svelte-dnd-action": "^0.9.26",
     "uuid": "^9.0.0"
   },
   "lint-staged": {