From 70555018099bfd1c0d6f5c8cdc0a211b9b2417d3 Mon Sep 17 00:00:00 2001
From: Erik Harper <eriklharper@pm.me>
Date: Fri, 9 Feb 2024 15:15:48 -0800
Subject: [PATCH 01/11] first commit adding new layout type definition and
 demos

---
 .../calcite-components/src/components.d.ts    |  12 +-
 .../components/stepper-item/stepper-item.tsx  |   5 +-
 .../src/components/stepper/interfaces.ts      |   2 +
 .../src/components/stepper/stepper.tsx        |  10 +-
 .../calcite-components/src/demos/stepper.html | 441 ++++++++++++++++++
 5 files changed, 459 insertions(+), 11 deletions(-)

diff --git a/packages/calcite-components/src/components.d.ts b/packages/calcite-components/src/components.d.ts
index 2ac3aa8b583..e70dd81ed9c 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.
          */
@@ -11866,7 +11866,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.
          */
@@ -11933,7 +11933,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/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..70852421efb 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" | "single-horizontal";
diff --git a/packages/calcite-components/src/components/stepper/stepper.tsx b/packages/calcite-components/src/components/stepper/stepper.tsx
index de487d192b5..6af9fa49219 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;
diff --git a/packages/calcite-components/src/demos/stepper.html b/packages/calcite-components/src/demos/stepper.html
index 9df97446357..b54fce8bb11 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 single-horizontal
+      **************************************************
+    -->
+      <!-- headers -->
+      <div class="parent-flex">
+        <div class="child-flex right-aligned-text"></div>
+        <div class="child-flex">Small</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="single-horizontal" 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="single-horizontal" 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="single-horizontal" 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="single-horizontal" 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="single-horizontal" 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</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="single-horizontal" 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="single-horizontal" 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="single-horizontal" 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="single-horizontal" 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="single-horizontal" 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</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="single-horizontal" 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="single-horizontal" 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="single-horizontal" 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="single-horizontal" 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="single-horizontal" 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

From a2385ff7afb70d98da4bd66f9bab0e8f37d9c6a3 Mon Sep 17 00:00:00 2001
From: Erik Harper <eriklharper@pm.me>
Date: Mon, 12 Feb 2024 10:58:55 -0800
Subject: [PATCH 02/11] determining multipleViewMode in stepper based on layout
 instead of elWidth

---
 .../src/components/stepper/stepper.tsx        | 27 ++++++++-----------
 1 file changed, 11 insertions(+), 16 deletions(-)

diff --git a/packages/calcite-components/src/components/stepper/stepper.tsx b/packages/calcite-components/src/components/stepper/stepper.tsx
index 6af9fa49219..0bdc143b025 100644
--- a/packages/calcite-components/src/components/stepper/stepper.tsx
+++ b/packages/calcite-components/src/components/stepper/stepper.tsx
@@ -405,32 +405,27 @@ export class Stepper implements LocalizedComponent, T9nComponent {
     }
 
     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;
+        }
+      });
     }
   }
 

From 2c021e9eea72b8254283510f473aad485ac61180 Mon Sep 17 00:00:00 2001
From: Erik Harper <eriklharper@pm.me>
Date: Mon, 12 Feb 2024 16:40:06 -0800
Subject: [PATCH 03/11] another step in the right direction

---
 .../src/components/stepper/stepper.scss       | 33 ++++++++++++-------
 .../src/components/stepper/stepper.tsx        |  6 ++--
 2 files changed, 24 insertions(+), 15 deletions(-)

diff --git a/packages/calcite-components/src/components/stepper/stepper.scss b/packages/calcite-components/src/components/stepper/stepper.scss
index c5fa6714d19..027dfd3e9aa 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="single-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"][scale="s"]) .container {
-  gap: theme("spacing.1") var(--calcite-internal-stepper-item-spacing-unit-s);
+:host([layout="horizontal"][scale="s"]),
+:host([layout="single-horizontal"][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="single-horizontal"][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.tsx b/packages/calcite-components/src/components/stepper/stepper.tsx
index 0bdc143b025..af6f1b81aa1 100644
--- a/packages/calcite-components/src/components/stepper/stepper.tsx
+++ b/packages/calcite-components/src/components/stepper/stepper.tsx
@@ -179,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 === "single-horizontal" && (
             <div class={{ [CSS.stepBarContainer]: true }}>
               {this.items.map((item, index) => (
                 <StepBar
@@ -400,7 +400,7 @@ 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;
     }
 
@@ -470,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 === "single-horizontal" && !multipleViewMode ? (
       <calcite-action
         alignment="center"
         appearance="transparent"

From df2e69f39bdcf4b52cef21ea94a0f381f389dc66 Mon Sep 17 00:00:00 2001
From: Erik Harper <eriklharper@pm.me>
Date: Tue, 13 Feb 2024 12:43:00 -0800
Subject: [PATCH 04/11] getting stepper-item styles working to achieve the
 single view, adding additional info to labels in demo page

---
 .../components/stepper-item/stepper-item.scss | 78 +++++++++++++------
 .../calcite-components/src/demos/stepper.html | 12 +--
 2 files changed, 60 insertions(+), 30 deletions(-)

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..4b87093622d 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="single-horizontal"]) {
   display: contents;
 
   .container {
@@ -275,38 +276,67 @@
   }
 }
 
-:host([layout="horizontal"][disabled]) {
+:host([layout="horizontal"][disabled]),
+:host([layout="single-horizontal"][disabled]) {
   .stepper-item-header {
     @extend %disabled-host-only;
   }
 }
 
-:host([layout="horizontal"][selected]) {
+:host([layout="single-horizontal"][selected]) {
+  .stepper-item-header {
+    grid-area: 1 / 1 / 1 / -1;
+  }
+}
+
+:host([layout="horizontal"][selected]),
+:host([layout="single-horizontal"][selected]) {
   .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="single-horizontal"][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="single-horizontal"][complete]:hover:not([disabled]):not([selected])),
+:host([layout="single-horizontal"][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="single-horizontal"][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="single-horizontal"][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="single-horizontal"]:hover:not([disabled]):not([selected])),
+:host([layout="single-horizontal"]: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="single-horizontal"][error]:hover:not([disabled]):not([selected])),
+:host([layout="single-horizontal"][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="single-horizontal"]) .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="single-horizontal"][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="single-horizontal"][error][selected]),
+:host([layout="single-horizontal"][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="single-horizontal"][complete][selected]) .container {
   & .stepper-item-icon {
     @apply opacity-disabled;
   }
diff --git a/packages/calcite-components/src/demos/stepper.html b/packages/calcite-components/src/demos/stepper.html
index b54fce8bb11..e47ed8c1158 100644
--- a/packages/calcite-components/src/demos/stepper.html
+++ b/packages/calcite-components/src/demos/stepper.html
@@ -49,7 +49,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 single-horizontal</div>
       </div>
 
       <div class="parent-flex">
@@ -196,7 +196,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 single-horizontal</div>
       </div>
 
       <div class="parent-flex">
@@ -343,7 +343,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 single-horizontal</div>
       </div>
 
       <div class="parent-flex">
@@ -490,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">
@@ -637,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">
@@ -784,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">

From cf022d0a0dba62ea71edc874db4eb07063471d97 Mon Sep 17 00:00:00 2001
From: Erik Harper <eriklharper@pm.me>
Date: Tue, 13 Feb 2024 14:27:25 -0800
Subject: [PATCH 05/11] renaming to horizontal-single

---
 .../components/stepper-item/stepper-item.scss | 36 +++++++++---------
 .../src/components/stepper/interfaces.ts      |  2 +-
 .../src/components/stepper/stepper.scss       |  6 +--
 .../src/components/stepper/stepper.tsx        |  4 +-
 .../calcite-components/src/demos/stepper.html | 38 +++++++++----------
 5 files changed, 43 insertions(+), 43 deletions(-)

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 4b87093622d..93910dc6785 100644
--- a/packages/calcite-components/src/components/stepper-item/stepper-item.scss
+++ b/packages/calcite-components/src/components/stepper-item/stepper-item.scss
@@ -248,7 +248,7 @@
 }
 
 :host([layout="horizontal"]),
-:host([layout="single-horizontal"]) {
+:host([layout="horizontal-single"]) {
   display: contents;
 
   .container {
@@ -277,63 +277,63 @@
 }
 
 :host([layout="horizontal"][disabled]),
-:host([layout="single-horizontal"][disabled]) {
+:host([layout="horizontal-single"][disabled]) {
   .stepper-item-header {
     @extend %disabled-host-only;
   }
 }
 
-:host([layout="single-horizontal"][selected]) {
+:host([layout="horizontal-single"][selected]) {
   .stepper-item-header {
     grid-area: 1 / 1 / 1 / -1;
   }
 }
 
 :host([layout="horizontal"][selected]),
-:host([layout="single-horizontal"][selected]) {
+:host([layout="horizontal-single"][selected]) {
   .stepper-item-content {
     grid-area: 2 / 1 / 2 / -1;
   }
 }
 
 :host([layout="horizontal"][complete]),
-:host([layout="single-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])),
 :host([layout="horizontal"][complete]:focus:not([disabled]):not([selected])),
-:host([layout="single-horizontal"][complete]:hover:not([disabled]):not([selected])),
-:host([layout="single-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]),
-:host([layout="single-horizontal"][error]) {
+:host([layout="horizontal-single"][error]) {
   .stepper-item-header {
     @apply border-color-danger;
   }
 }
 :host([layout="horizontal"][selected][multiple-view-mode]),
-:host([layout="single-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])),
 :host([layout="horizontal"]:focus:not([disabled]):not([selected])),
-:host([layout="single-horizontal"]:hover:not([disabled]):not([selected])),
-:host([layout="single-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])),
 :host([layout="horizontal"][error]:focus:not([disabled]):not([selected])),
-:host([layout="single-horizontal"][error]:hover:not([disabled]):not([selected])),
-:host([layout="single-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;
   }
@@ -365,14 +365,14 @@
   }
 }
 
-:host([layout="single-horizontal"]) .stepper-item-header {
+: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="single-horizontal"][error]) .container {
+:host([layout="horizontal-single"][error]) .container {
   & .stepper-item-number {
     color: theme("backgroundColor.danger");
   }
@@ -382,15 +382,15 @@
   }
 }
 
-:host([layout="single-horizontal"][error][selected]),
-:host([layout="single-horizontal"][complete][selected]) .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="single-horizontal"][complete][selected]) .container {
+:host([layout="horizontal-single"][complete][selected]) .container {
   & .stepper-item-icon {
     @apply opacity-disabled;
   }
diff --git a/packages/calcite-components/src/components/stepper/interfaces.ts b/packages/calcite-components/src/components/stepper/interfaces.ts
index 70852421efb..83051ad73d4 100644
--- a/packages/calcite-components/src/components/stepper/interfaces.ts
+++ b/packages/calcite-components/src/components/stepper/interfaces.ts
@@ -10,4 +10,4 @@ export interface StepperItemChangeEventDetail {
   position: number;
 }
 
-export type StepperLayout = "horizontal" | "vertical" | "single-horizontal";
+export type StepperLayout = "horizontal" | "vertical" | "horizontal-single";
diff --git a/packages/calcite-components/src/components/stepper/stepper.scss b/packages/calcite-components/src/components/stepper/stepper.scss
index 027dfd3e9aa..2f70fa621a6 100644
--- a/packages/calcite-components/src/components/stepper/stepper.scss
+++ b/packages/calcite-components/src/components/stepper/stepper.scss
@@ -38,7 +38,7 @@
 }
 
 :host([layout="horizontal"]),
-:host([layout="single-horizontal"]) {
+:host([layout="horizontal-single"]) {
   .container {
     display: grid;
     // grid-templates-columns are dynamically generated
@@ -51,14 +51,14 @@
 }
 
 :host([layout="horizontal"][scale="s"]),
-:host([layout="single-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"]),
-:host([layout="single-horizontal"][scale="l"]) {
+:host([layout="horizontal-single"][scale="l"]) {
   .container {
     gap: theme("spacing.3") var(--calcite-internal-stepper-item-spacing-unit-s);
   }
diff --git a/packages/calcite-components/src/components/stepper/stepper.tsx b/packages/calcite-components/src/components/stepper/stepper.tsx
index af6f1b81aa1..d4b4db8e4be 100644
--- a/packages/calcite-components/src/components/stepper/stepper.tsx
+++ b/packages/calcite-components/src/components/stepper/stepper.tsx
@@ -179,7 +179,7 @@ export class Stepper implements LocalizedComponent, T9nComponent {
           class={{ container: true, [CSS.singleView]: !this.multipleViewMode }}
           ref={this.setContainerEl}
         >
-          {this.layout === "single-horizontal" && (
+          {this.layout === "horizontal-single" && (
             <div class={{ [CSS.stepBarContainer]: true }}>
               {this.items.map((item, index) => (
                 <StepBar
@@ -470,7 +470,7 @@ export class Stepper implements LocalizedComponent, T9nComponent {
     const totalItems = this.items.length;
     const id = `${this.guid}-${isPositionStart ? "start" : "end"}`;
 
-    return layout === "single-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 e47ed8c1158..75d3110c90e 100644
--- a/packages/calcite-components/src/demos/stepper.html
+++ b/packages/calcite-components/src/demos/stepper.html
@@ -43,20 +43,20 @@
     <demo-dom-swapper>
       <!--
       **************************************************
-      * SMALL single-horizontal
+      * SMALL horizontal-single
       **************************************************
     -->
       <!-- headers -->
       <div class="parent-flex">
         <div class="child-flex right-aligned-text"></div>
-        <div class="child-flex">Small single-horizontal</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="single-horizontal" numbered icon scale="s">
+          <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>
@@ -86,7 +86,7 @@
         <div class="child-flex right-aligned-text">no content</div>
 
         <div class="child-flex">
-          <calcite-stepper layout="single-horizontal" numbered scale="s">
+          <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>
@@ -101,7 +101,7 @@
         <div class="child-flex right-aligned-text">numbered</div>
 
         <div class="child-flex">
-          <calcite-stepper layout="single-horizontal" numbered scale="s">
+          <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>
@@ -131,7 +131,7 @@
         <div class="child-flex right-aligned-text">Arabic numbering system</div>
 
         <div class="child-flex">
-          <calcite-stepper layout="single-horizontal" numbered numbering-system="arab" lang="ar" dir="rtl" scale="s">
+          <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>
@@ -161,7 +161,7 @@
         <div class="child-flex right-aligned-text">disabled</div>
 
         <div class="child-flex">
-          <calcite-stepper layout="single-horizontal" scale="s">
+          <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>
@@ -196,14 +196,14 @@
       <!-- headers -->
       <div class="parent-flex">
         <div class="child-flex right-aligned-text"></div>
-        <div class="child-flex">Medium single-horizontal</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="single-horizontal" numbered icon scale="m">
+          <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>
@@ -233,7 +233,7 @@
         <div class="child-flex right-aligned-text">no content</div>
 
         <div class="child-flex">
-          <calcite-stepper layout="single-horizontal" numbered scale="m">
+          <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>
@@ -248,7 +248,7 @@
         <div class="child-flex right-aligned-text">numbered</div>
 
         <div class="child-flex">
-          <calcite-stepper layout="single-horizontal" numbered scale="m">
+          <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>
@@ -278,7 +278,7 @@
         <div class="child-flex right-aligned-text">Arabic numbering system</div>
 
         <div class="child-flex">
-          <calcite-stepper layout="single-horizontal" numbered numbering-system="arab" lang="ar" dir="rtl" scale="m">
+          <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>
@@ -308,7 +308,7 @@
         <div class="child-flex right-aligned-text">disabled</div>
 
         <div class="child-flex">
-          <calcite-stepper layout="single-horizontal" scale="m">
+          <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>
@@ -343,14 +343,14 @@
       <!-- headers -->
       <div class="parent-flex">
         <div class="child-flex right-aligned-text"></div>
-        <div class="child-flex">Large single-horizontal</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="single-horizontal" numbered icon scale="l">
+          <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>
@@ -380,7 +380,7 @@
         <div class="child-flex right-aligned-text">no content</div>
 
         <div class="child-flex">
-          <calcite-stepper layout="single-horizontal" numbered scale="l">
+          <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>
@@ -395,7 +395,7 @@
         <div class="child-flex right-aligned-text">numbered</div>
 
         <div class="child-flex">
-          <calcite-stepper layout="single-horizontal" numbered scale="l">
+          <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>
@@ -425,7 +425,7 @@
         <div class="child-flex right-aligned-text">Arabic numbering system</div>
 
         <div class="child-flex">
-          <calcite-stepper layout="single-horizontal" numbered numbering-system="arab" lang="ar" dir="rtl" scale="l">
+          <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>
@@ -455,7 +455,7 @@
         <div class="child-flex right-aligned-text">disabled</div>
 
         <div class="child-flex">
-          <calcite-stepper layout="single-horizontal" scale="l">
+          <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>

From 0ee29db8686298e28342177ee8b3f58311b65c33 Mon Sep 17 00:00:00 2001
From: Erik Harper <eriklharper@pm.me>
Date: Tue, 13 Feb 2024 15:00:10 -0800
Subject: [PATCH 06/11] adding new layout mode to story knobs, and a testonly
 story

---
 .../src/components/stepper-item/readme.md     | 20 ++---
 .../src/components/stepper/readme.md          | 18 ++---
 .../src/components/stepper/stepper.stories.ts | 79 ++++++++++++++++++-
 3 files changed, 95 insertions(+), 22 deletions(-)

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/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.stories.ts b/packages/calcite-components/src/components/stepper/stepper.stories.ts
index f99a31efc61..084252f10a1 100644
--- a/packages/calcite-components/src/components/stepper/stepper.stories.ts
+++ b/packages/calcite-components/src/components/stepper/stepper.stories.ts
@@ -20,7 +20,7 @@ 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)}
@@ -58,7 +58,7 @@ export const simple = (): string => html`
   <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)}
@@ -96,7 +96,7 @@ export const darkModeRTL_TestOnly = (): string => html`
   <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,6 +209,79 @@ export const verticalLayout_TestOnly = (): string =>
       >
     </calcite-stepper>`;
 
+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">
+        <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>
+
+    <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>
+
+    <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>
+`;
+
 const getBreakpointsStoryTemplate = ({ scale, width }: { scale: string; width: number }): string =>
   html`<style>
       calcite-stepper {

From 237495b7c2592bc2a702e15d0bb2c83ceeb5b6b1 Mon Sep 17 00:00:00 2001
From: Erik Harper <eriklharper@pm.me>
Date: Tue, 13 Feb 2024 15:06:38 -0800
Subject: [PATCH 07/11] removing duplicate scale knob declarations

---
 .../src/components/stepper/stepper.stories.ts                  | 3 ---
 1 file changed, 3 deletions(-)

diff --git a/packages/calcite-components/src/components/stepper/stepper.stories.ts b/packages/calcite-components/src/components/stepper/stepper.stories.ts
index 084252f10a1..0d81bd324ca 100644
--- a/packages/calcite-components/src/components/stepper/stepper.stories.ts
+++ b/packages/calcite-components/src/components/stepper/stepper.stories.ts
@@ -19,7 +19,6 @@ 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-single"], "horizontal")}"
     scale="${select("scale", ["s", "m", "l"], "m")}"
     ${boolean("numbered", true)}
@@ -57,7 +56,6 @@ 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-single"], "horizontal")}"
     scale="${select("scale", ["s", "m", "l"], "m")}"
     ${boolean("numbered", true)}
@@ -95,7 +93,6 @@ 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-single"], "horizontal")}"
     scale="${select("scale", ["s", "m", "l"], "m")}"
     ${boolean("numbered", true)}

From b013d20dade152ab31344969ed4e147cd2b5e848 Mon Sep 17 00:00:00 2001
From: Erik Harper <eriklharper@pm.me>
Date: Tue, 13 Feb 2024 16:24:28 -0800
Subject: [PATCH 08/11] repurposing responsive test

---
 .../src/components/stepper/stepper.e2e.ts     | 50 +++++++++----------
 1 file changed, 25 insertions(+), 25 deletions(-)

diff --git a/packages/calcite-components/src/components/stepper/stepper.e2e.ts b/packages/calcite-components/src/components/stepper/stepper.e2e.ts
index c2b3073e8d3..3875e3b3af3 100644
--- a/packages/calcite-components/src/components/stepper/stepper.e2e.ts
+++ b/packages/calcite-components/src/components/stepper/stepper.e2e.ts
@@ -743,35 +743,35 @@ describe("calcite-stepper", () => {
     expect(await stepperItem2.getProperty("selected")).toBe(true);
   });
 
-  describe("responsive layout", () => {
-    it("should display action buttons when width is smaller", async () => {
-      const page = await newE2EPage();
-      await page.setContent(
-        html`<calcite-stepper style="width: 100px">
-          <calcite-stepper-item heading="Step 1" id="step-1">
-            <div>Step 1 content</div>
-          </calcite-stepper-item>
-          <calcite-stepper-item heading="Step 2" id="step-2">
-            <div>Step 2 content</div>
-          </calcite-stepper-item>
-        </calcite-stepper>`,
-      );
+  it("should display action buttons when layout is horizontal-single", async () => {
+    const page = await newE2EPage();
+    await page.setContent(
+      html`<calcite-stepper layout="horizontal-single">
+        <calcite-stepper-item heading="Step 1" id="step-1">
+          <div>Step 1 content</div>
+        </calcite-stepper-item>
+        <calcite-stepper-item heading="Step 2" id="step-2">
+          <div>Step 2 content</div>
+        </calcite-stepper-item>
+      </calcite-stepper>`,
+    );
 
-      const [actionStart, actionEnd] = await page.findAll("calcite-stepper >>> calcite-action");
-      const [stepperItem1, stepperItem2] = await page.findAll("calcite-stepper-item");
+    const [actionStart, actionEnd] = await page.findAll("calcite-stepper >>> calcite-action");
+    const [stepperItem1, stepperItem2] = await page.findAll("calcite-stepper-item");
 
-      expect(await actionStart.isVisible()).toBe(true);
-      expect(await actionStart.getProperty("disabled")).toEqual(true);
-      expect(await actionEnd.isVisible()).toBe(true);
-      expect(await stepperItem1.isVisible()).toBe(true);
-      expect(await stepperItem2.isVisible()).toBe(false);
+    expect(await actionStart.isVisible()).toBe(true);
+    expect(await actionStart.getProperty("disabled")).toEqual(true);
+    expect(await actionEnd.isVisible()).toBe(true);
+    expect(await stepperItem1.isVisible()).toBe(true);
+    expect(await stepperItem2.isVisible()).toBe(false);
 
-      await actionEnd.click();
-      await page.waitForChanges();
-      expect(await stepperItem1.isVisible()).toBe(false);
-      expect(await stepperItem2.isVisible()).toBe(true);
-    });
+    await actionEnd.click();
+    await page.waitForChanges();
+    expect(await stepperItem1.isVisible()).toBe(false);
+    expect(await stepperItem2.isVisible()).toBe(true);
+  });
 
+  describe("responsive layout", () => {
     it("focus order", async () => {
       const page = await newE2EPage();
       await page.setContent(

From a3d865c1b868a86e0ec25e6e68a69507cbf0f366 Mon Sep 17 00:00:00 2001
From: Erik Harper <eriklharper@pm.me>
Date: Tue, 13 Feb 2024 16:27:34 -0800
Subject: [PATCH 09/11] fixing other former responsive tests

---
 .../src/components/stepper/stepper.e2e.ts     | 54 +++++++++----------
 1 file changed, 27 insertions(+), 27 deletions(-)

diff --git a/packages/calcite-components/src/components/stepper/stepper.e2e.ts b/packages/calcite-components/src/components/stepper/stepper.e2e.ts
index 3875e3b3af3..49a4dc35b1d 100644
--- a/packages/calcite-components/src/components/stepper/stepper.e2e.ts
+++ b/packages/calcite-components/src/components/stepper/stepper.e2e.ts
@@ -743,39 +743,39 @@ describe("calcite-stepper", () => {
     expect(await stepperItem2.getProperty("selected")).toBe(true);
   });
 
-  it("should display action buttons when layout is horizontal-single", async () => {
-    const page = await newE2EPage();
-    await page.setContent(
-      html`<calcite-stepper layout="horizontal-single">
-        <calcite-stepper-item heading="Step 1" id="step-1">
-          <div>Step 1 content</div>
-        </calcite-stepper-item>
-        <calcite-stepper-item heading="Step 2" id="step-2">
-          <div>Step 2 content</div>
-        </calcite-stepper-item>
-      </calcite-stepper>`,
-    );
+  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 layout="horizontal-single">
+          <calcite-stepper-item heading="Step 1" id="step-1">
+            <div>Step 1 content</div>
+          </calcite-stepper-item>
+          <calcite-stepper-item heading="Step 2" id="step-2">
+            <div>Step 2 content</div>
+          </calcite-stepper-item>
+        </calcite-stepper>`,
+      );
 
-    const [actionStart, actionEnd] = await page.findAll("calcite-stepper >>> calcite-action");
-    const [stepperItem1, stepperItem2] = await page.findAll("calcite-stepper-item");
+      const [actionStart, actionEnd] = await page.findAll("calcite-stepper >>> calcite-action");
+      const [stepperItem1, stepperItem2] = await page.findAll("calcite-stepper-item");
 
-    expect(await actionStart.isVisible()).toBe(true);
-    expect(await actionStart.getProperty("disabled")).toEqual(true);
-    expect(await actionEnd.isVisible()).toBe(true);
-    expect(await stepperItem1.isVisible()).toBe(true);
-    expect(await stepperItem2.isVisible()).toBe(false);
+      expect(await actionStart.isVisible()).toBe(true);
+      expect(await actionStart.getProperty("disabled")).toEqual(true);
+      expect(await actionEnd.isVisible()).toBe(true);
+      expect(await stepperItem1.isVisible()).toBe(true);
+      expect(await stepperItem2.isVisible()).toBe(false);
 
-    await actionEnd.click();
-    await page.waitForChanges();
-    expect(await stepperItem1.isVisible()).toBe(false);
-    expect(await stepperItem2.isVisible()).toBe(true);
-  });
+      await actionEnd.click();
+      await page.waitForChanges();
+      expect(await stepperItem1.isVisible()).toBe(false);
+      expect(await stepperItem2.isVisible()).toBe(true);
+    });
 
-  describe("responsive layout", () => {
     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>

From 986f705a4e328f258c77562d90e251b367d9836c Mon Sep 17 00:00:00 2001
From: Erik Harper <eriklharper@pm.me>
Date: Tue, 13 Feb 2024 16:37:49 -0800
Subject: [PATCH 10/11] removing responsive stories

---
 .../src/components/stepper/stepper.stories.ts | 85 -------------------
 1 file changed, 85 deletions(-)

diff --git a/packages/calcite-components/src/components/stepper/stepper.stories.ts b/packages/calcite-components/src/components/stepper/stepper.stories.ts
index 0d81bd324ca..2fdd5b64187 100644
--- a/packages/calcite-components/src/components/stepper/stepper.stories.ts
+++ b/packages/calcite-components/src/components/stepper/stepper.stories.ts
@@ -278,88 +278,3 @@ export const horizontalSingleLayout_TestOnly = (): string => html`
     </calcite-stepper>
   </div>
 `;
-
-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
-      >
-        <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-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-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-notice open width="full">
-          <div slot="message">Step 4 Content Goes Here</div>
-        </calcite-notice>
-      </calcite-stepper-item>
-    </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 });
-
-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>`;

From 82acf8f767e4f88c26487f2078e34ef58d1b6ab1 Mon Sep 17 00:00:00 2001
From: Erik Harper <eriklharper@pm.me>
Date: Tue, 13 Feb 2024 17:03:09 -0800
Subject: [PATCH 11/11] fixing rules that tell stepper-item header and content
 divs to stretch the full width of the parent grid regardless if they're
 selected or not

---
 .../src/components/stepper-item/stepper-item.scss           | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

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 93910dc6785..4a579b06930 100644
--- a/packages/calcite-components/src/components/stepper-item/stepper-item.scss
+++ b/packages/calcite-components/src/components/stepper-item/stepper-item.scss
@@ -283,14 +283,14 @@
   }
 }
 
-:host([layout="horizontal-single"][selected]) {
+:host([layout="horizontal-single"]) {
   .stepper-item-header {
     grid-area: 1 / 1 / 1 / -1;
   }
 }
 
-:host([layout="horizontal"][selected]),
-:host([layout="horizontal-single"][selected]) {
+:host([layout="horizontal"]),
+:host([layout="horizontal-single"]) {
   .stepper-item-content {
     grid-area: 2 / 1 / 2 / -1;
   }