fix(stepper-item): remove margin when slotted content is empty

packages/calcite-components/src/components/stepper-item/resources.ts

@@ -1,5 +1,6 @@
 export const CSS = {
   container: "container",
+  hasSlottedContent: "has-slotted-content",
   stepperItemContent: "stepper-item-content",
   stepperItemDescription: "stepper-item-description",
   stepperItemHeader: "stepper-item-header",

packages/calcite-components/src/components/stepper-item/stepper-item.scss

@@ -263,8 +263,7 @@
 }
 :host([layout="vertical"][selected]) .container {
   border-color: var(--calcite-stepper-bar-selected-fill-color, var(--calcite-color-brand));
-
-  & .stepper-item-content:not(:empty) {
+  & .stepper-item-content.has-slotted-content {
     margin-block-end: var(--calcite-internal-stepper-item-spacing-unit-l);
   }
 }

packages/calcite-components/src/components/stepper-item/stepper-item.tsx

@@ -9,6 +9,7 @@ import {
   method,
   JsxNode,
   setAttribute,
+  state,
 } from "@arcgis/lumina";
 import { Scale } from "../interfaces";
 import {
@@ -28,6 +29,7 @@ import { IconNameOrString } from "../icon/interfaces";
 import { useT9n } from "../../controllers/useT9n";
 import type { Stepper } from "../stepper/stepper";
 import { isHidden } from "../../utils/component";
+import { slotChangeHasContent } from "../../utils/dom";
 import { CSS } from "./resources";
 import T9nStrings from "./assets/t9n/messages.en.json";
 import { styles } from "./stepper-item.scss";
@@ -68,6 +70,12 @@ export class StepperItem extends LitElement implements InteractiveComponent {
 
   //#endregion
 
+  //#region State Properties
+
+  @state() stepperItemHasContent: boolean;
+
+  //#endregion
+
   //#region Public Properties
 
   /** When `true`, the step has been completed. */
@@ -346,8 +354,15 @@ export class StepperItem extends LitElement implements InteractiveComponent {
               <span class={CSS.stepperItemDescription}>{this.description}</span>
             </div>
           </div>
-          <div class={CSS.stepperItemContent}>
-            <slot />
+          <div
+            class={{
+              [CSS.stepperItemContent]: true,
+              [CSS.hasSlottedContent]: this.stepperItemHasContent,
+            }}
+          >
+            <slot
+              onSlotChange={(event) => (this.stepperItemHasContent = slotChangeHasContent(event))}
+            />
           </div>
         </div>
       </InteractiveContainer>

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

@@ -208,21 +208,37 @@ export const arabicNumberingSystem_TestOnly = (): string =>
 
 export const verticalLayout_TestOnly = (): string =>
   html`<calcite-stepper layout="vertical" scale="s">
-      <calcite-stepper-item heading="Scale s" description="Add members without sending invitations"
+      <calcite-stepper-item heading="Mountains" description="The Mountains are calling and I must go"
         >Step 1 Content Goes Here</calcite-stepper-item
       >
+      <calcite-stepper-item heading="Beaches" description="The Beaches are calling and I must go"
+        >Step 2 Content Goes Here</calcite-stepper-item
+      >
+      <calcite-stepper-item heading="Rivers" description="The Rivers are calling and I must go"></calcite-stepper-item>
     </calcite-stepper>
 
     <calcite-stepper layout="vertical">
-      <calcite-stepper-item heading="Scale m" description="Add members without sending invitations"
+      <calcite-stepper-item heading="Mountains" description="The Mountains are calling and I must go"
         >Step 1 Content Goes Here</calcite-stepper-item
       >
+      <calcite-stepper-item heading="Beaches" description="The Beaches are calling and I must go" selected
+        >Step 2 Content Goes Here</calcite-stepper-item
+      >
+      <calcite-stepper-item heading="Rivers" description="The Rivers are calling and I must go"></calcite-stepper-item>
     </calcite-stepper>
 
     <calcite-stepper layout="vertical" scale="l">
-      <calcite-stepper-item heading="Scale l" description="Add members without sending invitations"
+      <calcite-stepper-item heading="Mountains" description="The Mountains are calling and I must go"
         >Step 1 Content Goes Here</calcite-stepper-item
       >
+      <calcite-stepper-item heading="Beaches" description="The Beaches are calling and I must go"
+        >Step 2 Content Goes Here</calcite-stepper-item
+      >
+      <calcite-stepper-item
+        heading="Rivers"
+        description="The Rivers are calling and I must go"
+        selected
+      ></calcite-stepper-item>
     </calcite-stepper>`;
 
 export const horizontalSingleLayout_TestOnly = (): string => html`
@@ -299,20 +315,44 @@ export const horizontalSingleLayout_TestOnly = (): string => html`
 `;
 
 export const verticalLayoutFullWidth = (): string =>
-  html`<calcite-stepper layout="vertical" scale="s" style="width: 1000px;">
-      <calcite-stepper-item heading="Scale s" description="Add members without sending invitations"
-        >Step 1 Content Goes Here</calcite-stepper-item
+  html`<calcite-stepper layout="vertical" scale="s">
+      <calcite-stepper-item heading="Mountains" description="The Mountains are calling and I must go"
+        ><calcite-notice open icon="tree" width="full">
+          <div slot="title">Popular Mountains</div>
+          <div slot="message">Mount Everest, Mount Rainier, Mount Mckinley</div>
+      </calcite-notice></calcite-stepper-item
+      >
+      <calcite-stepper-item heading="Beaches" description="The Beaches are calling and I must go"
+        > Step 2 Content Goes Here</calcite-stepper-item
       >
+      <calcite-stepper-item heading="Rivers" description="The Rivers are calling and I must go"></calcite-stepper-item>
+      </calcite-stepper-item>
     </calcite-stepper>
 
-    <calcite-stepper layout="vertical">
-      <calcite-stepper-item heading="Scale m" description="Add members without sending invitations"
-        >Step 1 Content Goes Here</calcite-stepper-item
+   <calcite-stepper layout="vertical" >
+      <calcite-stepper-item heading="Mountains" description="The Mountains are calling and I must go"
+        ><calcite-notice open icon="tree" width="full">
+          <div slot="title">Popular Mountains</div>
+          <div slot="message">Mount Everest, Mount Rainier, Mount Mckinley</div>
+      </calcite-notice></calcite-stepper-item
+      >
+      <calcite-stepper-item heading="Beaches" description="The Beaches are calling and I must go"
+        selected> Step 2 Content Goes Here</calcite-stepper-item
       >
+      <calcite-stepper-item heading="Rivers" description="The Rivers are calling and I must go"></calcite-stepper-item>
+      </calcite-stepper-item>
     </calcite-stepper>
 
     <calcite-stepper layout="vertical" scale="l">
-      <calcite-stepper-item heading="Scale l" description="Add members without sending invitations"
-        >Step 1 Content Goes Here</calcite-stepper-item
+      <calcite-stepper-item heading="Mountains" description="The Mountains are calling and I must go"
+        ><calcite-notice open icon="tree" width="full">
+          <div slot="title">Popular Mountains</div>
+          <div slot="message">Mount Everest, Mount Rainier, Mount Mckinley</div>
+      </calcite-notice></calcite-stepper-item
       >
+      <calcite-stepper-item heading="Beaches" description="The Beaches are calling and I must go"
+        > Step 2 Content Goes Here</calcite-stepper-item
+      >
+      <calcite-stepper-item heading="Rivers" description="The Rivers are calling and I must go" selected></calcite-stepper-item>
+      </calcite-stepper-item>
     </calcite-stepper>`;