diff --git a/components/lib/themes/primeone/base/autocomplete/index.js b/components/lib/themes/primeone/base/autocomplete/index.js
index e88a0b03d..9b16c4333 100644
--- a/components/lib/themes/primeone/base/autocomplete/index.js
+++ b/components/lib/themes/primeone/base/autocomplete/index.js
@@ -26,9 +26,41 @@ export default {
     border-bottom-right-radius: 0;
 }
 
-.p-autocomplete-dd .p-autocomplete-dropdown {
-    border-top-left-radius: 0;
-    border-bottom-left-radius: 0;
+.p-autocomplete-dropdown {
+    cursor: pointer;
+    display: inline-flex;
+    cursor: pointer;
+    user-select: none;
+    align-items: center;
+    justify-content: center;
+    overflow: hidden;
+    position: relative;
+    width: ${dt('autocomplete.dropdown.width')};
+    border-top-right-radius: ${dt('rounded.base')};
+    border-bottom-right-radius: ${dt('rounded.base')};
+    background: ${dt('autocomplete.dropdown.background')};
+    border: 1px solid ${dt('autocomplete.dropdown.border.color')};
+    border-left: 0 none;
+    background: ${dt('autocomplete.dropdown.background')};
+    transition: background-color ${dt('transition.duration')}, color ${dt('transition.duration')}, border-color ${dt('transition.duration')}, outline-color ${dt('transition.duration')};
+    outline-color: transparent;
+}
+
+.p-autocomplete-dropdown:not(:disabled):hover {
+    background: ${dt('autocomplete.dropdown.hover.background')};
+    border-color: ${dt('autocomplete.dropdown.hover.border.color')};
+    background: ${dt('autocomplete.dropdown.hover.background')};
+}
+
+.p-autocomplete-dropdown:not(:disabled):active {
+    background: ${dt('autocomplete.dropdown.active.background')};
+    border-color: ${dt('autocomplete.dropdown.active.border.color')};
+    background: ${dt('autocomplete.dropdown.active.background')};
+}
+
+.p-autocomplete-dropdown:focus-visible {
+    outline: ${dt('focus.ring.width')} ${dt('focus.ring.style')} ${dt('button.primary.background')};
+    outline-offset: ${dt('focus.ring.offset')};
 }
 
 .p-autocomplete .p-autocomplete-panel {
@@ -78,17 +110,17 @@ export default {
 
 .p-autocomplete-item:not(.p-highlight):not(.p-disabled).p-focus {
     background: ${dt('autocomplete.item.focus.background')};
-    color: ${dt('autocomplete.item.focus.background')};
+    color: ${dt('autocomplete.item.focus.color')};
 }
 
 .p-autocomplete-item.p-highlight {
-    color: ${dt('autocomplete.item.selected.background')};
     background: ${dt('autocomplete.item.selected.background')};
+    color: ${dt('autocomplete.item.selected.color')};
 }
 
 .p-autocomplete-item.p-highlight.p-focus {
-    color: ${dt('autocomplete.item.selected.focus.background')};
     background: ${dt('autocomplete.item.selected.focus.background')};
+    color: ${dt('autocomplete.item.selected.focus.color')};
 }
 
 .p-autocomplete-item-group {
@@ -112,7 +144,7 @@ export default {
     gap: 0.25rem;
     color: ${dt('autocomplete.input.multiple.color')};
     background: ${dt('autocomplete.input.multiple.background')};
-    border: 1px solid ${dt('autocomplete.input.multiple.border.color')});
+    border: 1px solid ${dt('autocomplete.input.multiple.border.color')};
     border-radius: ${dt('rounded.base')};
     width: 100%;
     transition: background-color ${dt('transition.duration')}, color ${dt('transition.duration')}, border-color ${dt('transition.duration')}, outline-color ${dt('transition.duration')};
diff --git a/components/lib/themes/primeone/presets/aura/autocomplete/index.js b/components/lib/themes/primeone/presets/aura/autocomplete/index.js
index 4532d1188..d7782fe52 100644
--- a/components/lib/themes/primeone/presets/aura/autocomplete/index.js
+++ b/components/lib/themes/primeone/presets/aura/autocomplete/index.js
@@ -29,15 +29,27 @@ export default {
             item: {
                 focusBackground: '{surface.100}',
                 selectedBackground: '{highlight.background}',
-                selectedFocusBackground: '{highlight.background.focus}',
+                selectedFocusBackground: '{highlight.focus.background}',
                 color: '{surface.700}',
                 focusColor: '{surface.800}',
-                selectedColor: '{highlight.text.color}',
-                selectedFocusColor: '{highlight.text.color.focus}'
+                selectedColor: '{highlight.color}',
+                selectedFocusColor: '{highlight.focus.color}'
             },
             itemGroup: {
                 background: '{surface.0}',
                 color: '{surface.500}'
+            },
+            dropdown: {
+                width: '2.5rem',
+                background: '{surface.100}',
+                hoverBackground: '{surface.200}',
+                activeBackground: '{surface.300}',
+                borderColor: '{form.field.border.color}',
+                hoverBorderColor: '{form.field.border.color}',
+                activeBorderColor: '{form.field.border.color}',
+                color: '{surface.600}',
+                hoverColor: '{surface.700}',
+                activeColor: '{surface.800}'
             }
         },
         dark: {
@@ -55,15 +67,26 @@ export default {
             item: {
                 focusBackground: '{surface.800}',
                 selectedBackground: '{highlight.background}',
-                selectedFocusBackground: '{highlight.background.focus}',
+                selectedFocusBackground: '{highlight.focus.background}',
                 color: '{surface.0}',
                 focusColor: '{surface.0}',
-                selectedColor: '{highlight.text.color}',
-                selectedFocusColor: '{highlight.text.color.focus}'
+                selectedColor: '{highlight.color}',
+                selectedFocusColor: '{highlight.focus.color}'
             },
             itemGroup: {
-                background: '{surface.0}',
+                background: '{surface.900}',
                 color: '{surface.400}'
+            },
+            dropdown: {
+                background: '{surface.800}',
+                hoverBackground: '{surface.700}',
+                activeBackground: '{surface.600}',
+                borderColor: '{form.field.border.color}',
+                hoverBorderColor: '{form.field.border.color}',
+                activeBorderColor: '{form.field.border.color}',
+                color: '{surface.300}',
+                hoverColor: '{surface.200}',
+                activeColor: '{surface.100}'
             }
         }
     }
diff --git a/components/lib/themes/primeone/presets/aura/calendar/index.js b/components/lib/themes/primeone/presets/aura/calendar/index.js
index f52f07ac6..c74f0f074 100644
--- a/components/lib/themes/primeone/presets/aura/calendar/index.js
+++ b/components/lib/themes/primeone/presets/aura/calendar/index.js
@@ -34,7 +34,7 @@ export default {
                 selectedBackground: '{highlight.background}',
                 color: '{surface.700}',
                 hoverColor: '{surface.800}',
-                selectedColor: '{highlight.text.color}'
+                selectedColor: '{highlight.color}'
             },
             today: {
                 background: '{surface.200}',
@@ -45,14 +45,14 @@ export default {
                 selectedBackground: '{highlight.background}',
                 color: '{surface.700}',
                 hoverColor: '{surface.800}',
-                selectedColor: '{highlight.text.color}'
+                selectedColor: '{highlight.color}'
             },
             year: {
                 hoverBackground: '{surface.100}',
                 selectedBackground: '{highlight.background}',
                 color: '{surface.700}',
                 hoverColor: '{surface.800}',
-                selectedColor: '{highlight.text.color}'
+                selectedColor: '{highlight.color}'
             },
             buttonbar: {
                 borderColor: '{surface.200}'
@@ -100,7 +100,7 @@ export default {
                 selectedBackground: '{highlight.background}',
                 color: '{surface.0}',
                 hoverColor: '{surface.0}',
-                selectedColor: '{highlight.text.color}'
+                selectedColor: '{highlight.color}'
             },
             today: {
                 background: '{surface.700}',
@@ -111,14 +111,14 @@ export default {
                 selectedBackground: '{highlight.background}',
                 color: '{surface.0}',
                 hoverColor: '{surface.0}',
-                selectedColor: '{highlight.text.color}'
+                selectedColor: '{highlight.color}'
             },
             year: {
                 hoverBackground: '{surface.800}',
                 selectedBackground: '{highlight.background}',
                 color: '{surface.0}',
                 hoverColor: '{surface.0}',
-                selectedColor: '{highlight.text.color}'
+                selectedColor: '{highlight.color}'
             },
             buttonbar: {
                 borderColor: '{surface.700}'
diff --git a/components/lib/themes/primeone/presets/aura/dropdown/index.js b/components/lib/themes/primeone/presets/aura/dropdown/index.js
index f09b91beb..dd3baaf1a 100644
--- a/components/lib/themes/primeone/presets/aura/dropdown/index.js
+++ b/components/lib/themes/primeone/presets/aura/dropdown/index.js
@@ -33,11 +33,11 @@ export default {
             item: {
                 focusBackground: '{surface.100}',
                 selectedBackground: '{highlight.background}',
-                selectedBackgroundFocus: '{highlight.background.focus}',
+                selectedBackgroundFocus: '{highlight.focus.background}',
                 color: '{surface.700}',
                 focusColor: '{surface.800}',
-                selectedColor: '{highlight.text.color}',
-                selectedFocusColor: '{highlight.text.color.focus}'
+                selectedColor: '{highlight.color}',
+                selectedFocusColor: '{highlight.focus.color}'
             },
             checkmark: {
                 color: '{surface.400}'
@@ -62,11 +62,11 @@ export default {
             item: {
                 focusBackground: '{surface.800}',
                 selectedBackground: '{highlight.background}',
-                selectedBackgroundFocus: '{highlight.background.focus}',
+                selectedBackgroundFocus: '{highlight.focus.background}',
                 color: '{surface.0}',
                 focusColor: '{surface.0}',
-                selectedColor: '{highlight.text.color}',
-                selectedFocusColor: '{highlight.text.color.focus}'
+                selectedColor: '{highlight.color}',
+                selectedFocusColor: '{highlight.focus.color}'
             },
             checkmark: {
                 color: '{surface.400}'
diff --git a/components/lib/themes/primeone/presets/aura/listbox/index.js b/components/lib/themes/primeone/presets/aura/listbox/index.js
index 9555b54e7..96bafe5d7 100644
--- a/components/lib/themes/primeone/presets/aura/listbox/index.js
+++ b/components/lib/themes/primeone/presets/aura/listbox/index.js
@@ -22,11 +22,11 @@ export default {
             item: {
                 focusBackground: '{surface.100}',
                 selectedBackground: '{highlight.background}',
-                selectedFocusBackground: '{highlight.background.focus}',
+                selectedFocusBackground: '{highlight.focus.background}',
                 color: '{surface.700}',
                 focusColor: '{surface.800}',
-                selectedColor: '{highlight.text.color}',
-                selectedFocusColor: '{highlight.text.color.focus}'
+                selectedColor: '{highlight.color}',
+                selectedFocusColor: '{highlight.focus.color}'
             }
         },
         dark: {
@@ -40,11 +40,11 @@ export default {
             item: {
                 focusBackground: '{surface.800}',
                 selectedBackground: '{highlight.background}',
-                selectedFocusBackground: '{highlight.background.focus}',
+                selectedFocusBackground: '{highlight.focus.background}',
                 color: '{surface.0}',
                 focusColor: '{surface.0}',
-                selectedColor: '{highlight.text.color}',
-                selectedFocusColor: '{highlight.text.color.focus}'
+                selectedColor: '{highlight.color}',
+                selectedFocusColor: '{highlight.focus.color}'
             }
         }
     }
diff --git a/components/lib/themes/primeone/presets/aura/multiselect/index.js b/components/lib/themes/primeone/presets/aura/multiselect/index.js
index 5e1c29e19..8f180db37 100644
--- a/components/lib/themes/primeone/presets/aura/multiselect/index.js
+++ b/components/lib/themes/primeone/presets/aura/multiselect/index.js
@@ -33,11 +33,11 @@ export default {
             item: {
                 focusBackground: '{surface.100}',
                 selectedBackground: '{highlight.background}',
-                selectedFocusBackground: '{highlight.background.focus}',
+                selectedFocusBackground: '{highlight.focus.background}',
                 color: '{surface.700}',
                 focusColor: '{surface.800}',
-                selectedColor: '{highlight.text.color}',
-                selectedFocusColor: '{highlight.text.color.focus}'
+                selectedColor: '{highlight.color}',
+                selectedFocusColor: '{highlight.focus.color}'
             },
             chip: {
                 background: '{surface.100}',
@@ -63,11 +63,11 @@ export default {
             item: {
                 focusBackground: '{surface.800}',
                 selectedBackground: '{highlight.background}',
-                selectedFocusBackground: '{highlight.background.focus}',
+                selectedFocusBackground: '{highlight.focus.background}',
                 color: '{surface.0}',
                 focusColor: '{surface.0}',
-                selectedColor: '{highlight.text.color}',
-                selectedFocusColor: '{highlight.text.color.focus}'
+                selectedColor: '{highlight.color}',
+                selectedFocusColor: '{highlight.focus.color}'
             },
             chip: {
                 background: '{surface.700}',