Fixed #972 - Listbox Enhancements

public/demo/menu/menu.json

@@ -130,7 +130,8 @@
             "children": [
                 {
                     "name": "AutoComplete",
-                    "to": "/autocomplete"
+                    "to": "/autocomplete",
+                    "badge": "New"
                 },
                 {
                     "name": "Calendar",
@@ -154,7 +155,8 @@
                 },
                 {
                     "name": "Dropdown",
-                    "to": "/dropdown"
+                    "to": "/dropdown",
+                    "badge": "New"
                 },
                 {
                     "name": "Editor",
@@ -194,11 +196,13 @@
                 },
                 {
                     "name": "Listbox",
-                    "to": "/listbox"
+                    "to": "/listbox",
+                    "badge": "New"
                 },
                 {
                     "name": "MultiSelect",
-                    "to": "/multiselect"
+                    "to": "/multiselect",
+                    "badge": "New"
                 },
                 {
                     "name": "Password",

public/themes/arya-blue/theme.css

@@ -124,6 +124,13 @@
   color: rgba(255, 255, 255, 0.87);
   background: rgba(100, 181, 246, 0.16);
 }
+.p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item-group {
+  margin: 0;
+  padding: 0.75rem 1rem;
+  color: rgba(255, 255, 255, 0.87);
+  background: #1e1e1e;
+  font-weight: 600;
+}
 
 .p-calendar.p-invalid.p-component > .p-inputtext {
   border-color: #ef9a9a;
@@ -604,6 +611,13 @@
   color: rgba(255, 255, 255, 0.87);
   background: rgba(255, 255, 255, 0.03);
 }
+.p-dropdown-panel .p-dropdown-items .p-dropdown-item-group {
+  margin: 0;
+  padding: 0.75rem 1rem;
+  color: rgba(255, 255, 255, 0.87);
+  background: #1e1e1e;
+  font-weight: 600;
+}
 .p-dropdown-panel .p-dropdown-items .p-dropdown-empty-message {
   padding: 0.5rem 1rem;
   color: rgba(255, 255, 255, 0.87);
@@ -973,6 +987,13 @@
   outline-offset: 0;
   box-shadow: inset 0 0 0 1px #93cbf9;
 }
+.p-listbox .p-listbox-list .p-listbox-item-group {
+  margin: 0;
+  padding: 0.75rem 1rem;
+  color: rgba(255, 255, 255, 0.87);
+  background: #1e1e1e;
+  font-weight: 600;
+}
 .p-listbox .p-listbox-list .p-listbox-empty-message {
   padding: 0.5rem 1rem;
   color: rgba(255, 255, 255, 0.87);
@@ -1107,6 +1128,13 @@
 .p-multiselect-panel .p-multiselect-items .p-multiselect-item .p-checkbox {
   margin-right: 0.5rem;
 }
+.p-multiselect-panel .p-multiselect-items .p-multiselect-item-group {
+  margin: 0;
+  padding: 0.75rem 1rem;
+  color: rgba(255, 255, 255, 0.87);
+  background: #1e1e1e;
+  font-weight: 600;
+}
 .p-multiselect-panel .p-multiselect-items .p-multiselect-empty-message {
   padding: 0.5rem 1rem;
   color: rgba(255, 255, 255, 0.87);

public/themes/arya-green/theme.css

@@ -124,6 +124,13 @@
   color: rgba(255, 255, 255, 0.87);
   background: rgba(129, 199, 132, 0.16);
 }
+.p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item-group {
+  margin: 0;
+  padding: 0.75rem 1rem;
+  color: rgba(255, 255, 255, 0.87);
+  background: #1e1e1e;
+  font-weight: 600;
+}
 
 .p-calendar.p-invalid.p-component > .p-inputtext {
   border-color: #ef9a9a;
@@ -604,6 +611,13 @@
   color: rgba(255, 255, 255, 0.87);
   background: rgba(255, 255, 255, 0.03);
 }
+.p-dropdown-panel .p-dropdown-items .p-dropdown-item-group {
+  margin: 0;
+  padding: 0.75rem 1rem;
+  color: rgba(255, 255, 255, 0.87);
+  background: #1e1e1e;
+  font-weight: 600;
+}
 .p-dropdown-panel .p-dropdown-items .p-dropdown-empty-message {
   padding: 0.5rem 1rem;
   color: rgba(255, 255, 255, 0.87);
@@ -973,6 +987,13 @@
   outline-offset: 0;
   box-shadow: inset 0 0 0 1px #a7d8a9;
 }
+.p-listbox .p-listbox-list .p-listbox-item-group {
+  margin: 0;
+  padding: 0.75rem 1rem;
+  color: rgba(255, 255, 255, 0.87);
+  background: #1e1e1e;
+  font-weight: 600;
+}
 .p-listbox .p-listbox-list .p-listbox-empty-message {
   padding: 0.5rem 1rem;
   color: rgba(255, 255, 255, 0.87);
@@ -1107,6 +1128,13 @@
 .p-multiselect-panel .p-multiselect-items .p-multiselect-item .p-checkbox {
   margin-right: 0.5rem;
 }
+.p-multiselect-panel .p-multiselect-items .p-multiselect-item-group {
+  margin: 0;
+  padding: 0.75rem 1rem;
+  color: rgba(255, 255, 255, 0.87);
+  background: #1e1e1e;
+  font-weight: 600;
+}
 .p-multiselect-panel .p-multiselect-items .p-multiselect-empty-message {
   padding: 0.5rem 1rem;
   color: rgba(255, 255, 255, 0.87);

public/themes/arya-orange/theme.css

@@ -124,6 +124,13 @@
   color: rgba(255, 255, 255, 0.87);
   background: rgba(255, 213, 79, 0.16);
 }
+.p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item-group {
+  margin: 0;
+  padding: 0.75rem 1rem;
+  color: rgba(255, 255, 255, 0.87);
+  background: #1e1e1e;
+  font-weight: 600;
+}
 
 .p-calendar.p-invalid.p-component > .p-inputtext {
   border-color: #ef9a9a;
@@ -604,6 +611,13 @@
   color: rgba(255, 255, 255, 0.87);
   background: rgba(255, 255, 255, 0.03);
 }
+.p-dropdown-panel .p-dropdown-items .p-dropdown-item-group {
+  margin: 0;
+  padding: 0.75rem 1rem;
+  color: rgba(255, 255, 255, 0.87);
+  background: #1e1e1e;
+  font-weight: 600;
+}
 .p-dropdown-panel .p-dropdown-items .p-dropdown-empty-message {
   padding: 0.5rem 1rem;
   color: rgba(255, 255, 255, 0.87);
@@ -973,6 +987,13 @@
   outline-offset: 0;
   box-shadow: inset 0 0 0 1px #ffe284;
 }
+.p-listbox .p-listbox-list .p-listbox-item-group {
+  margin: 0;
+  padding: 0.75rem 1rem;
+  color: rgba(255, 255, 255, 0.87);
+  background: #1e1e1e;
+  font-weight: 600;
+}
 .p-listbox .p-listbox-list .p-listbox-empty-message {
   padding: 0.5rem 1rem;
   color: rgba(255, 255, 255, 0.87);
@@ -1107,6 +1128,13 @@
 .p-multiselect-panel .p-multiselect-items .p-multiselect-item .p-checkbox {
   margin-right: 0.5rem;
 }
+.p-multiselect-panel .p-multiselect-items .p-multiselect-item-group {
+  margin: 0;
+  padding: 0.75rem 1rem;
+  color: rgba(255, 255, 255, 0.87);
+  background: #1e1e1e;
+  font-weight: 600;
+}
 .p-multiselect-panel .p-multiselect-items .p-multiselect-empty-message {
   padding: 0.5rem 1rem;
   color: rgba(255, 255, 255, 0.87);

public/themes/arya-purple/theme.css

@@ -124,6 +124,13 @@
   color: rgba(255, 255, 255, 0.87);
   background: rgba(186, 104, 200, 0.16);
 }
+.p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item-group {
+  margin: 0;
+  padding: 0.75rem 1rem;
+  color: rgba(255, 255, 255, 0.87);
+  background: #1e1e1e;
+  font-weight: 600;
+}
 
 .p-calendar.p-invalid.p-component > .p-inputtext {
   border-color: #ef9a9a;
@@ -604,6 +611,13 @@
   color: rgba(255, 255, 255, 0.87);
   background: rgba(255, 255, 255, 0.03);
 }
+.p-dropdown-panel .p-dropdown-items .p-dropdown-item-group {
+  margin: 0;
+  padding: 0.75rem 1rem;
+  color: rgba(255, 255, 255, 0.87);
+  background: #1e1e1e;
+  font-weight: 600;
+}
 .p-dropdown-panel .p-dropdown-items .p-dropdown-empty-message {
   padding: 0.5rem 1rem;
   color: rgba(255, 255, 255, 0.87);
@@ -973,6 +987,13 @@
   outline-offset: 0;
   box-shadow: inset 0 0 0 1px #cf95d9;
 }
+.p-listbox .p-listbox-list .p-listbox-item-group {
+  margin: 0;
+  padding: 0.75rem 1rem;
+  color: rgba(255, 255, 255, 0.87);
+  background: #1e1e1e;
+  font-weight: 600;
+}
 .p-listbox .p-listbox-list .p-listbox-empty-message {
   padding: 0.5rem 1rem;
   color: rgba(255, 255, 255, 0.87);
@@ -1107,6 +1128,13 @@
 .p-multiselect-panel .p-multiselect-items .p-multiselect-item .p-checkbox {
   margin-right: 0.5rem;
 }
+.p-multiselect-panel .p-multiselect-items .p-multiselect-item-group {
+  margin: 0;
+  padding: 0.75rem 1rem;
+  color: rgba(255, 255, 255, 0.87);
+  background: #1e1e1e;
+  font-weight: 600;
+}
 .p-multiselect-panel .p-multiselect-items .p-multiselect-empty-message {
   padding: 0.5rem 1rem;
   color: rgba(255, 255, 255, 0.87);

public/themes/bootstrap4-dark-blue/theme.css

@@ -124,6 +124,13 @@
   color: #151515;
   background: #8dd0ff;
 }
+.p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item-group {
+  margin: 0;
+  padding: 0.75rem 1rem;
+  color: rgba(255, 255, 255, 0.87);
+  background: #2a323d;
+  font-weight: 600;
+}
 
 .p-calendar.p-invalid.p-component > .p-inputtext {
   border-color: #f19ea6;
@@ -608,6 +615,13 @@
   color: rgba(255, 255, 255, 0.87);
   background: rgba(255, 255, 255, 0.04);
 }
+.p-dropdown-panel .p-dropdown-items .p-dropdown-item-group {
+  margin: 0;
+  padding: 0.75rem 1rem;
+  color: rgba(255, 255, 255, 0.87);
+  background: #2a323d;
+  font-weight: 600;
+}
 .p-dropdown-panel .p-dropdown-items .p-dropdown-empty-message {
   padding: 0.5rem 1.5rem;
   color: rgba(255, 255, 255, 0.87);
@@ -977,6 +991,13 @@
   outline-offset: 0;
   box-shadow: inset 0 0 0 0.15rem #e3f3fe;
 }
+.p-listbox .p-listbox-list .p-listbox-item-group {
+  margin: 0;
+  padding: 0.75rem 1rem;
+  color: rgba(255, 255, 255, 0.87);
+  background: #2a323d;
+  font-weight: 600;
+}
 .p-listbox .p-listbox-list .p-listbox-empty-message {
   padding: 0.5rem 1.5rem;
   color: rgba(255, 255, 255, 0.87);
@@ -1111,6 +1132,13 @@
 .p-multiselect-panel .p-multiselect-items .p-multiselect-item .p-checkbox {
   margin-right: 0.5rem;
 }
+.p-multiselect-panel .p-multiselect-items .p-multiselect-item-group {
+  margin: 0;
+  padding: 0.75rem 1rem;
+  color: rgba(255, 255, 255, 0.87);
+  background: #2a323d;
+  font-weight: 600;
+}
 .p-multiselect-panel .p-multiselect-items .p-multiselect-empty-message {
   padding: 0.5rem 1.5rem;
   color: rgba(255, 255, 255, 0.87);

public/themes/bootstrap4-dark-purple/theme.css

@@ -124,6 +124,13 @@
   color: #151515;
   background: #c298d8;
 }
+.p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item-group {
+  margin: 0;
+  padding: 0.75rem 1rem;
+  color: rgba(255, 255, 255, 0.87);
+  background: #2a323d;
+  font-weight: 600;
+}
 
 .p-calendar.p-invalid.p-component > .p-inputtext {
   border-color: #f19ea6;
@@ -608,6 +615,13 @@
   color: rgba(255, 255, 255, 0.87);
   background: rgba(255, 255, 255, 0.04);
 }
+.p-dropdown-panel .p-dropdown-items .p-dropdown-item-group {
+  margin: 0;
+  padding: 0.75rem 1rem;
+  color: rgba(255, 255, 255, 0.87);
+  background: #2a323d;
+  font-weight: 600;
+}
 .p-dropdown-panel .p-dropdown-items .p-dropdown-empty-message {
   padding: 0.5rem 1.5rem;
   color: rgba(255, 255, 255, 0.87);
@@ -977,6 +991,13 @@
   outline-offset: 0;
   box-shadow: inset 0 0 0 0.15rem #f0e6f5;
 }
+.p-listbox .p-listbox-list .p-listbox-item-group {
+  margin: 0;
+  padding: 0.75rem 1rem;
+  color: rgba(255, 255, 255, 0.87);
+  background: #2a323d;
+  font-weight: 600;
+}
 .p-listbox .p-listbox-list .p-listbox-empty-message {
   padding: 0.5rem 1.5rem;
   color: rgba(255, 255, 255, 0.87);
@@ -1111,6 +1132,13 @@
 .p-multiselect-panel .p-multiselect-items .p-multiselect-item .p-checkbox {
   margin-right: 0.5rem;
 }
+.p-multiselect-panel .p-multiselect-items .p-multiselect-item-group {
+  margin: 0;
+  padding: 0.75rem 1rem;
+  color: rgba(255, 255, 255, 0.87);
+  background: #2a323d;
+  font-weight: 600;
+}
 .p-multiselect-panel .p-multiselect-items .p-multiselect-empty-message {
   padding: 0.5rem 1.5rem;
   color: rgba(255, 255, 255, 0.87);

public/themes/bootstrap4-light-blue/theme.css

@@ -124,6 +124,13 @@
   color: #ffffff;
   background: #007bff;
 }
+.p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item-group {
+  margin: 0;
+  padding: 0.75rem 1rem;
+  color: #212529;
+  background: #ffffff;
+  font-weight: 600;
+}
 
 .p-calendar.p-invalid.p-component > .p-inputtext {
   border-color: #dc3545;
@@ -608,6 +615,13 @@
   color: #212529;
   background: #e9ecef;
 }
+.p-dropdown-panel .p-dropdown-items .p-dropdown-item-group {
+  margin: 0;
+  padding: 0.75rem 1rem;
+  color: #212529;
+  background: #ffffff;
+  font-weight: 600;
+}
 .p-dropdown-panel .p-dropdown-items .p-dropdown-empty-message {
   padding: 0.5rem 1.5rem;
   color: #212529;
@@ -977,6 +991,13 @@
   outline-offset: 0;
   box-shadow: inset 0 0 0 0.15rem rgba(38, 143, 255, 0.5);
 }
+.p-listbox .p-listbox-list .p-listbox-item-group {
+  margin: 0;
+  padding: 0.75rem 1rem;
+  color: #212529;
+  background: #ffffff;
+  font-weight: 600;
+}
 .p-listbox .p-listbox-list .p-listbox-empty-message {
   padding: 0.5rem 1.5rem;
   color: #212529;
@@ -1111,6 +1132,13 @@
 .p-multiselect-panel .p-multiselect-items .p-multiselect-item .p-checkbox {
   margin-right: 0.5rem;
 }
+.p-multiselect-panel .p-multiselect-items .p-multiselect-item-group {
+  margin: 0;
+  padding: 0.75rem 1rem;
+  color: #212529;
+  background: #ffffff;
+  font-weight: 600;
+}
 .p-multiselect-panel .p-multiselect-items .p-multiselect-empty-message {
   padding: 0.5rem 1.5rem;
   color: #212529;

public/themes/bootstrap4-light-purple/theme.css

@@ -124,6 +124,13 @@
   color: #ffffff;
   background: #883cae;
 }
+.p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item-group {
+  margin: 0;
+  padding: 0.75rem 1rem;
+  color: #212529;
+  background: #ffffff;
+  font-weight: 600;
+}
 
 .p-calendar.p-invalid.p-component > .p-inputtext {
   border-color: #dc3545;
@@ -608,6 +615,13 @@
   color: #212529;
   background: #e9ecef;
 }
+.p-dropdown-panel .p-dropdown-items .p-dropdown-item-group {
+  margin: 0;
+  padding: 0.75rem 1rem;
+  color: #212529;
+  background: #ffffff;
+  font-weight: 600;
+}
 .p-dropdown-panel .p-dropdown-items .p-dropdown-empty-message {
   padding: 0.5rem 1.5rem;
   color: #212529;
@@ -977,6 +991,13 @@
   outline-offset: 0;
   box-shadow: inset 0 0 0 0.15rem rgba(136, 60, 174, 0.5);
 }
+.p-listbox .p-listbox-list .p-listbox-item-group {
+  margin: 0;
+  padding: 0.75rem 1rem;
+  color: #212529;
+  background: #ffffff;
+  font-weight: 600;
+}
 .p-listbox .p-listbox-list .p-listbox-empty-message {
   padding: 0.5rem 1.5rem;
   color: #212529;
@@ -1111,6 +1132,13 @@
 .p-multiselect-panel .p-multiselect-items .p-multiselect-item .p-checkbox {
   margin-right: 0.5rem;
 }
+.p-multiselect-panel .p-multiselect-items .p-multiselect-item-group {
+  margin: 0;
+  padding: 0.75rem 1rem;
+  color: #212529;
+  background: #ffffff;
+  font-weight: 600;
+}
 .p-multiselect-panel .p-multiselect-items .p-multiselect-empty-message {
   padding: 0.5rem 1.5rem;
   color: #212529;

public/themes/fluent-light/theme.css

@@ -124,6 +124,13 @@
   color: #323130;
   background: #edebe9;
 }
+.p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item-group {
+  margin: 0;
+  padding: 0.75rem 0.5rem;
+  color: #0078d4;
+  background: #ffffff;
+  font-weight: 600;
+}
 
 .p-calendar.p-invalid.p-component > .p-inputtext {
   border-color: #a4252c;
@@ -604,6 +611,13 @@
   color: #323130;
   background: #f3f2f1;
 }
+.p-dropdown-panel .p-dropdown-items .p-dropdown-item-group {
+  margin: 0;
+  padding: 0.75rem 0.5rem;
+  color: #0078d4;
+  background: #ffffff;
+  font-weight: 600;
+}
 .p-dropdown-panel .p-dropdown-items .p-dropdown-empty-message {
   padding: 0.75rem 0.5rem;
   color: #323130;
@@ -973,6 +987,13 @@
   outline-offset: 0;
   box-shadow: inset 0 0 0 1px #605e5c;
 }
+.p-listbox .p-listbox-list .p-listbox-item-group {
+  margin: 0;
+  padding: 0.75rem 0.5rem;
+  color: #0078d4;
+  background: #ffffff;
+  font-weight: 600;
+}
 .p-listbox .p-listbox-list .p-listbox-empty-message {
   padding: 0.75rem 0.5rem;
   color: #323130;
@@ -1107,6 +1128,13 @@
 .p-multiselect-panel .p-multiselect-items .p-multiselect-item .p-checkbox {
   margin-right: 0.5rem;
 }
+.p-multiselect-panel .p-multiselect-items .p-multiselect-item-group {
+  margin: 0;
+  padding: 0.75rem 0.5rem;
+  color: #0078d4;
+  background: #ffffff;
+  font-weight: 600;
+}
 .p-multiselect-panel .p-multiselect-items .p-multiselect-empty-message {
   padding: 0.75rem 0.5rem;
   color: #323130;

public/themes/luna-amber/theme.css

@@ -124,6 +124,13 @@
   color: #212529;
   background: #FFE082;
 }
+.p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item-group {
+  margin: 0;
+  padding: 0.857rem;
+  color: #dedede;
+  background: #191919;
+  font-weight: 700;
+}
 
 .p-calendar.p-invalid.p-component > .p-inputtext {
   border-color: #e57373;
@@ -608,6 +615,13 @@
   color: #dedede;
   background: #4c4c4c;
 }
+.p-dropdown-panel .p-dropdown-items .p-dropdown-item-group {
+  margin: 0;
+  padding: 0.857rem;
+  color: #dedede;
+  background: #191919;
+  font-weight: 700;
+}
 .p-dropdown-panel .p-dropdown-items .p-dropdown-empty-message {
   padding: 0.429rem 0.857rem;
   color: #dedede;
@@ -977,6 +991,13 @@
   outline-offset: 0;
   box-shadow: inset 0 0 0 0.2rem white;
 }
+.p-listbox .p-listbox-list .p-listbox-item-group {
+  margin: 0;
+  padding: 0.857rem;
+  color: #dedede;
+  background: #191919;
+  font-weight: 700;
+}
 .p-listbox .p-listbox-list .p-listbox-empty-message {
   padding: 0.429rem 0.857rem;
   color: #dedede;
@@ -1111,6 +1132,13 @@
 .p-multiselect-panel .p-multiselect-items .p-multiselect-item .p-checkbox {
   margin-right: 0.5rem;
 }
+.p-multiselect-panel .p-multiselect-items .p-multiselect-item-group {
+  margin: 0;
+  padding: 0.857rem;
+  color: #dedede;
+  background: #191919;
+  font-weight: 700;
+}
 .p-multiselect-panel .p-multiselect-items .p-multiselect-empty-message {
   padding: 0.429rem 0.857rem;
   color: #dedede;

public/themes/luna-blue/theme.css

@@ -124,6 +124,13 @@
   color: #212529;
   background: #81D4FA;
 }
+.p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item-group {
+  margin: 0;
+  padding: 0.857rem;
+  color: #dedede;
+  background: #191919;
+  font-weight: 700;
+}
 
 .p-calendar.p-invalid.p-component > .p-inputtext {
   border-color: #e57373;
@@ -608,6 +615,13 @@
   color: #dedede;
   background: #4c4c4c;
 }
+.p-dropdown-panel .p-dropdown-items .p-dropdown-item-group {
+  margin: 0;
+  padding: 0.857rem;
+  color: #dedede;
+  background: #191919;
+  font-weight: 700;
+}
 .p-dropdown-panel .p-dropdown-items .p-dropdown-empty-message {
   padding: 0.429rem 0.857rem;
   color: #dedede;
@@ -977,6 +991,13 @@
   outline-offset: 0;
   box-shadow: inset 0 0 0 0.2rem white;
 }
+.p-listbox .p-listbox-list .p-listbox-item-group {
+  margin: 0;
+  padding: 0.857rem;
+  color: #dedede;
+  background: #191919;
+  font-weight: 700;
+}
 .p-listbox .p-listbox-list .p-listbox-empty-message {
   padding: 0.429rem 0.857rem;
   color: #dedede;
@@ -1111,6 +1132,13 @@
 .p-multiselect-panel .p-multiselect-items .p-multiselect-item .p-checkbox {
   margin-right: 0.5rem;
 }
+.p-multiselect-panel .p-multiselect-items .p-multiselect-item-group {
+  margin: 0;
+  padding: 0.857rem;
+  color: #dedede;
+  background: #191919;
+  font-weight: 700;
+}
 .p-multiselect-panel .p-multiselect-items .p-multiselect-empty-message {
   padding: 0.429rem 0.857rem;
   color: #dedede;

public/themes/luna-green/theme.css

@@ -124,6 +124,13 @@
   color: #212529;
   background: #C5E1A5;
 }
+.p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item-group {
+  margin: 0;
+  padding: 0.857rem;
+  color: #dedede;
+  background: #191919;
+  font-weight: 700;
+}
 
 .p-calendar.p-invalid.p-component > .p-inputtext {
   border-color: #e57373;
@@ -608,6 +615,13 @@
   color: #dedede;
   background: #4c4c4c;
 }
+.p-dropdown-panel .p-dropdown-items .p-dropdown-item-group {
+  margin: 0;
+  padding: 0.857rem;
+  color: #dedede;
+  background: #191919;
+  font-weight: 700;
+}
 .p-dropdown-panel .p-dropdown-items .p-dropdown-empty-message {
   padding: 0.429rem 0.857rem;
   color: #dedede;
@@ -977,6 +991,13 @@
   outline-offset: 0;
   box-shadow: inset 0 0 0 0.2rem white;
 }
+.p-listbox .p-listbox-list .p-listbox-item-group {
+  margin: 0;
+  padding: 0.857rem;
+  color: #dedede;
+  background: #191919;
+  font-weight: 700;
+}
 .p-listbox .p-listbox-list .p-listbox-empty-message {
   padding: 0.429rem 0.857rem;
   color: #dedede;
@@ -1111,6 +1132,13 @@
 .p-multiselect-panel .p-multiselect-items .p-multiselect-item .p-checkbox {
   margin-right: 0.5rem;
 }
+.p-multiselect-panel .p-multiselect-items .p-multiselect-item-group {
+  margin: 0;
+  padding: 0.857rem;
+  color: #dedede;
+  background: #191919;
+  font-weight: 700;
+}
 .p-multiselect-panel .p-multiselect-items .p-multiselect-empty-message {
   padding: 0.429rem 0.857rem;
   color: #dedede;

public/themes/luna-pink/theme.css

@@ -124,6 +124,13 @@
   color: #212529;
   background: #F48FB1;
 }
+.p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item-group {
+  margin: 0;
+  padding: 0.857rem;
+  color: #dedede;
+  background: #191919;
+  font-weight: 700;
+}
 
 .p-calendar.p-invalid.p-component > .p-inputtext {
   border-color: #e57373;
@@ -608,6 +615,13 @@
   color: #dedede;
   background: #4c4c4c;
 }
+.p-dropdown-panel .p-dropdown-items .p-dropdown-item-group {
+  margin: 0;
+  padding: 0.857rem;
+  color: #dedede;
+  background: #191919;
+  font-weight: 700;
+}
 .p-dropdown-panel .p-dropdown-items .p-dropdown-empty-message {
   padding: 0.429rem 0.857rem;
   color: #dedede;
@@ -977,6 +991,13 @@
   outline-offset: 0;
   box-shadow: inset 0 0 0 0.2rem white;
 }
+.p-listbox .p-listbox-list .p-listbox-item-group {
+  margin: 0;
+  padding: 0.857rem;
+  color: #dedede;
+  background: #191919;
+  font-weight: 700;
+}
 .p-listbox .p-listbox-list .p-listbox-empty-message {
   padding: 0.429rem 0.857rem;
   color: #dedede;
@@ -1111,6 +1132,13 @@
 .p-multiselect-panel .p-multiselect-items .p-multiselect-item .p-checkbox {
   margin-right: 0.5rem;
 }
+.p-multiselect-panel .p-multiselect-items .p-multiselect-item-group {
+  margin: 0;
+  padding: 0.857rem;
+  color: #dedede;
+  background: #191919;
+  font-weight: 700;
+}
 .p-multiselect-panel .p-multiselect-items .p-multiselect-empty-message {
   padding: 0.429rem 0.857rem;
   color: #dedede;

public/themes/md-dark-deeppurple/theme.css

@@ -148,6 +148,13 @@
   color: #CE93D8;
   background: rgba(206, 147, 216, 0.16);
 }
+.p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item-group {
+  margin: 0;
+  padding: 1rem;
+  color: rgba(255, 255, 255, 0.6);
+  background: transparent;
+  font-weight: 400;
+}
 
 .p-calendar.p-invalid.p-component > .p-inputtext {
   border-color: #f44435;
@@ -628,6 +635,13 @@
   color: rgba(255, 255, 255, 0.87);
   background: rgba(255, 255, 255, 0.04);
 }
+.p-dropdown-panel .p-dropdown-items .p-dropdown-item-group {
+  margin: 0;
+  padding: 1rem;
+  color: rgba(255, 255, 255, 0.6);
+  background: transparent;
+  font-weight: 400;
+}
 .p-dropdown-panel .p-dropdown-items .p-dropdown-empty-message {
   padding: 1rem 1rem;
   color: rgba(255, 255, 255, 0.87);
@@ -997,6 +1011,13 @@
   outline-offset: 0;
   box-shadow: none;
 }
+.p-listbox .p-listbox-list .p-listbox-item-group {
+  margin: 0;
+  padding: 1rem;
+  color: rgba(255, 255, 255, 0.6);
+  background: transparent;
+  font-weight: 400;
+}
 .p-listbox .p-listbox-list .p-listbox-empty-message {
   padding: 1rem 1rem;
   color: rgba(255, 255, 255, 0.87);
@@ -1131,6 +1152,13 @@
 .p-multiselect-panel .p-multiselect-items .p-multiselect-item .p-checkbox {
   margin-right: 0.5rem;
 }
+.p-multiselect-panel .p-multiselect-items .p-multiselect-item-group {
+  margin: 0;
+  padding: 1rem;
+  color: rgba(255, 255, 255, 0.6);
+  background: transparent;
+  font-weight: 400;
+}
 .p-multiselect-panel .p-multiselect-items .p-multiselect-empty-message {
   padding: 1rem 1rem;
   color: rgba(255, 255, 255, 0.87);

public/themes/md-dark-indigo/theme.css

@@ -148,6 +148,13 @@
   color: #9FA8DA;
   background: rgba(159, 168, 218, 0.16);
 }
+.p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item-group {
+  margin: 0;
+  padding: 1rem;
+  color: rgba(255, 255, 255, 0.6);
+  background: transparent;
+  font-weight: 400;
+}
 
 .p-calendar.p-invalid.p-component > .p-inputtext {
   border-color: #f44435;
@@ -628,6 +635,13 @@
   color: rgba(255, 255, 255, 0.87);
   background: rgba(255, 255, 255, 0.04);
 }
+.p-dropdown-panel .p-dropdown-items .p-dropdown-item-group {
+  margin: 0;
+  padding: 1rem;
+  color: rgba(255, 255, 255, 0.6);
+  background: transparent;
+  font-weight: 400;
+}
 .p-dropdown-panel .p-dropdown-items .p-dropdown-empty-message {
   padding: 1rem 1rem;
   color: rgba(255, 255, 255, 0.87);
@@ -997,6 +1011,13 @@
   outline-offset: 0;
   box-shadow: none;
 }
+.p-listbox .p-listbox-list .p-listbox-item-group {
+  margin: 0;
+  padding: 1rem;
+  color: rgba(255, 255, 255, 0.6);
+  background: transparent;
+  font-weight: 400;
+}
 .p-listbox .p-listbox-list .p-listbox-empty-message {
   padding: 1rem 1rem;
   color: rgba(255, 255, 255, 0.87);
@@ -1131,6 +1152,13 @@
 .p-multiselect-panel .p-multiselect-items .p-multiselect-item .p-checkbox {
   margin-right: 0.5rem;
 }
+.p-multiselect-panel .p-multiselect-items .p-multiselect-item-group {
+  margin: 0;
+  padding: 1rem;
+  color: rgba(255, 255, 255, 0.6);
+  background: transparent;
+  font-weight: 400;
+}
 .p-multiselect-panel .p-multiselect-items .p-multiselect-empty-message {
   padding: 1rem 1rem;
   color: rgba(255, 255, 255, 0.87);

public/themes/md-light-deeppurple/theme.css

@@ -148,6 +148,13 @@
   color: #673AB7;
   background: rgba(103, 58, 183, 0.12);
 }
+.p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item-group {
+  margin: 0;
+  padding: 1rem;
+  color: rgba(0, 0, 0, 0.6);
+  background: #ffffff;
+  font-weight: 400;
+}
 
 .p-calendar.p-invalid.p-component > .p-inputtext {
   border-color: #B00020;
@@ -628,6 +635,13 @@
   color: rgba(0, 0, 0, 0.87);
   background: rgba(0, 0, 0, 0.04);
 }
+.p-dropdown-panel .p-dropdown-items .p-dropdown-item-group {
+  margin: 0;
+  padding: 1rem;
+  color: rgba(0, 0, 0, 0.6);
+  background: #ffffff;
+  font-weight: 400;
+}
 .p-dropdown-panel .p-dropdown-items .p-dropdown-empty-message {
   padding: 1rem 1rem;
   color: rgba(0, 0, 0, 0.87);
@@ -997,6 +1011,13 @@
   outline-offset: 0;
   box-shadow: none;
 }
+.p-listbox .p-listbox-list .p-listbox-item-group {
+  margin: 0;
+  padding: 1rem;
+  color: rgba(0, 0, 0, 0.6);
+  background: #ffffff;
+  font-weight: 400;
+}
 .p-listbox .p-listbox-list .p-listbox-empty-message {
   padding: 1rem 1rem;
   color: rgba(0, 0, 0, 0.87);
@@ -1131,6 +1152,13 @@
 .p-multiselect-panel .p-multiselect-items .p-multiselect-item .p-checkbox {
   margin-right: 0.5rem;
 }
+.p-multiselect-panel .p-multiselect-items .p-multiselect-item-group {
+  margin: 0;
+  padding: 1rem;
+  color: rgba(0, 0, 0, 0.6);
+  background: #ffffff;
+  font-weight: 400;
+}
 .p-multiselect-panel .p-multiselect-items .p-multiselect-empty-message {
   padding: 1rem 1rem;
   color: rgba(0, 0, 0, 0.87);

public/themes/md-light-indigo/theme.css

@@ -148,6 +148,13 @@
   color: #3F51B5;
   background: rgba(63, 81, 181, 0.12);
 }
+.p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item-group {
+  margin: 0;
+  padding: 1rem;
+  color: rgba(0, 0, 0, 0.6);
+  background: #ffffff;
+  font-weight: 400;
+}
 
 .p-calendar.p-invalid.p-component > .p-inputtext {
   border-color: #B00020;
@@ -628,6 +635,13 @@
   color: rgba(0, 0, 0, 0.87);
   background: rgba(0, 0, 0, 0.04);
 }
+.p-dropdown-panel .p-dropdown-items .p-dropdown-item-group {
+  margin: 0;
+  padding: 1rem;
+  color: rgba(0, 0, 0, 0.6);
+  background: #ffffff;
+  font-weight: 400;
+}
 .p-dropdown-panel .p-dropdown-items .p-dropdown-empty-message {
   padding: 1rem 1rem;
   color: rgba(0, 0, 0, 0.87);
@@ -997,6 +1011,13 @@
   outline-offset: 0;
   box-shadow: none;
 }
+.p-listbox .p-listbox-list .p-listbox-item-group {
+  margin: 0;
+  padding: 1rem;
+  color: rgba(0, 0, 0, 0.6);
+  background: #ffffff;
+  font-weight: 400;
+}
 .p-listbox .p-listbox-list .p-listbox-empty-message {
   padding: 1rem 1rem;
   color: rgba(0, 0, 0, 0.87);
@@ -1131,6 +1152,13 @@
 .p-multiselect-panel .p-multiselect-items .p-multiselect-item .p-checkbox {
   margin-right: 0.5rem;
 }
+.p-multiselect-panel .p-multiselect-items .p-multiselect-item-group {
+  margin: 0;
+  padding: 1rem;
+  color: rgba(0, 0, 0, 0.6);
+  background: #ffffff;
+  font-weight: 400;
+}
 .p-multiselect-panel .p-multiselect-items .p-multiselect-empty-message {
   padding: 1rem 1rem;
   color: rgba(0, 0, 0, 0.87);

public/themes/mdc-dark-deeppurple/theme.css

@@ -148,6 +148,13 @@
   color: #673AB7;
   background: rgba(103, 58, 183, 0.16);
 }
+.p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item-group {
+  margin: 0;
+  padding: 0.75rem;
+  color: rgba(255, 255, 255, 0.6);
+  background: transparent;
+  font-weight: 400;
+}
 
 .p-calendar.p-invalid.p-component > .p-inputtext {
   border-color: #f44435;
@@ -628,6 +635,13 @@
   color: rgba(255, 255, 255, 0.87);
   background: rgba(255, 255, 255, 0.04);
 }
+.p-dropdown-panel .p-dropdown-items .p-dropdown-item-group {
+  margin: 0;
+  padding: 0.75rem;
+  color: rgba(255, 255, 255, 0.6);
+  background: transparent;
+  font-weight: 400;
+}
 .p-dropdown-panel .p-dropdown-items .p-dropdown-empty-message {
   padding: 0.75rem 0.75rem;
   color: rgba(255, 255, 255, 0.87);
@@ -997,6 +1011,13 @@
   outline-offset: 0;
   box-shadow: none;
 }
+.p-listbox .p-listbox-list .p-listbox-item-group {
+  margin: 0;
+  padding: 0.75rem;
+  color: rgba(255, 255, 255, 0.6);
+  background: transparent;
+  font-weight: 400;
+}
 .p-listbox .p-listbox-list .p-listbox-empty-message {
   padding: 0.75rem 0.75rem;
   color: rgba(255, 255, 255, 0.87);
@@ -1131,6 +1152,13 @@
 .p-multiselect-panel .p-multiselect-items .p-multiselect-item .p-checkbox {
   margin-right: 0.5rem;
 }
+.p-multiselect-panel .p-multiselect-items .p-multiselect-item-group {
+  margin: 0;
+  padding: 0.75rem;
+  color: rgba(255, 255, 255, 0.6);
+  background: transparent;
+  font-weight: 400;
+}
 .p-multiselect-panel .p-multiselect-items .p-multiselect-empty-message {
   padding: 0.75rem 0.75rem;
   color: rgba(255, 255, 255, 0.87);

public/themes/mdc-dark-indigo/theme.css

@@ -148,6 +148,13 @@
   color: #3F51B5;
   background: rgba(63, 81, 181, 0.16);
 }
+.p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item-group {
+  margin: 0;
+  padding: 0.75rem;
+  color: rgba(255, 255, 255, 0.6);
+  background: transparent;
+  font-weight: 400;
+}
 
 .p-calendar.p-invalid.p-component > .p-inputtext {
   border-color: #f44435;
@@ -628,6 +635,13 @@
   color: rgba(255, 255, 255, 0.87);
   background: rgba(255, 255, 255, 0.04);
 }
+.p-dropdown-panel .p-dropdown-items .p-dropdown-item-group {
+  margin: 0;
+  padding: 0.75rem;
+  color: rgba(255, 255, 255, 0.6);
+  background: transparent;
+  font-weight: 400;
+}
 .p-dropdown-panel .p-dropdown-items .p-dropdown-empty-message {
   padding: 0.75rem 0.75rem;
   color: rgba(255, 255, 255, 0.87);
@@ -997,6 +1011,13 @@
   outline-offset: 0;
   box-shadow: none;
 }
+.p-listbox .p-listbox-list .p-listbox-item-group {
+  margin: 0;
+  padding: 0.75rem;
+  color: rgba(255, 255, 255, 0.6);
+  background: transparent;
+  font-weight: 400;
+}
 .p-listbox .p-listbox-list .p-listbox-empty-message {
   padding: 0.75rem 0.75rem;
   color: rgba(255, 255, 255, 0.87);
@@ -1131,6 +1152,13 @@
 .p-multiselect-panel .p-multiselect-items .p-multiselect-item .p-checkbox {
   margin-right: 0.5rem;
 }
+.p-multiselect-panel .p-multiselect-items .p-multiselect-item-group {
+  margin: 0;
+  padding: 0.75rem;
+  color: rgba(255, 255, 255, 0.6);
+  background: transparent;
+  font-weight: 400;
+}
 .p-multiselect-panel .p-multiselect-items .p-multiselect-empty-message {
   padding: 0.75rem 0.75rem;
   color: rgba(255, 255, 255, 0.87);

public/themes/mdc-light-deeppurple/theme.css

@@ -148,6 +148,13 @@
   color: #673AB7;
   background: rgba(103, 58, 183, 0.12);
 }
+.p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item-group {
+  margin: 0;
+  padding: 0.75rem;
+  color: rgba(0, 0, 0, 0.6);
+  background: #ffffff;
+  font-weight: 400;
+}
 
 .p-calendar.p-invalid.p-component > .p-inputtext {
   border-color: #B00020;
@@ -628,6 +635,13 @@
   color: rgba(0, 0, 0, 0.87);
   background: rgba(0, 0, 0, 0.04);
 }
+.p-dropdown-panel .p-dropdown-items .p-dropdown-item-group {
+  margin: 0;
+  padding: 0.75rem;
+  color: rgba(0, 0, 0, 0.6);
+  background: #ffffff;
+  font-weight: 400;
+}
 .p-dropdown-panel .p-dropdown-items .p-dropdown-empty-message {
   padding: 0.75rem 0.75rem;
   color: rgba(0, 0, 0, 0.87);
@@ -997,6 +1011,13 @@
   outline-offset: 0;
   box-shadow: none;
 }
+.p-listbox .p-listbox-list .p-listbox-item-group {
+  margin: 0;
+  padding: 0.75rem;
+  color: rgba(0, 0, 0, 0.6);
+  background: #ffffff;
+  font-weight: 400;
+}
 .p-listbox .p-listbox-list .p-listbox-empty-message {
   padding: 0.75rem 0.75rem;
   color: rgba(0, 0, 0, 0.87);
@@ -1131,6 +1152,13 @@
 .p-multiselect-panel .p-multiselect-items .p-multiselect-item .p-checkbox {
   margin-right: 0.5rem;
 }
+.p-multiselect-panel .p-multiselect-items .p-multiselect-item-group {
+  margin: 0;
+  padding: 0.75rem;
+  color: rgba(0, 0, 0, 0.6);
+  background: #ffffff;
+  font-weight: 400;
+}
 .p-multiselect-panel .p-multiselect-items .p-multiselect-empty-message {
   padding: 0.75rem 0.75rem;
   color: rgba(0, 0, 0, 0.87);

public/themes/mdc-light-indigo/theme.css

@@ -148,6 +148,13 @@
   color: #3F51B5;
   background: rgba(63, 81, 181, 0.12);
 }
+.p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item-group {
+  margin: 0;
+  padding: 0.75rem;
+  color: rgba(0, 0, 0, 0.6);
+  background: #ffffff;
+  font-weight: 400;
+}
 
 .p-calendar.p-invalid.p-component > .p-inputtext {
   border-color: #B00020;
@@ -628,6 +635,13 @@
   color: rgba(0, 0, 0, 0.87);
   background: rgba(0, 0, 0, 0.04);
 }
+.p-dropdown-panel .p-dropdown-items .p-dropdown-item-group {
+  margin: 0;
+  padding: 0.75rem;
+  color: rgba(0, 0, 0, 0.6);
+  background: #ffffff;
+  font-weight: 400;
+}
 .p-dropdown-panel .p-dropdown-items .p-dropdown-empty-message {
   padding: 0.75rem 0.75rem;
   color: rgba(0, 0, 0, 0.87);
@@ -997,6 +1011,13 @@
   outline-offset: 0;
   box-shadow: none;
 }
+.p-listbox .p-listbox-list .p-listbox-item-group {
+  margin: 0;
+  padding: 0.75rem;
+  color: rgba(0, 0, 0, 0.6);
+  background: #ffffff;
+  font-weight: 400;
+}
 .p-listbox .p-listbox-list .p-listbox-empty-message {
   padding: 0.75rem 0.75rem;
   color: rgba(0, 0, 0, 0.87);
@@ -1131,6 +1152,13 @@
 .p-multiselect-panel .p-multiselect-items .p-multiselect-item .p-checkbox {
   margin-right: 0.5rem;
 }
+.p-multiselect-panel .p-multiselect-items .p-multiselect-item-group {
+  margin: 0;
+  padding: 0.75rem;
+  color: rgba(0, 0, 0, 0.6);
+  background: #ffffff;
+  font-weight: 400;
+}
 .p-multiselect-panel .p-multiselect-items .p-multiselect-empty-message {
   padding: 0.75rem 0.75rem;
   color: rgba(0, 0, 0, 0.87);

public/themes/nova-accent/theme.css

@@ -124,6 +124,13 @@
   color: #ffffff;
   background: #e02365;
 }
+.p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item-group {
+  margin: 0;
+  padding: 0.857rem;
+  color: #333333;
+  background: #f4f4f4;
+  font-weight: 700;
+}
 
 .p-calendar.p-invalid.p-component > .p-inputtext {
   border-color: #a80000;
@@ -604,6 +611,13 @@
   color: #333333;
   background: #eaeaea;
 }
+.p-dropdown-panel .p-dropdown-items .p-dropdown-item-group {
+  margin: 0;
+  padding: 0.857rem;
+  color: #333333;
+  background: #f4f4f4;
+  font-weight: 700;
+}
 .p-dropdown-panel .p-dropdown-items .p-dropdown-empty-message {
   padding: 0.429rem 0.857rem;
   color: #333333;
@@ -973,6 +987,13 @@
   outline-offset: 0;
   box-shadow: inset 0 0 0 0.2rem #8dcdff;
 }
+.p-listbox .p-listbox-list .p-listbox-item-group {
+  margin: 0;
+  padding: 0.857rem;
+  color: #333333;
+  background: #f4f4f4;
+  font-weight: 700;
+}
 .p-listbox .p-listbox-list .p-listbox-empty-message {
   padding: 0.429rem 0.857rem;
   color: #333333;
@@ -1107,6 +1128,13 @@
 .p-multiselect-panel .p-multiselect-items .p-multiselect-item .p-checkbox {
   margin-right: 0.5rem;
 }
+.p-multiselect-panel .p-multiselect-items .p-multiselect-item-group {
+  margin: 0;
+  padding: 0.857rem;
+  color: #333333;
+  background: #f4f4f4;
+  font-weight: 700;
+}
 .p-multiselect-panel .p-multiselect-items .p-multiselect-empty-message {
   padding: 0.429rem 0.857rem;
   color: #333333;

public/themes/nova-alt/theme.css

@@ -124,6 +124,13 @@
   color: #ffffff;
   background: #007ad9;
 }
+.p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item-group {
+  margin: 0;
+  padding: 0.857rem;
+  color: #333333;
+  background: #f4f4f4;
+  font-weight: 700;
+}
 
 .p-calendar.p-invalid.p-component > .p-inputtext {
   border-color: #a80000;
@@ -608,6 +615,13 @@
   color: #333333;
   background: #eaeaea;
 }
+.p-dropdown-panel .p-dropdown-items .p-dropdown-item-group {
+  margin: 0;
+  padding: 0.857rem;
+  color: #333333;
+  background: #f4f4f4;
+  font-weight: 700;
+}
 .p-dropdown-panel .p-dropdown-items .p-dropdown-empty-message {
   padding: 0.429rem 0.857rem;
   color: #333333;
@@ -977,6 +991,13 @@
   outline-offset: 0;
   box-shadow: inset 0 0 0 0.2rem #8dcdff;
 }
+.p-listbox .p-listbox-list .p-listbox-item-group {
+  margin: 0;
+  padding: 0.857rem;
+  color: #333333;
+  background: #f4f4f4;
+  font-weight: 700;
+}
 .p-listbox .p-listbox-list .p-listbox-empty-message {
   padding: 0.429rem 0.857rem;
   color: #333333;
@@ -1111,6 +1132,13 @@
 .p-multiselect-panel .p-multiselect-items .p-multiselect-item .p-checkbox {
   margin-right: 0.5rem;
 }
+.p-multiselect-panel .p-multiselect-items .p-multiselect-item-group {
+  margin: 0;
+  padding: 0.857rem;
+  color: #333333;
+  background: #f4f4f4;
+  font-weight: 700;
+}
 .p-multiselect-panel .p-multiselect-items .p-multiselect-empty-message {
   padding: 0.429rem 0.857rem;
   color: #333333;

public/themes/nova-vue/theme.css

@@ -124,6 +124,13 @@
   color: #ffffff;
   background: #41b883;
 }
+.p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item-group {
+  margin: 0;
+  padding: 0.857rem;
+  color: #333333;
+  background: #f4f4f4;
+  font-weight: 700;
+}
 
 .p-calendar.p-invalid.p-component > .p-inputtext {
   border-color: #a80000;
@@ -608,6 +615,13 @@
   color: #333333;
   background: #eaeaea;
 }
+.p-dropdown-panel .p-dropdown-items .p-dropdown-item-group {
+  margin: 0;
+  padding: 0.857rem;
+  color: #333333;
+  background: #f4f4f4;
+  font-weight: 700;
+}
 .p-dropdown-panel .p-dropdown-items .p-dropdown-empty-message {
   padding: 0.429rem 0.857rem;
   color: #333333;
@@ -977,6 +991,13 @@
   outline-offset: 0;
   box-shadow: inset 0 0 0 0.2rem #c2e9d8;
 }
+.p-listbox .p-listbox-list .p-listbox-item-group {
+  margin: 0;
+  padding: 0.857rem;
+  color: #333333;
+  background: #f4f4f4;
+  font-weight: 700;
+}
 .p-listbox .p-listbox-list .p-listbox-empty-message {
   padding: 0.429rem 0.857rem;
   color: #333333;
@@ -1111,6 +1132,13 @@
 .p-multiselect-panel .p-multiselect-items .p-multiselect-item .p-checkbox {
   margin-right: 0.5rem;
 }
+.p-multiselect-panel .p-multiselect-items .p-multiselect-item-group {
+  margin: 0;
+  padding: 0.857rem;
+  color: #333333;
+  background: #f4f4f4;
+  font-weight: 700;
+}
 .p-multiselect-panel .p-multiselect-items .p-multiselect-empty-message {
   padding: 0.429rem 0.857rem;
   color: #333333;

public/themes/nova/theme.css

@@ -124,6 +124,13 @@
   color: #ffffff;
   background: #007ad9;
 }
+.p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item-group {
+  margin: 0;
+  padding: 0.857rem;
+  color: #333333;
+  background: #f4f4f4;
+  font-weight: 700;
+}
 
 .p-calendar.p-invalid.p-component > .p-inputtext {
   border-color: #a80000;
@@ -608,6 +615,13 @@
   color: #333333;
   background: #eaeaea;
 }
+.p-dropdown-panel .p-dropdown-items .p-dropdown-item-group {
+  margin: 0;
+  padding: 0.857rem;
+  color: #333333;
+  background: #f4f4f4;
+  font-weight: 700;
+}
 .p-dropdown-panel .p-dropdown-items .p-dropdown-empty-message {
   padding: 0.429rem 0.857rem;
   color: #333333;
@@ -977,6 +991,13 @@
   outline-offset: 0;
   box-shadow: inset 0 0 0 0.2rem #8dcdff;
 }
+.p-listbox .p-listbox-list .p-listbox-item-group {
+  margin: 0;
+  padding: 0.857rem;
+  color: #333333;
+  background: #f4f4f4;
+  font-weight: 700;
+}
 .p-listbox .p-listbox-list .p-listbox-empty-message {
   padding: 0.429rem 0.857rem;
   color: #333333;
@@ -1111,6 +1132,13 @@
 .p-multiselect-panel .p-multiselect-items .p-multiselect-item .p-checkbox {
   margin-right: 0.5rem;
 }
+.p-multiselect-panel .p-multiselect-items .p-multiselect-item-group {
+  margin: 0;
+  padding: 0.857rem;
+  color: #333333;
+  background: #f4f4f4;
+  font-weight: 700;
+}
 .p-multiselect-panel .p-multiselect-items .p-multiselect-empty-message {
   padding: 0.429rem 0.857rem;
   color: #333333;

public/themes/rhea/theme.css

@@ -124,6 +124,13 @@
   color: #385048;
   background: #AFD3C8;
 }
+.p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item-group {
+  margin: 0;
+  padding: 0.857rem;
+  color: #666666;
+  background: #f4f4f4;
+  font-weight: 700;
+}
 
 .p-calendar.p-invalid.p-component > .p-inputtext {
   border-color: #e7a3a3;
@@ -604,6 +611,13 @@
   color: #666666;
   background: #f4f4f4;
 }
+.p-dropdown-panel .p-dropdown-items .p-dropdown-item-group {
+  margin: 0;
+  padding: 0.857rem;
+  color: #666666;
+  background: #f4f4f4;
+  font-weight: 700;
+}
 .p-dropdown-panel .p-dropdown-items .p-dropdown-empty-message {
   padding: 0.429rem 0.857rem;
   color: #666666;
@@ -973,6 +987,13 @@
   outline-offset: 0;
   box-shadow: inset 0 0 0 0.2rem #e4e9ec;
 }
+.p-listbox .p-listbox-list .p-listbox-item-group {
+  margin: 0;
+  padding: 0.857rem;
+  color: #666666;
+  background: #f4f4f4;
+  font-weight: 700;
+}
 .p-listbox .p-listbox-list .p-listbox-empty-message {
   padding: 0.429rem 0.857rem;
   color: #666666;
@@ -1107,6 +1128,13 @@
 .p-multiselect-panel .p-multiselect-items .p-multiselect-item .p-checkbox {
   margin-right: 0.5rem;
 }
+.p-multiselect-panel .p-multiselect-items .p-multiselect-item-group {
+  margin: 0;
+  padding: 0.857rem;
+  color: #666666;
+  background: #f4f4f4;
+  font-weight: 700;
+}
 .p-multiselect-panel .p-multiselect-items .p-multiselect-empty-message {
   padding: 0.429rem 0.857rem;
   color: #666666;

public/themes/saga-blue/theme.css

@@ -124,6 +124,13 @@
   color: #495057;
   background: #E3F2FD;
 }
+.p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item-group {
+  margin: 0;
+  padding: 0.75rem 1rem;
+  color: #495057;
+  background: #ffffff;
+  font-weight: 600;
+}
 
 .p-calendar.p-invalid.p-component > .p-inputtext {
   border-color: #f44336;
@@ -604,6 +611,13 @@
   color: #495057;
   background: #e9ecef;
 }
+.p-dropdown-panel .p-dropdown-items .p-dropdown-item-group {
+  margin: 0;
+  padding: 0.75rem 1rem;
+  color: #495057;
+  background: #ffffff;
+  font-weight: 600;
+}
 .p-dropdown-panel .p-dropdown-items .p-dropdown-empty-message {
   padding: 0.5rem 1rem;
   color: #495057;
@@ -973,6 +987,13 @@
   outline-offset: 0;
   box-shadow: inset 0 0 0 0.15rem #a6d5fa;
 }
+.p-listbox .p-listbox-list .p-listbox-item-group {
+  margin: 0;
+  padding: 0.75rem 1rem;
+  color: #495057;
+  background: #ffffff;
+  font-weight: 600;
+}
 .p-listbox .p-listbox-list .p-listbox-empty-message {
   padding: 0.5rem 1rem;
   color: #495057;
@@ -1107,6 +1128,13 @@
 .p-multiselect-panel .p-multiselect-items .p-multiselect-item .p-checkbox {
   margin-right: 0.5rem;
 }
+.p-multiselect-panel .p-multiselect-items .p-multiselect-item-group {
+  margin: 0;
+  padding: 0.75rem 1rem;
+  color: #495057;
+  background: #ffffff;
+  font-weight: 600;
+}
 .p-multiselect-panel .p-multiselect-items .p-multiselect-empty-message {
   padding: 0.5rem 1rem;
   color: #495057;

public/themes/saga-green/theme.css

@@ -124,6 +124,13 @@
   color: #495057;
   background: #E8F5E9;
 }
+.p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item-group {
+  margin: 0;
+  padding: 0.75rem 1rem;
+  color: #495057;
+  background: #ffffff;
+  font-weight: 600;
+}
 
 .p-calendar.p-invalid.p-component > .p-inputtext {
   border-color: #f44336;
@@ -604,6 +611,13 @@
   color: #495057;
   background: #e9ecef;
 }
+.p-dropdown-panel .p-dropdown-items .p-dropdown-item-group {
+  margin: 0;
+  padding: 0.75rem 1rem;
+  color: #495057;
+  background: #ffffff;
+  font-weight: 600;
+}
 .p-dropdown-panel .p-dropdown-items .p-dropdown-empty-message {
   padding: 0.5rem 1rem;
   color: #495057;
@@ -973,6 +987,13 @@
   outline-offset: 0;
   box-shadow: inset 0 0 0 0.15rem #b7e0b8;
 }
+.p-listbox .p-listbox-list .p-listbox-item-group {
+  margin: 0;
+  padding: 0.75rem 1rem;
+  color: #495057;
+  background: #ffffff;
+  font-weight: 600;
+}
 .p-listbox .p-listbox-list .p-listbox-empty-message {
   padding: 0.5rem 1rem;
   color: #495057;
@@ -1107,6 +1128,13 @@
 .p-multiselect-panel .p-multiselect-items .p-multiselect-item .p-checkbox {
   margin-right: 0.5rem;
 }
+.p-multiselect-panel .p-multiselect-items .p-multiselect-item-group {
+  margin: 0;
+  padding: 0.75rem 1rem;
+  color: #495057;
+  background: #ffffff;
+  font-weight: 600;
+}
 .p-multiselect-panel .p-multiselect-items .p-multiselect-empty-message {
   padding: 0.5rem 1rem;
   color: #495057;

public/themes/saga-orange/theme.css

@@ -124,6 +124,13 @@
   color: #495057;
   background: #FFF3E0;
 }
+.p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item-group {
+  margin: 0;
+  padding: 0.75rem 1rem;
+  color: #495057;
+  background: #ffffff;
+  font-weight: 600;
+}
 
 .p-calendar.p-invalid.p-component > .p-inputtext {
   border-color: #f44336;
@@ -604,6 +611,13 @@
   color: #495057;
   background: #e9ecef;
 }
+.p-dropdown-panel .p-dropdown-items .p-dropdown-item-group {
+  margin: 0;
+  padding: 0.75rem 1rem;
+  color: #495057;
+  background: #ffffff;
+  font-weight: 600;
+}
 .p-dropdown-panel .p-dropdown-items .p-dropdown-empty-message {
   padding: 0.5rem 1rem;
   color: #495057;
@@ -973,6 +987,13 @@
   outline-offset: 0;
   box-shadow: inset 0 0 0 0.15rem #ffe69c;
 }
+.p-listbox .p-listbox-list .p-listbox-item-group {
+  margin: 0;
+  padding: 0.75rem 1rem;
+  color: #495057;
+  background: #ffffff;
+  font-weight: 600;
+}
 .p-listbox .p-listbox-list .p-listbox-empty-message {
   padding: 0.5rem 1rem;
   color: #495057;
@@ -1107,6 +1128,13 @@
 .p-multiselect-panel .p-multiselect-items .p-multiselect-item .p-checkbox {
   margin-right: 0.5rem;
 }
+.p-multiselect-panel .p-multiselect-items .p-multiselect-item-group {
+  margin: 0;
+  padding: 0.75rem 1rem;
+  color: #495057;
+  background: #ffffff;
+  font-weight: 600;
+}
 .p-multiselect-panel .p-multiselect-items .p-multiselect-empty-message {
   padding: 0.5rem 1rem;
   color: #495057;

public/themes/saga-purple/theme.css

@@ -124,6 +124,13 @@
   color: #495057;
   background: #F3E5F5;
 }
+.p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item-group {
+  margin: 0;
+  padding: 0.75rem 1rem;
+  color: #495057;
+  background: #ffffff;
+  font-weight: 600;
+}
 
 .p-calendar.p-invalid.p-component > .p-inputtext {
   border-color: #f44336;
@@ -604,6 +611,13 @@
   color: #495057;
   background: #e9ecef;
 }
+.p-dropdown-panel .p-dropdown-items .p-dropdown-item-group {
+  margin: 0;
+  padding: 0.75rem 1rem;
+  color: #495057;
+  background: #ffffff;
+  font-weight: 600;
+}
 .p-dropdown-panel .p-dropdown-items .p-dropdown-empty-message {
   padding: 0.5rem 1rem;
   color: #495057;
@@ -973,6 +987,13 @@
   outline-offset: 0;
   box-shadow: inset 0 0 0 0.15rem #df9eea;
 }
+.p-listbox .p-listbox-list .p-listbox-item-group {
+  margin: 0;
+  padding: 0.75rem 1rem;
+  color: #495057;
+  background: #ffffff;
+  font-weight: 600;
+}
 .p-listbox .p-listbox-list .p-listbox-empty-message {
   padding: 0.5rem 1rem;
   color: #495057;
@@ -1107,6 +1128,13 @@
 .p-multiselect-panel .p-multiselect-items .p-multiselect-item .p-checkbox {
   margin-right: 0.5rem;
 }
+.p-multiselect-panel .p-multiselect-items .p-multiselect-item-group {
+  margin: 0;
+  padding: 0.75rem 1rem;
+  color: #495057;
+  background: #ffffff;
+  font-weight: 600;
+}
 .p-multiselect-panel .p-multiselect-items .p-multiselect-empty-message {
   padding: 0.5rem 1rem;
   color: #495057;

public/themes/vela-blue/theme.css

@@ -124,6 +124,13 @@
   color: rgba(255, 255, 255, 0.87);
   background: rgba(100, 181, 246, 0.16);
 }
+.p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item-group {
+  margin: 0;
+  padding: 0.75rem 1rem;
+  color: rgba(255, 255, 255, 0.87);
+  background: #1f2d40;
+  font-weight: 600;
+}
 
 .p-calendar.p-invalid.p-component > .p-inputtext {
   border-color: #ef9a9a;
@@ -604,6 +611,13 @@
   color: rgba(255, 255, 255, 0.87);
   background: rgba(255, 255, 255, 0.03);
 }
+.p-dropdown-panel .p-dropdown-items .p-dropdown-item-group {
+  margin: 0;
+  padding: 0.75rem 1rem;
+  color: rgba(255, 255, 255, 0.87);
+  background: #1f2d40;
+  font-weight: 600;
+}
 .p-dropdown-panel .p-dropdown-items .p-dropdown-empty-message {
   padding: 0.5rem 1rem;
   color: rgba(255, 255, 255, 0.87);
@@ -973,6 +987,13 @@
   outline-offset: 0;
   box-shadow: inset 0 0 0 1px #93cbf9;
 }
+.p-listbox .p-listbox-list .p-listbox-item-group {
+  margin: 0;
+  padding: 0.75rem 1rem;
+  color: rgba(255, 255, 255, 0.87);
+  background: #1f2d40;
+  font-weight: 600;
+}
 .p-listbox .p-listbox-list .p-listbox-empty-message {
   padding: 0.5rem 1rem;
   color: rgba(255, 255, 255, 0.87);
@@ -1107,6 +1128,13 @@
 .p-multiselect-panel .p-multiselect-items .p-multiselect-item .p-checkbox {
   margin-right: 0.5rem;
 }
+.p-multiselect-panel .p-multiselect-items .p-multiselect-item-group {
+  margin: 0;
+  padding: 0.75rem 1rem;
+  color: rgba(255, 255, 255, 0.87);
+  background: #1f2d40;
+  font-weight: 600;
+}
 .p-multiselect-panel .p-multiselect-items .p-multiselect-empty-message {
   padding: 0.5rem 1rem;
   color: rgba(255, 255, 255, 0.87);

public/themes/vela-green/theme.css

@@ -124,6 +124,13 @@
   color: rgba(255, 255, 255, 0.87);
   background: rgba(129, 199, 132, 0.16);
 }
+.p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item-group {
+  margin: 0;
+  padding: 0.75rem 1rem;
+  color: rgba(255, 255, 255, 0.87);
+  background: #1f2d40;
+  font-weight: 600;
+}
 
 .p-calendar.p-invalid.p-component > .p-inputtext {
   border-color: #ef9a9a;
@@ -604,6 +611,13 @@
   color: rgba(255, 255, 255, 0.87);
   background: rgba(255, 255, 255, 0.03);
 }
+.p-dropdown-panel .p-dropdown-items .p-dropdown-item-group {
+  margin: 0;
+  padding: 0.75rem 1rem;
+  color: rgba(255, 255, 255, 0.87);
+  background: #1f2d40;
+  font-weight: 600;
+}
 .p-dropdown-panel .p-dropdown-items .p-dropdown-empty-message {
   padding: 0.5rem 1rem;
   color: rgba(255, 255, 255, 0.87);
@@ -973,6 +987,13 @@
   outline-offset: 0;
   box-shadow: inset 0 0 0 1px #a7d8a9;
 }
+.p-listbox .p-listbox-list .p-listbox-item-group {
+  margin: 0;
+  padding: 0.75rem 1rem;
+  color: rgba(255, 255, 255, 0.87);
+  background: #1f2d40;
+  font-weight: 600;
+}
 .p-listbox .p-listbox-list .p-listbox-empty-message {
   padding: 0.5rem 1rem;
   color: rgba(255, 255, 255, 0.87);
@@ -1107,6 +1128,13 @@
 .p-multiselect-panel .p-multiselect-items .p-multiselect-item .p-checkbox {
   margin-right: 0.5rem;
 }
+.p-multiselect-panel .p-multiselect-items .p-multiselect-item-group {
+  margin: 0;
+  padding: 0.75rem 1rem;
+  color: rgba(255, 255, 255, 0.87);
+  background: #1f2d40;
+  font-weight: 600;
+}
 .p-multiselect-panel .p-multiselect-items .p-multiselect-empty-message {
   padding: 0.5rem 1rem;
   color: rgba(255, 255, 255, 0.87);

public/themes/vela-orange/theme.css

@@ -124,6 +124,13 @@
   color: rgba(255, 255, 255, 0.87);
   background: rgba(255, 213, 79, 0.16);
 }
+.p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item-group {
+  margin: 0;
+  padding: 0.75rem 1rem;
+  color: rgba(255, 255, 255, 0.87);
+  background: #1f2d40;
+  font-weight: 600;
+}
 
 .p-calendar.p-invalid.p-component > .p-inputtext {
   border-color: #ef9a9a;
@@ -604,6 +611,13 @@
   color: rgba(255, 255, 255, 0.87);
   background: rgba(255, 255, 255, 0.03);
 }
+.p-dropdown-panel .p-dropdown-items .p-dropdown-item-group {
+  margin: 0;
+  padding: 0.75rem 1rem;
+  color: rgba(255, 255, 255, 0.87);
+  background: #1f2d40;
+  font-weight: 600;
+}
 .p-dropdown-panel .p-dropdown-items .p-dropdown-empty-message {
   padding: 0.5rem 1rem;
   color: rgba(255, 255, 255, 0.87);
@@ -973,6 +987,13 @@
   outline-offset: 0;
   box-shadow: inset 0 0 0 1px #ffe284;
 }
+.p-listbox .p-listbox-list .p-listbox-item-group {
+  margin: 0;
+  padding: 0.75rem 1rem;
+  color: rgba(255, 255, 255, 0.87);
+  background: #1f2d40;
+  font-weight: 600;
+}
 .p-listbox .p-listbox-list .p-listbox-empty-message {
   padding: 0.5rem 1rem;
   color: rgba(255, 255, 255, 0.87);
@@ -1107,6 +1128,13 @@
 .p-multiselect-panel .p-multiselect-items .p-multiselect-item .p-checkbox {
   margin-right: 0.5rem;
 }
+.p-multiselect-panel .p-multiselect-items .p-multiselect-item-group {
+  margin: 0;
+  padding: 0.75rem 1rem;
+  color: rgba(255, 255, 255, 0.87);
+  background: #1f2d40;
+  font-weight: 600;
+}
 .p-multiselect-panel .p-multiselect-items .p-multiselect-empty-message {
   padding: 0.5rem 1rem;
   color: rgba(255, 255, 255, 0.87);

public/themes/vela-purple/theme.css

@@ -124,6 +124,13 @@
   color: rgba(255, 255, 255, 0.87);
   background: rgba(186, 104, 200, 0.16);
 }
+.p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item-group {
+  margin: 0;
+  padding: 0.75rem 1rem;
+  color: rgba(255, 255, 255, 0.87);
+  background: #1f2d40;
+  font-weight: 600;
+}
 
 .p-calendar.p-invalid.p-component > .p-inputtext {
   border-color: #ef9a9a;
@@ -604,6 +611,13 @@
   color: rgba(255, 255, 255, 0.87);
   background: rgba(255, 255, 255, 0.03);
 }
+.p-dropdown-panel .p-dropdown-items .p-dropdown-item-group {
+  margin: 0;
+  padding: 0.75rem 1rem;
+  color: rgba(255, 255, 255, 0.87);
+  background: #1f2d40;
+  font-weight: 600;
+}
 .p-dropdown-panel .p-dropdown-items .p-dropdown-empty-message {
   padding: 0.5rem 1rem;
   color: rgba(255, 255, 255, 0.87);
@@ -973,6 +987,13 @@
   outline-offset: 0;
   box-shadow: inset 0 0 0 1px #cf95d9;
 }
+.p-listbox .p-listbox-list .p-listbox-item-group {
+  margin: 0;
+  padding: 0.75rem 1rem;
+  color: rgba(255, 255, 255, 0.87);
+  background: #1f2d40;
+  font-weight: 600;
+}
 .p-listbox .p-listbox-list .p-listbox-empty-message {
   padding: 0.5rem 1rem;
   color: rgba(255, 255, 255, 0.87);
@@ -1107,6 +1128,13 @@
 .p-multiselect-panel .p-multiselect-items .p-multiselect-item .p-checkbox {
   margin-right: 0.5rem;
 }
+.p-multiselect-panel .p-multiselect-items .p-multiselect-item-group {
+  margin: 0;
+  padding: 0.75rem 1rem;
+  color: rgba(255, 255, 255, 0.87);
+  background: #1f2d40;
+  font-weight: 600;
+}
 .p-multiselect-panel .p-multiselect-items .p-multiselect-empty-message {
   padding: 0.5rem 1rem;
   color: rgba(255, 255, 255, 0.87);

src/components/api/FilterService.js

@@ -1,6 +1,24 @@
 import {ObjectUtils} from 'primevue/utils';
 
 const FilterService = {
+    filter(value, fields, filterValue, filterMatchMode, filterLocale) {
+        let filteredItems = [];
+
+        if (value) {
+            for (let item of value) {
+                for (let field of fields) {
+                    let fieldValue = ObjectUtils.resolveFieldData(item, field);
+
+                    if (this.filters[filterMatchMode](fieldValue, filterValue, filterLocale)) {
+                        filteredItems.push(item);
+                        break;
+                    }
+                }
+            }
+        }
+
+        return filteredItems;
+    },
     filters: {
         startsWith(value, filter, filterLocale)  {
             if (filter === undefined || filter === null || filter.trim() === '') {

src/components/config/PrimeVue.js

@@ -42,7 +42,9 @@ const defaultOptions = {
         weak: 'Weak',
         medium: 'Medium',
         strong: 'Strong',
-        passwordPrompt: 'Enter a password'
+        passwordPrompt: 'Enter a password',
+        emptyFilterMessage: 'No results found',
+        emptyMessage: 'No available options'
     },
     filterMatchModeOptions: {
         text: [

src/components/listbox/Listbox.d.ts

@@ -6,6 +6,8 @@ interface ListboxProps {
     optionLabel?: string;
     optionValue?: any;
     optionDisabled?: boolean;
+    optionGroupLabel?: string;
+    optionGroupChildren?: string;
     listStyle?: string;
     disabled?: boolean;
     dataKey?: string;
@@ -14,8 +16,11 @@ interface ListboxProps {
     filter?: boolean;
     filterPlaceholder?: string;
     filterLocale?: string;
+    filterMatchMode?: string;
+    filterFields?: string[];
     ariaLabelledBy?: string;
     emptyFilterMessage?: string;
+    emptyMessage?: string;
 }
 
 declare class Listbox {

src/components/listbox/Listbox.vue

@@ -1,5 +1,6 @@
 <template>
     <div class="p-listbox p-component">
+        <slot name="header" :value="modelValue" :options="visibleOptions"></slot>
         <div class="p-listbox-header" v-if="filter">
             <div class="p-listbox-filter-container">
                 <input type="text" class="p-listbox-filter p-inputtext p-component" v-model="filterValue" :placeholder="filterPlaceholder" @input="onFilterChange">
@@ -8,21 +9,39 @@
         </div>
         <div class="p-listbox-list-wrapper" :style="listStyle">
             <ul class="p-listbox-list" role="listbox" aria-multiselectable="multiple">
-                <li v-for="(option, i) of visibleOptions" :tabindex="isOptionDisabled(option) ? null : '0'" :class="['p-listbox-item', {'p-highlight': isSelected(option), 'p-disabled': isOptionDisabled(option)}]" v-ripple
+                <template v-if="!optionGroupLabel">
-                    :aria-label="getOptionLabel(option)" :key="getOptionRenderKey(option)" @click="onOptionSelect($event, option)" @touchend="onOptionTouchEnd()" @keydown="onOptionKeyDown($event, option)" role="option" :aria-selected="isSelected(option)">
+                    <li v-for="(option, i) of visibleOptions" :tabindex="isOptionDisabled(option) ? null : '0'" :class="['p-listbox-item', {'p-highlight': isSelected(option), 'p-disabled': isOptionDisabled(option)}]" v-ripple
-                    <slot name="option" :option="option" :index="i">
+                    :key="getOptionRenderKey(option)" @click="onOptionSelect($event, option)" @touchend="onOptionTouchEnd()" @keydown="onOptionKeyDown($event, option)" role="option" :aria-label="getOptionLabel(option)" :aria-selected="isSelected(option)" >
-                        {{getOptionLabel(option)}}
+                    <slot name="option" :option="option" :index="i">{{getOptionLabel(option)}} </slot>
-                    </slot>
+                </li>
+                </template>
+                <template v-else>
+                    <template v-for="(optionGroup, i) of visibleOptions" :key="getOptionGroupRenderKey(optionGroup)">
+                        <li  class="p-listbox-item-group" >
+                            <slot name="optiongroup" :option="optionGroup" :index="i">{{getOptionGroupLabel(optionGroup)}}</slot>
+                        </li>
+                        <li v-for="(option, i) of getOptionGroupChildren(optionGroup)" :tabindex="isOptionDisabled(option) ? null : '0'" :class="['p-listbox-item', {'p-highlight': isSelected(option), 'p-disabled': isOptionDisabled(option)}]" v-ripple
+                            :key="getOptionRenderKey(option)" @click="onOptionSelect($event, option)" @touchend="onOptionTouchEnd()" @keydown="onOptionKeyDown($event, option)" role="option" :aria-label="getOptionLabel(option)" :aria-selected="isSelected(option)" >
+                            <slot name="option" :option="option" :index="i">{{getOptionLabel(option)}}</slot>
+                        </li>
+                    </template>
+                </template>
+                <li v-if="filterValue && (!visibleOptions || (visibleOptions && visibleOptions.length === 0))" class="p-listbox-empty-message">
+                    <slot name="emptyfilter">{{emptyFilterMessageText}}</slot>
+                </li>
+                <li v-else-if="(!options || (options && options.length === 0))" class="p-listbox-empty-message">
+                    <slot name="empty">{{emptyMessageText}}</slot>
                 </li>
-                <li v-if="filterValue && (!visibleOptions || (visibleOptions && visibleOptions.length === 0))" class="p-listbox-empty-message">{{emptyFilterMessage}}</li>
             </ul>
         </div>
+        <slot name="footer" :value="modelValue" :options="visibleOptions"></slot>
     </div>
 </template>
 
 <script>
 import {ObjectUtils} from 'primevue/utils';
 import {DomHandler} from 'primevue/utils';
+import {FilterService} from 'primevue/api';
 import Ripple from 'primevue/ripple';
 
 export default {
@@ -33,6 +52,8 @@ export default {
         optionLabel: null,
         optionValue: null,
         optionDisabled: null,
+        optionGroupLabel: null,
+        optionGroupChildren: null,
 		listStyle: null,
         disabled: Boolean,
         dataKey: null,
@@ -41,9 +62,21 @@ export default {
         filter: Boolean,
         filterPlaceholder: String,
         filterLocale: String,
+        filterMatchMode: {
+            type: String,
+            default: 'contains'
+        },
+        filterFields: {
+            type: Array,
+            default: null
+        },
         emptyFilterMessage: {
             type: String,
-            default: 'No results found'
+            default: null
+        },
+        emptyMessage: {
+            type: String,
+            default: null
         }
     },
     optionTouched: false,
@@ -65,6 +98,15 @@ export default {
         isOptionDisabled(option) {
             return this.optionDisabled ? ObjectUtils.resolveFieldData(option, this.optionDisabled) : false;
         },
+        getOptionGroupRenderKey(optionGroup) {
+            return ObjectUtils.resolveFieldData(optionGroup, this.optionGroupLabel);
+        },
+        getOptionGroupLabel(optionGroup) {
+            return ObjectUtils.resolveFieldData(optionGroup, this.optionGroupLabel);
+        },
+        getOptionGroupChildren(optionGroup) {
+            return ObjectUtils.resolveFieldData(optionGroup, this.optionGroupChildren);
+        },
         onOptionSelect(event, option) {
             if (this.disabled || this.isOptionDisabled(option)) {
                 return;
@@ -229,13 +271,36 @@ export default {
     },
     computed: {
         visibleOptions() {
-            if (this.filterValue)
+            if (this.filterValue) {
-                return this.options.filter(option => this.getOptionLabel(option).toLocaleLowerCase(this.filterLocale).indexOf(this.filterValue.toLocaleLowerCase(this.filterLocale)) > -1);
+                if (this.optionGroupLabel) {
-            else
+                    let filteredGroups = [];
+                    for (let optgroup of this.options) {
+                        let filteredSubOptions = FilterService.filter(this.getOptionGroupChildren(optgroup), this.searchFields, this.filterValue, this.filterMatchMode, this.filterLocale);
+                        if (filteredSubOptions && filteredSubOptions.length) {
+                            filteredGroups.push({...optgroup, ...{items: filteredSubOptions}});
+                        }
+                    }
+                    return filteredGroups
+                }
+                else {
+                    return FilterService.filter(this.options, this.searchFields, this.filterValue, 'contains', this.filterLocale);
+                }
+            }
+            else {
                 return this.options;
+            }                
         },
         equalityKey() {
             return this.optionValue ? null : this.dataKey;
+        },
+        searchFields() {
+            return this.filterFields || [this.optionLabel];
+        },
+        emptyFilterMessageText() {
+            return this.emptyFilterMessage || this.$primevue.config.locale.emptyFilterMessage;
+        },
+        emptyMessageText() {
+            return this.emptyMessage || this.$primevue.config.locale.emptyMessage;
         }
     },
     directives: {

src/views/listbox/ListboxDemo.vue

@@ -13,8 +13,18 @@
                 <h5>Single</h5>
                 <Listbox v-model="selectedCity" :options="cities" optionLabel="name" style="width:15rem" />
 
+                <h5>Grouped</h5>
+                <Listbox v-model="selectedGroupedCity" :options="groupedCities" optionLabel="label" style="width:15rem" optionGroupLabel="label" optionGroupChildren="items" listStyle="max-height:250px">
+                    <template #optiongroup="slotProps">
+                        <div class="p-d-flex p-ai-center country-item">
+                            <img src="../../assets/images/flag_placeholder.png" :class="'flag flag-' + slotProps.option.code.toLowerCase()" width="18" />
+                            <div>{{slotProps.option.label}}</div>
+                        </div>
+                    </template>
+                </Listbox>
+
                 <h5>Advanced with Templating, Filtering and Multiple Selection</h5>
-                <Listbox v-model="selectedCountries" :options="countries" :multiple="true" :filter="true" optionLabel="name" listStyle="max-height:250px" style="width:15rem">
+                <Listbox v-model="selectedCountries" :options="countries" :multiple="true" :filter="true" optionLabel="name" listStyle="max-height:250px" style="width:15rem" filterPlaceholder="Search">
                     <template #option="slotProps">
                         <div class="country-item">
                             <img src="../../assets/images/flag_placeholder.png" :class="'flag flag-' + slotProps.option.code.toLowerCase()" />
@@ -37,6 +47,7 @@ export default {
         return {
             selectedCity: null,
             selectedCountries: null,
+            selectedGroupedCity: null,
             cities: [
                 {name: 'New York', code: 'NY'},
                 {name: 'Rome', code: 'RM'},
@@ -55,7 +66,34 @@ export default {
                 {name: 'Japan', code: 'JP'},
                 {name: 'Spain', code: 'ES'},
                 {name: 'United States', code: 'US'}
-            ]
+            ],
+            groupedCities: [{
+                label: 'Germany', code: 'DE', 
+                items: [
+                    {label: 'Berlin', value: 'Berlin'},
+                    {label: 'Frankfurt', value: 'Frankfurt'},
+                    {label: 'Hamburg', value: 'Hamburg'},
+                    {label: 'Munich', value: 'Munich'}
+                ]
+            },
+            {
+                label: 'USA', code: 'US', 
+                items: [
+                    {label: 'Chicago', value: 'Chicago'},
+                    {label: 'Los Angeles', value: 'Los Angeles'},
+                    {label: 'New York', value: 'New York'},
+                    {label: 'San Francisco', value: 'San Francisco'}
+                ]
+            },
+            {
+                label: 'Japan', code: 'JP', 
+                items: [
+                    {label: 'Kyoto', value: 'Kyoto'},
+                    {label: 'Osaka', value: 'Osaka'},
+                    {label: 'Tokyo', value: 'Tokyo'},
+                    {label: 'Yokohama', value: 'Yokohama'}
+                ]
+            }]
         }
     },
     components: {

src/views/listbox/ListboxDoc.vue

@@ -40,22 +40,73 @@ data() {
 
 </code></pre>
 
-				<h5>Custom Content</h5>
+				<h5>Templating</h5>
-				<p>Label of an option is used as the display text of an item by default, for custom content support define an <i>option</i> template that gets the option instance as a parameter.</p>
+				<p>Label of an option is used as the display text of an item by default, for custom content support define an <i>option</i> template that gets the option instance as a parameter. When grouping is enabled, use <i>optiongroup</i> to customize the group content.
+                In addition <i>optiongroup</i>, <i>header</i>, <i>footer</i>, <i>emptyfilter</i> and <i>empty</i> slots are provided for further customization.</p>
 <pre v-code><code><template v-pre>
 &lt;Listbox v-model="selectedCars" :options="cars" :multiple="true" :filter="true" optionLabel="brand" listStyle="max-height:250px" style="width:15em"&gt;
-	&lt;template #option="slotProps"&gt;
+	&lt;template #header&gt;&lt;/template&gt;
+    &lt;template #option="slotProps"&gt;
 		&lt;div&gt;
 			&lt;img :alt="slotProps.option.brand" :src="'demo/images/car/' + slotProps.option.brand + '.png'" /&gt;
 			&lt;span&gt;{{slotProps.option.brand}}&lt;/span&gt;
 		&lt;/div&gt;
 	&lt;/template&gt;
+    &lt;template #footer&gt;&lt;/footer&gt;
 &lt;/Listbox&gt;
 </template>
+</code></pre>
+
+                <h5>Grouping</h5>
+				<p>Options groups are specified with the <i>optionGroupLabel</i> and <i>optionGroupChildren</i> properties.</p>
+<pre v-code.script><code>
+export default {
+    data() {
+        return {
+            selectedGroupedCity: null,
+            groupedCities: [{
+                label: 'Germany', code: 'DE', 
+                items: [
+                    {label: 'Berlin', value: 'Berlin'},
+                    {label: 'Frankfurt', value: 'Frankfurt'},
+                    {label: 'Hamburg', value: 'Hamburg'},
+                    {label: 'Munich', value: 'Munich'}
+                ]
+            },
+            {
+                label: 'USA', code: 'US', 
+                items: [
+                    {label: 'Chicago', value: 'Chicago'},
+                    {label: 'Los Angeles', value: 'Los Angeles'},
+                    {label: 'New York', value: 'New York'},
+                    {label: 'San Francisco', value: 'San Francisco'}
+                ]
+            },
+            {
+                label: 'Japan', code: 'JP', 
+                items: [
+                    {label: 'Kyoto', value: 'Kyoto'},
+                    {label: 'Osaka', value: 'Osaka'},
+                    {label: 'Tokyo', value: 'Tokyo'},
+                    {label: 'Yokohama', value: 'Yokohama'}
+                ]
+            }]
+        }
+    }
+}
+</code></pre>
+
+<pre v-code><code><template v-pre>
+<Listbox v-model="selectedGroupedCity" :options="groupedCities" 
+        optionLabel="label" optionGroupLabel="label" optionGroupChildren="items">
+</Listbox>
+</template>
 </code></pre>
 
 				<h5>Filter</h5>
-				<p>Filtering allows searching items in the list using an input field at the header. In order to use filtering, enable <i>filter</i> property.</p>
+				<p>Filtering allows searching items in the list using an input field at the header. In order to use filtering, enable <i>filter</i> property. By default,
+                optionLabel is used when searching and <i>filterFields</i> can be used to customize the fields being utilized. Furthermore, <i>filterMatchMode</i> is available
+                to define the search algorithm. Valid values are "contains" (default), "startsWith" and "endsWith".</p>
 <pre v-code><code>
 &lt;Listbox v-model="selectedCity" :options="cities" optionLabel="name" :filter="true"/&gt;
 
@@ -104,6 +155,18 @@ data() {
                                 <td>null</td>
                                 <td>Property name or getter function to use as the disabled flag of an option, defaults to false when not defined.</td>
                             </tr>
+                            <tr>
+                                <td>optionGroupLabel</td>
+                                <td>string</td>
+                                <td>null</td>
+                                <td>Property name or getter function to use as the label of an option group.</td>
+                            </tr>
+                            <tr>
+                                <td>optionGroupChildren</td>
+                                <td>string</td>
+                                <td>null</td>
+                                <td>Property name or getter function that refers to the children options of option group.</td>
+                            </tr>
                             <tr>
                                 <td>listStyle</td>
                                 <td>string</td>
@@ -153,11 +216,29 @@ data() {
                                 <td>undefined</td>
                                 <td>Locale to use in filtering. The default locale is the host environment's current locale.</td>
                             </tr>
+                            <tr>
+                                <td>filterMatchMode</td>
+                                <td>string</td>
+                                <td>contains</td>
+                                <td>Defines the filtering algorithm to use when searching the options. Valid values are "contains" (default), "startsWith" and "endsWith"</td>
+                            </tr>
+                            <tr>
+                                <td>filterFields</td>
+                                <td>array</td>
+                                <td>null</td>
+                                <td>Fields used when filtering the options, defaults to optionLabel.</td>
+                            </tr>
                             <tr>
                                 <td>emptyFilterMessage</td>
                                 <td>string</td>
                                 <td>No results found</td>
-                                <td>Text to display when filtering does not return any results.</td>
+                                <td>Text to display when filtering does not return any results. Defaults to value from PrimeVue locale configuration.</td>
+                            </tr>
+                            <tr>
+                                <td>emptyMessage</td>
+                                <td>string</td>
+                                <td>No results found</td>
+                                <td>Text to display when there are no options available. Defaults to value from PrimeVue locale configuration.</td>
                             </tr>
 						</tbody>
 					</table>
@@ -190,6 +271,48 @@ data() {
 					</table>
 				</div>
 
+                <h5>Slots</h5>
+				<div class="doc-tablewrapper">
+                    <table class="doc-table">
+						<thead>
+                            <tr>
+                                <th>Name</th>
+                                <th>Parameters</th>
+                            </tr>
+						</thead>
+						<tbody>
+                            <tr>
+                                <td>option</td>
+                                <td>option: Option instance <br />
+                                    index: Index of the option</td>
+                            </tr>
+                            <tr>
+                                <td>optiongroup</td>
+                                <td>option: OptionGroup instance <br />
+                                    index: Index of the option group</td>
+                            </tr>
+                            <tr>
+                                <td>header</td>
+                                <td>value: Value of the component <br />
+                                    options: Displayed options</td>
+                            </tr>
+                            <tr>
+                                <td>footer</td>
+                                <td>value: Value of the component <br />
+                                    options: Displayed options</td>
+                            </tr>
+                            <tr>
+                                <td>emptyfilter</td>
+                                <td>-</td>
+                            </tr>
+                            <tr>
+                                <td>empty</td>
+                                <td>-</td>
+                            </tr>
+						</tbody>
+					</table>
+                </div>
+
 				<h5>Styling</h5>
 				<p>Following is the list of structural style classes, for theming classes visit <router-link to="/theming">theming</router-link> page.</p>
 				<div class="doc-tablewrapper">
@@ -240,8 +363,18 @@ data() {
 &lt;h5&gt;Single&lt;/h5&gt;
 &lt;Listbox v-model="selectedCity" :options="cities" optionLabel="name" style="width:15rem" /&gt;
 
+&lt;h5&gt;Grouped&lt;/h5&gt;
+&lt;Listbox v-model="selectedGroupedCity" :options="groupedCities" optionLabel="label" style="width:15rem" optionGroupLabel="label" optionGroupChildren="items" listStyle="max-height:250px"&gt;
+    &lt;template #optiongroup="slotProps"&gt;
+        &lt;div class="p-d-flex p-ai-center country-item"&gt;
+            &lt;img src="../../assets/images/flag_placeholder.png" :class="'flag flag-' + slotProps.option.code.toLowerCase()" width="18" /&gt;
+            &lt;div&gt;{{slotProps.option.label}}&lt;/div&gt;
+        &lt;/div&gt;
+    &lt;/template&gt;
+&lt;/Listbox&gt;
+
 &lt;h5&gt;Advanced with Templating, Filtering and Multiple Selection&lt;/h5&gt;
-&lt;Listbox v-model="selectedCountries" :options="countries" :multiple="true" :filter="true" optionLabel="name" listStyle="max-height:250px" style="width:15rem"&gt;
+&lt;Listbox v-model="selectedCountries" :options="countries" :multiple="true" :filter="true" optionLabel="name" listStyle="max-height:250px" style="width:15rem" filterPlaceholder="Search"&gt;
     &lt;template #option="slotProps"&gt;
         &lt;div class="country-item"&gt;
             &lt;img src="../../assets/images/flag_placeholder.png" :class="'flag flag-' + slotProps.option.code.toLowerCase()" /&gt;
@@ -258,6 +391,7 @@ export default {
         return {
             selectedCity: null,
             selectedCountries: null,
+            selectedGroupedCity: null,
             cities: [
                 {name: 'New York', code: 'NY'},
                 {name: 'Rome', code: 'RM'},
@@ -276,7 +410,34 @@ export default {
                 {name: 'Japan', code: 'JP'},
                 {name: 'Spain', code: 'ES'},
                 {name: 'United States', code: 'US'}
-            ]
+            ],
+            groupedCities: [{
+                label: 'Germany', code: 'DE', 
+                items: [
+                    {label: 'Berlin', value: 'Berlin'},
+                    {label: 'Frankfurt', value: 'Frankfurt'},
+                    {label: 'Hamburg', value: 'Hamburg'},
+                    {label: 'Munich', value: 'Munich'}
+                ]
+            },
+            {
+                label: 'USA', code: 'US', 
+                items: [
+                    {label: 'Chicago', value: 'Chicago'},
+                    {label: 'Los Angeles', value: 'Los Angeles'},
+                    {label: 'New York', value: 'New York'},
+                    {label: 'San Francisco', value: 'San Francisco'}
+                ]
+            },
+            {
+                label: 'Japan', code: 'JP', 
+                items: [
+                    {label: 'Kyoto', value: 'Kyoto'},
+                    {label: 'Osaka', value: 'Osaka'},
+                    {label: 'Tokyo', value: 'Tokyo'},
+                    {label: 'Yokohama', value: 'Yokohama'}
+                ]
+            }]
         }
     }
 }
@@ -301,11 +462,21 @@ export default {
                 <h5>Single</h5>
                 <Listbox v-model="selectedCity" :options="cities" optionLabel="name" style="width:15rem" />
 
+                <h5>Grouped</h5>
+                <Listbox v-model="selectedGroupedCity" :options="groupedCities" optionLabel="label" style="width:15rem" optionGroupLabel="label" optionGroupChildren="items" listStyle="max-height:250px">
+                    <template #optiongroup="slotProps">
+                        <div class="p-d-flex p-ai-center country-item">
+                            <img src="../../assets/images/flag_placeholder.png" :class="'flag flag-' + slotProps.option.code.toLowerCase()" width="18" />
+                            <div>{{slotProps.option.label}}</div>
+                        </div>
+                    </template>
+                </Listbox>
+
                 <h5>Advanced with Templating, Filtering and Multiple Selection</h5>
-                <Listbox v-model="selectedCountries" :options="countries" :multiple="true" :filter="true" optionLabel="name" listStyle="max-height:250px" style="width:15rem">
+                <Listbox v-model="selectedCountries" :options="countries" :multiple="true" :filter="true" optionLabel="name" listStyle="max-height:250px" style="width:15rem" filterPlaceholder="Search">
                     <template #option="slotProps">
                         <div class="country-item">
-                            <img src="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" style="width: 18px; margin-right: .5rem;"/>
+                            <img src="../../assets/images/flag_placeholder.png" :class="'flag flag-' + slotProps.option.code.toLowerCase()" />
                             <div>{{slotProps.option.name}}</div>
                         </div>
                     </template>
@@ -321,6 +492,7 @@ export default {
         return {
             selectedCity: null,
             selectedCountries: null,
+            selectedGroupedCity: null,
             cities: [
                 {name: 'New York', code: 'NY'},
                 {name: 'Rome', code: 'RM'},
@@ -339,7 +511,34 @@ export default {
                 {name: 'Japan', code: 'JP'},
                 {name: 'Spain', code: 'ES'},
                 {name: 'United States', code: 'US'}
-            ]
+            ],
+            groupedCities: [{
+                label: 'Germany', code: 'DE', 
+                items: [
+                    {label: 'Berlin', value: 'Berlin'},
+                    {label: 'Frankfurt', value: 'Frankfurt'},
+                    {label: 'Hamburg', value: 'Hamburg'},
+                    {label: 'Munich', value: 'Munich'}
+                ]
+            },
+            {
+                label: 'USA', code: 'US', 
+                items: [
+                    {label: 'Chicago', value: 'Chicago'},
+                    {label: 'Los Angeles', value: 'Los Angeles'},
+                    {label: 'New York', value: 'New York'},
+                    {label: 'San Francisco', value: 'San Francisco'}
+                ]
+            },
+            {
+                label: 'Japan', code: 'JP', 
+                items: [
+                    {label: 'Kyoto', value: 'Kyoto'},
+                    {label: 'Osaka', value: 'Osaka'},
+                    {label: 'Tokyo', value: 'Tokyo'},
+                    {label: 'Yokohama', value: 'Yokohama'}
+                ]
+            }]
         }
     }
 }`