From 4d96f63ddd113a1d31e42fc27e126bc2867858fc Mon Sep 17 00:00:00 2001
From: gucal <gucalaliriza@outlook.com>
Date: Mon, 9 Oct 2023 14:59:05 +0300
Subject: [PATCH 1/6] Refactor topbar and add discussions link

---
 .../layout/topbar/app.topbar.component.html   | 20 +++++++++++++------
 .../pages/landing/landing.component.html      | 17 +++++++++++-----
 2 files changed, 26 insertions(+), 11 deletions(-)

diff --git a/src/app/showcase/layout/topbar/app.topbar.component.html b/src/app/showcase/layout/topbar/app.topbar.component.html
index 53fb68647bb..be91c04e780 100644
--- a/src/app/showcase/layout/topbar/app.topbar.component.html
+++ b/src/app/showcase/layout/topbar/app.topbar.component.html
@@ -8,21 +8,29 @@
     
         <ul class="flex list-none m-0 p-0 gap-2 align-items-center ">
             <li>
-                <a
-                    href="http://github.com/primefaces/primeng"
-                    class="flex p-link border-1 w-2rem h-2rem surface-border border-round surface-card align-items-center justify-content-center transition-all transition-duration-300 hover:border-primary"
-                >
+                <a href="https://github.com/primefaces/primeng" target="_blank" rel="noopener noreferrer"
+                    class="flex px-link border-1 border-solid w-2rem h-2rem surface-border border-round surface-card align-items-center justify-content-center transition-all transition-duration-300 hover:border-primary"
+            >
                     <i class="pi pi-github text-700"></i>
                 </a>
             </li>
             <li>
-                <a href="https://discord.gg/gzKFYnpmCY" class="flex p-link border-1 w-2rem h-2rem surface-border border-round surface-card align-items-center justify-content-center transition-all transition-duration-300 hover:border-primary">
+                <a href="https://discord.gg/gzKFYnpmCY" target="_blank" rel="noopener noreferrer" 
+                    class="flex px-link border-1 border-solid w-2rem h-2rem surface-border border-round surface-card align-items-center justify-content-center transition-all transition-duration-300 hover:border-primary"
+            >
                     <i class="pi pi-discord text-700"></i>
                 </a>
             </li>
+            <li>
+                <a href="https://github.com/orgs/primefaces/discussions" target="_blank" rel="noopener noreferrer"
+                    class="flex px-link border-1 border-solid w-2rem h-2rem surface-border border-round surface-card align-items-center justify-content-center transition-all transition-duration-300 hover:border-primary"
+                >
+                    <i class="pi pi-comments text-700"></i>
+                </a>
+            </li>
             <li>
                 <button type="button" class="p-button flex border-1 w-2rem h-2rem p-0 align-items-center justify-content-center transition-all transition-duration-300 min-w-0" (click)="onConfigButtonClick($event)">
-                    <i class="pi pi-cog"></i>
+                    <i class="pi pi-palette"></i>
                 </button>
             </li>
             <li class="relative">
diff --git a/src/app/showcase/pages/landing/landing.component.html b/src/app/showcase/pages/landing/landing.component.html
index b1070235503..31f96973672 100644
--- a/src/app/showcase/pages/landing/landing.component.html
+++ b/src/app/showcase/pages/landing/landing.component.html
@@ -35,6 +35,12 @@
                                     <span>Designer</span>
                                 </a>
                             </li>
+                            <li class="mr-0 lg:mr-2">
+                                <a href="/uikit">
+                                    <img src="https://primefaces.org/cdn/primeng/images/landing/uikit-icon.svg" alt="primevue designer" width="30" />
+                                    <span>UI Kit</span>
+                                </a>
+                            </li>
                             <li class="mr-0 lg:mr-2">
                                 <a href="https://www.primefaces.org/store/templates.xhtml" target="_blank">
                                     <img src="https://primefaces.org/cdn/primeng/images/landing/templates-icon.svg" width="34" height="30" alt="Primeng templates" />
@@ -43,21 +49,22 @@
                             </li>
                         </ol>
                     </nav>
-                    <a href="https://github.com/primefaces/primeng" target="_blank" rel="noopener noreferrer"
-                        class="linkbox p-0 header-button mr-2 flex align-items-center justify-content-center flex-shrink-0">
+                    <a href="https://github.com/primefaces/primeng" target="_blank" rel="noopener noreferrer" class="linkbox p-0 header-button mr-1 md:mr-2 flex align-items-center justify-content-center flex-shrink-0">
                         <i class="pi pi-github"></i>
                     </a>
-                    <a href="https://discord.gg/gzKFYnpmCY" target="_blank" rel="noopener noreferrer"
-                        class="linkbox p-0 header-button mr-2 flex align-items-center justify-content-center flex-shrink-0">
+                    <a href="https://discord.gg/gzKFYnpmCY" target="_blank" rel="noopener noreferrer" class="linkbox p-0 header-button mr-1 md:mr-2 flex align-items-center justify-content-center flex-shrink-0">
                         <i class="pi pi-discord"></i>
                     </a>
+                    <a href="https://github.com/orgs/primefaces/discussions" target="_blank" rel="noopener noreferrer" class="linkbox p-0 header-button mr-1 md:mr-2 flex align-items-center justify-content-center flex-shrink-0">
+                        <i class="pi pi-comments"></i>
+                    </a>
                     <button type="button"
                         class="linkbox header-button inline-flex align-items-center justify-content-center"
                         (click)="toggleDarkMode()">
                         <i class="pi pi-{{ config.dark ? 'sun' : 'moon' }}"></i>
                     </button>
                     <button
-                        class="linkbox header-button inline-flex align-items-center justify-content-center lg:hidden ml-2 menu-button"
+                        class="linkbox header-button inline-flex align-items-center justify-content-center lg:hidden ml-1 md:ml-2 menu-button"
                         (click)="menuActive = !menuActive">
                         <i class="pi pi-bars"></i>
                     </button>

From a687f176e66f0de62e6fea75405ce7e9e059ce6d Mon Sep 17 00:00:00 2001
From: gucal <gucalaliriza@outlook.com>
Date: Mon, 9 Oct 2023 15:43:29 +0300
Subject: [PATCH 2/6] Update Divider login demo

---
 src/app/showcase/doc/divider/logindoc.ts | 99 +++++++++++-------------
 1 file changed, 45 insertions(+), 54 deletions(-)

diff --git a/src/app/showcase/doc/divider/logindoc.ts b/src/app/showcase/doc/divider/logindoc.ts
index 317c9fecc2d..9eb15ea0749 100644
--- a/src/app/showcase/doc/divider/logindoc.ts
+++ b/src/app/showcase/doc/divider/logindoc.ts
@@ -8,27 +8,24 @@ import { Code } from '../../domain/code';
             <p>Sample implementation of a login form using a divider with content.</p>
         </app-docsectiontext>
         <div class="card">
-            <div class="grid">
-                <div class="col-5 flex align-items-center justify-content-center">
-                    <div class="p-fluid">
-                        <div class="field">
-                            <label for="username">Username</label>
-                            <input pInputText id="username" type="text" />
-                        </div>
-                        <div class="field">
-                            <label for="password">Password</label>
-                            <input pInputText id="password" type="password" />
-                        </div>
-                        <p-button label="Login"></p-button>
+            <div class="flex flex-column md:flex-row">
+                <div class="w-full md:w-5 flex flex-column align-items-center justify-content-center gap-3 py-5">
+                    <div class="flex flex-wrap justify-content-center align-items-center gap-2">
+                        <label class="w-6rem">Username</label>
+                        <input pInputText id="username" type="text" class="w-12rem" />
                     </div>
+                    <div class="flex flex-wrap justify-content-center align-items-center gap-2">
+                        <label class="w-6rem">Password</label>
+                        <input pInputText id="password" type="password" class="w-12rem" />
+                    </div>
+                    <p-button label="Login" icon="pi pi-user" styleClass="w-10rem mx-auto"></p-button>
                 </div>
-                <div class="col-2">
-                    <p-divider layout="vertical">
-                        <b>OR</b>
-                    </p-divider>
+                <div class="w-full md:w-2">
+                    <p-divider layout="vertical" styleClass="hidden md:flex"><b>OR</b></p-divider>
+                    <p-divider layout="horizontal" styleClass="flex md:hidden" [align]="'center'"><b>OR</b></p-divider>
                 </div>
-                <div class="col-5 flex align-items-center justify-content-center">
-                    <p-button label="Sign Up" icon="pi pi-user-plus" styleClass="p-button-success"></p-button>
+                <div class="w-full md:w-5 flex align-items-center justify-content-center py-5">
+                    <p-button label="Sign Up" icon="pi pi-user-plus" styleClass="p-button-success w-10rem"></p-button>
                 </div>
             </div>
         </div>
@@ -42,53 +39,47 @@ export class LoginDoc {
 
     code: Code = {
         basic: `
-<div class="grid">
-    <div class="col-5 flex align-items-center justify-content-center">
-        <div class="p-fluid">
-            <div class="field">
-                <label for="username">Username</label>
-                <input pInputText id="username" type="text" />
-            </div>
-            <div class="field">
-                <label for="password">Password</label>
-                <input pInputText id="password" type="password" />
-            </div>
-            <p-button label="Login"></p-button>
+<div class="flex flex-column md:flex-row">
+    <div class="w-full md:w-5 flex flex-column align-items-center justify-content-center gap-3 py-5">
+        <div class="flex flex-wrap justify-content-center align-items-center gap-2">
+            <label class="w-6rem">Username</label>
+            <input pInputText id="username" type="text" class="w-12rem" />
+        </div>
+        <div class="flex flex-wrap justify-content-center align-items-center gap-2">
+            <label class="w-6rem">Password</label>
+            <input pInputText id="password" type="password" class="w-12rem" />
         </div>
+        <p-button label="Login" icon="pi pi-user" styleClass="w-10rem mx-auto"></p-button>
     </div>
-    <div class="col-2">
-        <p-divider layout="vertical">
-            <b>OR</b>
-        </p-divider>
+    <div class="w-full md:w-2">
+        <p-divider layout="vertical" styleClass="hidden md:flex"><b>OR</b></p-divider>
+        <p-divider layout="horizontal" styleClass="flex md:hidden" [align]="'center'"><b>OR</b></p-divider>
     </div>
-    <div class="col-5 flex align-items-center justify-content-center">
-        <p-button label="Sign Up" icon="pi pi-user-plus" styleClass="p-button-success"></p-button>
+    <div class="w-full md:w-5 flex align-items-center justify-content-center py-5">
+        <p-button label="Sign Up" icon="pi pi-user-plus" styleClass="p-button-success w-10rem"></p-button>
     </div>
 </div>`,
 
         html: `
 <div class="card">
-    <div class="grid">
-        <div class="col-5 flex align-items-center justify-content-center">
-            <div class="p-fluid">
-                <div class="field">
-                    <label for="username">Username</label>
-                    <input pInputText id="username" type="text" />
-                </div>
-                <div class="field">
-                    <label for="password">Password</label>
-                    <input pInputText id="password" type="password" />
-                </div>
-                <p-button label="Login"></p-button>
+    <div class="flex flex-column md:flex-row">
+        <div class="w-full md:w-5 flex flex-column align-items-center justify-content-center gap-3 py-5">
+            <div class="flex flex-wrap justify-content-center align-items-center gap-2">
+                <label class="w-6rem">Username</label>
+                <input pInputText id="username" type="text" class="w-12rem" />
+            </div>
+            <div class="flex flex-wrap justify-content-center align-items-center gap-2">
+                <label class="w-6rem">Password</label>
+                <input pInputText id="password" type="password" class="w-12rem" />
             </div>
+            <p-button label="Login" icon="pi pi-user" styleClass="w-10rem mx-auto"></p-button>
         </div>
-        <div class="col-2">
-            <p-divider layout="vertical">
-                <b>OR</b>
-            </p-divider>
+        <div class="w-full md:w-2">
+            <p-divider layout="vertical" styleClass="hidden md:flex"><b>OR</b></p-divider>
+            <p-divider layout="horizontal" styleClass="flex md:hidden" [align]="'center'"><b>OR</b></p-divider>
         </div>
-        <div class="col-5 flex align-items-center justify-content-center">
-            <p-button label="Sign Up" icon="pi pi-user-plus" styleClass="p-button-success"></p-button>
+        <div class="w-full md:w-5 flex align-items-center justify-content-center py-5">
+            <p-button label="Sign Up" icon="pi pi-user-plus" styleClass="p-button-success w-10rem"></p-button>
         </div>
     </div>
 </div>`,

From c344cd79f66442123a9edcd8ecbc3b00d407e3f8 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C3=87etin?=
 <69278826+cetincakiroglu@users.noreply.github.com>
Date: Mon, 9 Oct 2023 16:24:23 +0300
Subject: [PATCH 3/6] Fixed #13835, Fixed #13834

---
 .../components/themes/arya-blue/theme.css     | 24 ++++++++++++-------
 .../components/themes/arya-green/theme.css    | 24 ++++++++++++-------
 .../components/themes/arya-orange/theme.css   | 24 ++++++++++++-------
 .../components/themes/arya-purple/theme.css   | 24 ++++++++++++-------
 .../themes/bootstrap4-dark-blue/theme.css     | 24 ++++++++++++-------
 .../themes/bootstrap4-dark-purple/theme.css   | 24 ++++++++++++-------
 .../themes/bootstrap4-light-blue/theme.css    | 24 ++++++++++++-------
 .../themes/bootstrap4-light-purple/theme.css  | 24 ++++++++++++-------
 .../components/themes/fluent-light/theme.css  | 24 ++++++++++++-------
 .../themes/lara-dark-blue/theme.css           | 24 ++++++++++++-------
 .../themes/lara-dark-indigo/theme.css         | 24 ++++++++++++-------
 .../themes/lara-dark-purple/theme.css         | 24 ++++++++++++-------
 .../themes/lara-dark-teal/theme.css           | 24 ++++++++++++-------
 .../themes/lara-light-blue/theme.css          | 24 ++++++++++++-------
 .../themes/lara-light-indigo/theme.css        | 24 ++++++++++++-------
 .../themes/lara-light-purple/theme.css        | 24 ++++++++++++-------
 .../themes/lara-light-teal/theme.css          | 24 ++++++++++++-------
 .../components/themes/luna-amber/theme.css    | 24 ++++++++++++-------
 .../components/themes/luna-blue/theme.css     | 24 ++++++++++++-------
 .../components/themes/luna-green/theme.css    | 24 ++++++++++++-------
 .../components/themes/luna-pink/theme.css     | 24 ++++++++++++-------
 .../themes/md-dark-deeppurple/theme.css       | 24 ++++++++++++-------
 .../themes/md-dark-indigo/theme.css           | 24 ++++++++++++-------
 .../themes/md-light-deeppurple/theme.css      | 24 ++++++++++++-------
 .../themes/md-light-indigo/theme.css          | 24 ++++++++++++-------
 .../themes/mdc-dark-deeppurple/theme.css      | 24 ++++++++++++-------
 .../themes/mdc-dark-indigo/theme.css          | 24 ++++++++++++-------
 .../themes/mdc-light-deeppurple/theme.css     | 24 ++++++++++++-------
 .../themes/mdc-light-indigo/theme.css         | 24 ++++++++++++-------
 src/assets/components/themes/mira/theme.css   | 22 ++++++++++-------
 src/assets/components/themes/nano/theme.css   | 24 ++++++++++++-------
 .../components/themes/nova-accent/theme.css   | 24 ++++++++++++-------
 .../components/themes/nova-alt/theme.css      | 24 ++++++++++++-------
 src/assets/components/themes/nova/theme.css   | 24 ++++++++++++-------
 src/assets/components/themes/rhea/theme.css   | 24 ++++++++++++-------
 .../components/themes/saga-blue/theme.css     | 24 ++++++++++++-------
 .../components/themes/saga-green/theme.css    | 24 ++++++++++++-------
 .../components/themes/saga-orange/theme.css   | 24 ++++++++++++-------
 .../components/themes/saga-purple/theme.css   | 24 ++++++++++++-------
 .../components/themes/soho-dark/theme.css     | 24 ++++++++++++-------
 .../components/themes/soho-light/theme.css    | 24 ++++++++++++-------
 .../themes/tailwind-light/theme.css           | 24 ++++++++++++-------
 .../components/themes/vela-blue/theme.css     | 24 ++++++++++++-------
 .../components/themes/vela-green/theme.css    | 24 ++++++++++++-------
 .../components/themes/vela-orange/theme.css   | 24 ++++++++++++-------
 .../components/themes/vela-purple/theme.css   | 24 ++++++++++++-------
 .../components/themes/viva-dark/theme.css     | 24 ++++++++++++-------
 .../components/themes/viva-light/theme.css    | 24 ++++++++++++-------
 48 files changed, 719 insertions(+), 431 deletions(-)

diff --git a/src/assets/components/themes/arya-blue/theme.css b/src/assets/components/themes/arya-blue/theme.css
index 561e8ec3214..f586907c134 100644
--- a/src/assets/components/themes/arya-blue/theme.css
+++ b/src/assets/components/themes/arya-blue/theme.css
@@ -932,7 +932,7 @@
   .p-dropdown .p-dropdown-label.p-placeholder {
     color: rgba(255, 255, 255, 0.6);
   }
-  .p-dropdown .p-dropdown-label:enabled:focus {
+  .p-dropdown .p-dropdown-label:focus, .p-dropdown .p-dropdown-label:enabled:focus {
     outline: 0 none;
     box-shadow: none;
   }
@@ -947,6 +947,9 @@
     color: rgba(255, 255, 255, 0.6);
     right: 2.357rem;
   }
+  .p-dropdown.p-invalid.p-component {
+    border-color: #ef9a9a;
+  }
 
   .p-dropdown-panel {
     background: #1e1e1e;
@@ -988,14 +991,16 @@
     color: rgba(255, 255, 255, 0.87);
     background: rgba(100, 181, 246, 0.16);
   }
-  .p-dropdown-panel .p-dropdown-items .p-dropdown-item:not(.p-highlight):not(.p-disabled):hover {
+  .p-dropdown-panel .p-dropdown-items .p-dropdown-item.p-highlight.p-focus {
+    background: rgba(100, 181, 246, 0.24);
+  }
+  .p-dropdown-panel .p-dropdown-items .p-dropdown-item:not(.p-highlight):not(.p-disabled).p-focus {
     color: rgba(255, 255, 255, 0.87);
-    background: rgba(255, 255, 255, 0.03);
+    background: rgba(255, 255, 255, 0.09);
   }
-  .p-dropdown-panel .p-dropdown-items .p-dropdown-empty-message {
-    padding: 0.5rem 1rem;
+  .p-dropdown-panel .p-dropdown-items .p-dropdown-item:not(.p-highlight):not(.p-disabled):hover {
     color: rgba(255, 255, 255, 0.87);
-    background: transparent;
+    background: rgba(255, 255, 255, 0.03);
   }
   .p-dropdown-panel .p-dropdown-items .p-dropdown-item-group {
     margin: 0;
@@ -1004,9 +1009,10 @@
     background: #1e1e1e;
     font-weight: 600;
   }
-
-  p-dropdown.ng-dirty.ng-invalid > .p-dropdown {
-    border-color: #ef9a9a;
+  .p-dropdown-panel .p-dropdown-items .p-dropdown-empty-message {
+    padding: 0.5rem 1rem;
+    color: rgba(255, 255, 255, 0.87);
+    background: transparent;
   }
 
   .p-input-filled .p-dropdown {
diff --git a/src/assets/components/themes/arya-green/theme.css b/src/assets/components/themes/arya-green/theme.css
index 0db315b4b02..e546ddb70f3 100644
--- a/src/assets/components/themes/arya-green/theme.css
+++ b/src/assets/components/themes/arya-green/theme.css
@@ -932,7 +932,7 @@
   .p-dropdown .p-dropdown-label.p-placeholder {
     color: rgba(255, 255, 255, 0.6);
   }
-  .p-dropdown .p-dropdown-label:enabled:focus {
+  .p-dropdown .p-dropdown-label:focus, .p-dropdown .p-dropdown-label:enabled:focus {
     outline: 0 none;
     box-shadow: none;
   }
@@ -947,6 +947,9 @@
     color: rgba(255, 255, 255, 0.6);
     right: 2.357rem;
   }
+  .p-dropdown.p-invalid.p-component {
+    border-color: #ef9a9a;
+  }
 
   .p-dropdown-panel {
     background: #1e1e1e;
@@ -988,14 +991,16 @@
     color: rgba(255, 255, 255, 0.87);
     background: rgba(129, 199, 132, 0.16);
   }
-  .p-dropdown-panel .p-dropdown-items .p-dropdown-item:not(.p-highlight):not(.p-disabled):hover {
+  .p-dropdown-panel .p-dropdown-items .p-dropdown-item.p-highlight.p-focus {
+    background: rgba(129, 199, 132, 0.24);
+  }
+  .p-dropdown-panel .p-dropdown-items .p-dropdown-item:not(.p-highlight):not(.p-disabled).p-focus {
     color: rgba(255, 255, 255, 0.87);
-    background: rgba(255, 255, 255, 0.03);
+    background: rgba(255, 255, 255, 0.09);
   }
-  .p-dropdown-panel .p-dropdown-items .p-dropdown-empty-message {
-    padding: 0.5rem 1rem;
+  .p-dropdown-panel .p-dropdown-items .p-dropdown-item:not(.p-highlight):not(.p-disabled):hover {
     color: rgba(255, 255, 255, 0.87);
-    background: transparent;
+    background: rgba(255, 255, 255, 0.03);
   }
   .p-dropdown-panel .p-dropdown-items .p-dropdown-item-group {
     margin: 0;
@@ -1004,9 +1009,10 @@
     background: #1e1e1e;
     font-weight: 600;
   }
-
-  p-dropdown.ng-dirty.ng-invalid > .p-dropdown {
-    border-color: #ef9a9a;
+  .p-dropdown-panel .p-dropdown-items .p-dropdown-empty-message {
+    padding: 0.5rem 1rem;
+    color: rgba(255, 255, 255, 0.87);
+    background: transparent;
   }
 
   .p-input-filled .p-dropdown {
diff --git a/src/assets/components/themes/arya-orange/theme.css b/src/assets/components/themes/arya-orange/theme.css
index 477be288ce6..4bfba46874e 100644
--- a/src/assets/components/themes/arya-orange/theme.css
+++ b/src/assets/components/themes/arya-orange/theme.css
@@ -932,7 +932,7 @@
   .p-dropdown .p-dropdown-label.p-placeholder {
     color: rgba(255, 255, 255, 0.6);
   }
-  .p-dropdown .p-dropdown-label:enabled:focus {
+  .p-dropdown .p-dropdown-label:focus, .p-dropdown .p-dropdown-label:enabled:focus {
     outline: 0 none;
     box-shadow: none;
   }
@@ -947,6 +947,9 @@
     color: rgba(255, 255, 255, 0.6);
     right: 2.357rem;
   }
+  .p-dropdown.p-invalid.p-component {
+    border-color: #ef9a9a;
+  }
 
   .p-dropdown-panel {
     background: #1e1e1e;
@@ -988,14 +991,16 @@
     color: rgba(255, 255, 255, 0.87);
     background: rgba(255, 213, 79, 0.16);
   }
-  .p-dropdown-panel .p-dropdown-items .p-dropdown-item:not(.p-highlight):not(.p-disabled):hover {
+  .p-dropdown-panel .p-dropdown-items .p-dropdown-item.p-highlight.p-focus {
+    background: rgba(255, 213, 79, 0.24);
+  }
+  .p-dropdown-panel .p-dropdown-items .p-dropdown-item:not(.p-highlight):not(.p-disabled).p-focus {
     color: rgba(255, 255, 255, 0.87);
-    background: rgba(255, 255, 255, 0.03);
+    background: rgba(255, 255, 255, 0.09);
   }
-  .p-dropdown-panel .p-dropdown-items .p-dropdown-empty-message {
-    padding: 0.5rem 1rem;
+  .p-dropdown-panel .p-dropdown-items .p-dropdown-item:not(.p-highlight):not(.p-disabled):hover {
     color: rgba(255, 255, 255, 0.87);
-    background: transparent;
+    background: rgba(255, 255, 255, 0.03);
   }
   .p-dropdown-panel .p-dropdown-items .p-dropdown-item-group {
     margin: 0;
@@ -1004,9 +1009,10 @@
     background: #1e1e1e;
     font-weight: 600;
   }
-
-  p-dropdown.ng-dirty.ng-invalid > .p-dropdown {
-    border-color: #ef9a9a;
+  .p-dropdown-panel .p-dropdown-items .p-dropdown-empty-message {
+    padding: 0.5rem 1rem;
+    color: rgba(255, 255, 255, 0.87);
+    background: transparent;
   }
 
   .p-input-filled .p-dropdown {
diff --git a/src/assets/components/themes/arya-purple/theme.css b/src/assets/components/themes/arya-purple/theme.css
index 5c89a647eee..b8583b53d1f 100644
--- a/src/assets/components/themes/arya-purple/theme.css
+++ b/src/assets/components/themes/arya-purple/theme.css
@@ -932,7 +932,7 @@
   .p-dropdown .p-dropdown-label.p-placeholder {
     color: rgba(255, 255, 255, 0.6);
   }
-  .p-dropdown .p-dropdown-label:enabled:focus {
+  .p-dropdown .p-dropdown-label:focus, .p-dropdown .p-dropdown-label:enabled:focus {
     outline: 0 none;
     box-shadow: none;
   }
@@ -947,6 +947,9 @@
     color: rgba(255, 255, 255, 0.6);
     right: 2.357rem;
   }
+  .p-dropdown.p-invalid.p-component {
+    border-color: #ef9a9a;
+  }
 
   .p-dropdown-panel {
     background: #1e1e1e;
@@ -988,14 +991,16 @@
     color: rgba(255, 255, 255, 0.87);
     background: rgba(186, 104, 200, 0.16);
   }
-  .p-dropdown-panel .p-dropdown-items .p-dropdown-item:not(.p-highlight):not(.p-disabled):hover {
+  .p-dropdown-panel .p-dropdown-items .p-dropdown-item.p-highlight.p-focus {
+    background: rgba(186, 104, 200, 0.24);
+  }
+  .p-dropdown-panel .p-dropdown-items .p-dropdown-item:not(.p-highlight):not(.p-disabled).p-focus {
     color: rgba(255, 255, 255, 0.87);
-    background: rgba(255, 255, 255, 0.03);
+    background: rgba(255, 255, 255, 0.09);
   }
-  .p-dropdown-panel .p-dropdown-items .p-dropdown-empty-message {
-    padding: 0.5rem 1rem;
+  .p-dropdown-panel .p-dropdown-items .p-dropdown-item:not(.p-highlight):not(.p-disabled):hover {
     color: rgba(255, 255, 255, 0.87);
-    background: transparent;
+    background: rgba(255, 255, 255, 0.03);
   }
   .p-dropdown-panel .p-dropdown-items .p-dropdown-item-group {
     margin: 0;
@@ -1004,9 +1009,10 @@
     background: #1e1e1e;
     font-weight: 600;
   }
-
-  p-dropdown.ng-dirty.ng-invalid > .p-dropdown {
-    border-color: #ef9a9a;
+  .p-dropdown-panel .p-dropdown-items .p-dropdown-empty-message {
+    padding: 0.5rem 1rem;
+    color: rgba(255, 255, 255, 0.87);
+    background: transparent;
   }
 
   .p-input-filled .p-dropdown {
diff --git a/src/assets/components/themes/bootstrap4-dark-blue/theme.css b/src/assets/components/themes/bootstrap4-dark-blue/theme.css
index 8c4e7a7f827..d5506c42510 100644
--- a/src/assets/components/themes/bootstrap4-dark-blue/theme.css
+++ b/src/assets/components/themes/bootstrap4-dark-blue/theme.css
@@ -936,7 +936,7 @@
   .p-dropdown .p-dropdown-label.p-placeholder {
     color: rgba(255, 255, 255, 0.6);
   }
-  .p-dropdown .p-dropdown-label:enabled:focus {
+  .p-dropdown .p-dropdown-label:focus, .p-dropdown .p-dropdown-label:enabled:focus {
     outline: 0 none;
     box-shadow: none;
   }
@@ -951,6 +951,9 @@
     color: rgba(255, 255, 255, 0.6);
     right: 2.357rem;
   }
+  .p-dropdown.p-invalid.p-component {
+    border-color: #f19ea6;
+  }
 
   .p-dropdown-panel {
     background: #2a323d;
@@ -992,14 +995,16 @@
     color: #151515;
     background: #8dd0ff;
   }
-  .p-dropdown-panel .p-dropdown-items .p-dropdown-item:not(.p-highlight):not(.p-disabled):hover {
+  .p-dropdown-panel .p-dropdown-items .p-dropdown-item.p-highlight.p-focus {
+    background: #64bfff;
+  }
+  .p-dropdown-panel .p-dropdown-items .p-dropdown-item:not(.p-highlight):not(.p-disabled).p-focus {
     color: rgba(255, 255, 255, 0.87);
-    background: rgba(255, 255, 255, 0.04);
+    background: rgba(255, 255, 255, 0.09);
   }
-  .p-dropdown-panel .p-dropdown-items .p-dropdown-empty-message {
-    padding: 0.5rem 1.5rem;
+  .p-dropdown-panel .p-dropdown-items .p-dropdown-item:not(.p-highlight):not(.p-disabled):hover {
     color: rgba(255, 255, 255, 0.87);
-    background: transparent;
+    background: rgba(255, 255, 255, 0.04);
   }
   .p-dropdown-panel .p-dropdown-items .p-dropdown-item-group {
     margin: 0;
@@ -1008,9 +1013,10 @@
     background: #2a323d;
     font-weight: 600;
   }
-
-  p-dropdown.ng-dirty.ng-invalid > .p-dropdown {
-    border-color: #f19ea6;
+  .p-dropdown-panel .p-dropdown-items .p-dropdown-empty-message {
+    padding: 0.5rem 1.5rem;
+    color: rgba(255, 255, 255, 0.87);
+    background: transparent;
   }
 
   .p-input-filled .p-dropdown {
diff --git a/src/assets/components/themes/bootstrap4-dark-purple/theme.css b/src/assets/components/themes/bootstrap4-dark-purple/theme.css
index 45ee2730bb2..9b5a50efd09 100644
--- a/src/assets/components/themes/bootstrap4-dark-purple/theme.css
+++ b/src/assets/components/themes/bootstrap4-dark-purple/theme.css
@@ -936,7 +936,7 @@
   .p-dropdown .p-dropdown-label.p-placeholder {
     color: rgba(255, 255, 255, 0.6);
   }
-  .p-dropdown .p-dropdown-label:enabled:focus {
+  .p-dropdown .p-dropdown-label:focus, .p-dropdown .p-dropdown-label:enabled:focus {
     outline: 0 none;
     box-shadow: none;
   }
@@ -951,6 +951,9 @@
     color: rgba(255, 255, 255, 0.6);
     right: 2.357rem;
   }
+  .p-dropdown.p-invalid.p-component {
+    border-color: #f19ea6;
+  }
 
   .p-dropdown-panel {
     background: #2a323d;
@@ -992,14 +995,16 @@
     color: #151515;
     background: #c298d8;
   }
-  .p-dropdown-panel .p-dropdown-items .p-dropdown-item:not(.p-highlight):not(.p-disabled):hover {
+  .p-dropdown-panel .p-dropdown-items .p-dropdown-item.p-highlight.p-focus {
+    background: #b07acd;
+  }
+  .p-dropdown-panel .p-dropdown-items .p-dropdown-item:not(.p-highlight):not(.p-disabled).p-focus {
     color: rgba(255, 255, 255, 0.87);
-    background: rgba(255, 255, 255, 0.04);
+    background: rgba(255, 255, 255, 0.09);
   }
-  .p-dropdown-panel .p-dropdown-items .p-dropdown-empty-message {
-    padding: 0.5rem 1.5rem;
+  .p-dropdown-panel .p-dropdown-items .p-dropdown-item:not(.p-highlight):not(.p-disabled):hover {
     color: rgba(255, 255, 255, 0.87);
-    background: transparent;
+    background: rgba(255, 255, 255, 0.04);
   }
   .p-dropdown-panel .p-dropdown-items .p-dropdown-item-group {
     margin: 0;
@@ -1008,9 +1013,10 @@
     background: #2a323d;
     font-weight: 600;
   }
-
-  p-dropdown.ng-dirty.ng-invalid > .p-dropdown {
-    border-color: #f19ea6;
+  .p-dropdown-panel .p-dropdown-items .p-dropdown-empty-message {
+    padding: 0.5rem 1.5rem;
+    color: rgba(255, 255, 255, 0.87);
+    background: transparent;
   }
 
   .p-input-filled .p-dropdown {
diff --git a/src/assets/components/themes/bootstrap4-light-blue/theme.css b/src/assets/components/themes/bootstrap4-light-blue/theme.css
index c5f91c6f341..84d6266306e 100644
--- a/src/assets/components/themes/bootstrap4-light-blue/theme.css
+++ b/src/assets/components/themes/bootstrap4-light-blue/theme.css
@@ -936,7 +936,7 @@
   .p-dropdown .p-dropdown-label.p-placeholder {
     color: #6c757d;
   }
-  .p-dropdown .p-dropdown-label:enabled:focus {
+  .p-dropdown .p-dropdown-label:focus, .p-dropdown .p-dropdown-label:enabled:focus {
     outline: 0 none;
     box-shadow: none;
   }
@@ -951,6 +951,9 @@
     color: #495057;
     right: 2.357rem;
   }
+  .p-dropdown.p-invalid.p-component {
+    border-color: #dc3545;
+  }
 
   .p-dropdown-panel {
     background: #ffffff;
@@ -992,14 +995,16 @@
     color: #ffffff;
     background: #007bff;
   }
-  .p-dropdown-panel .p-dropdown-items .p-dropdown-item:not(.p-highlight):not(.p-disabled):hover {
+  .p-dropdown-panel .p-dropdown-items .p-dropdown-item.p-highlight.p-focus {
+    background: #0067d6;
+  }
+  .p-dropdown-panel .p-dropdown-items .p-dropdown-item:not(.p-highlight):not(.p-disabled).p-focus {
     color: #212529;
-    background: #e9ecef;
+    background: #dee2e6;
   }
-  .p-dropdown-panel .p-dropdown-items .p-dropdown-empty-message {
-    padding: 0.5rem 1.5rem;
+  .p-dropdown-panel .p-dropdown-items .p-dropdown-item:not(.p-highlight):not(.p-disabled):hover {
     color: #212529;
-    background: transparent;
+    background: #e9ecef;
   }
   .p-dropdown-panel .p-dropdown-items .p-dropdown-item-group {
     margin: 0;
@@ -1008,9 +1013,10 @@
     background: #ffffff;
     font-weight: 600;
   }
-
-  p-dropdown.ng-dirty.ng-invalid > .p-dropdown {
-    border-color: #dc3545;
+  .p-dropdown-panel .p-dropdown-items .p-dropdown-empty-message {
+    padding: 0.5rem 1.5rem;
+    color: #212529;
+    background: transparent;
   }
 
   .p-input-filled .p-dropdown {
diff --git a/src/assets/components/themes/bootstrap4-light-purple/theme.css b/src/assets/components/themes/bootstrap4-light-purple/theme.css
index afb17ecb15d..d9cb372399d 100644
--- a/src/assets/components/themes/bootstrap4-light-purple/theme.css
+++ b/src/assets/components/themes/bootstrap4-light-purple/theme.css
@@ -936,7 +936,7 @@
   .p-dropdown .p-dropdown-label.p-placeholder {
     color: #6c757d;
   }
-  .p-dropdown .p-dropdown-label:enabled:focus {
+  .p-dropdown .p-dropdown-label:focus, .p-dropdown .p-dropdown-label:enabled:focus {
     outline: 0 none;
     box-shadow: none;
   }
@@ -951,6 +951,9 @@
     color: #495057;
     right: 2.357rem;
   }
+  .p-dropdown.p-invalid.p-component {
+    border-color: #dc3545;
+  }
 
   .p-dropdown-panel {
     background: #ffffff;
@@ -992,14 +995,16 @@
     color: #ffffff;
     background: #883cae;
   }
-  .p-dropdown-panel .p-dropdown-items .p-dropdown-item:not(.p-highlight):not(.p-disabled):hover {
+  .p-dropdown-panel .p-dropdown-items .p-dropdown-item.p-highlight.p-focus {
+    background: #703290;
+  }
+  .p-dropdown-panel .p-dropdown-items .p-dropdown-item:not(.p-highlight):not(.p-disabled).p-focus {
     color: #212529;
-    background: #e9ecef;
+    background: #dee2e6;
   }
-  .p-dropdown-panel .p-dropdown-items .p-dropdown-empty-message {
-    padding: 0.5rem 1.5rem;
+  .p-dropdown-panel .p-dropdown-items .p-dropdown-item:not(.p-highlight):not(.p-disabled):hover {
     color: #212529;
-    background: transparent;
+    background: #e9ecef;
   }
   .p-dropdown-panel .p-dropdown-items .p-dropdown-item-group {
     margin: 0;
@@ -1008,9 +1013,10 @@
     background: #ffffff;
     font-weight: 600;
   }
-
-  p-dropdown.ng-dirty.ng-invalid > .p-dropdown {
-    border-color: #dc3545;
+  .p-dropdown-panel .p-dropdown-items .p-dropdown-empty-message {
+    padding: 0.5rem 1.5rem;
+    color: #212529;
+    background: transparent;
   }
 
   .p-input-filled .p-dropdown {
diff --git a/src/assets/components/themes/fluent-light/theme.css b/src/assets/components/themes/fluent-light/theme.css
index 2a6e512f4ad..e5efd5450d7 100644
--- a/src/assets/components/themes/fluent-light/theme.css
+++ b/src/assets/components/themes/fluent-light/theme.css
@@ -932,7 +932,7 @@
   .p-dropdown .p-dropdown-label.p-placeholder {
     color: #605e5c;
   }
-  .p-dropdown .p-dropdown-label:enabled:focus {
+  .p-dropdown .p-dropdown-label:focus, .p-dropdown .p-dropdown-label:enabled:focus {
     outline: 0 none;
     box-shadow: none;
   }
@@ -947,6 +947,9 @@
     color: #605e5c;
     right: 2.357rem;
   }
+  .p-dropdown.p-invalid.p-component {
+    border-color: #a4252c;
+  }
 
   .p-dropdown-panel {
     background: #ffffff;
@@ -988,14 +991,16 @@
     color: #323130;
     background: #edebe9;
   }
-  .p-dropdown-panel .p-dropdown-items .p-dropdown-item:not(.p-highlight):not(.p-disabled):hover {
+  .p-dropdown-panel .p-dropdown-items .p-dropdown-item.p-highlight.p-focus {
+    background: #e1dfdd;
+  }
+  .p-dropdown-panel .p-dropdown-items .p-dropdown-item:not(.p-highlight):not(.p-disabled).p-focus {
     color: #323130;
-    background: #f3f2f1;
+    background: #e1dfdd;
   }
-  .p-dropdown-panel .p-dropdown-items .p-dropdown-empty-message {
-    padding: 0.75rem 0.5rem;
+  .p-dropdown-panel .p-dropdown-items .p-dropdown-item:not(.p-highlight):not(.p-disabled):hover {
     color: #323130;
-    background: transparent;
+    background: #f3f2f1;
   }
   .p-dropdown-panel .p-dropdown-items .p-dropdown-item-group {
     margin: 0;
@@ -1004,9 +1009,10 @@
     background: #ffffff;
     font-weight: 600;
   }
-
-  p-dropdown.ng-dirty.ng-invalid > .p-dropdown {
-    border-color: #a4252c;
+  .p-dropdown-panel .p-dropdown-items .p-dropdown-empty-message {
+    padding: 0.75rem 0.5rem;
+    color: #323130;
+    background: transparent;
   }
 
   .p-input-filled .p-dropdown {
diff --git a/src/assets/components/themes/lara-dark-blue/theme.css b/src/assets/components/themes/lara-dark-blue/theme.css
index 5082b5a7908..13851347683 100644
--- a/src/assets/components/themes/lara-dark-blue/theme.css
+++ b/src/assets/components/themes/lara-dark-blue/theme.css
@@ -951,7 +951,7 @@
   .p-dropdown .p-dropdown-label.p-placeholder {
     color: rgba(255, 255, 255, 0.6);
   }
-  .p-dropdown .p-dropdown-label:enabled:focus {
+  .p-dropdown .p-dropdown-label:focus, .p-dropdown .p-dropdown-label:enabled:focus {
     outline: 0 none;
     box-shadow: none;
   }
@@ -966,6 +966,9 @@
     color: rgba(255, 255, 255, 0.6);
     right: 3rem;
   }
+  .p-dropdown.p-invalid.p-component {
+    border-color: #FCA5A5;
+  }
 
   .p-dropdown-panel {
     background: #071426;
@@ -1007,14 +1010,16 @@
     color: rgba(255, 255, 255, 0.87);
     background: rgba(147, 197, 253, 0.16);
   }
-  .p-dropdown-panel .p-dropdown-items .p-dropdown-item:not(.p-highlight):not(.p-disabled):hover {
+  .p-dropdown-panel .p-dropdown-items .p-dropdown-item.p-highlight.p-focus {
+    background: rgba(147, 197, 253, 0.24);
+  }
+  .p-dropdown-panel .p-dropdown-items .p-dropdown-item:not(.p-highlight):not(.p-disabled).p-focus {
     color: rgba(255, 255, 255, 0.87);
-    background: rgba(255, 255, 255, 0.03);
+    background: #0b213f;
   }
-  .p-dropdown-panel .p-dropdown-items .p-dropdown-empty-message {
-    padding: 0.75rem 1.25rem;
+  .p-dropdown-panel .p-dropdown-items .p-dropdown-item:not(.p-highlight):not(.p-disabled):hover {
     color: rgba(255, 255, 255, 0.87);
-    background: transparent;
+    background: rgba(255, 255, 255, 0.03);
   }
   .p-dropdown-panel .p-dropdown-items .p-dropdown-item-group {
     margin: 0;
@@ -1023,9 +1028,10 @@
     background: #091a32;
     font-weight: 700;
   }
-
-  p-dropdown.ng-dirty.ng-invalid > .p-dropdown {
-    border-color: #FCA5A5;
+  .p-dropdown-panel .p-dropdown-items .p-dropdown-empty-message {
+    padding: 0.75rem 1.25rem;
+    color: rgba(255, 255, 255, 0.87);
+    background: transparent;
   }
 
   .p-input-filled .p-dropdown {
diff --git a/src/assets/components/themes/lara-dark-indigo/theme.css b/src/assets/components/themes/lara-dark-indigo/theme.css
index e2318fe2bd7..04e45f1494e 100644
--- a/src/assets/components/themes/lara-dark-indigo/theme.css
+++ b/src/assets/components/themes/lara-dark-indigo/theme.css
@@ -951,7 +951,7 @@
   .p-dropdown .p-dropdown-label.p-placeholder {
     color: rgba(255, 255, 255, 0.6);
   }
-  .p-dropdown .p-dropdown-label:enabled:focus {
+  .p-dropdown .p-dropdown-label:focus, .p-dropdown .p-dropdown-label:enabled:focus {
     outline: 0 none;
     box-shadow: none;
   }
@@ -966,6 +966,9 @@
     color: rgba(255, 255, 255, 0.6);
     right: 3rem;
   }
+  .p-dropdown.p-invalid.p-component {
+    border-color: #FCA5A5;
+  }
 
   .p-dropdown-panel {
     background: #071426;
@@ -1007,14 +1010,16 @@
     color: rgba(255, 255, 255, 0.87);
     background: rgba(165, 180, 252, 0.16);
   }
-  .p-dropdown-panel .p-dropdown-items .p-dropdown-item:not(.p-highlight):not(.p-disabled):hover {
+  .p-dropdown-panel .p-dropdown-items .p-dropdown-item.p-highlight.p-focus {
+    background: rgba(165, 180, 252, 0.24);
+  }
+  .p-dropdown-panel .p-dropdown-items .p-dropdown-item:not(.p-highlight):not(.p-disabled).p-focus {
     color: rgba(255, 255, 255, 0.87);
-    background: rgba(255, 255, 255, 0.03);
+    background: #0b213f;
   }
-  .p-dropdown-panel .p-dropdown-items .p-dropdown-empty-message {
-    padding: 0.75rem 1.25rem;
+  .p-dropdown-panel .p-dropdown-items .p-dropdown-item:not(.p-highlight):not(.p-disabled):hover {
     color: rgba(255, 255, 255, 0.87);
-    background: transparent;
+    background: rgba(255, 255, 255, 0.03);
   }
   .p-dropdown-panel .p-dropdown-items .p-dropdown-item-group {
     margin: 0;
@@ -1023,9 +1028,10 @@
     background: #091a32;
     font-weight: 700;
   }
-
-  p-dropdown.ng-dirty.ng-invalid > .p-dropdown {
-    border-color: #FCA5A5;
+  .p-dropdown-panel .p-dropdown-items .p-dropdown-empty-message {
+    padding: 0.75rem 1.25rem;
+    color: rgba(255, 255, 255, 0.87);
+    background: transparent;
   }
 
   .p-input-filled .p-dropdown {
diff --git a/src/assets/components/themes/lara-dark-purple/theme.css b/src/assets/components/themes/lara-dark-purple/theme.css
index b3e0a6f4a3b..7547c7e2302 100644
--- a/src/assets/components/themes/lara-dark-purple/theme.css
+++ b/src/assets/components/themes/lara-dark-purple/theme.css
@@ -951,7 +951,7 @@
   .p-dropdown .p-dropdown-label.p-placeholder {
     color: rgba(255, 255, 255, 0.6);
   }
-  .p-dropdown .p-dropdown-label:enabled:focus {
+  .p-dropdown .p-dropdown-label:focus, .p-dropdown .p-dropdown-label:enabled:focus {
     outline: 0 none;
     box-shadow: none;
   }
@@ -966,6 +966,9 @@
     color: rgba(255, 255, 255, 0.6);
     right: 3rem;
   }
+  .p-dropdown.p-invalid.p-component {
+    border-color: #FCA5A5;
+  }
 
   .p-dropdown-panel {
     background: #071426;
@@ -1007,14 +1010,16 @@
     color: rgba(255, 255, 255, 0.87);
     background: rgba(196, 181, 253, 0.16);
   }
-  .p-dropdown-panel .p-dropdown-items .p-dropdown-item:not(.p-highlight):not(.p-disabled):hover {
+  .p-dropdown-panel .p-dropdown-items .p-dropdown-item.p-highlight.p-focus {
+    background: rgba(196, 181, 253, 0.24);
+  }
+  .p-dropdown-panel .p-dropdown-items .p-dropdown-item:not(.p-highlight):not(.p-disabled).p-focus {
     color: rgba(255, 255, 255, 0.87);
-    background: rgba(255, 255, 255, 0.03);
+    background: #0b213f;
   }
-  .p-dropdown-panel .p-dropdown-items .p-dropdown-empty-message {
-    padding: 0.75rem 1.25rem;
+  .p-dropdown-panel .p-dropdown-items .p-dropdown-item:not(.p-highlight):not(.p-disabled):hover {
     color: rgba(255, 255, 255, 0.87);
-    background: transparent;
+    background: rgba(255, 255, 255, 0.03);
   }
   .p-dropdown-panel .p-dropdown-items .p-dropdown-item-group {
     margin: 0;
@@ -1023,9 +1028,10 @@
     background: #091a32;
     font-weight: 700;
   }
-
-  p-dropdown.ng-dirty.ng-invalid > .p-dropdown {
-    border-color: #FCA5A5;
+  .p-dropdown-panel .p-dropdown-items .p-dropdown-empty-message {
+    padding: 0.75rem 1.25rem;
+    color: rgba(255, 255, 255, 0.87);
+    background: transparent;
   }
 
   .p-input-filled .p-dropdown {
diff --git a/src/assets/components/themes/lara-dark-teal/theme.css b/src/assets/components/themes/lara-dark-teal/theme.css
index b551f56a794..a35a8d31a3f 100644
--- a/src/assets/components/themes/lara-dark-teal/theme.css
+++ b/src/assets/components/themes/lara-dark-teal/theme.css
@@ -951,7 +951,7 @@
   .p-dropdown .p-dropdown-label.p-placeholder {
     color: rgba(255, 255, 255, 0.6);
   }
-  .p-dropdown .p-dropdown-label:enabled:focus {
+  .p-dropdown .p-dropdown-label:focus, .p-dropdown .p-dropdown-label:enabled:focus {
     outline: 0 none;
     box-shadow: none;
   }
@@ -966,6 +966,9 @@
     color: rgba(255, 255, 255, 0.6);
     right: 3rem;
   }
+  .p-dropdown.p-invalid.p-component {
+    border-color: #FCA5A5;
+  }
 
   .p-dropdown-panel {
     background: #071426;
@@ -1007,14 +1010,16 @@
     color: rgba(255, 255, 255, 0.87);
     background: rgba(94, 234, 212, 0.16);
   }
-  .p-dropdown-panel .p-dropdown-items .p-dropdown-item:not(.p-highlight):not(.p-disabled):hover {
+  .p-dropdown-panel .p-dropdown-items .p-dropdown-item.p-highlight.p-focus {
+    background: rgba(94, 234, 212, 0.24);
+  }
+  .p-dropdown-panel .p-dropdown-items .p-dropdown-item:not(.p-highlight):not(.p-disabled).p-focus {
     color: rgba(255, 255, 255, 0.87);
-    background: rgba(255, 255, 255, 0.03);
+    background: #0b213f;
   }
-  .p-dropdown-panel .p-dropdown-items .p-dropdown-empty-message {
-    padding: 0.75rem 1.25rem;
+  .p-dropdown-panel .p-dropdown-items .p-dropdown-item:not(.p-highlight):not(.p-disabled):hover {
     color: rgba(255, 255, 255, 0.87);
-    background: transparent;
+    background: rgba(255, 255, 255, 0.03);
   }
   .p-dropdown-panel .p-dropdown-items .p-dropdown-item-group {
     margin: 0;
@@ -1023,9 +1028,10 @@
     background: #091a32;
     font-weight: 700;
   }
-
-  p-dropdown.ng-dirty.ng-invalid > .p-dropdown {
-    border-color: #FCA5A5;
+  .p-dropdown-panel .p-dropdown-items .p-dropdown-empty-message {
+    padding: 0.75rem 1.25rem;
+    color: rgba(255, 255, 255, 0.87);
+    background: transparent;
   }
 
   .p-input-filled .p-dropdown {
diff --git a/src/assets/components/themes/lara-light-blue/theme.css b/src/assets/components/themes/lara-light-blue/theme.css
index 7a8456fd0f7..e3f4568077e 100644
--- a/src/assets/components/themes/lara-light-blue/theme.css
+++ b/src/assets/components/themes/lara-light-blue/theme.css
@@ -951,7 +951,7 @@
   .p-dropdown .p-dropdown-label.p-placeholder {
     color: #6c757d;
   }
-  .p-dropdown .p-dropdown-label:enabled:focus {
+  .p-dropdown .p-dropdown-label:focus, .p-dropdown .p-dropdown-label:enabled:focus {
     outline: 0 none;
     box-shadow: none;
   }
@@ -966,6 +966,9 @@
     color: #6c757d;
     right: 3rem;
   }
+  .p-dropdown.p-invalid.p-component {
+    border-color: #e24c4c;
+  }
 
   .p-dropdown-panel {
     background: #ffffff;
@@ -1007,14 +1010,16 @@
     color: #1D4ED8;
     background: #EFF6FF;
   }
-  .p-dropdown-panel .p-dropdown-items .p-dropdown-item:not(.p-highlight):not(.p-disabled):hover {
+  .p-dropdown-panel .p-dropdown-items .p-dropdown-item.p-highlight.p-focus {
+    background: rgba(59, 130, 246, 0.24);
+  }
+  .p-dropdown-panel .p-dropdown-items .p-dropdown-item:not(.p-highlight):not(.p-disabled).p-focus {
     color: #495057;
-    background: #e9ecef;
+    background: #dee2e6;
   }
-  .p-dropdown-panel .p-dropdown-items .p-dropdown-empty-message {
-    padding: 0.75rem 1.25rem;
+  .p-dropdown-panel .p-dropdown-items .p-dropdown-item:not(.p-highlight):not(.p-disabled):hover {
     color: #495057;
-    background: transparent;
+    background: #e9ecef;
   }
   .p-dropdown-panel .p-dropdown-items .p-dropdown-item-group {
     margin: 0;
@@ -1023,9 +1028,10 @@
     background: #ffffff;
     font-weight: 700;
   }
-
-  p-dropdown.ng-dirty.ng-invalid > .p-dropdown {
-    border-color: #e24c4c;
+  .p-dropdown-panel .p-dropdown-items .p-dropdown-empty-message {
+    padding: 0.75rem 1.25rem;
+    color: #495057;
+    background: transparent;
   }
 
   .p-input-filled .p-dropdown {
diff --git a/src/assets/components/themes/lara-light-indigo/theme.css b/src/assets/components/themes/lara-light-indigo/theme.css
index 200ec77841c..612b4d1e44d 100644
--- a/src/assets/components/themes/lara-light-indigo/theme.css
+++ b/src/assets/components/themes/lara-light-indigo/theme.css
@@ -951,7 +951,7 @@
   .p-dropdown .p-dropdown-label.p-placeholder {
     color: #6c757d;
   }
-  .p-dropdown .p-dropdown-label:enabled:focus {
+  .p-dropdown .p-dropdown-label:focus, .p-dropdown .p-dropdown-label:enabled:focus {
     outline: 0 none;
     box-shadow: none;
   }
@@ -966,6 +966,9 @@
     color: #6c757d;
     right: 3rem;
   }
+  .p-dropdown.p-invalid.p-component {
+    border-color: #e24c4c;
+  }
 
   .p-dropdown-panel {
     background: #ffffff;
@@ -1007,14 +1010,16 @@
     color: #4338CA;
     background: #EEF2FF;
   }
-  .p-dropdown-panel .p-dropdown-items .p-dropdown-item:not(.p-highlight):not(.p-disabled):hover {
+  .p-dropdown-panel .p-dropdown-items .p-dropdown-item.p-highlight.p-focus {
+    background: #E0E7FF;
+  }
+  .p-dropdown-panel .p-dropdown-items .p-dropdown-item:not(.p-highlight):not(.p-disabled).p-focus {
     color: #495057;
-    background: #e9ecef;
+    background: #dee2e6;
   }
-  .p-dropdown-panel .p-dropdown-items .p-dropdown-empty-message {
-    padding: 0.75rem 1.25rem;
+  .p-dropdown-panel .p-dropdown-items .p-dropdown-item:not(.p-highlight):not(.p-disabled):hover {
     color: #495057;
-    background: transparent;
+    background: #e9ecef;
   }
   .p-dropdown-panel .p-dropdown-items .p-dropdown-item-group {
     margin: 0;
@@ -1023,9 +1028,10 @@
     background: #ffffff;
     font-weight: 700;
   }
-
-  p-dropdown.ng-dirty.ng-invalid > .p-dropdown {
-    border-color: #e24c4c;
+  .p-dropdown-panel .p-dropdown-items .p-dropdown-empty-message {
+    padding: 0.75rem 1.25rem;
+    color: #495057;
+    background: transparent;
   }
 
   .p-input-filled .p-dropdown {
diff --git a/src/assets/components/themes/lara-light-purple/theme.css b/src/assets/components/themes/lara-light-purple/theme.css
index 8d4440b5d04..548fe361622 100644
--- a/src/assets/components/themes/lara-light-purple/theme.css
+++ b/src/assets/components/themes/lara-light-purple/theme.css
@@ -951,7 +951,7 @@
   .p-dropdown .p-dropdown-label.p-placeholder {
     color: #6c757d;
   }
-  .p-dropdown .p-dropdown-label:enabled:focus {
+  .p-dropdown .p-dropdown-label:focus, .p-dropdown .p-dropdown-label:enabled:focus {
     outline: 0 none;
     box-shadow: none;
   }
@@ -966,6 +966,9 @@
     color: #6c757d;
     right: 3rem;
   }
+  .p-dropdown.p-invalid.p-component {
+    border-color: #e24c4c;
+  }
 
   .p-dropdown-panel {
     background: #ffffff;
@@ -1007,14 +1010,16 @@
     color: #6D28D9;
     background: #F5F3FF;
   }
-  .p-dropdown-panel .p-dropdown-items .p-dropdown-item:not(.p-highlight):not(.p-disabled):hover {
+  .p-dropdown-panel .p-dropdown-items .p-dropdown-item.p-highlight.p-focus {
+    background: rgba(139, 92, 246, 0.24);
+  }
+  .p-dropdown-panel .p-dropdown-items .p-dropdown-item:not(.p-highlight):not(.p-disabled).p-focus {
     color: #495057;
-    background: #e9ecef;
+    background: #dee2e6;
   }
-  .p-dropdown-panel .p-dropdown-items .p-dropdown-empty-message {
-    padding: 0.75rem 1.25rem;
+  .p-dropdown-panel .p-dropdown-items .p-dropdown-item:not(.p-highlight):not(.p-disabled):hover {
     color: #495057;
-    background: transparent;
+    background: #e9ecef;
   }
   .p-dropdown-panel .p-dropdown-items .p-dropdown-item-group {
     margin: 0;
@@ -1023,9 +1028,10 @@
     background: #ffffff;
     font-weight: 700;
   }
-
-  p-dropdown.ng-dirty.ng-invalid > .p-dropdown {
-    border-color: #e24c4c;
+  .p-dropdown-panel .p-dropdown-items .p-dropdown-empty-message {
+    padding: 0.75rem 1.25rem;
+    color: #495057;
+    background: transparent;
   }
 
   .p-input-filled .p-dropdown {
diff --git a/src/assets/components/themes/lara-light-teal/theme.css b/src/assets/components/themes/lara-light-teal/theme.css
index 5326255edac..e1447b166c9 100644
--- a/src/assets/components/themes/lara-light-teal/theme.css
+++ b/src/assets/components/themes/lara-light-teal/theme.css
@@ -951,7 +951,7 @@
   .p-dropdown .p-dropdown-label.p-placeholder {
     color: #6c757d;
   }
-  .p-dropdown .p-dropdown-label:enabled:focus {
+  .p-dropdown .p-dropdown-label:focus, .p-dropdown .p-dropdown-label:enabled:focus {
     outline: 0 none;
     box-shadow: none;
   }
@@ -966,6 +966,9 @@
     color: #6c757d;
     right: 3rem;
   }
+  .p-dropdown.p-invalid.p-component {
+    border-color: #e24c4c;
+  }
 
   .p-dropdown-panel {
     background: #ffffff;
@@ -1007,14 +1010,16 @@
     color: #0F766E;
     background: #F0FDFA;
   }
-  .p-dropdown-panel .p-dropdown-items .p-dropdown-item:not(.p-highlight):not(.p-disabled):hover {
+  .p-dropdown-panel .p-dropdown-items .p-dropdown-item.p-highlight.p-focus {
+    background: rgba(20, 184, 166, 0.24);
+  }
+  .p-dropdown-panel .p-dropdown-items .p-dropdown-item:not(.p-highlight):not(.p-disabled).p-focus {
     color: #495057;
-    background: #e9ecef;
+    background: #dee2e6;
   }
-  .p-dropdown-panel .p-dropdown-items .p-dropdown-empty-message {
-    padding: 0.75rem 1.25rem;
+  .p-dropdown-panel .p-dropdown-items .p-dropdown-item:not(.p-highlight):not(.p-disabled):hover {
     color: #495057;
-    background: transparent;
+    background: #e9ecef;
   }
   .p-dropdown-panel .p-dropdown-items .p-dropdown-item-group {
     margin: 0;
@@ -1023,9 +1028,10 @@
     background: #ffffff;
     font-weight: 700;
   }
-
-  p-dropdown.ng-dirty.ng-invalid > .p-dropdown {
-    border-color: #e24c4c;
+  .p-dropdown-panel .p-dropdown-items .p-dropdown-empty-message {
+    padding: 0.75rem 1.25rem;
+    color: #495057;
+    background: transparent;
   }
 
   .p-input-filled .p-dropdown {
diff --git a/src/assets/components/themes/luna-amber/theme.css b/src/assets/components/themes/luna-amber/theme.css
index 315c66b2ab8..30a0d5abb08 100644
--- a/src/assets/components/themes/luna-amber/theme.css
+++ b/src/assets/components/themes/luna-amber/theme.css
@@ -936,7 +936,7 @@
   .p-dropdown .p-dropdown-label.p-placeholder {
     color: #9b9b9b;
   }
-  .p-dropdown .p-dropdown-label:enabled:focus {
+  .p-dropdown .p-dropdown-label:focus, .p-dropdown .p-dropdown-label:enabled:focus {
     outline: 0 none;
     box-shadow: none;
   }
@@ -951,6 +951,9 @@
     color: #888888;
     right: 2.357rem;
   }
+  .p-dropdown.p-invalid.p-component {
+    border-color: #e57373;
+  }
 
   .p-dropdown-panel {
     background: #323232;
@@ -992,14 +995,16 @@
     color: #212529;
     background: #FFE082;
   }
-  .p-dropdown-panel .p-dropdown-items .p-dropdown-item:not(.p-highlight):not(.p-disabled):hover {
+  .p-dropdown-panel .p-dropdown-items .p-dropdown-item.p-highlight.p-focus {
+    background: #ffe081;
+  }
+  .p-dropdown-panel .p-dropdown-items .p-dropdown-item:not(.p-highlight):not(.p-disabled).p-focus {
     color: #dedede;
-    background: #4c4c4c;
+    background: #3c3c3c;
   }
-  .p-dropdown-panel .p-dropdown-items .p-dropdown-empty-message {
-    padding: 0.429rem 0.857rem;
+  .p-dropdown-panel .p-dropdown-items .p-dropdown-item:not(.p-highlight):not(.p-disabled):hover {
     color: #dedede;
-    background: transparent;
+    background: #4c4c4c;
   }
   .p-dropdown-panel .p-dropdown-items .p-dropdown-item-group {
     margin: 0;
@@ -1008,9 +1013,10 @@
     background: #191919;
     font-weight: 700;
   }
-
-  p-dropdown.ng-dirty.ng-invalid > .p-dropdown {
-    border-color: #e57373;
+  .p-dropdown-panel .p-dropdown-items .p-dropdown-empty-message {
+    padding: 0.429rem 0.857rem;
+    color: #dedede;
+    background: transparent;
   }
 
   .p-input-filled .p-dropdown {
diff --git a/src/assets/components/themes/luna-blue/theme.css b/src/assets/components/themes/luna-blue/theme.css
index 630595d9918..837790ed480 100644
--- a/src/assets/components/themes/luna-blue/theme.css
+++ b/src/assets/components/themes/luna-blue/theme.css
@@ -936,7 +936,7 @@
   .p-dropdown .p-dropdown-label.p-placeholder {
     color: #9b9b9b;
   }
-  .p-dropdown .p-dropdown-label:enabled:focus {
+  .p-dropdown .p-dropdown-label:focus, .p-dropdown .p-dropdown-label:enabled:focus {
     outline: 0 none;
     box-shadow: none;
   }
@@ -951,6 +951,9 @@
     color: #888888;
     right: 2.357rem;
   }
+  .p-dropdown.p-invalid.p-component {
+    border-color: #e57373;
+  }
 
   .p-dropdown-panel {
     background: #323232;
@@ -992,14 +995,16 @@
     color: #212529;
     background: #81D4FA;
   }
-  .p-dropdown-panel .p-dropdown-items .p-dropdown-item:not(.p-highlight):not(.p-disabled):hover {
+  .p-dropdown-panel .p-dropdown-items .p-dropdown-item.p-highlight.p-focus {
+    background: #81d4fa;
+  }
+  .p-dropdown-panel .p-dropdown-items .p-dropdown-item:not(.p-highlight):not(.p-disabled).p-focus {
     color: #dedede;
-    background: #4c4c4c;
+    background: #3c3c3c;
   }
-  .p-dropdown-panel .p-dropdown-items .p-dropdown-empty-message {
-    padding: 0.429rem 0.857rem;
+  .p-dropdown-panel .p-dropdown-items .p-dropdown-item:not(.p-highlight):not(.p-disabled):hover {
     color: #dedede;
-    background: transparent;
+    background: #4c4c4c;
   }
   .p-dropdown-panel .p-dropdown-items .p-dropdown-item-group {
     margin: 0;
@@ -1008,9 +1013,10 @@
     background: #191919;
     font-weight: 700;
   }
-
-  p-dropdown.ng-dirty.ng-invalid > .p-dropdown {
-    border-color: #e57373;
+  .p-dropdown-panel .p-dropdown-items .p-dropdown-empty-message {
+    padding: 0.429rem 0.857rem;
+    color: #dedede;
+    background: transparent;
   }
 
   .p-input-filled .p-dropdown {
diff --git a/src/assets/components/themes/luna-green/theme.css b/src/assets/components/themes/luna-green/theme.css
index c130c9c76fd..c815b5d08a7 100644
--- a/src/assets/components/themes/luna-green/theme.css
+++ b/src/assets/components/themes/luna-green/theme.css
@@ -936,7 +936,7 @@
   .p-dropdown .p-dropdown-label.p-placeholder {
     color: #9b9b9b;
   }
-  .p-dropdown .p-dropdown-label:enabled:focus {
+  .p-dropdown .p-dropdown-label:focus, .p-dropdown .p-dropdown-label:enabled:focus {
     outline: 0 none;
     box-shadow: none;
   }
@@ -951,6 +951,9 @@
     color: #888888;
     right: 2.357rem;
   }
+  .p-dropdown.p-invalid.p-component {
+    border-color: #e57373;
+  }
 
   .p-dropdown-panel {
     background: #323232;
@@ -992,14 +995,16 @@
     color: #212529;
     background: #C5E1A5;
   }
-  .p-dropdown-panel .p-dropdown-items .p-dropdown-item:not(.p-highlight):not(.p-disabled):hover {
+  .p-dropdown-panel .p-dropdown-items .p-dropdown-item.p-highlight.p-focus {
+    background: #c5e1a5;
+  }
+  .p-dropdown-panel .p-dropdown-items .p-dropdown-item:not(.p-highlight):not(.p-disabled).p-focus {
     color: #dedede;
-    background: #4c4c4c;
+    background: #3c3c3c;
   }
-  .p-dropdown-panel .p-dropdown-items .p-dropdown-empty-message {
-    padding: 0.429rem 0.857rem;
+  .p-dropdown-panel .p-dropdown-items .p-dropdown-item:not(.p-highlight):not(.p-disabled):hover {
     color: #dedede;
-    background: transparent;
+    background: #4c4c4c;
   }
   .p-dropdown-panel .p-dropdown-items .p-dropdown-item-group {
     margin: 0;
@@ -1008,9 +1013,10 @@
     background: #191919;
     font-weight: 700;
   }
-
-  p-dropdown.ng-dirty.ng-invalid > .p-dropdown {
-    border-color: #e57373;
+  .p-dropdown-panel .p-dropdown-items .p-dropdown-empty-message {
+    padding: 0.429rem 0.857rem;
+    color: #dedede;
+    background: transparent;
   }
 
   .p-input-filled .p-dropdown {
diff --git a/src/assets/components/themes/luna-pink/theme.css b/src/assets/components/themes/luna-pink/theme.css
index ce4841fec39..776420152df 100644
--- a/src/assets/components/themes/luna-pink/theme.css
+++ b/src/assets/components/themes/luna-pink/theme.css
@@ -936,7 +936,7 @@
   .p-dropdown .p-dropdown-label.p-placeholder {
     color: #9b9b9b;
   }
-  .p-dropdown .p-dropdown-label:enabled:focus {
+  .p-dropdown .p-dropdown-label:focus, .p-dropdown .p-dropdown-label:enabled:focus {
     outline: 0 none;
     box-shadow: none;
   }
@@ -951,6 +951,9 @@
     color: #888888;
     right: 2.357rem;
   }
+  .p-dropdown.p-invalid.p-component {
+    border-color: #e57373;
+  }
 
   .p-dropdown-panel {
     background: #323232;
@@ -992,14 +995,16 @@
     color: #212529;
     background: #F48FB1;
   }
-  .p-dropdown-panel .p-dropdown-items .p-dropdown-item:not(.p-highlight):not(.p-disabled):hover {
+  .p-dropdown-panel .p-dropdown-items .p-dropdown-item.p-highlight.p-focus {
+    background: #f48fb1;
+  }
+  .p-dropdown-panel .p-dropdown-items .p-dropdown-item:not(.p-highlight):not(.p-disabled).p-focus {
     color: #dedede;
-    background: #4c4c4c;
+    background: #3c3c3c;
   }
-  .p-dropdown-panel .p-dropdown-items .p-dropdown-empty-message {
-    padding: 0.429rem 0.857rem;
+  .p-dropdown-panel .p-dropdown-items .p-dropdown-item:not(.p-highlight):not(.p-disabled):hover {
     color: #dedede;
-    background: transparent;
+    background: #4c4c4c;
   }
   .p-dropdown-panel .p-dropdown-items .p-dropdown-item-group {
     margin: 0;
@@ -1008,9 +1013,10 @@
     background: #191919;
     font-weight: 700;
   }
-
-  p-dropdown.ng-dirty.ng-invalid > .p-dropdown {
-    border-color: #e57373;
+  .p-dropdown-panel .p-dropdown-items .p-dropdown-empty-message {
+    padding: 0.429rem 0.857rem;
+    color: #dedede;
+    background: transparent;
   }
 
   .p-input-filled .p-dropdown {
diff --git a/src/assets/components/themes/md-dark-deeppurple/theme.css b/src/assets/components/themes/md-dark-deeppurple/theme.css
index 83f3e23ccb0..09c72f19c6f 100644
--- a/src/assets/components/themes/md-dark-deeppurple/theme.css
+++ b/src/assets/components/themes/md-dark-deeppurple/theme.css
@@ -956,7 +956,7 @@
   .p-dropdown .p-dropdown-label.p-placeholder {
     color: rgba(255, 255, 255, 0.6);
   }
-  .p-dropdown .p-dropdown-label:enabled:focus {
+  .p-dropdown .p-dropdown-label:focus, .p-dropdown .p-dropdown-label:enabled:focus {
     outline: 0 none;
     box-shadow: none;
   }
@@ -971,6 +971,9 @@
     color: rgba(255, 255, 255, 0.6);
     right: 2.357rem;
   }
+  .p-dropdown.p-invalid.p-component {
+    border-color: #f44435;
+  }
 
   .p-dropdown-panel {
     background: #2b2b2b;
@@ -1012,14 +1015,16 @@
     color: #CE93D8;
     background: rgba(206, 147, 216, 0.16);
   }
-  .p-dropdown-panel .p-dropdown-items .p-dropdown-item:not(.p-highlight):not(.p-disabled):hover {
+  .p-dropdown-panel .p-dropdown-items .p-dropdown-item.p-highlight.p-focus {
+    background: rgba(206, 147, 216, 0.24);
+  }
+  .p-dropdown-panel .p-dropdown-items .p-dropdown-item:not(.p-highlight):not(.p-disabled).p-focus {
     color: rgba(255, 255, 255, 0.87);
-    background: rgba(255, 255, 255, 0.04);
+    background: rgba(255, 255, 255, 0.12);
   }
-  .p-dropdown-panel .p-dropdown-items .p-dropdown-empty-message {
-    padding: 1rem 1rem;
+  .p-dropdown-panel .p-dropdown-items .p-dropdown-item:not(.p-highlight):not(.p-disabled):hover {
     color: rgba(255, 255, 255, 0.87);
-    background: transparent;
+    background: rgba(255, 255, 255, 0.04);
   }
   .p-dropdown-panel .p-dropdown-items .p-dropdown-item-group {
     margin: 0;
@@ -1028,9 +1033,10 @@
     background: transparent;
     font-weight: 400;
   }
-
-  p-dropdown.ng-dirty.ng-invalid > .p-dropdown {
-    border-color: #f44435;
+  .p-dropdown-panel .p-dropdown-items .p-dropdown-empty-message {
+    padding: 1rem 1rem;
+    color: rgba(255, 255, 255, 0.87);
+    background: transparent;
   }
 
   .p-input-filled .p-dropdown {
diff --git a/src/assets/components/themes/md-dark-indigo/theme.css b/src/assets/components/themes/md-dark-indigo/theme.css
index 5faa1ed0edf..f52f98d1c60 100644
--- a/src/assets/components/themes/md-dark-indigo/theme.css
+++ b/src/assets/components/themes/md-dark-indigo/theme.css
@@ -956,7 +956,7 @@
   .p-dropdown .p-dropdown-label.p-placeholder {
     color: rgba(255, 255, 255, 0.6);
   }
-  .p-dropdown .p-dropdown-label:enabled:focus {
+  .p-dropdown .p-dropdown-label:focus, .p-dropdown .p-dropdown-label:enabled:focus {
     outline: 0 none;
     box-shadow: none;
   }
@@ -971,6 +971,9 @@
     color: rgba(255, 255, 255, 0.6);
     right: 2.357rem;
   }
+  .p-dropdown.p-invalid.p-component {
+    border-color: #f44435;
+  }
 
   .p-dropdown-panel {
     background: #2b2b2b;
@@ -1012,14 +1015,16 @@
     color: #9FA8DA;
     background: rgba(159, 168, 218, 0.16);
   }
-  .p-dropdown-panel .p-dropdown-items .p-dropdown-item:not(.p-highlight):not(.p-disabled):hover {
+  .p-dropdown-panel .p-dropdown-items .p-dropdown-item.p-highlight.p-focus {
+    background: rgba(159, 168, 218, 0.24);
+  }
+  .p-dropdown-panel .p-dropdown-items .p-dropdown-item:not(.p-highlight):not(.p-disabled).p-focus {
     color: rgba(255, 255, 255, 0.87);
-    background: rgba(255, 255, 255, 0.04);
+    background: rgba(255, 255, 255, 0.12);
   }
-  .p-dropdown-panel .p-dropdown-items .p-dropdown-empty-message {
-    padding: 1rem 1rem;
+  .p-dropdown-panel .p-dropdown-items .p-dropdown-item:not(.p-highlight):not(.p-disabled):hover {
     color: rgba(255, 255, 255, 0.87);
-    background: transparent;
+    background: rgba(255, 255, 255, 0.04);
   }
   .p-dropdown-panel .p-dropdown-items .p-dropdown-item-group {
     margin: 0;
@@ -1028,9 +1033,10 @@
     background: transparent;
     font-weight: 400;
   }
-
-  p-dropdown.ng-dirty.ng-invalid > .p-dropdown {
-    border-color: #f44435;
+  .p-dropdown-panel .p-dropdown-items .p-dropdown-empty-message {
+    padding: 1rem 1rem;
+    color: rgba(255, 255, 255, 0.87);
+    background: transparent;
   }
 
   .p-input-filled .p-dropdown {
diff --git a/src/assets/components/themes/md-light-deeppurple/theme.css b/src/assets/components/themes/md-light-deeppurple/theme.css
index 3a65e565ba3..ec26cce3c2b 100644
--- a/src/assets/components/themes/md-light-deeppurple/theme.css
+++ b/src/assets/components/themes/md-light-deeppurple/theme.css
@@ -956,7 +956,7 @@
   .p-dropdown .p-dropdown-label.p-placeholder {
     color: rgba(0, 0, 0, 0.6);
   }
-  .p-dropdown .p-dropdown-label:enabled:focus {
+  .p-dropdown .p-dropdown-label:focus, .p-dropdown .p-dropdown-label:enabled:focus {
     outline: 0 none;
     box-shadow: none;
   }
@@ -971,6 +971,9 @@
     color: rgba(0, 0, 0, 0.6);
     right: 2.357rem;
   }
+  .p-dropdown.p-invalid.p-component {
+    border-color: #B00020;
+  }
 
   .p-dropdown-panel {
     background: #ffffff;
@@ -1012,14 +1015,16 @@
     color: #673AB7;
     background: rgba(103, 58, 183, 0.12);
   }
-  .p-dropdown-panel .p-dropdown-items .p-dropdown-item:not(.p-highlight):not(.p-disabled):hover {
+  .p-dropdown-panel .p-dropdown-items .p-dropdown-item.p-highlight.p-focus {
+    background: rgba(103, 58, 183, 0.24);
+  }
+  .p-dropdown-panel .p-dropdown-items .p-dropdown-item:not(.p-highlight):not(.p-disabled).p-focus {
     color: rgba(0, 0, 0, 0.87);
-    background: rgba(0, 0, 0, 0.04);
+    background: rgba(0, 0, 0, 0.12);
   }
-  .p-dropdown-panel .p-dropdown-items .p-dropdown-empty-message {
-    padding: 1rem 1rem;
+  .p-dropdown-panel .p-dropdown-items .p-dropdown-item:not(.p-highlight):not(.p-disabled):hover {
     color: rgba(0, 0, 0, 0.87);
-    background: transparent;
+    background: rgba(0, 0, 0, 0.04);
   }
   .p-dropdown-panel .p-dropdown-items .p-dropdown-item-group {
     margin: 0;
@@ -1028,9 +1033,10 @@
     background: #ffffff;
     font-weight: 400;
   }
-
-  p-dropdown.ng-dirty.ng-invalid > .p-dropdown {
-    border-color: #B00020;
+  .p-dropdown-panel .p-dropdown-items .p-dropdown-empty-message {
+    padding: 1rem 1rem;
+    color: rgba(0, 0, 0, 0.87);
+    background: transparent;
   }
 
   .p-input-filled .p-dropdown {
diff --git a/src/assets/components/themes/md-light-indigo/theme.css b/src/assets/components/themes/md-light-indigo/theme.css
index 7df1bfcff74..f6dcbf210d9 100644
--- a/src/assets/components/themes/md-light-indigo/theme.css
+++ b/src/assets/components/themes/md-light-indigo/theme.css
@@ -956,7 +956,7 @@
   .p-dropdown .p-dropdown-label.p-placeholder {
     color: rgba(0, 0, 0, 0.6);
   }
-  .p-dropdown .p-dropdown-label:enabled:focus {
+  .p-dropdown .p-dropdown-label:focus, .p-dropdown .p-dropdown-label:enabled:focus {
     outline: 0 none;
     box-shadow: none;
   }
@@ -971,6 +971,9 @@
     color: rgba(0, 0, 0, 0.6);
     right: 2.357rem;
   }
+  .p-dropdown.p-invalid.p-component {
+    border-color: #B00020;
+  }
 
   .p-dropdown-panel {
     background: #ffffff;
@@ -1012,14 +1015,16 @@
     color: #3F51B5;
     background: rgba(63, 81, 181, 0.12);
   }
-  .p-dropdown-panel .p-dropdown-items .p-dropdown-item:not(.p-highlight):not(.p-disabled):hover {
+  .p-dropdown-panel .p-dropdown-items .p-dropdown-item.p-highlight.p-focus {
+    background: rgba(63, 81, 181, 0.24);
+  }
+  .p-dropdown-panel .p-dropdown-items .p-dropdown-item:not(.p-highlight):not(.p-disabled).p-focus {
     color: rgba(0, 0, 0, 0.87);
-    background: rgba(0, 0, 0, 0.04);
+    background: rgba(0, 0, 0, 0.12);
   }
-  .p-dropdown-panel .p-dropdown-items .p-dropdown-empty-message {
-    padding: 1rem 1rem;
+  .p-dropdown-panel .p-dropdown-items .p-dropdown-item:not(.p-highlight):not(.p-disabled):hover {
     color: rgba(0, 0, 0, 0.87);
-    background: transparent;
+    background: rgba(0, 0, 0, 0.04);
   }
   .p-dropdown-panel .p-dropdown-items .p-dropdown-item-group {
     margin: 0;
@@ -1028,9 +1033,10 @@
     background: #ffffff;
     font-weight: 400;
   }
-
-  p-dropdown.ng-dirty.ng-invalid > .p-dropdown {
-    border-color: #B00020;
+  .p-dropdown-panel .p-dropdown-items .p-dropdown-empty-message {
+    padding: 1rem 1rem;
+    color: rgba(0, 0, 0, 0.87);
+    background: transparent;
   }
 
   .p-input-filled .p-dropdown {
diff --git a/src/assets/components/themes/mdc-dark-deeppurple/theme.css b/src/assets/components/themes/mdc-dark-deeppurple/theme.css
index 39bf74d9349..8d4b4877798 100644
--- a/src/assets/components/themes/mdc-dark-deeppurple/theme.css
+++ b/src/assets/components/themes/mdc-dark-deeppurple/theme.css
@@ -956,7 +956,7 @@
   .p-dropdown .p-dropdown-label.p-placeholder {
     color: rgba(255, 255, 255, 0.6);
   }
-  .p-dropdown .p-dropdown-label:enabled:focus {
+  .p-dropdown .p-dropdown-label:focus, .p-dropdown .p-dropdown-label:enabled:focus {
     outline: 0 none;
     box-shadow: none;
   }
@@ -971,6 +971,9 @@
     color: rgba(255, 255, 255, 0.6);
     right: 2.75rem;
   }
+  .p-dropdown.p-invalid.p-component {
+    border-color: #f44435;
+  }
 
   .p-dropdown-panel {
     background: #2b2b2b;
@@ -1012,14 +1015,16 @@
     color: #CE93D8;
     background: rgba(206, 147, 216, 0.16);
   }
-  .p-dropdown-panel .p-dropdown-items .p-dropdown-item:not(.p-highlight):not(.p-disabled):hover {
+  .p-dropdown-panel .p-dropdown-items .p-dropdown-item.p-highlight.p-focus {
+    background: rgba(206, 147, 216, 0.24);
+  }
+  .p-dropdown-panel .p-dropdown-items .p-dropdown-item:not(.p-highlight):not(.p-disabled).p-focus {
     color: rgba(255, 255, 255, 0.87);
-    background: rgba(255, 255, 255, 0.04);
+    background: rgba(255, 255, 255, 0.12);
   }
-  .p-dropdown-panel .p-dropdown-items .p-dropdown-empty-message {
-    padding: 0.75rem 0.75rem;
+  .p-dropdown-panel .p-dropdown-items .p-dropdown-item:not(.p-highlight):not(.p-disabled):hover {
     color: rgba(255, 255, 255, 0.87);
-    background: transparent;
+    background: rgba(255, 255, 255, 0.04);
   }
   .p-dropdown-panel .p-dropdown-items .p-dropdown-item-group {
     margin: 0;
@@ -1028,9 +1033,10 @@
     background: transparent;
     font-weight: 400;
   }
-
-  p-dropdown.ng-dirty.ng-invalid > .p-dropdown {
-    border-color: #f44435;
+  .p-dropdown-panel .p-dropdown-items .p-dropdown-empty-message {
+    padding: 0.75rem 0.75rem;
+    color: rgba(255, 255, 255, 0.87);
+    background: transparent;
   }
 
   .p-input-filled .p-dropdown {
diff --git a/src/assets/components/themes/mdc-dark-indigo/theme.css b/src/assets/components/themes/mdc-dark-indigo/theme.css
index 8eb87e31863..15c2455d769 100644
--- a/src/assets/components/themes/mdc-dark-indigo/theme.css
+++ b/src/assets/components/themes/mdc-dark-indigo/theme.css
@@ -956,7 +956,7 @@
   .p-dropdown .p-dropdown-label.p-placeholder {
     color: rgba(255, 255, 255, 0.6);
   }
-  .p-dropdown .p-dropdown-label:enabled:focus {
+  .p-dropdown .p-dropdown-label:focus, .p-dropdown .p-dropdown-label:enabled:focus {
     outline: 0 none;
     box-shadow: none;
   }
@@ -971,6 +971,9 @@
     color: rgba(255, 255, 255, 0.6);
     right: 2.75rem;
   }
+  .p-dropdown.p-invalid.p-component {
+    border-color: #f44435;
+  }
 
   .p-dropdown-panel {
     background: #2b2b2b;
@@ -1012,14 +1015,16 @@
     color: #9FA8DA;
     background: rgba(159, 168, 218, 0.16);
   }
-  .p-dropdown-panel .p-dropdown-items .p-dropdown-item:not(.p-highlight):not(.p-disabled):hover {
+  .p-dropdown-panel .p-dropdown-items .p-dropdown-item.p-highlight.p-focus {
+    background: rgba(159, 168, 218, 0.24);
+  }
+  .p-dropdown-panel .p-dropdown-items .p-dropdown-item:not(.p-highlight):not(.p-disabled).p-focus {
     color: rgba(255, 255, 255, 0.87);
-    background: rgba(255, 255, 255, 0.04);
+    background: rgba(255, 255, 255, 0.12);
   }
-  .p-dropdown-panel .p-dropdown-items .p-dropdown-empty-message {
-    padding: 0.75rem 0.75rem;
+  .p-dropdown-panel .p-dropdown-items .p-dropdown-item:not(.p-highlight):not(.p-disabled):hover {
     color: rgba(255, 255, 255, 0.87);
-    background: transparent;
+    background: rgba(255, 255, 255, 0.04);
   }
   .p-dropdown-panel .p-dropdown-items .p-dropdown-item-group {
     margin: 0;
@@ -1028,9 +1033,10 @@
     background: transparent;
     font-weight: 400;
   }
-
-  p-dropdown.ng-dirty.ng-invalid > .p-dropdown {
-    border-color: #f44435;
+  .p-dropdown-panel .p-dropdown-items .p-dropdown-empty-message {
+    padding: 0.75rem 0.75rem;
+    color: rgba(255, 255, 255, 0.87);
+    background: transparent;
   }
 
   .p-input-filled .p-dropdown {
diff --git a/src/assets/components/themes/mdc-light-deeppurple/theme.css b/src/assets/components/themes/mdc-light-deeppurple/theme.css
index 91dcff4ea25..3b28b138631 100644
--- a/src/assets/components/themes/mdc-light-deeppurple/theme.css
+++ b/src/assets/components/themes/mdc-light-deeppurple/theme.css
@@ -956,7 +956,7 @@
   .p-dropdown .p-dropdown-label.p-placeholder {
     color: rgba(0, 0, 0, 0.6);
   }
-  .p-dropdown .p-dropdown-label:enabled:focus {
+  .p-dropdown .p-dropdown-label:focus, .p-dropdown .p-dropdown-label:enabled:focus {
     outline: 0 none;
     box-shadow: none;
   }
@@ -971,6 +971,9 @@
     color: rgba(0, 0, 0, 0.6);
     right: 2.75rem;
   }
+  .p-dropdown.p-invalid.p-component {
+    border-color: #B00020;
+  }
 
   .p-dropdown-panel {
     background: #ffffff;
@@ -1012,14 +1015,16 @@
     color: #673AB7;
     background: rgba(103, 58, 183, 0.12);
   }
-  .p-dropdown-panel .p-dropdown-items .p-dropdown-item:not(.p-highlight):not(.p-disabled):hover {
+  .p-dropdown-panel .p-dropdown-items .p-dropdown-item.p-highlight.p-focus {
+    background: rgba(103, 58, 183, 0.24);
+  }
+  .p-dropdown-panel .p-dropdown-items .p-dropdown-item:not(.p-highlight):not(.p-disabled).p-focus {
     color: rgba(0, 0, 0, 0.87);
-    background: rgba(0, 0, 0, 0.04);
+    background: rgba(0, 0, 0, 0.12);
   }
-  .p-dropdown-panel .p-dropdown-items .p-dropdown-empty-message {
-    padding: 0.75rem 0.75rem;
+  .p-dropdown-panel .p-dropdown-items .p-dropdown-item:not(.p-highlight):not(.p-disabled):hover {
     color: rgba(0, 0, 0, 0.87);
-    background: transparent;
+    background: rgba(0, 0, 0, 0.04);
   }
   .p-dropdown-panel .p-dropdown-items .p-dropdown-item-group {
     margin: 0;
@@ -1028,9 +1033,10 @@
     background: #ffffff;
     font-weight: 400;
   }
-
-  p-dropdown.ng-dirty.ng-invalid > .p-dropdown {
-    border-color: #B00020;
+  .p-dropdown-panel .p-dropdown-items .p-dropdown-empty-message {
+    padding: 0.75rem 0.75rem;
+    color: rgba(0, 0, 0, 0.87);
+    background: transparent;
   }
 
   .p-input-filled .p-dropdown {
diff --git a/src/assets/components/themes/mdc-light-indigo/theme.css b/src/assets/components/themes/mdc-light-indigo/theme.css
index 6c4d2426fed..e8a8d8b3e9b 100644
--- a/src/assets/components/themes/mdc-light-indigo/theme.css
+++ b/src/assets/components/themes/mdc-light-indigo/theme.css
@@ -956,7 +956,7 @@
   .p-dropdown .p-dropdown-label.p-placeholder {
     color: rgba(0, 0, 0, 0.6);
   }
-  .p-dropdown .p-dropdown-label:enabled:focus {
+  .p-dropdown .p-dropdown-label:focus, .p-dropdown .p-dropdown-label:enabled:focus {
     outline: 0 none;
     box-shadow: none;
   }
@@ -971,6 +971,9 @@
     color: rgba(0, 0, 0, 0.6);
     right: 2.75rem;
   }
+  .p-dropdown.p-invalid.p-component {
+    border-color: #B00020;
+  }
 
   .p-dropdown-panel {
     background: #ffffff;
@@ -1012,14 +1015,16 @@
     color: #3F51B5;
     background: rgba(63, 81, 181, 0.12);
   }
-  .p-dropdown-panel .p-dropdown-items .p-dropdown-item:not(.p-highlight):not(.p-disabled):hover {
+  .p-dropdown-panel .p-dropdown-items .p-dropdown-item.p-highlight.p-focus {
+    background: rgba(63, 81, 181, 0.24);
+  }
+  .p-dropdown-panel .p-dropdown-items .p-dropdown-item:not(.p-highlight):not(.p-disabled).p-focus {
     color: rgba(0, 0, 0, 0.87);
-    background: rgba(0, 0, 0, 0.04);
+    background: rgba(0, 0, 0, 0.12);
   }
-  .p-dropdown-panel .p-dropdown-items .p-dropdown-empty-message {
-    padding: 0.75rem 0.75rem;
+  .p-dropdown-panel .p-dropdown-items .p-dropdown-item:not(.p-highlight):not(.p-disabled):hover {
     color: rgba(0, 0, 0, 0.87);
-    background: transparent;
+    background: rgba(0, 0, 0, 0.04);
   }
   .p-dropdown-panel .p-dropdown-items .p-dropdown-item-group {
     margin: 0;
@@ -1028,9 +1033,10 @@
     background: #ffffff;
     font-weight: 400;
   }
-
-  p-dropdown.ng-dirty.ng-invalid > .p-dropdown {
-    border-color: #B00020;
+  .p-dropdown-panel .p-dropdown-items .p-dropdown-empty-message {
+    padding: 0.75rem 0.75rem;
+    color: rgba(0, 0, 0, 0.87);
+    background: transparent;
   }
 
   .p-input-filled .p-dropdown {
diff --git a/src/assets/components/themes/mira/theme.css b/src/assets/components/themes/mira/theme.css
index a17b705c02d..0b9d550c400 100644
--- a/src/assets/components/themes/mira/theme.css
+++ b/src/assets/components/themes/mira/theme.css
@@ -960,7 +960,7 @@
   .p-dropdown .p-dropdown-label.p-placeholder {
     color: #4C566A;
   }
-  .p-dropdown .p-dropdown-label:enabled:focus {
+  .p-dropdown .p-dropdown-label:focus, .p-dropdown .p-dropdown-label:enabled:focus {
     outline: 0 none;
     box-shadow: none;
   }
@@ -975,6 +975,9 @@
     color: #81A1C1;
     right: 2.357rem;
   }
+  .p-dropdown.p-invalid.p-component {
+    border-color: #BF616A;
+  }
 
   .p-dropdown-panel {
     background: #ffffff;
@@ -1016,12 +1019,14 @@
     color: #2E3440;
     background: #D8DEE9;
   }
-  .p-dropdown-panel .p-dropdown-items .p-dropdown-item:not(.p-highlight):not(.p-disabled):hover {
+  .p-dropdown-panel .p-dropdown-items .p-dropdown-item.p-highlight.p-focus {
+    background: #bec8da;
+  }
+  .p-dropdown-panel .p-dropdown-items .p-dropdown-item:not(.p-highlight):not(.p-disabled).p-focus {
     color: #4C566A;
-    background: transparent;
+    background: #E5E9F0;
   }
-  .p-dropdown-panel .p-dropdown-items .p-dropdown-empty-message {
-    padding: 0.5rem 1rem;
+  .p-dropdown-panel .p-dropdown-items .p-dropdown-item:not(.p-highlight):not(.p-disabled):hover {
     color: #4C566A;
     background: transparent;
   }
@@ -1032,9 +1037,10 @@
     background: #ffffff;
     font-weight: 600;
   }
-
-  p-dropdown.ng-dirty.ng-invalid > .p-dropdown {
-    border-color: #BF616A;
+  .p-dropdown-panel .p-dropdown-items .p-dropdown-empty-message {
+    padding: 0.5rem 1rem;
+    color: #4C566A;
+    background: transparent;
   }
 
   .p-input-filled .p-dropdown {
diff --git a/src/assets/components/themes/nano/theme.css b/src/assets/components/themes/nano/theme.css
index 6c459150060..5a9e081573d 100644
--- a/src/assets/components/themes/nano/theme.css
+++ b/src/assets/components/themes/nano/theme.css
@@ -932,7 +932,7 @@
   .p-dropdown .p-dropdown-label.p-placeholder {
     color: #697077;
   }
-  .p-dropdown .p-dropdown-label:enabled:focus {
+  .p-dropdown .p-dropdown-label:focus, .p-dropdown .p-dropdown-label:enabled:focus {
     outline: 0 none;
     box-shadow: none;
   }
@@ -947,6 +947,9 @@
     color: #697077;
     right: 2.357rem;
   }
+  .p-dropdown.p-invalid.p-component {
+    border-color: #d8222f;
+  }
 
   .p-dropdown-panel {
     background: #ffffff;
@@ -988,14 +991,16 @@
     color: #ffffff;
     background: #44A1D9;
   }
-  .p-dropdown-panel .p-dropdown-items .p-dropdown-item:not(.p-highlight):not(.p-disabled):hover {
+  .p-dropdown-panel .p-dropdown-items .p-dropdown-item.p-highlight.p-focus {
+    background: #1174c0;
+  }
+  .p-dropdown-panel .p-dropdown-items .p-dropdown-item:not(.p-highlight):not(.p-disabled).p-focus {
     color: #343a3f;
-    background: #dde1e6;
+    background: #d2d6db;
   }
-  .p-dropdown-panel .p-dropdown-items .p-dropdown-empty-message {
-    padding: 0.25rem 0.5rem;
+  .p-dropdown-panel .p-dropdown-items .p-dropdown-item:not(.p-highlight):not(.p-disabled):hover {
     color: #343a3f;
-    background: transparent;
+    background: #dde1e6;
   }
   .p-dropdown-panel .p-dropdown-items .p-dropdown-item-group {
     margin: 0;
@@ -1004,9 +1009,10 @@
     background: #ffffff;
     font-weight: 600;
   }
-
-  p-dropdown.ng-dirty.ng-invalid > .p-dropdown {
-    border-color: #d8222f;
+  .p-dropdown-panel .p-dropdown-items .p-dropdown-empty-message {
+    padding: 0.25rem 0.5rem;
+    color: #343a3f;
+    background: transparent;
   }
 
   .p-input-filled .p-dropdown {
diff --git a/src/assets/components/themes/nova-accent/theme.css b/src/assets/components/themes/nova-accent/theme.css
index 84f65cc2118..adca066e390 100644
--- a/src/assets/components/themes/nova-accent/theme.css
+++ b/src/assets/components/themes/nova-accent/theme.css
@@ -932,7 +932,7 @@
   .p-dropdown .p-dropdown-label.p-placeholder {
     color: #666666;
   }
-  .p-dropdown .p-dropdown-label:enabled:focus {
+  .p-dropdown .p-dropdown-label:focus, .p-dropdown .p-dropdown-label:enabled:focus {
     outline: 0 none;
     box-shadow: none;
   }
@@ -947,6 +947,9 @@
     color: #848484;
     right: 2.357rem;
   }
+  .p-dropdown.p-invalid.p-component {
+    border-color: #a80000;
+  }
 
   .p-dropdown-panel {
     background: #ffffff;
@@ -988,14 +991,16 @@
     color: #ffffff;
     background: #e02365;
   }
-  .p-dropdown-panel .p-dropdown-items .p-dropdown-item:not(.p-highlight):not(.p-disabled):hover {
+  .p-dropdown-panel .p-dropdown-items .p-dropdown-item.p-highlight.p-focus {
+    background: #e02365;
+  }
+  .p-dropdown-panel .p-dropdown-items .p-dropdown-item:not(.p-highlight):not(.p-disabled).p-focus {
     color: #333333;
-    background: #eaeaea;
+    background: #d6d6d6;
   }
-  .p-dropdown-panel .p-dropdown-items .p-dropdown-empty-message {
-    padding: 0.429rem 0.857rem;
+  .p-dropdown-panel .p-dropdown-items .p-dropdown-item:not(.p-highlight):not(.p-disabled):hover {
     color: #333333;
-    background: transparent;
+    background: #eaeaea;
   }
   .p-dropdown-panel .p-dropdown-items .p-dropdown-item-group {
     margin: 0;
@@ -1004,9 +1009,10 @@
     background: #f4f4f4;
     font-weight: 700;
   }
-
-  p-dropdown.ng-dirty.ng-invalid > .p-dropdown {
-    border-color: #a80000;
+  .p-dropdown-panel .p-dropdown-items .p-dropdown-empty-message {
+    padding: 0.429rem 0.857rem;
+    color: #333333;
+    background: transparent;
   }
 
   .p-input-filled .p-dropdown {
diff --git a/src/assets/components/themes/nova-alt/theme.css b/src/assets/components/themes/nova-alt/theme.css
index 3bdfc910c99..b8d3d89760a 100644
--- a/src/assets/components/themes/nova-alt/theme.css
+++ b/src/assets/components/themes/nova-alt/theme.css
@@ -936,7 +936,7 @@
   .p-dropdown .p-dropdown-label.p-placeholder {
     color: #666666;
   }
-  .p-dropdown .p-dropdown-label:enabled:focus {
+  .p-dropdown .p-dropdown-label:focus, .p-dropdown .p-dropdown-label:enabled:focus {
     outline: 0 none;
     box-shadow: none;
   }
@@ -951,6 +951,9 @@
     color: #848484;
     right: 2.357rem;
   }
+  .p-dropdown.p-invalid.p-component {
+    border-color: #a80000;
+  }
 
   .p-dropdown-panel {
     background: #ffffff;
@@ -992,14 +995,16 @@
     color: #ffffff;
     background: #007ad9;
   }
-  .p-dropdown-panel .p-dropdown-items .p-dropdown-item:not(.p-highlight):not(.p-disabled):hover {
+  .p-dropdown-panel .p-dropdown-items .p-dropdown-item.p-highlight.p-focus {
+    background: #007ad9;
+  }
+  .p-dropdown-panel .p-dropdown-items .p-dropdown-item:not(.p-highlight):not(.p-disabled).p-focus {
     color: #333333;
-    background: #eaeaea;
+    background: #d6d6d6;
   }
-  .p-dropdown-panel .p-dropdown-items .p-dropdown-empty-message {
-    padding: 0.429rem 0.857rem;
+  .p-dropdown-panel .p-dropdown-items .p-dropdown-item:not(.p-highlight):not(.p-disabled):hover {
     color: #333333;
-    background: transparent;
+    background: #eaeaea;
   }
   .p-dropdown-panel .p-dropdown-items .p-dropdown-item-group {
     margin: 0;
@@ -1008,9 +1013,10 @@
     background: #f4f4f4;
     font-weight: 700;
   }
-
-  p-dropdown.ng-dirty.ng-invalid > .p-dropdown {
-    border-color: #a80000;
+  .p-dropdown-panel .p-dropdown-items .p-dropdown-empty-message {
+    padding: 0.429rem 0.857rem;
+    color: #333333;
+    background: transparent;
   }
 
   .p-input-filled .p-dropdown {
diff --git a/src/assets/components/themes/nova/theme.css b/src/assets/components/themes/nova/theme.css
index f7385190b4b..95d5acb09a8 100644
--- a/src/assets/components/themes/nova/theme.css
+++ b/src/assets/components/themes/nova/theme.css
@@ -936,7 +936,7 @@
   .p-dropdown .p-dropdown-label.p-placeholder {
     color: #666666;
   }
-  .p-dropdown .p-dropdown-label:enabled:focus {
+  .p-dropdown .p-dropdown-label:focus, .p-dropdown .p-dropdown-label:enabled:focus {
     outline: 0 none;
     box-shadow: none;
   }
@@ -951,6 +951,9 @@
     color: #848484;
     right: 2.357rem;
   }
+  .p-dropdown.p-invalid.p-component {
+    border-color: #a80000;
+  }
 
   .p-dropdown-panel {
     background: #ffffff;
@@ -992,14 +995,16 @@
     color: #ffffff;
     background: #007ad9;
   }
-  .p-dropdown-panel .p-dropdown-items .p-dropdown-item:not(.p-highlight):not(.p-disabled):hover {
+  .p-dropdown-panel .p-dropdown-items .p-dropdown-item.p-highlight.p-focus {
+    background: #007ad9;
+  }
+  .p-dropdown-panel .p-dropdown-items .p-dropdown-item:not(.p-highlight):not(.p-disabled).p-focus {
     color: #333333;
-    background: #eaeaea;
+    background: #d6d6d6;
   }
-  .p-dropdown-panel .p-dropdown-items .p-dropdown-empty-message {
-    padding: 0.429rem 0.857rem;
+  .p-dropdown-panel .p-dropdown-items .p-dropdown-item:not(.p-highlight):not(.p-disabled):hover {
     color: #333333;
-    background: transparent;
+    background: #eaeaea;
   }
   .p-dropdown-panel .p-dropdown-items .p-dropdown-item-group {
     margin: 0;
@@ -1008,9 +1013,10 @@
     background: #f4f4f4;
     font-weight: 700;
   }
-
-  p-dropdown.ng-dirty.ng-invalid > .p-dropdown {
-    border-color: #a80000;
+  .p-dropdown-panel .p-dropdown-items .p-dropdown-empty-message {
+    padding: 0.429rem 0.857rem;
+    color: #333333;
+    background: transparent;
   }
 
   .p-input-filled .p-dropdown {
diff --git a/src/assets/components/themes/rhea/theme.css b/src/assets/components/themes/rhea/theme.css
index 2c9d7da185b..1a6e73b6242 100644
--- a/src/assets/components/themes/rhea/theme.css
+++ b/src/assets/components/themes/rhea/theme.css
@@ -932,7 +932,7 @@
   .p-dropdown .p-dropdown-label.p-placeholder {
     color: #a6a6a6;
   }
-  .p-dropdown .p-dropdown-label:enabled:focus {
+  .p-dropdown .p-dropdown-label:focus, .p-dropdown .p-dropdown-label:enabled:focus {
     outline: 0 none;
     box-shadow: none;
   }
@@ -947,6 +947,9 @@
     color: #a6a6a6;
     right: 2.357rem;
   }
+  .p-dropdown.p-invalid.p-component {
+    border-color: #e7a3a3;
+  }
 
   .p-dropdown-panel {
     background: #ffffff;
@@ -988,14 +991,16 @@
     color: #385048;
     background: #AFD3C8;
   }
-  .p-dropdown-panel .p-dropdown-items .p-dropdown-item:not(.p-highlight):not(.p-disabled):hover {
+  .p-dropdown-panel .p-dropdown-items .p-dropdown-item.p-highlight.p-focus {
+    background: #aed3c7;
+  }
+  .p-dropdown-panel .p-dropdown-items .p-dropdown-item:not(.p-highlight):not(.p-disabled).p-focus {
     color: #666666;
-    background: #f4f4f4;
+    background: #e0e0e0;
   }
-  .p-dropdown-panel .p-dropdown-items .p-dropdown-empty-message {
-    padding: 0.429rem 0.857rem;
+  .p-dropdown-panel .p-dropdown-items .p-dropdown-item:not(.p-highlight):not(.p-disabled):hover {
     color: #666666;
-    background: transparent;
+    background: #f4f4f4;
   }
   .p-dropdown-panel .p-dropdown-items .p-dropdown-item-group {
     margin: 0;
@@ -1004,9 +1009,10 @@
     background: #f4f4f4;
     font-weight: 700;
   }
-
-  p-dropdown.ng-dirty.ng-invalid > .p-dropdown {
-    border-color: #e7a3a3;
+  .p-dropdown-panel .p-dropdown-items .p-dropdown-empty-message {
+    padding: 0.429rem 0.857rem;
+    color: #666666;
+    background: transparent;
   }
 
   .p-input-filled .p-dropdown {
diff --git a/src/assets/components/themes/saga-blue/theme.css b/src/assets/components/themes/saga-blue/theme.css
index f5e980e9f50..0ac3aa0713a 100644
--- a/src/assets/components/themes/saga-blue/theme.css
+++ b/src/assets/components/themes/saga-blue/theme.css
@@ -932,7 +932,7 @@
   .p-dropdown .p-dropdown-label.p-placeholder {
     color: #6c757d;
   }
-  .p-dropdown .p-dropdown-label:enabled:focus {
+  .p-dropdown .p-dropdown-label:focus, .p-dropdown .p-dropdown-label:enabled:focus {
     outline: 0 none;
     box-shadow: none;
   }
@@ -947,6 +947,9 @@
     color: #6c757d;
     right: 2.357rem;
   }
+  .p-dropdown.p-invalid.p-component {
+    border-color: #f44336;
+  }
 
   .p-dropdown-panel {
     background: #ffffff;
@@ -988,14 +991,16 @@
     color: #495057;
     background: #E3F2FD;
   }
-  .p-dropdown-panel .p-dropdown-items .p-dropdown-item:not(.p-highlight):not(.p-disabled):hover {
+  .p-dropdown-panel .p-dropdown-items .p-dropdown-item.p-highlight.p-focus {
+    background: rgba(33, 150, 243, 0.24);
+  }
+  .p-dropdown-panel .p-dropdown-items .p-dropdown-item:not(.p-highlight):not(.p-disabled).p-focus {
     color: #495057;
-    background: #e9ecef;
+    background: #dee2e6;
   }
-  .p-dropdown-panel .p-dropdown-items .p-dropdown-empty-message {
-    padding: 0.5rem 1rem;
+  .p-dropdown-panel .p-dropdown-items .p-dropdown-item:not(.p-highlight):not(.p-disabled):hover {
     color: #495057;
-    background: transparent;
+    background: #e9ecef;
   }
   .p-dropdown-panel .p-dropdown-items .p-dropdown-item-group {
     margin: 0;
@@ -1004,9 +1009,10 @@
     background: #ffffff;
     font-weight: 600;
   }
-
-  p-dropdown.ng-dirty.ng-invalid > .p-dropdown {
-    border-color: #f44336;
+  .p-dropdown-panel .p-dropdown-items .p-dropdown-empty-message {
+    padding: 0.5rem 1rem;
+    color: #495057;
+    background: transparent;
   }
 
   .p-input-filled .p-dropdown {
diff --git a/src/assets/components/themes/saga-green/theme.css b/src/assets/components/themes/saga-green/theme.css
index 882f700ad0b..bc0aa3c28e5 100644
--- a/src/assets/components/themes/saga-green/theme.css
+++ b/src/assets/components/themes/saga-green/theme.css
@@ -932,7 +932,7 @@
   .p-dropdown .p-dropdown-label.p-placeholder {
     color: #6c757d;
   }
-  .p-dropdown .p-dropdown-label:enabled:focus {
+  .p-dropdown .p-dropdown-label:focus, .p-dropdown .p-dropdown-label:enabled:focus {
     outline: 0 none;
     box-shadow: none;
   }
@@ -947,6 +947,9 @@
     color: #6c757d;
     right: 2.357rem;
   }
+  .p-dropdown.p-invalid.p-component {
+    border-color: #f44336;
+  }
 
   .p-dropdown-panel {
     background: #ffffff;
@@ -988,14 +991,16 @@
     color: #495057;
     background: #E8F5E9;
   }
-  .p-dropdown-panel .p-dropdown-items .p-dropdown-item:not(.p-highlight):not(.p-disabled):hover {
+  .p-dropdown-panel .p-dropdown-items .p-dropdown-item.p-highlight.p-focus {
+    background: rgba(76, 175, 80, 0.24);
+  }
+  .p-dropdown-panel .p-dropdown-items .p-dropdown-item:not(.p-highlight):not(.p-disabled).p-focus {
     color: #495057;
-    background: #e9ecef;
+    background: #dee2e6;
   }
-  .p-dropdown-panel .p-dropdown-items .p-dropdown-empty-message {
-    padding: 0.5rem 1rem;
+  .p-dropdown-panel .p-dropdown-items .p-dropdown-item:not(.p-highlight):not(.p-disabled):hover {
     color: #495057;
-    background: transparent;
+    background: #e9ecef;
   }
   .p-dropdown-panel .p-dropdown-items .p-dropdown-item-group {
     margin: 0;
@@ -1004,9 +1009,10 @@
     background: #ffffff;
     font-weight: 600;
   }
-
-  p-dropdown.ng-dirty.ng-invalid > .p-dropdown {
-    border-color: #f44336;
+  .p-dropdown-panel .p-dropdown-items .p-dropdown-empty-message {
+    padding: 0.5rem 1rem;
+    color: #495057;
+    background: transparent;
   }
 
   .p-input-filled .p-dropdown {
diff --git a/src/assets/components/themes/saga-orange/theme.css b/src/assets/components/themes/saga-orange/theme.css
index b1737b1836d..b2d8729662c 100644
--- a/src/assets/components/themes/saga-orange/theme.css
+++ b/src/assets/components/themes/saga-orange/theme.css
@@ -932,7 +932,7 @@
   .p-dropdown .p-dropdown-label.p-placeholder {
     color: #6c757d;
   }
-  .p-dropdown .p-dropdown-label:enabled:focus {
+  .p-dropdown .p-dropdown-label:focus, .p-dropdown .p-dropdown-label:enabled:focus {
     outline: 0 none;
     box-shadow: none;
   }
@@ -947,6 +947,9 @@
     color: #6c757d;
     right: 2.357rem;
   }
+  .p-dropdown.p-invalid.p-component {
+    border-color: #f44336;
+  }
 
   .p-dropdown-panel {
     background: #ffffff;
@@ -988,14 +991,16 @@
     color: #495057;
     background: #FFF3E0;
   }
-  .p-dropdown-panel .p-dropdown-items .p-dropdown-item:not(.p-highlight):not(.p-disabled):hover {
+  .p-dropdown-panel .p-dropdown-items .p-dropdown-item.p-highlight.p-focus {
+    background: #ebe0ce;
+  }
+  .p-dropdown-panel .p-dropdown-items .p-dropdown-item:not(.p-highlight):not(.p-disabled).p-focus {
     color: #495057;
-    background: #e9ecef;
+    background: #dee2e6;
   }
-  .p-dropdown-panel .p-dropdown-items .p-dropdown-empty-message {
-    padding: 0.5rem 1rem;
+  .p-dropdown-panel .p-dropdown-items .p-dropdown-item:not(.p-highlight):not(.p-disabled):hover {
     color: #495057;
-    background: transparent;
+    background: #e9ecef;
   }
   .p-dropdown-panel .p-dropdown-items .p-dropdown-item-group {
     margin: 0;
@@ -1004,9 +1009,10 @@
     background: #ffffff;
     font-weight: 600;
   }
-
-  p-dropdown.ng-dirty.ng-invalid > .p-dropdown {
-    border-color: #f44336;
+  .p-dropdown-panel .p-dropdown-items .p-dropdown-empty-message {
+    padding: 0.5rem 1rem;
+    color: #495057;
+    background: transparent;
   }
 
   .p-input-filled .p-dropdown {
diff --git a/src/assets/components/themes/saga-purple/theme.css b/src/assets/components/themes/saga-purple/theme.css
index 6652d23cf65..7ed09346a37 100644
--- a/src/assets/components/themes/saga-purple/theme.css
+++ b/src/assets/components/themes/saga-purple/theme.css
@@ -932,7 +932,7 @@
   .p-dropdown .p-dropdown-label.p-placeholder {
     color: #6c757d;
   }
-  .p-dropdown .p-dropdown-label:enabled:focus {
+  .p-dropdown .p-dropdown-label:focus, .p-dropdown .p-dropdown-label:enabled:focus {
     outline: 0 none;
     box-shadow: none;
   }
@@ -947,6 +947,9 @@
     color: #6c757d;
     right: 2.357rem;
   }
+  .p-dropdown.p-invalid.p-component {
+    border-color: #f44336;
+  }
 
   .p-dropdown-panel {
     background: #ffffff;
@@ -988,14 +991,16 @@
     color: #495057;
     background: #F3E5F5;
   }
-  .p-dropdown-panel .p-dropdown-items .p-dropdown-item:not(.p-highlight):not(.p-disabled):hover {
+  .p-dropdown-panel .p-dropdown-items .p-dropdown-item.p-highlight.p-focus {
+    background: rgba(156, 39, 176, 0.24);
+  }
+  .p-dropdown-panel .p-dropdown-items .p-dropdown-item:not(.p-highlight):not(.p-disabled).p-focus {
     color: #495057;
-    background: #e9ecef;
+    background: #dee2e6;
   }
-  .p-dropdown-panel .p-dropdown-items .p-dropdown-empty-message {
-    padding: 0.5rem 1rem;
+  .p-dropdown-panel .p-dropdown-items .p-dropdown-item:not(.p-highlight):not(.p-disabled):hover {
     color: #495057;
-    background: transparent;
+    background: #e9ecef;
   }
   .p-dropdown-panel .p-dropdown-items .p-dropdown-item-group {
     margin: 0;
@@ -1004,9 +1009,10 @@
     background: #ffffff;
     font-weight: 600;
   }
-
-  p-dropdown.ng-dirty.ng-invalid > .p-dropdown {
-    border-color: #f44336;
+  .p-dropdown-panel .p-dropdown-items .p-dropdown-empty-message {
+    padding: 0.5rem 1rem;
+    color: #495057;
+    background: transparent;
   }
 
   .p-input-filled .p-dropdown {
diff --git a/src/assets/components/themes/soho-dark/theme.css b/src/assets/components/themes/soho-dark/theme.css
index c566942f4ae..66e44b4f68c 100644
--- a/src/assets/components/themes/soho-dark/theme.css
+++ b/src/assets/components/themes/soho-dark/theme.css
@@ -956,7 +956,7 @@
   .p-dropdown .p-dropdown-label.p-placeholder {
     color: rgba(255, 255, 255, 0.6);
   }
-  .p-dropdown .p-dropdown-label:enabled:focus {
+  .p-dropdown .p-dropdown-label:focus, .p-dropdown .p-dropdown-label:enabled:focus {
     outline: 0 none;
     box-shadow: none;
   }
@@ -971,6 +971,9 @@
     color: rgba(255, 255, 255, 0.6);
     right: 3rem;
   }
+  .p-dropdown.p-invalid.p-component {
+    border-color: #ff9a9a;
+  }
 
   .p-dropdown-panel {
     background: #282936;
@@ -1012,14 +1015,16 @@
     color: #b19df7;
     background: rgba(177, 157, 247, 0.16);
   }
-  .p-dropdown-panel .p-dropdown-items .p-dropdown-item:not(.p-highlight):not(.p-disabled):hover {
+  .p-dropdown-panel .p-dropdown-items .p-dropdown-item.p-highlight.p-focus {
+    background: rgba(177, 157, 247, 0.24);
+  }
+  .p-dropdown-panel .p-dropdown-items .p-dropdown-item:not(.p-highlight):not(.p-disabled).p-focus {
     color: rgba(255, 255, 255, 0.87);
-    background: rgba(255, 255, 255, 0.03);
+    background: rgba(255, 255, 255, 0.09);
   }
-  .p-dropdown-panel .p-dropdown-items .p-dropdown-empty-message {
-    padding: 0.75rem 1.25rem;
+  .p-dropdown-panel .p-dropdown-items .p-dropdown-item:not(.p-highlight):not(.p-disabled):hover {
     color: rgba(255, 255, 255, 0.87);
-    background: transparent;
+    background: rgba(255, 255, 255, 0.03);
   }
   .p-dropdown-panel .p-dropdown-items .p-dropdown-item-group {
     margin: 0;
@@ -1028,9 +1033,10 @@
     background: #333544;
     font-weight: 700;
   }
-
-  p-dropdown.ng-dirty.ng-invalid > .p-dropdown {
-    border-color: #ff9a9a;
+  .p-dropdown-panel .p-dropdown-items .p-dropdown-empty-message {
+    padding: 0.75rem 1.25rem;
+    color: rgba(255, 255, 255, 0.87);
+    background: transparent;
   }
 
   .p-input-filled .p-dropdown {
diff --git a/src/assets/components/themes/soho-light/theme.css b/src/assets/components/themes/soho-light/theme.css
index 4f047e02658..4c641e6da36 100644
--- a/src/assets/components/themes/soho-light/theme.css
+++ b/src/assets/components/themes/soho-light/theme.css
@@ -956,7 +956,7 @@
   .p-dropdown .p-dropdown-label.p-placeholder {
     color: #708da9;
   }
-  .p-dropdown .p-dropdown-label:enabled:focus {
+  .p-dropdown .p-dropdown-label:focus, .p-dropdown .p-dropdown-label:enabled:focus {
     outline: 0 none;
     box-shadow: none;
   }
@@ -971,6 +971,9 @@
     color: #708da9;
     right: 3rem;
   }
+  .p-dropdown.p-invalid.p-component {
+    border-color: #ff6767;
+  }
 
   .p-dropdown-panel {
     background: #ffffff;
@@ -1012,14 +1015,16 @@
     color: #7254f3;
     background: #e2dcfc;
   }
-  .p-dropdown-panel .p-dropdown-items .p-dropdown-item:not(.p-highlight):not(.p-disabled):hover {
+  .p-dropdown-panel .p-dropdown-items .p-dropdown-item.p-highlight.p-focus {
+    background: #cbc0fa;
+  }
+  .p-dropdown-panel .p-dropdown-items .p-dropdown-item:not(.p-highlight):not(.p-disabled).p-focus {
     color: #043d75;
-    background: #f6f9fc;
+    background: #dfe7ef;
   }
-  .p-dropdown-panel .p-dropdown-items .p-dropdown-empty-message {
-    padding: 0.75rem 1.25rem;
+  .p-dropdown-panel .p-dropdown-items .p-dropdown-item:not(.p-highlight):not(.p-disabled):hover {
     color: #043d75;
-    background: transparent;
+    background: #f6f9fc;
   }
   .p-dropdown-panel .p-dropdown-items .p-dropdown-item-group {
     margin: 0;
@@ -1028,9 +1033,10 @@
     background: #eff3f8;
     font-weight: 700;
   }
-
-  p-dropdown.ng-dirty.ng-invalid > .p-dropdown {
-    border-color: #ff6767;
+  .p-dropdown-panel .p-dropdown-items .p-dropdown-empty-message {
+    padding: 0.75rem 1.25rem;
+    color: #043d75;
+    background: transparent;
   }
 
   .p-input-filled .p-dropdown {
diff --git a/src/assets/components/themes/tailwind-light/theme.css b/src/assets/components/themes/tailwind-light/theme.css
index b418276d221..93c2a75f556 100644
--- a/src/assets/components/themes/tailwind-light/theme.css
+++ b/src/assets/components/themes/tailwind-light/theme.css
@@ -967,7 +967,7 @@
   .p-dropdown .p-dropdown-label.p-placeholder {
     color: #71717A;
   }
-  .p-dropdown .p-dropdown-label:enabled:focus {
+  .p-dropdown .p-dropdown-label:focus, .p-dropdown .p-dropdown-label:enabled:focus {
     outline: 0 none;
     box-shadow: none;
   }
@@ -982,6 +982,9 @@
     color: #71717A;
     right: 3rem;
   }
+  .p-dropdown.p-invalid.p-component {
+    border-color: #f0a9a7;
+  }
 
   .p-dropdown-panel {
     background: #ffffff;
@@ -1023,15 +1026,17 @@
     color: #312E81;
     background: #EEF2FF;
   }
+  .p-dropdown-panel .p-dropdown-items .p-dropdown-item.p-highlight.p-focus {
+    background: #E0E7FF;
+  }
+  .p-dropdown-panel .p-dropdown-items .p-dropdown-item:not(.p-highlight):not(.p-disabled).p-focus {
+    color: #18181B;
+    background: #e5e7eb;
+  }
   .p-dropdown-panel .p-dropdown-items .p-dropdown-item:not(.p-highlight):not(.p-disabled):hover {
     color: #18181B;
     background: #f4f4f5;
   }
-  .p-dropdown-panel .p-dropdown-items .p-dropdown-empty-message {
-    padding: 0.75rem 1rem;
-    color: #3f3f46;
-    background: transparent;
-  }
   .p-dropdown-panel .p-dropdown-items .p-dropdown-item-group {
     margin: 0;
     padding: 0.75rem 1rem;
@@ -1039,9 +1044,10 @@
     background: #ffffff;
     font-weight: 600;
   }
-
-  p-dropdown.ng-dirty.ng-invalid > .p-dropdown {
-    border-color: #f0a9a7;
+  .p-dropdown-panel .p-dropdown-items .p-dropdown-empty-message {
+    padding: 0.75rem 1rem;
+    color: #3f3f46;
+    background: transparent;
   }
 
   .p-input-filled .p-dropdown {
diff --git a/src/assets/components/themes/vela-blue/theme.css b/src/assets/components/themes/vela-blue/theme.css
index b33d4c5a19d..e6c72a5e70c 100644
--- a/src/assets/components/themes/vela-blue/theme.css
+++ b/src/assets/components/themes/vela-blue/theme.css
@@ -932,7 +932,7 @@
   .p-dropdown .p-dropdown-label.p-placeholder {
     color: rgba(255, 255, 255, 0.6);
   }
-  .p-dropdown .p-dropdown-label:enabled:focus {
+  .p-dropdown .p-dropdown-label:focus, .p-dropdown .p-dropdown-label:enabled:focus {
     outline: 0 none;
     box-shadow: none;
   }
@@ -947,6 +947,9 @@
     color: rgba(255, 255, 255, 0.6);
     right: 2.357rem;
   }
+  .p-dropdown.p-invalid.p-component {
+    border-color: #ef9a9a;
+  }
 
   .p-dropdown-panel {
     background: #1f2d40;
@@ -988,14 +991,16 @@
     color: rgba(255, 255, 255, 0.87);
     background: rgba(100, 181, 246, 0.16);
   }
-  .p-dropdown-panel .p-dropdown-items .p-dropdown-item:not(.p-highlight):not(.p-disabled):hover {
+  .p-dropdown-panel .p-dropdown-items .p-dropdown-item.p-highlight.p-focus {
+    background: rgba(100, 181, 246, 0.24);
+  }
+  .p-dropdown-panel .p-dropdown-items .p-dropdown-item:not(.p-highlight):not(.p-disabled).p-focus {
     color: rgba(255, 255, 255, 0.87);
-    background: rgba(255, 255, 255, 0.03);
+    background: rgba(255, 255, 255, 0.09);
   }
-  .p-dropdown-panel .p-dropdown-items .p-dropdown-empty-message {
-    padding: 0.5rem 1rem;
+  .p-dropdown-panel .p-dropdown-items .p-dropdown-item:not(.p-highlight):not(.p-disabled):hover {
     color: rgba(255, 255, 255, 0.87);
-    background: transparent;
+    background: rgba(255, 255, 255, 0.03);
   }
   .p-dropdown-panel .p-dropdown-items .p-dropdown-item-group {
     margin: 0;
@@ -1004,9 +1009,10 @@
     background: #1f2d40;
     font-weight: 600;
   }
-
-  p-dropdown.ng-dirty.ng-invalid > .p-dropdown {
-    border-color: #ef9a9a;
+  .p-dropdown-panel .p-dropdown-items .p-dropdown-empty-message {
+    padding: 0.5rem 1rem;
+    color: rgba(255, 255, 255, 0.87);
+    background: transparent;
   }
 
   .p-input-filled .p-dropdown {
diff --git a/src/assets/components/themes/vela-green/theme.css b/src/assets/components/themes/vela-green/theme.css
index a59fff78830..c5d375400c5 100644
--- a/src/assets/components/themes/vela-green/theme.css
+++ b/src/assets/components/themes/vela-green/theme.css
@@ -932,7 +932,7 @@
   .p-dropdown .p-dropdown-label.p-placeholder {
     color: rgba(255, 255, 255, 0.6);
   }
-  .p-dropdown .p-dropdown-label:enabled:focus {
+  .p-dropdown .p-dropdown-label:focus, .p-dropdown .p-dropdown-label:enabled:focus {
     outline: 0 none;
     box-shadow: none;
   }
@@ -947,6 +947,9 @@
     color: rgba(255, 255, 255, 0.6);
     right: 2.357rem;
   }
+  .p-dropdown.p-invalid.p-component {
+    border-color: #ef9a9a;
+  }
 
   .p-dropdown-panel {
     background: #1f2d40;
@@ -988,14 +991,16 @@
     color: rgba(255, 255, 255, 0.87);
     background: rgba(129, 199, 132, 0.16);
   }
-  .p-dropdown-panel .p-dropdown-items .p-dropdown-item:not(.p-highlight):not(.p-disabled):hover {
+  .p-dropdown-panel .p-dropdown-items .p-dropdown-item.p-highlight.p-focus {
+    background: rgba(129, 199, 132, 0.24);
+  }
+  .p-dropdown-panel .p-dropdown-items .p-dropdown-item:not(.p-highlight):not(.p-disabled).p-focus {
     color: rgba(255, 255, 255, 0.87);
-    background: rgba(255, 255, 255, 0.03);
+    background: rgba(255, 255, 255, 0.09);
   }
-  .p-dropdown-panel .p-dropdown-items .p-dropdown-empty-message {
-    padding: 0.5rem 1rem;
+  .p-dropdown-panel .p-dropdown-items .p-dropdown-item:not(.p-highlight):not(.p-disabled):hover {
     color: rgba(255, 255, 255, 0.87);
-    background: transparent;
+    background: rgba(255, 255, 255, 0.03);
   }
   .p-dropdown-panel .p-dropdown-items .p-dropdown-item-group {
     margin: 0;
@@ -1004,9 +1009,10 @@
     background: #1f2d40;
     font-weight: 600;
   }
-
-  p-dropdown.ng-dirty.ng-invalid > .p-dropdown {
-    border-color: #ef9a9a;
+  .p-dropdown-panel .p-dropdown-items .p-dropdown-empty-message {
+    padding: 0.5rem 1rem;
+    color: rgba(255, 255, 255, 0.87);
+    background: transparent;
   }
 
   .p-input-filled .p-dropdown {
diff --git a/src/assets/components/themes/vela-orange/theme.css b/src/assets/components/themes/vela-orange/theme.css
index bf92b10c7e2..06f3fc2ad33 100644
--- a/src/assets/components/themes/vela-orange/theme.css
+++ b/src/assets/components/themes/vela-orange/theme.css
@@ -932,7 +932,7 @@
   .p-dropdown .p-dropdown-label.p-placeholder {
     color: rgba(255, 255, 255, 0.6);
   }
-  .p-dropdown .p-dropdown-label:enabled:focus {
+  .p-dropdown .p-dropdown-label:focus, .p-dropdown .p-dropdown-label:enabled:focus {
     outline: 0 none;
     box-shadow: none;
   }
@@ -947,6 +947,9 @@
     color: rgba(255, 255, 255, 0.6);
     right: 2.357rem;
   }
+  .p-dropdown.p-invalid.p-component {
+    border-color: #ef9a9a;
+  }
 
   .p-dropdown-panel {
     background: #1f2d40;
@@ -988,14 +991,16 @@
     color: rgba(255, 255, 255, 0.87);
     background: rgba(255, 213, 79, 0.16);
   }
-  .p-dropdown-panel .p-dropdown-items .p-dropdown-item:not(.p-highlight):not(.p-disabled):hover {
+  .p-dropdown-panel .p-dropdown-items .p-dropdown-item.p-highlight.p-focus {
+    background: rgba(255, 213, 79, 0.24);
+  }
+  .p-dropdown-panel .p-dropdown-items .p-dropdown-item:not(.p-highlight):not(.p-disabled).p-focus {
     color: rgba(255, 255, 255, 0.87);
-    background: rgba(255, 255, 255, 0.03);
+    background: rgba(255, 255, 255, 0.09);
   }
-  .p-dropdown-panel .p-dropdown-items .p-dropdown-empty-message {
-    padding: 0.5rem 1rem;
+  .p-dropdown-panel .p-dropdown-items .p-dropdown-item:not(.p-highlight):not(.p-disabled):hover {
     color: rgba(255, 255, 255, 0.87);
-    background: transparent;
+    background: rgba(255, 255, 255, 0.03);
   }
   .p-dropdown-panel .p-dropdown-items .p-dropdown-item-group {
     margin: 0;
@@ -1004,9 +1009,10 @@
     background: #1f2d40;
     font-weight: 600;
   }
-
-  p-dropdown.ng-dirty.ng-invalid > .p-dropdown {
-    border-color: #ef9a9a;
+  .p-dropdown-panel .p-dropdown-items .p-dropdown-empty-message {
+    padding: 0.5rem 1rem;
+    color: rgba(255, 255, 255, 0.87);
+    background: transparent;
   }
 
   .p-input-filled .p-dropdown {
diff --git a/src/assets/components/themes/vela-purple/theme.css b/src/assets/components/themes/vela-purple/theme.css
index 2a7923fce83..8f84fba7f52 100644
--- a/src/assets/components/themes/vela-purple/theme.css
+++ b/src/assets/components/themes/vela-purple/theme.css
@@ -932,7 +932,7 @@
   .p-dropdown .p-dropdown-label.p-placeholder {
     color: rgba(255, 255, 255, 0.6);
   }
-  .p-dropdown .p-dropdown-label:enabled:focus {
+  .p-dropdown .p-dropdown-label:focus, .p-dropdown .p-dropdown-label:enabled:focus {
     outline: 0 none;
     box-shadow: none;
   }
@@ -947,6 +947,9 @@
     color: rgba(255, 255, 255, 0.6);
     right: 2.357rem;
   }
+  .p-dropdown.p-invalid.p-component {
+    border-color: #ef9a9a;
+  }
 
   .p-dropdown-panel {
     background: #1f2d40;
@@ -988,14 +991,16 @@
     color: rgba(255, 255, 255, 0.87);
     background: rgba(186, 104, 200, 0.16);
   }
-  .p-dropdown-panel .p-dropdown-items .p-dropdown-item:not(.p-highlight):not(.p-disabled):hover {
+  .p-dropdown-panel .p-dropdown-items .p-dropdown-item.p-highlight.p-focus {
+    background: rgba(186, 104, 200, 0.24);
+  }
+  .p-dropdown-panel .p-dropdown-items .p-dropdown-item:not(.p-highlight):not(.p-disabled).p-focus {
     color: rgba(255, 255, 255, 0.87);
-    background: rgba(255, 255, 255, 0.03);
+    background: rgba(255, 255, 255, 0.09);
   }
-  .p-dropdown-panel .p-dropdown-items .p-dropdown-empty-message {
-    padding: 0.5rem 1rem;
+  .p-dropdown-panel .p-dropdown-items .p-dropdown-item:not(.p-highlight):not(.p-disabled):hover {
     color: rgba(255, 255, 255, 0.87);
-    background: transparent;
+    background: rgba(255, 255, 255, 0.03);
   }
   .p-dropdown-panel .p-dropdown-items .p-dropdown-item-group {
     margin: 0;
@@ -1004,9 +1009,10 @@
     background: #1f2d40;
     font-weight: 600;
   }
-
-  p-dropdown.ng-dirty.ng-invalid > .p-dropdown {
-    border-color: #ef9a9a;
+  .p-dropdown-panel .p-dropdown-items .p-dropdown-empty-message {
+    padding: 0.5rem 1rem;
+    color: rgba(255, 255, 255, 0.87);
+    background: transparent;
   }
 
   .p-input-filled .p-dropdown {
diff --git a/src/assets/components/themes/viva-dark/theme.css b/src/assets/components/themes/viva-dark/theme.css
index 26ed59a5739..0d9c59fd11f 100644
--- a/src/assets/components/themes/viva-dark/theme.css
+++ b/src/assets/components/themes/viva-dark/theme.css
@@ -964,7 +964,7 @@
   .p-dropdown .p-dropdown-label.p-placeholder {
     color: rgba(255, 255, 255, 0.6);
   }
-  .p-dropdown .p-dropdown-label:enabled:focus {
+  .p-dropdown .p-dropdown-label:focus, .p-dropdown .p-dropdown-label:enabled:focus {
     outline: 0 none;
     box-shadow: none;
   }
@@ -979,6 +979,9 @@
     color: rgba(255, 255, 255, 0.6);
     right: 2.857rem;
   }
+  .p-dropdown.p-invalid.p-component {
+    border-color: #f78c79;
+  }
 
   .p-dropdown-panel {
     background: #161d21;
@@ -1020,14 +1023,16 @@
     color: #9eade6;
     background: rgba(158, 173, 230, 0.16);
   }
-  .p-dropdown-panel .p-dropdown-items .p-dropdown-item:not(.p-highlight):not(.p-disabled):hover {
+  .p-dropdown-panel .p-dropdown-items .p-dropdown-item.p-highlight.p-focus {
+    background: rgba(158, 173, 230, 0.24);
+  }
+  .p-dropdown-panel .p-dropdown-items .p-dropdown-item:not(.p-highlight):not(.p-disabled).p-focus {
     color: rgba(255, 255, 255, 0.87);
-    background: rgba(158, 173, 230, 0.08);
+    background: rgba(158, 173, 230, 0.1);
   }
-  .p-dropdown-panel .p-dropdown-items .p-dropdown-empty-message {
-    padding: 0.5rem 1rem;
+  .p-dropdown-panel .p-dropdown-items .p-dropdown-item:not(.p-highlight):not(.p-disabled):hover {
     color: rgba(255, 255, 255, 0.87);
-    background: transparent;
+    background: rgba(158, 173, 230, 0.08);
   }
   .p-dropdown-panel .p-dropdown-items .p-dropdown-item-group {
     margin: 0;
@@ -1036,9 +1041,10 @@
     background: #161d21;
     font-weight: 600;
   }
-
-  p-dropdown.ng-dirty.ng-invalid > .p-dropdown {
-    border-color: #f78c79;
+  .p-dropdown-panel .p-dropdown-items .p-dropdown-empty-message {
+    padding: 0.5rem 1rem;
+    color: rgba(255, 255, 255, 0.87);
+    background: transparent;
   }
 
   .p-input-filled .p-dropdown {
diff --git a/src/assets/components/themes/viva-light/theme.css b/src/assets/components/themes/viva-light/theme.css
index 0080a986302..bd8e7ab0824 100644
--- a/src/assets/components/themes/viva-light/theme.css
+++ b/src/assets/components/themes/viva-light/theme.css
@@ -965,7 +965,7 @@
   .p-dropdown .p-dropdown-label.p-placeholder {
     color: #898989;
   }
-  .p-dropdown .p-dropdown-label:enabled:focus {
+  .p-dropdown .p-dropdown-label:focus, .p-dropdown .p-dropdown-label:enabled:focus {
     outline: 0 none;
     box-shadow: none;
   }
@@ -980,6 +980,9 @@
     color: #898989;
     right: 2.857rem;
   }
+  .p-dropdown.p-invalid.p-component {
+    border-color: #f88c79;
+  }
 
   .p-dropdown-panel {
     background: #ffffff;
@@ -1021,14 +1024,16 @@
     color: #585858;
     background: #ced6f1;
   }
-  .p-dropdown-panel .p-dropdown-items .p-dropdown-item:not(.p-highlight):not(.p-disabled):hover {
+  .p-dropdown-panel .p-dropdown-items .p-dropdown-item.p-highlight.p-focus {
+    background: #aebbe8;
+  }
+  .p-dropdown-panel .p-dropdown-items .p-dropdown-item:not(.p-highlight):not(.p-disabled).p-focus {
     color: #6c6c6c;
-    background: #edf0fA;
+    background: #e6e9f3;
   }
-  .p-dropdown-panel .p-dropdown-items .p-dropdown-empty-message {
-    padding: 0.5rem 1rem;
+  .p-dropdown-panel .p-dropdown-items .p-dropdown-item:not(.p-highlight):not(.p-disabled):hover {
     color: #6c6c6c;
-    background: transparent;
+    background: #edf0fA;
   }
   .p-dropdown-panel .p-dropdown-items .p-dropdown-item-group {
     margin: 0;
@@ -1037,9 +1042,10 @@
     background: #ffffff;
     font-weight: 600;
   }
-
-  p-dropdown.ng-dirty.ng-invalid > .p-dropdown {
-    border-color: #f88c79;
+  .p-dropdown-panel .p-dropdown-items .p-dropdown-empty-message {
+    padding: 0.5rem 1rem;
+    color: #6c6c6c;
+    background: transparent;
   }
 
   .p-input-filled .p-dropdown {

From c8b9d06543eb64962ccaf37db4ad3f8964f84925 Mon Sep 17 00:00:00 2001
From: gucal <gucalaliriza@outlook.com>
Date: Mon, 9 Oct 2023 17:08:30 +0300
Subject: [PATCH 4/6] Update Surface colors doc

---
 src/app/showcase/doc/colors/surfacesdoc.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/app/showcase/doc/colors/surfacesdoc.ts b/src/app/showcase/doc/colors/surfacesdoc.ts
index 22716601f55..2e94bc4c44d 100644
--- a/src/app/showcase/doc/colors/surfacesdoc.ts
+++ b/src/app/showcase/doc/colors/surfacesdoc.ts
@@ -12,7 +12,7 @@ import { AppConfigService } from '../../service/appconfigservice';
         <div class="card">
             <div class="color-stack">
                 <div *ngFor="let shade of shades">
-                    <div class="color-box" [ngStyle]="{ backgroundColor: 'var(--surface-' + shade, color: shade < 500 ? 'var(--surface-900)' : 'var(--surface-0)' }">surface-{{ shade }}</div>
+                    <div class="color-box" [ngStyle]="{ backgroundColor: 'var(--surface-' + shade, color: shade < 600 ? 'var(--surface-900)' : 'var(--surface-0)' }">surface-{{ shade }}</div>
                 </div>
             </div>
         </div>

From a6232a50339ecd7429c581154793f3834eda10ac Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C3=87etin?=
 <69278826+cetincakiroglu@users.noreply.github.com>
Date: Mon, 9 Oct 2023 17:16:25 +0300
Subject: [PATCH 5/6] Fix SSR fail of carousel and galleria

---
 src/app/components/carousel/carousel.ts | 195 ++++++++++++------------
 src/app/components/galleria/galleria.ts |  18 ++-
 2 files changed, 111 insertions(+), 102 deletions(-)

diff --git a/src/app/components/carousel/carousel.ts b/src/app/components/carousel/carousel.ts
index 3fbe409097d..758f9de07d2 100755
--- a/src/app/components/carousel/carousel.ts
+++ b/src/app/components/carousel/carousel.ts
@@ -358,52 +358,57 @@ export class Carousel implements AfterContentInit {
     }
 
     ngOnChanges(simpleChange: SimpleChanges) {
-        if (simpleChange.value) {
-            if (this.circular && this._value) {
-                this.setCloneItems();
-            }
-        }
-
-        if (this.isCreated) {
-            if (simpleChange.numVisible) {
-                if (this.responsiveOptions) {
-                    this.defaultNumVisible = this.numVisible;
-                }
-
-                if (this.isCircular()) {
+        if(isPlatformBrowser(this.platformId)) {
+            if (simpleChange.value) {
+                if (this.circular && this._value) {
                     this.setCloneItems();
                 }
-
-                this.createStyle();
-                this.calculatePosition();
             }
 
-            if (simpleChange.numScroll) {
-                if (this.responsiveOptions) {
-                    this.defaultNumScroll = this.numScroll;
+            if (this.isCreated) {
+                if (simpleChange.numVisible) {
+                    if (this.responsiveOptions) {
+                        this.defaultNumVisible = this.numVisible;
+                    }
+    
+                    if (this.isCircular()) {
+                        this.setCloneItems();
+                    }
+    
+                    this.createStyle();
+                    this.calculatePosition();
+                }
+    
+                if (simpleChange.numScroll) {
+                    if (this.responsiveOptions) {
+                        this.defaultNumScroll = this.numScroll;
+                    }
                 }
             }
+
         }
     }
 
     ngAfterContentInit() {
         this.id = UniqueComponentId();
-        this.allowAutoplay = !!this.autoplayInterval;
+        if(isPlatformBrowser(this.platformId)) {
+            this.allowAutoplay = !!this.autoplayInterval;
 
-        if (this.circular) {
-            this.setCloneItems();
-        }
-
-        if (this.responsiveOptions) {
-            this.defaultNumScroll = this._numScroll;
-            this.defaultNumVisible = this._numVisible;
-        }
-
-        this.createStyle();
-        this.calculatePosition();
-
-        if (this.responsiveOptions) {
-            this.bindDocumentListeners();
+            if (this.circular) {
+                this.setCloneItems();
+            }
+    
+            if (this.responsiveOptions) {
+                this.defaultNumScroll = this._numScroll;
+                this.defaultNumVisible = this._numVisible;
+            }
+    
+            this.createStyle();
+            this.calculatePosition();
+    
+            if (this.responsiveOptions) {
+                this.bindDocumentListeners();
+            }
         }
 
         this.templates?.forEach((item) => {
@@ -436,69 +441,71 @@ export class Carousel implements AfterContentInit {
     }
 
     ngAfterContentChecked() {
-        const isCircular = this.isCircular();
-        let totalShiftedItems = this.totalShiftedItems;
-
-        if (this.value && this.itemsContainer && (this.prevState.numScroll !== this._numScroll || this.prevState.numVisible !== this._numVisible || this.prevState.value.length !== this.value.length)) {
-            if (this.autoplayInterval) {
-                this.stopAutoplay(false);
-            }
-
-            this.remainingItems = (this.value.length - this._numVisible) % this._numScroll;
-
-            let page = this._page;
-            if (this.totalDots() !== 0 && page >= this.totalDots()) {
-                page = this.totalDots() - 1;
-                this._page = page;
-                this.onPage.emit({
-                    page: this.page
-                });
-            }
-
-            totalShiftedItems = page * this._numScroll * -1;
-            if (isCircular) {
-                totalShiftedItems -= this._numVisible;
-            }
-
-            if (page === this.totalDots() - 1 && this.remainingItems > 0) {
-                totalShiftedItems += -1 * this.remainingItems + this._numScroll;
-                this.isRemainingItemsAdded = true;
-            } else {
-                this.isRemainingItemsAdded = false;
-            }
-
-            if (totalShiftedItems !== this.totalShiftedItems) {
-                this.totalShiftedItems = totalShiftedItems;
-            }
-
-            this._oldNumScroll = this._numScroll;
-            this.prevState.numScroll = this._numScroll;
-            this.prevState.numVisible = this._numVisible;
-            this.prevState.value = [...(this._value as any[])];
-
-            if (this.totalDots() > 0 && this.itemsContainer.nativeElement) {
-                this.itemsContainer.nativeElement.style.transform = this.isVertical() ? `translate3d(0, ${totalShiftedItems * (100 / this._numVisible)}%, 0)` : `translate3d(${totalShiftedItems * (100 / this._numVisible)}%, 0, 0)`;
-            }
-
-            this.isCreated = true;
-
-            if (this.autoplayInterval && this.isAutoplay()) {
-                this.startAutoplay();
-            }
-        }
-
-        if (isCircular) {
-            if (this.page === 0) {
-                totalShiftedItems = -1 * this._numVisible;
-            } else if (totalShiftedItems === 0) {
-                totalShiftedItems = -1 * this.value.length;
-                if (this.remainingItems > 0) {
+        if(isPlatformBrowser(this.platformId)) {
+            const isCircular = this.isCircular();
+            let totalShiftedItems = this.totalShiftedItems;
+    
+            if (this.value && this.itemsContainer && (this.prevState.numScroll !== this._numScroll || this.prevState.numVisible !== this._numVisible || this.prevState.value.length !== this.value.length)) {
+                if (this.autoplayInterval) {
+                    this.stopAutoplay(false);
+                }
+    
+                this.remainingItems = (this.value.length - this._numVisible) % this._numScroll;
+    
+                let page = this._page;
+                if (this.totalDots() !== 0 && page >= this.totalDots()) {
+                    page = this.totalDots() - 1;
+                    this._page = page;
+                    this.onPage.emit({
+                        page: this.page
+                    });
+                }
+    
+                totalShiftedItems = page * this._numScroll * -1;
+                if (isCircular) {
+                    totalShiftedItems -= this._numVisible;
+                }
+    
+                if (page === this.totalDots() - 1 && this.remainingItems > 0) {
+                    totalShiftedItems += -1 * this.remainingItems + this._numScroll;
                     this.isRemainingItemsAdded = true;
+                } else {
+                    this.isRemainingItemsAdded = false;
+                }
+    
+                if (totalShiftedItems !== this.totalShiftedItems) {
+                    this.totalShiftedItems = totalShiftedItems;
+                }
+    
+                this._oldNumScroll = this._numScroll;
+                this.prevState.numScroll = this._numScroll;
+                this.prevState.numVisible = this._numVisible;
+                this.prevState.value = [...(this._value as any[])];
+    
+                if (this.totalDots() > 0 && this.itemsContainer.nativeElement) {
+                    this.itemsContainer.nativeElement.style.transform = this.isVertical() ? `translate3d(0, ${totalShiftedItems * (100 / this._numVisible)}%, 0)` : `translate3d(${totalShiftedItems * (100 / this._numVisible)}%, 0, 0)`;
+                }
+    
+                this.isCreated = true;
+    
+                if (this.autoplayInterval && this.isAutoplay()) {
+                    this.startAutoplay();
                 }
             }
-
-            if (totalShiftedItems !== this.totalShiftedItems) {
-                this.totalShiftedItems = totalShiftedItems;
+    
+            if (isCircular) {
+                if (this.page === 0) {
+                    totalShiftedItems = -1 * this._numVisible;
+                } else if (totalShiftedItems === 0) {
+                    totalShiftedItems = -1 * this.value.length;
+                    if (this.remainingItems > 0) {
+                        this.isRemainingItemsAdded = true;
+                    }
+                }
+    
+                if (totalShiftedItems !== this.totalShiftedItems) {
+                    this.totalShiftedItems = totalShiftedItems;
+                }
             }
         }
     }
diff --git a/src/app/components/galleria/galleria.ts b/src/app/components/galleria/galleria.ts
index 99353e5da98..db83227e6c5 100755
--- a/src/app/components/galleria/galleria.ts
+++ b/src/app/components/galleria/galleria.ts
@@ -280,7 +280,7 @@ export class Galleria implements OnChanges, OnDestroy {
 
     maskVisible: boolean = false;
 
-    constructor(@Inject(DOCUMENT) private document: Document, public element: ElementRef, public cd: ChangeDetectorRef, public config: PrimeNGConfig) {}
+    constructor(@Inject(DOCUMENT) private document: Document,  @Inject(PLATFORM_ID) public platformId: any, public element: ElementRef, public cd: ChangeDetectorRef, public config: PrimeNGConfig) {}
 
     ngAfterContentInit() {
         this.templates?.forEach((item) => {
@@ -518,13 +518,15 @@ export class GalleriaContent implements DoCheck {
     }
 
     startSlideShow() {
-        this.interval = setInterval(() => {
-            let activeIndex = this.galleria.circular && this.value.length - 1 === this.activeIndex ? 0 : this.activeIndex + 1;
-            this.onActiveIndexChange(activeIndex);
-            this.activeIndex = activeIndex;
-        }, this.galleria.transitionInterval);
-
-        this.slideShowActive = true;
+        if(isPlatformBrowser(this.galleria.platformId)) {
+            this.interval = setInterval(() => {
+                let activeIndex = this.galleria.circular && this.value.length - 1 === this.activeIndex ? 0 : this.activeIndex + 1;
+                this.onActiveIndexChange(activeIndex);
+                this.activeIndex = activeIndex;
+            }, this.galleria.transitionInterval);
+    
+            this.slideShowActive = true;
+        }
     }
 
     stopSlideShow() {

From 300ed0d2fb8845eb88cefba822b825a9410a84b1 Mon Sep 17 00:00:00 2001
From: gucal <gucalaliriza@outlook.com>
Date: Mon, 9 Oct 2023 17:20:32 +0300
Subject: [PATCH 6/6] Surface typo fix

---
 src/app/showcase/doc/colors/surfacesdoc.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/app/showcase/doc/colors/surfacesdoc.ts b/src/app/showcase/doc/colors/surfacesdoc.ts
index 2e94bc4c44d..c5969a64725 100644
--- a/src/app/showcase/doc/colors/surfacesdoc.ts
+++ b/src/app/showcase/doc/colors/surfacesdoc.ts
@@ -12,7 +12,7 @@ import { AppConfigService } from '../../service/appconfigservice';
         <div class="card">
             <div class="color-stack">
                 <div *ngFor="let shade of shades">
-                    <div class="color-box" [ngStyle]="{ backgroundColor: 'var(--surface-' + shade, color: shade < 600 ? 'var(--surface-900)' : 'var(--surface-0)' }">surface-{{ shade }}</div>
+                    <div class="color-box" [ngStyle]="{ backgroundColor: 'var(--surface-' + shade + ')', color: shade < 600 ? 'var(--surface-900)' : 'var(--surface-0)' }">surface-{{ shade }}</div>
                 </div>
             </div>
         </div>