From 4d7e5e636422bb5b3cd3d094276f425b854699d3 Mon Sep 17 00:00:00 2001
From: pk <pk@codeblob.work>
Date: Fri, 16 Aug 2024 14:22:10 +0200
Subject: [PATCH] Add custom properties for easier color styling.

---
 package.json   |  2 +-
 tp-dropdown.js | 10 ++++++----
 2 files changed, 7 insertions(+), 5 deletions(-)

diff --git a/package.json b/package.json
index dfad173..ce93d5f 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@tp/tp-dropdown",
-  "version": "1.3.4",
+  "version": "1.4.0",
   "description": "",
   "main": "tp-dropdown.js",
   "scripts": {
diff --git a/tp-dropdown.js b/tp-dropdown.js
index 28b0653..639666e 100644
--- a/tp-dropdown.js
+++ b/tp-dropdown.js
@@ -148,17 +148,19 @@ class TpDropdown extends BaseElement {
         }
 
         div[role="option"]:hover {
-          background: #E0F7FA;
+          background: var(--tp-dropdown-hovered-item-bg, #E0F7FA);
+          color: var(--tp-dropdown-hovered-item-color, inherit);
         }
 
         div[role="option"]:focus {
-          background: #EEEEEE;
+          background: var(--tp-dropdown-focused-item-bg, #EEEEEE);
+          color: var(--tp-dropdown-focused-item-color, inherit);
           outline: none;
         }
 
         div[role="option"][selected] {
-          background: #4FC3F7;
-          color: #FFFFFF;
+          background: var(--tp-dropdown-selected-item-bg, #4FC3F7);
+          color: var(--tp-dropdown-selected-item-color, #FFFFFF);
         }
 
         div[role="option"]:first-of-type {