diff --git a/package-lock.json b/package-lock.json
index 8f528b56..6ad9b6d5 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -22,6 +22,7 @@
         "@rollup/plugin-babel": "^6.0.4",
         "@rollup/plugin-commonjs": "^25.0.7",
         "@rollup/plugin-json": "^6.0.0",
+        "@rollup/plugin-typescript": "^11.1.6",
         "@storybook/addon-designs": "^7.0.9",
         "@storybook/addon-essentials": "^7.6.17",
         "@storybook/addon-links": "^7.6.17",
@@ -61,7 +62,9 @@
         "sinon": "^17.0.1",
         "storybook": "^7.6.17",
         "stylelint": "^15.10.3",
-        "stylelint-config-standard": "^34.0.0"
+        "stylelint-config-standard": "^34.0.0",
+        "tslib": "^2.6.2",
+        "typescript": "^5.4.3"
       }
     },
     "node_modules/@75lb/deep-merge": {
@@ -6311,6 +6314,32 @@
       "integrity": "sha512-60BCwRFOZCQhDncwQdxxeOEEkbc5dIMccYLwbxsS4TUNeVECQ/pBJ0j09mrHOl/JJvpRPGwO9SvE4nR2Nb/a4Q==",
       "dev": true
     },
+    "node_modules/@rollup/plugin-typescript": {
+      "version": "11.1.6",
+      "resolved": "https://registry.npmjs.org/@rollup/plugin-typescript/-/plugin-typescript-11.1.6.tgz",
+      "integrity": "sha512-R92yOmIACgYdJ7dJ97p4K69I8gg6IEHt8M7dUBxN3W6nrO8uUxX5ixl0yU/N3aZTi8WhPuICvOHXQvF6FaykAA==",
+      "dev": true,
+      "dependencies": {
+        "@rollup/pluginutils": "^5.1.0",
+        "resolve": "^1.22.1"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      },
+      "peerDependencies": {
+        "rollup": "^2.14.0||^3.0.0||^4.0.0",
+        "tslib": "*",
+        "typescript": ">=3.7.0"
+      },
+      "peerDependenciesMeta": {
+        "rollup": {
+          "optional": true
+        },
+        "tslib": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@rollup/pluginutils": {
       "version": "5.1.0",
       "resolved": "https://registry.npmjs.org/@rollup/pluginutils/-/pluginutils-5.1.0.tgz",
@@ -26723,16 +26752,16 @@
       "dev": true
     },
     "node_modules/typescript": {
-      "version": "4.9.5",
-      "resolved": "https://registry.npmjs.org/typescript/-/typescript-4.9.5.tgz",
-      "integrity": "sha512-1FXk9E2Hm+QzZQ7z+McJiHL4NW1F2EzMu9Nq9i3zAaGqibafqYwCVU6WyWAuyQRRzOlxou8xZSyXLEN8oKj24g==",
+      "version": "5.4.3",
+      "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.4.3.tgz",
+      "integrity": "sha512-KrPd3PKaCLr78MalgiwJnA25Nm8HAmdwN3mYUYZgG/wizIo9EainNVQI9/yDavtVFRN2h3k8uf3GLHuhDMgEHg==",
       "dev": true,
       "bin": {
         "tsc": "bin/tsc",
         "tsserver": "bin/tsserver"
       },
       "engines": {
-        "node": ">=4.2.0"
+        "node": ">=14.17"
       }
     },
     "node_modules/typical": {
diff --git a/package.json b/package.json
index 651378fe..029ee6eb 100644
--- a/package.json
+++ b/package.json
@@ -7,6 +7,14 @@
   "type": "module",
   "main": "dist/index.js",
   "module": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "exports": {
+    ".": {
+      "default": "./dist/index.js",
+      "types": "./dist/index.d.ts"
+    },
+    "./*": "./dist/*"
+  },
   "repository": {
     "type": "git",
     "url": "https://github.com/statistikzh/leu.git"
@@ -14,14 +22,16 @@
   "homepage": "https://github.com/statistikzh/leu/",
   "scripts": {
     "analyze": "cem analyze --config custom-elements-manifest.config.js",
-    "build": "rimraf dist && npm run build:js && npm run build:css",
+    "build": "rimraf dist && npm run build:js && npm run build:types && npm run build:css",
     "build:js": "rollup -c rollup.config.js",
+    "build:types": "tsc -p tsconfig.build.json",
     "build:css": "postcss src/styles/theme.css -o dist/theme.css && cp dist/theme.css .storybook/static/",
     "watch:css": "nodemon --watch 'src/styles/*' -e css --exec npm run build:css",
     "lint": "npm run lint:eslint && npm run lint:prettier",
     "lint:eslint": "eslint --ext .js,.mjs,.html . --ignore-path .gitignore ",
     "lint:prettier": "prettier \"**/*.{js,mjs,md,html,json}\" --check --ignore-path .gitignore",
     "lint:stylelint": "stylelint \"**/*.{js,css}\" --ignore-path .gitignore",
+    "lint:types": "tsc",
     "format": "npm run format:eslint && npm run format:prettier",
     "format:eslint": "eslint --ext .js,.mjs,.html . --fix --ignore-path .gitignore",
     "format:prettier": "prettier \"**/*.{js,mjs,md,html,json}\" --write --ignore-path .gitignore",
@@ -46,6 +56,7 @@
     "@rollup/plugin-babel": "^6.0.4",
     "@rollup/plugin-commonjs": "^25.0.7",
     "@rollup/plugin-json": "^6.0.0",
+    "@rollup/plugin-typescript": "^11.1.6",
     "@storybook/addon-designs": "^7.0.9",
     "@storybook/addon-essentials": "^7.6.17",
     "@storybook/addon-links": "^7.6.17",
@@ -85,7 +96,9 @@
     "sinon": "^17.0.1",
     "storybook": "^7.6.17",
     "stylelint": "^15.10.3",
-    "stylelint-config-standard": "^34.0.0"
+    "stylelint-config-standard": "^34.0.0",
+    "tslib": "^2.6.2",
+    "typescript": "^5.4.3"
   },
   "customElements": "custom-elements.json",
   "prettier": {
diff --git a/src/components/button-group/ButtonGroup.js b/src/components/button-group/ButtonGroup.js
index 2055fbdb..9cd20d6b 100644
--- a/src/components/button-group/ButtonGroup.js
+++ b/src/components/button-group/ButtonGroup.js
@@ -1,4 +1,5 @@
 import { html, LitElement } from "lit"
+// @ts-ignore
 import styles from "./button-group.css"
 
 /**
@@ -17,7 +18,7 @@ export class LeuButtonGroup extends LitElement {
   }
 
   /**
-   * @param {HTMLElement} button
+   * @param {import("../button/Button").LeuButton} button
    * @returns {string}
    */
   static getButtonValue(button) {
@@ -71,6 +72,9 @@ export class LeuButtonGroup extends LitElement {
     })
   }
 
+  /**
+   * @param {import("../button/Button").LeuButton} button
+   */
   _handleButtonClick(button) {
     if (!button.active) {
       this.value = LeuButtonGroup.getButtonValue(button)
diff --git a/src/components/select/Select.js b/src/components/select/Select.js
index 10a1cd14..7d160f59 100644
--- a/src/components/select/Select.js
+++ b/src/components/select/Select.js
@@ -13,6 +13,7 @@ import "../menu/leu-menu-item.js"
 import "../input/leu-input.js"
 import "../popup/leu-popup.js"
 
+// @ts-ignore
 import styles from "./select.css"
 
 /**
@@ -25,8 +26,7 @@ export class LeuSelect extends LitElement {
 
   static get properties() {
     return {
-      open: { type: Boolean, attribute: "open" },
-
+      open: { type: Boolean, reflect: true },
       label: { type: String, reflect: true },
       options: { type: Array },
       value: { type: Array },
@@ -53,9 +53,14 @@ export class LeuSelect extends LitElement {
   constructor() {
     super()
     this.open = false
+    this.disabled = false
+    this.open = false
+    this.multiple = false
     this.clearable = false
+    this.filterable = false
     this.value = []
     this.options = []
+    this.label = ""
 
     /** @internal */
     this._arrowIcon = Icon("angleDropDown")
@@ -69,8 +74,17 @@ export class LeuSelect extends LitElement {
     /** @internal */
     this.deferedChangeEvent = false
 
+    /**
+     * @type {import("lit/directives/ref").Ref<import("../menu/Menu").LeuMenu>}
+     */
     this.menuRef = createRef()
+    /**
+     * @type {import("lit/directives/ref").Ref<import("../input/Input").LeuInput>}
+     */
     this.optionFilterRef = createRef()
+    /**
+     * @type {import("lit/directives/ref").Ref<HTMLButtonElement>}
+     */
     this.toggleButtonRef = createRef()
   }
 
@@ -102,7 +116,11 @@ export class LeuSelect extends LitElement {
    * @param {MouseEvent} event
    */
   handleDocumentClick = (event) => {
-    if (!this.contains(event.target) && this.open) {
+    if (
+      event.target instanceof Node &&
+      !this.contains(event.target) &&
+      this.open
+    ) {
       this.closeDropdown()
     }
   }
@@ -320,7 +338,7 @@ export class LeuSelect extends LitElement {
       <span class="label" id="select-label">${this.label}</span>
       <span class="value"> ${this.getDisplayValue(this.value)} </span>
       <span class="arrow-icon"> ${this._arrowIcon} </span>
-      ${this.clearable && this.value !== "" && this.value.length !== 0
+      ${this.clearable && this.value.length !== 0
         ? html`<button
             type="button"
             class="clear-button"
diff --git a/src/lib/defineElement.js b/src/lib/defineElement.js
index 195746c2..6f011c53 100644
--- a/src/lib/defineElement.js
+++ b/src/lib/defineElement.js
@@ -2,7 +2,7 @@
  * Adds a definition for a custom element to the custom element
  * registry if it isn't defined before. Prefixes the name with `leu-`.
  * @param {string} name
- * @param {HTMLElement} constructor
+ * @param {CustomElementConstructor} constructor
  */
 export function defineElement(name, constructor) {
   if (!customElements.get(`leu-${name}`)) {
diff --git a/src/lib/hasSlotController.js b/src/lib/hasSlotController.js
index 2ebfb16f..4935296a 100644
--- a/src/lib/hasSlotController.js
+++ b/src/lib/hasSlotController.js
@@ -5,7 +5,8 @@
 
 /**
  * A reactive controller that determines when slots exist.
- * @implements { import("lit").ReactiveController }
+ * @typedef {import("lit").ReactiveController} ReactiveController
+ * @implements {ReactiveController}
  */
 export class HasSlotController {
   constructor(host, slotNames) {
@@ -76,8 +77,9 @@ export class HasSlotController {
     const slot = event.target
 
     if (
-      (this.slotNames.includes("[default]") && !slot.name) ||
-      (slot.name && this.slotNames.includes(slot.name))
+      slot instanceof HTMLSlotElement &&
+      ((this.slotNames.includes("[default]") && !slot.name) ||
+        (slot.name && this.slotNames.includes(slot.name)))
     ) {
       this.host.requestUpdate()
     }
diff --git a/tsconfig.build.json b/tsconfig.build.json
new file mode 100644
index 00000000..bfe275f2
--- /dev/null
+++ b/tsconfig.build.json
@@ -0,0 +1,21 @@
+{
+  "include": ["dist/**/*.js"],
+  "exclude": ["node_modules", "dist/**/*.d.ts"],
+  "compilerOptions": {
+    // Tells TypeScript to read JS files, as
+    // normally they are ignored as source files
+    "allowJs": true,
+    // Generate d.ts files
+    "declaration": true,
+    // This compiler run should
+    // only output d.ts files
+    "emitDeclarationOnly": true,
+    // Types should go into this directory.
+    // Removing this would place the .d.ts files
+    // next to the .js files
+    "outDir": "dist",
+    // go to js file when using IDE functions like
+    // "Go to Definition" in VSCode
+    "declarationMap": true
+  }
+}
diff --git a/tsconfig.json b/tsconfig.json
new file mode 100644
index 00000000..9880b318
--- /dev/null
+++ b/tsconfig.json
@@ -0,0 +1,16 @@
+{
+  "include": ["src/**/*.js"],
+  "exclude": [
+    "node_modules",
+    "dist",
+    "**/*.d.ts",
+    "**/*.stories.js",
+    "**/*.test.js",
+    "**/*.css"
+  ],
+  "compilerOptions": {
+    "allowJs": true,
+    "checkJs": true,
+    "noEmit": true
+  }
+}