Add gap to lists

components/lib/autocomplete/style/AutoCompleteStyle.js

@@ -85,6 +85,9 @@ const theme = ({ dt }) => `
     margin: 0;
     padding: 0;
     list-style-type: none;
+    display: flex;
+    flex-direction: column;
+    gap: ${dt('autocomplete.list.gap')};
     padding: ${dt('autocomplete.list.padding')};
 }
 
@@ -102,14 +105,6 @@ const theme = ({ dt }) => `
     border-radius: ${dt('autocomplete.option.border.radius')};
 }
 
-.p-autocomplete-option:first-child {
-    margin-top: 0;
-}
-
-.p-autocomplete-option:last-child {
-    margin-bottom: 0;
-}
-
 .p-autocomplete-option:not(.p-autocomplete-option-selected):not(.p-disabled).p-focus {
     background: ${dt('autocomplete.option.focus.background')};
     color: ${dt('autocomplete.option.focus.color')};

components/lib/themes/aura/autocomplete/index.js

@@ -30,7 +30,8 @@ export default {
         shadow: '{overlay.select.shadow}'
     },
     list: {
-        padding: '{list.padding}'
+        padding: '{list.padding}',
+        gap: '{list.gap}'
     },
     option: {
         focusBackground: '{list.option.focus.background}',

components/lib/themes/aura/index.js

@@ -153,6 +153,7 @@ export default {
         },
         list: {
             padding: '0.25rem 0.25rem',
+            gap: '2px',
             option: {
                 padding: '0.5rem 0.75rem',
                 borderRadius: '4px'

components/lib/themes/lara/autocomplete/index.js

@@ -30,7 +30,8 @@ export default {
         shadow: '{overlay.select.shadow}'
     },
     list: {
-        padding: '{list.padding}'
+        padding: '{list.padding}',
+        gap: '{list.gap}'
     },
     option: {
         focusBackground: '{list.option.focus.background}',
@@ -41,7 +42,7 @@ export default {
         selectedColor: '{list.option.selected.color}',
         selectedFocusColor: '{list.option.selected.focus.color}',
         padding: '{list.option.padding}',
-        borderRadius: '{list.option.border.radius}'
+        borderRadius: '{list.option.border.radius}',
     },
     optionGroup: {
         background: '{list.option.group.background}',

components/lib/themes/lara/index.js

@@ -152,6 +152,7 @@ export default {
         },
         list: {
             padding: '0.5rem 0',
+            gap: '0',
             option: {
                 padding: '0.625rem 0.75rem',
                 borderRadius: '0'