diff --git a/packages/calcite-components/src/components.d.ts b/packages/calcite-components/src/components.d.ts
index 52b847cb1b3..75b036a5593 100644
--- a/packages/calcite-components/src/components.d.ts
+++ b/packages/calcite-components/src/components.d.ts
@@ -73,8 +73,8 @@ import { DisplayMode } from "./components/sheet/interfaces";
 import { DisplayMode as DisplayMode1 } from "./components/shell-panel/interfaces";
 import { ShellPanelMessages } from "./components/shell-panel/assets/shell-panel/t9n";
 import { DragDetail } from "./utils/sortableComponent";
+import { StepperItemChangeEventDetail, StepperItemEventDetail, StepperItemKeyEventDetail, StepperLayout } from "./components/stepper/interfaces";
 import { StepperMessages } from "./components/stepper/assets/stepper/t9n";
-import { StepperItemChangeEventDetail, StepperItemEventDetail, StepperItemKeyEventDetail } from "./components/stepper/interfaces";
 import { StepperItemMessages } from "./components/stepper-item/assets/stepper-item/t9n";
 import { TabID, TabLayout, TabPosition } from "./components/tabs/interfaces";
 import { TabChangeEventDetail, TabCloseEventDetail } from "./components/tab/interfaces";
@@ -159,8 +159,8 @@ export { DisplayMode } from "./components/sheet/interfaces";
 export { DisplayMode as DisplayMode1 } from "./components/shell-panel/interfaces";
 export { ShellPanelMessages } from "./components/shell-panel/assets/shell-panel/t9n";
 export { DragDetail } from "./utils/sortableComponent";
+export { StepperItemChangeEventDetail, StepperItemEventDetail, StepperItemKeyEventDetail, StepperLayout } from "./components/stepper/interfaces";
 export { StepperMessages } from "./components/stepper/assets/stepper/t9n";
-export { StepperItemChangeEventDetail, StepperItemEventDetail, StepperItemKeyEventDetail } from "./components/stepper/interfaces";
 export { StepperItemMessages } from "./components/stepper-item/assets/stepper-item/t9n";
 export { TabID, TabLayout, TabPosition } from "./components/tabs/interfaces";
 export { TabChangeEventDetail, TabCloseEventDetail } from "./components/tab/interfaces";
@@ -4382,7 +4382,7 @@ export namespace Components {
         /**
           * Defines the layout of the component.
          */
-        "layout": Extract<"horizontal" | "vertical", Layout>;
+        "layout": StepperLayout;
         /**
           * Use this property to override individual strings used by the component.
          */
@@ -4453,7 +4453,7 @@ export namespace Components {
         /**
           * Specifies the layout of the `calcite-stepper-item` inherited from parent `calcite-stepper`, defaults to `horizontal`.
          */
-        "layout": Extract<"horizontal" | "vertical", Layout>;
+        "layout": StepperLayout;
         /**
           * Use this property to override individual strings used by the component.
          */
@@ -11882,7 +11882,7 @@ declare namespace LocalJSX {
         /**
           * Defines the layout of the component.
          */
-        "layout"?: Extract<"horizontal" | "vertical", Layout>;
+        "layout"?: StepperLayout;
         /**
           * Use this property to override individual strings used by the component.
          */
@@ -11949,7 +11949,7 @@ declare namespace LocalJSX {
         /**
           * Specifies the layout of the `calcite-stepper-item` inherited from parent `calcite-stepper`, defaults to `horizontal`.
          */
-        "layout"?: Extract<"horizontal" | "vertical", Layout>;
+        "layout"?: StepperLayout;
         /**
           * Use this property to override individual strings used by the component.
          */
diff --git a/packages/calcite-components/src/components/stepper-item/readme.md b/packages/calcite-components/src/components/stepper-item/readme.md
index 3a55874fbed..484c9d6b09e 100644
--- a/packages/calcite-components/src/components/stepper-item/readme.md
+++ b/packages/calcite-components/src/components/stepper-item/readme.md
@@ -6,16 +6,16 @@ individual `calcite-stepper-item` item
 
 ## Properties
 
-| Property           | Attribute           | Description                                                                                  | Type                  | Default     |
-| ------------------ | ------------------- | -------------------------------------------------------------------------------------------- | --------------------- | ----------- |
-| `complete`         | `complete`          | When `true`, the step has been completed.                                                    | `boolean`             | `false`     |
-| `description`      | `description`       | A description for the component. Displays below the header text.                             | `string`              | `undefined` |
-| `disabled`         | `disabled`          | When `true`, interaction is prevented and the component is displayed with lower opacity.     | `boolean`             | `false`     |
-| `error`            | `error`             | When `true`, the component contains an error that requires resolution from the user.         | `boolean`             | `false`     |
-| `heading`          | `heading`           | The component header text.                                                                   | `string`              | `undefined` |
-| `iconFlipRtl`      | `icon-flip-rtl`     | When `true`, the icon will be flipped when the element direction is right-to-left (`"rtl"`). | `boolean`             | `false`     |
-| `messageOverrides` | `message-overrides` | Use this property to override individual strings used by the component.                      | `StepperItemMessages` | `undefined` |
-| `selected`         | `selected`          | When `true`, the component is selected.                                                      | `boolean`             | `false`     |
+| Property           | Attribute       | Description                                                                                  | Type                                                               | Default     |
+| ------------------ | --------------- | -------------------------------------------------------------------------------------------- | ------------------------------------------------------------------ | ----------- |
+| `complete`         | `complete`      | When `true`, the step has been completed.                                                    | `boolean`                                                          | `false`     |
+| `description`      | `description`   | A description for the component. Displays below the header text.                             | `string`                                                           | `undefined` |
+| `disabled`         | `disabled`      | When `true`, interaction is prevented and the component is displayed with lower opacity.     | `boolean`                                                          | `false`     |
+| `error`            | `error`         | When `true`, the component contains an error that requires resolution from the user.         | `boolean`                                                          | `false`     |
+| `heading`          | `heading`       | The component header text.                                                                   | `string`                                                           | `undefined` |
+| `iconFlipRtl`      | `icon-flip-rtl` | When `true`, the icon will be flipped when the element direction is right-to-left (`"rtl"`). | `boolean`                                                          | `false`     |
+| `messageOverrides` | --              | Use this property to override individual strings used by the component.                      | `{ complete?: string; previousStep?: string; nextStep?: string; }` | `undefined` |
+| `selected`         | `selected`      | When `true`, the component is selected.                                                      | `boolean`                                                          | `false`     |
 
 ## Methods
 
diff --git a/packages/calcite-components/src/components/stepper-item/stepper-item.scss b/packages/calcite-components/src/components/stepper-item/stepper-item.scss
index 692f3531004..4a579b06930 100644
--- a/packages/calcite-components/src/components/stepper-item/stepper-item.scss
+++ b/packages/calcite-components/src/components/stepper-item/stepper-item.scss
@@ -247,7 +247,8 @@
   @apply border-color-danger-hover;
 }
 
-:host([layout="horizontal"]) {
+:host([layout="horizontal"]),
+:host([layout="horizontal-single"]) {
   display: contents;
 
   .container {
@@ -275,38 +276,67 @@
   }
 }
 
-:host([layout="horizontal"][disabled]) {
+:host([layout="horizontal"][disabled]),
+:host([layout="horizontal-single"][disabled]) {
   .stepper-item-header {
     @extend %disabled-host-only;
   }
 }
 
-:host([layout="horizontal"][selected]) {
+:host([layout="horizontal-single"]) {
+  .stepper-item-header {
+    grid-area: 1 / 1 / 1 / -1;
+  }
+}
+
+:host([layout="horizontal"]),
+:host([layout="horizontal-single"]) {
   .stepper-item-content {
     grid-area: 2 / 1 / 2 / -1;
   }
 }
 
-:host([layout="horizontal"][complete]) .stepper-item-header {
-  border-color: rgba($h-bb-060, 0.5);
+:host([layout="horizontal"][complete]),
+:host([layout="horizontal-single"][complete]) {
+  .stepper-item-header {
+    border-color: rgba($h-bb-060, 0.5);
+  }
 }
-:host([layout="horizontal"][complete]:hover:not([disabled]):not([selected])) .stepper-item-header,
-:host([layout="horizontal"][complete]:focus:not([disabled]):not([selected])) .stepper-item-header {
-  @apply border-color-brand;
+:host([layout="horizontal"][complete]:hover:not([disabled]):not([selected])),
+:host([layout="horizontal"][complete]:focus:not([disabled]):not([selected])),
+:host([layout="horizontal-single"][complete]:hover:not([disabled]):not([selected])),
+:host([layout="horizontal-single"][complete]:focus:not([disabled]):not([selected])) {
+  .stepper-item-header {
+    @apply border-color-brand;
+  }
 }
-:host([layout="horizontal"][error]) .stepper-item-header {
-  @apply border-color-danger;
+:host([layout="horizontal"][error]),
+:host([layout="horizontal-single"][error]) {
+  .stepper-item-header {
+    @apply border-color-danger;
+  }
 }
-:host([layout="horizontal"][selected][multiple-view-mode]) .stepper-item-header {
-  @apply border-color-brand;
+:host([layout="horizontal"][selected][multiple-view-mode]),
+:host([layout="horizontal-single"][selected][multiple-view-mode]) {
+  .stepper-item-header {
+    @apply border-color-brand;
+  }
 }
-:host([layout="horizontal"]:hover:not([disabled]):not([selected])) .stepper-item-header,
-:host([layout="horizontal"]:focus:not([disabled]):not([selected])) .stepper-item-header {
-  border-color: rgba($h-bb-060, 0.5);
+:host([layout="horizontal"]:hover:not([disabled]):not([selected])),
+:host([layout="horizontal"]:focus:not([disabled]):not([selected])),
+:host([layout="horizontal-single"]:hover:not([disabled]):not([selected])),
+:host([layout="horizontal-single"]:focus:not([disabled]):not([selected])) {
+  .stepper-item-header {
+    border-color: rgba($h-bb-060, 0.5);
+  }
 }
-:host([layout="horizontal"][error]:hover:not([disabled]):not([selected])) .stepper-item-header,
-:host([layout="horizontal"][error]:focus:not([disabled]):not([selected])) .stepper-item-header {
-  @apply border-color-danger-hover;
+:host([layout="horizontal"][error]:hover:not([disabled]):not([selected])),
+:host([layout="horizontal"][error]:focus:not([disabled]):not([selected])),
+:host([layout="horizontal-single"][error]:hover:not([disabled]):not([selected])),
+:host([layout="horizontal-single"][error]:focus:not([disabled]):not([selected])) {
+  .stepper-item-header {
+    @apply border-color-danger-hover;
+  }
 }
 
 @media (forced-colors: active) {
@@ -335,14 +365,14 @@
   }
 }
 
-:host([layout="horizontal"]:not([multiple-view-mode])) .stepper-item-header {
-  @apply border-none 
+:host([layout="horizontal-single"]) .stepper-item-header {
+  @apply border-none box-border
   me-0;
   inline-size: 100%;
   padding-inline: calc(var(--calcite-internal-stepper-action-inline-size) + 0.5rem);
 }
 
-:host([layout="horizontal"][error]:not([multiple-view-mode])) .container {
+:host([layout="horizontal-single"][error]) .container {
   & .stepper-item-number {
     color: theme("backgroundColor.danger");
   }
@@ -352,15 +382,15 @@
   }
 }
 
-:host([layout="horizontal"][error][selected]:not([multiple-view-mode])),
-:host([layout="horizontal"][complete][selected]:not([multiple-view-mode])) .container {
+:host([layout="horizontal-single"][error][selected]),
+:host([layout="horizontal-single"][complete][selected]) .container {
   @apply text-color-3;
   & .stepper-item-heading {
     @apply text-color-2;
   }
 }
 
-:host([layout="horizontal"][complete][selected]:not([multiple-view-mode])) .container {
+:host([layout="horizontal-single"][complete][selected]) .container {
   & .stepper-item-icon {
     @apply opacity-disabled;
   }
diff --git a/packages/calcite-components/src/components/stepper-item/stepper-item.tsx b/packages/calcite-components/src/components/stepper-item/stepper-item.tsx
index 0e122cc6dd0..2797e0757b9 100644
--- a/packages/calcite-components/src/components/stepper-item/stepper-item.tsx
+++ b/packages/calcite-components/src/components/stepper-item/stepper-item.tsx
@@ -12,7 +12,7 @@ import {
   VNode,
   Watch,
 } from "@stencil/core";
-import { Layout, Scale } from "../interfaces";
+import { Scale } from "../interfaces";
 import {
   connectInteractive,
   disconnectInteractive,
@@ -24,6 +24,7 @@ import {
   StepperItemChangeEventDetail,
   StepperItemEventDetail,
   StepperItemKeyEventDetail,
+  StepperLayout,
 } from "../stepper/interfaces";
 import {
   numberStringFormatter,
@@ -119,7 +120,7 @@ export class StepperItem
    *
    * @internal
    */
-  @Prop({ reflect: true }) layout: Extract<"horizontal" | "vertical", Layout>;
+  @Prop({ reflect: true }) layout: StepperLayout;
 
   /**
    * Made into a prop for testing purposes only
diff --git a/packages/calcite-components/src/components/stepper/interfaces.ts b/packages/calcite-components/src/components/stepper/interfaces.ts
index 9f4798e22d2..83051ad73d4 100644
--- a/packages/calcite-components/src/components/stepper/interfaces.ts
+++ b/packages/calcite-components/src/components/stepper/interfaces.ts
@@ -9,3 +9,5 @@ export interface StepperItemKeyEventDetail {
 export interface StepperItemChangeEventDetail {
   position: number;
 }
+
+export type StepperLayout = "horizontal" | "vertical" | "horizontal-single";
diff --git a/packages/calcite-components/src/components/stepper/readme.md b/packages/calcite-components/src/components/stepper/readme.md
index 1ea934ba9cb..ab18a305cf5 100644
--- a/packages/calcite-components/src/components/stepper/readme.md
+++ b/packages/calcite-components/src/components/stepper/readme.md
@@ -45,15 +45,15 @@ Calcite stepper can be used to present a stepper workflow to a user. It has conf
 
 ## Properties
 
-| Property           | Attribute           | Description                                                                  | Type                            | Default        |
-| ------------------ | ------------------- | ---------------------------------------------------------------------------- | ------------------------------- | -------------- |
-| `icon`             | `icon`              | When `true`, displays a status icon in the `calcite-stepper-item` heading.   | `boolean`                       | `false`        |
-| `layout`           | `layout`            | Defines the layout of the component.                                         | `"horizontal" \| "vertical"`    | `"horizontal"` |
-| `messageOverrides` | `message-overrides` | Use this property to override individual strings used by the component.      | `StepperMessages`               | `undefined`    |
-| `numbered`         | `numbered`          | When `true`, displays the step number in the `calcite-stepper-item` heading. | `boolean`                       | `false`        |
-| `numberingSystem`  | `numbering-system`  | Specifies the Unicode numeral system used by the component for localization. | `"arab" \| "arabext" \| "latn"` | `undefined`    |
-| `scale`            | `scale`             | Specifies the size of the component.                                         | `"l" \| "m" \| "s"`             | `"m"`          |
-| `selectedItem`     | --                  | Specifies the component's selected item.                                     | `HTMLCalciteStepperItemElement` | `null`         |
+| Property           | Attribute          | Description                                                                  | Type                                                            | Default        |
+| ------------------ | ------------------ | ---------------------------------------------------------------------------- | --------------------------------------------------------------- | -------------- |
+| `icon`             | `icon`             | When `true`, displays a status icon in the `calcite-stepper-item` heading.   | `boolean`                                                       | `false`        |
+| `layout`           | `layout`           | Defines the layout of the component.                                         | `"horizontal" \| "horizontal-single" \| "vertical"`             | `"horizontal"` |
+| `messageOverrides` | --                 | Use this property to override individual strings used by the component.      | `{ label?: string; previousStep?: string; nextStep?: string; }` | `undefined`    |
+| `numbered`         | `numbered`         | When `true`, displays the step number in the `calcite-stepper-item` heading. | `boolean`                                                       | `false`        |
+| `numberingSystem`  | `numbering-system` | Specifies the Unicode numeral system used by the component for localization. | `"arab" \| "arabext" \| "latn"`                                 | `undefined`    |
+| `scale`            | `scale`            | Specifies the size of the component.                                         | `"l" \| "m" \| "s"`                                             | `"m"`          |
+| `selectedItem`     | --                 | Specifies the component's selected item.                                     | `HTMLCalciteStepperItemElement`                                 | `null`         |
 
 ## Events
 
diff --git a/packages/calcite-components/src/components/stepper/stepper.e2e.ts b/packages/calcite-components/src/components/stepper/stepper.e2e.ts
index c2b3073e8d3..49a4dc35b1d 100644
--- a/packages/calcite-components/src/components/stepper/stepper.e2e.ts
+++ b/packages/calcite-components/src/components/stepper/stepper.e2e.ts
@@ -743,11 +743,11 @@ describe("calcite-stepper", () => {
     expect(await stepperItem2.getProperty("selected")).toBe(true);
   });
 
-  describe("responsive layout", () => {
-    it("should display action buttons when width is smaller", async () => {
+  describe("horizontal-single layout", () => {
+    it("should display action buttons when layout is horizontal-single.", async () => {
       const page = await newE2EPage();
       await page.setContent(
-        html`<calcite-stepper style="width: 100px">
+        html`<calcite-stepper layout="horizontal-single">
           <calcite-stepper-item heading="Step 1" id="step-1">
             <div>Step 1 content</div>
           </calcite-stepper-item>
@@ -775,7 +775,7 @@ describe("calcite-stepper", () => {
     it("focus order", async () => {
       const page = await newE2EPage();
       await page.setContent(
-        html`<calcite-stepper style="width: 100px">
+        html`<calcite-stepper layout="horizontal-single">
           <calcite-stepper-item heading="Step 1" id="step-1">
             <calcite-button id="button1">Click</calcite-button>
           </calcite-stepper-item>
@@ -822,7 +822,7 @@ describe("calcite-stepper", () => {
     it("should emit calciteStepperItemChange on user interaction", async () => {
       const page = await newE2EPage();
       await page.setContent(
-        html`<calcite-stepper style="width: 100px">
+        html`<calcite-stepper layout="horizontal-single">
           <calcite-stepper-item heading="Step 1" id="step-1">
             <div>Step 1 content</div>
           </calcite-stepper-item>
diff --git a/packages/calcite-components/src/components/stepper/stepper.scss b/packages/calcite-components/src/components/stepper/stepper.scss
index c5fa6714d19..2f70fa621a6 100644
--- a/packages/calcite-components/src/components/stepper/stepper.scss
+++ b/packages/calcite-components/src/components/stepper/stepper.scss
@@ -37,22 +37,31 @@
   @apply flex-auto flex-col;
 }
 
-:host([layout="horizontal"]) .container {
-  display: grid;
-  // grid-templates-columns are dynamically generated
-  // grid-templates-rows are dynamically generated
-  grid-template-areas:
-    "items"
-    "content";
-  gap: theme("spacing.2") var(--calcite-internal-stepper-item-spacing-unit-s);
+:host([layout="horizontal"]),
+:host([layout="horizontal-single"]) {
+  .container {
+    display: grid;
+    // grid-templates-columns are dynamically generated
+    // grid-templates-rows are dynamically generated
+    grid-template-areas:
+      "items"
+      "content";
+    gap: theme("spacing.2") var(--calcite-internal-stepper-item-spacing-unit-s);
+  }
 }
 
-:host([layout="horizontal"][scale="s"]) .container {
-  gap: theme("spacing.1") var(--calcite-internal-stepper-item-spacing-unit-s);
+:host([layout="horizontal"][scale="s"]),
+:host([layout="horizontal-single"][scale="s"]) {
+  .container {
+    gap: theme("spacing.1") var(--calcite-internal-stepper-item-spacing-unit-s);
+  }
 }
 
-:host([layout="horizontal"][scale="l"]) .container {
-  gap: theme("spacing.3") var(--calcite-internal-stepper-item-spacing-unit-s);
+:host([layout="horizontal"][scale="l"]),
+:host([layout="horizontal-single"][scale="l"]) {
+  .container {
+    gap: theme("spacing.3") var(--calcite-internal-stepper-item-spacing-unit-s);
+  }
 }
 
 :host([layout="horizontal"]) .container.single-view {
diff --git a/packages/calcite-components/src/components/stepper/stepper.stories.ts b/packages/calcite-components/src/components/stepper/stepper.stories.ts
index f99a31efc61..2fdd5b64187 100644
--- a/packages/calcite-components/src/components/stepper/stepper.stories.ts
+++ b/packages/calcite-components/src/components/stepper/stepper.stories.ts
@@ -19,8 +19,7 @@ export default {
 export const simple = (): string => html`
   <h1>Default</h1>
   <calcite-stepper
-    scale="${select("scale", ["s", "m", "l"], "m")}"
-    layout="${select("layout", ["horizontal", "vertical"], "horizontal")}"
+    layout="${select("layout", ["horizontal", "vertical", "horizontal-single"], "horizontal")}"
     scale="${select("scale", ["s", "m", "l"], "m")}"
     ${boolean("numbered", true)}
     ${boolean("icon", true)}
@@ -57,8 +56,7 @@ export const simple = (): string => html`
   </calcite-stepper>
   <h1>No Content</h1>
   <calcite-stepper
-    scale="${select("scale", ["s", "m", "l"], "m")}"
-    layout="${select("layout", ["horizontal", "vertical"], "horizontal")}"
+    layout="${select("layout", ["horizontal", "vertical", "horizontal-single"], "horizontal")}"
     scale="${select("scale", ["s", "m", "l"], "m")}"
     ${boolean("numbered", true)}
     ${boolean("icon", true)}
@@ -95,8 +93,7 @@ export const darkModeRTL_TestOnly = (): string => html`
 <div dir="rtl">
   <calcite-stepper
   class="calcite-mode-dark"
-    scale="${select("scale", ["s", "m", "l"], "m")}"
-    layout="${select("layout", ["horizontal", "vertical"], "horizontal")}"
+    layout="${select("layout", ["horizontal", "vertical", "horizontal-single"], "horizontal")}"
     scale="${select("scale", ["s", "m", "l"], "m")}"
     ${boolean("numbered", true)}
     ${boolean("icon", true)}
@@ -209,87 +206,75 @@ export const verticalLayout_TestOnly = (): string =>
       >
     </calcite-stepper>`;
 
-const getBreakpointsStoryTemplate = ({ scale, width }: { scale: string; width: number }): string =>
-  html`<style>
-      calcite-stepper {
-        width: ${width}px;
-      }
-    </style>
-    <calcite-stepper numbered icon layout="horizontal" scale="${scale}">
-      <calcite-stepper-item
-        heading="Choose method"
-        description="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua"
-        complete
-        disabled
-      >
+export const horizontalSingleLayout_TestOnly = (): string => html`
+  <div style="display: flex; flex-direction: column; gap: 1em;">
+    <calcite-stepper layout="horizontal-single" numbered icon scale="s">
+      <calcite-stepper-item heading="Choose method">
         <calcite-notice open width="full">
           <div slot="message">Step 1 Content Goes Here</div>
         </calcite-notice>
       </calcite-stepper-item>
-      <calcite-stepper-item
-        heading="Compile member list"
-        description="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua"
-        complete
-      >
+      <calcite-stepper-item heading="Compile member list">
         <calcite-notice open width="full">
           <div slot="message">Step 2 Content Goes Here</div>
         </calcite-notice>
       </calcite-stepper-item>
-      <calcite-stepper-item
-        heading="Set member properties"
-        description="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua"
-        description="Some subtext"
-        error
-      >
+      <calcite-stepper-item heading="Set member properties" description="Some subtext">
         <calcite-notice open width="full">
           <div slot="message">Step 3 Content Goes Here</div>
         </calcite-notice>
       </calcite-stepper-item>
-      <calcite-stepper-item
-        heading="Confirm and complete"
-        description="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua"
-      >
+      <calcite-stepper-item heading="Confirm and complete">
         <calcite-notice open width="full">
           <div slot="message">Step 4 Content Goes Here</div>
         </calcite-notice>
       </calcite-stepper-item>
-    </calcite-stepper>`;
+    </calcite-stepper>
 
-export const responsiveLayoutScaleS_TestOnly = (): string => getBreakpointsStoryTemplate({ scale: "s", width: 400 });
-export const responsiveLayoutScaleM_TestOnly = (): string => getBreakpointsStoryTemplate({ scale: "m", width: 500 });
-export const responsiveLayoutScaleL_TestOnly = (): string => getBreakpointsStoryTemplate({ scale: "l", width: 600 });
+    <calcite-stepper layout="horizontal-single" numbered icon scale="m">
+      <calcite-stepper-item heading="Choose method">
+        <calcite-notice open width="full">
+          <div slot="message">Step 1 Content Goes Here</div>
+        </calcite-notice>
+      </calcite-stepper-item>
+      <calcite-stepper-item heading="Compile member list" selected>
+        <calcite-notice open width="full">
+          <div slot="message">Step 2 Content Goes Here</div>
+        </calcite-notice>
+      </calcite-stepper-item>
+      <calcite-stepper-item heading="Set member properties" description="Some subtext">
+        <calcite-notice open width="full">
+          <div slot="message">Step 3 Content Goes Here</div>
+        </calcite-notice>
+      </calcite-stepper-item>
+      <calcite-stepper-item heading="Confirm and complete">
+        <calcite-notice open width="full">
+          <div slot="message">Step 4 Content Goes Here</div>
+        </calcite-notice>
+      </calcite-stepper-item>
+    </calcite-stepper>
 
-export const responsiveLayoutWithDisabledStepperItems_TestOnly = (): string => html`<style>
-    calcite-stepper {
-      width: 300px;
-    }
-  </style>
-  <calcite-stepper numbered icon layout="horizontal" scale="s">
-    <calcite-stepper-item
-      heading="Choose method"
-      description="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua"
-      complete
-      disabled>
-      <calcite-notice open width="full">
-        <div slot="message">Step 1 Content Goes Here</div>
-      </calcite-notice>
-    </calcite-stepper-item>
-    <calcite-stepper-item
-      heading="Compile member list"
-      description="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua"
-      complete
-      disabled
-      selected
-    >
-      <calcite-notice open width="full">
-        <div slot="message">Step 2 Content Goes Here</div>
-      </calcite-notice>
-    </calcite-stepper-item>
-    <calcite-stepper-item
-      heading="Set member properties"
-      description="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua"
-      description="Some subtext"
-      error
-      disabled
-    >
-  </calcite-stepper>`;
+    <calcite-stepper layout="horizontal-single" numbered icon scale="l">
+      <calcite-stepper-item heading="Choose method">
+        <calcite-notice open width="full">
+          <div slot="message">Step 1 Content Goes Here</div>
+        </calcite-notice>
+      </calcite-stepper-item>
+      <calcite-stepper-item heading="Compile member list">
+        <calcite-notice open width="full">
+          <div slot="message">Step 2 Content Goes Here</div>
+        </calcite-notice>
+      </calcite-stepper-item>
+      <calcite-stepper-item heading="Set member properties" description="Some subtext" selected>
+        <calcite-notice open width="full">
+          <div slot="message">Step 3 Content Goes Here</div>
+        </calcite-notice>
+      </calcite-stepper-item>
+      <calcite-stepper-item heading="Confirm and complete">
+        <calcite-notice open width="full">
+          <div slot="message">Step 4 Content Goes Here</div>
+        </calcite-notice>
+      </calcite-stepper-item>
+    </calcite-stepper>
+  </div>
+`;
diff --git a/packages/calcite-components/src/components/stepper/stepper.tsx b/packages/calcite-components/src/components/stepper/stepper.tsx
index de487d192b5..d4b4db8e4be 100644
--- a/packages/calcite-components/src/components/stepper/stepper.tsx
+++ b/packages/calcite-components/src/components/stepper/stepper.tsx
@@ -14,8 +14,12 @@ import {
   readTask,
 } from "@stencil/core";
 import { focusElementInGroup, slotChangeGetAssignedElements } from "../../utils/dom";
-import { Layout, Position, Scale } from "../interfaces";
-import { StepperItemChangeEventDetail, StepperItemKeyEventDetail } from "./interfaces";
+import { Position, Scale } from "../interfaces";
+import {
+  StepperItemChangeEventDetail,
+  StepperItemKeyEventDetail,
+  StepperLayout,
+} from "./interfaces";
 import { createObserver } from "../../utils/observers";
 import { StepBar } from "./functional/step-bar";
 import { ITEM_MIN_WIDTH, CSS } from "./resources";
@@ -56,7 +60,7 @@ export class Stepper implements LocalizedComponent, T9nComponent {
   @Prop({ reflect: true }) icon = false;
 
   /** Defines the layout of the component. */
-  @Prop({ reflect: true }) layout: Extract<"horizontal" | "vertical", Layout> = "horizontal";
+  @Prop({ reflect: true }) layout: StepperLayout = "horizontal";
 
   /** When `true`, displays the step number in the `calcite-stepper-item` heading. */
   @Prop({ reflect: true }) numbered = false;
@@ -175,7 +179,7 @@ export class Stepper implements LocalizedComponent, T9nComponent {
           class={{ container: true, [CSS.singleView]: !this.multipleViewMode }}
           ref={this.setContainerEl}
         >
-          {!this.multipleViewMode && this.layout === "horizontal" && (
+          {this.layout === "horizontal-single" && (
             <div class={{ [CSS.stepBarContainer]: true }}>
               {this.items.map((item, index) => (
                 <StepBar
@@ -396,37 +400,32 @@ export class Stepper implements LocalizedComponent, T9nComponent {
 
   private determineActiveStepper(currentActivePositionChanged = false): void {
     const totalItems = this.items.length;
-    if (!this.elWidth || !totalItems || this.layout !== "horizontal" || totalItems === 1) {
+    if (!this.elWidth || !totalItems || this.layout === "vertical" || totalItems === 1) {
       return;
     }
 
     const activePosition = this.currentActivePosition || 0;
-    const totalMinWidthOfItems = totalItems * this.getMinWidthOfStepperItem();
-    const totalRowGap =
-      (totalItems - 1) * (parseInt(window.getComputedStyle(this.containerEl).rowGap) || 0);
-
-    if (this.elWidth <= totalMinWidthOfItems + totalRowGap) {
-      this.multipleViewMode = false;
 
-      this.items.forEach((item: HTMLCalciteStepperItemElement, index) => {
-        if (index !== activePosition) {
-          item.hidden = true;
-        } else {
-          item.hidden = false;
-          item.multipleViewMode = false;
-        }
-      });
-    } else if (this.elWidth > totalMinWidthOfItems + totalRowGap) {
+    if (this.layout === "horizontal") {
       if (this.multipleViewMode && !currentActivePositionChanged) {
         return;
       }
-
       this.multipleViewMode = true;
       this.setGridTemplateColumns(this.items);
       this.items.forEach((item: HTMLCalciteStepperItemElement) => {
         item.hidden = false;
         item.multipleViewMode = true;
       });
+    } else {
+      this.multipleViewMode = false;
+      this.items.forEach((item: HTMLCalciteStepperItemElement, index) => {
+        if (index !== activePosition) {
+          item.hidden = true;
+        } else {
+          item.hidden = false;
+          item.multipleViewMode = false;
+        }
+      });
     }
   }
 
@@ -471,7 +470,7 @@ export class Stepper implements LocalizedComponent, T9nComponent {
     const totalItems = this.items.length;
     const id = `${this.guid}-${isPositionStart ? "start" : "end"}`;
 
-    return layout === "horizontal" && !multipleViewMode ? (
+    return layout === "horizontal-single" && !multipleViewMode ? (
       <calcite-action
         alignment="center"
         appearance="transparent"
diff --git a/packages/calcite-components/src/demos/stepper.html b/packages/calcite-components/src/demos/stepper.html
index 9df97446357..75d3110c90e 100644
--- a/packages/calcite-components/src/demos/stepper.html
+++ b/packages/calcite-components/src/demos/stepper.html
@@ -41,6 +41,447 @@
 
   <body>
     <demo-dom-swapper>
+      <!--
+      **************************************************
+      * SMALL horizontal-single
+      **************************************************
+    -->
+      <!-- headers -->
+      <div class="parent-flex">
+        <div class="child-flex right-aligned-text"></div>
+        <div class="child-flex">Small horizontal-single</div>
+      </div>
+
+      <div class="parent-flex">
+        <div class="child-flex right-aligned-text">complete, active, error, idle + icons</div>
+
+        <div class="child-flex">
+          <calcite-stepper layout="horizontal-single" numbered icon scale="s">
+            <calcite-stepper-item heading="Choose method" complete>
+              <calcite-notice open width="full">
+                <div slot="message">Step 1 Content Goes Here</div>
+              </calcite-notice>
+            </calcite-stepper-item>
+            <calcite-stepper-item heading="Compile member list" complete>
+              <calcite-notice open width="full">
+                <div slot="message">Step 2 Content Goes Here</div>
+              </calcite-notice>
+            </calcite-stepper-item>
+            <calcite-stepper-item heading="Set member properties" description="Some subtext" error>
+              <calcite-notice open width="full">
+                <div slot="message">Step 3 Content Goes Here</div>
+              </calcite-notice>
+            </calcite-stepper-item>
+            <calcite-stepper-item heading="Confirm and complete">
+              <calcite-notice open width="full">
+                <div slot="message">Step 4 Content Goes Here</div>
+              </calcite-notice>
+            </calcite-stepper-item>
+          </calcite-stepper>
+        </div>
+      </div>
+
+      <!-- no content -->
+      <div class="parent-flex">
+        <div class="child-flex right-aligned-text">no content</div>
+
+        <div class="child-flex">
+          <calcite-stepper layout="horizontal-single" numbered scale="s">
+            <calcite-stepper-item heading="Choose method" complete> </calcite-stepper-item>
+            <calcite-stepper-item heading="Compile member list" complete> </calcite-stepper-item>
+            <calcite-stepper-item heading="Set member properties" description="Some subtext" active>
+            </calcite-stepper-item>
+            <calcite-stepper-item heading="Confirm and complete"> </calcite-stepper-item>
+          </calcite-stepper>
+        </div>
+      </div>
+
+      <!-- numbered -->
+      <div class="parent-flex">
+        <div class="child-flex right-aligned-text">numbered</div>
+
+        <div class="child-flex">
+          <calcite-stepper layout="horizontal-single" numbered scale="s">
+            <calcite-stepper-item heading="Choose method" complete>
+              <calcite-notice open width="full">
+                <div slot="message">Step 1 Content Goes Here</div>
+              </calcite-notice>
+            </calcite-stepper-item>
+            <calcite-stepper-item heading="Compile member list" complete>
+              <calcite-notice open width="full">
+                <div slot="message">Step 2 Content Goes Here</div>
+              </calcite-notice>
+            </calcite-stepper-item>
+            <calcite-stepper-item heading="Set member properties" description="Some subtext" active>
+              <calcite-notice open width="full">
+                <div slot="message">Step 3 Content Goes Here</div>
+              </calcite-notice>
+            </calcite-stepper-item>
+            <calcite-stepper-item heading="Confirm and complete">
+              <calcite-notice open width="full">
+                <div slot="message">Step 4 Content Goes Here</div>
+              </calcite-notice>
+            </calcite-stepper-item>
+          </calcite-stepper>
+        </div>
+      </div>
+
+      <!-- Arabic numberingSystem -->
+      <div class="parent-flex">
+        <div class="child-flex right-aligned-text">Arabic numbering system</div>
+
+        <div class="child-flex">
+          <calcite-stepper layout="horizontal-single" numbered numbering-system="arab" lang="ar" dir="rtl" scale="s">
+            <calcite-stepper-item heading="الخطوةالاولى" complete>
+              <calcite-notice open width="full">
+                <div slot="message">الخطوة الأولى للمحتوى هنا</div>
+              </calcite-notice>
+            </calcite-stepper-item>
+            <calcite-stepper-item heading="الخطوة الثانية" complete>
+              <calcite-notice open width="full">
+                <div slot="message">الخطوة الثانية للمحتوى هنا</div>
+              </calcite-notice>
+            </calcite-stepper-item>
+            <calcite-stepper-item heading="الخطوة الثالثة" description="بعض النصوص الفرعية" active>
+              <calcite-notice open width="full">
+                <div slot="message">الخطوة الثالثة المحتوى يذهب هنا</div>
+              </calcite-notice>
+            </calcite-stepper-item>
+            <calcite-stepper-item heading="الخطوة الرابعة">
+              <calcite-notice open width="full">
+                <div slot="message">الخطوة الرابعة المحتوى يذهب هنا</div>
+              </calcite-notice>
+            </calcite-stepper-item>
+          </calcite-stepper>
+        </div>
+      </div>
+
+      <!-- disabled -->
+      <div class="parent-flex">
+        <div class="child-flex right-aligned-text">disabled</div>
+
+        <div class="child-flex">
+          <calcite-stepper layout="horizontal-single" scale="s">
+            <calcite-stepper-item heading="Choose method" complete disabled>
+              <calcite-notice open width="full">
+                <div slot="message">Step 1 Content Goes Here</div>
+              </calcite-notice>
+            </calcite-stepper-item>
+            <calcite-stepper-item heading="Compile member list" error>
+              <calcite-notice open width="full">
+                <div slot="message">Step 2 Content Goes Here</div>
+              </calcite-notice>
+            </calcite-stepper-item>
+            <calcite-stepper-item heading="Set member properties" description="Some subtext" active>
+              <calcite-notice open width="full">
+                <div slot="message">Step 3 Content Goes Here</div>
+              </calcite-notice>
+            </calcite-stepper-item>
+            <calcite-stepper-item heading="Another thing!" disabled id="demo-make-non-disabled">
+              <calcite-notice open width="full">
+                <div slot="message">Step 4 Content Goes Here</div>
+              </calcite-notice>
+            </calcite-stepper-item>
+          </calcite-stepper>
+        </div>
+      </div>
+
+      <hr />
+
+      <!--
+      **************************************************
+      * MEDIUM
+      **************************************************
+    -->
+      <!-- headers -->
+      <div class="parent-flex">
+        <div class="child-flex right-aligned-text"></div>
+        <div class="child-flex">Medium horizontal-single</div>
+      </div>
+
+      <div class="parent-flex">
+        <div class="child-flex right-aligned-text">complete, active, error, idle + icons</div>
+
+        <div class="child-flex">
+          <calcite-stepper layout="horizontal-single" numbered icon scale="m">
+            <calcite-stepper-item heading="Choose method" complete>
+              <calcite-notice open width="full">
+                <div slot="message">Step 1 Content Goes Here</div>
+              </calcite-notice>
+            </calcite-stepper-item>
+            <calcite-stepper-item heading="Compile member list" complete>
+              <calcite-notice open width="full">
+                <div slot="message">Step 2 Content Goes Here</div>
+              </calcite-notice>
+            </calcite-stepper-item>
+            <calcite-stepper-item heading="Set member properties" description="Some subtext" error>
+              <calcite-notice open width="full">
+                <div slot="message">Step 3 Content Goes Here</div>
+              </calcite-notice>
+            </calcite-stepper-item>
+            <calcite-stepper-item heading="Confirm and complete">
+              <calcite-notice open width="full">
+                <div slot="message">Step 4 Content Goes Here</div>
+              </calcite-notice>
+            </calcite-stepper-item>
+          </calcite-stepper>
+        </div>
+      </div>
+
+      <!-- no content -->
+      <div class="parent-flex">
+        <div class="child-flex right-aligned-text">no content</div>
+
+        <div class="child-flex">
+          <calcite-stepper layout="horizontal-single" numbered scale="m">
+            <calcite-stepper-item heading="Choose method" complete> </calcite-stepper-item>
+            <calcite-stepper-item heading="Compile member list" complete> </calcite-stepper-item>
+            <calcite-stepper-item heading="Set member properties" description="Some subtext" active>
+            </calcite-stepper-item>
+            <calcite-stepper-item heading="Confirm and complete"> </calcite-stepper-item>
+          </calcite-stepper>
+        </div>
+      </div>
+
+      <!-- numbered -->
+      <div class="parent-flex">
+        <div class="child-flex right-aligned-text">numbered</div>
+
+        <div class="child-flex">
+          <calcite-stepper layout="horizontal-single" numbered scale="m">
+            <calcite-stepper-item heading="Choose method" complete>
+              <calcite-notice open width="full">
+                <div slot="message">Step 1 Content Goes Here</div>
+              </calcite-notice>
+            </calcite-stepper-item>
+            <calcite-stepper-item heading="Compile member list" complete>
+              <calcite-notice open width="full">
+                <div slot="message">Step 2 Content Goes Here</div>
+              </calcite-notice>
+            </calcite-stepper-item>
+            <calcite-stepper-item heading="Set member properties" description="Some subtext" active>
+              <calcite-notice open width="full">
+                <div slot="message">Step 3 Content Goes Here</div>
+              </calcite-notice>
+            </calcite-stepper-item>
+            <calcite-stepper-item heading="Confirm and complete">
+              <calcite-notice open width="full">
+                <div slot="message">Step 4 Content Goes Here</div>
+              </calcite-notice>
+            </calcite-stepper-item>
+          </calcite-stepper>
+        </div>
+      </div>
+
+      <!-- Arabic numberingSystem -->
+      <div class="parent-flex">
+        <div class="child-flex right-aligned-text">Arabic numbering system</div>
+
+        <div class="child-flex">
+          <calcite-stepper layout="horizontal-single" numbered numbering-system="arab" lang="ar" dir="rtl" scale="m">
+            <calcite-stepper-item heading="الخطوةالاولى" complete>
+              <calcite-notice open width="full">
+                <div slot="message">الخطوة الأولى للمحتوى هنا</div>
+              </calcite-notice>
+            </calcite-stepper-item>
+            <calcite-stepper-item heading="الخطوة الثانية" complete>
+              <calcite-notice open width="full">
+                <div slot="message">الخطوة الثانية للمحتوى هنا</div>
+              </calcite-notice>
+            </calcite-stepper-item>
+            <calcite-stepper-item heading="الخطوة الثالثة" description="بعض النصوص الفرعية" active>
+              <calcite-notice open width="full">
+                <div slot="message">الخطوة الثالثة المحتوى يذهب هنا</div>
+              </calcite-notice>
+            </calcite-stepper-item>
+            <calcite-stepper-item heading="الخطوة الرابعة">
+              <calcite-notice open width="full">
+                <div slot="message">الخطوة الرابعة المحتوى يذهب هنا</div>
+              </calcite-notice>
+            </calcite-stepper-item>
+          </calcite-stepper>
+        </div>
+      </div>
+
+      <!-- disabled -->
+      <div class="parent-flex">
+        <div class="child-flex right-aligned-text">disabled</div>
+
+        <div class="child-flex">
+          <calcite-stepper layout="horizontal-single" scale="m">
+            <calcite-stepper-item heading="Choose method" complete disabled>
+              <calcite-notice open width="full">
+                <div slot="message">Step 1 Content Goes Here</div>
+              </calcite-notice>
+            </calcite-stepper-item>
+            <calcite-stepper-item heading="Compile member list" error>
+              <calcite-notice open width="full">
+                <div slot="message">Step 2 Content Goes Here</div>
+              </calcite-notice>
+            </calcite-stepper-item>
+            <calcite-stepper-item heading="Set member properties" description="Some subtext" active>
+              <calcite-notice open width="full">
+                <div slot="message">Step 3 Content Goes Here</div>
+              </calcite-notice>
+            </calcite-stepper-item>
+            <calcite-stepper-item heading="Another thing!" disabled id="demo-make-non-disabled">
+              <calcite-notice open width="full">
+                <div slot="message">Step 4 Content Goes Here</div>
+              </calcite-notice>
+            </calcite-stepper-item>
+          </calcite-stepper>
+        </div>
+      </div>
+
+      <hr />
+
+      <!--
+      **************************************************
+      * LARGE
+      **************************************************
+    -->
+      <!-- headers -->
+      <div class="parent-flex">
+        <div class="child-flex right-aligned-text"></div>
+        <div class="child-flex">Large horizontal-single</div>
+      </div>
+
+      <div class="parent-flex">
+        <div class="child-flex right-aligned-text">complete, active, error, idle + icons</div>
+
+        <div class="child-flex">
+          <calcite-stepper layout="horizontal-single" numbered icon scale="l">
+            <calcite-stepper-item heading="Choose method" complete>
+              <calcite-notice open width="full">
+                <div slot="message">Step 1 Content Goes Here</div>
+              </calcite-notice>
+            </calcite-stepper-item>
+            <calcite-stepper-item heading="Compile member list" complete>
+              <calcite-notice open width="full">
+                <div slot="message">Step 2 Content Goes Here</div>
+              </calcite-notice>
+            </calcite-stepper-item>
+            <calcite-stepper-item heading="Set member properties" description="Some subtext" error>
+              <calcite-notice open width="full">
+                <div slot="message">Step 3 Content Goes Here</div>
+              </calcite-notice>
+            </calcite-stepper-item>
+            <calcite-stepper-item heading="Confirm and complete">
+              <calcite-notice open width="full">
+                <div slot="message">Step 4 Content Goes Here</div>
+              </calcite-notice>
+            </calcite-stepper-item>
+          </calcite-stepper>
+        </div>
+      </div>
+
+      <!-- no content -->
+      <div class="parent-flex">
+        <div class="child-flex right-aligned-text">no content</div>
+
+        <div class="child-flex">
+          <calcite-stepper layout="horizontal-single" numbered scale="l">
+            <calcite-stepper-item heading="Choose method" complete> </calcite-stepper-item>
+            <calcite-stepper-item heading="Compile member list" complete> </calcite-stepper-item>
+            <calcite-stepper-item heading="Set member properties" description="Some subtext" active>
+            </calcite-stepper-item>
+            <calcite-stepper-item heading="Confirm and complete"> </calcite-stepper-item>
+          </calcite-stepper>
+        </div>
+      </div>
+
+      <!-- numbered -->
+      <div class="parent-flex">
+        <div class="child-flex right-aligned-text">numbered</div>
+
+        <div class="child-flex">
+          <calcite-stepper layout="horizontal-single" numbered scale="l">
+            <calcite-stepper-item heading="Choose method" complete>
+              <calcite-notice open width="full">
+                <div slot="message">Step 1 Content Goes Here</div>
+              </calcite-notice>
+            </calcite-stepper-item>
+            <calcite-stepper-item heading="Compile member list" complete>
+              <calcite-notice open width="full">
+                <div slot="message">Step 2 Content Goes Here</div>
+              </calcite-notice>
+            </calcite-stepper-item>
+            <calcite-stepper-item heading="Set member properties" description="Some subtext" active>
+              <calcite-notice open width="full">
+                <div slot="message">Step 3 Content Goes Here</div>
+              </calcite-notice>
+            </calcite-stepper-item>
+            <calcite-stepper-item heading="Confirm and complete">
+              <calcite-notice open width="full">
+                <div slot="message">Step 4 Content Goes Here</div>
+              </calcite-notice>
+            </calcite-stepper-item>
+          </calcite-stepper>
+        </div>
+      </div>
+
+      <!-- Arabic numberingSystem -->
+      <div class="parent-flex">
+        <div class="child-flex right-aligned-text">Arabic numbering system</div>
+
+        <div class="child-flex">
+          <calcite-stepper layout="horizontal-single" numbered numbering-system="arab" lang="ar" dir="rtl" scale="l">
+            <calcite-stepper-item heading="الخطوةالاولى" complete>
+              <calcite-notice open width="full">
+                <div slot="message">الخطوة الأولى للمحتوى هنا</div>
+              </calcite-notice>
+            </calcite-stepper-item>
+            <calcite-stepper-item heading="الخطوة الثانية" complete>
+              <calcite-notice open width="full">
+                <div slot="message">الخطوة الثانية للمحتوى هنا</div>
+              </calcite-notice>
+            </calcite-stepper-item>
+            <calcite-stepper-item heading="الخطوة الثالثة" description="بعض النصوص الفرعية" active>
+              <calcite-notice open width="full">
+                <div slot="message">الخطوة الثالثة المحتوى يذهب هنا</div>
+              </calcite-notice>
+            </calcite-stepper-item>
+            <calcite-stepper-item heading="الخطوة الرابعة">
+              <calcite-notice open width="full">
+                <div slot="message">الخطوة الرابعة المحتوى يذهب هنا</div>
+              </calcite-notice>
+            </calcite-stepper-item>
+          </calcite-stepper>
+        </div>
+      </div>
+
+      <!-- disabled -->
+      <div class="parent-flex">
+        <div class="child-flex right-aligned-text">disabled</div>
+
+        <div class="child-flex">
+          <calcite-stepper layout="horizontal-single" scale="l">
+            <calcite-stepper-item heading="Choose method" complete disabled>
+              <calcite-notice open width="full">
+                <div slot="message">Step 1 Content Goes Here</div>
+              </calcite-notice>
+            </calcite-stepper-item>
+            <calcite-stepper-item heading="Compile member list" error>
+              <calcite-notice open width="full">
+                <div slot="message">Step 2 Content Goes Here</div>
+              </calcite-notice>
+            </calcite-stepper-item>
+            <calcite-stepper-item heading="Set member properties" description="Some subtext" active>
+              <calcite-notice open width="full">
+                <div slot="message">Step 3 Content Goes Here</div>
+              </calcite-notice>
+            </calcite-stepper-item>
+            <calcite-stepper-item heading="Another thing!" disabled id="demo-make-non-disabled">
+              <calcite-notice open width="full">
+                <div slot="message">Step 4 Content Goes Here</div>
+              </calcite-notice>
+            </calcite-stepper-item>
+          </calcite-stepper>
+        </div>
+      </div>
+
+      <hr />
+
       <!--
       **************************************************
       * SMALL
@@ -49,7 +490,7 @@
       <!-- headers -->
       <div class="parent-flex">
         <div class="child-flex right-aligned-text"></div>
-        <div class="child-flex">Small</div>
+        <div class="child-flex">Small horizontal</div>
       </div>
 
       <div class="parent-flex">
@@ -196,7 +637,7 @@
       <!-- headers -->
       <div class="parent-flex">
         <div class="child-flex right-aligned-text"></div>
-        <div class="child-flex">Medium</div>
+        <div class="child-flex">Medium horizontal</div>
       </div>
 
       <div class="parent-flex">
@@ -343,7 +784,7 @@
       <!-- headers -->
       <div class="parent-flex">
         <div class="child-flex right-aligned-text"></div>
-        <div class="child-flex">Large</div>
+        <div class="child-flex">Large horizontal</div>
       </div>
 
       <div class="parent-flex">