diff --git a/package.json b/package.json
index 1f28ccf..088ab46 100644
--- a/package.json
+++ b/package.json
@@ -1,9 +1,12 @@
 {
 	"name": "@darkwiiplayer/better-select",
-	"browser": "src/BetterSelect.js",
+	"exports": {
+		".": "./src/better-select.js",
+		"./styles": "./src/better-select.css"
+	},
 	"type": "module",
 	"license": "MIT",
-	"version": "1.5.5",
+	"version": "2.0.0",
 	"url": "https://darkwiiplayer.github.io/BetterSelect/",
 	"scripts": {
 		"definitions": "tsc src/*.js --declaration --allowJs --emitDeclarationOnly"
diff --git a/src/BetterSelect.css b/src/better-select.css
similarity index 94%
rename from src/BetterSelect.css
rename to src/better-select.css
index 7e8ae72..801a59a 100644
--- a/src/BetterSelect.css
+++ b/src/better-select.css
@@ -66,7 +66,7 @@ better-select {
 		background-color: var(--highlight);
 	}
 
-	&:not(:state(--open))::part(drop-down) {
+	&:not(:state(open))::part(drop-down) {
 		transform: scale(100%, 70%) translate(0, -30%);
 		opacity: 0;
 	}
@@ -80,7 +80,7 @@ better-select {
 		transition: transform .3s var(--overshoot);
 	}
 
-	&:state(--open)::part(display)::after {
+	&:state(open)::part(display)::after {
 		transform: rotate(180deg);
 	}
 }
diff --git a/src/BetterSelect.js b/src/better-select.js
similarity index 97%
rename from src/BetterSelect.js
rename to src/better-select.js
index 2250777..a195acf 100644
--- a/src/BetterSelect.js
+++ b/src/better-select.js
@@ -145,7 +145,7 @@ export class BetterSelect extends HTMLElement {
 		slot[name="loading"] {
 			display: none;
 		}
-		:host(:state(--loading)) {
+		:host(:state(loading)) {
 			[part="list"] { display: none; }
 			slot[name="loading"] { display: block; }
 		}
@@ -206,7 +206,7 @@ export class BetterSelect extends HTMLElement {
 				this.setOption(item)
 				this.dispatchEvent(new InputEvent("input", {bubbles: true}))
 				this.close()
-			} else if (!this.#internals.states.has("--open")) {
+			} else if (!this.#internals.states.has("open")) {
 				this.open()
 			} else if (this.display.contains(event.target) || this.display.contains(event.target.closest("[slot]")?.assignedSlot)) {
 				this.close()
@@ -215,7 +215,7 @@ export class BetterSelect extends HTMLElement {
 
 		this.addEventListener("keydown", event => {
 			const key = event.key
-			if (this.#internals.states.has("--open")) {
+			if (this.#internals.states.has("open")) {
 				if (key == " " && this.list.contains(this.shadowRoot.activeElement)) {
 					this.close()
 					event.preventDefault()
@@ -325,10 +325,10 @@ export class BetterSelect extends HTMLElement {
 		this.#internals.states.add("open")
 
 		if ("populate" in this) {
-			this.#internals.states.add("--loading")
+			this.#internals.states.add("loading")
 			// @ts-ignore
 			await this.populate()
-			this.#internals.states.delete("--loading")
+			this.#internals.states.delete("loading")
 		}
 	}
 
@@ -338,7 +338,7 @@ export class BetterSelect extends HTMLElement {
 			hidden.removeAttribute("hidden")
 		this.#abortOpen?.abort()
 		this.#abortOpen = null
-		this.#internals.states.delete("--open")
+		this.#internals.states.delete("open")
 		this.dialog.close()
 	}