fix(combobox): add space after grouped items

packages/calcite-components/src/components/combobox-item-group/combobox-item-group.scss

@@ -49,3 +49,7 @@
   padding-inline: var(--calcite-combobox-item-spacing-unit-s);
   margin-inline-start: var(--calcite-combobox-item-indent-value);
 }
+
+::slotted(calcite-combobox-item-group:not(.group-that-follows-childless-group)) {
+  padding-block-start: var(--calcite-combobox-item-spacing-unit-l);
+}

packages/calcite-components/src/components/combobox/combobox.scss

@@ -209,3 +209,7 @@
 
 @include hidden-form-input();
 @include base-component();
+
+::slotted(calcite-combobox-item-group:not(:first-child)) {
+  padding-block-start: var(--calcite-combobox-item-spacing-unit-l);
+}

packages/calcite-components/src/components/combobox/combobox.stories.ts

@@ -449,17 +449,31 @@ export const withSelectorIndicatorAndIcons_TestOnly = (): string => html`
   </calcite-combobox>
 `;
 
-export const nestedGroups_TestOnly =
-  (): string => html`<calcite-combobox open selection-mode="single" style="width:400px" placeholder="Type to filter">
-<calcite-combobox-item-group label="Level 1">
-  <calcite-combobox-item-group label="Level 2">
-    <calcite-combobox-item-group label="Level 3">
-      <calcite-combobox-item value="Item 1" text-label="Item 1">
-      </calcite-combobox-item>
-      <calcite-combobox-item value="Item 2" text-label="Item 2">
+export const nestedGroups = (): string => html`
+  <calcite-combobox label="test" placeholder="placeholder" max-items="10" scale="m" open>
+    <calcite-combobox-item-group label="First item group">
+      <calcite-combobox-item value="Pikachu" text-label="Pikachu"></calcite-combobox-item>
+      <calcite-combobox-item value="Charizard" text-label="Charizard"></calcite-combobox-item>
+
+      <calcite-combobox-item-group label="Cutest Pokémon">
+        <calcite-combobox-item value="Bulbasaur" text-label="Bulbasaur"></calcite-combobox-item>
+        <calcite-combobox-item-group label="No Pokémon 🙃"></calcite-combobox-item-group>
+
+        <calcite-combobox-item-group label="Cutest Pokémon">
+          <calcite-combobox-item value="Squirtle" text-label="Squirtle">
+            <calcite-combobox-item value="Charizard" text-label="Charizard"></calcite-combobox-item>
+          </calcite-combobox-item>
+        </calcite-combobox-item-group>
+      </calcite-combobox-item-group>
+    </calcite-combobox-item-group>
+
+    <calcite-combobox-item-group label="Last item group">
+      <calcite-combobox-item value="Squirtle" text-label="Squirtle">
+        <calcite-combobox-item value="Charizard" text-label="Charizard"></calcite-combobox-item>
       </calcite-combobox-item>
     </calcite-combobox-item-group>
-</calcite-combobox>`;
+  </calcite-combobox>
+`;
 
 export const clearDisabled_TestOnly = (): string => html`
   <calcite-combobox clear-disabled selection-mode="single" style="width:400px">

packages/calcite-components/src/components/combobox/combobox.tsx

@@ -967,6 +967,15 @@ export class Combobox
     if (!this.allowCustomValues) {
       this.setMaxScrollerHeight();
     }
+
+    this.groupItems.forEach((groupItem, index, array) => {
+      if (groupItem.children.length === 0) {
+        if (index + 1 < array.length) {
+          const nextGroupItem = array[index + 1];
+          nextGroupItem.classList.add(CSS.groupThatFollowsChildlessGroup);
+        }
+      }
+    });
   };
 
   getData(): ItemData[] {

packages/calcite-components/src/components/combobox/resources.ts

@@ -4,4 +4,5 @@ export const ComboboxChildSelector = `${ComboboxItem}, ${ComboboxItemGroup}`;
 
 export const CSS = {
   listContainer: "list-container",
+  groupThatFollowsChildlessGroup: "group-that-follows-childless-group",
 };