primeng 16.7.2 → 16.8.0

package/resources/themes/saga-orange/theme.css

@@ -455,6 +455,13 @@
     border-color: #f44336;
   }
 
+  .p-calendar:not(.p-calendar-disabled).p-focus > .p-inputtext {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #ffe69c;
+    border-color: #FFC107;
+  }
+
   .p-datepicker {
     padding: 0.5rem;
     background: #ffffff;
@@ -3219,6 +3226,7 @@
     padding: 0.5rem 0;
     border-bottom-right-radius: 3px;
     border-bottom-left-radius: 3px;
+    outline: 0 none;
   }
   .p-orderlist .p-orderlist-list .p-orderlist-item {
     padding: 0.5rem 1rem;
@@ -3226,17 +3234,23 @@
     border: 0 none;
     color: #495057;
     background: transparent;
-    transition: box-shadow 0.2s;
+    transition: transform 0.2s, box-shadow 0.2s;
   }
-  .p-orderlist .p-orderlist-list .p-orderlist-item:focus {
-    outline: 0 none;
-    outline-offset: 0;
-    box-shadow: inset 0 0 0 0.15rem #ffe69c;
+  .p-orderlist .p-orderlist-list .p-orderlist-item:not(.p-highlight):hover {
+    background: #e9ecef;
+    color: #495057;
+  }
+  .p-orderlist .p-orderlist-list .p-orderlist-item.p-focus {
+    color: #495057;
+    background: #dee2e6;
   }
   .p-orderlist .p-orderlist-list .p-orderlist-item.p-highlight {
     color: #495057;
     background: #FFF3E0;
   }
+  .p-orderlist .p-orderlist-list .p-orderlist-item.p-highlight.p-focus {
+    background: #ebe0ce;
+  }
   .p-orderlist .p-orderlist-list .p-orderlist-empty-message {
     padding: 0.5rem 1rem;
     color: #495057;
@@ -3420,6 +3434,7 @@
     padding: 0.5rem 0;
     border-bottom-right-radius: 3px;
     border-bottom-left-radius: 3px;
+    outline: 0 none;
   }
   .p-picklist .p-picklist-list .p-picklist-item {
     padding: 0.5rem 1rem;
@@ -3427,17 +3442,23 @@
     border: 0 none;
     color: #495057;
     background: transparent;
-    transition: box-shadow 0.2s;
+    transition: transform 0.2s, box-shadow 0.2s;
   }
-  .p-picklist .p-picklist-list .p-picklist-item:focus {
-    outline: 0 none;
-    outline-offset: 0;
-    box-shadow: inset 0 0 0 0.15rem #ffe69c;
+  .p-picklist .p-picklist-list .p-picklist-item:not(.p-highlight):hover {
+    background: #e9ecef;
+    color: #495057;
+  }
+  .p-picklist .p-picklist-list .p-picklist-item.p-focus {
+    color: #495057;
+    background: #dee2e6;
   }
   .p-picklist .p-picklist-list .p-picklist-item.p-highlight {
     color: #495057;
     background: #FFF3E0;
   }
+  .p-picklist .p-picklist-list .p-picklist-item.p-highlight.p-focus {
+    background: #ebe0ce;
+  }
   .p-picklist .p-picklist-list .p-picklist-empty-message {
     padding: 0.5rem 1rem;
     color: #495057;
@@ -3496,6 +3517,12 @@
   }
   .p-tree .p-tree-container .p-treenode {
     padding: 0.143rem;
+    outline: 0 none;
+  }
+  .p-tree .p-tree-container .p-treenode:focus > .p-treenode-content {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: inset 0 0 0 0.15rem #ffe69c;
   }
   .p-tree .p-tree-container .p-treenode .p-treenode-content {
     border-radius: 3px;
@@ -3532,11 +3559,6 @@
   .p-tree .p-tree-container .p-treenode .p-treenode-content .p-checkbox .p-indeterminate .p-checkbox-icon {
     color: #495057;
   }
-  .p-tree .p-tree-container .p-treenode .p-treenode-content:focus {
-    outline: 0 none;
-    outline-offset: 0;
-    box-shadow: inset 0 0 0 0.15rem #ffe69c;
-  }
   .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight {
     background: #FFF3E0;
     color: #495057;

package/resources/themes/saga-purple/theme.css

@@ -455,6 +455,13 @@
     border-color: #f44336;
   }
 
+  .p-calendar:not(.p-calendar-disabled).p-focus > .p-inputtext {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #df9eea;
+    border-color: #9C27B0;
+  }
+
   .p-datepicker {
     padding: 0.5rem;
     background: #ffffff;
@@ -3219,6 +3226,7 @@
     padding: 0.5rem 0;
     border-bottom-right-radius: 3px;
     border-bottom-left-radius: 3px;
+    outline: 0 none;
   }
   .p-orderlist .p-orderlist-list .p-orderlist-item {
     padding: 0.5rem 1rem;
@@ -3226,17 +3234,23 @@
     border: 0 none;
     color: #495057;
     background: transparent;
-    transition: box-shadow 0.2s;
+    transition: transform 0.2s, box-shadow 0.2s;
   }
-  .p-orderlist .p-orderlist-list .p-orderlist-item:focus {
-    outline: 0 none;
-    outline-offset: 0;
-    box-shadow: inset 0 0 0 0.15rem #df9eea;
+  .p-orderlist .p-orderlist-list .p-orderlist-item:not(.p-highlight):hover {
+    background: #e9ecef;
+    color: #495057;
+  }
+  .p-orderlist .p-orderlist-list .p-orderlist-item.p-focus {
+    color: #495057;
+    background: #dee2e6;
   }
   .p-orderlist .p-orderlist-list .p-orderlist-item.p-highlight {
     color: #495057;
     background: #F3E5F5;
   }
+  .p-orderlist .p-orderlist-list .p-orderlist-item.p-highlight.p-focus {
+    background: rgba(156, 39, 176, 0.24);
+  }
   .p-orderlist .p-orderlist-list .p-orderlist-empty-message {
     padding: 0.5rem 1rem;
     color: #495057;
@@ -3420,6 +3434,7 @@
     padding: 0.5rem 0;
     border-bottom-right-radius: 3px;
     border-bottom-left-radius: 3px;
+    outline: 0 none;
   }
   .p-picklist .p-picklist-list .p-picklist-item {
     padding: 0.5rem 1rem;
@@ -3427,17 +3442,23 @@
     border: 0 none;
     color: #495057;
     background: transparent;
-    transition: box-shadow 0.2s;
+    transition: transform 0.2s, box-shadow 0.2s;
   }
-  .p-picklist .p-picklist-list .p-picklist-item:focus {
-    outline: 0 none;
-    outline-offset: 0;
-    box-shadow: inset 0 0 0 0.15rem #df9eea;
+  .p-picklist .p-picklist-list .p-picklist-item:not(.p-highlight):hover {
+    background: #e9ecef;
+    color: #495057;
+  }
+  .p-picklist .p-picklist-list .p-picklist-item.p-focus {
+    color: #495057;
+    background: #dee2e6;
   }
   .p-picklist .p-picklist-list .p-picklist-item.p-highlight {
     color: #495057;
     background: #F3E5F5;
   }
+  .p-picklist .p-picklist-list .p-picklist-item.p-highlight.p-focus {
+    background: rgba(156, 39, 176, 0.24);
+  }
   .p-picklist .p-picklist-list .p-picklist-empty-message {
     padding: 0.5rem 1rem;
     color: #495057;
@@ -3496,6 +3517,12 @@
   }
   .p-tree .p-tree-container .p-treenode {
     padding: 0.143rem;
+    outline: 0 none;
+  }
+  .p-tree .p-tree-container .p-treenode:focus > .p-treenode-content {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: inset 0 0 0 0.15rem #df9eea;
   }
   .p-tree .p-tree-container .p-treenode .p-treenode-content {
     border-radius: 3px;
@@ -3532,11 +3559,6 @@
   .p-tree .p-tree-container .p-treenode .p-treenode-content .p-checkbox .p-indeterminate .p-checkbox-icon {
     color: #495057;
   }
-  .p-tree .p-tree-container .p-treenode .p-treenode-content:focus {
-    outline: 0 none;
-    outline-offset: 0;
-    box-shadow: inset 0 0 0 0.15rem #df9eea;
-  }
   .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight {
     background: #F3E5F5;
     color: #495057;

package/resources/themes/soho-dark/theme.css

@@ -479,6 +479,13 @@
     border-color: #ff9a9a;
   }
 
+  .p-calendar:not(.p-calendar-disabled).p-focus > .p-inputtext {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #e0d8fc;
+    border-color: #b19df7;
+  }
+
   .p-datepicker {
     padding: 0.5rem;
     background: #282936;
@@ -3243,6 +3250,7 @@
     padding: 0.75rem 0;
     border-bottom-right-radius: 6px;
     border-bottom-left-radius: 6px;
+    outline: 0 none;
   }
   .p-orderlist .p-orderlist-list .p-orderlist-item {
     padding: 0.75rem 1.25rem;
@@ -3250,17 +3258,23 @@
     border: 0 none;
     color: rgba(255, 255, 255, 0.87);
     background: transparent;
-    transition: box-shadow 0.2s;
+    transition: transform 0.2s, box-shadow 0.2s;
   }
-  .p-orderlist .p-orderlist-list .p-orderlist-item:focus {
-    outline: 0 none;
-    outline-offset: 0;
-    box-shadow: inset 0 0 0 0.15rem #e0d8fc;
+  .p-orderlist .p-orderlist-list .p-orderlist-item:not(.p-highlight):hover {
+    background: rgba(255, 255, 255, 0.03);
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-orderlist .p-orderlist-list .p-orderlist-item.p-focus {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(255, 255, 255, 0.09);
   }
   .p-orderlist .p-orderlist-list .p-orderlist-item.p-highlight {
     color: #b19df7;
     background: rgba(177, 157, 247, 0.16);
   }
+  .p-orderlist .p-orderlist-list .p-orderlist-item.p-highlight.p-focus {
+    background: rgba(177, 157, 247, 0.24);
+  }
   .p-orderlist .p-orderlist-list .p-orderlist-empty-message {
     padding: 0.75rem 1.25rem;
     color: rgba(255, 255, 255, 0.87);
@@ -3444,6 +3458,7 @@
     padding: 0.75rem 0;
     border-bottom-right-radius: 6px;
     border-bottom-left-radius: 6px;
+    outline: 0 none;
   }
   .p-picklist .p-picklist-list .p-picklist-item {
     padding: 0.75rem 1.25rem;
@@ -3451,17 +3466,23 @@
     border: 0 none;
     color: rgba(255, 255, 255, 0.87);
     background: transparent;
-    transition: box-shadow 0.2s;
+    transition: transform 0.2s, box-shadow 0.2s;
   }
-  .p-picklist .p-picklist-list .p-picklist-item:focus {
-    outline: 0 none;
-    outline-offset: 0;
-    box-shadow: inset 0 0 0 0.15rem #e0d8fc;
+  .p-picklist .p-picklist-list .p-picklist-item:not(.p-highlight):hover {
+    background: rgba(255, 255, 255, 0.03);
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-picklist .p-picklist-list .p-picklist-item.p-focus {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(255, 255, 255, 0.09);
   }
   .p-picklist .p-picklist-list .p-picklist-item.p-highlight {
     color: #b19df7;
     background: rgba(177, 157, 247, 0.16);
   }
+  .p-picklist .p-picklist-list .p-picklist-item.p-highlight.p-focus {
+    background: rgba(177, 157, 247, 0.24);
+  }
   .p-picklist .p-picklist-list .p-picklist-empty-message {
     padding: 0.75rem 1.25rem;
     color: rgba(255, 255, 255, 0.87);
@@ -3520,6 +3541,12 @@
   }
   .p-tree .p-tree-container .p-treenode {
     padding: 0.143rem;
+    outline: 0 none;
+  }
+  .p-tree .p-tree-container .p-treenode:focus > .p-treenode-content {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: inset 0 0 0 0.15rem #e0d8fc;
   }
   .p-tree .p-tree-container .p-treenode .p-treenode-content {
     border-radius: 6px;
@@ -3556,11 +3583,6 @@
   .p-tree .p-tree-container .p-treenode .p-treenode-content .p-checkbox .p-indeterminate .p-checkbox-icon {
     color: rgba(255, 255, 255, 0.87);
   }
-  .p-tree .p-tree-container .p-treenode .p-treenode-content:focus {
-    outline: 0 none;
-    outline-offset: 0;
-    box-shadow: inset 0 0 0 0.15rem #e0d8fc;
-  }
   .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight {
     background: rgba(177, 157, 247, 0.16);
     color: #b19df7;

package/resources/themes/soho-light/theme.css

@@ -479,6 +479,13 @@
     border-color: #ff6767;
   }
 
+  .p-calendar:not(.p-calendar-disabled).p-focus > .p-inputtext {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #c7bbfa;
+    border-color: #7254f3;
+  }
+
   .p-datepicker {
     padding: 0.5rem;
     background: linear-gradient(90deg, #7254f3 0%, #9554f3 100%);
@@ -3243,6 +3250,7 @@
     padding: 0.75rem 0;
     border-bottom-right-radius: 6px;
     border-bottom-left-radius: 6px;
+    outline: 0 none;
   }
   .p-orderlist .p-orderlist-list .p-orderlist-item {
     padding: 0.75rem 1.25rem;
@@ -3250,17 +3258,23 @@
     border: 0 none;
     color: #043d75;
     background: transparent;
-    transition: box-shadow 0.2s;
+    transition: transform 0.2s, box-shadow 0.2s;
   }
-  .p-orderlist .p-orderlist-list .p-orderlist-item:focus {
-    outline: 0 none;
-    outline-offset: 0;
-    box-shadow: inset 0 0 0 0.15rem #c7bbfa;
+  .p-orderlist .p-orderlist-list .p-orderlist-item:not(.p-highlight):hover {
+    background: #f6f9fc;
+    color: #043d75;
+  }
+  .p-orderlist .p-orderlist-list .p-orderlist-item.p-focus {
+    color: #043d75;
+    background: #dfe7ef;
   }
   .p-orderlist .p-orderlist-list .p-orderlist-item.p-highlight {
     color: #7254f3;
     background: #e2dcfc;
   }
+  .p-orderlist .p-orderlist-list .p-orderlist-item.p-highlight.p-focus {
+    background: #cbc0fa;
+  }
   .p-orderlist .p-orderlist-list .p-orderlist-empty-message {
     padding: 0.75rem 1.25rem;
     color: #043d75;
@@ -3444,6 +3458,7 @@
     padding: 0.75rem 0;
     border-bottom-right-radius: 6px;
     border-bottom-left-radius: 6px;
+    outline: 0 none;
   }
   .p-picklist .p-picklist-list .p-picklist-item {
     padding: 0.75rem 1.25rem;
@@ -3451,17 +3466,23 @@
     border: 0 none;
     color: #043d75;
     background: transparent;
-    transition: box-shadow 0.2s;
+    transition: transform 0.2s, box-shadow 0.2s;
   }
-  .p-picklist .p-picklist-list .p-picklist-item:focus {
-    outline: 0 none;
-    outline-offset: 0;
-    box-shadow: inset 0 0 0 0.15rem #c7bbfa;
+  .p-picklist .p-picklist-list .p-picklist-item:not(.p-highlight):hover {
+    background: #f6f9fc;
+    color: #043d75;
+  }
+  .p-picklist .p-picklist-list .p-picklist-item.p-focus {
+    color: #043d75;
+    background: #dfe7ef;
   }
   .p-picklist .p-picklist-list .p-picklist-item.p-highlight {
     color: #7254f3;
     background: #e2dcfc;
   }
+  .p-picklist .p-picklist-list .p-picklist-item.p-highlight.p-focus {
+    background: #cbc0fa;
+  }
   .p-picklist .p-picklist-list .p-picklist-empty-message {
     padding: 0.75rem 1.25rem;
     color: #043d75;
@@ -3520,6 +3541,12 @@
   }
   .p-tree .p-tree-container .p-treenode {
     padding: 0.143rem;
+    outline: 0 none;
+  }
+  .p-tree .p-tree-container .p-treenode:focus > .p-treenode-content {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: inset 0 0 0 0.15rem #c7bbfa;
   }
   .p-tree .p-tree-container .p-treenode .p-treenode-content {
     border-radius: 6px;
@@ -3556,11 +3583,6 @@
   .p-tree .p-tree-container .p-treenode .p-treenode-content .p-checkbox .p-indeterminate .p-checkbox-icon {
     color: #043d75;
   }
-  .p-tree .p-tree-container .p-treenode .p-treenode-content:focus {
-    outline: 0 none;
-    outline-offset: 0;
-    box-shadow: inset 0 0 0 0.15rem #c7bbfa;
-  }
   .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight {
     background: #e2dcfc;
     color: #7254f3;

package/resources/themes/tailwind-light/theme.css

@@ -490,6 +490,13 @@
     border-color: #f0a9a7;
   }
 
+  .p-calendar:not(.p-calendar-disabled).p-focus > .p-inputtext {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #6366F1;
+    border-color: #4F46E5;
+  }
+
   .p-datepicker {
     padding: 0.5rem;
     background: #ffffff;
@@ -3254,6 +3261,7 @@
     padding: 0.25rem 0;
     border-bottom-right-radius: 0.375rem;
     border-bottom-left-radius: 0.375rem;
+    outline: 0 none;
   }
   .p-orderlist .p-orderlist-list .p-orderlist-item {
     padding: 0.75rem 1rem;
@@ -3261,17 +3269,23 @@
     border: 0 none;
     color: #3f3f46;
     background: transparent;
-    transition: none;
+    transition: transform 0.2s, none;
   }
-  .p-orderlist .p-orderlist-list .p-orderlist-item:focus {
-    outline: 0 none;
-    outline-offset: 0;
-    box-shadow: inset 0 0 0 0.15rem #6366F1;
+  .p-orderlist .p-orderlist-list .p-orderlist-item:not(.p-highlight):hover {
+    background: #f4f4f5;
+    color: #18181B;
+  }
+  .p-orderlist .p-orderlist-list .p-orderlist-item.p-focus {
+    color: #18181B;
+    background: #e5e7eb;
   }
   .p-orderlist .p-orderlist-list .p-orderlist-item.p-highlight {
     color: #312E81;
     background: #EEF2FF;
   }
+  .p-orderlist .p-orderlist-list .p-orderlist-item.p-highlight.p-focus {
+    background: #E0E7FF;
+  }
   .p-orderlist .p-orderlist-list .p-orderlist-empty-message {
     padding: 0.75rem 1rem;
     color: #3f3f46;
@@ -3455,6 +3469,7 @@
     padding: 0.25rem 0;
     border-bottom-right-radius: 0.375rem;
     border-bottom-left-radius: 0.375rem;
+    outline: 0 none;
   }
   .p-picklist .p-picklist-list .p-picklist-item {
     padding: 0.75rem 1rem;
@@ -3462,17 +3477,23 @@
     border: 0 none;
     color: #3f3f46;
     background: transparent;
-    transition: none;
+    transition: transform 0.2s, none;
   }
-  .p-picklist .p-picklist-list .p-picklist-item:focus {
-    outline: 0 none;
-    outline-offset: 0;
-    box-shadow: inset 0 0 0 0.15rem #6366F1;
+  .p-picklist .p-picklist-list .p-picklist-item:not(.p-highlight):hover {
+    background: #f4f4f5;
+    color: #18181B;
+  }
+  .p-picklist .p-picklist-list .p-picklist-item.p-focus {
+    color: #18181B;
+    background: #e5e7eb;
   }
   .p-picklist .p-picklist-list .p-picklist-item.p-highlight {
     color: #312E81;
     background: #EEF2FF;
   }
+  .p-picklist .p-picklist-list .p-picklist-item.p-highlight.p-focus {
+    background: #E0E7FF;
+  }
   .p-picklist .p-picklist-list .p-picklist-empty-message {
     padding: 0.75rem 1rem;
     color: #3f3f46;
@@ -3531,6 +3552,12 @@
   }
   .p-tree .p-tree-container .p-treenode {
     padding: 0.143rem;
+    outline: 0 none;
+  }
+  .p-tree .p-tree-container .p-treenode:focus > .p-treenode-content {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: inset 0 0 0 0.15rem #6366F1;
   }
   .p-tree .p-tree-container .p-treenode .p-treenode-content {
     border-radius: 0.375rem;
@@ -3567,11 +3594,6 @@
   .p-tree .p-tree-container .p-treenode .p-treenode-content .p-checkbox .p-indeterminate .p-checkbox-icon {
     color: #3f3f46;
   }
-  .p-tree .p-tree-container .p-treenode .p-treenode-content:focus {
-    outline: 0 none;
-    outline-offset: 0;
-    box-shadow: inset 0 0 0 0.15rem #6366F1;
-  }
   .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight {
     background: #EEF2FF;
     color: #312E81;

package/resources/themes/vela-blue/theme.css

@@ -455,6 +455,13 @@
     border-color: #ef9a9a;
   }
 
+  .p-calendar:not(.p-calendar-disabled).p-focus > .p-inputtext {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #93cbf9;
+    border-color: #64B5F6;
+  }
+
   .p-datepicker {
     padding: 0.5rem;
     background: #1f2d40;
@@ -3219,6 +3226,7 @@
     padding: 0.5rem 0;
     border-bottom-right-radius: 3px;
     border-bottom-left-radius: 3px;
+    outline: 0 none;
   }
   .p-orderlist .p-orderlist-list .p-orderlist-item {
     padding: 0.5rem 1rem;
@@ -3226,17 +3234,23 @@
     border: 0 none;
     color: rgba(255, 255, 255, 0.87);
     background: transparent;
-    transition: box-shadow 0.2s;
+    transition: transform 0.2s, box-shadow 0.2s;
   }
-  .p-orderlist .p-orderlist-list .p-orderlist-item:focus {
-    outline: 0 none;
-    outline-offset: 0;
-    box-shadow: inset 0 0 0 0.15rem #93cbf9;
+  .p-orderlist .p-orderlist-list .p-orderlist-item:not(.p-highlight):hover {
+    background: rgba(255, 255, 255, 0.03);
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-orderlist .p-orderlist-list .p-orderlist-item.p-focus {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(255, 255, 255, 0.09);
   }
   .p-orderlist .p-orderlist-list .p-orderlist-item.p-highlight {
     color: rgba(255, 255, 255, 0.87);
     background: rgba(100, 181, 246, 0.16);
   }
+  .p-orderlist .p-orderlist-list .p-orderlist-item.p-highlight.p-focus {
+    background: rgba(100, 181, 246, 0.24);
+  }
   .p-orderlist .p-orderlist-list .p-orderlist-empty-message {
     padding: 0.5rem 1rem;
     color: rgba(255, 255, 255, 0.87);
@@ -3420,6 +3434,7 @@
     padding: 0.5rem 0;
     border-bottom-right-radius: 3px;
     border-bottom-left-radius: 3px;
+    outline: 0 none;
   }
   .p-picklist .p-picklist-list .p-picklist-item {
     padding: 0.5rem 1rem;
@@ -3427,17 +3442,23 @@
     border: 0 none;
     color: rgba(255, 255, 255, 0.87);
     background: transparent;
-    transition: box-shadow 0.2s;
+    transition: transform 0.2s, box-shadow 0.2s;
   }
-  .p-picklist .p-picklist-list .p-picklist-item:focus {
-    outline: 0 none;
-    outline-offset: 0;
-    box-shadow: inset 0 0 0 0.15rem #93cbf9;
+  .p-picklist .p-picklist-list .p-picklist-item:not(.p-highlight):hover {
+    background: rgba(255, 255, 255, 0.03);
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-picklist .p-picklist-list .p-picklist-item.p-focus {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(255, 255, 255, 0.09);
   }
   .p-picklist .p-picklist-list .p-picklist-item.p-highlight {
     color: rgba(255, 255, 255, 0.87);
     background: rgba(100, 181, 246, 0.16);
   }
+  .p-picklist .p-picklist-list .p-picklist-item.p-highlight.p-focus {
+    background: rgba(100, 181, 246, 0.24);
+  }
   .p-picklist .p-picklist-list .p-picklist-empty-message {
     padding: 0.5rem 1rem;
     color: rgba(255, 255, 255, 0.87);
@@ -3496,6 +3517,12 @@
   }
   .p-tree .p-tree-container .p-treenode {
     padding: 0.143rem;
+    outline: 0 none;
+  }
+  .p-tree .p-tree-container .p-treenode:focus > .p-treenode-content {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: inset 0 0 0 0.15rem #93cbf9;
   }
   .p-tree .p-tree-container .p-treenode .p-treenode-content {
     border-radius: 3px;
@@ -3532,11 +3559,6 @@
   .p-tree .p-tree-container .p-treenode .p-treenode-content .p-checkbox .p-indeterminate .p-checkbox-icon {
     color: rgba(255, 255, 255, 0.87);
   }
-  .p-tree .p-tree-container .p-treenode .p-treenode-content:focus {
-    outline: 0 none;
-    outline-offset: 0;
-    box-shadow: inset 0 0 0 0.15rem #93cbf9;
-  }
   .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight {
     background: rgba(100, 181, 246, 0.16);
     color: rgba(255, 255, 255, 0.87);