fix(combobox): add space after grouped items (#7302)

**Related Issue:** #6412

## Summary
Adding space at the bottom of grouped items to provide visual separation
between the group and any following content.

- Bottom padding added to combobox-item-group at all scales.
- Added padding would not be present if the group has no items, allowing
for the use of only the group heading (with no extra padding) when
nesting groups.

<img width="375" alt="CleanShot 2023-07-10 at 09 19 44@2x"
src="https://github.com/Esri/calcite-design-system/assets/19231036/192e1b23-53c0-4a09-8d78-8322d26b99e0">

Author: Elijbet

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([after-empty-group])) {
+  padding-block-start: var(--calcite-combobox-item-spacing-unit-l);
+}

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

@@ -21,6 +21,13 @@ export class ComboboxItemGroup {
   //
   // --------------------------------------------------------------------------
 
+  /**
+   * When `true`, signifies that the group comes after another group without any children (items or sub-groups), otherwise indicates that the group comes after another group that has children. Used for styling.
+   *
+   * @internal
+   */
+  @Prop({ reflect: true }) afterEmptyGroup = false;
+
   /** Specifies the parent and grandparent `calcite-combobox-item`s, which are set on `calcite-combobox`. */
   @Prop({ mutable: true }) ancestors: ComboboxChildElement[];
 

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_TestOnly = (): 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,18 @@ export class Combobox
     if (!this.allowCustomValues) {
       this.setMaxScrollerHeight();
     }
+
+    this.groupItems.forEach((groupItem, index, items) => {
+      if (index === 0) {
+        groupItem.afterEmptyGroup = false;
+      }
+
+      const nextGroupItem = items[index + 1];
+
+      if (nextGroupItem) {
+        nextGroupItem.afterEmptyGroup = groupItem.children.length === 0;
+      }
+    });
   };
 
   getData(): ItemData[] {