From 5c91981be84fa084311ae64ec132488f1523fee0 Mon Sep 17 00:00:00 2001
From: Adam <adam@tirel.la>
Date: Wed, 26 Jul 2023 11:21:02 -0700
Subject: [PATCH 01/16] feat(menu-item): Update spacing and icon layout

---
 .../src/components/menu-item/menu-item.scss    | 18 +++++++++++++-----
 .../src/components/menu-item/menu-item.tsx     | 14 +++++++-------
 2 files changed, 20 insertions(+), 12 deletions(-)

diff --git a/packages/calcite-components/src/components/menu-item/menu-item.scss b/packages/calcite-components/src/components/menu-item/menu-item.scss
index 6db7a85d12f..69deefc04a1 100644
--- a/packages/calcite-components/src/components/menu-item/menu-item.scss
+++ b/packages/calcite-components/src/components/menu-item/menu-item.scss
@@ -35,7 +35,7 @@
   text-color-2
   box-border
   bg-foreground-1
-  px-4
+  px-3
   h-full
   w-full;
   text-decoration: none;
@@ -77,13 +77,21 @@
   @apply ms-3;
 }
 
+:host([layout="vertical"]) .icon--end {
+  @apply ms-auto;
+}
+
 .icon--dropdown {
   @apply ms-auto me-0 ps-2 relative;
   --calcite-ui-icon-color: var(--calcite-ui-text-3);
 }
 
-:host([layout="vertical"]) .icon--dropdown {
-  inset-inline-start: theme("spacing.1");
+:host([layout="vertical"]) .icon--end ~ .icon--dropdown {
+  @apply ms-3;
+}
+
+:host([layout="vertical"]) .hover-href-icon ~ .icon--end {
+  @apply ms-3;
 }
 
 .icon--breadcrumb {
@@ -151,7 +159,7 @@ calcite-action {
 }
 
 :host([slot="submenu-item"]) .parent--vertical {
-  padding-inline-start: theme("spacing.7");
+  @apply ps-6;
 }
 
 .dropdown-menu-items.nested.calcite--rtl {
@@ -163,7 +171,7 @@ calcite-action {
 }
 
 .hover-href-icon {
-  @apply ps-8 ms-auto relative end-1 opacity-0;
+  @apply ps-4 pe-3 ms-auto relative end-1 opacity-0;
   transition: all var(--calcite-internal-animation-timing-medium) ease-in-out;
 }
 
diff --git a/packages/calcite-components/src/components/menu-item/menu-item.tsx b/packages/calcite-components/src/components/menu-item/menu-item.tsx
index 885cfdfe655..398702115e1 100644
--- a/packages/calcite-components/src/components/menu-item/menu-item.tsx
+++ b/packages/calcite-components/src/components/menu-item/menu-item.tsx
@@ -444,6 +444,13 @@ export class CalciteMenuItem implements LoadableComponent, T9nComponent, Localiz
         <div class={CSS.textContainer}>
           <span>{this.text}</span>
         </div>
+        {this.href && (this.topLevelMenuLayout === "vertical" || !this.isTopLevelItem) ? (
+          <calcite-icon
+            class={CSS.hoverHrefIcon}
+            icon={dir === "rtl" ? "arrow-left" : "arrow-right"}
+            scale="s"
+          />
+        ) : null}
         {this.iconEnd && this.renderIconEnd()}
         {this.breadcrumb ? this.renderBreadcrumbIcon(dir) : null}
         {!this.href && this.hasSubmenu ? this.renderDropdownIcon(dir) : null}
@@ -480,13 +487,6 @@ export class CalciteMenuItem implements LoadableComponent, T9nComponent, Localiz
               ref={(el) => (this.anchorEl = el)}
             >
               {this.renderItemContent(dir)}
-              {this.href && (this.topLevelMenuLayout === "vertical" || !this.isTopLevelItem) ? (
-                <calcite-icon
-                  class={CSS.hoverHrefIcon}
-                  icon={dir === "rtl" ? "arrow-left" : "arrow-right"}
-                  scale="s"
-                />
-              ) : null}
             </a>
             {this.href && this.hasSubmenu ? this.renderDropdownAction(dir) : null}
           </div>

From 833ecbfa48260eea7a41df086e73e87100bd67b0 Mon Sep 17 00:00:00 2001
From: Adam <adam@tirel.la>
Date: Wed, 26 Jul 2023 11:30:00 -0700
Subject: [PATCH 02/16] Clean up

---
 .../src/components/menu-item/menu-item.scss               | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

diff --git a/packages/calcite-components/src/components/menu-item/menu-item.scss b/packages/calcite-components/src/components/menu-item/menu-item.scss
index 69deefc04a1..e0a8ffc8d6d 100644
--- a/packages/calcite-components/src/components/menu-item/menu-item.scss
+++ b/packages/calcite-components/src/components/menu-item/menu-item.scss
@@ -91,7 +91,11 @@
 }
 
 :host([layout="vertical"]) .hover-href-icon ~ .icon--end {
-  @apply ms-3;
+  @apply ms-4;
+}
+
+:host([layout="vertical"]) .hover-href-icon {
+  @apply ps-2;
 }
 
 .icon--breadcrumb {
@@ -171,7 +175,7 @@ calcite-action {
 }
 
 .hover-href-icon {
-  @apply ps-4 pe-3 ms-auto relative end-1 opacity-0;
+  @apply ms-auto relative end-1 opacity-0;
   transition: all var(--calcite-internal-animation-timing-medium) ease-in-out;
 }
 

From 0510cb1c4350e930a40e4bc837d66da2069e2921 Mon Sep 17 00:00:00 2001
From: Adam <adam@tirel.la>
Date: Wed, 26 Jul 2023 11:56:02 -0700
Subject: [PATCH 03/16] Clean up

---
 .../src/components/menu-item/menu-item.scss                   | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/calcite-components/src/components/menu-item/menu-item.scss b/packages/calcite-components/src/components/menu-item/menu-item.scss
index e0a8ffc8d6d..57749c58ccb 100644
--- a/packages/calcite-components/src/components/menu-item/menu-item.scss
+++ b/packages/calcite-components/src/components/menu-item/menu-item.scss
@@ -35,7 +35,7 @@
   text-color-2
   box-border
   bg-foreground-1
-  px-3
+  px-4
   h-full
   w-full;
   text-decoration: none;
@@ -62,7 +62,7 @@
 }
 
 :host([active]) .content {
-  @apply text-color-1;
+  @apply text-color-1 px-3;
   border-color: var(--calcite-ui-brand);
   .icon {
     --calcite-ui-icon-color: var(--calcite-ui-brand);

From e3546f31763519ffdcddeb6d9fb46a5175831897 Mon Sep 17 00:00:00 2001
From: Adam <adam@tirel.la>
Date: Wed, 26 Jul 2023 12:02:44 -0700
Subject: [PATCH 04/16] Add story for complex vertical menu

---
 .../src/components/menu/menu.stories.ts       | 58 ++++++++++++++++++-
 1 file changed, 57 insertions(+), 1 deletion(-)

diff --git a/packages/calcite-components/src/components/menu/menu.stories.ts b/packages/calcite-components/src/components/menu/menu.stories.ts
index e2acd0c4cba..7c4dac202a5 100644
--- a/packages/calcite-components/src/components/menu/menu.stories.ts
+++ b/packages/calcite-components/src/components/menu/menu.stories.ts
@@ -53,7 +53,63 @@ export const darkModeRTL_TestOnly = (): string => html`<calcite-menu dir="rtl" c
   <calcite-menu-item text="Example item 3" text-enabled></calcite-menu-item>
 </calcite-menu>`;
 
-export const verticalLyoutInDarkModeRTL_TestOnly = (): string => html`<calcite-menu
+export const verticalComplexUseCase_TestOnly = (): string => html`<calcite-shell-panel
+  slot="panel-start"
+  width-scale="l"
+>
+  <calcite-panel heading="Example vertical menu">
+    <calcite-menu layout="vertical">
+      <calcite-menu-item icon-start="layer" icon-end="layer" text="Home"> </calcite-menu-item>
+      <calcite-menu-item icon-start="layer" icon-end="layer" href="#" text="Example nested" icon-start="layer">
+        <calcite-menu-item icon-end="layer" icon-start="layer" slot="submenu-item" text="Capabilities">
+        </calcite-menu-item>
+        <calcite-menu-item icon-start="layer" slot="submenu-item" title text="ArcGIS Online">
+          <calcite-menu-item icon-start="layer" slot="submenu-item" text="Capabilities">
+            <calcite-menu-item icon-start="layer" slot="submenu-item" text="Capabilities"> </calcite-menu-item>
+            <calcite-menu-item icon-start="layer" slot="submenu-item" text="Capabilities"> </calcite-menu-item>
+            <calcite-menu-item icon-start="layer" slot="submenu-item" text="Capabilities"> </calcite-menu-item>
+          </calcite-menu-item>
+        </calcite-menu-item>
+      </calcite-menu-item>
+      <calcite-menu-item text="Example nested" icon-start="layer" icon-end="layer" open>
+        <calcite-menu-item slot="submenu-item" title text="ArcGIS Online">
+          <calcite-menu-item slot="submenu-item" text="Great examples"> </calcite-menu-item>
+          <calcite-menu-item slot="submenu-item" text="Capabilities">
+            <calcite-menu-item slot="submenu-item" text="Capabilities"> </calcite-menu-item>
+            <calcite-menu-item slot="submenu-item" text="Great examples"> </calcite-menu-item>
+          </calcite-menu-item>
+          <calcite-menu-item slot="submenu-item" text="Something else"> </calcite-menu-item>
+          <calcite-menu-item slot="submenu-item" text="Another thing">
+            <calcite-menu-item slot="submenu-item" text="Great examples">
+              <calcite-menu-item slot="submenu-item" text="Great examples"> </calcite-menu-item>
+              <calcite-menu-item slot="submenu-item" text="Great examples"> </calcite-menu-item>
+              <calcite-menu-item slot="submenu-item" text="Great examples"> </calcite-menu-item>
+            </calcite-menu-item>
+          </calcite-menu-item>
+        </calcite-menu-item>
+        <calcite-menu-item open href="#" slot="submenu-item" text="It's stupendous">
+          <calcite-menu-item slot="submenu-item" text="Very nice example"> </calcite-menu-item>
+          <calcite-menu-item slot="submenu-item" text="Short one">
+            <calcite-menu-item open slot="submenu-item" text="Another thing">
+              <calcite-menu-item slot="submenu-item" text="Great examples">
+                <calcite-menu-item slot="submenu-item" text="Great examples"> </calcite-menu-item>
+                <calcite-menu-item slot="submenu-item" text="Great examples"> </calcite-menu-item>
+                <calcite-menu-item slot="submenu-item" text="Great examples"> </calcite-menu-item>
+              </calcite-menu-item>
+            </calcite-menu-item>
+          </calcite-menu-item>
+        </calcite-menu-item>
+        <calcite-menu-item slot="submenu-item" text="Capabilities"> </calcite-menu-item>
+      </calcite-menu-item>
+      <calcite-menu-item slot="submenu-item" text="Capabilities"> </calcite-menu-item>
+      <calcite-menu-item text="Reference" active> </calcite-menu-item>
+      <calcite-menu-item text="Reference"> </calcite-menu-item>
+      <calcite-menu-item text="Reference"> </calcite-menu-item>
+    </calcite-menu>
+  </calcite-panel>
+</calcite-shell-panel>`;
+
+export const verticalLayoutInDarkModeRTL_TestOnly = (): string => html`<calcite-menu
   layout="vertical"
   dir="rtl"
   class="calcite-mode-dark"

From dcfc5c9e23cd1b7dcdf1791dbafad2570e9bfe1b Mon Sep 17 00:00:00 2001
From: Adam <adam@tirel.la>
Date: Wed, 26 Jul 2023 12:04:51 -0700
Subject: [PATCH 05/16] Clean up

---
 .../src/components/menu-item/menu-item.scss                  | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/packages/calcite-components/src/components/menu-item/menu-item.scss b/packages/calcite-components/src/components/menu-item/menu-item.scss
index 57749c58ccb..e04b65922d9 100644
--- a/packages/calcite-components/src/components/menu-item/menu-item.scss
+++ b/packages/calcite-components/src/components/menu-item/menu-item.scss
@@ -62,12 +62,15 @@
 }
 
 :host([active]) .content {
-  @apply text-color-1 px-3;
+  @apply text-color-1;
   border-color: var(--calcite-ui-brand);
   .icon {
     --calcite-ui-icon-color: var(--calcite-ui-brand);
   }
 }
+:host([layout="vertical"]) .content {
+  @apply px-3;
+}
 
 .icon--start {
   @apply me-3;

From 8cdb087463e9b9db049e5f32ea95012f1caa15f8 Mon Sep 17 00:00:00 2001
From: Adam <adam@tirel.la>
Date: Wed, 26 Jul 2023 14:48:11 -0700
Subject: [PATCH 06/16] Clean up style, update demo and test

---
 .../src/components/menu-item/menu-item.scss   |  6 ++-
 .../src/components/menu/menu.stories.ts       | 39 +++++++++++--------
 .../calcite-components/src/demos/menu.html    | 28 ++++++++-----
 3 files changed, 45 insertions(+), 28 deletions(-)

diff --git a/packages/calcite-components/src/components/menu-item/menu-item.scss b/packages/calcite-components/src/components/menu-item/menu-item.scss
index e04b65922d9..96183c09d8a 100644
--- a/packages/calcite-components/src/components/menu-item/menu-item.scss
+++ b/packages/calcite-components/src/components/menu-item/menu-item.scss
@@ -81,7 +81,7 @@
 }
 
 :host([layout="vertical"]) .icon--end {
-  @apply ms-auto;
+  @apply ms-auto ps-3;
 }
 
 .icon--dropdown {
@@ -106,6 +106,10 @@
   --calcite-ui-icon-color: var(--calcite-ui-text-3);
 }
 
+:host([layout="vertical"]) .icon--breadcrumb {
+  @apply ms-2;
+}
+
 :host([breadcrumb]) .content {
   @apply pe-3;
 }
diff --git a/packages/calcite-components/src/components/menu/menu.stories.ts b/packages/calcite-components/src/components/menu/menu.stories.ts
index 7c4dac202a5..dd04bc53fad 100644
--- a/packages/calcite-components/src/components/menu/menu.stories.ts
+++ b/packages/calcite-components/src/components/menu/menu.stories.ts
@@ -53,17 +53,21 @@ export const darkModeRTL_TestOnly = (): string => html`<calcite-menu dir="rtl" c
   <calcite-menu-item text="Example item 3" text-enabled></calcite-menu-item>
 </calcite-menu>`;
 
-export const verticalComplexUseCase_TestOnly = (): string => html`<calcite-shell-panel
-  slot="panel-start"
-  width-scale="l"
->
-  <calcite-panel heading="Example vertical menu">
+export const verticalComplexUseCase_TestOnly = (): string => html` <calcite-shell-panel slot="panel-start">
+  <calcite-panel heading="Extreme nested vertical menu">
     <calcite-menu layout="vertical">
       <calcite-menu-item icon-start="layer" icon-end="layer" text="Home"> </calcite-menu-item>
-      <calcite-menu-item icon-start="layer" icon-end="layer" href="#" text="Example nested" icon-start="layer">
+      <calcite-menu-item
+        icon-start="layer"
+        icon-end="layer"
+        href="#"
+        text="Example nested"
+        icon-start="layer"
+        breadcrumb
+      >
         <calcite-menu-item icon-end="layer" icon-start="layer" slot="submenu-item" text="Capabilities">
         </calcite-menu-item>
-        <calcite-menu-item icon-start="layer" slot="submenu-item" title text="ArcGIS Online">
+        <calcite-menu-item icon-start="layer" slot="submenu-item" title text="ArcGIS Online" breadcrumb open>
           <calcite-menu-item icon-start="layer" slot="submenu-item" text="Capabilities">
             <calcite-menu-item icon-start="layer" slot="submenu-item" text="Capabilities"> </calcite-menu-item>
             <calcite-menu-item icon-start="layer" slot="submenu-item" text="Capabilities"> </calcite-menu-item>
@@ -71,26 +75,27 @@ export const verticalComplexUseCase_TestOnly = (): string => html`<calcite-shell
           </calcite-menu-item>
         </calcite-menu-item>
       </calcite-menu-item>
-      <calcite-menu-item text="Example nested" icon-start="layer" icon-end="layer" open>
-        <calcite-menu-item slot="submenu-item" title text="ArcGIS Online">
-          <calcite-menu-item slot="submenu-item" text="Great examples"> </calcite-menu-item>
-          <calcite-menu-item slot="submenu-item" text="Capabilities">
-            <calcite-menu-item slot="submenu-item" text="Capabilities"> </calcite-menu-item>
-            <calcite-menu-item slot="submenu-item" text="Great examples"> </calcite-menu-item>
+      <calcite-menu-item text="Example nested" icon-start="layer" icon-end="layer" breadcrumb open>
+        <calcite-menu-item slot="submenu-item" title text="ArcGIS Online" breadcrumb open>
+          <calcite-menu-item icon-start="layer" slot="submenu-item" text="Great examples" breadcrumb>
+          </calcite-menu-item>
+          <calcite-menu-item slot="submenu-item" text="Capabilities" open>
+            <calcite-menu-item slot="submenu-item" text="Capabilities" icon-end="layer"> </calcite-menu-item>
+            <calcite-menu-item slot="submenu-item" text="Great examples" icon-end="layer"> </calcite-menu-item>
           </calcite-menu-item>
           <calcite-menu-item slot="submenu-item" text="Something else"> </calcite-menu-item>
           <calcite-menu-item slot="submenu-item" text="Another thing">
             <calcite-menu-item slot="submenu-item" text="Great examples">
-              <calcite-menu-item slot="submenu-item" text="Great examples"> </calcite-menu-item>
-              <calcite-menu-item slot="submenu-item" text="Great examples"> </calcite-menu-item>
+              <calcite-menu-item slot="submenu-item" text="Great examples" breadcrumb> </calcite-menu-item>
+              <calcite-menu-item slot="submenu-item" text="Great examples" icon-end="layer"> </calcite-menu-item>
               <calcite-menu-item slot="submenu-item" text="Great examples"> </calcite-menu-item>
             </calcite-menu-item>
           </calcite-menu-item>
         </calcite-menu-item>
-        <calcite-menu-item open href="#" slot="submenu-item" text="It's stupendous">
+        <calcite-menu-item href="#" slot="submenu-item" text="It's stupendous">
           <calcite-menu-item slot="submenu-item" text="Very nice example"> </calcite-menu-item>
           <calcite-menu-item slot="submenu-item" text="Short one">
-            <calcite-menu-item open slot="submenu-item" text="Another thing">
+            <calcite-menu-item slot="submenu-item" text="Another thing">
               <calcite-menu-item slot="submenu-item" text="Great examples">
                 <calcite-menu-item slot="submenu-item" text="Great examples"> </calcite-menu-item>
                 <calcite-menu-item slot="submenu-item" text="Great examples"> </calcite-menu-item>
diff --git a/packages/calcite-components/src/demos/menu.html b/packages/calcite-components/src/demos/menu.html
index 27d497e1f41..fcde6bb8970 100644
--- a/packages/calcite-components/src/demos/menu.html
+++ b/packages/calcite-components/src/demos/menu.html
@@ -331,10 +331,17 @@ <h3>
         <calcite-panel heading="Extreme nested vertical menu">
           <calcite-menu layout="vertical">
             <calcite-menu-item icon-start="layer" icon-end="layer" text="Home"> </calcite-menu-item>
-            <calcite-menu-item icon-start="layer" icon-end="layer" href="#" text="Example nested" icon-start="layer">
+            <calcite-menu-item
+              icon-start="layer"
+              icon-end="layer"
+              href="#"
+              text="Example nested"
+              icon-start="layer"
+              breadcrumb
+            >
               <calcite-menu-item icon-end="layer" icon-start="layer" slot="submenu-item" text="Capabilities">
               </calcite-menu-item>
-              <calcite-menu-item icon-start="layer" slot="submenu-item" title text="ArcGIS Online">
+              <calcite-menu-item icon-start="layer" slot="submenu-item" title text="ArcGIS Online" breadcrumb open>
                 <calcite-menu-item icon-start="layer" slot="submenu-item" text="Capabilities">
                   <calcite-menu-item icon-start="layer" slot="submenu-item" text="Capabilities"> </calcite-menu-item>
                   <calcite-menu-item icon-start="layer" slot="submenu-item" text="Capabilities"> </calcite-menu-item>
@@ -342,18 +349,19 @@ <h3>
                 </calcite-menu-item>
               </calcite-menu-item>
             </calcite-menu-item>
-            <calcite-menu-item text="Example nested" icon-start="layer" icon-end="layer">
-              <calcite-menu-item slot="submenu-item" title text="ArcGIS Online">
-                <calcite-menu-item slot="submenu-item" text="Great examples"> </calcite-menu-item>
-                <calcite-menu-item slot="submenu-item" text="Capabilities">
-                  <calcite-menu-item slot="submenu-item" text="Capabilities"> </calcite-menu-item>
-                  <calcite-menu-item slot="submenu-item" text="Great examples"> </calcite-menu-item>
+            <calcite-menu-item text="Example nested" icon-start="layer" icon-end="layer" breadcrumb open>
+              <calcite-menu-item slot="submenu-item" title text="ArcGIS Online" breadcrumb open>
+                <calcite-menu-item icon-start="layer" slot="submenu-item" text="Great examples" breadcrumb>
+                </calcite-menu-item>
+                <calcite-menu-item slot="submenu-item" text="Capabilities" open>
+                  <calcite-menu-item slot="submenu-item" text="Capabilities" icon-end="layer"> </calcite-menu-item>
+                  <calcite-menu-item slot="submenu-item" text="Great examples" icon-end="layer"> </calcite-menu-item>
                 </calcite-menu-item>
                 <calcite-menu-item slot="submenu-item" text="Something else"> </calcite-menu-item>
                 <calcite-menu-item slot="submenu-item" text="Another thing">
                   <calcite-menu-item slot="submenu-item" text="Great examples">
-                    <calcite-menu-item slot="submenu-item" text="Great examples"> </calcite-menu-item>
-                    <calcite-menu-item slot="submenu-item" text="Great examples"> </calcite-menu-item>
+                    <calcite-menu-item slot="submenu-item" text="Great examples" breadcrumb> </calcite-menu-item>
+                    <calcite-menu-item slot="submenu-item" text="Great examples" icon-end="layer"> </calcite-menu-item>
                     <calcite-menu-item slot="submenu-item" text="Great examples"> </calcite-menu-item>
                   </calcite-menu-item>
                 </calcite-menu-item>

From 0c5af94240d759ad866fd296e7a61c9cbcdc9949 Mon Sep 17 00:00:00 2001
From: Adam <adam@tirel.la>
Date: Wed, 26 Jul 2023 14:50:48 -0700
Subject: [PATCH 07/16] Clean up

---
 .../src/components/menu-item/menu-item.scss                   | 4 ----
 1 file changed, 4 deletions(-)

diff --git a/packages/calcite-components/src/components/menu-item/menu-item.scss b/packages/calcite-components/src/components/menu-item/menu-item.scss
index 96183c09d8a..f80046a02ba 100644
--- a/packages/calcite-components/src/components/menu-item/menu-item.scss
+++ b/packages/calcite-components/src/components/menu-item/menu-item.scss
@@ -93,10 +93,6 @@
   @apply ms-3;
 }
 
-:host([layout="vertical"]) .hover-href-icon ~ .icon--end {
-  @apply ms-4;
-}
-
 :host([layout="vertical"]) .hover-href-icon {
   @apply ps-2;
 }

From 2896feef4c0ed25f8ac03b6015d48db653c7bcee Mon Sep 17 00:00:00 2001
From: Adam <adam@tirel.la>
Date: Wed, 26 Jul 2023 15:19:48 -0700
Subject: [PATCH 08/16] Clean up

---
 .../src/components/menu-item/menu-item.tsx    | 20 ++++++++++++-------
 1 file changed, 13 insertions(+), 7 deletions(-)

diff --git a/packages/calcite-components/src/components/menu-item/menu-item.tsx b/packages/calcite-components/src/components/menu-item/menu-item.tsx
index 398702115e1..a37c8bd7716 100644
--- a/packages/calcite-components/src/components/menu-item/menu-item.tsx
+++ b/packages/calcite-components/src/components/menu-item/menu-item.tsx
@@ -437,20 +437,26 @@ export class CalciteMenuItem implements LoadableComponent, T9nComponent, Localiz
     );
   }
 
+  renderHrefIcon(dir: Direction): VNode {
+    return (
+      <calcite-icon
+        class={CSS.hoverHrefIcon}
+        icon={dir === "rtl" ? "arrow-left" : "arrow-right"}
+        key={CSS.dropdownAction}
+        scale="s"
+      />
+    );
+  }
+
   renderItemContent(dir: Direction): VNode {
+    const hasHref = this.href && (this.topLevelMenuLayout === "vertical" || !this.isTopLevelItem);
     return (
       <Fragment>
         {this.iconStart && this.renderIconStart()}
         <div class={CSS.textContainer}>
           <span>{this.text}</span>
         </div>
-        {this.href && (this.topLevelMenuLayout === "vertical" || !this.isTopLevelItem) ? (
-          <calcite-icon
-            class={CSS.hoverHrefIcon}
-            icon={dir === "rtl" ? "arrow-left" : "arrow-right"}
-            scale="s"
-          />
-        ) : null}
+        {hasHref && this.renderHrefIcon(dir)}
         {this.iconEnd && this.renderIconEnd()}
         {this.breadcrumb ? this.renderBreadcrumbIcon(dir) : null}
         {!this.href && this.hasSubmenu ? this.renderDropdownIcon(dir) : null}

From c7f90ddef53391b655bde2b9cce1c34227da1884 Mon Sep 17 00:00:00 2001
From: Adam <adam@tirel.la>
Date: Wed, 26 Jul 2023 15:29:29 -0700
Subject: [PATCH 09/16] Clean up story

---
 packages/calcite-components/src/components/menu/menu.stories.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/calcite-components/src/components/menu/menu.stories.ts b/packages/calcite-components/src/components/menu/menu.stories.ts
index dd04bc53fad..2e1e39fd840 100644
--- a/packages/calcite-components/src/components/menu/menu.stories.ts
+++ b/packages/calcite-components/src/components/menu/menu.stories.ts
@@ -53,7 +53,7 @@ export const darkModeRTL_TestOnly = (): string => html`<calcite-menu dir="rtl" c
   <calcite-menu-item text="Example item 3" text-enabled></calcite-menu-item>
 </calcite-menu>`;
 
-export const verticalComplexUseCase_TestOnly = (): string => html` <calcite-shell-panel slot="panel-start">
+export const verticalComplexUseCase_TestOnly = (): string => html` <calcite-shell-panel width-scale="l">
   <calcite-panel heading="Extreme nested vertical menu">
     <calcite-menu layout="vertical">
       <calcite-menu-item icon-start="layer" icon-end="layer" text="Home"> </calcite-menu-item>

From 1ac2d4c05355c8426e13b57299d2ef034188db9e Mon Sep 17 00:00:00 2001
From: Adam <adam@tirel.la>
Date: Thu, 27 Jul 2023 10:12:04 -0700
Subject: [PATCH 10/16] Clean up story

---
 .../src/components/menu-item/menu-item.stories.ts             | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/calcite-components/src/components/menu-item/menu-item.stories.ts b/packages/calcite-components/src/components/menu-item/menu-item.stories.ts
index d793f4669db..25356dad221 100644
--- a/packages/calcite-components/src/components/menu-item/menu-item.stories.ts
+++ b/packages/calcite-components/src/components/menu-item/menu-item.stories.ts
@@ -97,6 +97,6 @@ export const darkModeRTL_TestOnly = (): string =>
     active
     dir="rtl"
     class="calcite-mode-dark"
-    icon-start="Layers"
-    icon-end="Layers"
+    icon-start="layer"
+    icon-end="layer"
   />`;

From 99bf067af016ca6c5605f750e45ef22ea77c8553 Mon Sep 17 00:00:00 2001
From: Adam <adam@tirel.la>
Date: Thu, 27 Jul 2023 12:22:20 -0700
Subject: [PATCH 11/16] Update styles and stories

---
 .../src/components/menu-item/menu-item.scss   | 11 +++++
 .../src/components/menu/menu.stories.ts       | 44 ++++++++++++++++++-
 2 files changed, 54 insertions(+), 1 deletion(-)

diff --git a/packages/calcite-components/src/components/menu-item/menu-item.scss b/packages/calcite-components/src/components/menu-item/menu-item.scss
index f80046a02ba..9ae20892d7f 100644
--- a/packages/calcite-components/src/components/menu-item/menu-item.scss
+++ b/packages/calcite-components/src/components/menu-item/menu-item.scss
@@ -96,6 +96,9 @@
 :host([layout="vertical"]) .hover-href-icon {
   @apply ps-2;
 }
+:host([layout="vertical"]) .hover-href-icon ~ .icon--end {
+  @apply ms-2;
+}
 
 .icon--breadcrumb {
   @apply ps-2 me-0;
@@ -103,6 +106,14 @@
 }
 
 :host([layout="vertical"]) .icon--breadcrumb {
+  @apply ms-auto;
+}
+
+:host([layout="vertical"]) .icon--breadcrumb ~ .icon--dropdown {
+  @apply ms-2;
+}
+
+:host([layout="vertical"]) .icon--end ~ .icon--breadcrumb {
   @apply ms-2;
 }
 
diff --git a/packages/calcite-components/src/components/menu/menu.stories.ts b/packages/calcite-components/src/components/menu/menu.stories.ts
index 2e1e39fd840..69c69eca0ac 100644
--- a/packages/calcite-components/src/components/menu/menu.stories.ts
+++ b/packages/calcite-components/src/components/menu/menu.stories.ts
@@ -19,11 +19,47 @@ export const simple = (): string => html` <calcite-menu
   <calcite-menu-item text="Example item 3" text-enabled></calcite-menu-item>
 </calcite-menu>`;
 
+export const iconsAndBreadcrumb = (): string => html` <calcite-menu>
+  <calcite-menu-item
+    icon-start="layer"
+    breadcrumb
+    icon-end="layer"
+    text="Example item 1"
+    text-enabled
+  ></calcite-menu-item>
+  <calcite-menu-item
+    icon-start="layer"
+    breadcrumb
+    icon-end="layer"
+    text="Example item 2"
+    text-enabled
+  ></calcite-menu-item>
+  <calcite-menu-item icon-start="layer" icon-end="layer" text="Example item 3" active text-enabled></calcite-menu-item>
+</calcite-menu>`;
+
+export const iconsAndBreadcrumbVertical_TestOnly = (): string => html` <calcite-menu layout="vertical">
+  <calcite-menu-item
+    icon-start="layer"
+    breadcrumb
+    icon-end="layer"
+    text="Example item 1"
+    text-enabled
+  ></calcite-menu-item>
+  <calcite-menu-item
+    icon-start="layer"
+    breadcrumb
+    icon-end="layer"
+    text="Example item 2"
+    text-enabled
+  ></calcite-menu-item>
+  <calcite-menu-item icon-start="layer" icon-end="layer" text="Example item 3" active text-enabled></calcite-menu-item>
+</calcite-menu>`;
+
 export const withNesting = (): string => html`<calcite-panel>
   <calcite-menu layout="${select("layout", ["horizontal", "vertical"], "horizontal")}">
     <calcite-menu-item text="Example item 1" text-enabled></calcite-menu-item>
     <calcite-menu-item text="Example item 2" text-enabled active></calcite-menu-item>
-    <calcite-menu-item text="Example item 3" text-enabled>
+    <calcite-menu-item text="Example item 3" text-enabled open>
       <calcite-menu-item slot="submenu-item" text="Example submenu item 1" text-enabled> </calcite-menu-item>
       <calcite-menu-item slot="submenu-item" text="Example submenu item 2" text-enabled>
         <calcite-menu-item slot="submenu-item" text="Example submenu item 1" text-enabled></calcite-menu-item>
@@ -38,13 +74,19 @@ export const withNesting = (): string => html`<calcite-panel>
 export const WithSubmenuOpen_TestOnly = (): string => html`<calcite-menu>
   <calcite-menu-item text="Item" href="#item" open>
     <calcite-menu-item text="item1" slot="submenu-item" active> </calcite-menu-item>
+    <calcite-menu-item text="item2" slot="submenu-item"> </calcite-menu-item>
   </calcite-menu-item>
+  <calcite-menu-item text="Item 2" href="#item"> </calcite-menu-item>
+  <calcite-menu-item text="Item 3" href="#item"> </calcite-menu-item>
 </calcite-menu>`;
 
 export const WithSubmenuOpenInVerticalLayout_TestOnly = (): string => html` <calcite-menu layout="vertical">
   <calcite-menu-item text="Item" href="#item" open>
     <calcite-menu-item text="item1" slot="submenu-item" active> </calcite-menu-item>
+    <calcite-menu-item text="item2" slot="submenu-item" active> </calcite-menu-item>
   </calcite-menu-item>
+  <calcite-menu-item text="Item 2" href="#item"> </calcite-menu-item>
+  <calcite-menu-item text="Item 3" href="#item"> </calcite-menu-item>
 </calcite-menu>`;
 
 export const darkModeRTL_TestOnly = (): string => html`<calcite-menu dir="rtl" class="calcite-mode-dark">

From d9f9438cc36c7fefa2b0756196dda1a78f6871a8 Mon Sep 17 00:00:00 2001
From: Adam <adam@tirel.la>
Date: Thu, 27 Jul 2023 12:25:24 -0700
Subject: [PATCH 12/16] Clean up style + demo

---
 .../src/components/menu-item/menu-item.scss   |  4 ++
 .../calcite-components/src/demos/menu.html    | 46 +++++++++----------
 2 files changed, 27 insertions(+), 23 deletions(-)

diff --git a/packages/calcite-components/src/components/menu-item/menu-item.scss b/packages/calcite-components/src/components/menu-item/menu-item.scss
index 9ae20892d7f..2669dcf209e 100644
--- a/packages/calcite-components/src/components/menu-item/menu-item.scss
+++ b/packages/calcite-components/src/components/menu-item/menu-item.scss
@@ -100,6 +100,10 @@
   @apply ms-2;
 }
 
+:host([layout="vertical"]) .hover-href-icon ~ .icon--breadcrumb {
+  @apply ms-3;
+}
+
 .icon--breadcrumb {
   @apply ps-2 me-0;
   --calcite-ui-icon-color: var(--calcite-ui-text-3);
diff --git a/packages/calcite-components/src/demos/menu.html b/packages/calcite-components/src/demos/menu.html
index fcde6bb8970..0f17c1c94c6 100644
--- a/packages/calcite-components/src/demos/menu.html
+++ b/packages/calcite-components/src/demos/menu.html
@@ -401,38 +401,38 @@ <h3>
             >
               <calcite-menu-item text="Home"> </calcite-menu-item>
               <calcite-menu-item text="Reference">
-                <calcite-menu-item href="#" slot="submenu-item" text="an item"> </calcite-menu-item>
-                <calcite-menu-item href="#" slot="submenu-item" text="an item"> </calcite-menu-item>
-                <calcite-menu-item href="#" slot="submenu-item" text="an item"> </calcite-menu-item>
+                <calcite-menu-item breadcrumb slot="submenu-item" text="an item"> </calcite-menu-item>
+                <calcite-menu-item breadcrumb slot="submenu-item" text="an item"> </calcite-menu-item>
+                <calcite-menu-item breadcrumb slot="submenu-item" text="an item"> </calcite-menu-item>
               </calcite-menu-item>
-              <calcite-menu-item href="#" text="Items of reference"> </calcite-menu-item>
-              <calcite-menu-item href="#" text="Reference item" active> </calcite-menu-item>
-              <calcite-menu-item href="#" text="Longer item"> </calcite-menu-item>
-              <calcite-menu-item href="#" text="Items of reference"> </calcite-menu-item>
-              <calcite-menu-item href="#" text="Reference item"> </calcite-menu-item>
-              <calcite-menu-item href="#" text="Longer item"> </calcite-menu-item>
+              <calcite-menu-item breadcrumb text="Items of reference"> </calcite-menu-item>
+              <calcite-menu-item breadcrumb text="Reference item" active> </calcite-menu-item>
+              <calcite-menu-item breadcrumb text="Longer item"> </calcite-menu-item>
+              <calcite-menu-item breadcrumb text="Items of reference"> </calcite-menu-item>
+              <calcite-menu-item breadcrumb text="Reference item"> </calcite-menu-item>
+              <calcite-menu-item breadcrumb text="Longer item"> </calcite-menu-item>
             </calcite-menu>
           </calcite-flow-item>
           <calcite-flow-item heading="Whatever user clicked on">
             <calcite-menu layout="vertical">
-              <calcite-menu-item href="#" text="Home"> </calcite-menu-item>
-              <calcite-menu-item href="#" text="Items of reference"> </calcite-menu-item>
-              <calcite-menu-item href="#" text="Reference item" active> </calcite-menu-item>
-              <calcite-menu-item href="#" text="Longer item"> </calcite-menu-item>
-              <calcite-menu-item href="#" text="Items of reference"> </calcite-menu-item>
-              <calcite-menu-item href="#" text="Reference item"> </calcite-menu-item>
-              <calcite-menu-item href="#" text="Longer item"> </calcite-menu-item>
+              <calcite-menu-item breadcrumb icon-end="layer" text="Home"> </calcite-menu-item>
+              <calcite-menu-item breadcrumb icon-end="layer" text="Items of reference"> </calcite-menu-item>
+              <calcite-menu-item breadcrumb icon-end="layer" text="Reference item" active> </calcite-menu-item>
+              <calcite-menu-item breadcrumb icon-end="layer" text="Longer item"> </calcite-menu-item>
+              <calcite-menu-item breadcrumb icon-end="layer" text="Items of reference"> </calcite-menu-item>
+              <calcite-menu-item breadcrumb icon-end="layer" text="Reference item"> </calcite-menu-item>
+              <calcite-menu-item breadcrumb icon-end="layer" text="Longer item"> </calcite-menu-item>
             </calcite-menu>
           </calcite-flow-item>
           <calcite-flow-item heading="three levels" description="maybe another parent if that far deep">
             <calcite-menu layout="vertical">
-              <calcite-menu-item href="#" text="Home"> </calcite-menu-item>
-              <calcite-menu-item href="#" text="Items of reference"> </calcite-menu-item>
-              <calcite-menu-item href="#" text="Reference item" active> </calcite-menu-item>
-              <calcite-menu-item href="#" text="Longer item"> </calcite-menu-item>
-              <calcite-menu-item href="#" text="Items of reference"> </calcite-menu-item>
-              <calcite-menu-item href="#" text="Reference item"> </calcite-menu-item>
-              <calcite-menu-item href="#" text="Longer item"> </calcite-menu-item>
+              <calcite-menu-item text="Home"> </calcite-menu-item>
+              <calcite-menu-item text="Items of reference"> </calcite-menu-item>
+              <calcite-menu-item text="Reference item" active> </calcite-menu-item>
+              <calcite-menu-item text="Longer item"> </calcite-menu-item>
+              <calcite-menu-item text="Items of reference"> </calcite-menu-item>
+              <calcite-menu-item text="Reference item"> </calcite-menu-item>
+              <calcite-menu-item text="Longer item"> </calcite-menu-item>
             </calcite-menu>
           </calcite-flow-item>
         </calcite-flow>

From e458e34c226affb17ddd2ccccde086818e52a4ab Mon Sep 17 00:00:00 2001
From: Adam <adam@tirel.la>
Date: Thu, 27 Jul 2023 12:29:54 -0700
Subject: [PATCH 13/16] Pr feedback

---
 .../components/menu-item/menu-item.stories.ts | 14 ++--
 .../src/components/menu/menu.stories.ts       | 70 +++++++++----------
 2 files changed, 42 insertions(+), 42 deletions(-)

diff --git a/packages/calcite-components/src/components/menu-item/menu-item.stories.ts b/packages/calcite-components/src/components/menu-item/menu-item.stories.ts
index 25356dad221..86fa712f76e 100644
--- a/packages/calcite-components/src/components/menu-item/menu-item.stories.ts
+++ b/packages/calcite-components/src/components/menu-item/menu-item.stories.ts
@@ -11,7 +11,7 @@ export default {
   ...storyFilters(),
 };
 
-export const simple = (): string => html` <calcite-menu>
+export const simple = (): string => html`<calcite-menu>
   <calcite-menu-item
     text="${text("text", "Menu item")}"
     src="${text("src", "")}"
@@ -24,7 +24,7 @@ export const simple = (): string => html` <calcite-menu>
   />
 </calcite-menu>`;
 
-export const iconStart = (): string => html` <calcite-menu>
+export const iconStart = (): string => html`<calcite-menu>
   <calcite-menu-item
     text="${text("text", "Menu item")}"
     src="${text("src", "")}"
@@ -38,7 +38,7 @@ export const iconStart = (): string => html` <calcite-menu>
   />
 </calcite-menu>`;
 
-export const iconEnd = (): string => html` <calcite-menu>
+export const iconEnd = (): string => html`<calcite-menu>
   <calcite-menu-item
     text="${text("text", "Menu item")}"
     src="${text("src", "")}"
@@ -52,7 +52,7 @@ export const iconEnd = (): string => html` <calcite-menu>
   />
 </calcite-menu>`;
 
-export const iconsBoth = (): string => html` <calcite-menu>
+export const iconsBoth = (): string => html`<calcite-menu>
   <calcite-menu-item
     text="${text("text", "Menu item")}"
     src="${text("src", "")}"
@@ -67,11 +67,11 @@ export const iconsBoth = (): string => html` <calcite-menu>
   />
 </calcite-menu>`;
 
-export const allIconsAndSubMenu_TestOnly = (): string => html` <calcite-menu>
+export const allIconsAndSubMenu_TestOnly = (): string => html`<calcite-menu>
   <calcite-menu-item text="Example item 1" text-enabled></calcite-menu-item>
   <calcite-menu-item text="Example item 2" text-enabled active></calcite-menu-item>
   <calcite-menu-item text="Example item 3" text-enabled icon-start="layer" icon-end="layer" breadcrumb>
-    <calcite-menu-item slot="submenu-item" text="Example submenu item 1" text-enabled> </calcite-menu-item>
+    <calcite-menu-item slot="submenu-item" text="Example submenu item 1" text-enabled></calcite-menu-item>
     <calcite-menu-item slot="submenu-item" text="Example submenu item 2" text-enabled>
       <calcite-menu-item slot="submenu-item" text="Example submenu item 1" text-enabled></calcite-menu-item>
     </calcite-menu-item>
@@ -83,7 +83,7 @@ export const allIconsAndSubMenuVertical_TestOnly = (): string => html`<calcite-m
   <calcite-menu-item text="Example item 1" text-enabled></calcite-menu-item>
   <calcite-menu-item text="Example item 2" text-enabled active></calcite-menu-item>
   <calcite-menu-item text="Example item 3" text-enabled icon-start="layer" icon-end="layer" breadcrumb>
-    <calcite-menu-item slot="submenu-item" text="Example submenu item 1" text-enabled> </calcite-menu-item>
+    <calcite-menu-item slot="submenu-item" text="Example submenu item 1" text-enabled></calcite-menu-item>
     <calcite-menu-item slot="submenu-item" text="Example submenu item 2" text-enabled>
       <calcite-menu-item slot="submenu-item" text="Example submenu item 1" text-enabled></calcite-menu-item>
     </calcite-menu-item>
diff --git a/packages/calcite-components/src/components/menu/menu.stories.ts b/packages/calcite-components/src/components/menu/menu.stories.ts
index 69c69eca0ac..7e579ae5052 100644
--- a/packages/calcite-components/src/components/menu/menu.stories.ts
+++ b/packages/calcite-components/src/components/menu/menu.stories.ts
@@ -11,7 +11,7 @@ export default {
   ...storyFilters(),
 };
 
-export const simple = (): string => html` <calcite-menu
+export const simple = (): string => html`<calcite-menu
   layout="${select("layout", ["horizontal", "vertical"], "horizontal")}"
 >
   <calcite-menu-item text="Example item 1" text-enabled></calcite-menu-item>
@@ -19,7 +19,7 @@ export const simple = (): string => html` <calcite-menu
   <calcite-menu-item text="Example item 3" text-enabled></calcite-menu-item>
 </calcite-menu>`;
 
-export const iconsAndBreadcrumb = (): string => html` <calcite-menu>
+export const iconsAndBreadcrumb = (): string => html`<calcite-menu>
   <calcite-menu-item
     icon-start="layer"
     breadcrumb
@@ -37,7 +37,7 @@ export const iconsAndBreadcrumb = (): string => html` <calcite-menu>
   <calcite-menu-item icon-start="layer" icon-end="layer" text="Example item 3" active text-enabled></calcite-menu-item>
 </calcite-menu>`;
 
-export const iconsAndBreadcrumbVertical_TestOnly = (): string => html` <calcite-menu layout="vertical">
+export const iconsAndBreadcrumbVertical_TestOnly = (): string => html`<calcite-menu layout="vertical">
   <calcite-menu-item
     icon-start="layer"
     breadcrumb
@@ -60,33 +60,33 @@ export const withNesting = (): string => html`<calcite-panel>
     <calcite-menu-item text="Example item 1" text-enabled></calcite-menu-item>
     <calcite-menu-item text="Example item 2" text-enabled active></calcite-menu-item>
     <calcite-menu-item text="Example item 3" text-enabled open>
-      <calcite-menu-item slot="submenu-item" text="Example submenu item 1" text-enabled> </calcite-menu-item>
+      <calcite-menu-item slot="submenu-item" text="Example submenu item 1" text-enabled></calcite-menu-item>
       <calcite-menu-item slot="submenu-item" text="Example submenu item 2" text-enabled>
         <calcite-menu-item slot="submenu-item" text="Example submenu item 1" text-enabled></calcite-menu-item>
         <calcite-menu-item slot="submenu-item" text="Example submenu item 2" text-enabled></calcite-menu-item>
         <calcite-menu-item slot="submenu-item" text="Example submenu item 3" text-enabled></calcite-menu-item>
       </calcite-menu-item>
-      <calcite-menu-item slot="submenu-item" text="Example submenu item 3" text-enabled> </calcite-menu-item>
+      <calcite-menu-item slot="submenu-item" text="Example submenu item 3" text-enabled></calcite-menu-item>
     </calcite-menu-item>
-    <calcite-menu-item text="Example item 4" text-enabled></calcite-menu-item> </calcite-menu
+    <calcite-menu-item text="Example item 4" text-enabled></calcite-menu-item></calcite-menu
 ></calcite-panel>`;
 
 export const WithSubmenuOpen_TestOnly = (): string => html`<calcite-menu>
   <calcite-menu-item text="Item" href="#item" open>
-    <calcite-menu-item text="item1" slot="submenu-item" active> </calcite-menu-item>
-    <calcite-menu-item text="item2" slot="submenu-item"> </calcite-menu-item>
+    <calcite-menu-item text="item1" slot="submenu-item" active></calcite-menu-item>
+    <calcite-menu-item text="item2" slot="submenu-item"></calcite-menu-item>
   </calcite-menu-item>
-  <calcite-menu-item text="Item 2" href="#item"> </calcite-menu-item>
-  <calcite-menu-item text="Item 3" href="#item"> </calcite-menu-item>
+  <calcite-menu-item text="Item 2" href="#item"></calcite-menu-item>
+  <calcite-menu-item text="Item 3" href="#item"></calcite-menu-item>
 </calcite-menu>`;
 
-export const WithSubmenuOpenInVerticalLayout_TestOnly = (): string => html` <calcite-menu layout="vertical">
+export const WithSubmenuOpenInVerticalLayout_TestOnly = (): string => html`<calcite-menu layout="vertical">
   <calcite-menu-item text="Item" href="#item" open>
-    <calcite-menu-item text="item1" slot="submenu-item" active> </calcite-menu-item>
-    <calcite-menu-item text="item2" slot="submenu-item" active> </calcite-menu-item>
+    <calcite-menu-item text="item1" slot="submenu-item" active></calcite-menu-item>
+    <calcite-menu-item text="item2" slot="submenu-item" active></calcite-menu-item>
   </calcite-menu-item>
-  <calcite-menu-item text="Item 2" href="#item"> </calcite-menu-item>
-  <calcite-menu-item text="Item 3" href="#item"> </calcite-menu-item>
+  <calcite-menu-item text="Item 2" href="#item"></calcite-menu-item>
+  <calcite-menu-item text="Item 3" href="#item"></calcite-menu-item>
 </calcite-menu>`;
 
 export const darkModeRTL_TestOnly = (): string => html`<calcite-menu dir="rtl" class="calcite-mode-dark">
@@ -95,10 +95,10 @@ export const darkModeRTL_TestOnly = (): string => html`<calcite-menu dir="rtl" c
   <calcite-menu-item text="Example item 3" text-enabled></calcite-menu-item>
 </calcite-menu>`;
 
-export const verticalComplexUseCase_TestOnly = (): string => html` <calcite-shell-panel width-scale="l">
+export const verticalComplexUseCase_TestOnly = (): string => html`<calcite-shell-panel width-scale="l">
   <calcite-panel heading="Extreme nested vertical menu">
     <calcite-menu layout="vertical">
-      <calcite-menu-item icon-start="layer" icon-end="layer" text="Home"> </calcite-menu-item>
+      <calcite-menu-item icon-start="layer" icon-end="layer" text="Home"></calcite-menu-item>
       <calcite-menu-item
         icon-start="layer"
         icon-end="layer"
@@ -111,9 +111,9 @@ export const verticalComplexUseCase_TestOnly = (): string => html` <calcite-shel
         </calcite-menu-item>
         <calcite-menu-item icon-start="layer" slot="submenu-item" title text="ArcGIS Online" breadcrumb open>
           <calcite-menu-item icon-start="layer" slot="submenu-item" text="Capabilities">
-            <calcite-menu-item icon-start="layer" slot="submenu-item" text="Capabilities"> </calcite-menu-item>
-            <calcite-menu-item icon-start="layer" slot="submenu-item" text="Capabilities"> </calcite-menu-item>
-            <calcite-menu-item icon-start="layer" slot="submenu-item" text="Capabilities"> </calcite-menu-item>
+            <calcite-menu-item icon-start="layer" slot="submenu-item" text="Capabilities"></calcite-menu-item>
+            <calcite-menu-item icon-start="layer" slot="submenu-item" text="Capabilities"></calcite-menu-item>
+            <calcite-menu-item icon-start="layer" slot="submenu-item" text="Capabilities"></calcite-menu-item>
           </calcite-menu-item>
         </calcite-menu-item>
       </calcite-menu-item>
@@ -122,36 +122,36 @@ export const verticalComplexUseCase_TestOnly = (): string => html` <calcite-shel
           <calcite-menu-item icon-start="layer" slot="submenu-item" text="Great examples" breadcrumb>
           </calcite-menu-item>
           <calcite-menu-item slot="submenu-item" text="Capabilities" open>
-            <calcite-menu-item slot="submenu-item" text="Capabilities" icon-end="layer"> </calcite-menu-item>
-            <calcite-menu-item slot="submenu-item" text="Great examples" icon-end="layer"> </calcite-menu-item>
+            <calcite-menu-item slot="submenu-item" text="Capabilities" icon-end="layer"></calcite-menu-item>
+            <calcite-menu-item slot="submenu-item" text="Great examples" icon-end="layer"></calcite-menu-item>
           </calcite-menu-item>
-          <calcite-menu-item slot="submenu-item" text="Something else"> </calcite-menu-item>
+          <calcite-menu-item slot="submenu-item" text="Something else"></calcite-menu-item>
           <calcite-menu-item slot="submenu-item" text="Another thing">
             <calcite-menu-item slot="submenu-item" text="Great examples">
-              <calcite-menu-item slot="submenu-item" text="Great examples" breadcrumb> </calcite-menu-item>
-              <calcite-menu-item slot="submenu-item" text="Great examples" icon-end="layer"> </calcite-menu-item>
-              <calcite-menu-item slot="submenu-item" text="Great examples"> </calcite-menu-item>
+              <calcite-menu-item slot="submenu-item" text="Great examples" breadcrumb></calcite-menu-item>
+              <calcite-menu-item slot="submenu-item" text="Great examples" icon-end="layer"></calcite-menu-item>
+              <calcite-menu-item slot="submenu-item" text="Great examples"></calcite-menu-item>
             </calcite-menu-item>
           </calcite-menu-item>
         </calcite-menu-item>
         <calcite-menu-item href="#" slot="submenu-item" text="It's stupendous">
-          <calcite-menu-item slot="submenu-item" text="Very nice example"> </calcite-menu-item>
+          <calcite-menu-item slot="submenu-item" text="Very nice example"></calcite-menu-item>
           <calcite-menu-item slot="submenu-item" text="Short one">
             <calcite-menu-item slot="submenu-item" text="Another thing">
               <calcite-menu-item slot="submenu-item" text="Great examples">
-                <calcite-menu-item slot="submenu-item" text="Great examples"> </calcite-menu-item>
-                <calcite-menu-item slot="submenu-item" text="Great examples"> </calcite-menu-item>
-                <calcite-menu-item slot="submenu-item" text="Great examples"> </calcite-menu-item>
+                <calcite-menu-item slot="submenu-item" text="Great examples"></calcite-menu-item>
+                <calcite-menu-item slot="submenu-item" text="Great examples"></calcite-menu-item>
+                <calcite-menu-item slot="submenu-item" text="Great examples"></calcite-menu-item>
               </calcite-menu-item>
             </calcite-menu-item>
           </calcite-menu-item>
         </calcite-menu-item>
-        <calcite-menu-item slot="submenu-item" text="Capabilities"> </calcite-menu-item>
+        <calcite-menu-item slot="submenu-item" text="Capabilities"></calcite-menu-item>
       </calcite-menu-item>
-      <calcite-menu-item slot="submenu-item" text="Capabilities"> </calcite-menu-item>
-      <calcite-menu-item text="Reference" active> </calcite-menu-item>
-      <calcite-menu-item text="Reference"> </calcite-menu-item>
-      <calcite-menu-item text="Reference"> </calcite-menu-item>
+      <calcite-menu-item slot="submenu-item" text="Capabilities"></calcite-menu-item>
+      <calcite-menu-item text="Reference" active></calcite-menu-item>
+      <calcite-menu-item text="Reference"></calcite-menu-item>
+      <calcite-menu-item text="Reference"></calcite-menu-item>
     </calcite-menu>
   </calcite-panel>
 </calcite-shell-panel>`;

From 03c736812452702ac84bdecd9b22a84d9048b812 Mon Sep 17 00:00:00 2001
From: Adam <adam@tirel.la>
Date: Thu, 27 Jul 2023 12:48:56 -0700
Subject: [PATCH 14/16] Clean up

---
 packages/calcite-components/src/components/menu/menu.stories.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/calcite-components/src/components/menu/menu.stories.ts b/packages/calcite-components/src/components/menu/menu.stories.ts
index 7e579ae5052..90b10c3a6e3 100644
--- a/packages/calcite-components/src/components/menu/menu.stories.ts
+++ b/packages/calcite-components/src/components/menu/menu.stories.ts
@@ -83,7 +83,7 @@ export const WithSubmenuOpen_TestOnly = (): string => html`<calcite-menu>
 export const WithSubmenuOpenInVerticalLayout_TestOnly = (): string => html`<calcite-menu layout="vertical">
   <calcite-menu-item text="Item" href="#item" open>
     <calcite-menu-item text="item1" slot="submenu-item" active></calcite-menu-item>
-    <calcite-menu-item text="item2" slot="submenu-item" active></calcite-menu-item>
+    <calcite-menu-item text="item2" slot="submenu-item"></calcite-menu-item>
   </calcite-menu-item>
   <calcite-menu-item text="Item 2" href="#item"></calcite-menu-item>
   <calcite-menu-item text="Item 3" href="#item"></calcite-menu-item>

From 8ea3c82e7093ec1b37cb715ef481cd0858b219e4 Mon Sep 17 00:00:00 2001
From: Adam <adam@tirel.la>
Date: Thu, 27 Jul 2023 13:22:28 -0700
Subject: [PATCH 15/16] Update stories

---
 .../calcite-components/src/components/menu/menu.stories.ts  | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/calcite-components/src/components/menu/menu.stories.ts b/packages/calcite-components/src/components/menu/menu.stories.ts
index 90b10c3a6e3..81b462cb10f 100644
--- a/packages/calcite-components/src/components/menu/menu.stories.ts
+++ b/packages/calcite-components/src/components/menu/menu.stories.ts
@@ -136,9 +136,9 @@ export const verticalComplexUseCase_TestOnly = (): string => html`<calcite-shell
         </calcite-menu-item>
         <calcite-menu-item href="#" slot="submenu-item" text="It's stupendous">
           <calcite-menu-item slot="submenu-item" text="Very nice example"></calcite-menu-item>
-          <calcite-menu-item slot="submenu-item" text="Short one">
-            <calcite-menu-item slot="submenu-item" text="Another thing">
-              <calcite-menu-item slot="submenu-item" text="Great examples">
+          <calcite-menu-item icon-start="layer" slot="submenu-item" text="Short one" open>
+            <calcite-menu-item icon-start="layer" slot="submenu-item" text="Another thing" open>
+              <calcite-menu-item icon-start="layer" slot="submenu-item" text="Great examples" open>
                 <calcite-menu-item slot="submenu-item" text="Great examples"></calcite-menu-item>
                 <calcite-menu-item slot="submenu-item" text="Great examples"></calcite-menu-item>
                 <calcite-menu-item slot="submenu-item" text="Great examples"></calcite-menu-item>

From be9330d2e2e0c81aeaf630d43122ea48f9d9b239 Mon Sep 17 00:00:00 2001
From: Adam <adam@tirel.la>
Date: Thu, 27 Jul 2023 13:23:18 -0700
Subject: [PATCH 16/16] Pr feedback

---
 .../calcite-components/src/components/menu-item/menu-item.tsx   | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/calcite-components/src/components/menu-item/menu-item.tsx b/packages/calcite-components/src/components/menu-item/menu-item.tsx
index a37c8bd7716..306ae9bea7f 100644
--- a/packages/calcite-components/src/components/menu-item/menu-item.tsx
+++ b/packages/calcite-components/src/components/menu-item/menu-item.tsx
@@ -442,7 +442,7 @@ export class CalciteMenuItem implements LoadableComponent, T9nComponent, Localiz
       <calcite-icon
         class={CSS.hoverHrefIcon}
         icon={dir === "rtl" ? "arrow-left" : "arrow-right"}
-        key={CSS.dropdownAction}
+        key={CSS.hoverHrefIcon}
         scale="s"
       />
     );