Fixed calendar dropdown style

components/lib/themes/primeone/base/calendar/index.js

@@ -15,13 +15,57 @@ export default {
     border-bottom-right-radius: 0;
 }
 
-.p-calendar-w-btn .p-datepicker-trigger {
+.p-datepicker-trigger {
-    border-top-left-radius: 0;
+    cursor: pointer;
-    border-bottom-left-radius: 0;
+    display: inline-flex;
+    cursor: pointer;
+    user-select: none;
+    align-items: center;
+    justify-content: center;
+    overflow: hidden;
+    position: relative;
+    width: ${dt('calendar.dropdown.width')};
+    border-top-right-radius: ${dt('rounded.base')};
+    border-bottom-right-radius: ${dt('rounded.base')};
+    background: ${dt('calendar.dropdown.background')};
+    border: 1px solid ${dt('calendar.dropdown.border.color')};
+    border-left: 0 none;
+    background: ${dt('calendar.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-calendar .p-datepicker-trigger-icon {
+.p-datepicker-trigger:not(:disabled):hover {
+    background: ${dt('calendar.dropdown.hover.background')};
+    border-color: ${dt('calendar.dropdown.hover.border.color')};
+    background: ${dt('calendar.dropdown.hover.background')};
+}
+
+.p-datepicker-trigger:not(:disabled):active {
+    background: ${dt('calendar.dropdown.active.background')};
+    border-color: ${dt('calendar.dropdown.active.border.color')};
+    background: ${dt('calendar.dropdown.active.background')};
+}
+
+.p-datepicker-trigger:focus-visible {
+    outline: ${dt('focus.ring.width')} ${dt('focus.ring.style')} ${dt('button.primary.background')};
+    outline-offset: ${dt('focus.ring.offset')};
+}
+
+.p-calendar:has(.p-input-icon) {
+    position: relative;
+}
+
+.p-calendar:has(.p-input-icon) .p-calendar-input {
+    padding-right: 2.5rem;
+}
+
+.p-calendar .p-input-icon {
     cursor: pointer;
+    position: absolute;
+    top: 50%;
+    right: .75rem;
+    margin-top: -.5rem;
 }
 
 .p-fluid .p-calendar {

components/lib/themes/primeone/presets/aura/calendar/index.js

@@ -64,6 +64,18 @@ export default {
                 hoverBackground: '{surface.100}',
                 color: '{surface.500}',
                 hoverColor: '{surface.600}'
+            },
+            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: {
@@ -130,6 +142,17 @@ export default {
                 hoverBackground: '{surface.800}',
                 color: '{surface.400}',
                 hoverColor: '{surface.300}'
+            },
+            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}'
             }
         }
     }